diff --git a/src/components/Layouts/SheetRightPanel.jsx b/src/components/Layouts/SheetRightPanel.jsx
index 9615e2e..b95b6b5 100644
--- a/src/components/Layouts/SheetRightPanel.jsx
+++ b/src/components/Layouts/SheetRightPanel.jsx
@@ -63,7 +63,7 @@ const SheetRightPanel = () => {
 
                 <Separator className="my-2" />
 
-                <div className="h-[500px] overflow-y-scroll">
+                <div className="h-[500px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
                     <div>
                         <Card className="p-2 mx-1">
                             <CollapsibleComponent text={"Canvas Setting"}>
diff --git a/src/components/ObjectPanel.jsx b/src/components/ObjectPanel.jsx
index 782b4f4..61a20a0 100644
--- a/src/components/ObjectPanel.jsx
+++ b/src/components/ObjectPanel.jsx
@@ -48,7 +48,7 @@ const ObjectPanel = () => {
                     </CollapsibleTrigger>
 
                     <CollapsibleContent>
-                        <div className="h-[450px] xl:h-fit lg:h-fit md:h-fit overflow-y-scroll px-1">
+                        <div className="h-[450px] xl:h-fit lg:h-fit md:h-fit overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white px-1">
                             <Tabs className="w-full h-fit"
                                 value={tabValue}
                                 onValueChange={(value) => setTabValue(value)} // Sync tab state with context