diff --git a/src/components/Sidepanel/body.tsx b/src/components/Sidepanel/Chat/body.tsx
similarity index 94%
rename from src/components/Sidepanel/body.tsx
rename to src/components/Sidepanel/Chat/body.tsx
index b17d2b3..dffb389 100644
--- a/src/components/Sidepanel/body.tsx
+++ b/src/components/Sidepanel/Chat/body.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { PlaygroundMessage } from "~components/Common/Playground/Message"
 import { useMessage } from "~hooks/useMessage"
-import { EmptySidePanel } from "./empty"
+import { EmptySidePanel } from "../Chat/empty"
 
 export const SidePanelBody = () => {
   const { messages } = useMessage()
diff --git a/src/components/Sidepanel/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
similarity index 100%
rename from src/components/Sidepanel/empty.tsx
rename to src/components/Sidepanel/Chat/empty.tsx
diff --git a/src/components/Sidepanel/form.tsx b/src/components/Sidepanel/Chat/form.tsx
similarity index 100%
rename from src/components/Sidepanel/form.tsx
rename to src/components/Sidepanel/Chat/form.tsx
diff --git a/src/components/Sidepanel/header.tsx b/src/components/Sidepanel/Chat/header.tsx
similarity index 87%
rename from src/components/Sidepanel/header.tsx
rename to src/components/Sidepanel/Chat/header.tsx
index 2b48fca..084337b 100644
--- a/src/components/Sidepanel/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -2,6 +2,7 @@ import logoImage from "data-base64:~assets/icon.png"
 import CogIcon from "@heroicons/react/24/outline/CogIcon"
 import { ArrowPathIcon } from "@heroicons/react/24/outline"
 import { useMessage } from "~hooks/useMessage"
+import { Link } from "react-router-dom"
 export const SidepanelHeader = () => {
   const { clearChat } = useMessage()
   return (
@@ -19,7 +20,9 @@ export const SidepanelHeader = () => {
           className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
           <ArrowPathIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
         </button>
-        <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+        <Link to="/settings">
+          <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+        </Link>
       </div>
     </div>
   )
diff --git a/src/components/Sidepanel/Settings/header.tsx b/src/components/Sidepanel/Settings/header.tsx
new file mode 100644
index 0000000..b38fdcd
--- /dev/null
+++ b/src/components/Sidepanel/Settings/header.tsx
@@ -0,0 +1,16 @@
+import logoImage from "data-base64:~assets/icon.png"
+import { ChevronLeftIcon } from "@heroicons/react/24/outline"
+import { Link } from "react-router-dom"
+export const SidepanelSettingsHeader = () => {
+  return (
+    <div className="flex px-3 justify-start gap-3 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
+      <Link to="/">
+        <ChevronLeftIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+      </Link>
+      <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
+        <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
+        <span className="ml-1 text-sm ">Page Assist</span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/langchain/normal.ts b/src/langchain/normal.ts
deleted file mode 100644
index 8b4970f..0000000
--- a/src/langchain/normal.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { HumanMessage, AIMessage } from "@langchain/core/messages"
-import { ChatMessageHistory } from "langchain/stores/message/in_memory"
-import { ChatOllama } from "@langchain/community/chat_models/ollama"
-import { getOllamaURL } from "~services/ollama"
-import { cleanUrl } from "~libs/clean-url"
-
-export class NormalChatOllama {
-  ollama: ChatOllama
-
-  async _init() {
-    const ollamaURL = await getOllamaURL()
-    this.ollama = new ChatOllama({
-      baseUrl: cleanUrl(ollamaURL),
-      model: "qwen:1.8b-chat"
-    })
-  }
-
-  constructor() {
-    this._init()
-  }
-
-  async send(message: HumanMessage) {
-    if (!this.ollama) return null
-  }
-}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 97b6d99..16c7020 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom"
 import { SidepanelChat } from "./sidepanel-chat"
+import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
 
 export const Routing = () => <Routes></Routes>
 
@@ -7,6 +8,7 @@ export const SidepanelRouting = () => (
   <div className="dark">
     <Routes>
       <Route path="/" element={<SidepanelChat />} />
+      <Route path="/settings" element={<SidepanelSettingsHeader />} />  
     </Routes>
   </div>
 )
diff --git a/src/routes/sidepanel-chat.tsx b/src/routes/sidepanel-chat.tsx
index 894547d..c37786a 100644
--- a/src/routes/sidepanel-chat.tsx
+++ b/src/routes/sidepanel-chat.tsx
@@ -1,6 +1,6 @@
-import { SidePanelBody } from "~components/Sidepanel/body"
-import { SidepanelForm } from "~components/Sidepanel/form"
-import { SidepanelHeader } from "~components/Sidepanel/header"
+import { SidePanelBody } from "~components/Sidepanel/Chat/body"
+import { SidepanelForm } from "~components/Sidepanel/Chat/form"
+import { SidepanelHeader } from "~components/Sidepanel/Chat/header"
 
 export const SidepanelChat = () => {
   return (
diff --git a/src/routes/sidepanel-settings.tsx b/src/routes/sidepanel-settings.tsx
new file mode 100644
index 0000000..49dfa49
--- /dev/null
+++ b/src/routes/sidepanel-settings.tsx
@@ -0,0 +1,11 @@
+import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
+
+export const SidepanelSettings = () => {
+  return (
+    <div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
+      <div className="sticky top-0 z-10">
+        <SidepanelSettingsHeader />
+      </div>
+    </div>
+  )
+}