diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index b556033d..f5db3cf8 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -394,7 +394,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         </NavLink>
         <div
           id="conversationsMainDiv"
-          className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto dark:text-white"
+          className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto scrollbar-thin dark:text-white"
         >
           {conversations?.loading && !isDeletingConversation && (
             <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
diff --git a/frontend/src/components/MultiSelectPopup.tsx b/frontend/src/components/MultiSelectPopup.tsx
index 7ccee569..96a381bf 100644
--- a/frontend/src/components/MultiSelectPopup.tsx
+++ b/frontend/src/components/MultiSelectPopup.tsx
@@ -212,7 +212,7 @@ export default function MultiSelectPopup({
             <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-gray-900 dark:border-white"></div>
           </div>
         ) : (
-          <div className="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600 [&::-webkit-scrollbar-track]:bg-gray-200 dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+          <div className="h-full overflow-y-auto scrollbar-thin">
             {filteredOptions.length === 0 ? (
               <div className="flex h-full flex-col items-center justify-center px-4 py-8 text-center">
                 <img
diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index 8ae399ba..5fcc4f78 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -139,7 +139,7 @@ export default function SourcesPopup({
           />
         </div>
 
-        <div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+        <div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] scrollbar-thin">
           {options ? (
             <>
               {filteredOptions?.map((option: any, index: number) => {
diff --git a/frontend/src/components/ToolsPopup.tsx b/frontend/src/components/ToolsPopup.tsx
index 11f01cab..e4b7e874 100644
--- a/frontend/src/components/ToolsPopup.tsx
+++ b/frontend/src/components/ToolsPopup.tsx
@@ -175,7 +175,7 @@ export default function ToolsPopup({
           </div>
         ) : (
           <div className="dark:border-dim-gray mx-4 grow overflow-hidden rounded-md border border-[#D9D9D9]">
-            <div className="h-full overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]">
+            <div className="h-full overflow-y-auto scrollbar-thin">
               {filteredTools.length === 0 ? (
                 <div className="flex h-full flex-col items-center justify-center py-8">
                   <img
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index d35de34b..cb93e875 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -455,7 +455,6 @@ const ConversationBubble = forwardRef<
                                       customStyle={{
                                         margin: 0,
                                         borderRadius: 0,
-                                        scrollbarWidth: 'thin',
                                       }}
                                     >
                                       {String(children).replace(/\n$/, '')}
@@ -645,7 +644,7 @@ function AllSources(sources: AllSourcesProps) {
         <p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
         <div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
       </div>
-      <div className="scrollbar-thin mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
+      <div className="mt-6 flex h-[90%] w-52 flex-col gap-4 overflow-y-auto pr-3 sm:w-64">
         {sources.sources.map((source, index) => {
           const isExternalSource = source.link && source.link !== 'local';
           return (
@@ -866,7 +865,6 @@ function Thought({
                         customStyle={{
                           margin: 0,
                           borderRadius: 0,
-                          scrollbarWidth: 'thin',
                         }}
                       >
                         {String(children).replace(/\n$/, '')}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 61224d71..f3e5c6c1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -108,7 +108,6 @@ layer(base);
 }
 
 @utility scrollbar-thin {
-  /* Thin scrollbar utility */
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -120,31 +119,29 @@ layer(base);
 
   /* Light theme scrollbar */
   &::-webkit-scrollbar-thumb {
-    background: rgba(215, 215, 215, 1);
-    border-radius: 3px;
+    background: #E2E8F0;
+    border-radius: 9999px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: rgba(195, 195, 195, 1);
+    background: #8C9198;
   }
 
   /* Dark theme scrollbar */
   .dark &::-webkit-scrollbar-thumb {
-    background: rgba(77, 78, 88, 1);
-    border-radius: 3px;
+    background: #CFCFCF;
+    border-radius: 9999px;
   }
 
   .dark &::-webkit-scrollbar-thumb:hover {
-    background: rgba(97, 98, 108, 1);
+    background: #F0F0F0;
   }
 
-  /* For Firefox - Light theme */
   scrollbar-width: thin;
-  scrollbar-color: rgba(215, 215, 215, 1) transparent;
+  scrollbar-color: #E2E8F0 transparent;
 
-  /* For Firefox - Dark theme */
   .dark & {
-    scrollbar-color: rgba(77, 78, 88, 1) transparent;
+    scrollbar-color: #CFCFCF transparent;
   }
 }
 
@@ -175,16 +172,25 @@ layer(base);
     min-width: 150px;
     max-width: 320px;
     overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: grey transparent;
   }
 
   & td {
     min-width: 150px;
     max-width: 320px;
     overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: grey transparent;
+  }
+
+  @supports (-moz-appearance: none) {
+    & th,
+    & td {
+      scrollbar-width: thin;
+      scrollbar-color: #E2E8F0 transparent;
+    }
+
+    .dark & th,
+    .dark & td {
+      scrollbar-color: #CFCFCF transparent;
+    }
   }
 }
 
@@ -204,23 +210,24 @@ layer(base);
     background-color: #202124; /* raisin-black */
   }
   ::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
+    height: 6px;
   }
   ::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-  .dark ::-webkit-scrollbar-track {
-    background: #2f3036;
+    background: transparent;
   }
   ::-webkit-scrollbar-thumb {
-    background: #888;
-    border-radius: 40px;
+    background: #E2E8F0;
+    border-radius: 9999px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: #8C9198;
+  }
+  .dark ::-webkit-scrollbar-thumb {
+    background: #CFCFCF;
   }
   .dark ::-webkit-scrollbar-thumb:hover {
-    background: #b1afaf;
+    background: #F0F0F0;
   }
 }
 
@@ -635,9 +642,6 @@ Avoid over-scrolling in mobile browsers
     src: url('/fonts/IBMPlexMono-Medium.ttf');
   }
 
-  ::-webkit-scrollbar {
-    width: 10;
-  }
   /* Light mode specific autofill styles */
   input:-webkit-autofill,
   input:-webkit-autofill:hover,