diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index 033c02ba..f5e366a6 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
-           && 'h-2.5 border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index 033c02ba..f5e366a6 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
          orientation === 'vertical'
            && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
          orientation === 'horizontal'
-           && 'h-2.5 border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />