diff --git a/src/app.tsx b/src/app.tsx
index d436bda..6679c52 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,6 +4,7 @@ import "./global.css";
 import { Message } from "./chatgpt";
 import getDefaultParams from "./getDefaultParam";
 import ChatBOX from "./chatbox";
+import Settings from "./settings";
 
 export interface ChatStore {
   systemMessageContent: string;
@@ -69,8 +70,16 @@ 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
@@ -137,7 +146,11 @@ export function App() {
           DEL
         </button>
       </div>
-      <ChatBOX chatStore={chatStore} setChatStore={setChatStore} />
+      <ChatBOX
+        chatStore={chatStore}
+        setChatStore={setChatStore}
+        setShowSettings={setShowSettings}
+      />
     </div>
   );
 }
diff --git a/src/chatbox.tsx b/src/chatbox.tsx
index 1d4a4e3..92a6bd8 100644
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -1,11 +1,11 @@
-import { useState } from "preact/hooks";
+import { StateUpdater, 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,15 +127,9 @@ export default function ChatBOX(props: {
     setChatStore({ ...chatStore });
   };
 
-  const [showSettings, setShowSettings] = useState(false);
+  const { setShowSettings } = props;
   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">