diff --git a/package.json b/package.json
index 6a77131..a373192 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
     "@iconify-json/solar": "^1.1.9",
     "@types/node": "^20.12.12",
     "@unocss/cli": "^0.60.3",
+    "@unocss/core": "^0.60.4",
+    "@unocss/preset-mini": "^0.60.4",
     "@unocss/rule-utils": "^0.60.4",
     "unocss": "^0.60.3"
   }
diff --git a/pages/homepage.templ b/pages/homepage.templ
index c3346a6..d15c476 100644
--- a/pages/homepage.templ
+++ b/pages/homepage.templ
@@ -67,7 +67,9 @@ templ Homepage() {
 			{Text: "blog", Link: templ.SafeURL("#blog")},
 			{Text: "contact", Link: templ.SafeURL("#contact")},
 		})
-		<div class="w-screen h-screen overflow-y-scroll snap-y">
+		<div
+			class="w-screen h-screen overflow-x-hidden overflow-y-scroll snap-y scrollbar thumb-gray track-black"
+		>
 			<header
 				class="h-screen w-screen flex justify-center items-center snap-start"
 				id="about"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4983a09..e4a7599 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,12 @@ devDependencies:
   '@unocss/cli':
     specifier: ^0.60.3
     version: 0.60.3
+  '@unocss/core':
+    specifier: ^0.60.4
+    version: 0.60.4
+  '@unocss/preset-mini':
+    specifier: ^0.60.4
+    version: 0.60.4
   '@unocss/rule-utils':
     specifier: ^0.60.4
     version: 0.60.4
@@ -860,6 +866,12 @@ packages:
       '@unocss/core': 0.60.3
     dev: true
 
+  /@unocss/extractor-arbitrary-variants@0.60.4:
+    resolution: {integrity: sha512-USuFGs5CLft9q7IGNdAEp1oliuUns+W7OO0Tx5qtx/oBh6pU/L93lcNNsuuGNrMU8BCmF3atx1/PEmGymgJ7VA==}
+    dependencies:
+      '@unocss/core': 0.60.4
+    dev: true
+
   /@unocss/inspector@0.60.3:
     resolution: {integrity: sha512-2cXAPA1yddB79mmpMXxPpSpizn4TskAsB7aSocbprOTYIU2Ff53gfkkijnLixrBvbG8xw91d9oPuI5Hm9GCyMQ==}
     dependencies:
@@ -908,6 +920,14 @@ packages:
       '@unocss/rule-utils': 0.60.3
     dev: true
 
+  /@unocss/preset-mini@0.60.4:
+    resolution: {integrity: sha512-ZiHbP69vkyz0xmhqzC4B4PegwV+LPlZOBT7cRhsh0P8oPOQKYOyDRy4rAl+sJBJeIrggn1r1LgN+Z0Xvd8Ytcw==}
+    dependencies:
+      '@unocss/core': 0.60.4
+      '@unocss/extractor-arbitrary-variants': 0.60.4
+      '@unocss/rule-utils': 0.60.4
+    dev: true
+
   /@unocss/preset-tagify@0.60.3:
     resolution: {integrity: sha512-pzD6bgtGuIk7M1n/JQiR6EpwnVvafSTHoM70Jhf+T8MSuatDb+KFJCn3VELV2v38aikcUY5cTf95jqHQdzOAhQ==}
     dependencies:
@@ -953,7 +973,7 @@ packages:
     resolution: {integrity: sha512-I47/DcKQ2z12W80+Ffth0K6LzNvqcQPYRWk7KwVemVoEiGYamMV8/s+SbB26Fk9KUFjh+Ns/pGAo4iJZo0ueUQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.60.3
+      '@unocss/core': 0.60.4
       magic-string: 0.30.10
     dev: true
 
diff --git a/uno.config.js b/uno.config.js
index d7afee3..6f723d4 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -9,6 +9,7 @@ import {
 } from 'unocss';
 import { definePreset } from 'unocss';
 import { variantGetParameter } from '@unocss/rule-utils';
+import { colorResolver, parseColor } from '@unocss/preset-mini/utils';
 
 import * as utils from './uno-utils.js';
 
@@ -61,7 +62,6 @@ const presetContainers = definePreset(
 						if (variant) {
 							const [match, rest, label] = variant;
 							const unit = utils.bracket(match);
-							console.log(match, rest, label)
 
 							/** @type {string | undefined } */
 							let container;
@@ -112,6 +112,26 @@ export default defineConfig({
 			'yellow': '#f9e2af',
 		},
 	},
+	rules: [
+		[
+			'scrollbar',
+			{
+				'scrollbar-color': 'var(--un-scrollbar-thumb, #ddd) var(--un-scrollbar-track, #f5f5f5)',
+			},
+		],
+		[
+			/^(?:scrollbar-)?thumb-(?:color-)?(.+)$/,
+			// @ts-expect-error
+			colorResolver('--un-scrollbar-thumb', 'scrollbar-thumb'),
+			{ autocomplete: 'scrollbar-thumb-$colors' },
+		],
+		[
+			/^(?:scrollbar-)?track-(?:color-)?(.+)$/,
+			// @ts-expect-error
+			colorResolver('--un-scrollbar-track', 'scrollbar-thumb'),
+			{ autocomplete: 'scrollbar-track-$colors' },
+		],
+	],
 	cli: {
 		entry: {
 			patterns: [