diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 33b5ace7..83bec77c 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -218,20 +218,38 @@ input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
   border-right-width: 0;
 }
 
+/* Modern thin rounded scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: theme("colors.video.context.border") transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+  background: transparent;
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: theme("colors.video.context.border");
-  border: 5px solid transparent;
-  border-left: 0;
-  background-clip: content-box;
+  border-radius: 10px;
+  transition: background-color 0.2s ease;
 }
 
-::-webkit-scrollbar {
-  /* For some reason the styles don't get applied without the width */
-  width: 13px;
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(134, 82, 187, 0.8);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(134, 82, 187, 1);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 .grecaptcha-badge {