diff --git a/src/layouts/app-layout.tsx b/src/layouts/app-layout.tsx
index 68e6178..0f680e9 100644
--- a/src/layouts/app-layout.tsx
+++ b/src/layouts/app-layout.tsx
@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom'
 
 import BaseLayout from './base-layout'
-import { SidebarLayout } from './side-bar'
+import { SidebarLayout } from './sidebar'
 
 const AppLayout = () => {
   return (
diff --git a/src/layouts/side-bar.tsx b/src/layouts/side-bar.tsx
deleted file mode 100644
index 2f574ff..0000000
--- a/src/layouts/side-bar.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { KBarWrapper } from '~/components/k-bar'
-
-export const SidebarLayout = () => {
-  return (
-    <KBarWrapper>
-      <div>123</div>
-    </KBarWrapper>
-  )
-}
diff --git a/src/layouts/sidebar/index.module.css b/src/layouts/sidebar/index.module.css
new file mode 100644
index 0000000..b337837
--- /dev/null
+++ b/src/layouts/sidebar/index.module.css
@@ -0,0 +1,14 @@
+.root {
+  .content {
+    left: var(--w);
+
+    @apply transition-all duration-500;
+    @apply fixed inset-0 overflow-hidden;
+  }
+
+  @screen phone {
+    .content {
+      left: var(--sidebar-collapse-width) !important;
+    }
+  }
+}
diff --git a/src/layouts/sidebar/index.tsx b/src/layouts/sidebar/index.tsx
new file mode 100644
index 0000000..9382623
--- /dev/null
+++ b/src/layouts/sidebar/index.tsx
@@ -0,0 +1,32 @@
+import { KBarWrapper } from '~/components/k-bar'
+import { cn } from '~/utils'
+
+import styles from './index.module.css'
+
+const isInApiDebugMode =
+  localStorage.getItem('__api') ||
+  localStorage.getItem('__gateway') ||
+  sessionStorage.getItem('__api') ||
+  sessionStorage.getItem('__gateway') ||
+  window.injectData.PAGE_PROXY
+
+export const SidebarLayout = () => {
+  return (
+    <KBarWrapper>
+      <div className={styles.root}>
+        {isInApiDebugMode ? (
+          <div
+            className={cn([
+              'bg-dark-800 z-2 fixed left-0 right-0 top-0 flex h-[40px] items-center whitespace-pre text-gray-400 transition-all duration-500',
+              window.injectData.PAGE_PROXY && 'bg-red-900',
+            ])}
+          >
+            123
+          </div>
+        ) : (
+          ''
+        )}
+      </div>
+    </KBarWrapper>
+  )
+}
diff --git a/src/providers/initial-provider.tsx b/src/providers/initial-provider.tsx
index f4fc82b..e237888 100644
--- a/src/providers/initial-provider.tsx
+++ b/src/providers/initial-provider.tsx
@@ -9,7 +9,6 @@ export const progress = new QProgress({ colorful: false, color: '#1a9cf3' })
 export const InitialProvider = ({ children }) => {
   const matches = useMatches()
   const navigation = useNavigation()
-
   const { handle, data } = matches[matches.length - 1] as any
   const title = handle && handle.title(data)
   useEffect(() => {
@@ -28,5 +27,6 @@ export const InitialProvider = ({ children }) => {
   }, [navigation.state])
 
   useAttachTokenFromQuery()
+
   return <>{children}</>
 }
diff --git a/src/router/router.ts b/src/router/router.ts
index 64990a1..4153759 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -1,5 +1,5 @@
-import { createHashRouter } from 'react-router-dom'
+import { createBrowserRouter } from 'react-router-dom'
 
 import { routes } from './route'
 
-export const router = createHashRouter(routes)
+export const router = createBrowserRouter(routes)
diff --git a/src/store/slice/ui.slice.ts b/src/store/slice/ui.slice.ts
new file mode 100644
index 0000000..67ee6aa
--- /dev/null
+++ b/src/store/slice/ui.slice.ts
@@ -0,0 +1,45 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+export interface ViewportRecord {
+  w: number
+  h: number
+  mobile: boolean
+  pad: boolean
+  hpad: boolean
+  wider: boolean
+  widest: boolean
+  phone: boolean
+}
+
+const initialState = {
+  viewport: {
+    w: 0,
+    h: 0,
+    mobile: false,
+    pad: false,
+    hpad: false,
+    wider: false,
+    widest: false,
+    phone: false,
+  },
+  sidebarWidth: 250,
+  sidebarCollapse: false,
+  isDark: false,
+  naiveUIDark: false,
+}
+
+export const uiSlice = createSlice({
+  name: 'ui',
+  initialState,
+  reducers: {
+    toggleDark(state) {
+      state.isDark = !state.isDark
+    },
+    updateViewport(state, action) {
+      state.viewport = action.payload
+    },
+    toggleSidebar(state, action) {
+      state.sidebarCollapse = action.payload
+    },
+  },
+})