diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
index ade4989..cfbdc3d 100644
--- a/frontend/src/contexts/ThemeContext.tsx
+++ b/frontend/src/contexts/ThemeContext.tsx
@@ -73,7 +73,7 @@ const ACCENT_COLORS: Record<AccentColor, { main: string; hover: string; darkMain
   red: { main: '#ef4444', hover: '#dc2626' },
   teal: { main: '#14b8a6', hover: '#0d9488' },
   amber: { main: '#f59e0b', hover: '#d97706' },
-  indigo: { main: '#6366f1', hover: '#4f46e5' },
+  indigo: { main: '#5865f2', hover: '#4752c4' },
   cyan: { main: '#06b6d4', hover: '#0891b2' },
   rose: { main: '#f43f5e', hover: '#e11d48' },
   auto: { main: '#374151', hover: '#1f2937', darkMain: '#838b99', darkHover: '#b5bcc8' },
@@ -193,24 +193,24 @@ export type CustomColors = Partial<{
 export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = {
   default: {
     light: {
-      bgMain: '#ffffff',
-      bgCard: '#f9fafb',
-      bgElevated: '#ffffff',
-      textPrimary: '#111827',
-      textSecondary: '#6b7280',
-      border: '#e5e7eb',
-      sidebarBg: '#1f2937',
+      bgMain: '#f8f9ff',
+      bgCard: '#ffffff',
+      bgElevated: '#fafbff',
+      textPrimary: '#1a1f3a',
+      textSecondary: '#4a5578',
+      border: '#e5e7f4',
+      sidebarBg: '#3949ab',
       sidebarText: '#f9fafb',
     },
     dark: {
-      bgMain: '#0f172a',
-      bgCard: '#1e293b',
-      bgElevated: '#334155',
-      textPrimary: '#f1f5f9',
-      textSecondary: '#94a3b8',
-      border: '#334155',
-      sidebarBg: '#0c1222',
-      sidebarText: '#f9fafb',
+      bgMain: '#0f1229',
+      bgCard: '#1a1f3f',
+      bgElevated: '#252b4d',
+      textPrimary: '#e8eaf6',
+      textSecondary: '#9fa8da',
+      border: '#303652',
+      sidebarBg: '#0a0d1f',
+      sidebarText: '#e8eaf6',
     },
   },
   monochrome: {
@@ -218,19 +218,19 @@ export const COLOR_PALETTES: Record<ColorPalette, PaletteColors> = {
       bgMain: '#fafafa',
       bgCard: '#f5f5f5',
       bgElevated: '#ffffff',
-      textPrimary: '#171717',
+      textPrimary: '#0a0a0a',
       textSecondary: '#737373',
       border: '#e5e5e5',
-      sidebarBg: '#262626',
+      sidebarBg: '#1a1a1a',
       sidebarText: '#fafafa',
     },
     dark: {
       bgMain: '#0a0a0a',
-      bgCard: '#171717',
-      bgElevated: '#262626',
+      bgCard: '#1a1a1a',
+      bgElevated: '#2a2a2a',
       textPrimary: '#fafafa',
-      textSecondary: '#a3a3a3',
-      border: '#333333',
+      textSecondary: '#a0a0a0',
+      border: '#2a2a2a',
       sidebarBg: '#0a0a0a',
       sidebarText: '#fafafa',
     },
diff --git a/frontend/src/styles/AdminPanel.css b/frontend/src/styles/AdminPanel.css
index 50065a7..34b5f6b 100644
--- a/frontend/src/styles/AdminPanel.css
+++ b/frontend/src/styles/AdminPanel.css
@@ -87,25 +87,25 @@
     align-items: center;
     gap: 0.5rem;
     padding: var(--btn-padding-md);
-    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+    background: var(--color-accent);
     color: white;
     border: none;
-    border-radius: var(--radius-md);
+    border-radius: 10px;
     font-weight: 600;
     font-size: var(--btn-font-size);
     cursor: pointer;
-    transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: var(--shadow-md);
 }
 
 .btn-primary:hover {
-    filter: brightness(1.03);
-    transform: translateY(-1px);
+    background: var(--color-accent-hover);
+    transform: translateY(-1px) scale(1.02);
     box-shadow: var(--shadow-lg);
 }
 
 .btn-primary:active {
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
     box-shadow: var(--shadow-md);
 }
 
@@ -152,20 +152,20 @@
     align-items: center;
     gap: 0.5rem;
     padding: var(--btn-padding-md);
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    background: #ef4444;
     color: white;
     border: none;
-    border-radius: var(--radius-md);
+    border-radius: 10px;
     font-weight: 600;
     font-size: var(--btn-font-size);
     cursor: pointer;
-    transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: var(--shadow-md);
 }
 
 .btn-danger:hover {
-    filter: brightness(1.05);
-    transform: translateY(-1px);
+    background: #dc2626;
+    transform: translateY(-1px) scale(1.02);
     box-shadow: var(--shadow-lg);
 }
 
@@ -1141,18 +1141,18 @@
     background: var(--color-accent);
     color: white;
     border: none;
-    border-radius: var(--radius-md);
+    border-radius: 10px;
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: var(--shadow-md);
 }
 
 .btn-primary-modern:hover {
     background: var(--color-accent-hover);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: var(--shadow-lg);
 }
 
 .btn-primary-modern .material-symbols-outlined {
diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 2137fa3..5f428eb 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -162,9 +162,9 @@ body {
 
 .page-tab-btn.active,
 .admin-tab-btn.active {
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  background: var(--color-accent);
   color: white;
-  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
+  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.25);
 }
 
 .page-subtitle {
diff --git a/frontend/src/styles/Login.css b/frontend/src/styles/Login.css
index b5e722a..2c4c17d 100644
--- a/frontend/src/styles/Login.css
+++ b/frontend/src/styles/Login.css
@@ -117,14 +117,14 @@
 .login-container .btn-primary {
   width: 100%;
   padding: 0.75rem;
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  background: var(--color-accent);
   color: white;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
-  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,8 +132,8 @@
 }
 
 .login-container .btn-primary:hover {
-  filter: brightness(1.03);
-  transform: translateY(-1px);
+  background: var(--color-accent-hover);
+  transform: translateY(-1px) scale(1.02);
   box-shadow: var(--shadow-lg);
 }
 
diff --git a/frontend/src/styles/Sidebar.css b/frontend/src/styles/Sidebar.css
index fc2e3a5..70d268b 100644
--- a/frontend/src/styles/Sidebar.css
+++ b/frontend/src/styles/Sidebar.css
@@ -391,11 +391,11 @@ button.nav-item {
 }
 
 .nav-item.active {
-  background: rgba(var(--color-accent-rgb), 0.16);
-  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
-  font-weight: 650;
+  background: rgba(var(--color-accent-rgb), 0.12);
+  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
+  font-weight: 600;
   color: var(--color-text-sidebar) !important;
-  box-shadow: none;
+  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.15);
 }
 
 .nav-item.active .nav-icon,
diff --git a/frontend/src/styles/ThemeSettings.css b/frontend/src/styles/ThemeSettings.css
index ffbd927..c89d483 100644
--- a/frontend/src/styles/ThemeSettings.css
+++ b/frontend/src/styles/ThemeSettings.css
@@ -570,20 +570,20 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.65rem 1.25rem;
-    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+    background: var(--color-accent);
     color: white;
     border: none;
-    border-radius: var(--radius-md);
+    border-radius: 10px;
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
-    transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: var(--shadow-md);
 }
 
 .theme-settings-root .btn-primary:hover {
-    filter: brightness(1.03);
-    transform: translateY(-1px);
+    background: var(--color-accent-hover);
+    transform: translateY(-1px) scale(1.02);
     box-shadow: var(--shadow-lg);
 }
 
diff --git a/frontend/src/styles/Users.css b/frontend/src/styles/Users.css
index 34681d9..c5dc693 100644
--- a/frontend/src/styles/Users.css
+++ b/frontend/src/styles/Users.css
@@ -165,19 +165,19 @@
   align-items: center;
   gap: 0.35rem;
   padding: 0.55rem 0.9rem;
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  background: var(--color-accent);
   color: white;
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: 10px;
   font-weight: 600;
   cursor: pointer;
-  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: var(--shadow-sm);
 }
 
 .users-root .btn-primary:hover {
-  filter: brightness(1.03);
-  transform: translateY(-1px);
+  background: var(--color-accent-hover);
+  transform: translateY(-1px) scale(1.02);
   box-shadow: var(--shadow-md);
 }
 
@@ -555,8 +555,8 @@
 }
 
 .users-root .user-avatar.superuser {
-  background: linear-gradient(135deg, var(--color-accent), #a78bfa);
-  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.3);
+  background: var(--color-accent);
+  box-shadow: 0 3px 10px rgba(var(--color-accent-rgb), 0.3);
 }
 
 /* Users Divider */
diff --git a/frontend/src/styles/theme/colors.css b/frontend/src/styles/theme/colors.css
index e98bbe6..ef1e544 100644
--- a/frontend/src/styles/theme/colors.css
+++ b/frontend/src/styles/theme/colors.css
@@ -23,13 +23,13 @@
   --color-text-muted: #6b7280;
   --color-text-inverse: #ffffff;
 
-  /* Light Theme - Border Colors */
-  --color-border: #e5e7eb;
-  --color-border-hover: #d1d5db;
+  /* Light Theme - Border Colors - softer, more transparent */
+  --color-border: rgba(229, 231, 235, 0.5);
+  --color-border-hover: rgba(209, 213, 219, 0.7);
 
-  /* Derived tokens */
+  /* Derived tokens - more subtle */
   --color-overlay: rgba(15, 23, 42, 0.35);
-  --color-card-outline: rgba(15, 23, 42, 0.06);
+  --color-card-outline: rgba(15, 23, 42, 0.03);
   --color-focus-ring: rgba(var(--color-accent-rgb), 0.22);
 
   /* Semantic Colors (same for both themes) */
@@ -60,13 +60,13 @@
   --color-text-muted: #94a3b8;
   --color-text-inverse: #ffffff;
 
-  /* Dark Theme - Border Colors */
-  --color-border: #334155;
-  --color-border-hover: #475569;
+  /* Dark Theme - Border Colors - softer, more transparent */
+  --color-border: rgba(51, 65, 85, 0.4);
+  --color-border-hover: rgba(71, 85, 105, 0.6);
 
-  /* Derived tokens */
+  /* Derived tokens - more subtle */
   --color-overlay: rgba(0, 0, 0, 0.55);
-  --color-card-outline: rgba(255, 255, 255, 0.08);
+  --color-card-outline: rgba(255, 255, 255, 0.04);
   --color-focus-ring: rgba(var(--color-accent-rgb), 0.30);
 
   /* Semantic Colors */
diff --git a/frontend/src/styles/theme/dimensions.css b/frontend/src/styles/theme/dimensions.css
index bc448db..6811515 100644
--- a/frontend/src/styles/theme/dimensions.css
+++ b/frontend/src/styles/theme/dimensions.css
@@ -28,10 +28,10 @@
   --space-20: 5rem;
   /* 80px */
 
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
+  /* Border Radius - more modern, softer */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
   --radius-xl: 20px;
   --radius-full: 9999px;
 
@@ -101,21 +101,18 @@
   --badge-padding: 0.25rem 0.625rem;
   --badge-font-size: 0.8rem;
 
-  /* Semantic Spacing - Cards & Containers */
-  --card-padding: 0.875rem;
-  /* Reduced from 1rem */
-  --card-padding-sm: 0.625rem;
-  /* Reduced from 0.75rem */
-  --card-gap: 0.625rem;
-  /* Reduced from 0.75rem */
-  --card-gap-lg: 0.875rem;
-  /* Reduced from 1rem */
+  /* Semantic Spacing - Cards & Containers - more breathing room */
+  --card-padding: 1.125rem;
+  /* increased for more space */
+  --card-padding-sm: 0.75rem;
+  --card-gap: 0.75rem;
+  --card-gap-lg: 1rem;
 
-  /* Semantic Spacing - Sections */
-  --section-gap: 1.25rem;
-  /* Reduced from 1.5rem */
-  --section-gap-sm: 0.875rem;
-  /* Reduced from 1rem */
+  /* Semantic Spacing - Sections - 20% more space */
+  --section-gap: 1.5rem;
+  /* increased from 1.25rem */
+  --section-gap-sm: 1.125rem;
+  /* increased from 0.875rem */
 
   /* Semantic Spacing - Elements */
   --element-gap: 0.375rem;
diff --git a/frontend/src/styles/theme/effects.css b/frontend/src/styles/theme/effects.css
index c040da6..ce679e8 100644
--- a/frontend/src/styles/theme/effects.css
+++ b/frontend/src/styles/theme/effects.css
@@ -3,15 +3,20 @@
    ========================================== */
 
 :root {
-  /* Box Shadows (modern, softer multi-layer) */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.06);
-  --shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
-  --shadow-2xl: 0 48px 110px rgba(0, 0, 0, 0.22);
-  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
+  /* Box Shadows (ultra-soft, modern, ethereal) */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
+  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.10), 0 12px 30px rgba(0, 0, 0, 0.06);
+  --shadow-2xl: 0 50px 120px rgba(0, 0, 0, 0.15);
+  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.04);
   --shadow-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
 
+  /* Backdrop Blur Effects */
+  --backdrop-blur-sm: blur(8px);
+  --backdrop-blur-md: blur(16px);
+  --backdrop-blur-lg: blur(24px);
+
   /* Transitions */
   --transition-fast: 120ms var(--ease-out);
   --transition-base: 180ms var(--ease-out);
@@ -38,10 +43,10 @@
 }
 
 [data-theme='dark'] {
-  /* Dark Theme - Deeper Shadows with less haze */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
-  --shadow-md: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.35);
-  --shadow-lg: 0 22px 44px rgba(0, 0, 0, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
-  --shadow-xl: 0 34px 72px rgba(0, 0, 0, 0.65), 0 14px 28px rgba(0, 0, 0, 0.4);
-  --shadow-2xl: 0 60px 130px rgba(0, 0, 0, 0.75);
+  /* Dark Theme - Deeper Shadows for proper depth */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
+  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.35);
+  --shadow-xl: 0 36px 80px rgba(0, 0, 0, 0.55), 0 15px 35px rgba(0, 0, 0, 0.40);
+  --shadow-2xl: 0 60px 140px rgba(0, 0, 0, 0.65);
 }
diff --git a/frontend/src/styles/theme/typography.css b/frontend/src/styles/theme/typography.css
index a925ca7..dfaef44 100644
--- a/frontend/src/styles/theme/typography.css
+++ b/frontend/src/styles/theme/typography.css
@@ -8,17 +8,17 @@
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --font-mono: 'Fira Code', 'Courier New', monospace;
 
-  /* Font Sizes */
-  --text-xs: 0.7rem;      /* 11.2px */
-  --text-sm: 0.75rem;     /* 12px */
-  --text-base: 0.875rem;  /* 14px */
-  --text-md: 0.95rem;     /* 15.2px */
-  --text-lg: 1rem;        /* 16px */
-  --text-xl: 1.125rem;    /* 18px */
-  --text-2xl: 1.25rem;    /* 20px */
-  --text-3xl: 1.5rem;     /* 24px */
-  --text-4xl: 2rem;       /* 32px */
-  --text-5xl: 2.5rem;     /* 40px */
+  /* Font Sizes - increased only for headings/titles */
+  --text-xs: 0.7rem;      /* 11.2px - unchanged */
+  --text-sm: 0.75rem;     /* 12px - unchanged */
+  --text-base: 0.875rem;  /* 14px - unchanged (keep small) */
+  --text-md: 0.95rem;     /* 15.2px - unchanged */
+  --text-lg: 1rem;        /* 16px - unchanged */
+  --text-xl: 1.35rem;     /* 21.6px - increased for titles */
+  --text-2xl: 1.65rem;    /* 26.4px - increased for titles */
+  --text-3xl: 2.05rem;    /* 32.8px - increased for titles */
+  --text-4xl: 2.5rem;     /* 40px - increased */
+  --text-5xl: 3rem;       /* 48px - increased */
 
   /* Font Weights */
   --weight-normal: 400;