diff --git a/apps/web/public/index.html b/apps/web/public/index.html
index 7abdddc33..420226abe 100644
--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -194,17 +194,19 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
     <!-- for calculating 1 em size -->
-    <div
-      id="div"
+    <p
+      id="p"
       style="
-        height: 0;
-        width: 0;
         outline: none;
+        z-index: -1;
         border: none;
         padding: none;
         margin: none;
+        font-size: 0.9rem;
         box-sizing: content-box;
       "
-    ></div>
+    >
+      Hello World
+    </p>
   </body>
 </html>
diff --git a/apps/web/src/common/height-calculator.js b/apps/web/src/common/height-calculator.js
index f320e1311..6432c13e5 100644
--- a/apps/web/src/common/height-calculator.js
+++ b/apps/web/src/common/height-calculator.js
@@ -1,6 +1,6 @@
-const SINGLE_LINE_HEIGHT = 1.3;
-const DEFAULT_FONT_SIZE = 16;
-
+const SINGLE_LINE_HEIGHT = 1.4;
+const DEFAULT_FONT_SIZE = document.getElementById("p").clientHeight - 1;
+console.log("HEIGHT", DEFAULT_FONT_SIZE);
 const MAX_HEIGHTS = {
   note: SINGLE_LINE_HEIGHT * 7 * DEFAULT_FONT_SIZE,
   notebook: SINGLE_LINE_HEIGHT * 7 * DEFAULT_FONT_SIZE,
diff --git a/apps/web/src/components/editor/editor.css b/apps/web/src/components/editor/editor.css
index 5aca3e8e5..46e3c2991 100644
--- a/apps/web/src/components/editor/editor.css
+++ b/apps/web/src/components/editor/editor.css
@@ -70,8 +70,9 @@ tox-tbtn tox-tbtn--select {
   border-bottom: 0px solid var(--border) !important;
 }
 
-.mce-content-body:focus-visible {
+.mce-content-body {
   outline: none;
+  height: 100%;
 }
 
 .mce-content-body:not([dir="rtl"])[data-mce-placeholder]:not(.mce-visualblocks)::before {
@@ -79,7 +80,7 @@ tox-tbtn tox-tbtn--select {
 }
 
 .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
-  margin-top: 15px !important;
+  margin-top: 1em !important;
 }
 
 .mce-content-body *::before {
diff --git a/apps/web/src/components/menu/index.js b/apps/web/src/components/menu/index.js
index 73f2c21b1..4c4053063 100644
--- a/apps/web/src/components/menu/index.js
+++ b/apps/web/src/components/menu/index.js
@@ -118,7 +118,7 @@ function MenuContainer({ id, style, sx, children }) {
         borderRadius: "default",
         border: "2px solid",
         borderColor: "border",
-        width: 180,
+        width: "11em",
         ...sx,
       }}
     >
diff --git a/apps/web/src/components/navigation-menu/index.js b/apps/web/src/components/navigation-menu/index.js
index 56272d716..5e8b5a6ec 100644
--- a/apps/web/src/components/navigation-menu/index.js
+++ b/apps/web/src/components/navigation-menu/index.js
@@ -55,6 +55,8 @@ const bottomRoutes = [
   },
 ];
 
+const NAVIGATION_MENU_WIDTH = "9em";
+
 function NavigationMenu(props) {
   const { toggleNavigationContainer } = props;
   const [location] = useLocation();
@@ -93,13 +95,13 @@ function NavigationMenu(props) {
         borderRightColor: "border",
         minWidth: [
           "85%",
-          isSideMenuOpen && !isFocusMode ? 150 : 0,
-          isFocusMode ? 0 : 150,
+          isSideMenuOpen && !isFocusMode ? NAVIGATION_MENU_WIDTH : 0,
+          isFocusMode ? 0 : NAVIGATION_MENU_WIDTH,
         ],
         maxWidth: [
           "85%",
-          isSideMenuOpen && !isFocusMode ? 150 : 0,
-          isFocusMode ? 0 : 150,
+          isSideMenuOpen && !isFocusMode ? NAVIGATION_MENU_WIDTH : 0,
+          isFocusMode ? 0 : NAVIGATION_MENU_WIDTH,
         ],
         zIndex: !isSideMenuOpen ? -1 : isMobile ? 999 : isTablet ? 1 : 1,
         height: ["100%", "auto", "auto"],