diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index 89bf714f..052f5b66 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -21,6 +21,31 @@
   border-color: var(--border-color);
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background: theme("colors.white");
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--theme-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--hover-color);
+}
+
+::-webkit-scrollbar-corner {
+  background: theme("colors.white");
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--theme-color);
+  border: 3px solid theme("colors.white");
+  border-radius: 5px;
+}
+
 body {
   @apply break-words bg-white;
 }
diff --git a/src/css/variables.css b/src/css/variables.css
index fe9e1f95..b8968418 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -10,11 +10,13 @@ html {
 
 html.dark {
   --border-color: #333;
+  --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
 }
 
 @media (prefers-color-scheme: dark) {
   html.not(.light) {
     --border-color: #333;
+    --theme-color: var(--auto-theme-color, theme("colors.orange.600"));
   }
 }