diff --git a/joi/src/core/ScrollArea/index.tsx b/joi/src/core/ScrollArea/index.tsx
index f1f241d9d..c7fe71572 100644
--- a/joi/src/core/ScrollArea/index.tsx
+++ b/joi/src/core/ScrollArea/index.tsx
@@ -9,7 +9,7 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, onScroll, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
-    type="scroll"
+    type="auto"
     className={twMerge('scroll-area__root', className)}
     {...props}
   >
diff --git a/joi/src/core/ScrollArea/styles.scss b/joi/src/core/ScrollArea/styles.scss
index cb5832c53..20d966541 100644
--- a/joi/src/core/ScrollArea/styles.scss
+++ b/joi/src/core/ScrollArea/styles.scss
@@ -44,17 +44,17 @@
 }
 
 .scroll-area__bar[data-orientation='vertical'] {
-  width: 8px;
+  width: 10px;
 }
 
 .scroll-area__bar[data-orientation='horizontal'] {
   flex-direction: column;
-  height: 8px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
 }
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar-thumb {