diff --git a/src/app.css b/src/app.css
index b475734..53e2cc1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,51 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --sb-track-color: rgb(229 229 229 / 0.5);
+    --sb-thumb-color: #d4d4d4;
+    --sb-size: 7px;
+  }
+
+  .dark {
+    --sb-track-color: #171717;
+    --sb-thumb-color: #404040;
+    --sb-size: 7px;
+  }
+}
+
+@layer base {
+  body,
+  nav {
+    scrollbar-color: var(--sb-thumb-color) transparent;
+  }
+
+  body::-webkit-scrollbar {
+    width: var(--sb-size);
+  }
+
+  body::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+  }
+
+  body::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+  }
+
+  aside::-webkit-scrollbar {
+    width: var(--sb-size);
+  }
+
+  aside::-webkit-scrollbar-track {
+    background: var(--sb-track-color);
+  }
+
+  aside::-webkit-scrollbar-thumb {
+    background: var(--sb-thumb-color);
+  }
+}
+
 @font-face {
   font-family: 'General-Sans';
   src: url('/fonts/GeneralSans-Variable.woff2') format('woff2');
@@ -9,35 +54,3 @@
   font-display: swap;
   font-style: normal;
 }
-
-body,
-nav {
-  --sb-track-color: #171717;
-  --sb-thumb-color: #404040;
-  --sb-size: 10px;
-  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
-}
-
-body::-webkit-scrollbar {
-  width: var(--sb-size);
-}
-
-body::-webkit-scrollbar-track {
-  background: var(--sb-track-color);
-}
-
-body::-webkit-scrollbar-thumb {
-  background: var(--sb-thumb-color);
-}
-
-nav::-webkit-scrollbar {
-  width: var(--sb-size);
-}
-
-nav::-webkit-scrollbar-track {
-  background: var(--sb-track-color);
-}
-
-nav::-webkit-scrollbar-thumb {
-  background: var(--sb-thumb-color);
-}