diff --git a/README.md b/README.md
index af732df..667238f 100644
--- a/README.md
+++ b/README.md
@@ -168,4 +168,4 @@ Im bisherigen Konzept wurden mehrere Ansichten vorbereitet, unter anderem:
 - Neue Vorbestellung auf dem iPad
 - Bestellübersicht auf dem iPad
 - Retourenerfassung auf dem iPad
-- Verwaltungsansichten für Produkte, Berichte und Planung
+- Verwaltungsansichten für Produkte, Berichte und Planung
\ No newline at end of file
diff --git a/kalender.html b/kalender.html
new file mode 100644
index 0000000..8af298a
--- /dev/null
+++ b/kalender.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bestellkalender Demo</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f9f9f9;
+            margin: 0;
+            padding: 20px;
+        }
+        .calendar-container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .btn {
+            padding: 8px 16px;
+            background: #007bff;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+        .btn:hover {
+            background: #0056b3;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: fixed;
+        }
+        th {
+            background: #f1f3f5;
+            color: #495057;
+            padding: 12px;
+            text-align: center;
+            font-weight: bold;
+            border: 1px solid #dee2e6;
+        }
+        td {
+            border: 1px solid #dee2e6;
+            padding: 8px;
+            height: 100px;
+            vertical-align: top;
+            background: #fff;
+        }
+        .day-number {
+            font-weight: bold;
+            color: #6c757d;
+            margin-bottom: 5px;
+            display: block;
+        }
+        /* Style für Tage außerhalb des aktuellen Monats */
+        .other-month {
+            background: #f8f9fa;
+        }
+        .other-month .day-number {
+            color: #cee2e6;
+            opacity: 0.5;
+        }
+        /* CSS für die Bestell-Labels */
+        .order-badge {
+            font-size: 11px;
+            padding: 4px 6px;
+            margin-top: 4px;
+            border-radius: 3px;
+            display: block;
+            text-decoration: none;
+        }
+        .order-success {
+            background-color: #d4edda;
+            color: #155724;
+            border-left: 3px solid #28a745;
+        }
+        .order-pending {
+            background-color: #fff3cd;
+            color: #856404;
+            border-left: 3px solid #ffc107;
+        }
+    </style>
+</head>
+<body>
+
+<div class="calendar-container">
+    
+    <!-- Kalender Kopfbereich für die Navigation -->
+    <div class="calendar-header">
+        <button class="btn">&laquo; Vorheriger</button>
+        <h2>Oktober 2026</h2>
+        <button class="btn">Nächster &raquo;</button>
+    </div>
+
+    <!-- Kalender Tabelle -->
+    <table>
+        <thead>
+            <tr>
+                <th>Mo</th>
+                <th>Di</th>
+                <th>Mi</th>
+                <th>Do</th>
+                <th>Fr</th>
+                <th>Sa</th>
+                <th>So</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <!-- Leere Tage / Vormonat -->
+                <td class="other-month"><span class="day-number">28</span></td>
+                <td class="other-month"><span class="day-number">29</span></td>
+                <td class="other-month"><span class="day-number">30</span></td>
+                
+                <!-- Aktueller Monat startet -->
+                <td>
+                    <span class="day-number">1</span>
+                    <div class="order-badge order-success">#1024 - Geliefert</div>
+                </td>
+                <td><span class="day-number">2</span></td>
+                <td><span class="day-number">3</span></td>
+                <td><span class="day-number">4</span></td>
+            </tr>
+            <tr>
+                <td><span class="day-number">5</span></td>
+                <td>
+                    <span class="day-number">6</span>
+                    <div class="order-badge order-pending">#1025 - Offen</div>
+                    <div class="order-badge order-success">#1026 - Geliefert</div>
+                </td>
+                <td><span class="day-number">7</span></td>
+                <td><span class="day-number">8</span></td>
+                <td><span class="day-number">9</span></td>
+                <td><span class="day-number">10</span></td>
+                <td><span class="day-number">11</span></td>
+            </tr>
+            <tr>
+                <td><span class="day-number">12</span></td>
+                <td><span class="day-number">13</span></td>
+                <td><span class="day-number">14</span></td>
+                <td><span class="day-number">15</span></td>
+                <td><span class="day-number">16</span></td>
+                <td><span class="day-number">17</span></td>
+                <td><span class="day-number">18</span></td>
+            </tr>
+            <tr>
+                <td><span class="day-number">19</span></td>
+                <td><span class="day-number">20</span></td>
+                <td><span class="day-number">21</span></td>
+                <td><span class="day-number">22</span></td>
+                <td><span class="day-number">23</span></td>
+                <td><span class="day-number">24</span></td>
+                <td><span class="day-number">25</span></td>
+            </tr>
+            <tr>
+                <td><span class="day-number">26</span></td>
+                <td><span class="day-number">27</span></td>
+                <td><span class="day-number">28</span></td>
+                <td><span class="day-number">29</span></td>
+                <td><span class="day-number">30</span></td>
+                <td><span class="day-number">31</span></td>
+                <!-- Nächster Monat auffüllen -->
+                <td class="other-month"><span class="day-number">1</span></td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+</body>
+</html>
diff --git a/login.html b/login.html
index cd8cb29..6dadc8b 100644
--- a/login.html
+++ b/login.html
@@ -1,71 +1,107 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
     <header class="site-header">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
-            <div class="container">
-                <a class="navbar-brand" href="#" aria-label="Startseite">
-                    <img class="logo" src="https://schmidts-backstuebchen.lms.backbuero.de/pluginfile.php/1/core_admin/logocompact/300x300/1783888825/Logo-SBS-4000px-PNG.png" alt="Schmidts Bestprogramm Logo">
-                </a>
-                
-                <!-- Rechteverteilung:
+      <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
+        <div class="container">
+          <a class="navbar-brand" href="#" aria-label="Startseite">
+            <img
+              class="logo"
+              src="https://schmidts-backstuebchen.lms.backbuero.de/pluginfile.php/1/core_admin/logocompact/300x300/1783888825/Logo-SBS-4000px-PNG.png"
+              alt="Schmidts Bestprogramm Logo"
+            />
+          </a>
+
+          <!-- Rechteverteilung:
                 Admin: Zugriff auf alle Funktionen und Einstellungen
                 Mitarbeiter: Zugriff auf Bestellungen und Retouren -->
 
-                <div class="collapse navbar-collapse" id="mainNav">
-                    <ul class="navbar-nav ms-auto me-3 align-items-center gap-lg-2">
-                        <li class="nav-item"><a class="nav-link" href="#">Übersicht</a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Bestellungen</a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Retouren</a></li>
-                        <li class="nav-item"><a class="nav-link" href="#">Berichte</a></li>
-                    </ul>
-                    <div class="d-flex gap-2">
+          <div class="collapse navbar-collapse" id="mainNav">
+            <ul class="navbar-nav ms-auto me-3 align-items-center gap-lg-2">
+              <li class="nav-item">
+                <a class="nav-link" href="#">Übersicht</a>
+              </li>
 
-                        <!-- Hilfe-Button: Öffnet eine Seite mit Anleitungen und einer einfachen Möglichkeit, das System zu verstehen. -->
+              <li class="nav-item dropdown">
+                <a
+                  class="nav-link dropdown-toggle"
+                  href="#"
+                  id="bestellungenDropdown"
+                  role="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  Bestellungen
+                </a>
+                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="bestellungenDropdown">
+                  <li><a class="dropdown-item" href="kalender.html">Bestellkalender</a></li>
+                  <li><a class="dropdown-item" href="#">Bestellungen verwalten</a></li>
+                  <li><a class="dropdown-item" href="#">Neue Bestellung</a></li>
+                </ul>
+              </li>
 
-                        <a class="btn btn-outline-light" href="#">Hilfe</a>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Retouren</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Berichte</a>
+              </li>
+            </ul>
+            <div class="d-flex gap-2">
+              <!-- Hilfe-Button: Öffnet eine Seite mit Anleitungen und einer einfachen Möglichkeit, das System zu verstehen. -->
 
-                        <!-- Login-Button: Führt den Benutzer zur Login-Seite, um sich anzumelden und Zugriff auf die Funktionen zu erhalten. -->
-                        <a class="btn btn-danger" href="login.html">Login</a>
-                    </div>
-                </div>
+              <a class="btn btn-outline-light" href="#">Hilfe</a>
+
+              <!-- Login-Button: Führt den Benutzer zur Login-Seite, um sich anzumelden und Zugriff auf die Funktionen zu erhalten. -->
+              <a class="btn btn-danger" href="login.html">Login</a>
             </div>
-        </nav>
+          </div>
+        </div>
+      </nav>
     </header>
 
     <main class="page-content">
-        <section class="wrapper container py-5">
-            <div class="login-info">
-                <p class="eyebrow">Serviceportal</p>
-                <h2>Willkommen zurück!</h2>
-                <p>Bitte loggen Sie sich ein, um fortzufahren.</p>
-            </div>
+      <section class="wrapper container py-5">
+        <div class="login-form">
+          <form action="login.php" method="post">
+            <h2>Login</h2>
+            <label for="username">Benutzername</label>
+            <input
+              id="username"
+              type="text"
+              name="username"
+              placeholder="Benutzername"
+              required
+            />
 
-            <div class="login-form">
-                <form action="login.php" method="post">
-                    <h2>Login</h2>
-                    <label for="username">Benutzername</label>
-                    <input id="username" type="text" name="username" placeholder="Benutzername" required>
+            <label for="password">Passwort</label>
+            <input
+              id="password"
+              type="password"
+              name="password"
+              placeholder="Passwort"
+              required
+            />
 
-                    <label for="password">Passwort</label>
-                    <input id="password" type="password" name="password" placeholder="Passwort" required>
-
-                    <button type="submit">Anmelden</button>
-                </form>
-            </div>
-        </section>
+            <button type="submit">Anmelden</button>
+          </form>
+        </div>
+      </section>
     </main>
 
     <footer class="site-footer mt-5">
-        <div class="container py-4">
-            <!-- <div class="row g-4 align-items-center">
+      <div class="container py-4">
+        <!-- <div class="row g-4 align-items-center">
                 
 
                 <div class="col-md-3 footer-links">
@@ -83,16 +119,28 @@
                 </div> 
             </div> -->
 
-            <div class="footer-bottom border-top mt-4 pt-3 text-center">
-                <div class="col-md-5 footer-brand">
-                    <img class="logo logo-small" src="https://www.webcore-consulting.de/assets/img/logo-white.svg" alt="Webcore Consulting Logo">
-                    <p class="mb-0 small text-secondary">entwickelt von Webcore-Consulting</p>
-                </div>
-                
-            </div>
+        <div
+          class="footer-bottom border-top mt-4 pt-3 d-flex justify-content-between align-items-center gap-3 flex-wrap"
+        >
+          <div class="footer-brand text-center text-md-start">
+            <img
+              class="logo logo-small mx-auto mx-md-0"
+              src="https://www.webcore-consulting.de/assets/img/logo-white.svg"
+              alt="Webcore Consulting Logo"
+            />
+            <p class="mb-0 small text-secondary">
+              entwickelt von Webcore Consulting
+            </p>
+          </div>
+
+          <div class="footer-links text-md-end">
+            <a href="#">Impressum</a>
+            <a href="#">Datenschutz</a>
+          </div>
         </div>
+      </div>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/style.css b/style.css
index 0d8409e..248f6ea 100644
--- a/style.css
+++ b/style.css
@@ -21,19 +21,45 @@ img {
     height: auto;
 }
 
+.navbar-nav .dropdown-menu {
+    margin-top: 0.5rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+}
+
+.navbar-nav .dropdown-item {
+    color: #f3f3f3;
+    padding: 0.6rem 1rem;
+}
+
+.navbar-nav .dropdown-item:hover,
+.navbar-nav .dropdown-item:focus {
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+}
+
 .logo-small {
     max-width: 110px;
 }
 
 .page-content {
     flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 0;
 }
 
 .wrapper {
-    display: grid;
-    grid-template-columns: 1.2fr 1fr;
-    gap: 32px;
+    width: 100%;
+    display: flex;
     align-items: center;
+    justify-content: center;
+}
+
+.wrapper-container {
+    display: flex;
 }
 
 .login-info {
@@ -57,10 +83,13 @@ img {
 }
 
 .login-form {
+    width: min(100%, 420px);
     background: #fff;
     padding: 30px 24px;
     border-radius: 18px;
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
+    justify-content: center;
+    align-self: center;
 }
 
 .login-form form {
@@ -103,6 +132,7 @@ img {
     display: flex;
     flex-direction: column;
     gap: 12px;
+    align-items: flex-start;
 }
 
 .footer-brand p {
@@ -112,8 +142,16 @@ img {
 
 .footer-links {
     display: flex;
-    flex-direction: column;
-    gap: 8px;
+    flex-direction: row;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .footer-links h3 {