diff --git a/src/app.tsx b/src/app.tsx
index 6679c52..d436bda 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,7 +4,6 @@ import "./global.css";
 import { Message } from "./chatgpt";
 import getDefaultParams from "./getDefaultParam";
 import ChatBOX from "./chatbox";
-import Settings from "./settings";
 
 export interface ChatStore {
   systemMessageContent: string;
@@ -70,16 +69,8 @@ export function App() {
     localStorage.setItem(STORAGE_NAME, JSON.stringify(allChatStore));
   }, [allChatStore]);
 
-  const [showSettings, setShowSettings] = useState(false);
-
   return (
     <div className="flex text-sm h-screen bg-slate-200">
-      <Settings
-        chatStore={chatStore}
-        setChatStore={setChatStore}
-        show={showSettings}
-        setShow={setShowSettings}
-      />
       <div className="flex flex-col h-full p-4 border-r-indigo-500 border-2">
         <div className="grow overflow-scroll">
           <button
@@ -146,11 +137,7 @@ export function App() {
           DEL
         </button>
       </div>
-      <ChatBOX
-        chatStore={chatStore}
-        setChatStore={setChatStore}
-        setShowSettings={setShowSettings}
-      />
+      <ChatBOX chatStore={chatStore} setChatStore={setChatStore} />
     </div>
   );
 }
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 92a6bd8..1d4a4e3 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -1,11 +1,11 @@
-import { StateUpdater, useState } from "preact/hooks";
+import { useState } from "preact/hooks";
 import type { ChatStore } from "./app";
 import ChatGPT, { ChunkMessage } from "./chatgpt";
+import Settings from "./settings";
 
 export default function ChatBOX(props: {
   chatStore: ChatStore;
   setChatStore: (cs: ChatStore) => void;
-  setShowSettings: StateUpdater<boolean>;
 }) {
   const { chatStore, setChatStore } = props;
   const [inputMsg, setInputMsg] = useState("");
@@ -127,9 +127,15 @@ export default function ChatBOX(props: {
     setChatStore({ ...chatStore });
   };
 
-  const { setShowSettings } = props;
+  const [showSettings, setShowSettings] = useState(false);
   return (
     <div className="grow flex flex-col p-4">
+      <Settings
+        chatStore={chatStore}
+        setChatStore={setChatStore}
+        show={showSettings}
+        setShow={setShowSettings}
+      />
       <p className="cursor-pointer" onClick={() => setShowSettings(true)}>
         <div>
           <button className="underline">