diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
index 23a1f144aa..299e1708e2 100644
--- a/app/src/lib/components/connect/connect.svelte
+++ b/app/src/lib/components/connect/connect.svelte
@@ -7,7 +7,6 @@ import { Button } from "$lib/components/ui/button"
 import * as Avatar from "$lib/components/ui/avatar"
 import WalletIcon from "virtual:icons/lucide/wallet"
 import { Separator } from "$lib/components/ui/separator"
-import ThemeSwitch from "$lib/components/header/theme-switch.svelte"
 import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
 import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.ts"
 import { Switch } from "$lib/components/ui/switch"
@@ -15,8 +14,8 @@ import { Label } from "$lib/components/ui/label"
 import { showUnsupported } from "$lib/stores/user.ts"
 import Sun from "virtual:icons/lucide/sun"
 import Moon from "virtual:icons/lucide/moon"
-import { setMode, toggleMode } from "mode-watcher"
-import * as Popover from "$lib/components/ui/popover"
+import { setMode } from "mode-watcher"
+import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
 
 let buttonText: string
 
@@ -102,9 +101,9 @@ $: if ($navigating) sheetOpen = false
         <Switch bind:checked={$showUnsupported} id="unsupported-assets"/>
         <Label for="unsupported-assets">Show unverified assets</Label>
       </div>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button variant="default" size="icon" class="hover:text-black hover:bg-accent">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild let:builder>
+          <Button builders={[builder]} variant="default" size="icon" class="hover:text-black hover:bg-accent">
             <Sun
               class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
             />
@@ -113,13 +112,15 @@ $: if ($navigating) sheetOpen = false
             />
             <span class="sr-only">Toggle theme</span>
           </Button>
-        </Popover.Trigger>
-        <Popover.Content class="rounded-none bg-secondary w-fit">
-          <Button on:click={() => setMode('system')} size="sm">System</Button>
-          <Button on:click={() => setMode('dark')} size="sm">Dark</Button>
-          <Button on:click={() => setMode('light')} size="sm">Light</Button>
-        </Popover.Content>
-      </Popover.Root>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content class="w-fit rounded-none bg-secondary">
+          <DropdownMenu.Group>
+            <DropdownMenu.Item on:click={() => setMode('system')} class="cursor-pointer">System</DropdownMenu.Item>
+            <DropdownMenu.Item on:click={() => setMode('dark')} class="cursor-pointer">Dark</DropdownMenu.Item>
+            <DropdownMenu.Item on:click={() => setMode('light')} class="cursor-pointer">Light</DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </div>
   </Sheet.Content>
 </Sheet.Root>
diff --git a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index e75d99f628..68486e991b 100644
--- a/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/app/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -14,7 +14,7 @@ export { className as class }
 
 <DropdownMenuPrimitive.Item
 	class={cn(
-		"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+		"text-primary relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground dark:data-[highlighted]:text-black data-[disabled]:opacity-50",
 		inset && "pl-8",
 		className
 	)}