diff --git a/svelte-app/src/components/sidebar.svelte b/svelte-app/src/components/sidebar.svelte
index 9a7b9993..35f8b2c2 100644
--- a/svelte-app/src/components/sidebar.svelte
+++ b/svelte-app/src/components/sidebar.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <div
-  class="min-h-fith-full flex w-full flex-col gap-5 rounded-xl transition-all duration-300 ease-in-out lg:ml-auto lg:max-w-xs lg:overflow-y-auto xl:max-w-sm 2xl:max-w-md"
+  class="themed-scrollbar min-h-fith-full flex w-full flex-col gap-5 rounded-xl transition-all duration-300 ease-in-out lg:ml-auto lg:max-w-xs lg:overflow-y-auto xl:max-w-sm 2xl:max-w-md"
 >
   <BaseContainer
     class="order-2 flex flex-col items-start justify-start gap-y-4 p-4 lg:order-1"
diff --git a/svelte-app/src/routes/+layout.svelte b/svelte-app/src/routes/+layout.svelte
index f7a7fff4..87515cb3 100644
--- a/svelte-app/src/routes/+layout.svelte
+++ b/svelte-app/src/routes/+layout.svelte
@@ -148,7 +148,7 @@
 
 <div class="main mx-auto h-full w-full p-5 text-dark dark:text-light lg:text-lg">
   <div
-    class="flex h-full w-full flex-col gap-5 overflow-x-hidden overflow-y-scroll rounded-xl lg:h-full lg:flex-row lg:overflow-y-hidden"
+    class="themed-scrollbar flex h-full w-full flex-col gap-5 overflow-x-hidden overflow-y-scroll rounded-xl lg:h-full lg:flex-row lg:overflow-y-hidden"
   >
     <Sidebar config={data.config} toruData={data.toruData} {scrollContainer} />
 
diff --git a/svelte-app/src/styles/_tw.scss b/svelte-app/src/styles/_tw.scss
index 2c5404ae..b1a6b779 100644
--- a/svelte-app/src/styles/_tw.scss
+++ b/svelte-app/src/styles/_tw.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 @layer base {
   body {
     @apply h-full w-full overflow-x-hidden;
@@ -24,10 +26,10 @@
     img {
       box-sizing: border-box;
     }
-  
+
     body {
       @apply bg-neutral-800 text-light;
-    
+
       &.light {
         @apply bg-neutral-0 text-dark;
       }
@@ -52,7 +54,7 @@
         }
       }
     }
-    
+
     ::selection {
       @apply bg-orange-light/90 text-light;
     }
@@ -71,20 +73,29 @@
 
     &,
     &-sm {
-      @apply focus-visible:outline outline-orange-light outline-2;
+      @apply outline-2 outline-orange-light focus-visible:outline;
     }
 
     &-sm {
       @apply outline-offset-2;
     }
   }
+
+  .themed-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: $neutral-200 transparent;
+
+    .dark & {
+      scrollbar-color: $neutral-400 transparent;
+    }
+  }
 }
 
 @layer components {
   .pt-ol {
     li {
       ol {
-        @apply list-[lower-alpha] my-3;
+        @apply my-3 list-[lower-alpha];
       }
     }
   }
@@ -92,7 +103,7 @@
   .pt-ul {
     li {
       ul {
-        @apply list-disc my-3;
+        @apply my-3 list-disc;
       }
     }
   }