diff --git a/public/index.html b/public/index.html
index 4db4501..1dbd6fd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="h-full"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/canvas.jsx b/src/components/canvas.jsx
index bcc228f..feabe8a 100644
--- a/src/components/canvas.jsx
+++ b/src/components/canvas.jsx
@@ -235,8 +235,8 @@ export default function Canvas(props) {
   );
 
   return (
-    <div ref={drop} className="flex-grow" id="canvas" >
-      <div ref={canvas} className="w-full h-screen">
+    <div ref={drop} className="flex-grow h-full" id="canvas">
+      <div ref={canvas} className="w-full h-full">
         <svg
           onMouseMove={handleMouseMove}
           onMouseDown={handleMouseDown}
diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 739b9b0..5672f21 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -236,9 +236,9 @@ export default function ControlPanel(props) {
   };
 
   return (
-    <>
+    <div>
       {props.layout.header && header()}
-      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 mx-6 text-slate-700 select-none">
+      <div className="p-2 px-5 flex justify-between items-center rounded-xl bg-slate-100 my-1 sm:mx-1 md:mx-6 text-slate-700 select-none overflow-x-hidden">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
           <Divider layout="vertical" margin="8px" />
@@ -276,8 +276,9 @@ export default function ControlPanel(props) {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded">
-              zoom <IconCaretdown />
+            <div className="py-1 px-2 hover:bg-slate-200 rounded flex">
+              <div>zoom</div>
+              <IconCaretdown />
             </div>
           </Dropdown>
           <button
@@ -313,8 +314,9 @@ export default function ControlPanel(props) {
             }
             trigger="click"
           >
-            <div className="py-1 px-2 hover:bg-slate-200 rounded">
-              <i className="fa-solid fa-plus"></i> <IconCaretdown />
+            <div className="py-1 px-2 hover:bg-slate-200 flex">
+              <i className="fa-solid fa-plus"></i>
+              <IconCaretdown />
             </div>
           </Dropdown>
           <button className="py-1 px-2 hover:bg-slate-200 rounded" title="Edit">
@@ -380,7 +382,7 @@ export default function ControlPanel(props) {
           />
         </Form>
       </Modal>
-    </>
+    </div>
   );
 
   function header() {
@@ -678,7 +680,7 @@ export default function ControlPanel(props) {
         }
         trigger="click"
       >
-        <div className="py-1 px-2 hover:bg-slate-200 rounded">
+        <div className="py-1 px-2 hover:bg-slate-200 rounded flex items-center align-middle">
           <i className="fa-solid fa-table-list"></i> <IconCaretdown />
         </div>
       </Dropdown>
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index ce0c36a..a2106fa 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -54,8 +54,8 @@ const EditorPanel = (props) => {
   ];
 
   return (
-    <div className="h-screen flex overflow-clip relative">
-      <div style={{ width: `${props.width}px` }}>
+    <div className="flex h-full">
+      <div style={{ width: `${props.width}px` }} className="overflow-y-auto">
         <Tabs
           type="card"
           tabList={tabList}
@@ -143,7 +143,7 @@ const EditorPanel = (props) => {
         </button>
       </div>
       <div
-        className={`flex justify-center items-center p-1 h-full hover:bg-slate-300 cursor-col-resize ${
+        className={`flex justify-center items-center p-1 h-auto hover:bg-slate-300 cursor-col-resize ${
           props.resize ? "bg-slate-300" : ""
         }`}
         onMouseDown={() => props.setResize(true)}
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index ffe0655..642e0a6 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -32,10 +32,10 @@ export default function Editor(props) {
   };
 
   return (
-    <>
+    <div className="h-[100vh] overflow-hidden">
       <ControlPanel layout={layout} setLayout={setLayout} />
       <div
-        className={`flex h-full`}
+        className={`flex h-[calc(100vh-123.93px)]`}
         onMouseUp={() => setResize(false)}
         onMouseMove={dragHandler}
       >
@@ -56,6 +56,7 @@ export default function Editor(props) {
             />
           )}
           <Canvas
+          width={window.innerWidth-width-8}
             tables={tables}
             setTables={setTables}
             code={code}
@@ -68,6 +69,6 @@ export default function Editor(props) {
         </DndProvider>
         {layout.services && <Sidebar />}
       </div>
-    </>
+    </div>
   );
 }
