diff --git a/src/components/templates.tsx b/src/components/templates.tsx
new file mode 100644
index 0000000..0cad74a
--- /dev/null
+++ b/src/components/templates.tsx
@@ -0,0 +1,113 @@
+import { TemplateChatStore } from "@/types/chatstore";
+import { ChatStore } from "@/types/chatstore";
+import { getDefaultParams } from "@/utils/getDefaultParam";
+
+const Templates = (props: {
+  templates: TemplateChatStore[];
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  setTemplates: (templates: TemplateChatStore[]) => void;
+}) => {
+  const { templates, chatStore, setChatStore, setTemplates } = props;
+  return (
+    <>
+      {templates.map((t, index) => (
+        <div
+          className="cursor-pointer rounded bg-green-400 w-fit p-2 m-1 flex flex-col"
+          onClick={() => {
+            const newChatStore: ChatStore = structuredClone(t);
+            // @ts-ignore
+            delete newChatStore.name;
+            if (!newChatStore.apiEndpoint) {
+              newChatStore.apiEndpoint = getDefaultParams(
+                "api",
+                chatStore.apiEndpoint,
+              );
+            }
+            if (!newChatStore.apiKey) {
+              newChatStore.apiKey = getDefaultParams("key", chatStore.apiKey);
+            }
+            if (!newChatStore.whisper_api) {
+              newChatStore.whisper_api = getDefaultParams(
+                "whisper-api",
+                chatStore.whisper_api,
+              );
+            }
+            if (!newChatStore.whisper_key) {
+              newChatStore.whisper_key = getDefaultParams(
+                "whisper-key",
+                chatStore.whisper_key,
+              );
+            }
+            if (!newChatStore.tts_api) {
+              newChatStore.tts_api = getDefaultParams(
+                "tts-api",
+                chatStore.tts_api,
+              );
+            }
+            if (!newChatStore.tts_key) {
+              newChatStore.tts_key = getDefaultParams(
+                "tts-key",
+                chatStore.tts_key,
+              );
+            }
+            if (!newChatStore.image_gen_api) {
+              newChatStore.image_gen_api = getDefaultParams(
+                "image-gen-api",
+                chatStore.image_gen_api,
+              );
+            }
+            if (!newChatStore.image_gen_key) {
+              newChatStore.image_gen_key = getDefaultParams(
+                "image-gen-key",
+                chatStore.image_gen_key,
+              );
+            }
+            newChatStore.cost = 0;
+
+            // manage undefined value because of version update
+            newChatStore.toolsString = newChatStore.toolsString || "";
+
+            setChatStore({ ...newChatStore });
+          }}
+        >
+          <span className="w-full text-center">{t.name}</span>
+          <hr className="mt-2" />
+          <span className="flex justify-between">
+            <button
+              onClick={(event) => {
+                // prevent triggert other event
+                event.stopPropagation();
+
+                const name = prompt("Give template a name");
+                if (!name) {
+                  return;
+                }
+                t.name = name;
+                setTemplates(structuredClone(templates));
+              }}
+            >
+              🖋
+            </button>
+            <button
+              onClick={(event) => {
+                // prevent triggert other event
+                event.stopPropagation();
+
+                if (!confirm("Are you sure to delete this template?")) {
+                  return;
+                }
+                templates.splice(index, 1);
+                setTemplates(structuredClone(templates));
+              }}
+            >
+              ❌
+            </button>
+          </span>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default Templates;
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index 1a632bc..078bff0 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -15,7 +15,7 @@ import { upgrade } from "@/indexedDB/upgrade";
 export function App() {
   // init selected index
   const [selectedChatIndex, setSelectedChatIndex] = useState(
-    parseInt(localStorage.getItem(STORAGE_NAME_SELECTED) ?? "1")
+    parseInt(localStorage.getItem(STORAGE_NAME_SELECTED) ?? "1"),
   );
   console.log("selectedChatIndex", selectedChatIndex);
   useEffect(() => {
@@ -55,7 +55,7 @@ export function App() {
     const max = chatStore.maxTokens - chatStore.tokenMargin;
     let sum = 0;
     chatStore.postBeginIndex = chatStore.history.filter(
-      ({ hide }) => !hide
+      ({ hide }) => !hide,
     ).length;
     for (const msg of chatStore.history
       .filter(({ hide }) => !hide)
@@ -70,7 +70,7 @@ export function App() {
 
     // manually estimate token
     chatStore.totalTokens = calculate_token_length(
-      chatStore.systemMessageContent
+      chatStore.systemMessageContent,
     );
     for (const msg of chatStore.history
       .filter(({ hide }) => !hide)
@@ -92,7 +92,7 @@ export function App() {
 
   // all chat store indexes
   const [allChatStoreIndexes, setAllChatStoreIndexes] = useState<IDBValidKey>(
-    []
+    [],
   );
 
   const handleNewChatStoreWithOldOne = async (chatStore: ChatStore) => {
diff --git a/src/pages/chatbox.tsx b/src/pages/chatbox.tsx
index 8d53581..2ca3671 100644
--- a/src/pages/chatbox.tsx
+++ b/src/pages/chatbox.tsx
@@ -45,6 +45,7 @@ import { ListAPIs } from "@/listAPIs";
 import { ListToolsTempaltes } from "@/listToolsTemplates";
 import { autoHeight } from "@/textarea";
 import Search from "@/search";
+import Templates from "@/components/templates";
 
 export default function ChatBOX(props: {
   db: Promise<IDBPDatabase<ChatStore>>;
@@ -743,104 +744,12 @@ export default function ChatBOX(props: {
             </h2>
             <div className="divider"></div>
             <div className="flex flex-wrap">
-              {templates.map((t, index) => (
-                <div
-                  className="cursor-pointer rounded bg-green-400 w-fit p-2 m-1 flex flex-col"
-                  onClick={() => {
-                    const newChatStore: ChatStore = structuredClone(t);
-                    // @ts-ignore
-                    delete newChatStore.name;
-                    if (!newChatStore.apiEndpoint) {
-                      newChatStore.apiEndpoint = getDefaultParams(
-                        "api",
-                        chatStore.apiEndpoint,
-                      );
-                    }
-                    if (!newChatStore.apiKey) {
-                      newChatStore.apiKey = getDefaultParams(
-                        "key",
-                        chatStore.apiKey,
-                      );
-                    }
-                    if (!newChatStore.whisper_api) {
-                      newChatStore.whisper_api = getDefaultParams(
-                        "whisper-api",
-                        chatStore.whisper_api,
-                      );
-                    }
-                    if (!newChatStore.whisper_key) {
-                      newChatStore.whisper_key = getDefaultParams(
-                        "whisper-key",
-                        chatStore.whisper_key,
-                      );
-                    }
-                    if (!newChatStore.tts_api) {
-                      newChatStore.tts_api = getDefaultParams(
-                        "tts-api",
-                        chatStore.tts_api,
-                      );
-                    }
-                    if (!newChatStore.tts_key) {
-                      newChatStore.tts_key = getDefaultParams(
-                        "tts-key",
-                        chatStore.tts_key,
-                      );
-                    }
-                    if (!newChatStore.image_gen_api) {
-                      newChatStore.image_gen_api = getDefaultParams(
-                        "image-gen-api",
-                        chatStore.image_gen_api,
-                      );
-                    }
-                    if (!newChatStore.image_gen_key) {
-                      newChatStore.image_gen_key = getDefaultParams(
-                        "image-gen-key",
-                        chatStore.image_gen_key,
-                      );
-                    }
-                    newChatStore.cost = 0;
-
-                    // manage undefined value because of version update
-                    newChatStore.toolsString = newChatStore.toolsString || "";
-
-                    setChatStore({ ...newChatStore });
-                  }}
-                >
-                  <span className="w-full text-center">{t.name}</span>
-                  <hr className="mt-2" />
-                  <span className="flex justify-between">
-                    <button
-                      onClick={(event) => {
-                        // prevent triggert other event
-                        event.stopPropagation();
-
-                        const name = prompt("Give template a name");
-                        if (!name) {
-                          return;
-                        }
-                        t.name = name;
-                        setTemplates(structuredClone(templates));
-                      }}
-                    >
-                      🖋
-                    </button>
-                    <button
-                      onClick={(event) => {
-                        // prevent triggert other event
-                        event.stopPropagation();
-
-                        if (!confirm("Are you sure to delete this template?")) {
-                          return;
-                        }
-                        templates.splice(index, 1);
-                        setTemplates(structuredClone(templates));
-                      }}
-                    >
-                      ❌
-                    </button>
-                  </span>
-                </div>
-              ))}
+              <Templates
+                templates={templates}
+                setTemplates={setTemplates}
+                chatStore={chatStore}
+                setChatStore={setChatStore}
+              />
             </div>
           </div>
         )}