diff --git a/resources/css/app.css b/resources/css/app.css
index 2fb2a57..f438e1f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -142,6 +142,27 @@ @layer base {
 }
 
 @layer utilities {
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent) transparent;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent);
+        border-radius: 9999px;
+    }
+
+    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent);
+    }
 
     [data-slot="input"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
     [data-slot="textarea"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
diff --git a/resources/js/components/admin/manage/orders/OrderPosForm.vue b/resources/js/components/admin/manage/orders/OrderPosForm.vue
index 4018ed1..068af94 100644
--- a/resources/js/components/admin/manage/orders/OrderPosForm.vue
+++ b/resources/js/components/admin/manage/orders/OrderPosForm.vue
@@ -369,7 +369,7 @@ function submit() {
                                 </Empty>
                             </div>
 
-                            <div v-else class="space-y-3">
+                            <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
                                 <div v-for="(item, index) in cart" :key="item.product_variant_id"
                                     class="rounded-lg border p-3">
                                     <div class="flex gap-3">
diff --git a/resources/js/components/admin/manage/purchases/PurchasePosForm.vue b/resources/js/components/admin/manage/purchases/PurchasePosForm.vue
index bf7e740..d324ccc 100644
--- a/resources/js/components/admin/manage/purchases/PurchasePosForm.vue
+++ b/resources/js/components/admin/manage/purchases/PurchasePosForm.vue
@@ -323,7 +323,7 @@ function submit() {
                                 </Empty>
                             </div>
 
-                            <div v-else class="space-y-3">
+                            <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
                                 <div v-for="(item, index) in cart" :key="item.raw_material_price_id"
                                     class="rounded-lg border p-3">
                                     <div class="flex gap-3">
diff --git a/resources/js/components/ui/sidebar/SidebarContent.vue b/resources/js/components/ui/sidebar/SidebarContent.vue
index bb6d9f1..da7b787 100644
--- a/resources/js/components/ui/sidebar/SidebarContent.vue
+++ b/resources/js/components/ui/sidebar/SidebarContent.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-content"
     data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    :class="cn('scrollbar-thin flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
   >
     <slot />
   </div>