diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
index ce1f0656..6dc31c53 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -1551,44 +1551,53 @@
   height: 8px;
 }
 
-.cream ::-webkit-scrollbar-thumb {
+.cream ::-webkit-scrollbar-thumb,
+.cream .scrollbar-visible::-webkit-scrollbar-thumb {
   background: oklch(0.7 0.03 60);
   border-radius: 4px;
 }
 
-.cream ::-webkit-scrollbar-thumb:hover {
+.cream ::-webkit-scrollbar-thumb:hover,
+.cream .scrollbar-visible::-webkit-scrollbar-thumb:hover {
   background: oklch(0.6 0.04 60);
 }
 
-.cream ::-webkit-scrollbar-track {
+.cream ::-webkit-scrollbar-track,
+.cream .scrollbar-visible::-webkit-scrollbar-track {
   background: oklch(0.9 0.015 70);
 }
 
 /* Sunset theme scrollbar */
-.sunset ::-webkit-scrollbar-thumb {
+.sunset ::-webkit-scrollbar-thumb,
+.sunset .scrollbar-visible::-webkit-scrollbar-thumb {
   background: oklch(0.5 0.14 45);
   border-radius: 4px;
 }
 
-.sunset ::-webkit-scrollbar-thumb:hover {
+.sunset ::-webkit-scrollbar-thumb:hover,
+.sunset .scrollbar-visible::-webkit-scrollbar-thumb:hover {
   background: oklch(0.58 0.16 45);
 }
 
-.sunset ::-webkit-scrollbar-track {
+.sunset ::-webkit-scrollbar-track,
+.sunset .scrollbar-visible::-webkit-scrollbar-track {
   background: oklch(0.18 0.03 280);
 }
 
 /* Gray theme scrollbar */
-.gray ::-webkit-scrollbar-thumb {
+.gray ::-webkit-scrollbar-thumb,
+.gray .scrollbar-visible::-webkit-scrollbar-thumb {
   background: oklch(0.4 0.01 250);
   border-radius: 4px;
 }
 
-.gray ::-webkit-scrollbar-thumb:hover {
+.gray ::-webkit-scrollbar-thumb:hover,
+.gray .scrollbar-visible::-webkit-scrollbar-thumb:hover {
   background: oklch(0.5 0.02 250);
 }
 
-.gray ::-webkit-scrollbar-track {
+.gray ::-webkit-scrollbar-track,
+.gray .scrollbar-visible::-webkit-scrollbar-track {
   background: oklch(0.25 0.005 250);
 }
 
@@ -1648,45 +1657,6 @@
   border-radius: 0;
 }
 
-/* Cream theme scrollbar-visible adjustments */
-.cream .scrollbar-visible::-webkit-scrollbar-track {
-  background: oklch(0.9 0.015 70);
-}
-
-.cream .scrollbar-visible::-webkit-scrollbar-thumb {
-  background: oklch(0.7 0.03 60);
-}
-
-.cream .scrollbar-visible::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.6 0.04 60);
-}
-
-/* Sunset theme scrollbar-visible adjustments */
-.sunset .scrollbar-visible::-webkit-scrollbar-track {
-  background: oklch(0.18 0.03 280);
-}
-
-.sunset .scrollbar-visible::-webkit-scrollbar-thumb {
-  background: oklch(0.5 0.14 45);
-}
-
-.sunset .scrollbar-visible::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.58 0.16 45);
-}
-
-/* Gray theme scrollbar-visible adjustments */
-.gray .scrollbar-visible::-webkit-scrollbar-track {
-  background: oklch(0.25 0.005 250);
-}
-
-.gray .scrollbar-visible::-webkit-scrollbar-thumb {
-  background: oklch(0.4 0.01 250);
-}
-
-.gray .scrollbar-visible::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.5 0.02 250);
-}
-
 /* Glass morphism utilities */
 @layer utilities {
   .glass {
diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 88e7f9ab..0ac464f2 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -133,10 +133,10 @@ function HomeContent() {
   // Apply theme class to document (uses effective theme - preview, project-specific, or global)
   useEffect(() => {
     const root = document.documentElement;
-    root.classList.remove(
+    const themeClasses = [
       "dark",
-      "retro",
       "light",
+      "retro",
       "dracula",
       "nord",
       "monokai",
@@ -149,49 +149,19 @@ function HomeContent() {
       "red",
       "cream",
       "sunset",
-      "gray"
-    );
+      "gray",
+    ];
 
-    if (effectiveTheme === "dark") {
-      root.classList.add("dark");
-    } else if (effectiveTheme === "retro") {
-      root.classList.add("retro");
-    } else if (effectiveTheme === "dracula") {
-      root.classList.add("dracula");
-    } else if (effectiveTheme === "nord") {
-      root.classList.add("nord");
-    } else if (effectiveTheme === "monokai") {
-      root.classList.add("monokai");
-    } else if (effectiveTheme === "tokyonight") {
-      root.classList.add("tokyonight");
-    } else if (effectiveTheme === "solarized") {
-      root.classList.add("solarized");
-    } else if (effectiveTheme === "gruvbox") {
-      root.classList.add("gruvbox");
-    } else if (effectiveTheme === "catppuccin") {
-      root.classList.add("catppuccin");
-    } else if (effectiveTheme === "onedark") {
-      root.classList.add("onedark");
-    } else if (effectiveTheme === "synthwave") {
-      root.classList.add("synthwave");
-    } else if (effectiveTheme === "red") {
-      root.classList.add("red");
-    } else if (effectiveTheme === "cream") {
-      root.classList.add("cream");
-    } else if (effectiveTheme === "sunset") {
-      root.classList.add("sunset");
-    } else if (effectiveTheme === "gray") {
-      root.classList.add("gray");
-    } else if (effectiveTheme === "light") {
-      root.classList.add("light");
+    // Remove all theme classes
+    root.classList.remove(...themeClasses);
+
+    // Apply the effective theme
+    if (themeClasses.includes(effectiveTheme)) {
+      root.classList.add(effectiveTheme);
     } else if (effectiveTheme === "system") {
-      // System theme
+      // System theme - detect OS preference
       const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      if (isDark) {
-        root.classList.add("dark");
-      } else {
-        root.classList.add("light");
-      }
+      root.classList.add(isDark ? "dark" : "light");
     }
   }, [effectiveTheme, previewTheme, currentProject, theme]);