diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 9dd53f38..49b37330 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -15,7 +15,7 @@ function App(): JSX.Element {
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/apps" element={<AppsPage />} />
-          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/settings/*" element={<SettingsPage />} />
         </Routes>
         <Statusbar />
       </MainContainer>
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 62f26288..45d629d0 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -28,8 +28,8 @@ const Sidebar: FC = () => {
         </Menus>
       </MainMenus>
       <Menus>
-        <StyledLink to="/settings">
-          <Icon className={isRoute('/settings')}>
+        <StyledLink to="/settings/general">
+          <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
             <i className="iconfont icon-setting"></i>
           </Icon>
         </StyledLink>
diff --git a/src/renderer/src/pages/settings/AboutSetting.tsx b/src/renderer/src/pages/settings/AboutSetting.tsx
new file mode 100644
index 00000000..da4fef8f
--- /dev/null
+++ b/src/renderer/src/pages/settings/AboutSetting.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const AboutSetting: FC = () => {
+  return <Container>About</Container>
+}
+
+const Container = styled.div``
+
+export default AboutSetting
diff --git a/src/renderer/src/pages/settings/DefaultAgentSetting.tsx b/src/renderer/src/pages/settings/DefaultAgentSetting.tsx
new file mode 100644
index 00000000..3870b5cc
--- /dev/null
+++ b/src/renderer/src/pages/settings/DefaultAgentSetting.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const DefaultAgentSetting: FC = () => {
+  return <Container>Default Agent</Container>
+}
+
+const Container = styled.div``
+
+export default DefaultAgentSetting
diff --git a/src/renderer/src/pages/settings/DeveloperSetting.tsx b/src/renderer/src/pages/settings/DeveloperSetting.tsx
new file mode 100644
index 00000000..f4e3ca90
--- /dev/null
+++ b/src/renderer/src/pages/settings/DeveloperSetting.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const DeveloperSetting: FC = () => {
+  return <Container>Developer</Container>
+}
+
+const Container = styled.div``
+
+export default DeveloperSetting
diff --git a/src/renderer/src/pages/settings/GeneralSetting.tsx b/src/renderer/src/pages/settings/GeneralSetting.tsx
new file mode 100644
index 00000000..c959116b
--- /dev/null
+++ b/src/renderer/src/pages/settings/GeneralSetting.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const GeneralSetting: FC = () => {
+  return <Container>General Settings</Container>
+}
+
+const Container = styled.div``
+
+export default GeneralSetting
diff --git a/src/renderer/src/pages/settings/ModelsSetting.tsx b/src/renderer/src/pages/settings/ModelsSetting.tsx
new file mode 100644
index 00000000..7001fa5e
--- /dev/null
+++ b/src/renderer/src/pages/settings/ModelsSetting.tsx
@@ -0,0 +1,10 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const ModelsSetting: FC = () => {
+  return <Container>Models</Container>
+}
+
+const Container = styled.div``
+
+export default ModelsSetting
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index d6a23667..84998eb3 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -1,15 +1,50 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { FC } from 'react'
+import { Link, Route, Routes, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
+import SettingsHomePage from './GeneralSetting'
+import SettingsDeveloperPage from './DeveloperSetting'
+import SettingsAboutPage from './AboutSetting'
+import SettingsModelsPage from './ModelsSetting'
+import SettingsDefaultAgent from './DefaultAgentSetting'
 
 const SettingsPage: FC = () => {
+  const { pathname } = useLocation()
+
+  const isRoute = (path: string): string => (pathname === path ? 'active' : '')
+
   return (
     <Container>
       <Navbar>
         <NavbarCenter>Settings</NavbarCenter>
       </Navbar>
       <ContentContainer>
-        <SettingMenus></SettingMenus>
+        <SettingMenus>
+          <MenuItemLink to="/settings/general">
+            <MenuItem className={isRoute('/settings/general')}>General</MenuItem>
+          </MenuItemLink>
+          <MenuItemLink to="/settings/models">
+            <MenuItem className={isRoute('/settings/models')}>Language Model</MenuItem>
+          </MenuItemLink>
+          <MenuItemLink to="/settings/default-agent">
+            <MenuItem className={isRoute('/settings/default-agent')}>Default Agent</MenuItem>
+          </MenuItemLink>
+          <MenuItemLink to="/settings/about">
+            <MenuItem className={isRoute('/settings/about')}>About</MenuItem>
+          </MenuItemLink>
+          <MenuItemLink to="/settings/developer">
+            <MenuItem className={isRoute('/settings/developer')}>Developer</MenuItem>
+          </MenuItemLink>
+        </SettingMenus>
+        <SettingContent>
+          <Routes>
+            <Route path="general" element={<SettingsHomePage />} />
+            <Route path="models" element={<SettingsModelsPage />} />
+            <Route path="default-agent" element={<SettingsDefaultAgent />} />
+            <Route path="about" element={<SettingsAboutPage />} />
+            <Route path="developer" element={<SettingsDeveloperPage />} />
+          </Routes>
+        </SettingContent>
       </ContentContainer>
     </Container>
   )
@@ -27,12 +62,41 @@ const ContentContainer = styled.div`
   flex-direction: row;
 `
 
-const SettingMenus = styled.div`
+const SettingMenus = styled.ul`
   display: flex;
+  flex-direction: column;
   min-width: var(--conversations-width);
   border-right: 1px solid #ffffff20;
-  height: 100%;
   padding: 10px;
 `
 
+const MenuItemLink = styled(Link)`
+  text-decoration: none;
+  color: var(--color-text-1);
+  margin-bottom: 5px;
+`
+
+const MenuItem = styled.li`
+  padding: 6px 10px;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 14px;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background: #213675;
+  }
+  &.active {
+    background: #213675;
+  }
+`
+
+const SettingContent = styled.div`
+  display: flex;
+  height: 100%;
+  flex: 1;
+  border-right: 1px solid #ffffff20;
+  padding: 20px;
+`
+
 export default SettingsPage