diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index b85a2cc..f412c4a 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -25,7 +25,7 @@ function TopBar() {
   }
 
   return (
-    <div className="flex flex-row bg-slate-700">
+    <div className="flex flex-row bg-slate-700 overflow-x-auto overflow-y-hidden scrollbar-thin">
       {files.map((file) => (
         <FileTab
           key={file.filePath}
diff --git a/src/index.css b/src/index.css
index bd6213e..4805e3c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* scrollbar.css */
+
+@layer utilities {
+
+    /* Width of the horizontal scrollbar */
+    .scrollbar-thin::-webkit-scrollbar {
+        height: 5px;
+    }
+
+    /* Background color of the horizontal scrollbar track */
+    .scrollbar-thin::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Color of the horizontal scrollbar thumb */
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+        background: #888;
+    }
+
+    /* Firefox horizontal scrollbar width */
+    .scrollbar-thin {
+        scrollbar-height: thin;
+    }
+
+    /* Firefox horizontal scrollbar track color */
+    .scrollbar-thin *::-moz-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Firefox horizontal scrollbar thumb color */
+    .scrollbar-thin *::-moz-scrollbar-thumb {
+        background: #888;
+    }
+}
\ No newline at end of file