diff --git a/src/components/blocks/TableOfContent.astro b/src/components/blocks/TableOfContent.astro
index 5889fb2..b9e5304 100644
--- a/src/components/blocks/TableOfContent.astro
+++ b/src/components/blocks/TableOfContent.astro
@@ -13,7 +13,7 @@ const { headings } = Astro.props;
 <h3 class="text-lg font-bold mb-2 mt-0" transition:name="Table of Content">
 	Table of Contents
 </h3>
-<ul class="text-sm list-none">
+<ul class="text-sm list-none toc-scrollbar">
 	{
 		headings.map((heading: Heading, index: number) => {
 			// if (heading.depth === 1) return;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b34d16d..244dc3a 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -117,6 +117,16 @@ const { title, description } = Astro.props;
 			a.preview {
 				text-decoration: none;
 			}
+
+			.toc-scrollbar {
+				overflow-y: auto;
+				max-height: 60vh;
+
+				/* scroll bar */
+				scrollbar-width: thin;
+				scrollbar-color: #4a4a4a #2b2d31;
+				scrollbar-gutter: 10px;
+			}
 		</style>
 	</body>
 </html>