diff --git a/src/App.jsx b/src/App.jsx
index a2b196e..a8c57dd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -93,14 +93,19 @@ function App() {
     //     </div>
     //   </main>
     // </div>
-
-    <div className="flex h-screen">
+    <div className="flex h-screen overflow-hidden">
       <Sidebar />
       {selectedPanel !== "" && <EditorPanel />}
-      <div className="flex-1 relative">
+      <div className="flex-1 flex flex-col h-full overflow-hidden">
+        {" "}
+        {/* Changed */}
         {activeObject && <TopBar />}
         <ActionButtons />
-        <Canvas />
+        <div className="flex-1 overflow-auto">
+          {" "}
+          {/* Added wrapper */}
+          <Canvas />
+        </div>
         <CanvasCapture />
       </div>
     </div>
diff --git a/src/components/Canvas/Canvas.jsx b/src/components/Canvas/Canvas.jsx
index 9eef731..77ccedf 100644
--- a/src/components/Canvas/Canvas.jsx
+++ b/src/components/Canvas/Canvas.jsx
@@ -26,7 +26,7 @@ export default function Canvas() {
     setScreenWidth,
   } = useContext(CanvasContext);
 
-  const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
+  const { setActiveObject } = useContext(ActiveObjectContext);
   const [zoomLevel, setZoomLevel] = useState(100);
   const containerRef = useRef(null);
 
@@ -270,9 +270,8 @@ export default function Canvas() {
       <div className="w-full max-w-4xl mx-auto p-4">
         <Card
           className={`w-full p-2 rounded-none flex-1 flex flex-col 
-            ${activeObject ? "mt-20" : "mt-20"} 
-            mx-auto pl-5 pb-5 pt-5 border-0 shadow-none bg-transparent
-            ${zoomLevel < 100 ? "overflow-hidden" : ""}`}
+          mx-auto pl-5 pb-5 pt-5 border-0 shadow-none bg-transparent mt-20
+          ${zoomLevel < 100 ? "overflow-hidden" : ""}`}
         >
           <CardContent
             className="p-0 h-full bg-transparent shadow-none"
diff --git a/src/components/Layouts/LeftSidebar.jsx b/src/components/Layouts/LeftSidebar.jsx
index 8e99ee6..72b4b9c 100644
--- a/src/components/Layouts/LeftSidebar.jsx
+++ b/src/components/Layouts/LeftSidebar.jsx
@@ -24,7 +24,7 @@ const sidebarItems = [
 export function Sidebar() {
   const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
   return (
-    <div className="w-20 border-r h-screen bg-background flex flex-col items-center py-4 gap-6">
+    <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6">
       {sidebarItems.map((item) => {
         const Icon = item.icon;
         return (
diff --git a/src/components/Panel/TopBar.jsx b/src/components/Panel/TopBar.jsx
index 383c396..6fc382b 100644
--- a/src/components/Panel/TopBar.jsx
+++ b/src/components/Panel/TopBar.jsx
@@ -27,7 +27,7 @@ export function TopBar() {
       <ScrollArea
         className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
           selectedPanel !== ""
-            ? "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[10%] xl:left-[25%] 2xl:left-[50%]"
+            ? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
             : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
         }   `}
       >