diff --git a/bun.lock b/bun.lock
index c6b28bf..41ccfd2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -44,6 +44,7 @@
         "tailwind-merge": "^2.6.0",
         "tailwindcss": "^4.1.8",
         "zod": "^3.24.1",
+        "zustand": "^5.0.6",
       },
       "devDependencies": {
         "@tauri-apps/cli": "^2",
@@ -1021,6 +1022,8 @@
 
     "zod": ["zod@3.25.67", "", {}, "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw=="],
 
+    "zustand": ["zustand@5.0.6", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A=="],
+
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
     "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
diff --git a/index.html b/index.html
index af20076..5018715 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
     <title>Claudia - Claude Code Session Browser</title>
   </head>
 
diff --git a/src/components/ClaudeCodeSession.refactored.tsx b/src/components/ClaudeCodeSession.refactored.tsx
index e139ea6..ae70af6 100644
--- a/src/components/ClaudeCodeSession.refactored.tsx
+++ b/src/components/ClaudeCodeSession.refactored.tsx
@@ -254,7 +254,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
         />
 
         {/* Main content area */}
-        <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 flex">
           {showPreview ? (
             <SplitPane
               left={
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 15e52d8..bd09d91 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -25,16 +25,7 @@ export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "relative overflow-auto",
-          // Custom scrollbar styling
-          "scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
-          "[&::-webkit-scrollbar]:w-2",
-          "[&::-webkit-scrollbar-track]:bg-transparent",
-          "[&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded-full",
-          "[&::-webkit-scrollbar-thumb:hover]:bg-border/80",
-          className
-        )}
+        className={cn("relative overflow-auto", className)}
         {...props}
       >
         {children}
diff --git a/src/styles.css b/src/styles.css
index 5b1fa96..cf2fe9c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -48,6 +48,10 @@
   border-color: var(--color-border);
 }
 
+html {
+  color-scheme: dark;
+}
+
 body {
   background-color: var(--color-background);
   color: var(--color-foreground);
@@ -556,115 +560,57 @@ button:focus-visible,
   z-index: 1;
 }
 
-/* --- THEME-MATCHING SCROLLBARS --- */
+/* --- ELEGANT SCROLLBARS --- */
 
-/* For Firefox */
+/* Firefox - thin and minimal */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--color-muted-foreground) var(--color-background);
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
 }
 
-/* For Webkit Browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+/* Global webkit scrollbar - ultra thin and elegant */
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
 }
 
-*::-webkit-scrollbar-track {
-  background: var(--color-background);
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--color-muted);
-  border-radius: 6px;
-  border: 3px solid var(--color-background);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-muted-foreground);
-}
-
-*::-webkit-scrollbar-corner {
+::-webkit-scrollbar-track {
   background: transparent;
 }
 
-/* Code blocks and editors specific scrollbar */
+::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.6);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Code blocks - slightly larger for better usability */
 pre::-webkit-scrollbar,
 .w-md-editor-content::-webkit-scrollbar,
-code::-webkit-scrollbar,
-.overflow-auto::-webkit-scrollbar {
+code::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
 pre::-webkit-scrollbar-thumb,
 .w-md-editor-content::-webkit-scrollbar-thumb,
-code::-webkit-scrollbar-thumb,
-.overflow-auto::-webkit-scrollbar-thumb {
-  background-color: rgba(107, 114, 128, 0.2);
+code::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.4);
+  border-radius: 4px;
 }
 
 pre::-webkit-scrollbar-thumb:hover,
 .w-md-editor-content::-webkit-scrollbar-thumb:hover,
-code::-webkit-scrollbar-thumb:hover,
-.overflow-auto::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(107, 114, 128, 0.4);
-}
-
-/* Syntax highlighter specific */
-.bg-zinc-950 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.bg-zinc-950 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.bg-zinc-950 ::-webkit-scrollbar-thumb {
-  background-color: rgba(107, 114, 128, 0.3);
-  border-radius: 4px;
-}
-
-.bg-zinc-950 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(107, 114, 128, 0.5);
-}
-
-/* Code preview specific scrollbar */
-.code-preview-scroll::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-.code-preview-scroll::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-}
-
-.code-preview-scroll::-webkit-scrollbar-thumb {
-  background-color: rgba(107, 114, 128, 0.4);
-  border-radius: 6px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-.code-preview-scroll::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(107, 114, 128, 0.6);
-}
-
-.code-preview-scroll::-webkit-scrollbar-thumb:active {
-  background-color: rgba(107, 114, 128, 0.8);
-}
-
-.code-preview-scroll::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-}
-
-/* Firefox scrollbar for code preview */
-.code-preview-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(107, 114, 128, 0.4) rgba(0, 0, 0, 0.2);
+code::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.6);
 }
 
 /* NFO Credits Scanlines Animation */