diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index f5db3cf8..4e631160 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 scrollbar-thin dark:text-white"
+          className="mb-auto h-[78vh] overflow-x-hidden overflow-y-auto scrollbar-overlay 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/agents/AgentPreview.tsx b/frontend/src/agents/AgentPreview.tsx
index cc8f04dc..cb746125 100644
--- a/frontend/src/agents/AgentPreview.tsx
+++ b/frontend/src/agents/AgentPreview.tsx
@@ -112,7 +112,7 @@ export default function AgentPreview() {
   }, [queries]);
   return (
     <div className="relative h-full w-full">
-      <div className="scrollbar-thin absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:!w-full [&>div>div]:!max-w-none">
+      <div className="scrollbar-overlay absolute inset-0 bottom-[180px] overflow-hidden px-4 pt-4 [&>div>div]:!w-full [&>div>div]:!max-w-none">
         <ConversationMessages
           handleQuestion={handleQuestion}
           handleQuestionSubmission={handleQuestionSubmission}
diff --git a/frontend/src/agents/NewAgent.tsx b/frontend/src/agents/NewAgent.tsx
index 08202486..9aeb037e 100644
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -730,7 +730,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
         </div>
       </div>
       <div className="mt-3 flex w-full flex-1 grid-cols-5 flex-col gap-10 rounded-[30px] bg-[#F6F6F6] p-5 max-[1179px]:overflow-visible min-[1180px]:grid min-[1180px]:gap-5 min-[1180px]:overflow-hidden dark:bg-[#383838]">
-        <div className="scrollbar-thin col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
+        <div className="scrollbar-overlay col-span-2 flex flex-col gap-5 max-[1179px]:overflow-visible min-[1180px]:max-h-full min-[1180px]:overflow-y-auto min-[1180px]:pr-3">
           <div className="dark:bg-raisin-black rounded-[30px] bg-white px-6 py-3 dark:text-[#E0E0E0]">
             <h2 className="text-lg font-semibold">
               {t('agents.form.sections.meta')}
diff --git a/frontend/src/components/FilePicker.tsx b/frontend/src/components/FilePicker.tsx
index 97e55510..e7c4b476 100644
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -443,7 +443,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
               <TableContainer
                 ref={scrollContainerRef}
                 height="288px"
-                className="scrollbar-thin md:w-4xl lg:w-5xl"
+                className="scrollbar-overlay md:w-4xl lg:w-5xl"
                 bordered={false}
               >
                 {
diff --git a/frontend/src/components/MultiSelectPopup.tsx b/frontend/src/components/MultiSelectPopup.tsx
index 96a381bf..2fbd307e 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 scrollbar-thin">
+          <div className="h-full overflow-y-auto scrollbar-overlay">
             {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 5fcc4f78..eee1bc70 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] scrollbar-thin">
+        <div className="dark:border-dim-gray mx-4 grow overflow-y-auto rounded-md border border-[#D9D9D9] scrollbar-overlay">
           {options ? (
             <>
               {filteredOptions?.map((option: any, index: number) => {
diff --git a/frontend/src/components/ToolsPopup.tsx b/frontend/src/components/ToolsPopup.tsx
index e4b7e874..a74b50ba 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 scrollbar-thin">
+            <div className="h-full overflow-y-auto scrollbar-overlay">
               {filteredTools.length === 0 ? (
                 <div className="flex h-full flex-col items-center justify-center py-8">
                   <img
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a290b5b0..dc92daba 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -145,6 +145,59 @@ layer(base);
   }
 }
 
+@utility scrollbar-overlay {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: #E2E8F0;
+  }
+
+  &:hover::-webkit-scrollbar-thumb:hover {
+    background: #8C9198;
+  }
+
+  .dark &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+  }
+
+  .dark &:hover::-webkit-scrollbar-thumb {
+    background: #949494;
+  }
+
+  .dark &:hover::-webkit-scrollbar-thumb:hover {
+    background: #F0F0F0;
+  }
+
+  /* Standard scrollbar properties (Chrome 121+, Firefox) */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &:hover {
+    scrollbar-color: #E2E8F0 transparent;
+  }
+
+  .dark & {
+    scrollbar-color: transparent transparent;
+  }
+
+  .dark &:hover {
+    scrollbar-color: #949494 transparent;
+  }
+}
+
 @utility table-default {
   @apply border-silver dark:border-silver/40 dark:text-bright-gray block w-full table-auto justify-center overflow-auto rounded-xl border text-center;
 
@@ -229,6 +282,17 @@ layer(base);
   .dark ::-webkit-scrollbar-thumb:hover {
     background: #F0F0F0;
   }
+
+  /* Firefox: base scrollbar styles (Firefox ignores ::-webkit-scrollbar) */
+  @supports (-moz-appearance: none) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #E2E8F0 transparent;
+    }
+    .dark * {
+      scrollbar-color: #949494 transparent;
+    }
+  }
 }
 
 @layer base {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 6146911d..8d6adfee 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -6,6 +6,66 @@ import { Provider } from 'react-redux';
 import store from './store';
 import './index.css';
 
+// Show scrollbar on scroll for scrollbar-overlay elements, hide after 1s idle
+const scrollTimers = new WeakMap<Element, ReturnType<typeof setTimeout>>();
+let sbIdCounter = 0;
+const sbStyleEl = document.createElement('style');
+document.head.appendChild(sbStyleEl);
+const activeSbs = new Map<string, string>();
+function rebuildSbStyles() {
+  sbStyleEl.textContent = Array.from(activeSbs.values()).join('');
+}
+function showOverlayScrollbar(el: HTMLElement) {
+  if (!el.dataset.sbId) el.dataset.sbId = String(++sbIdCounter);
+  const sbId = el.dataset.sbId;
+  const isDark = document.body.classList.contains('dark');
+  const thumb = isDark ? '#949494' : '#E2E8F0';
+  const thumbHover = isDark ? '#F0F0F0' : '#8C9198';
+  // Webkit: inject <style> (Safari only re-renders scrollbar on stylesheet changes)
+  activeSbs.set(
+    sbId,
+    `[data-sb-id="${sbId}"]::-webkit-scrollbar-thumb{background:${thumb}!important;border-radius:9999px}` +
+      `[data-sb-id="${sbId}"]::-webkit-scrollbar-thumb:hover{background:${thumbHover}!important}`,
+  );
+  rebuildSbStyles();
+  // Standard property (Chrome 121+, Firefox)
+  el.style.scrollbarColor = `${thumb} transparent`;
+
+  const prev = scrollTimers.get(el);
+  if (prev) clearTimeout(prev);
+  scrollTimers.set(
+    el,
+    setTimeout(() => {
+      activeSbs.delete(sbId);
+      rebuildSbStyles();
+      el.style.removeProperty('scrollbar-color');
+    }, 1000),
+  );
+}
+// scroll events don't bubble — use capture phase, target is the scrolling element
+document.addEventListener(
+  'scroll',
+  (e) => {
+    const target = e.target;
+    if (
+      target instanceof HTMLElement &&
+      target.classList.contains('scrollbar-overlay')
+    ) {
+      showOverlayScrollbar(target);
+    }
+  },
+  true,
+);
+// wheel events bubble — use closest() to find the overlay container (works in Safari)
+document.addEventListener(
+  'wheel',
+  (e) => {
+    const el = (e.target as Element)?.closest?.('.scrollbar-overlay');
+    if (el instanceof HTMLElement) showOverlayScrollbar(el);
+  },
+  { passive: true },
+);
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 3096ecfc..ed345cd0 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -190,7 +190,7 @@ function Log({
       </div>
       {isOpen && (
         <div className="rounded-b-xl bg-[#F1F1F1] px-4 py-3 dark:bg-[#1B1B1B]">
-          <div className="scrollbar-thin overflow-y-auto">
+          <div className="scrollbar-overlay overflow-y-auto">
             <pre className="px-2 font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-gray-700 dark:text-gray-400">
               {JSON.stringify(filteredLog, null, 2)}
             </pre>
diff --git a/frontend/src/settings/ToolConfig.tsx b/frontend/src/settings/ToolConfig.tsx
index b6177483..d33259cf 100644
--- a/frontend/src/settings/ToolConfig.tsx
+++ b/frontend/src/settings/ToolConfig.tsx
@@ -273,7 +273,7 @@ export default function ToolConfig({
     });
   };
   return (
-    <div className="scrollbar-thin mt-8 flex flex-col gap-4">
+    <div className="scrollbar-overlay mt-8 flex flex-col gap-4">
       <div className="mb-4 flex items-center justify-between">
         <div className="text-eerie-black dark:text-bright-gray flex items-center gap-3 text-sm">
           <button
@@ -818,7 +818,7 @@ function APIToolConfig({
   };
 
   return (
-    <div className="scrollbar-thin flex flex-col gap-4">
+    <div className="scrollbar-overlay flex flex-col gap-4">
       <div className="relative">
         <input
           type="text"
@@ -1659,7 +1659,7 @@ function APIActionTable({
   };
 
   return (
-    <div className="scrollbar-thin flex flex-col gap-6">
+    <div className="scrollbar-overlay flex flex-col gap-6">
       <div>
         <h3 className="text-eerie-black dark:text-bright-gray mb-1 text-base font-normal">
           {t('settings.tools.headers')}