diff --git a/template/css/style.css b/template/css/style.css
index 973e88c..7d2e748 100644
--- a/template/css/style.css
+++ b/template/css/style.css
@@ -1,5 +1,4 @@
 html {
-  scrollbar-color: #666 #201c29;
   font-size: 62.5%;
 }
 
@@ -20,6 +19,26 @@ a {
   text-decoration: none;
 }
 
+/* Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #118bee auto;
+}
+
+*::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #118bee;
+  border-radius: 10px;
+}
+
 .special-symbol {
   display: inline-flex;
   align-items: center;
diff --git a/template/css/style.scss b/template/css/style.scss
index 60f3a1f..2b889c8 100644
--- a/template/css/style.scss
+++ b/template/css/style.scss
@@ -15,7 +15,6 @@ $small-artwork-width: 184px;
 $large-artwork-width: 288px;
 
 html {
-  scrollbar-color: #666 #201c29;
   font-size: 62.5%;
 }
 
@@ -39,6 +38,26 @@ a {
   text-decoration: none;
 }
 
+/* Scrollbars */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: $link auto;
+}
+
+*::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: $link;
+    border-radius: 10px;
+}
+
 .special-symbol {
   display: inline-flex;
   align-items: center;