diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index 01fe3dd9..c50c145b 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -210,6 +210,26 @@ body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
     color: var(--color-heading);
+    scrollbar-color: var(--color-surface-muted) var(--color-surface-secondary);
+}
+
+/* Webkit scrollbars */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-surface-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-surface-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-line-strong);
 }
 
 html {
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
index 2881ad62..cf2888ee 100644
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/resources/scripts/components/CompanySwitcher.vue
@@ -53,7 +53,7 @@
             scrollbar-thin scrollbar-thumb-rounded-full
             w-[300px]
             max-h-[350px]
-            scrollbar-thumb-gray-300 scrollbar-track-gray-10
+            scrollbar-thumb-surface-muted scrollbar-track-surface-secondary
             pb-4
           "
         >
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b3b21653..688787c8 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -29,8 +29,8 @@
         class="
           scrollbar-thin
           scrollbar-thumb-rounded-full
-          scrollbar-thumb-gray-300
-          scrollbar-track-gray-100
+          scrollbar-thumb-surface-muted
+          scrollbar-track-surface-secondary
           overflow-y-auto
           bg-surface
           rounded-md