diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 40c6f7c2..d3f8da3a 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -655,6 +655,13 @@ select {
   outline:1px auto -webkit-focus-ring-color
 }
 
+@supports (-moz-appearance:none) {
+  * {
+    scrollbar-color:initial;
+    scrollbar-width:initial
+  }
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x:0;
   --tw-border-spacing-y:0;
@@ -2213,6 +2220,10 @@ select {
   overflow:visible
 }
 
+.overscroll-contain {
+  overscroll-behavior:contain
+}
+
 .scroll-smooth {
   scroll-behavior:smooth
 }
@@ -3074,6 +3085,118 @@ select {
   transition-timing-function:linear
 }
 
+.scrollbar::-webkit-scrollbar-track {
+  background-color:var(--scrollbar-track);
+  border-radius:var(--scrollbar-track-radius)
+}
+
+.scrollbar::-webkit-scrollbar-track:hover {
+  background-color:var(--scrollbar-track-hover, var(--scrollbar-track))
+}
+
+.scrollbar::-webkit-scrollbar-track:active {
+  background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color:var(--scrollbar-thumb);
+  border-radius:var(--scrollbar-thumb-radius)
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))
+}
+
+.scrollbar::-webkit-scrollbar-thumb:active {
+  background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))
+}
+
+.scrollbar::-webkit-scrollbar-corner {
+  background-color:var(--scrollbar-corner);
+  border-radius:var(--scrollbar-corner-radius)
+}
+
+.scrollbar::-webkit-scrollbar-corner:hover {
+  background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))
+}
+
+.scrollbar::-webkit-scrollbar-corner:active {
+  background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))
+}
+
+@supports (-moz-appearance:none) {
+  .scrollbar {
+    scrollbar-width:auto;
+    scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)
+  }
+}
+
+.scrollbar::-webkit-scrollbar {
+  display:block;
+  width:var(--scrollbar-width, 16px);
+  height:var(--scrollbar-height, 16px)
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background-color:var(--scrollbar-track);
+  border-radius:var(--scrollbar-track-radius)
+}
+
+.scrollbar-thin::-webkit-scrollbar-track:hover {
+  background-color:var(--scrollbar-track-hover, var(--scrollbar-track))
+}
+
+.scrollbar-thin::-webkit-scrollbar-track:active {
+  background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color:var(--scrollbar-thumb);
+  border-radius:var(--scrollbar-thumb-radius)
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:active {
+  background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))
+}
+
+.scrollbar-thin::-webkit-scrollbar-corner {
+  background-color:var(--scrollbar-corner);
+  border-radius:var(--scrollbar-corner-radius)
+}
+
+.scrollbar-thin::-webkit-scrollbar-corner:hover {
+  background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))
+}
+
+.scrollbar-thin::-webkit-scrollbar-corner:active {
+  background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))
+}
+
+@supports (-moz-appearance:none) {
+  .scrollbar-thin {
+    scrollbar-width:thin;
+    scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)
+  }
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  display:block;
+  width:8px;
+  height:8px
+}
+
+.scrollbar-track-neutral-200 {
+  --scrollbar-track:rgba(var(--color-neutral-200), 1) !important
+}
+
+.scrollbar-thumb-neutral-400 {
+  --scrollbar-thumb:rgba(var(--color-neutral-400), 1) !important
+}
+
 .\!\[clip\:rect\(0\2c 0\2c 0\2c 0\)\] {
   clip:rect(0,0,0,0) !important
 }
@@ -4724,6 +4847,102 @@ pre {
   display:none
 }
 
+.group:hover .group-hover\:text-primary-300 {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-primary-300), var(--tw-text-opacity))
+}
+
+.group:hover .group-hover\:text-primary-600 {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
+}
+
+.group:hover .group-hover\:underline {
+  text-decoration-line:underline
+}
+
+.group:hover .group-hover\:decoration-primary-500 {
+  text-decoration-color:rgba(var(--color-primary-500), 1)
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity:1
+}
+
+.data-\[twe-carousel-fade\]\:z-0[data-twe-carousel-fade] {
+  z-index:0
+}
+
+.data-\[twe-carousel-fade\]\:z-\[1\][data-twe-carousel-fade] {
+  z-index:1
+}
+
+.data-\[popper-reference-hidden\]\:hidden[data-popper-reference-hidden] {
+  display:none
+}
+
+.data-\[twe-carousel-fade\]\:opacity-0[data-twe-carousel-fade] {
+  opacity:0
+}
+
+.data-\[twe-carousel-fade\]\:opacity-100[data-twe-carousel-fade] {
+  opacity:1
+}
+
+.data-\[twe-carousel-fade\]\:duration-\[600ms\][data-twe-carousel-fade] {
+  transition-duration:600ms
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-x-0 {
+  border-left-width:0px;
+  border-right-width:0px
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-x-0 {
+  border-left-width:0px;
+  border-right-width:0px
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-e-0 {
+  border-inline-end-width:0px
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-s-0 {
+  border-inline-start-width:0px
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-t {
+  border-top-width:1px
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-e-0 {
+  border-inline-end-width:0px
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-s-0 {
+  border-inline-start-width:0px
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-t {
+  border-top-width:1px
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-solid {
+  border-style:solid
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-solid {
+  border-style:solid
+}
+
+.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-t-transparent {
+  border-top-color:transparent
+}
+
+.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-t-transparent {
+  border-top-color:transparent
+}
+
 .hover\:border-transparent:hover {
   border-color:transparent
 }
@@ -4837,102 +5056,6 @@ pre {
   outline-color:transparent
 }
 
-.group:hover .group-hover\:text-primary-300 {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-primary-300), var(--tw-text-opacity))
-}
-
-.group:hover .group-hover\:text-primary-600 {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-primary-600), var(--tw-text-opacity))
-}
-
-.group:hover .group-hover\:underline {
-  text-decoration-line:underline
-}
-
-.group:hover .group-hover\:decoration-primary-500 {
-  text-decoration-color:rgba(var(--color-primary-500), 1)
-}
-
-.group:hover .group-hover\:opacity-100 {
-  opacity:1
-}
-
-.data-\[twe-carousel-fade\]\:z-0[data-twe-carousel-fade] {
-  z-index:0
-}
-
-.data-\[twe-carousel-fade\]\:z-\[1\][data-twe-carousel-fade] {
-  z-index:1
-}
-
-.data-\[popper-reference-hidden\]\:hidden[data-popper-reference-hidden] {
-  display:none
-}
-
-.data-\[twe-carousel-fade\]\:opacity-0[data-twe-carousel-fade] {
-  opacity:0
-}
-
-.data-\[twe-carousel-fade\]\:opacity-100[data-twe-carousel-fade] {
-  opacity:1
-}
-
-.data-\[twe-carousel-fade\]\:duration-\[600ms\][data-twe-carousel-fade] {
-  transition-duration:600ms
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-x-0 {
-  border-left-width:0px;
-  border-right-width:0px
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-x-0 {
-  border-left-width:0px;
-  border-right-width:0px
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-e-0 {
-  border-inline-end-width:0px
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-s-0 {
-  border-inline-start-width:0px
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-t {
-  border-top-width:1px
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-e-0 {
-  border-inline-end-width:0px
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-s-0 {
-  border-inline-start-width:0px
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-t {
-  border-top-width:1px
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-solid {
-  border-style:solid
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-solid {
-  border-style:solid
-}
-
-.group[data-twe-input-focused] .group-data-\[twe-input-focused\]\:border-t-transparent {
-  border-top-color:transparent
-}
-
-.group[data-twe-input-state-active] .group-data-\[twe-input-state-active\]\:border-t-transparent {
-  border-top-color:transparent
-}
-
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\:transition-none {
     transition-property:none
@@ -5094,6 +5217,24 @@ pre {
   opacity:0.6
 }
 
+.dark\:scrollbar-track-neutral-800:is(.dark *) {
+  --scrollbar-track:rgba(var(--color-neutral-800), 1) !important
+}
+
+.dark\:scrollbar-thumb-neutral-600:is(.dark *) {
+  --scrollbar-thumb:rgba(var(--color-neutral-600), 1) !important
+}
+
+.group:hover .dark\:group-hover\:text-neutral-700:is(.dark *) {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-neutral-700), var(--tw-text-opacity))
+}
+
+.group:hover .dark\:group-hover\:text-primary-400:is(.dark *) {
+  --tw-text-opacity:1;
+  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
+}
+
 .dark\:hover\:\!bg-primary-700:hover:is(.dark *) {
   --tw-bg-opacity:1 !important;
   background-color:rgba(var(--color-primary-700), var(--tw-bg-opacity)) !important
@@ -5124,16 +5265,6 @@ pre {
   background-color:rgba(var(--color-primary-900), var(--tw-bg-opacity))
 }
 
-.group:hover .dark\:group-hover\:text-neutral-700:is(.dark *) {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-neutral-700), var(--tw-text-opacity))
-}
-
-.group:hover .dark\:group-hover\:text-primary-400:is(.dark *) {
-  --tw-text-opacity:1;
-  color:rgba(var(--color-primary-400), var(--tw-text-opacity))
-}
-
 @media (min-width: 640px) {
   .sm\:mb-0 {
     margin-bottom:0px
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3aaa9f41..728db4d1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -8,7 +8,7 @@
 {{- partial "head.html" . -}}
 
 <body
-  class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32">
+  class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32 scrollbar scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600">
   <div id="the-top" class="absolute flex self-center">
     <a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
       href="#main-content"><span
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index b3170110..69e37aad 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,10 +1,11 @@
-<details open class="toc-right mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
+<details open id="TOCView"
+  class="toc-right mt-0 overflow-hidden overscroll-contain scrollbar scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
   </summary>
   <div
-    class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
+    class="min-w-[220px] py-2 border-dotted ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">
     {{ .TableOfContents | emojify }}
   </div>
 </details>
@@ -19,8 +20,34 @@
   </div>
 </details>
 
-{{ if .Site.Params.smartTOC }} 
 <script>
+
+  var overflowOn = false;
+
+  (function () {
+    var $window = $(window);
+    var $toc = $('#TOCView');
+
+    console.log($toc)
+
+    function onResize() {
+      var windowheight = $window.height() - 150;
+      if($toc.height() > windowheight) {
+        $toc.css("overflow-y", "scroll")
+        overflowOn = true;
+      } else {
+        $toc.css("overflow-y", "hidden")
+      }
+      $toc.css("max-height", windowheight + "px")
+
+    }
+
+    $window.on('resize', onResize);
+    $(document).ready(onResize);
+  })();
+
+{{ if .Site.Params.smartTOC }}
+
   (function () {
     var $toc = $('#TableOfContents');
     if ($toc.length > 0) {
@@ -61,5 +88,6 @@
       });
     }
   })();
-</script>
 {{ end }}
+
+</script>
diff --git a/package-lock.json b/package-lock.json
index a04a0d4d..3a1fce94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "prettier-plugin-tailwindcss": "^0.6.1",
         "puppeteer": "^22.10.0",
         "rimraf": "^5.0.7",
+        "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.3",
         "tw-elements": "2.0.0",
         "typeit": "^8.8.3",
@@ -4027,6 +4028,18 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
+    "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,
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
diff --git a/package.json b/package.json
index af9c98fb..eebdc267 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "prettier-plugin-tailwindcss": "^0.6.1",
     "puppeteer": "^22.10.0",
     "rimraf": "^5.0.7",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.3",
     "tw-elements": "2.0.0",
     "typeit": "^8.8.3",
diff --git a/tailwind.config.js b/tailwind.config.js
index 114f1e7d..bd811f7e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -176,6 +176,7 @@ module.exports = {
   },
   plugins: [
     require("@tailwindcss/typography"),
-    require('@tailwindcss/forms')
+    require('@tailwindcss/forms'),
+    require('tailwind-scrollbar')({ preferredStrategy: 'pseudoelements' })
   ],
 };