diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
index a8687c4862..83ec937665 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
@@ -8,6 +8,8 @@ import { NavigationResizer } from './NavigationResizer';
 import { IFolder } from '../../../stores/reducers/folders/slice';
 import { IPage } from '../../../stores/reducers/pages/slice';
 
+const MINIMUM_WIDTH = 200;
+
 export const NavigationPanel = ({
   onCollapseNavigationClick,
   width,
@@ -29,7 +31,7 @@ export const NavigationPanel = ({
 
           <Workspace></Workspace>
 
-          <div className={'flex flex-col px-2 overflow-auto'} style={{height: 'calc(100vh - 280px)'}}>
+          <div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 280px)' }}>
             {folders.map((folder, index) => (
               <FolderItem
                 key={index}
@@ -50,7 +52,7 @@ export const NavigationPanel = ({
           <NewFolderButton></NewFolderButton>
         </div>
       </div>
-      <NavigationResizer></NavigationResizer>
+      <NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
     </>
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationResizer.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationResizer.tsx
index 087d3c0d42..cba0c35a8d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationResizer.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationResizer.tsx
@@ -3,13 +3,17 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import { useEffect } from 'react';
 import { navigationWidthActions } from '../../../stores/reducers/navigation-width/slice';
 
-export const NavigationResizer = () => {
+export const NavigationResizer = ({ minWidth }: { minWidth: number }) => {
   const width = useAppSelector((state) => state.navigationWidth);
   const appDispatch = useAppDispatch();
   const { onMouseDown, movementX } = useResizer();
 
   useEffect(() => {
-    appDispatch(navigationWidthActions.changeWidth(width + movementX));
+    if (width + movementX < minWidth) {
+      appDispatch(navigationWidthActions.changeWidth(minWidth));
+    } else {
+      appDispatch(navigationWidthActions.changeWidth(width + movementX));
+    }
   }, [movementX]);
 
   return (