diff --git a/src/layout/DefaultNav.tsx b/src/layout/DefaultNav.tsx
new file mode 100644
index 00000000..1d1c79f6
--- /dev/null
+++ b/src/layout/DefaultNav.tsx
@@ -0,0 +1,37 @@
+import { useSidebarCollapsed } from '@/components/providers/SideBarCollapsedContext'
+import { Drawer } from 'antd'
+import clsx from 'clsx'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { FunctionComponent, useEffect } from 'react'
+
+const Menu = dynamic(() => import('./SideMenu'), { ssr: false })
+
+const DefaultNav: FunctionComponent<{ className?: string }> = ({
+  className,
+}) => {
+  const {
+    state: { collapsed },
+    hide,
+  } = useSidebarCollapsed()
+  const { asPath } = useRouter()
+
+  useEffect(() => hide(), [ asPath ])
+
+  return (
+    <Drawer
+      className={clsx('DfSideBar h-100', className)}
+      bodyStyle={{ padding: 0 }}
+      placement='left'
+      closable={false}
+      onClose={hide}
+      visible={!collapsed}
+      getContainer={false}
+      keyboard
+    >
+      <Menu />
+    </Drawer>
+  )
+}
+
+export default DefaultNav
\ No newline at end of file
diff --git a/src/layout/HomeNav.tsx b/src/layout/HomeNav.tsx
new file mode 100644
index 00000000..4476b532
--- /dev/null
+++ b/src/layout/HomeNav.tsx
@@ -0,0 +1,20 @@
+import Sider from 'antd/lib/layout/Sider'
+import dynamic from 'next/dynamic'
+
+const Menu = dynamic(() => import('./SideMenu'), { ssr: false })
+
+const HomeNav = () => {
+  return (
+    <Sider
+      className='DfSider'
+      width='230'
+      trigger={null}
+      collapsible
+      collapsed={true}
+    >
+      <Menu />
+    </Sider>
+  )
+}
+
+export default HomeNav
\ No newline at end of file
diff --git a/src/layout/Navigation.tsx b/src/layout/Navigation.tsx
index a4215618..b1bf3c7c 100644
--- a/src/layout/Navigation.tsx
+++ b/src/layout/Navigation.tsx
@@ -1,5 +1,5 @@
-import React, { FunctionComponent, useEffect, useMemo } from 'react'
-import { Layout, Drawer } from 'antd'
+import React, { useMemo } from 'react'
+import { Layout } from 'antd'
 import { useSidebarCollapsed } from '../components/providers/SideBarCollapsedContext'
 import { useRouter } from 'next/router'
 import clsx from 'clsx'
@@ -7,45 +7,15 @@ import dynamic from 'next/dynamic'
 import styles from './Sider.module.sass'
 import { useCurrentAccount } from '../components/providers/MyExtensionAccountsContext'
 
+const DefaultNav = dynamic(() => import('./DefaultNav'), { ssr: false })
+const HomeNav = dynamic(() => import('./HomeNav'), { ssr: false })
 const TopMenu = dynamic(() => import('../components/topMenu/TopMenu'), { ssr: false })
-const Menu = dynamic(() => import('./SideMenu'), { ssr: false })
 
-const { Sider, Content } = Layout
+const { Content } = Layout
 interface Props {
   children: React.ReactNode
 }
 
-const HomeNav = () => {
-  return <Sider
-    className='DfSider'
-    width='230'
-    trigger={null}
-    collapsible
-    collapsed={true}
-  >
-    <Menu />
-  </Sider>
-}
-
-const DefaultNav: FunctionComponent<{ className?: string }> = ({ className }) => {
-  const { state: { collapsed }, hide } = useSidebarCollapsed()
-  const { asPath } = useRouter()
-
-  useEffect(() => hide(), [ asPath ])
-
-  return <Drawer
-    className={clsx('DfSideBar h-100', className)}
-    bodyStyle={{ padding: 0 }}
-    placement='left'
-    closable={false}
-    onClose={hide}
-    visible={!collapsed}
-    getContainer={false}
-    keyboard
-  >
-    <Menu />
-  </Drawer>
-}
 
 const Navigation = (props: Props): JSX.Element => {
   const { children } = props
diff --git a/src/layout/NextLayout.tsx b/src/layout/NextLayout.tsx
index 5d2f8b47..eb7894c9 100644
--- a/src/layout/NextLayout.tsx
+++ b/src/layout/NextLayout.tsx
@@ -12,11 +12,14 @@ import { MINUTES } from '../components/utils/index'
 import dynamic from 'next/dynamic'
 import AnalyticProvider from 'src/components/providers/AnalyticContext'
 import { ChatContextWrapper } from 'src/components/providers/ChatContext'
+import Navigation from './Navigation'
 
-const Navigation = dynamic(() => import('./Navigation'), { ssr: false })
-const ChatFloatingModal = dynamic(() => import('src/components/chat/ChatFloatingModal'), {
-  ssr: false
-})
+const ChatFloatingModal = dynamic(
+  () => import('src/components/chat/ChatFloatingModal'),
+  {
+    ssr: false,
+  }
+)
 
 const Page: React.FunctionComponent = ({ children }) => (
   <>