diff --git a/package-lock.json b/package-lock.json
index ce0b55f..a6f727d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8.4.38",
+        "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -5062,6 +5063,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -6270,6 +6272,19 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
diff --git a/package.json b/package.json
index fd2359d..5dfbb65 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8.4.38",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/src/app/globals.css b/src/app/globals.css
index d1d9f21..2f5e19d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -45,3 +45,14 @@ body {
   color: var(--foreground);
   transition: background-color 200ms ease, color 200ms ease;
 }
+/* Custom slim scrollbar for dashboard widgets */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) transparent;
+}
+.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
+.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 9999px; }
+.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--muted-foreground); }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
diff --git a/src/components/BadgeSection.tsx b/src/components/BadgeSection.tsx
index d74f8a1..e5c43ee 100644
--- a/src/components/BadgeSection.tsx
+++ b/src/components/BadgeSection.tsx
@@ -105,7 +105,7 @@ function CopyableCodeBlock({ code }: { code: string }) {
 
   return (
     <div className="flex items-center justify-between rounded-lg bg-[var(--control)] p-3 border border-[var(--border)]">
-      <code className="flex-1 text-xs text-[var(--card-foreground)] overflow-auto">
+      <code className="flex-1 text-xs text-[var(--card-foreground)] overflow-auto scrollbar-thin">
         {code}
       </code>
       <button
diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index 8c81db4..d4dfe41 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -224,7 +224,7 @@ export default function ContributionHeatmap({
         </div>
       ) : (
         <>
-          <div className="overflow-x-auto pb-2">
+          <div className="overflow-x-auto pb-2  scrollbar-thin">
             <div className="mx-auto flex flex-col gap-1" style={{ width: `${totalGridWidth}px` }}>
               
               {/* MATHEMATICAL COORDINATE TIMELINE HEADER BANNER CONTAINER */}
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index 8387ce6..19e4575 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -124,7 +124,7 @@ export default function FriendComparison() {
 
       {friendData && myData && (
         <div className="space-y-4">
-          <div className="overflow-x-auto pb-2">
+          <div className="overflow-x-auto pb-2  scrollbar-thin">
             <div className="min-w-[400px]">
               <div className="flex justify-between items-center text-sm font-medium text-[var(--muted-foreground)] px-2 mb-4">
                 <div className="w-1/3 text-left">You ({myData.username})</div>
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 3b4f622..edc01d8 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -128,7 +128,7 @@ export default function NotificationBell() {
             )}
           </div>
 
-          <ul className="max-h-72 overflow-y-auto divide-y divide-[var(--border)]">
+          <ul className="max-h-72 overflow-y-auto divide-y divide-[var(--border)]  scrollbar-thin">
             {notifications.length === 0 ? (
               <li className="px-4 py-6 text-center text-sm text-[var(--muted-foreground)]">
                 No notifications yet
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3cb5aed..4557ee0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,7 +10,9 @@ const config: Config = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require("tailwind-scrollbar")({ nocompatible: true }),
+  ],
 };
 
 export default config;