diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f64444ed..86eca9a4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import HoverTrigger from "./components/HoverTrigger";
 import EditorView from "./components/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
 import Canvas from "./components/canvas";
+import ScrollWrapper from "./components/layout/ScrollWrapper";
 
 const queryClient = new QueryClient();
 
@@ -17,7 +18,9 @@ function App() {
         </SideWrapper>
         <Canvas className="z-0 h-full w-full" />
         <HoverTrigger className="absolute inset-0 z-20 w-64">
-          <Sidebar />
+          <ScrollWrapper height={"h-[720px]"} className="overflow-x-clip">
+            <Sidebar />
+          </ScrollWrapper>
         </HoverTrigger>
       </div>
     </QueryClientProvider>
diff --git a/frontend/src/components/layout/ScrollWrapper.tsx b/frontend/src/components/layout/ScrollWrapper.tsx
index 5be0d81e..57610760 100644
--- a/frontend/src/components/layout/ScrollWrapper.tsx
+++ b/frontend/src/components/layout/ScrollWrapper.tsx
@@ -5,12 +5,18 @@ type ScrollWrapperProps = {
   width?: Tailwindest["width"];
   height?: Tailwindest["height"];
   children: React.ReactNode;
+  className?: string;
 };
 
 export default function ScrollWrapper({
   width,
   height,
   children,
+  className,
 }: ScrollWrapperProps) {
-  return <div className={cn("overflow-auto", width, height)}>{children}</div>;
+  return (
+    <div className={cn("overflow-auto", width, height, className)}>
+      {children}
+    </div>
+  );
 }