diff --git a/app/globals.css b/app/globals.css
index d91c503..f475439 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -244,6 +244,19 @@
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.75 0.01 260);
     }
+
+    /* Dark mode scrollbar */
+    .dark .scrollbar-thin {
+        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.35 0.015 260);
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.45 0.015 260);
+    }
 }
 
 /* Smooth page transitions */
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 7524da5..a724ce4 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -407,7 +407,7 @@ export function ChatInput({
                     placeholder={dict.chat.placeholder}
                     disabled={isDisabled}
                     aria-label="Chat input"
-                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
                 />
 
                 <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index 815636f..8366609 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -1114,7 +1114,7 @@ export function ChatMessageDisplay({
                                                                                                         )}
                                                                                                     </button>
                                                                                                     {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30">
+                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
                                                                                                             <pre className="text-xs whitespace-pre-wrap text-foreground/80">
                                                                                                                 {
                                                                                                                     section.content
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
index 3ba6068..21675e0 100644
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -43,7 +43,7 @@ export function HistoryDialog({
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
                 <DialogHeader>
                     <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>