diff --git a/src/layout/DefaultLayout/Desktop/SideBar/Avatar.tsx b/src/app/(main)/@nav/_layout/Desktop/Avatar.tsx
similarity index 100%
rename from src/layout/DefaultLayout/Desktop/SideBar/Avatar.tsx
rename to src/app/(main)/@nav/_layout/Desktop/Avatar.tsx
diff --git a/src/layout/DefaultLayout/Desktop/SideBar/BottomActions.tsx b/src/app/(main)/@nav/_layout/Desktop/BottomActions.tsx
similarity index 100%
rename from src/layout/DefaultLayout/Desktop/SideBar/BottomActions.tsx
rename to src/app/(main)/@nav/_layout/Desktop/BottomActions.tsx
diff --git a/src/layout/DefaultLayout/Desktop/SideBar/TopActions.tsx b/src/app/(main)/@nav/_layout/Desktop/TopActions.tsx
similarity index 100%
rename from src/layout/DefaultLayout/Desktop/SideBar/TopActions.tsx
rename to src/app/(main)/@nav/_layout/Desktop/TopActions.tsx
diff --git a/src/layout/DefaultLayout/Desktop/SideBar/index.tsx b/src/app/(main)/@nav/_layout/Desktop/index.tsx
similarity index 67%
rename from src/layout/DefaultLayout/Desktop/SideBar/index.tsx
rename to src/app/(main)/@nav/_layout/Desktop/index.tsx
index 24fe8b41167b7..1d1ef6aaf2563 100644
--- a/src/layout/DefaultLayout/Desktop/SideBar/index.tsx
+++ b/src/app/(main)/@nav/_layout/Desktop/index.tsx
@@ -1,17 +1,16 @@
+'use client';
+
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
 import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-interface Props {
-  sidebarKey?: SidebarTabKey;
-}
-
-export default memo<Props>(({ sidebarKey }) => {
+const Nav = memo(() => {
+  const sidebarKey = useActiveTabKey();
   return (
     <SideNav
       avatar={<Avatar />}
@@ -21,3 +20,7 @@ export default memo<Props>(({ sidebarKey }) => {
     />
   );
 });
+
+Nav.displayName = 'DesktopNav';
+
+export default Nav;
diff --git a/src/app/(main)/@nav/_layout/Mobile.tsx b/src/app/(main)/@nav/_layout/Mobile.tsx
new file mode 100644
index 0000000000000..c62aa07ad868c
--- /dev/null
+++ b/src/app/(main)/@nav/_layout/Mobile.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot, MessageSquare, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { rgba } from 'polished';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.33)};
+    }
+  `,
+  container: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+const Nav = memo(() => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const activeKey = useActiveTabKey();
+  const router = useRouter();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: SidebarTabKey.Chat,
+        onClick: () => {
+          router.push('/chat');
+        },
+        title: t('tab.chat'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        key: SidebarTabKey.Market,
+        onClick: () => {
+          router.push('/market');
+        },
+        title: t('tab.market'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          router.push('/settings');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+});
+
+Nav.displayName = 'MobileNav';
+
+export default Nav;
diff --git a/src/app/(main)/@nav/default.tsx b/src/app/(main)/@nav/default.tsx
new file mode 100644
index 0000000000000..8976223be15db
--- /dev/null
+++ b/src/app/(main)/@nav/default.tsx
@@ -0,0 +1,16 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Default = () => {
+  const mobile = isMobileDevice();
+
+  const Nav = mobile ? Mobile : Desktop;
+
+  return <Nav />;
+};
+
+Default.displayName = 'Nav';
+
+export default Default;
diff --git a/src/app/(main)/_layout/Desktop.tsx b/src/app/(main)/_layout/Desktop.tsx
new file mode 100644
index 0000000000000..78d8b5323d43e
--- /dev/null
+++ b/src/app/(main)/_layout/Desktop.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsPWA } from '@/hooks/useIsPWA';
+
+import { LayoutProps } from './type';
+
+const Layout = memo<LayoutProps>(({ children, nav }) => {
+  const isPWA = useIsPWA();
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{
+        borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {nav}
+      {children}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'DesktopMainLayout';
+
+export default Layout;
diff --git a/src/app/(main)/_layout/Mobile.tsx b/src/app/(main)/_layout/Mobile.tsx
new file mode 100644
index 0000000000000..ee8c37adeeb96
--- /dev/null
+++ b/src/app/(main)/_layout/Mobile.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { LayoutProps } from './type';
+
+const MOBILE_IGNORE_NAV_ROUTES = ['/settings', '/me/', '/profile', '/chat/'];
+
+const Layout = memo(({ children, nav }: LayoutProps) => {
+  const pathname = usePathname();
+  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+
+  return (
+    <Flexbox
+      style={{
+        height: '100%',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        position: 'relative',
+        width: '100vw',
+      }}
+    >
+      {children}
+      {!hideNav && nav}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'MobileMainLayout';
+
+export default Layout;
diff --git a/src/app/(main)/_layout/type.ts b/src/app/(main)/_layout/type.ts
new file mode 100644
index 0000000000000..49de1b261e147
--- /dev/null
+++ b/src/app/(main)/_layout/type.ts
@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  nav: ReactNode;
+}
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
new file mode 100644
index 0000000000000..62de831fc6b51
--- /dev/null
+++ b/src/app/(main)/layout.tsx
@@ -0,0 +1,17 @@
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const MainLayout = ({ children, nav }: LayoutProps) => {
+  const mobile = isMobileDevice();
+
+  const Layout = mobile ? Mobile : Desktop;
+
+  return <Layout nav={nav}>{children}</Layout>;
+};
+
+MainLayout.displayName = 'MainLayout';
+
+export default MainLayout;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 255b1d6b9ae7d..a24707dd37f17 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,7 +8,6 @@ import Analytics from '@/components/Analytics';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
-import LayoutRoutes from '@/layout/routes';
 import { isMobileDevice } from '@/utils/responsive';
 
 const RootLayout = async ({ children }: PropsWithChildren) => {
@@ -21,9 +20,7 @@ const RootLayout = async ({ children }: PropsWithChildren) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>
-            <LayoutRoutes>{children}</LayoutRoutes>
-          </AuthProvider>
+          <AuthProvider>{children}</AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a3f1f89f825c9..0968fc7e8ed9a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,6 +14,8 @@ const Page = () => {
   );
 };
 
+Page.displayName = 'Loading';
+
 export default Page;
 
 export const metadata: Metadata = {
diff --git a/src/layout/DefaultLayout/Desktop/index.tsx b/src/layout/DefaultLayout/Desktop/index.tsx
deleted file mode 100644
index 1acd04ac44d6b..0000000000000
--- a/src/layout/DefaultLayout/Desktop/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import { useTheme } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import ClientResponsiveLayout from '@/components/client/ClientResponsiveLayout';
-import { useActiveTabKey } from '@/hooks/useActiveTabKey';
-import { useIsPWA } from '@/hooks/useIsPWA';
-
-import SideBar from './SideBar';
-
-const Desktop = memo<PropsWithChildren>(({ children }) => {
-  const isPWA = useIsPWA();
-  const theme = useTheme();
-
-  const sidebarKey = useActiveTabKey();
-
-  return (
-    <Flexbox
-      height={'100%'}
-      horizontal
-      style={isPWA ? { borderTop: `1px solid ${theme.colorBorder}` } : {}}
-      width={'100%'}
-    >
-      <SideBar sidebarKey={sidebarKey} />
-      {children}
-    </Flexbox>
-  );
-});
-
-export default ClientResponsiveLayout({ Desktop, Mobile: () => import('../Mobile') });
diff --git a/src/layout/DefaultLayout/Mobile/index.tsx b/src/layout/DefaultLayout/Mobile/index.tsx
deleted file mode 100644
index c1b8b2c307efb..0000000000000
--- a/src/layout/DefaultLayout/Mobile/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import { type MobileNavBarTitleProps } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import dynamic from 'next/dynamic';
-import { CSSProperties, PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SafeSpacing from '@/components/SafeSpacing';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-const MobileTabBar = dynamic(() => import('@/features/MobileTabBar'));
-
-const useStyles = createStyles(({ css, cx, stylish }) => ({
-  container: cx(
-    stylish.noScrollbar,
-    css`
-      position: relative;
-      overflow: hidden auto;
-      width: 100vw;
-      height: 100%;
-    `,
-  ),
-  mobileTabBar: css`
-    position: fixed;
-    z-index: 100;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  `,
-}));
-
-interface AppMobileLayoutProps extends PropsWithChildren {
-  className?: string;
-  showTabBar?: boolean;
-  style?: CSSProperties;
-  tabBarKey?: SidebarTabKey;
-  title?: MobileNavBarTitleProps;
-}
-
-const AppLayoutMobile = memo<AppMobileLayoutProps>(
-  ({ children, showTabBar, tabBarKey, style, className }) => {
-    const { styles, cx } = useStyles();
-
-    return (
-      <Flexbox className={cx(styles.container, className)} style={style}>
-        {children}
-        {showTabBar && (
-          <>
-            <SafeSpacing mobile position={'bottom'} />
-            <MobileTabBar className={styles.mobileTabBar} tabBarKey={tabBarKey} />
-          </>
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-export default AppLayoutMobile;
diff --git a/src/layout/DefaultLayout/index.ts b/src/layout/DefaultLayout/index.ts
deleted file mode 100644
index 7f063e8954dd1..0000000000000
--- a/src/layout/DefaultLayout/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DefaultLayoutDesktop } from './Desktop';
-export { default as DefaultLayoutMobile } from './Mobile';
diff --git a/src/layout/routes/Desktop.tsx b/src/layout/routes/Desktop.tsx
deleted file mode 100644
index f6cdb374eb3ba..0000000000000
--- a/src/layout/routes/Desktop.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, memo } from 'react';
-
-import { DefaultLayoutDesktop } from '@/layout/DefaultLayout';
-
-const defaultLayoutRoutes = new Set(['/']);
-
-const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
-  const pathname = usePathname();
-
-  if (defaultLayoutRoutes.has(pathname)) return children;
-
-  return <DefaultLayoutDesktop>{children}</DefaultLayoutDesktop>;
-});
-
-export default DesktopLayout;
diff --git a/src/layout/routes/Mobile.tsx b/src/layout/routes/Mobile.tsx
deleted file mode 100644
index 5cb415c3d49ce..0000000000000
--- a/src/layout/routes/Mobile.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, memo } from 'react';
-
-import { useActiveTabKey } from '@/hooks/useActiveTabKey';
-import { useIsSubSlug } from '@/hooks/useIsSubSlug';
-import { DefaultLayoutMobile } from '@/layout/DefaultLayout';
-
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  const pathname = usePathname();
-  const tabBarKey = useActiveTabKey();
-  const isSubPath = useIsSubSlug();
-
-  if (pathname === '/') return children;
-
-  return (
-    <DefaultLayoutMobile showTabBar={!isSubPath} tabBarKey={tabBarKey}>
-      {children}
-    </DefaultLayoutMobile>
-  );
-});
-
-export default MobileLayout;
diff --git a/src/layout/routes/index.tsx b/src/layout/routes/index.tsx
deleted file mode 100644
index e7ae2510b2293..0000000000000
--- a/src/layout/routes/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import ServerLayout from '@/components/server/ServerLayout';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const LayoutRoutes = ServerLayout({ Desktop, Mobile });
-
-export default LayoutRoutes;