diff --git a/apps/web/package.json b/apps/web/package.json
index 3c3eff92c..acd47a075 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
     "@streetwriters/tinymce-plugins": "^1.5.18",
     "@tinymce/tinymce-react": "^3.13.0",
     "@types/rebass": "^4.0.10",
+    "allotment": "^1.12.1",
     "async-mutex": "^0.3.2",
     "axios": "^0.21.4",
     "clipboard-polyfill": "^3.0.3",
diff --git a/apps/web/src/app-effects.mobile.js b/apps/web/src/app-effects.mobile.js
index 191aa3f77..a47668a59 100644
--- a/apps/web/src/app-effects.mobile.js
+++ b/apps/web/src/app-effects.mobile.js
@@ -17,7 +17,7 @@ export default function MobileAppEffects({ sliderId, overlayId, setShow }) {
     onSliding: (e, { lastSlide, position, lastPosition }) => {
       if (!isMobile) return;
       const offset = 70;
-      const width = 180;
+      const width = 300;
 
       const percent = offset - (position / width) * offset;
       const overlay = document.getElementById("overlay");
@@ -32,6 +32,7 @@ export default function MobileAppEffects({ sliderId, overlayId, setShow }) {
     onChange: (e, { slide, lastSlide }) => {
       if (!lastSlide || !isMobile) return;
       toggleSideMenu(slide?.index === 0 ? true : false);
+      console.log("Setting editor", slide?.index === 2 ? true : false);
       setIsEditorOpen(slide?.index === 2 ? true : false);
     },
   });
@@ -43,6 +44,7 @@ export default function MobileAppEffects({ sliderId, overlayId, setShow }) {
 
   useEffect(() => {
     if (!isMobile) return;
+    console.log(isEditorOpen);
     slideToIndex(isEditorOpen ? 2 : 1);
   }, [isMobile, slideToIndex, isEditorOpen]);
 
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index dab98e74c..c0455aa16 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -119,3 +119,28 @@ textarea,
   background-color: var(--dimPrimary);
   color: var(--text);
 }
+
+.middle-pane {
+  overflow: hidden;
+  display: flex;
+}
+.editor-pane {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.nav-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.pane::before {
+  width: 1px !important;
+}
+
+:root {
+  --focus-border: var(--primary);
+  --separator-border: var(--border);
+  --sash-size: 10px;
+  --sash-hover-size: 4px;
+}
diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index 739e73256..75b1ac804 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -1,15 +1,17 @@
-import React, { useState, Suspense } from "react";
+import React, { useState, Suspense, useMemo, useRef, useEffect } from "react";
 import { Box, Flex } from "rebass";
 import ThemeProvider from "./components/theme-provider";
-import { AnimatedFlex } from "./components/animated";
-import NavigationMenuPlaceholder from "./components/navigationmenu/index.lite";
 import StatusBarPlaceholder from "./components/statusbar/index.lite";
 import useMobile from "./utils/use-mobile";
 import useTablet from "./utils/use-tablet";
 import { LazyMotion, domAnimation } from "framer-motion";
 import useDatabase from "./hooks/use-database";
 import Loader from "./components/loader";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
+import Config from "./utils/config";
 import EditorLoading from "./components/editor/loading";
+import NavigationMenuPlaceholder from "./components/navigationmenu/index.lite";
 
 const GlobalMenuWrapper = React.lazy(() =>
   import("./components/global-menu-wrapper")
@@ -22,9 +24,8 @@ const NavigationMenu = React.lazy(() => import("./components/navigation-menu"));
 const StatusBar = React.lazy(() => import("./components/status-bar"));
 
 function App() {
-  const [show, setShow] = useState(true);
   const isMobile = useMobile();
-  const isTablet = useTablet();
+  const [show, setShow] = useState(true);
   const [isAppLoaded] = useDatabase();
 
   return (
@@ -52,116 +53,15 @@ function App() {
           height="100%"
           sx={{ overflow: "hidden" }}
         >
-          <Flex
-            id="slider"
-            variant="rowFill"
-            overflowX={["auto", "hidden"]}
-            sx={{
-              overflowY: "hidden",
-              scrollSnapType: "x mandatory",
-              scrollBehavior: "smooth",
-              WebkitOverflowScrolling: "touch",
-              scrollSnapStop: "always",
-              overscrollBehavior: "contain",
-            }}
-          >
-            <Flex
-              flexShrink={0}
-              sx={{
-                scrollSnapAlign: "start",
-                scrollSnapStop: "always",
-              }}
-            >
-              <SuspenseLoader
-                condition={isAppLoaded}
-                component={NavigationMenu}
-                props={{
-                  toggleNavigationContainer: (state) => {
-                    if (!isMobile) setShow(state || !show);
-                  },
-                }}
-                fallback={<NavigationMenuPlaceholder />}
-              />
-            </Flex>
-            <AnimatedFlex
-              className="listMenu"
-              variant="columnFill"
-              initial={{
-                width: isMobile ? "100vw" : isTablet ? "40%" : "25%",
-                opacity: 1,
-                x: 0,
-              }}
-              animate={{
-                width: show
-                  ? isMobile
-                    ? "100vw"
-                    : isTablet
-                    ? "40%"
-                    : "25%"
-                  : "0%",
-                x: show ? 0 : isTablet ? "-40%" : "-25%",
-                opacity: show ? 1 : 0,
-              }}
-              transition={{ duration: 0.2, ease: "easeOut" }}
-              sx={{
-                borderRight: "1px solid",
-                borderColor: "border",
-                borderRightWidth: show ? 1 : 0,
-                position: "relative",
-                scrollSnapAlign: "start",
-                scrollSnapStop: "always",
-              }}
-              flexShrink={0}
-            >
-              <SuspenseLoader
-                condition={isAppLoaded}
-                component={CachedRouter}
-                fallback={
-                  <Loader
-                    title="Did you know?"
-                    text="All your notes are encrypted on your device."
-                  />
-                }
-              />
-              {isMobile && (
-                <Box
-                  id="overlay"
-                  sx={{
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    top: 0,
-                    left: 0,
-                    zIndex: 999,
-                    opacity: 0,
-                    visibility: "visible",
-                    pointerEvents: "none",
-                  }}
-                  bg="black"
-                />
-              )}
-            </AnimatedFlex>
-            <Flex
-              width={["100vw", "100%"]}
-              flexShrink={[0, 1]}
-              sx={{
-                scrollSnapAlign: "start",
-                scrollSnapStop: "always",
-              }}
-              flexDirection="column"
-            >
-              <SuspenseLoader
-                fallback={<EditorLoading />}
-                component={HashRouter}
-                condition={isAppLoaded}
-              />
-            </Flex>
-          </Flex>
-          <SuspenseLoader
-            fallback={<StatusBarPlaceholder />}
-            component={StatusBar}
-            condition={isAppLoaded}
-          />
+          {isMobile ? (
+            <MobileAppContents isAppLoaded={isAppLoaded} />
+          ) : (
+            <DesktopAppContents
+              isAppLoaded={isAppLoaded}
+              setShow={setShow}
+              show={show}
+            />
+          )}
         </Flex>
       </ThemeProvider>
     </LazyMotion>
@@ -179,3 +79,194 @@ function SuspenseLoader({ condition, props, component: Component, fallback }) {
     </Suspense>
   );
 }
+
+function DesktopAppContents({ isAppLoaded, show, setShow }) {
+  const isTablet = useTablet();
+  const defaultSizes = useMemo(
+    () => [isTablet ? 60 : 180, isTablet ? 240 : 380],
+    [isTablet]
+  );
+  const paneSizes = useMemo(
+    () => Config.get("paneSizes", defaultSizes),
+    [defaultSizes]
+  );
+  const [isNarrow, setIsNarrow] = useState(isTablet);
+  const panesRef = useRef();
+
+  useEffect(() => {
+    panesRef.current.reset();
+  }, [isTablet]);
+
+  return (
+    <>
+      <Flex
+        variant="rowFill"
+        sx={{
+          overflow: "hidden",
+        }}
+      >
+        <Allotment
+          ref={panesRef}
+          proportionalLayout
+          onChange={(sizes) => {
+            Config.set("paneSizes", sizes);
+            setIsNarrow(sizes[0] <= 132);
+          }}
+        >
+          <Allotment.Pane
+            className="pane nav-pane"
+            minSize={50}
+            preferredSize={paneSizes[0]}
+          >
+            <Flex flex={1}>
+              <SuspenseLoader
+                condition={isAppLoaded}
+                component={NavigationMenu}
+                props={{
+                  toggleNavigationContainer: (state) => {
+                    setShow(state || !show);
+                  },
+                  isTablet: isTablet || isNarrow,
+                }}
+                fallback={<NavigationMenuPlaceholder />}
+              />
+            </Flex>
+          </Allotment.Pane>
+          <Allotment.Pane
+            className="pane middle-pane"
+            minSize={5}
+            preferredSize={paneSizes[1]}
+            visible={show}
+          >
+            <Flex className="listMenu" variant="columnFill">
+              <SuspenseLoader
+                condition={isAppLoaded}
+                component={CachedRouter}
+                fallback={
+                  <Loader
+                    title="Did you know?"
+                    text="All your notes are encrypted on your device."
+                  />
+                }
+              />
+            </Flex>
+          </Allotment.Pane>
+
+          <Allotment.Pane className="pane editor-pane">
+            <Flex
+              sx={{
+                overflow: "hidden",
+                flex: 1,
+              }}
+              flexDirection="column"
+            >
+              <SuspenseLoader
+                fallback={
+                  <Loader
+                    title="Fun fact"
+                    text="Notesnook was released in January 2021 by a team of only 3 people."
+                  />
+                }
+                component={HashRouter}
+                condition={isAppLoaded}
+              />
+            </Flex>
+          </Allotment.Pane>
+        </Allotment>
+      </Flex>
+      <SuspenseLoader
+        fallback={<StatusBarPlaceholder />}
+        component={StatusBar}
+        condition={isAppLoaded}
+      />
+    </>
+  );
+}
+
+function MobileAppContents({ isAppLoaded }) {
+  return (
+    <Flex
+      id="slider"
+      variant="rowFill"
+      overflowX={"auto"}
+      sx={{
+        overflowY: "hidden",
+        scrollSnapType: "x mandatory",
+        scrollBehavior: "smooth",
+        WebkitOverflowScrolling: "touch",
+        scrollSnapStop: "always",
+        overscrollBehavior: "contain",
+      }}
+    >
+      <Flex
+        flexShrink={0}
+        sx={{
+          scrollSnapAlign: "start",
+          scrollSnapStop: "always",
+          width: [300, 60],
+        }}
+      >
+        <SuspenseLoader
+          condition={isAppLoaded}
+          component={NavigationMenu}
+          props={{
+            toggleNavigationContainer: () => {},
+          }}
+          fallback={<NavigationMenuPlaceholder />}
+        />
+      </Flex>
+      <Flex
+        className="listMenu"
+        variant="columnFill"
+        width={"100vw"}
+        sx={{
+          position: "relative",
+          scrollSnapAlign: "start",
+          scrollSnapStop: "always",
+        }}
+        flexShrink={0}
+      >
+        <SuspenseLoader
+          condition={isAppLoaded}
+          component={CachedRouter}
+          fallback={
+            <Loader
+              title="Did you know?"
+              text="All your notes are encrypted on your device."
+            />
+          }
+        />
+        <Box
+          id="overlay"
+          sx={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            top: 0,
+            left: 0,
+            zIndex: 999,
+            opacity: 0,
+            visibility: "visible",
+            pointerEvents: "none",
+          }}
+          bg="black"
+        />
+      </Flex>
+      <Flex
+        width={"100vw"}
+        flexShrink={0}
+        sx={{
+          scrollSnapAlign: "start",
+          scrollSnapStop: "always",
+        }}
+        flexDirection="column"
+      >
+        <SuspenseLoader
+          fallback={<EditorLoading />}
+          component={HashRouter}
+          condition={isAppLoaded}
+        />
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/apps/web/src/components/list-container/index.js b/apps/web/src/components/list-container/index.js
index 784746f00..0e499297a 100644
--- a/apps/web/src/components/list-container/index.js
+++ b/apps/web/src/components/list-container/index.js
@@ -227,6 +227,8 @@ function ListContainer(props) {
           testId={`${props.type}-action-button`}
           onClick={props.button.onClick}
           sx={{
+            position: "absolute",
+            bottom: 0,
             display: ["block", "block", "none"],
             alignSelf: "end",
             borderRadius: 100,
diff --git a/apps/web/src/components/navigation-menu/index.js b/apps/web/src/components/navigation-menu/index.js
index 01fc41110..136a5b2b7 100644
--- a/apps/web/src/components/navigation-menu/index.js
+++ b/apps/web/src/components/navigation-menu/index.js
@@ -70,7 +70,7 @@ const NAVIGATION_MENU_WIDTH = "10em";
 const NAVIGATION_MENU_TABLET_WIDTH = "4em";
 
 function NavigationMenu(props) {
-  const { toggleNavigationContainer } = props;
+  const { toggleNavigationContainer, isTablet } = props;
   const [location, previousLocation, state] = useLocation();
   const isFocusMode = useAppStore((store) => store.isFocusMode);
   const colors = useAppStore((store) => store.colors);
@@ -104,7 +104,6 @@ function NavigationMenu(props) {
       id="navigationmenu"
       flexDirection="column"
       justifyContent="space-between"
-      flex={1}
       initial={{
         opacity: 1,
       }}
@@ -114,21 +113,10 @@ function NavigationMenu(props) {
       }}
       transition={{ duration: 0.3, ease: "easeOut" }}
       sx={{
-        borderRight: "1px solid",
-        borderRightColor: "border",
-        minWidth: [
-          NAVIGATION_MENU_WIDTH,
-          isFocusMode ? 0 : NAVIGATION_MENU_TABLET_WIDTH,
-          isFocusMode ? 0 : NAVIGATION_MENU_WIDTH,
-        ],
-        maxWidth: [
-          NAVIGATION_MENU_WIDTH,
-          isFocusMode ? 0 : NAVIGATION_MENU_TABLET_WIDTH,
-          isFocusMode ? 0 : NAVIGATION_MENU_WIDTH,
-        ],
         zIndex: 1,
         height: "auto",
         position: "relative",
+        flex: 1,
       }}
       bg={"bgSecondary"}
       px={0}
@@ -137,6 +125,7 @@ function NavigationMenu(props) {
         <Flex flexDirection="column">
           {routes.map((item) => (
             <NavigationItem
+              isTablet={isTablet}
               key={item.path}
               title={item.title}
               icon={item.icon}
@@ -155,6 +144,7 @@ function NavigationMenu(props) {
           ))}
           {colors.map((color) => (
             <NavigationItem
+              isTablet={isTablet}
               key={color.id}
               title={db.colors.alias(color.id)}
               icon={Circle}
@@ -186,6 +176,7 @@ function NavigationMenu(props) {
           />
           {pins.map((pin) => (
             <NavigationItem
+              isTablet={isTablet}
               key={pin.id}
               title={pin.type === "tag" ? db.tags.alias(pin.id) : pin.title}
               menu={{
@@ -224,21 +215,9 @@ function NavigationMenu(props) {
         </Flex>
       </FlexScrollContainer>
       <Flex flexDirection="column">
-        {/* {theme === "light" ? (
-          <NavigationItem
-            title="Dark mode"
-            icon={DarkMode}
-            onClick={toggleNightMode}
-          />
-        ) : (
-          <NavigationItem
-            title="Light mode"
-            icon={LightMode}
-            onClick={toggleNightMode}
-          />
-        )} */}
         {!isLoggedIn && (
           <NavigationItem
+            isTablet={isTablet}
             title="Login"
             icon={Login}
             onClick={() => hardNavigate("/login")}
@@ -246,6 +225,7 @@ function NavigationMenu(props) {
         )}
 
         <NavigationItem
+          isTablet={isTablet}
           key={settings.path}
           title={settings.title}
           icon={settings.icon}
@@ -254,30 +234,32 @@ function NavigationMenu(props) {
           }}
           selected={location.startsWith(settings.path)}
         >
-          <Button
-            variant={"icon"}
-            title="Toggle dark/light mode"
-            sx={{
-              position: "absolute",
-              right: "2px",
-              bg: "transparent",
-              borderRadius: "default",
-              ":hover:not(disabled)": {
-                bg: "background",
-              },
-            }}
-            onClick={(e) => {
-              e.stopPropagation();
-              setFollowSystemTheme(false);
-              toggleNightMode();
-            }}
-          >
-            {theme === "dark" ? (
-              <DarkMode size={16} />
-            ) : (
-              <LightMode size={16} />
-            )}
-          </Button>
+          {isTablet ? null : (
+            <Button
+              variant={"icon"}
+              title="Toggle dark/light mode"
+              sx={{
+                position: "absolute",
+                right: "2px",
+                bg: "bgSecondary",
+                borderRadius: "default",
+                ":hover:not(disabled)": {
+                  bg: "background",
+                },
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setFollowSystemTheme(false);
+                toggleNightMode();
+              }}
+            >
+              {theme === "dark" ? (
+                <DarkMode size={16} />
+              ) : (
+                <LightMode size={16} />
+              )}
+            </Button>
+          )}
         </NavigationItem>
       </Flex>
     </AnimatedFlex>
diff --git a/apps/web/src/components/navigation-menu/index.lite.js b/apps/web/src/components/navigation-menu/index.lite.js
index 291861668..4c4e353ab 100644
--- a/apps/web/src/components/navigation-menu/index.lite.js
+++ b/apps/web/src/components/navigation-menu/index.lite.js
@@ -1,60 +1,7 @@
 import { Flex } from "rebass";
-import { useStore as useThemeStore } from "../../stores/theme-store";
-import { Button, Text } from "rebass";
-import useTablet from "../../utils/use-tablet";
-import {
-  Note,
-  Notebook,
-  StarOutline,
-  Monographs,
-  Tag,
-  Trash,
-  Settings,
-  DarkMode,
-  LightMode,
-  Sync,
-  Login,
-} from "../icons";
-import useLocation from "../../hooks/use-location";
-
-const routes = [
-  { title: "Notes", path: "/", icon: Note },
-  {
-    title: "Notebooks",
-    path: "/notebooks",
-    icon: Notebook,
-  },
-  {
-    title: "Favorites",
-    path: "/favorites",
-    icon: StarOutline,
-  },
-  { title: "Tags", path: "/tags", icon: Tag },
-  {
-    title: "Monographs",
-    path: "/monographs",
-    icon: Monographs,
-  },
-  { title: "Trash", path: "/trash", icon: Trash },
-];
-
-const bottomRoutes = [
-  {
-    title: "Settings",
-    path: "/settings",
-    icon: Settings,
-  },
-];
-
-const NAVIGATION_MENU_WIDTH = "10em";
-const NAVIGATION_MENU_TABLET_WIDTH = "4em";
+import Loader from "../loader";
 
 function NavigationMenu() {
-  const isLoggedIn = false;
-  const theme = useThemeStore((store) => store.theme);
-  const toggleNightMode = useThemeStore((store) => store.toggleNightMode);
-  const [location] = useLocation();
-
   return (
     <Flex
       id="navigationmenu"
@@ -64,127 +11,14 @@ function NavigationMenu() {
       sx={{
         borderRight: "1px solid",
         borderRightColor: "border",
-        minWidth: [
-          NAVIGATION_MENU_WIDTH,
-          NAVIGATION_MENU_TABLET_WIDTH,
-          NAVIGATION_MENU_WIDTH,
-        ],
-        maxWidth: [
-          NAVIGATION_MENU_WIDTH,
-          NAVIGATION_MENU_TABLET_WIDTH,
-          NAVIGATION_MENU_WIDTH,
-        ],
         zIndex: 1,
         height: "auto",
         position: "relative",
       }}
       bg={"bgSecondary"}
-      px={0}
     >
-      <Flex
-        flexDirection="column"
-        sx={{
-          overflow: "scroll",
-          scrollbarWidth: "none",
-          "::-webkit-scrollbar": { width: 0, height: 0 },
-          msOverflowStyle: "none",
-        }}
-      >
-        {routes.map((item) => (
-          <NavigationItem
-            key={item.path}
-            title={item.title}
-            icon={item.icon}
-            selected={
-              item.path === "/"
-                ? location === item.path
-                : location.startsWith(item.path)
-            }
-          />
-        ))}
-      </Flex>
-      <Flex flexDirection="column">
-        {theme === "light" ? (
-          <NavigationItem
-            title="Dark mode"
-            icon={DarkMode}
-            onClick={toggleNightMode}
-          />
-        ) : (
-          <NavigationItem
-            title="Light mode"
-            icon={LightMode}
-            onClick={toggleNightMode}
-          />
-        )}
-        {isLoggedIn ? (
-          <>
-            <NavigationItem title="Sync" icon={Sync} />
-          </>
-        ) : (
-          <NavigationItem title="Login" icon={Login} />
-        )}
-        {bottomRoutes.map((item) => (
-          <NavigationItem
-            key={item.path}
-            title={item.title}
-            icon={item.icon}
-            selected={location.startsWith(item.path)}
-          />
-        ))}
-      </Flex>
+      <Loader />
     </Flex>
   );
 }
 export default NavigationMenu;
-
-function NavigationItem(props) {
-  const { icon: Icon, color, title, isLoading } = props;
-  const isTablet = useTablet();
-
-  return (
-    <Button
-      data-test-id={`navitem-${title.toLowerCase()}`}
-      variant="icon"
-      bg={props.selected ? "border" : "transparent"}
-      p={2}
-      mx={2}
-      mt={[1, 2, 1]}
-      sx={{
-        borderRadius: "default",
-        position: "relative",
-        ":first-of-type": { mt: 2 },
-        ":last-of-type": { mb: 2 },
-      }}
-      label={title}
-      title={title}
-      onClick={() => {
-        props.onClick();
-      }}
-      display="flex"
-      justifyContent={["flex-start", "center", "flex-start"]}
-      alignItems="center"
-    >
-      <Icon
-        size={isTablet ? 18 : 15}
-        color={color || (props.selected ? "primary" : "icon")}
-        rotate={isLoading}
-      />
-
-      <Text
-        display={["block", "none", "block"]}
-        variant="body"
-        fontSize="subtitle"
-        sx={{
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          fontWeight: props.selected ? "bold" : "normal",
-        }}
-        ml={1}
-      >
-        {title}
-      </Text>
-    </Button>
-  );
-}
diff --git a/apps/web/src/components/navigation-menu/navigation-item.js b/apps/web/src/components/navigation-menu/navigation-item.js
index c912e5c48..3724fb4fa 100644
--- a/apps/web/src/components/navigation-menu/navigation-item.js
+++ b/apps/web/src/components/navigation-menu/navigation-item.js
@@ -2,7 +2,6 @@ import { Button, Text } from "rebass";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import useMobile from "../../utils/use-mobile";
-import useTablet from "../../utils/use-tablet";
 import * as Icons from "../icons";
 
 function NavigationItem(props) {
@@ -14,11 +13,11 @@ function NavigationItem(props) {
     isShortcut,
     isNew,
     children,
+    isTablet,
   } = props;
   const toggleSideMenu = useAppStore((store) => store.toggleSideMenu);
   const { openMenu } = useMenuTrigger();
   const isMobile = useMobile();
-  const isTablet = useTablet();
 
   return (
     <Button
@@ -27,7 +26,7 @@ function NavigationItem(props) {
       px={2}
       py={"9px"}
       mx={1}
-      mt={[1, 2, "3px"]}
+      mt={isTablet ? 1 : "3px"}
       sx={{
         borderRadius: "default",
         position: "relative",
@@ -50,7 +49,7 @@ function NavigationItem(props) {
         props.onClick();
       }}
       display="flex"
-      justifyContent={["flex-start", "center", "flex-start"]}
+      justifyContent={isTablet ? "center" : "flex-start"}
       alignItems="center"
     >
       <Icon
@@ -74,7 +73,7 @@ function NavigationItem(props) {
       )}
 
       <Text
-        display={["block", "none", "block"]}
+        display={isTablet ? "none" : "block"}
         variant="body"
         fontSize="subtitle"
         sx={{
diff --git a/apps/web/src/hooks/use-slider.js b/apps/web/src/hooks/use-slider.js
index 7647d8fac..3ff045fbf 100644
--- a/apps/web/src/hooks/use-slider.js
+++ b/apps/web/src/hooks/use-slider.js
@@ -43,8 +43,11 @@ export default function useSlider(sliderId, { onSliding, onChange }) {
 
   const slideToIndex = useCallback(
     (index) => {
+      console.log(index, slides, ref.current, slides[index].node);
       if (!ref.current || index >= slides.length) return;
-      slides[index].node.scrollIntoView({ behavior: "smooth" });
+      setTimeout(() => {
+        slides[index].node.scrollIntoView();
+      }, 100);
     },
     [ref, slides]
   );
diff --git a/apps/web/src/stores/editor-store.js b/apps/web/src/stores/editor-store.js
index d55d185e6..b8acdef8b 100644
--- a/apps/web/src/stores/editor-store.js
+++ b/apps/web/src/stores/editor-store.js
@@ -220,7 +220,6 @@ class EditorStore extends BaseStore {
     const session = this.get().session;
     if (session.id) await db.fs.cancel(session.id);
 
-    appStore.setIsEditorOpen(false);
     this.set((state) => {
       state.session = {
         ...getDefaultSession(),
@@ -231,6 +230,7 @@ class EditorStore extends BaseStore {
     this.toggleProperties(false);
     if (shouldNavigate)
       hashNavigate(`/notes/create`, { replace: true, addNonce: true });
+    appStore.setIsEditorOpen(false);
   };
 
   setTitle = (sessionId, title) => {