From 37cacd895aa0f23e1dd9c2b98707dfca230e75c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A1nek=20Pavel?= <pavel.stanek@marbes.cz>
Date: Tue, 3 Feb 2026 10:37:27 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20aplikace=20pomoc=C3=AD=20cla?=
 =?UTF-8?q?ude=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/index.html                             |   21 +-
 client/src/App.scss                           | 1071 +++++++++++++++--
 client/src/App.tsx                            |  272 +++--
 client/src/Login.css                          |   90 +-
 client/src/Login.tsx                          |   42 +-
 client/src/components/Footer.tsx              |   22 +-
 client/src/components/Header.tsx              |   65 +-
 client/src/components/Loader.tsx              |   12 +-
 client/src/components/PizzaOrderList.tsx      |   58 +-
 .../components/modals/RefreshMenuModal.tsx    |   34 +-
 .../src/components/modals/SettingsModal.tsx   |  113 +-
 client/src/context/settings.tsx               |   18 +-
 client/src/index.css                          |   22 +-
 client/src/pages/StatsPage.scss               |   84 +-
 14 files changed, 1537 insertions(+), 387 deletions(-)

diff --git a/client/index.html b/client/index.html
index 3956158..94def8b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -12,13 +12,22 @@
   <title>Luncher</title>
   <script>
     (function() {
-      var saved = localStorage.getItem('theme_preference');
-      var theme = 'light';
-      if (saved === 'dark') theme = 'dark';
-      else if (saved === 'system' || !saved) {
-        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      try {
+        var saved = localStorage.getItem('theme_preference');
+        var theme;
+        if (saved === 'dark') {
+          theme = 'dark';
+        } else if (saved === 'light') {
+          theme = 'light';
+        } else {
+          // 'system' nebo neuloženo - použij systémové nastavení
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-bs-theme', theme);
+      } catch (e) {
+        // Fallback pokud localStorage není dostupný
+        document.documentElement.setAttribute('data-bs-theme', 'light');
       }
-      document.documentElement.setAttribute('data-bs-theme', theme);
     })();
   </script>
 </head>
diff --git a/client/src/App.scss b/client/src/App.scss
index c9fd1cf..9bdabc3 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -1,98 +1,422 @@
+// ============================================
+// DESIGN SYSTEM - LUNCHER APP
+// ============================================
+
+// Color palette - Spotify-style green scheme
 :root, [data-bs-theme="light"] {
-  --luncher-navbar-bg: #3c3c3c;
-  --luncher-action-icon: rgb(0, 89, 255);
-  --luncher-buyer-icon: #dbba00;
-  --luncher-text-muted: gray;
+  // Primary colors - Vibrant green
+  --luncher-primary: #16a34a;
+  --luncher-primary-hover: #15803d;
+  --luncher-primary-light: #dcfce7;
+
+  // Background colors
+  --luncher-bg: #f9fafb;
+  --luncher-bg-card: #ffffff;
+  --luncher-bg-hover: #f3f4f6;
+
+  // Text colors
+  --luncher-text: #111827;
+  --luncher-text-secondary: #4b5563;
+  --luncher-text-muted: #9ca3af;
+
+  // Border colors
+  --luncher-border: #e5e7eb;
+  --luncher-border-light: #f3f4f6;
+
+  // Navbar - Dark
+  --luncher-navbar-bg: #111827;
+  --luncher-navbar-text: #f9fafb;
+
+  // Action colors
+  --luncher-action-icon: #16a34a;
+  --luncher-buyer-icon: #d97706;
+  --luncher-success: #16a34a;
+  --luncher-warning: #d97706;
+  --luncher-danger: #dc2626;
+
+  // Shadows
+  --luncher-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --luncher-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --luncher-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  // Border radius
+  --luncher-radius-sm: 6px;
+  --luncher-radius: 10px;
+  --luncher-radius-lg: 12px;
+  --luncher-radius-xl: 16px;
+
+  // Transitions
+  --luncher-transition: all 0.2s ease;
+  --luncher-transition-slow: all 0.3s ease;
 }
 
 [data-bs-theme="dark"] {
-  --luncher-navbar-bg: #1a1d21;
-  --luncher-action-icon: #5c9aff;
-  --luncher-buyer-icon: #ffd700;
-  --luncher-text-muted: #9ca3af;
+  // Primary colors - Spotify green
+  --luncher-primary: #1db954;
+  --luncher-primary-hover: #1ed760;
+  --luncher-primary-light: #052e16;
+
+  // Background colors - True dark like Spotify
+  --luncher-bg: #121212;
+  --luncher-bg-card: #181818;
+  --luncher-bg-hover: #282828;
+
+  // Text colors
+  --luncher-text: #ffffff;
+  --luncher-text-secondary: #b3b3b3;
+  --luncher-text-muted: #6b7280;
+
+  // Border colors
+  --luncher-border: #282828;
+  --luncher-border-light: #1f1f1f;
+
+  // Navbar
+  --luncher-navbar-bg: #000000;
+  --luncher-navbar-text: #ffffff;
+
+  // Action colors
+  --luncher-action-icon: #1db954;
+  --luncher-buyer-icon: #fbbf24;
+  --luncher-success: #1db954;
+  --luncher-warning: #fbbf24;
+  --luncher-danger: #f87171;
+
+  // Shadows
+  --luncher-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+  --luncher-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --luncher-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
 }
 
-.App {
-  text-align: center;
-}
+// ============================================
+// BASE STYLES
+// ============================================
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loader {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.loader>.loader-icon {
-  font-size: 64px;
-}
-
-/* Sticky footer layout */
-html,
-body,
-#root {
+html, body, #root {
   height: 100%;
   margin: 0;
 }
 
+html {
+  overflow-x: hidden;
+}
+
+body {
+  background-color: var(--luncher-bg);
+  color: var(--luncher-text);
+  transition: var(--luncher-transition-slow);
+}
+
+// ============================================
+// APP CONTAINER
+// ============================================
+
 .app-container {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: var(--luncher-bg);
 }
 
 .wrapper {
-  padding: 20px;
+  padding: 24px;
   flex: 1;
-  /* Zabere zbytek místa */
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+
+  @media (max-width: 768px) {
+    padding: 16px;
+  }
 }
 
+// ============================================
+// NAVBAR
+// ============================================
+
+.navbar {
+  background: var(--luncher-navbar-bg) !important;
+  padding: 12px 24px;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--luncher-border);
+
+  .navbar-brand {
+    font-weight: 700;
+    font-size: 1.5rem;
+    letter-spacing: -0.5px;
+    color: var(--luncher-navbar-text) !important;
+    transition: var(--luncher-transition);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .nav-link, .dropdown-toggle {
+    color: var(--luncher-navbar-text) !important;
+    font-weight: 500;
+    transition: var(--luncher-transition);
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  .dropdown-menu {
+    background: var(--luncher-bg-card);
+    border: 1px solid var(--luncher-border);
+    border-radius: var(--luncher-radius);
+    box-shadow: var(--luncher-shadow-lg);
+    padding: 8px;
+    margin-top: 8px;
+
+    .dropdown-item {
+      color: var(--luncher-text);
+      border-radius: var(--luncher-radius-sm);
+      padding: 10px 16px;
+      transition: var(--luncher-transition);
+      font-weight: 500;
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+        color: var(--luncher-primary);
+      }
+    }
+
+    .dropdown-divider {
+      border-color: var(--luncher-border);
+      margin: 8px 0;
+    }
+  }
+}
+
+#basic-navbar-nav {
+  justify-content: flex-end;
+}
+
+// Theme toggle button
+.theme-toggle {
+  background: transparent;
+  border: none;
+  color: var(--luncher-navbar-text);
+  padding: 8px 12px;
+  margin-right: 16px;
+  border-radius: var(--luncher-radius-sm);
+  cursor: pointer;
+  transition: var(--luncher-transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(1.1);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+  }
+
+  svg {
+    transition: transform 0.3s ease;
+  }
+
+  &:hover svg {
+    transform: rotate(15deg);
+  }
+}
+
+// ============================================
+// TYPOGRAPHY & TITLES
+// ============================================
+
 .title {
-  margin: 50px 20px;
+  margin: 32px 0;
+  font-weight: 700;
+  font-size: 2rem;
+  color: var(--luncher-text);
+
+  &.text-muted {
+    color: var(--luncher-text-muted) !important;
+  }
 }
 
-.food-tables {
-  margin-bottom: 50px;
+// ============================================
+// DAY NAVIGATOR
+// ============================================
+
+.day-navigator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 32px;
+
+  svg {
+    font-size: 1.5rem;
+    color: var(--luncher-text-secondary);
+    cursor: pointer;
+    padding: 12px;
+    border-radius: 50%;
+    background: var(--luncher-bg-card);
+    box-shadow: var(--luncher-shadow-sm);
+    transition: var(--luncher-transition);
+
+    &:hover {
+      color: var(--luncher-primary);
+      background: var(--luncher-primary-light);
+      transform: scale(1.05);
+    }
+  }
+
+  h1 {
+    margin: 0;
+    min-width: 300px;
+    text-align: center;
+  }
 }
 
+// ============================================
+// FOOD TABLES - CARD STYLE
+// ============================================
+
+.food-tables {
+  margin-bottom: 48px;
+  display: flex;
+  flex-wrap: wrap;
+
+  > [class*="col-"] {
+    margin-bottom: 24px;
+    display: flex;
+  }
+}
+
+.restaurant-card {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-lg);
+  box-shadow: var(--luncher-shadow);
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: var(--luncher-transition);
+  border: 1px solid var(--luncher-border-light);
+
+  &:hover {
+    box-shadow: var(--luncher-shadow-lg);
+    transform: translateY(-2px);
+  }
+
+  .restaurant-header {
+    background: var(--luncher-primary);
+    padding: 16px 20px;
+    border-bottom: none;
+    cursor: pointer;
+    transition: var(--luncher-transition);
+
+    &:hover {
+      background: var(--luncher-primary-hover);
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: #ffffff;
+      cursor: pointer;
+    }
+
+    small {
+      display: block;
+      margin-top: 4px;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 0.75rem;
+    }
+  }
+
+  .restaurant-closed {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--luncher-text-muted);
+    font-weight: 500;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .restaurant-error {
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--luncher-danger);
+    font-weight: 500;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .food-table {
+    flex: 1;
+  }
+}
+
+.food-table {
+  margin: 0;
+
+  tbody tr {
+    transition: var(--luncher-transition);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--luncher-bg-hover);
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+  }
+
+  td {
+    padding: 12px 16px;
+    border-color: var(--luncher-border-light);
+    vertical-align: middle;
+    color: var(--luncher-text);
+
+    &:first-child {
+      width: 60px;
+      text-align: center;
+      font-weight: 500;
+      color: var(--luncher-text-secondary);
+    }
+
+    &:last-child {
+      width: 80px;
+      text-align: right;
+      font-weight: 600;
+      color: var(--luncher-primary);
+    }
+  }
+
+  .allergen-link {
+    cursor: help;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    color: var(--luncher-text-muted);
+    font-size: 0.85em;
+
+    &:hover {
+      color: var(--luncher-primary);
+    }
+  }
+}
+
+// ============================================
+// CHOICE FORM
+// ============================================
+
 .content-wrapper {
   width: 100%;
   display: flex;
@@ -100,69 +424,456 @@ body,
   align-items: center;
 }
 
-.navbar {
-  background-color: var(--luncher-navbar-bg);
-  padding-left: 20px;
-  padding-right: 20px;
+.content {
+  width: 100%;
+  max-width: 700px;
 }
 
-#basic-navbar-nav {
-  justify-content: flex-end;
-}
+.choice-section {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-lg);
+  padding: 24px;
+  box-shadow: var(--luncher-shadow);
+  margin-bottom: 32px;
+  border: 1px solid var(--luncher-border-light);
 
-.table {
-  margin-bottom: 0;
-}
-
-.table> :not(caption) {
-  .action-icon {
-    color: var(--luncher-action-icon);
-    cursor: pointer;
-    margin-left: 10px;
-    padding: 0;
+  p {
+    margin-bottom: 12px;
+    font-weight: 500;
+    color: var(--luncher-text);
   }
 
-  .buyer-icon {
-    color: var(--luncher-buyer-icon);
-    margin-left: 10px;
-    padding: 0;
+  small {
+    display: block;
+    margin-top: 8px;
+    color: var(--luncher-text-muted);
+    font-size: 0.85rem;
   }
 }
 
-.table ul {
-  padding: 0;
-  margin-left: 20px;
-  margin-bottom: 0;
+// ============================================
+// FORM CONTROLS
+// ============================================
+
+.form-select, .form-control {
+  background-color: var(--luncher-bg);
+  border: 2px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-sm);
+  padding: 12px 16px;
+  font-size: 1rem;
+  color: var(--luncher-text);
+  transition: var(--luncher-transition);
+
+  &:hover {
+    border-color: var(--luncher-text-muted);
+  }
+
+  &:focus {
+    border-color: var(--luncher-primary);
+    box-shadow: 0 0 0 3px var(--luncher-primary-light);
+    outline: none;
+  }
 }
 
-.table td {
-  vertical-align: top;
+input[type="text"], input[type="email"], input[type="password"] {
+  background-color: var(--luncher-bg);
+  border: 2px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-sm);
+  padding: 12px 16px;
+  font-size: 1rem;
+  color: var(--luncher-text);
+  transition: var(--luncher-transition);
+  width: 100%;
+
+  &:hover {
+    border-color: var(--luncher-text-muted);
+  }
+
+  &:focus {
+    border-color: var(--luncher-primary);
+    box-shadow: 0 0 0 3px var(--luncher-primary-light);
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--luncher-text-muted);
+  }
 }
 
-.table>tbody>tr>td>table>tbody>tr>td {
+// ============================================
+// BUTTONS
+// ============================================
+
+.btn {
+  border-radius: var(--luncher-radius-sm);
+  padding: 12px 24px;
+  font-weight: 600;
+  transition: var(--luncher-transition);
   border: none;
+
+  &:focus {
+    box-shadow: 0 0 0 3px var(--luncher-primary-light);
+  }
 }
 
-.qr-code {
+.btn-primary {
+  background: var(--luncher-primary);
+  color: white;
+
+  &:hover {
+    background: var(--luncher-primary-hover);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.btn-secondary {
+  background: var(--luncher-bg-hover);
+  color: var(--luncher-text);
+
+  &:hover {
+    background: var(--luncher-border);
+  }
+}
+
+.btn-danger, .btn.danger {
+  background: var(--luncher-danger);
+  color: white;
+
+  &:hover {
+    background: #dc2626;
+  }
+}
+
+.btn-outline-primary {
+  background: transparent;
+  border: 2px solid var(--luncher-primary);
+  color: var(--luncher-primary);
+
+  &:hover {
+    background: var(--luncher-primary);
+    color: white;
+  }
+}
+
+// ============================================
+// CHOICES TABLE
+// ============================================
+
+.choices-table {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-lg);
+  box-shadow: var(--luncher-shadow);
+  overflow: hidden;
+  border: 1px solid var(--luncher-border-light);
+
+  > tbody > tr {
+    &:last-child > td {
+      border-bottom: none;
+    }
+
+    > td {
+      padding: 0;
+      border-color: var(--luncher-border);
+      vertical-align: top;
+
+      &:first-child {
+        background: var(--luncher-primary-light);
+        padding: 16px 20px;
+        font-weight: 600;
+        color: var(--luncher-primary);
+        width: 180px;
+
+        @media (max-width: 576px) {
+          width: 120px;
+          padding: 12px 16px;
+          font-size: 0.9rem;
+        }
+      }
+    }
+  }
+
+  .nested-table {
+    margin: 0;
+
+    tbody tr {
+      transition: var(--luncher-transition);
+
+      &:hover {
+        background: var(--luncher-bg-hover);
+      }
+
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    td {
+      padding: 12px 16px;
+      border-color: var(--luncher-border-light);
+      color: var(--luncher-text);
+    }
+  }
+
+  ul {
+    padding: 0;
+    margin: 8px 0 0 20px;
+
+    li {
+      color: var(--luncher-text-secondary);
+      font-size: 0.9rem;
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.no-votes {
   text-align: center;
-  margin-top: 30px;
+  padding: 48px 24px;
+  color: var(--luncher-text-muted);
+  font-style: italic;
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-lg);
+  box-shadow: var(--luncher-shadow);
 }
 
-.select-search-container {
-  margin: auto;
+// ============================================
+// ACTION ICONS
+// ============================================
+
+.action-icon {
+  color: var(--luncher-action-icon);
+  cursor: pointer;
+  margin-left: 12px;
+  padding: 4px;
+  border-radius: 4px;
+  transition: var(--luncher-transition);
+
+  &:hover {
+    background: var(--luncher-primary-light);
+    transform: scale(1.1);
+  }
+}
+
+.buyer-icon {
+  color: var(--luncher-buyer-icon);
+  margin-left: 12px;
+  padding: 4px;
 }
 
 .trusted-icon {
-  color: var(--luncher-action-icon);
-  margin-right: 10px;
+  color: var(--luncher-success);
+  margin-right: 8px;
 }
 
-.day-navigator {
-  display: flex;
-  align-items: center;
-  font-size: xx-large;
+// ============================================
+// PIZZA DAY SECTION
+// ============================================
+
+.pizza-section {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-lg);
+  padding: 32px;
+  box-shadow: var(--luncher-shadow);
+  text-align: center;
+  margin-top: 48px;
+  border: 1px solid var(--luncher-border-light);
+
+  h3 {
+    color: var(--luncher-primary);
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+
+  p {
+    color: var(--luncher-text-secondary);
+    margin-bottom: 24px;
+  }
+
+  .btn + .btn {
+    margin-left: 16px;
+  }
 }
 
+.pizza-order-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 24px;
+
+  input[type="text"] {
+    width: auto;
+    min-width: 200px;
+  }
+}
+
+// ============================================
+// QR CODE
+// ============================================
+
+.qr-code {
+  text-align: center;
+  margin-top: 32px;
+  padding: 24px;
+  background: var(--luncher-bg);
+  border-radius: var(--luncher-radius);
+
+  h3 {
+    color: var(--luncher-text);
+    margin-bottom: 16px;
+  }
+
+  img {
+    border-radius: var(--luncher-radius-sm);
+    box-shadow: var(--luncher-shadow);
+  }
+}
+
+// ============================================
+// ALERT
+// ============================================
+
+.alert {
+  border-radius: var(--luncher-radius);
+  border: none;
+  box-shadow: var(--luncher-shadow-sm);
+  position: relative;
+  overflow: visible;
+
+  &.alert-primary {
+    background: var(--luncher-primary-light);
+    color: var(--luncher-primary);
+    border-left: 4px solid var(--luncher-primary);
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding-left: 20px;
+
+    li {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+// ============================================
+// LOADER
+// ============================================
+
+.loader {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: var(--luncher-bg);
+  padding: 24px;
+
+  .loader-icon {
+    font-size: 64px;
+    color: var(--luncher-primary);
+    margin-bottom: 24px;
+  }
+
+  .loader-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--luncher-text);
+    margin-bottom: 12px;
+  }
+
+  .loader-description {
+    color: var(--luncher-text-secondary);
+    max-width: 400px;
+    text-align: center;
+    line-height: 1.6;
+  }
+}
+
+// ============================================
+// SELECT SEARCH
+// ============================================
+
+.select-search-container {
+  margin: auto;
+
+  .select-search-input {
+    background: var(--luncher-bg);
+    border: 2px solid var(--luncher-border);
+    border-radius: var(--luncher-radius-sm);
+    padding: 12px 16px;
+    font-size: 1rem;
+    color: var(--luncher-text);
+    height: auto;
+
+    &:focus {
+      border-color: var(--luncher-primary);
+      box-shadow: 0 0 0 3px var(--luncher-primary-light);
+    }
+  }
+
+  .select-search-select {
+    background: var(--luncher-bg-card);
+    border: 1px solid var(--luncher-border);
+    border-radius: var(--luncher-radius);
+    box-shadow: var(--luncher-shadow-lg);
+    overflow: hidden;
+  }
+
+  .select-search-option {
+    padding: 12px 16px;
+    color: var(--luncher-text);
+
+    &:hover, &.is-selected {
+      background: var(--luncher-primary-light);
+      color: var(--luncher-primary);
+    }
+  }
+
+  .select-search-group-header {
+    background: var(--luncher-bg-hover);
+    color: var(--luncher-text-secondary);
+    font-weight: 600;
+    padding: 8px 16px;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+}
+
+// ============================================
+// FOOTER
+// ============================================
+
+.footer {
+  background: var(--luncher-navbar-bg);
+  color: var(--luncher-navbar-text);
+  padding: 16px 24px;
+  text-align: center;
+  margin-top: auto;
+  flex-shrink: 0;
+  font-size: 0.9rem;
+
+  a {
+    color: var(--luncher-primary);
+    transition: var(--luncher-transition);
+
+    &:hover {
+      color: var(--luncher-primary-hover);
+    }
+  }
+}
+
+// ============================================
+// ANIMATIONS
+// ============================================
+
 @keyframes bounce-in {
   0% {
     left: var(--start-left);
@@ -170,28 +881,24 @@ body,
     top: var(--start-top);
     bottom: var(--start-bottom);
   }
-
   25% {
     left: var(--end-left);
     right: var(--end-right);
     top: var(--end-top);
     bottom: var(--end-bottom);
   }
-
   50% {
     left: var(--start-left);
     right: var(--start-right);
     top: var(--start-top);
     bottom: var(--start-bottom);
   }
-
   75% {
     left: var(--end-left);
     right: var(--end-right);
     top: var(--end-top);
     bottom: var(--end-bottom);
   }
-
   100% {
     left: var(--start-left);
     right: var(--start-right);
@@ -200,7 +907,141 @@ body,
   }
 }
 
-// TODO zjistit, zda to nedokážeme lépe - tohle je kvůli overflow easter egg obrázků, ale skrývá to úplně scrollbar
-html {
-  overflow-x: hidden;
-}
\ No newline at end of file
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease;
+}
+
+// ============================================
+// UTILITIES
+// ============================================
+
+.text-muted {
+  color: var(--luncher-text-muted) !important;
+}
+
+.mt-3 { margin-top: 16px !important; }
+.mt-5 { margin-top: 32px !important; }
+.mb-3 { margin-bottom: 16px !important; }
+.mb-5 { margin-bottom: 32px !important; }
+
+// ============================================
+// MODALS
+// ============================================
+
+.modal-content {
+  background: var(--luncher-bg-card);
+  border: 1px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-lg);
+  box-shadow: var(--luncher-shadow-lg);
+}
+
+.modal-header {
+  border-bottom: 1px solid var(--luncher-border);
+  padding: 20px 24px;
+
+  .modal-title {
+    h2 {
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+    }
+  }
+
+  .btn-close {
+    opacity: 0.5;
+    transition: var(--luncher-transition);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.modal-body {
+  padding: 24px;
+  color: var(--luncher-text);
+
+  h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--luncher-primary);
+    margin-bottom: 12px;
+  }
+
+  p {
+    color: var(--luncher-text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+
+  hr {
+    border-color: var(--luncher-border);
+    margin: 20px 0;
+  }
+
+  .form-label {
+    font-weight: 500;
+    color: var(--luncher-text);
+    margin-bottom: 8px;
+  }
+}
+
+.modal-footer {
+  border-top: 1px solid var(--luncher-border);
+  padding: 16px 24px;
+  gap: 12px;
+}
+
+// ============================================
+// LEGACY COMPATIBILITY
+// ============================================
+
+.App {
+  text-align: center;
+}
+
+.table {
+  margin-bottom: 0;
+  color: var(--luncher-text);
+
+  > :not(caption) {
+    .action-icon {
+      color: var(--luncher-action-icon);
+      cursor: pointer;
+      margin-left: 10px;
+      padding: 0;
+    }
+
+    .buyer-icon {
+      color: var(--luncher-buyer-icon);
+      margin-left: 10px;
+      padding: 0;
+    }
+  }
+
+  ul {
+    padding: 0;
+    margin-left: 20px;
+    margin-bottom: 0;
+  }
+
+  td {
+    vertical-align: top;
+  }
+
+  > tbody > tr > td > table > tbody > tr > td {
+    border: none;
+  }
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c4bbe4f..12d70b6 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -344,10 +344,10 @@ function App() {
   const renderFoodTable = (location: Restaurant, menu: RestaurantDayMenu) => {
     let content;
     if (menu?.closed) {
-      content = <h3>Zavřeno</h3>
+      content = <div className="restaurant-closed">Zavřeno</div>
     } else if (menu?.food?.length && menu.food.length > 0) {
       const hideSoups = settings?.hideSoups;
-      content = <Table striped bordered hover>
+      content = <Table className="food-table">
         <tbody style={{ cursor: canChangeChoice ? 'pointer' : 'default' }}>
           {menu.food.map((f: Food, index: number) =>
             (!hideSoups || !f.isSoup) &&
@@ -356,15 +356,17 @@ function App() {
               <td>
                 {f.name}
                 {f.allergens && f.allergens.length > 0 && (
-                  <> ({f.allergens.map((a, idx) => (
-                    <span key={a}>
-                      <span title={ALLERGENS[a]} style={{ cursor: 'help', textDecoration: 'underline' }} onClick={e => {
-                        e.stopPropagation();
-                        window.open(LINK_ALLERGENS, '_blank');
-                      }}>{a}</span>
-                      {idx < f.allergens!.length - 1 && ','}
-                    </span>
-                  ))})</>
+                  <span className="ms-1">
+                    ({f.allergens.map((a, idx) => (
+                      <span key={a}>
+                        <span className="allergen-link" title={ALLERGENS[a]} onClick={e => {
+                          e.stopPropagation();
+                          window.open(LINK_ALLERGENS, '_blank');
+                        }}>{a}</span>
+                        {idx < f.allergens!.length - 1 && ', '}
+                      </span>
+                    ))})
+                  </span>
                 )}
               </td>
               <td>{f.price}</td>
@@ -373,12 +375,18 @@ function App() {
         </tbody>
       </Table>
     } else {
-      content = <h3>Chyba načtení dat</h3>
+      content = <div className="restaurant-error">Chyba načtení dat</div>
     }
-    return <Col md={12} lg={3} className='mt-3'>
-      <h3 style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>{getLunchChoiceName(location)}</h3>
-      {menu?.lastUpdate && <small>Poslední aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
-      {content}
+    return <Col md={6} lg={3} className='mt-3'>
+      <div className="restaurant-card">
+        <div className="restaurant-header">
+          <h3 style={{ cursor: canChangeChoice ? 'pointer' : 'default' }} onClick={() => doAddClickFoodChoice(location)}>
+            {getLunchChoiceName(location)}
+          </h3>
+          {menu?.lastUpdate && <small>Aktualizace: {getHumanDateTime(new Date(menu.lastUpdate))}</small>}
+        </div>
+        {content}
+      </div>
     </Col>
   }
 
@@ -421,16 +429,6 @@ function App() {
       <Header />
       <div className='wrapper'>
         {data.isWeekend ? <h4>Užívejte víkend :)</h4> : <>
-          <Alert variant={'primary'}>
-            <img alt="" src='hat.png' style={{ position: "absolute", width: "70px", rotate: "-45deg", left: -40, top: -58 }} />
-            <img alt="" src='snowman.png' style={{ position: "absolute", height: "110px", right: 10, top: 5 }} />
-            Poslední změny:
-            <ul>
-              <li>Oprava parsování Sladovnické a TechTower</li>
-              <li>Zimní atmosféra</li>
-              <li>Možnost označit se jako objednávající u volby "budu objednávat"</li>
-            </ul>
-          </Alert>
           {dayIndex != null &&
             <div className='day-navigator'>
               <span title='Předchozí den'>
@@ -450,10 +448,10 @@ function App() {
           </Row>
           <div className='content-wrapper'>
             <div className='content'>
-              {canChangeChoice && <>
+              {canChangeChoice && <div className="choice-section fade-in">
                 <p>{`Jak to ${dayIndex == null || dayIndex === data.todayDayIndex ? 'dnes' : 'tento den'} vidíš s obědem?`}</p>
                 <Form.Select ref={choiceRef} onChange={doAddChoice}>
-                  <option></option>
+                  <option value="">Vyber možnost...</option>
                   {Object.entries(LunchChoice)
                     .filter(entry => {
                       const locationKey = entry[0] as Restaurant;
@@ -463,44 +461,44 @@ function App() {
                 </Form.Select>
                 <small>Je možné vybrat jen jednu možnost. Výběr jiné odstraní předchozí.</small>
                 {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>Na co dobrého? <small>(nepovinné)</small></p>
+                  <p className="mt-3">Na co dobrého? <small style={{ color: 'var(--luncher-text-muted)' }}>(nepovinné)</small></p>
                   <Form.Select ref={foodChoiceRef} onChange={doAddFoodChoice}>
-                    <option></option>
+                    <option value="">Vyber jídlo...</option>
                     {foodChoiceList.map((food, index) => <option key={food.name} value={index}>{food.name}</option>)}
                   </Form.Select>
                 </>}
                 {foodChoiceList && !closed && <>
-                  <p style={{ marginTop: "10px" }}>V kolik hodin preferuješ odchod?</p>
+                  <p className="mt-3">V kolik hodin preferuješ odchod?</p>
                   <Form.Select ref={departureChoiceRef} onChange={handleChangeDepartureTime}>
-                    <option></option>
+                    <option value="">Vyber čas...</option>
                     {Object.values(DepartureTime)
                       .filter(time => isInTheFuture(time))
                       .map(time => <option key={time} value={time}>{time}</option>)}
                   </Form.Select>
                 </>}
-              </>}
+              </div>}
               {Object.keys(data.choices).length > 0 ?
-                <Table bordered className='mt-5'>
+                <Table className='choices-table mt-4 fade-in'>
                   <tbody>
                     {Object.keys(data.choices).map(key => {
                       const locationKey = key as LunchChoice;
                       const locationName = getLunchChoiceName(locationKey);
                       const loginObject = data.choices[locationKey];
                       if (!loginObject) {
-                        return;
+                        return null;
                       }
                       const locationLoginList = Object.entries(loginObject);
                       const locationPickCount = locationLoginList.length
                       return (
                         <tr key={key}>
-                          {(locationPickCount ?? 0) > 1 ? (
-                            <td>{locationName} ({locationPickCount})</td>
-                          ) : (
-                            <td>{locationName}</td>)}
+                          <td>
+                            {locationName}
+                            {(locationPickCount ?? 0) > 1 && <span className="ms-1">({locationPickCount})</span>}
+                          </td>
                           <td className='p-0'>
-                            <Table>
+                            <Table className="nested-table">
                               <tbody>
-                                {locationLoginList.map((entry: [string, UserLunchChoice], index) => {
+                                {locationLoginList.map((entry: [string, UserLunchChoice]) => {
                                   const login = entry[0];
                                   const userPayload = entry[1];
                                   const userChoices = userPayload?.selectedFoods;
@@ -508,13 +506,12 @@ function App() {
                                   const isBuyer = userPayload?.isBuyer || false;
                                   return <tr key={entry[0]}>
                                     <td>
-                                      {/* TODO zrefaktorovat, oddělit řádek do samostatné komponenty (a akce možná zvlášť) */}
                                       {trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
                                         <FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
                                       </span>}
-                                      {login}
-                                      {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
-                                      {userPayload.note && <span style={{ fontSize: 'small' }}> ({userPayload.note})</span>}
+                                      <strong>{login}</strong>
+                                      {userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
+                                      {userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
                                       {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM && <span title='Označit/odznačit se jako objednávající'>
                                         <FontAwesomeIcon onClick={() => {
                                         markAsBuyer();
@@ -569,97 +566,94 @@ function App() {
                     )}
                   </tbody>
                 </Table>
-                : <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
+                : <div className='no-votes mt-4'>Zatím nikdo nehlasoval...</div>
               }
             </div>
             {dayIndex === data.todayDayIndex &&
-              <div className='mt-5'>
+              <div className='pizza-section fade-in'>
                 {!data.pizzaDay &&
-                  <div style={{ textAlign: 'center' }}>
+                  <>
+                    <h3>Pizza Day</h3>
                     <p>Pro dnešní den není aktuálně založen Pizza day.</p>
                     {loadingPizzaDay ?
-                      <span>
-                        <FontAwesomeIcon icon={faGear} className='fa-spin' /> Zjišťujeme dostupné pizzy
+                      <span style={{ color: 'var(--luncher-primary)' }}>
+                        <FontAwesomeIcon icon={faGear} className='fa-spin me-2' /> Zjišťujeme dostupné pizzy
                       </span>
                       :
-                      <>
+                      <div>
                         <Button onClick={async () => {
                           setLoadingPizzaDay(true);
                           await createPizzaDay().then(() => setLoadingPizzaDay(false));
                         }}>Založit Pizza day</Button>
-                        <Button onClick={doJdemeObed} style={{ marginLeft: "14px" }}>Jdeme na oběd !</Button>
-                      </>
+                        <Button variant="outline-primary" onClick={doJdemeObed}>Jdeme na oběd!</Button>
+                      </div>
                     }
-                  </div>
+                  </>
                 }
                 {data.pizzaDay &&
-                  <div>
-                    <div style={{ textAlign: 'center' }}>
-                      <h3>Pizza day</h3>
-                      {
-                        data.pizzaDay.state === PizzaDayState.CREATED &&
-                        <div>
-                          <p>
-                            Pizza Day je založen a spravován uživatelem {data.pizzaDay.creator}.<br />
-                            Můžete upravovat své objednávky.
-                          </p>
-                          {
-                            data.pizzaDay.creator === auth.login &&
-                            <>
-                              <Button className='danger mb-3' title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
-                                await deletePizzaDay();
-                              }}>Smazat Pizza day</Button>
-                              <Button className='mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Uzamknout</Button>
-                            </>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.LOCKED &&
-                        <div>
-                          <p>Objednávky jsou uzamčeny uživatelem {data.pizzaDay.creator}</p>
-                          {data.pizzaDay.creator === auth.login &&
-                            <>
-                              <Button className='danger mb-3' title="Umožní znovu editovat objednávky." onClick={async () => {
-                                await unlockPizzaDay();
-                              }}>Odemknout</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
-                                await finishOrder();
-                              }}>Objednáno</Button>
-                            </>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.ORDERED &&
-                        <div>
-                          <p>Pizzy byly objednány uživatelem {data.pizzaDay.creator}</p>
-                          {data.pizzaDay.creator === auth.login &&
-                            <div>
-                              <Button className='danger mb-3' title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
-                                await lockPizzaDay();
-                              }}>Vrátit do "uzamčeno"</Button>
-                              <Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
-                                await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
-                              }}>Doručeno</Button>
-                            </div>
-                          }
-                        </div>
-                      }
-                      {
-                        data.pizzaDay.state === PizzaDayState.DELIVERED &&
-                        <div>
-                          <p>
-                            Pizzy byly doručeny.
-                            {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
-                          </p>
-                        </div>
-                      }
-                    </div>
+                  <>
+                    <h3>Pizza Day</h3>
+                    {
+                      data.pizzaDay.state === PizzaDayState.CREATED &&
+                      <>
+                        <p>
+                          Pizza Day je založen a spravován uživatelem <strong>{data.pizzaDay.creator}</strong>.<br />
+                          Můžete upravovat své objednávky.
+                        </p>
+                        {
+                          data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="danger" title="Smaže kompletně pizza day, včetně dosud zadaných objednávek." onClick={async () => {
+                              await deletePizzaDay();
+                            }}>Smazat Pizza day</Button>
+                            <Button title={noOrders ? "Nelze uzamknout - neexistuje žádná objednávka" : "Zamezí přidávat/odebírat objednávky. Použij před samotným objednáním, aby již nemohlo docházet ke změnám."} disabled={noOrders} onClick={async () => {
+                              await lockPizzaDay();
+                            }}>Uzamknout</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.LOCKED &&
+                      <>
+                        <p>Objednávky jsou uzamčeny uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Umožní znovu editovat objednávky." onClick={async () => {
+                              await unlockPizzaDay();
+                            }}>Odemknout</Button>
+                            <Button title={noOrders ? "Nelze objednat - neexistuje žádná objednávka" : "Použij po objednání. Objednávky zůstanou zamčeny."} disabled={noOrders} onClick={async () => {
+                              await finishOrder();
+                            }}>Objednáno</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.ORDERED &&
+                      <>
+                        <p>Pizzy byly objednány uživatelem <strong>{data.pizzaDay.creator}</strong></p>
+                        {data.pizzaDay.creator === auth.login &&
+                          <div className="mb-4">
+                            <Button variant="secondary" title="Vrátí stav do předchozího kroku (před objednáním)." onClick={async () => {
+                              await lockPizzaDay();
+                            }}>Vrátit do "uzamčeno"</Button>
+                            <Button title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
+                              await finishDelivery({ body: { bankAccount: settings?.bankAccount, bankAccountHolder: settings?.holderName } });
+                            }}>Doručeno</Button>
+                          </div>
+                        }
+                      </>
+                    }
+                    {
+                      data.pizzaDay.state === PizzaDayState.DELIVERED &&
+                      <p>
+                        Pizzy byly doručeny.
+                        {myOrder?.hasQr ? ` Objednávku můžete uživateli ${data.pizzaDay.creator} uhradit pomocí QR kódu níže.` : ''}
+                      </p>
+                    }
                     {data.pizzaDay.state === PizzaDayState.CREATED &&
-                      <div style={{ textAlign: 'center' }}>
+                      <div className="pizza-order-form">
                         <SelectSearch
                           search={true}
                           options={pizzaSuggestions}
@@ -668,29 +662,31 @@ function App() {
                           onBlur={_ => { }}
                           onFocus={_ => { }}
                         />
-                        Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
-                          if (event.key === 'Enter') {
-                            handlePizzaPoznamkaChange();
-                          }
-                          event.stopPropagation();
-                        }} />
-                        <Button
-                          style={{ marginLeft: '20px' }}
-                          disabled={!myOrder?.pizzaList?.length}
-                          onClick={handlePizzaPoznamkaChange}>
-                          Uložit
-                        </Button>
+                        <div className="d-flex align-items-center gap-2">
+                          <label style={{ color: 'var(--luncher-text-secondary)' }}>Poznámka:</label>
+                          <input ref={pizzaPoznamkaRef} type="text" placeholder="Např. bez cibule" onKeyDown={event => {
+                            if (event.key === 'Enter') {
+                              handlePizzaPoznamkaChange();
+                            }
+                            event.stopPropagation();
+                          }} />
+                          <Button
+                            disabled={!myOrder?.pizzaList?.length}
+                            onClick={handlePizzaPoznamkaChange}>
+                            Uložit
+                          </Button>
+                        </div>
                       </div>
                     }
                     <PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
                     {
-                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr ?
-                        <div className='qr-code'>
-                          <h3>QR platba</h3>
-                          <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
-                        </div> : null
+                      data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr &&
+                      <div className='qr-code'>
+                        <h3>QR platba</h3>
+                        <img src={`/api/qr?login=${auth.login}`} alt='QR kód' />
+                      </div>
                     }
-                  </div>
+                  </>
                 }
               </div>
             }
diff --git a/client/src/Login.css b/client/src/Login.css
index 1b0e950..0965166 100644
--- a/client/src/Login.css
+++ b/client/src/Login.css
@@ -1,13 +1,89 @@
-.login {
-  height: 100%;
+.login-page {
+  min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  text-align: center;
+  align-items: center;
   justify-content: center;
+  background: var(--luncher-bg);
+  padding: 24px;
 }
 
-.login-inner {
+.login-card {
+  background: var(--luncher-bg-card);
+  border-radius: var(--luncher-radius-xl);
+  box-shadow: var(--luncher-shadow-lg);
+  padding: 48px;
+  max-width: 420px;
+  width: 100%;
+  text-align: center;
+  border: 1px solid var(--luncher-border-light);
+}
+
+.login-logo {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
+}
+
+.login-subtitle {
+  color: var(--luncher-text-secondary);
+  font-size: 1rem;
+  margin-bottom: 40px;
+  line-height: 1.5;
+}
+
+.login-form {
   display: flex;
   flex-direction: column;
-  align-items: center;
-}
\ No newline at end of file
+  gap: 20px;
+}
+
+.login-form label {
+  display: block;
+  text-align: left;
+  font-weight: 500;
+  color: var(--luncher-text);
+  margin-bottom: 8px;
+}
+
+.login-form .hint {
+  font-size: 0.85rem;
+  color: var(--luncher-text-muted);
+  margin-top: 8px;
+  text-align: left;
+  line-height: 1.5;
+}
+
+.login-form input[type="text"] {
+  width: 100%;
+  padding: 14px 18px;
+  font-size: 1rem;
+  border: 2px solid var(--luncher-border);
+  border-radius: var(--luncher-radius-sm);
+  background: var(--luncher-bg);
+  color: var(--luncher-text);
+  transition: var(--luncher-transition);
+}
+
+.login-form input[type="text"]:hover {
+  border-color: var(--luncher-text-muted);
+}
+
+.login-form input[type="text"]:focus {
+  border-color: var(--luncher-primary);
+  box-shadow: 0 0 0 3px var(--luncher-primary-light);
+  outline: none;
+}
+
+.login-form input[type="text"]::placeholder {
+  color: var(--luncher-text-muted);
+}
+
+.login-form .btn {
+  width: 100%;
+  padding: 14px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 8px;
+}
diff --git a/client/src/Login.tsx b/client/src/Login.tsx
index 650d764..b5cc446 100644
--- a/client/src/Login.tsx
+++ b/client/src/Login.tsx
@@ -36,21 +36,35 @@ export default function Login() {
   }, [auth]);
 
   if (!auth?.login) {
-    return <div className='login'>
-      <h1>Luncher</h1>
-      <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
-      <div className='login-inner'>
-        <p style={{ fontSize: "12px", marginTop: "10px" }}>
-          Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
-        </p>
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
-          if (event.key === 'Enter') {
-            doLogin()
-          }
-        }} />
-        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
+    return (
+      <div className='login-page'>
+        <div className='login-card'>
+          <h1 className='login-logo'>Luncher</h1>
+          <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
+          <div className='login-form'>
+            <div>
+              <label htmlFor="login-input">Zobrazované jméno</label>
+              <input
+                id="login-input"
+                ref={loginRef}
+                type='text'
+                placeholder="Např. Jan Novák"
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    doLogin()
+                  }
+                }}
+              />
+              <p className='hint'>
+                Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
+                Jméno je možné kdykoli změnit.
+              </p>
+            </div>
+            <Button onClick={doLogin}>Pokračovat</Button>
+          </div>
+        </div>
       </div>
-    </div>
+    );
   }
   return <div>Neplatný stav</div>
 }
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index 42b56c0..1e23b07 100644
--- a/client/src/components/Footer.tsx
+++ b/client/src/components/Footer.tsx
@@ -1,12 +1,12 @@
-import { Navbar } from "react-bootstrap";
-
 export default function Footer() {
-    return <Navbar className="text-light" variant='dark' expand="lg" style={{
-        display: "flex",
-        justifyContent: "center",
-        marginTop: "auto", // Pushne footer na spodek
-        flexShrink: 0 // Zabrání zmenšování při malém obsahu
-    }}>
-        <span>🄯 Žádná práva nevyhrazena. TODO a zdrojové kódy dostupné <a href="https://gitea.melancholik.eu/mates/Luncher">zde</a>.</span>
-    </Navbar >
-}
\ No newline at end of file
+    return (
+        <footer className="footer">
+            <span>
+                Zdroj. kódy dostupné na{' '}
+                <a href="https://gitea.melancholik.eu/mates/Luncher" target="_blank" rel="noopener noreferrer">
+                    Gitea
+                </a>
+            </span>
+        </footer>
+    );
+}
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 7803d9b..9fdd257 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Navbar, Nav, NavDropdown } from "react-bootstrap";
+import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
 import { useAuth } from "../context/auth";
 import SettingsModal from "./modals/SettingsModal";
 import { useSettings, ThemePreference } from "../context/settings";
@@ -9,6 +9,14 @@ import RefreshMenuModal from "./modals/RefreshMenuModal";
 import { useNavigate } from "react-router";
 import { STATS_URL } from "../AppRoutes";
 import { FeatureRequest, getVotes, updateVote } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+const CHANGELOG = [
+    "Nový moderní design aplikace",
+    "Oprava parsování Sladovnické a TechTower",
+    "Možnost označit se jako objednávající u volby \"budu objednávat\"",
+];
 
 export default function Header() {
     const auth = useAuth();
@@ -18,8 +26,29 @@ export default function Header() {
     const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
     const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
     const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
+    const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
     const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
 
+    // Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
+    const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
+
+    useEffect(() => {
+        const updateEffectiveTheme = () => {
+            if (settings?.themePreference === 'system') {
+                const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                setEffectiveTheme(isDark ? 'dark' : 'light');
+            } else {
+                setEffectiveTheme(settings?.themePreference || 'light');
+            }
+        };
+
+        updateEffectiveTheme();
+
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        mediaQuery.addEventListener('change', updateEffectiveTheme);
+        return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
+    }, [settings?.themePreference]);
+
     useEffect(() => {
         if (auth?.login) {
             getVotes().then(response => {
@@ -44,6 +73,12 @@ export default function Header() {
         setRefreshMenuModalOpen(false);
     }
 
+    const toggleTheme = () => {
+        // Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
+        const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
+        settings?.setThemePreference(newTheme);
+    }
+
     const isValidInteger = (str: string) => {
         str = str.trim();
         if (!str) {
@@ -121,12 +156,21 @@ export default function Header() {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="nav">
+                <button
+                    className="theme-toggle"
+                    onClick={toggleTheme}
+                    title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
+                    aria-label="Přepnout barevný motiv"
+                >
+                    <FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
+                </button>
                 <NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
                     <NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
                     <NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
+                    <NavDropdown.Item onClick={() => setChangelogModalOpen(true)}>Novinky</NavDropdown.Item>
                     <NavDropdown.Divider />
                     <NavDropdown.Item onClick={auth?.logout}>Odhlásit se</NavDropdown.Item>
                 </NavDropdown>
@@ -136,5 +180,22 @@ export default function Header() {
         <RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
         <FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
         <PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
+        <Modal show={changelogModalOpen} onHide={() => setChangelogModalOpen(false)}>
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Novinky</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <ul>
+                    {CHANGELOG.map((item, index) => (
+                        <li key={index}>{item}</li>
+                    ))}
+                </ul>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={() => setChangelogModalOpen(false)}>
+                    Zavřít
+                </Button>
+            </Modal.Footer>
+        </Modal>
     </Navbar>
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Loader.tsx b/client/src/components/Loader.tsx
index f898705..96ba7cc 100644
--- a/client/src/components/Loader.tsx
+++ b/client/src/components/Loader.tsx
@@ -9,11 +9,13 @@ type Props = {
 }
 
 function Loader(props: Readonly<Props>) {
-  return <div className='loader'>
-    <h1>{props.title ?? 'Prosím čekejte...'}</h1>
-    <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
-    <p>{props.description}</p>
-  </div>
+  return (
+    <div className='loader'>
+      <FontAwesomeIcon icon={props.icon} className={`loader-icon ${props.animation ?? ''}`} />
+      <h2 className='loader-title'>{props.title ?? 'Prosím čekejte...'}</h2>
+      <p className='loader-description'>{props.description}</p>
+    </div>
+  );
 }
 
 export default Loader;
diff --git a/client/src/components/PizzaOrderList.tsx b/client/src/components/PizzaOrderList.tsx
index cbc9cc7..9e276a6 100644
--- a/client/src/components/PizzaOrderList.tsx
+++ b/client/src/components/PizzaOrderList.tsx
@@ -15,29 +15,43 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
     }
 
     if (!orders?.length) {
-        return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
+        return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p>
     }
 
     const total = orders.reduce((total, order) => total + order.totalPrice, 0);
 
-    return <Table className="mt-3" striped bordered hover>
-        <thead>
-            <tr>
-                <th>Jméno</th>
-                <th>Objednávka</th>
-                <th>Poznámka</th>
-                <th>Příplatek</th>
-                <th>Cena</th>
-            </tr>
-        </thead>
-        <tbody>
-            {orders.map(order => <tr key={order.customer}>
-                <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
-            </tr>)}
-            <tr style={{ fontWeight: 'bold' }}>
-                <td colSpan={4}>Celkem</td>
-                <td>{`${total} Kč`}</td>
-            </tr>
-        </tbody>
-    </Table>
-}
\ No newline at end of file
+    return (
+        <div className="mt-4" style={{
+            background: 'var(--luncher-bg-card)',
+            borderRadius: 'var(--luncher-radius-lg)',
+            overflow: 'hidden',
+            border: '1px solid var(--luncher-border-light)',
+            boxShadow: 'var(--luncher-shadow)'
+        }}>
+            <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
+                <thead style={{ background: 'var(--luncher-primary-light)' }}>
+                    <tr>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
+                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}>
+                        <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
+                    </tr>)}
+                    <tr style={{
+                        fontWeight: 700,
+                        background: 'var(--luncher-bg-hover)',
+                        borderTop: '2px solid var(--luncher-border)'
+                    }}>
+                        <td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
+                        <td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
+                    </tr>
+                </tbody>
+            </Table>
+        </div>
+    );
+}
diff --git a/client/src/components/modals/RefreshMenuModal.tsx b/client/src/components/modals/RefreshMenuModal.tsx
index 70f2785..6b6ee6d 100644
--- a/client/src/components/modals/RefreshMenuModal.tsx
+++ b/client/src/components/modals/RefreshMenuModal.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { Modal, Button, Alert } from "react-bootstrap";
+import { Modal, Button, Alert, Form } from "react-bootstrap";
 
 type Props = {
     isOpen: boolean;
@@ -30,7 +30,6 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             if (res.ok) {
                 setRefreshMessage({ type: 'success', text: 'Uspesny fetch' });
                 if (refreshPassRef.current) {
-                    // Clean hesla xd
                     refreshPassRef.current.value = '';
                 }
             } else {
@@ -50,7 +49,7 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
     };
 
     return (
-        <Modal show={isOpen} onHide={handleClose} size="lg">
+        <Modal show={isOpen} onHide={handleClose}>
             <Modal.Header closeButton>
                 <Modal.Title><h2>Přenačtení menu</h2></Modal.Title>
             </Modal.Header>
@@ -63,36 +62,29 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
                     </Alert>
                 )}
 
-                <div className="mb-3">
-                    Heslo: <input
+                <Form.Group className="mb-3">
+                    <Form.Label>Heslo</Form.Label>
+                    <Form.Control
                         ref={refreshPassRef}
                         type="password"
                         placeholder="Zadejte heslo"
-                        className="form-control d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
                         onKeyDown={e => e.stopPropagation()}
                     />
-                </div>
+                </Form.Group>
 
-                <div className="mb-3">
-                    Typ refreshe: <select
-                        ref={refreshTypeRef}
-                        className="form-select d-inline-block"
-                        style={{ width: 'auto', marginLeft: '10px' }}
-                        defaultValue="week"
-                    >
+                <Form.Group className="mb-3">
+                    <Form.Label>Typ refreshe</Form.Label>
+                    <Form.Select ref={refreshTypeRef} defaultValue="week">
                         <option value="week">Týden</option>
                         <option value="day">Den</option>
-                    </select>
-                </div>
+                    </Form.Select>
+                </Form.Group>
 
                 <Button
-                    variant="info"
                     onClick={handleRefresh}
                     disabled={refreshLoading}
-                    className="mb-3"
                 >
-                    {refreshLoading ? 'Refreshing...' : 'Refresh'}
+                    {refreshLoading ? 'Načítám...' : 'Obnovit menu'}
                 </Button>
             </Modal.Body>
             <Modal.Footer>
@@ -102,4 +94,4 @@ export default function RefreshMenuModal({ isOpen, onClose }: Readonly<Props>) {
             </Modal.Footer>
         </Modal>
     );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/modals/SettingsModal.tsx b/client/src/components/modals/SettingsModal.tsx
index 16e42ca..a1055f1 100644
--- a/client/src/components/modals/SettingsModal.tsx
+++ b/client/src/components/modals/SettingsModal.tsx
@@ -16,38 +16,81 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
     const hideSoupsRef = useRef<HTMLInputElement>(null);
     const themeRef = useRef<HTMLSelectElement>(null);
 
-    return <Modal show={isOpen} onHide={onClose} size="lg">
-        <Modal.Header closeButton>
-            <Modal.Title><h2>Nastavení</h2></Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-            <h4>Vzhled</h4>
-            <Form.Group className="mb-3">
-                <Form.Label>Barevný motiv</Form.Label>
-                <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
-                    <option value="system">Podle systému</option>
-                    <option value="light">Světlý</option>
-                    <option value="dark">Tmavý</option>
-                </Form.Select>
-            </Form.Group>
-            <hr />
-            <h4>Obecné</h4>
-            <span title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální, a zejména u TechTower bývá často problém polévky spolehlivě rozeznat. V případě využití této funkce průběžně nahlašujte stále se zobrazující polévky." style={{ "cursor": "help" }}>
-                <input ref={hideSoupsRef} type="checkbox" defaultChecked={settings?.hideSoups} /> Skrýt polévky
-            </span>
-            <hr />
-            <h4>Bankovní účet</h4>
-            <p>Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.<br />Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.<br /><br />Číslo účtu není ukládáno na serveru, posílá se na něj pouze za účelem vygenerování QR kódů.</p>
-            Číslo účtu: <input className="mb-3" ref={bankAccountRef} type="text" placeholder="123456-1234567890/1234" defaultValue={settings?.bankAccount} onKeyDown={e => e.stopPropagation()} /> <br />
-            Název příjemce (jméno majitele účtu): <input ref={nameRef} type="text" placeholder="Jan Novák" defaultValue={settings?.holderName} onKeyDown={e => e.stopPropagation()} />
-        </Modal.Body>
-        <Modal.Footer>
-            <Button variant="secondary" onClick={onClose}>
-                Storno
-            </Button>
-            <Button variant="primary" onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
-                Uložit
-            </Button>
-        </Modal.Footer>
-    </Modal>
-}
\ No newline at end of file
+    return (
+        <Modal show={isOpen} onHide={onClose} size="lg">
+            <Modal.Header closeButton>
+                <Modal.Title><h2>Nastavení</h2></Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <h4>Vzhled</h4>
+                <Form.Group className="mb-3">
+                    <Form.Label>Barevný motiv</Form.Label>
+                    <Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
+                        <option value="system">Podle systému</option>
+                        <option value="light">Světlý</option>
+                        <option value="dark">Tmavý</option>
+                    </Form.Select>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Obecné</h4>
+                <Form.Group className="mb-3">
+                    <Form.Check
+                        ref={hideSoupsRef}
+                        type="checkbox"
+                        label="Skrýt polévky"
+                        defaultChecked={settings?.hideSoups}
+                        title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
+                    />
+                    <Form.Text className="text-muted">
+                        Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
+                    </Form.Text>
+                </Form.Group>
+
+                <hr />
+
+                <h4>Bankovní účet</h4>
+                <p>
+                    Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
+                </p>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Číslo účtu</Form.Label>
+                    <Form.Control
+                        ref={bankAccountRef}
+                        type="text"
+                        placeholder="123456-1234567890/1234"
+                        defaultValue={settings?.bankAccount}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
+                    </Form.Text>
+                </Form.Group>
+
+                <Form.Group className="mb-3">
+                    <Form.Label>Název příjemce</Form.Label>
+                    <Form.Control
+                        ref={nameRef}
+                        type="text"
+                        placeholder="Jan Novák"
+                        defaultValue={settings?.holderName}
+                        onKeyDown={e => e.stopPropagation()}
+                    />
+                    <Form.Text className="text-muted">
+                        Jméno majitele účtu pro QR platbu.
+                    </Form.Text>
+                </Form.Group>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={onClose}>
+                    Storno
+                </Button>
+                <Button onClick={() => onSave(bankAccountRef.current?.value, nameRef.current?.value, hideSoupsRef.current?.checked, themeRef.current?.value as ThemePreference)}>
+                    Uložit
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
diff --git a/client/src/context/settings.tsx b/client/src/context/settings.tsx
index 5e67855..1775c79 100644
--- a/client/src/context/settings.tsx
+++ b/client/src/context/settings.tsx
@@ -33,11 +33,23 @@ export const useSettings = () => {
   return useContext(settingsContext);
 }
 
+function getInitialTheme(): ThemePreference {
+  try {
+    const saved = localStorage.getItem(THEME_KEY) as ThemePreference | null;
+    if (saved && ['system', 'light', 'dark'].includes(saved)) {
+      return saved;
+    }
+  } catch (e) {
+    // localStorage nedostupný
+  }
+  return 'system';
+}
+
 function useProvideSettings(): SettingsContextProps {
   const [bankAccount, setBankAccount] = useState<string | undefined>();
   const [holderName, setHolderName] = useState<string | undefined>();
   const [hideSoups, setHideSoups] = useState<boolean | undefined>();
-  const [themePreference, setTheme] = useState<ThemePreference>('system');
+  const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
 
   useEffect(() => {
     const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
@@ -52,10 +64,6 @@ function useProvideSettings(): SettingsContextProps {
     if (hideSoups !== null) {
       setHideSoups(hideSoups === 'true');
     }
-    const savedTheme = localStorage.getItem(THEME_KEY) as ThemePreference | null;
-    if (savedTheme && ['system', 'light', 'dark'].includes(savedTheme)) {
-      setTheme(savedTheme);
-    }
   }, [])
 
   useEffect(() => {
diff --git a/client/src/index.css b/client/src/index.css
index 57dcd7a..b0d4941 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -7,14 +7,32 @@ body,
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
\ No newline at end of file
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Better focus styles */
+:focus-visible {
+  outline: 2px solid var(--luncher-primary);
+  outline-offset: 2px;
+}
+
+/* Selection color */
+::selection {
+  background: var(--luncher-primary-light);
+  color: var(--luncher-primary);
+}
diff --git a/client/src/pages/StatsPage.scss b/client/src/pages/StatsPage.scss
index 6b7c304..7b6c82b 100644
--- a/client/src/pages/StatsPage.scss
+++ b/client/src/pages/StatsPage.scss
@@ -2,15 +2,91 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 32px 24px;
+  min-height: calc(100vh - 140px);
+  background: var(--luncher-bg);
+
+  h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--luncher-text);
+    margin-bottom: 24px;
+  }
 
   .week-navigator {
     display: flex;
     align-items: center;
-    font-size: xx-large;
+    gap: 24px;
+    margin-bottom: 32px;
+
+    svg {
+      font-size: 1.5rem;
+      color: var(--luncher-text-secondary);
+      cursor: pointer;
+      padding: 12px;
+      border-radius: 50%;
+      background: var(--luncher-bg-card);
+      box-shadow: var(--luncher-shadow-sm);
+      transition: var(--luncher-transition);
+
+      &:hover {
+        color: var(--luncher-primary);
+        background: var(--luncher-primary-light);
+        transform: scale(1.05);
+      }
+    }
 
     .date-range {
-      margin: 5px 20px;
+      margin: 0;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--luncher-text);
+      min-width: 280px;
+      text-align: center;
     }
   }
-}
\ No newline at end of file
+
+  // Chart container
+  .recharts-wrapper {
+    background: var(--luncher-bg-card);
+    border-radius: var(--luncher-radius-lg);
+    box-shadow: var(--luncher-shadow);
+    padding: 24px;
+    border: 1px solid var(--luncher-border-light);
+  }
+
+  // Chart text styling
+  .recharts-cartesian-axis-tick-value {
+    fill: var(--luncher-text-secondary);
+    font-size: 0.85rem;
+  }
+
+  .recharts-legend-item-text {
+    color: var(--luncher-text) !important;
+    font-weight: 500;
+  }
+
+  .recharts-tooltip-wrapper {
+    .recharts-default-tooltip {
+      background: var(--luncher-bg-card) !important;
+      border: 1px solid var(--luncher-border) !important;
+      border-radius: var(--luncher-radius-sm) !important;
+      box-shadow: var(--luncher-shadow-lg) !important;
+
+      .recharts-tooltip-label {
+        color: var(--luncher-text) !important;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+
+      .recharts-tooltip-item {
+        color: var(--luncher-text-secondary) !important;
+      }
+    }
+  }
+
+  .recharts-cartesian-grid-horizontal line,
+  .recharts-cartesian-grid-vertical line {
+    stroke: var(--luncher-border);
+  }
+}