diff --git a/src/components/ListAPI.tsx b/src/components/ListAPI.tsx
index 1513262..9f2bb99 100644
--- a/src/components/ListAPI.tsx
+++ b/src/components/ListAPI.tsx
@@ -226,110 +226,116 @@ function ChatTemplateDropdownList() {
       </NavigationMenuTrigger>
       <NavigationMenuContent>
         <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-          {templates.map((t: TemplateChatStore, index: number) => {
-            const [dialogOpen, setDialogOpen] = React.useState(false);
-            return (
-              <li key={index}>
-                <NavigationMenuLink asChild>
-                  <a
-                    onClick={() => {
-                      // Update chatStore with the selected template
-                      if (
-                        chatStore.history.length > 0 ||
-                        chatStore.systemMessageContent
-                      ) {
-                        console.log("you clicked", t.name);
-                        const confirm = window.confirm(
-                          "This will replace the current chat history. Are you sure?"
-                        );
-                        if (!confirm) return;
-                      }
-                      setChatStore({ ...newChatStore({ ...chatStore, ...t }) });
-                    }}
-                    className={cn(
-                      "flex flex-row justify-between items-center select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                    )}
-                  >
-                    <div className="text-sm font-medium leading-non">
-                      {t.name}
-                    </div>
-                    <div onClick={(e) => e.stopPropagation()}>
-                      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-                        <DialogTrigger asChild>
-                          <EditIcon />
-                        </DialogTrigger>
-                        <DialogContent>
-                          <DialogHeader>
-                            <DialogTitle>Edit Template</DialogTitle>
-                          </DialogHeader>
-                          <Label>Template Name</Label>
-                          <Input
-                            value={t.name}
-                            onBlur={(e) => {
-                              t.name = e.target.value;
-                              templates[index] = t;
-                              setTemplates([...templates]);
-                            }}
-                          />
-                          <p>
-                            Raw JSON allows you to modify any content within the
-                            template. You can remove unnecessary fields, and
-                            non-existent fields will be inherited from the
-                            current session.
-                          </p>
-                          <Textarea
-                            className="h-64"
-                            value={JSON.stringify(t, null, 2)}
-                            onBlur={(e) => {
-                              try {
-                                const json = JSON.parse(
-                                  e.target.value
-                                ) as TemplateChatStore;
-                                json.name = t.name;
-                                templates[index] = json;
-                                setTemplates([...templates]);
-                              } catch (e) {
-                                console.error(e);
-                                alert("Invalid JSON");
-                              }
-                            }}
-                          />
-                          <Button
-                            type="submit"
-                            variant={"destructive"}
-                            onClick={() => {
-                              const confirm = window.confirm(
-                                "Are you sure you want to delete this template?"
-                              );
-                              if (confirm) {
-                                templates.splice(index, 1);
-                                setTemplates([...templates]);
-                                setDialogOpen(false);
-                              }
-                            }}
-                          >
-                            Delete
-                          </Button>
-                          <Button
-                            type="submit"
-                            onClick={() => setDialogOpen(false)}
-                          >
-                            Close
-                          </Button>
-                        </DialogContent>
-                      </Dialog>
-                    </div>
-                  </a>
-                </NavigationMenuLink>
-              </li>
-            );
-          })}
+          {templates.map((t: TemplateChatStore, index: number) => (
+            <ChatTemplateItem key={index} t={t} index={index} />
+          ))}
         </ul>
       </NavigationMenuContent>
     </NavigationMenuItem>
   );
 }
 
+const ChatTemplateItem = ({
+  t,
+  index,
+}: {
+  t: TemplateChatStore;
+  index: number;
+}) => {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const { chatStore, setChatStore } = useContext(AppChatStoreContext);
+  const { templates, setTemplates } = useContext(AppContext);
+
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          onClick={() => {
+            // Update chatStore with the selected template
+            if (
+              chatStore.history.length > 0 ||
+              chatStore.systemMessageContent
+            ) {
+              console.log("you clicked", t.name);
+              const confirm = window.confirm(
+                "This will replace the current chat history. Are you sure?"
+              );
+              if (!confirm) return;
+            }
+            setChatStore({ ...newChatStore({ ...chatStore, ...t }) });
+          }}
+          className={cn(
+            "flex flex-row justify-between items-center select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+          )}
+        >
+          <div className="text-sm font-medium leading-non">{t.name}</div>
+          <div onClick={(e) => e.stopPropagation()}>
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+              <DialogTrigger asChild>
+                <EditIcon />
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Edit Template</DialogTitle>
+                </DialogHeader>
+                <Label>Template Name</Label>
+                <Input
+                  value={t.name}
+                  onBlur={(e) => {
+                    t.name = e.target.value;
+                    templates[index] = t;
+                    setTemplates([...templates]);
+                  }}
+                />
+                <p>
+                  Raw JSON allows you to modify any content within the template.
+                  You can remove unnecessary fields, and non-existent fields
+                  will be inherited from the current session.
+                </p>
+                <Textarea
+                  className="h-64"
+                  value={JSON.stringify(t, null, 2)}
+                  onBlur={(e) => {
+                    try {
+                      const json = JSON.parse(
+                        e.target.value
+                      ) as TemplateChatStore;
+                      json.name = t.name;
+                      templates[index] = json;
+                      setTemplates([...templates]);
+                    } catch (e) {
+                      console.error(e);
+                      alert("Invalid JSON");
+                    }
+                  }}
+                />
+                <Button
+                  type="submit"
+                  variant={"destructive"}
+                  onClick={() => {
+                    let confirm = window.confirm(
+                      "Are you sure you want to delete this template?"
+                    );
+                    if (!confirm) return;
+                    templates.splice(index, 1);
+                    setTemplates([...templates]);
+                    setDialogOpen(false);
+                  }}
+                >
+                  Delete
+                </Button>
+                <Button type="submit" onClick={() => setDialogOpen(false)}>
+                  Close
+                </Button>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  );
+};
+
 const APIListMenu: React.FC = () => {
   const ctx = useContext(AppContext);
   return (