diff --git a/frontend/src/components/ThemeSwitcher.astro b/frontend/src/components/ThemeSwitcher.astro
index c27954a..77b083e 100644
--- a/frontend/src/components/ThemeSwitcher.astro
+++ b/frontend/src/components/ThemeSwitcher.astro
@@ -2,24 +2,40 @@
 const { defaultTheme } = Astro.props;
 ---
 
-<select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer">
-    <option value="mocha">Mocha</option>
-    <option value="macchiato">Macchiato</option>
-    <option value="frappe">Frappe</option>
-    <option value="latte">Latte</option>
-    <option value="scaled-and-icy">Scaled and Icy</option>
-</select>
+<div class="relative inline-block text-left">
+    <select 
+        id="user-theme-switcher" 
+        class="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-all cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
+    >
+        <option value="mocha">Mocha</option>
+        <option value="macchiato">Macchiato</option>
+        <option value="frappe">Frappe</option>
+        <option value="latte">Latte</option>
+        <option value="scaled-and-icy">Scaled and Icy</option>
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-subtext0">
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-9"/></svg>
+    </div>
+</div>
 
 <script is:inline define:vars={{ defaultTheme }}>
-    const switcher = document.getElementById('user-theme-switcher');
-    if (switcher) {
-        const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
-        switcher.value = savedTheme;
-        
-        switcher.addEventListener('change', (e) => {
-            const newTheme = e.target.value;
-            localStorage.setItem('user-theme', newTheme);
-            document.documentElement.className = newTheme;
-        });
-    }
+    const initTheme = () => {
+        const switcher = document.getElementById('user-theme-switcher');
+        if (switcher) {
+            const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
+            switcher.value = savedTheme;
+            document.documentElement.className = savedTheme;
+            
+            switcher.addEventListener('change', (e) => {
+                const newTheme = e.target.value;
+                localStorage.setItem('user-theme', newTheme);
+                document.documentElement.className = newTheme;
+            });
+        }
+    };
+
+    // Initialize immediately
+    initTheme();
+    // Re-initialize after Astro view transitions or navigation
+    document.addEventListener('astro:after-swap', initTheme);
 </script>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 458db84..1d39925 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -40,6 +40,8 @@ try {
 		<title>{title} | {siteConfig.title}</title>
         {siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
         <script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
+            // Prevention of FOUC (Flash of Unstyled Content)
+            // Immediately apply theme before rendering
             const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
             document.documentElement.className = savedTheme;
         </script>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 056e0bc..bd0151b 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -70,9 +70,9 @@
   --flamingo: #eebebe; --rosewater: #f2d5cf;
 }
 
-/* Highly optimized light mode colors */
+/* Redesigned light themes for better contrast */
 .latte {
-  --crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5;
+  --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
   --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
   --overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
   --text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
@@ -84,10 +84,10 @@
 }
 
 .scaled-and-icy {
-  --crust: #ffffff; --mantle: #f8f9fa; --base: #f0f2f5;
-  --surface0: #e4e7eb; --surface1: #d1d5db; --surface2: #9ca3af;
-  --overlay0: #6b7280; --overlay1: #4b5563; --overlay2: #374151;
-  --text: #111827; --subtext0: #374151; --subtext1: #4b5563;
+  --crust: #e2e8f0; --mantle: #f1f5f9; --base: #f8fafc;
+  --surface0: #cbd5e1; --surface1: #94a3b8; --surface2: #64748b;
+  --overlay0: #475569; --overlay1: #334155; --overlay2: #1e293b;
+  --text: #0f172a; --subtext0: #1e293b; --subtext1: #334155;
   --blue: #5cdbdf; --lavender: #8ab4f8; --sapphire: #38bdf8;
   --sky: #0ea5e9; --teal: #2dd4bf; --green: #34d399;
   --yellow: #fcd34d; --peach: #fbbf24; --maroon: #f43f5e;
@@ -124,10 +124,10 @@ body {
 
 /* Dynamic UI Components */
 .glass {
-  background-color: color-mix(in srgb, var(--surface0) 60%, transparent);
-  backdrop-filter: blur(12px);
-  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
-  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+  background-color: color-mix(in srgb, var(--surface0) 80%, transparent);
+  backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
   border-radius: 1rem;
 }