diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx
index 8946cf6f8..19171f87f 100644
--- a/apps/web/src/components/editor/action-bar.tsx
+++ b/apps/web/src/components/editor/action-bar.tsx
@@ -269,12 +269,18 @@ const TabStrip = React.memo(function TabStrip() {
         onDoubleClick={(e) => e.stopPropagation()}
       >
         <Button
-          variant="secondary"
+          variant="accent"
           {...CREATE_BUTTON_MAP.notes}
           data-test-id={`create-new-note`}
-          sx={{ p: 1, bg: "accent" }}
+          sx={{
+            p: 0,
+            borderRadius: "100%",
+            mr: "small",
+            height: 28,
+            width: 28
+          }}
         >
-          <NoteAdd size={16} color="accentForeground" />
+          <Plus size={18} color="accentForeground" />
         </Button>
         <Button
           disabled={!canGoBack}
diff --git a/apps/web/src/components/navigation-menu/index.tsx b/apps/web/src/components/navigation-menu/index.tsx
index 3a48e1e8a..6e1a32be5 100644
--- a/apps/web/src/components/navigation-menu/index.tsx
+++ b/apps/web/src/components/navigation-menu/index.tsx
@@ -671,109 +671,108 @@ function NavigationDropdown() {
   const notLoggedIn = Boolean(!user || !user.id);
 
   return (
-    <Flex sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
-      <Flex
-        onClick={(e) => {
-          e.preventDefault();
-          Menu.openMenu(
-            [
-              {
-                type: "popup",
-                component: () => <UserProfile minimal />,
-                key: "profile"
-              },
-              {
-                type: "separator",
-                key: "sep"
-              },
-              {
-                type: "button",
-                title: strings.toggleDarkLightMode(),
-                key: "toggle-theme-mode",
-                icon: theme === "dark" ? LightMode.path : DarkMode.path,
-                onClick: () => {
-                  setFollowSystemTheme(false);
-                  toggleNightMode();
-                }
-              },
-              {
-                type: "button",
-                title: strings.upgradeToPro(),
-                icon: Pro.path,
-                key: "upgrade",
-                isHidden: notLoggedIn || isPro
-              },
-              {
-                type: "button",
-                title: settings.title,
-                key: settings.id,
-                icon: settings.icon.path,
-                onClick: () => {
-                  hashNavigate(settings.path);
-                }
-              },
-              {
-                type: "button",
-                title: strings.helpAndSupport(),
-                icon: Documentation.path,
-                key: "help-and-support",
-                onClick: () => {
-                  window.open("https://help.notesnook.com/", "_blank");
-                }
-              },
-              {
-                type: "button",
-                title: strings.login(),
-                icon: Login.path,
-                key: "login",
-                isHidden: !notLoggedIn,
-                onClick: () => hardNavigate("/login")
-              },
-              {
-                type: "button",
-                title: strings.logout(),
-                icon: Logout.path,
-                key: "logout",
-                isHidden: notLoggedIn,
-                onClick: () => logout()
-              }
-            ],
+    <Button
+      variant="secondary"
+      onClick={(e) => {
+        e.preventDefault();
+        Menu.openMenu(
+          [
             {
-              position: {
-                target: e.currentTarget,
-                location: "below",
-                yOffset: 5
+              type: "popup",
+              component: () => <UserProfile minimal />,
+              key: "profile"
+            },
+            {
+              type: "separator",
+              key: "sep"
+            },
+            {
+              type: "button",
+              title: strings.toggleDarkLightMode(),
+              key: "toggle-theme-mode",
+              icon: theme === "dark" ? LightMode.path : DarkMode.path,
+              onClick: () => {
+                setFollowSystemTheme(false);
+                toggleNightMode();
               }
+            },
+            {
+              type: "button",
+              title: strings.upgradeToPro(),
+              icon: Pro.path,
+              key: "upgrade",
+              isHidden: notLoggedIn || isPro
+            },
+            {
+              type: "button",
+              title: settings.title,
+              key: settings.id,
+              icon: settings.icon.path,
+              onClick: () => {
+                hashNavigate(settings.path);
+              }
+            },
+            {
+              type: "button",
+              title: strings.helpAndSupport(),
+              icon: Documentation.path,
+              key: "help-and-support",
+              onClick: () => {
+                window.open("https://help.notesnook.com/", "_blank");
+              }
+            },
+            {
+              type: "button",
+              title: strings.login(),
+              icon: Login.path,
+              key: "login",
+              isHidden: !notLoggedIn,
+              onClick: () => hardNavigate("/login")
+            },
+            {
+              type: "button",
+              title: strings.logout(),
+              icon: Logout.path,
+              key: "logout",
+              isHidden: notLoggedIn,
+              onClick: () => logout()
             }
-          );
-        }}
-        variant="columnCenter"
-        data-test-id="profile-dropdown"
-        sx={{
-          bg: "background-secondary",
-          size: 25,
-          borderRadius: 80,
-          cursor: "pointer",
-          position: "relative",
-          border: "1px solid var(--border)",
-          alignItems: "center"
-        }}
-      >
-        {!user || !user.id || !profile?.profilePicture ? (
-          <User size={14} color="icon" />
-        ) : (
-          <Image
-            sx={{
-              width: "100%",
-              height: "100%",
-              objectFit: "contain",
-              borderRadius: 80
-            }}
-            src={profile.profilePicture}
-          />
-        )}
-      </Flex>
-    </Flex>
+          ],
+          {
+            position: {
+              target: e.currentTarget,
+              location: "below",
+              yOffset: 5
+            }
+          }
+        );
+      }}
+      data-test-id="profile-dropdown"
+      sx={{
+        bg: "background-secondary",
+        size: 26,
+        borderRadius: 80,
+        cursor: "pointer",
+        position: "relative",
+        border: "1px solid var(--border)",
+        alignItems: "center",
+        p: 0
+      }}
+    >
+      {!user || !user.id || !profile?.profilePicture ? (
+        <User size={14} color="icon" />
+      ) : (
+        <Image
+          sx={{
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            borderRadius: 80
+          }}
+          src={profile.profilePicture}
+        />
+      )}
+    </Button>
   );
 }
 
diff --git a/apps/web/src/components/navigation-menu/navigation-item.tsx b/apps/web/src/components/navigation-menu/navigation-item.tsx
index d4353e938..c18666acc 100644
--- a/apps/web/src/components/navigation-menu/navigation-item.tsx
+++ b/apps/web/src/components/navigation-menu/navigation-item.tsx
@@ -90,20 +90,19 @@ function NavigationItem(
       }}
       data-test-id={`navigation-item`}
       title={title}
+      onContextMenu={(e) => {
+        if (!menuItems) return;
+        e.preventDefault();
+        e.stopPropagation();
+        Menu.openMenu(menuItems);
+      }}
     >
-      <Button
+      <Flex
         sx={{
           p: 0,
           flex: 1,
           alignItems: "center",
-          justifyContent: isCollapsed ? "center" : "flex-start",
-          display: "flex"
-        }}
-        onContextMenu={(e) => {
-          if (!menuItems) return;
-          e.preventDefault();
-          e.stopPropagation();
-          Menu.openMenu(menuItems);
+          justifyContent: isCollapsed ? "center" : "flex-start"
         }}
       >
         {Icon ? (
@@ -130,7 +129,7 @@ function NavigationItem(
             {title}
           </Text>
         )}
-      </Button>
+      </Flex>
       {children && !isCollapsed ? children : null}
     </Flex>
   );
diff --git a/apps/web/src/components/navigation-menu/tab-item.tsx b/apps/web/src/components/navigation-menu/tab-item.tsx
index e007bc64f..9ff501c85 100644
--- a/apps/web/src/components/navigation-menu/tab-item.tsx
+++ b/apps/web/src/components/navigation-menu/tab-item.tsx
@@ -53,32 +53,20 @@ export function TabItem(props: TabItemProps & FlexProps) {
           }
         ),
         borderRadius: "default",
-        p: 0,
         alignItems: "center",
+        justifyContent: "center",
         position: "relative",
         ":focus": { bg: selected ? "hover-selected" : "hover" },
+        p: 1,
         ...sx
       }}
+      data-test-id={`tab-item`}
+      title={title}
+      onClick={() => {
+        if (onClick) onClick();
+      }}
     >
-      <Button
-        data-test-id={`tab-item`}
-        sx={{
-          p: 1,
-          flex: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          display: "flex"
-        }}
-        title={title}
-        onClick={() => {
-          if (onClick) onClick();
-        }}
-      >
-        <Icon
-          size={16}
-          color={color || (selected ? "icon-selected" : "icon")}
-        />
-      </Button>
+      <Icon size={16} color={color || (selected ? "icon-selected" : "icon")} />
     </Flex>
   );
 }