diff --git a/examples/index.html b/examples/index.html
index 356c911f..21b40346 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -25,27 +25,6 @@
         .pcui-treeview-item-icon {
             font-size: 14px;
         }
-
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #20292b;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #5b7073;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #f60;
-        }
-
-        ::-webkit-scrollbar-corner {
-            background: #2c393c;
-        }
     </style>
     <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
     <script type="importmap">
diff --git a/src/scss/_scrollbars.scss b/src/scss/_scrollbars.scss
new file mode 100644
index 00000000..bad337c4
--- /dev/null
+++ b/src/scss/_scrollbars.scss
@@ -0,0 +1,31 @@
+/* Apply scrollbar styles globally */
+* {
+    /* Webkit-based browsers */
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $bcg-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $text-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: $text-active;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: $bcg-dark;
+    }
+
+    /* Standardized Properties */
+    @supports not selector(::-webkit-scrollbar) {
+        /* Firefox */
+        scrollbar-width: thin;
+        scrollbar-color: $text-darkest $bcg-darkest;
+    }
+}
diff --git a/src/scss/pcui-base.scss b/src/scss/pcui-base.scss
index a7ae2ed8..dc5e71f6 100644
--- a/src/scss/pcui-base.scss
+++ b/src/scss/pcui-base.scss
@@ -1,4 +1,5 @@
 @import './variables';
 @import './fonts';
+@import './scrollbars';
 @import './pcui-common';
 @import './components';