diff --git a/web/src/components/IdeContainer/IdeContainer.js b/web/src/components/IdeContainer/IdeContainer.js
index 08127d6..4100e09 100644
--- a/web/src/components/IdeContainer/IdeContainer.js
+++ b/web/src/components/IdeContainer/IdeContainer.js
@@ -32,7 +32,7 @@ const IdeContainer = () => {
   }
 
   return (
-    <div id="cadhub-ide" className="h-screen">
+    <div id="cadhub-ide" className="flex-auto h-full">
       <Mosaic
         renderTile={(id, path) => (
           <MosaicWindow path={path} title={id} className={id.toLowerCase()}>
diff --git a/web/src/components/IdeToolbarNew/IdeToolbarNew.js b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
index 6587bdc..4920515 100644
--- a/web/src/components/IdeToolbarNew/IdeToolbarNew.js
+++ b/web/src/components/IdeToolbarNew/IdeToolbarNew.js
@@ -24,7 +24,7 @@ const IdeToolbarNew = () => {
 
   return (
     <IdeContext.Provider value={{ state, dispatch }}>
-      <div className="p-8 border-2">
+      <div className="h-full flex flex-col">
         <nav className="flex">
           {/* <button
             onClick={() => setIdeType('openCascade')}
diff --git a/web/src/layouts/MainLayout/MainLayout.js b/web/src/layouts/MainLayout/MainLayout.js
index 390567e..e75bfe0 100644
--- a/web/src/layouts/MainLayout/MainLayout.js
+++ b/web/src/layouts/MainLayout/MainLayout.js
@@ -95,7 +95,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
     }
   }, [hash, client]) // complaining about not having addMessage, however adding it puts useEffect into a loop
   return (
-    <div className="h-full">
+    <div>
       <header id="cadhub-main-header">
         <nav className="flex justify-between h-20 px-12 bg-gradient-to-r from-gray-900 to-indigo-900">
           <ul className="flex items-center">
diff --git a/web/src/pages/DevIdePage/DevIdePage.js b/web/src/pages/DevIdePage/DevIdePage.js
index 805a022..5985b26 100644
--- a/web/src/pages/DevIdePage/DevIdePage.js
+++ b/web/src/pages/DevIdePage/DevIdePage.js
@@ -5,27 +5,31 @@ import OutBound from 'src/components/OutBound'
 
 const DevIdePage = () => {
   return (
-    <MainLayout>
-      <Seo
-        title="new ide in development"
-        description="new ide in development"
-        lang="en-US"
-      />
-      <div className="py-4 bg-pink-200">
-        <div className="mx-auto max-w-6xl">
-          Woah, woah. You shouldn't be here! We're still working on this. Since
-          you've seen it now, have a look what{' '}
-          <OutBound
-            className="text-pink-700"
-            to="https://github.com/Irev-Dev/cadhub/discussions/212"
-          >
-            we've got planned
-          </OutBound>
-          .
+    <div className="h-screen flex flex-col">
+      <MainLayout shouldRemoveFooterInIde>
+        <Seo
+          title="new ide in development"
+          description="new ide in development"
+          lang="en-US"
+        />
+        <div className="py-4 bg-pink-200">
+          <div className="mx-auto max-w-6xl">
+            Woah, woah. You shouldn't be here! We're still working on this.
+            Since you've seen it now, have a look what{' '}
+            <OutBound
+              className="text-pink-700"
+              to="https://github.com/Irev-Dev/cadhub/discussions/212"
+            >
+              we've got planned
+            </OutBound>
+            .
+          </div>
         </div>
+      </MainLayout>
+      <div className="flex-auto">
+        <IdeToolbar />
       </div>
-      <IdeToolbar />
-    </MainLayout>
+    </div>
   )
 }