diff --git a/src/components/ListAPI.tsx b/src/components/ListAPI.tsx
index 1c55037..c3cc4c2 100644
--- a/src/components/ListAPI.tsx
+++ b/src/components/ListAPI.tsx
@@ -1,16 +1,14 @@
-import React from "react";
-import { ChatStore, TemplateAPI, TemplateChatStore } from "@/types/chatstore";
+import React, { useContext } from "react";
+import {
+  ChatStore,
+  TemplateAPI,
+  TemplateChatStore,
+  TemplateTools,
+} from "@/types/chatstore";
 import { Tr } from "@/translate";
 
-import {
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuTrigger,
-} from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { useContext } from "react";
 import { AppChatStoreContext, AppContext } from "@/pages/App";
 import {
   NavigationMenu,
@@ -83,63 +81,53 @@ function APIsDropdownList({
     API = templateAPIsImageGen;
   }
 
+  const [open, setOpen] = React.useState(false);
+
   return (
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>
-        <span className="lg:hidden">{shortLabel}</span>
-        <span className="hidden lg:inline">
-          {label}{" "}
-          {API.find(
-            (t: TemplateAPI) =>
-              chatStore[apiField as keyof ChatStore] === t.endpoint &&
-              chatStore[keyField as keyof ChatStore] === t.key
-          )?.name &&
-            `: ${
-              API.find(
-                (t: TemplateAPI) =>
-                  chatStore[apiField as keyof ChatStore] === t.endpoint &&
-                  chatStore[keyField as keyof ChatStore] === t.key
-              )?.name
-            }`}
-        </span>
-      </NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-          {API.map((t: TemplateAPI, index: number) => (
-            <li key={index}>
-              <NavigationMenuLink
-                asChild
-                onSelect={() => {
-                  // @ts-ignore
-                  chatStore[apiField as keyof ChatStore] = t.endpoint;
-                  // @ts-ignore
-                  chatStore[keyField] = t.key;
-                  setChatStore({
-                    ...chatStore,
-                  });
-                }}
-                className={cn(
-                  "block 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",
-                  chatStore[apiField as keyof ChatStore] === t.endpoint &&
-                    chatStore[keyField as keyof ChatStore] === t.key
-                    ? "bg-accent text-accent-foreground"
-                    : ""
-                )}
-              >
-                <a>
-                  <div className="text-sm font-medium leading-none">
+    <div className="flex items-center space-x-4 mx-3">
+      <p className="text-sm text-muted-foreground">
+        <Tr>{label}</Tr>
+      </p>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="w-[150px] justify-start">
+            {API.find(
+              (t: TemplateAPI) =>
+                chatStore[apiField as keyof ChatStore] === t.endpoint &&
+                chatStore[keyField as keyof ChatStore] === t.key
+            )?.name || `+ ${shortLabel}`}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="bottom" align="start">
+          <Command>
+            <CommandInput placeholder="Search template..." />
+            <CommandList>
+              <CommandEmpty>
+                <Tr>No results found.</Tr>
+              </CommandEmpty>
+              <CommandGroup>
+                {API.map((t: TemplateAPI, index: number) => (
+                  <CommandItem
+                    key={index}
+                    value={t.name}
+                    onSelect={() => {
+                      setChatStore({
+                        ...chatStore,
+                        [apiField]: t.endpoint,
+                        [keyField]: t.key,
+                      });
+                      setOpen(false); // Close popover after selecting
+                    }}
+                  >
                     {t.name}
-                  </div>
-                  <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-                    {new URL(t.endpoint).host}
-                  </p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-          ))}
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }
 
@@ -198,7 +186,7 @@ function ToolsDropdownList() {
                     <BrushIcon /> <Tr>Clear tools</Tr>
                   </CommandItem>
                 )}
-                {ctx.templateTools.map((t, index) => (
+                {ctx.templateTools.map((t: TemplateTools, index: number) => (
                   <CommandItem
                     key={index}
                     value={t.toolsString}
@@ -251,7 +239,10 @@ function ChatTemplateDropdownList() {
                     value={t.name}
                     onSelect={() => {
                       // Update chatStore with the selected template
-                      if (chatStore.history.length > 0 || chatStore.systemMessageContent) {
+                      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? "
@@ -264,7 +255,9 @@ function ChatTemplateDropdownList() {
                       setChatStore({
                         ...newChatStore({
                           ...chatStore,
-                          ...{ use_this_history: t.history ?? chatStore.history },
+                          ...{
+                            use_this_history: t.history ?? chatStore.history,
+                          },
                           ...t,
                         }),
                       });
@@ -289,42 +282,38 @@ const APIListMenu: React.FC = () => {
     <div className="flex flex-col my-2 gap-2 w-full">
       {ctx.templateTools.length > 0 && <ToolsDropdownList />}
       {ctx.templates.length > 0 && <ChatTemplateDropdownList />}
-      <NavigationMenu>
-        <NavigationMenuList>
-          {ctx.templateAPIs.length > 0 && (
-            <APIsDropdownList
-              label="Chat API"
-              shortLabel="Chat"
-              apiField="apiEndpoint"
-              keyField="apiKey"
-            />
-          )}
-          {ctx.templateAPIsWhisper.length > 0 && (
-            <APIsDropdownList
-              label="Whisper API"
-              shortLabel="Whisper"
-              apiField="whisper_api"
-              keyField="whisper_key"
-            />
-          )}
-          {ctx.templateAPIsTTS.length > 0 && (
-            <APIsDropdownList
-              label="TTS API"
-              shortLabel="TTS"
-              apiField="tts_api"
-              keyField="tts_key"
-            />
-          )}
-          {ctx.templateAPIsImageGen.length > 0 && (
-            <APIsDropdownList
-              label="Image Gen API"
-              shortLabel="ImgGen"
-              apiField="image_gen_api"
-              keyField="image_gen_key"
-            />
-          )}
-        </NavigationMenuList>
-      </NavigationMenu>
+      {ctx.templateAPIs.length > 0 && (
+        <APIsDropdownList
+          label="Chat API"
+          shortLabel="Chat"
+          apiField="apiEndpoint"
+          keyField="apiKey"
+        />
+      )}
+      {ctx.templateAPIsWhisper.length > 0 && (
+        <APIsDropdownList
+          label="Whisper API"
+          shortLabel="Whisper"
+          apiField="whisper_api"
+          keyField="whisper_key"
+        />
+      )}
+      {ctx.templateAPIsTTS.length > 0 && (
+        <APIsDropdownList
+          label="TTS API"
+          shortLabel="TTS"
+          apiField="tts_api"
+          keyField="tts_key"
+        />
+      )}
+      {ctx.templateAPIsImageGen.length > 0 && (
+        <APIsDropdownList
+          label="Image Gen API"
+          shortLabel="ImgGen"
+          apiField="image_gen_api"
+          keyField="image_gen_key"
+        />
+      )}
     </div>
   );
 };