diff --git a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
index e69a3f37..0e31753f 100644
--- a/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
+++ b/src/renderer/src/pages/home/Messages/NarrowLayout.tsx
@@ -18,6 +18,7 @@ const NarrowLayout: FC<Props> = ({ children, ...props }) => {
 
 const Container = styled.div`
   max-width: 800px;
+  width: 100%;
   margin: 0 auto;
 `
 
diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
index c4b2b221..fe267100 100644
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -82,9 +82,9 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
           <NavbarIcon onClick={() => SearchPopup.show()}>
             <SearchOutlined />
           </NavbarIcon>
-          <NavbarIcon onClick={() => dispatch(setNarrowMode(!narrowMode))}>
+          <NarrowIcon onClick={() => dispatch(setNarrowMode(!narrowMode))}>
             <i className="iconfont icon-icon-adaptive-width"></i>
-          </NavbarIcon>
+          </NarrowIcon>
           {sidebarIcons.visible.includes('minapp') && (
             <AppStorePopover>
               <NavbarIcon>
@@ -147,4 +147,10 @@ const TitleText = styled.span`
   }
 `
 
+const NarrowIcon = styled(NavbarIcon)`
+  @media (max-width: 800px) {
+    display: none;
+  }
+`
+
 export default HeaderNavbar