diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 243b3f7cb..b7a5bcf0e 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -21,10 +21,10 @@ import {
 	DownloadIcon,
 	Plus,
 	RefreshCwIcon,
+	Settings2,
 	SquareIcon,
 	Unplug,
 	Upload,
-	Wrench,
 	X,
 } from "lucide-react";
 import { useParams } from "next/navigation";
@@ -55,6 +55,7 @@ import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { AssistantMessage } from "@/components/assistant-ui/assistant-message";
 import { ChatSessionStatus } from "@/components/assistant-ui/chat-session-status";
 import { ConnectorIndicator } from "@/components/assistant-ui/connector-popup";
+import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import {
 	InlineMentionEditor,
 	type InlineMentionEditorRef,
@@ -73,16 +74,16 @@ import {
 	type DocumentMentionPickerRef,
 } from "@/components/new-chat/document-mention-picker";
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
-import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
@@ -612,24 +613,21 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 			<div className="flex items-center gap-1">
 				{!isDesktop ? (
 					<>
-					<Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
 						<DropdownMenu>
-							<PopoverAnchor asChild>
-								<DropdownMenuTrigger asChild>
-									<Button
-										variant="ghost"
-										size="icon"
-										className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-										aria-label="More actions"
-										data-joyride="connector-icon"
-									>
-										<Plus className="size-4" />
-									</Button>
-								</DropdownMenuTrigger>
-							</PopoverAnchor>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+									aria-label="More actions"
+									data-joyride="connector-icon"
+								>
+									<Plus className="size-4" />
+								</Button>
+							</DropdownMenuTrigger>
 							<DropdownMenuContent side="top" align="start" sideOffset={8}>
 								<DropdownMenuItem onSelect={() => setToolsPopoverOpen(true)}>
-									<Wrench className="size-4" />
+									<Settings2 className="size-4" />
 									Manage Tools
 								</DropdownMenuItem>
 								<DropdownMenuItem onSelect={() => openUploadDialog()}>
@@ -638,62 +636,51 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								</DropdownMenuItem>
 							</DropdownMenuContent>
 						</DropdownMenu>
-						<PopoverContent
-							side="top"
-							align="start"
-							sideOffset={12}
-							className="w-[calc(100vw-2rem)] max-w-56 p-0 select-none"
-							onOpenAutoFocus={(e) => e.preventDefault()}
-						>
-							<div className="flex items-center justify-between px-2.5 py-2 border-b">
-								<span className="text-xs font-medium">Agent Tools</span>
-								<span className="text-[10px] text-muted-foreground">
-									{enabledCount}/{agentTools?.length ?? 0} enabled
-								</span>
-							</div>
-							<div
-								className="max-h-48 overflow-y-auto py-0.5"
-								onScroll={handleToolsScroll}
-								style={{
-									maskImage: `linear-gradient(to bottom, ${toolsScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${toolsScrollPos === "bottom" ? "black" : "transparent"})`,
-									WebkitMaskImage: `linear-gradient(to bottom, ${toolsScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${toolsScrollPos === "bottom" ? "black" : "transparent"})`,
-								}}
-							>
-								{agentTools?.map((tool) => {
-									const isDisabled = disabledTools.includes(tool.name);
-									return (
-										<div
-											key={tool.name}
-											className="flex w-full items-center gap-2 px-2.5 py-1 hover:bg-muted-foreground/10 transition-colors"
-										>
-											<span className="flex-1 min-w-0 text-xs font-medium truncate">
-												{formatToolName(tool.name)}
-											</span>
-											<Switch
-												checked={!isDisabled}
-												onCheckedChange={() => toggleTool(tool.name)}
-												className="shrink-0 scale-[0.6]"
-											/>
+						<Drawer open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
+							<DrawerContent className="max-h-[60dvh]">
+								<DrawerHandle />
+								<div className="flex items-center justify-between px-4 py-2">
+									<DrawerTitle className="text-sm font-medium">Agent Tools</DrawerTitle>
+									<span className="text-xs text-muted-foreground">
+										{enabledCount}/{agentTools?.length ?? 0} enabled
+									</span>
+								</div>
+								<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}>
+									{agentTools?.map((tool) => {
+										const isDisabled = disabledTools.includes(tool.name);
+										return (
+											<div
+												key={tool.name}
+												className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
+											>
+												<span className="flex-1 min-w-0 text-sm font-medium truncate">
+													{formatToolName(tool.name)}
+												</span>
+												<Switch
+													checked={!isDisabled}
+													onCheckedChange={() => toggleTool(tool.name)}
+													className="shrink-0"
+												/>
+											</div>
+										);
+									})}
+									{!agentTools?.length && (
+										<div className="px-4 py-6 text-center text-sm text-muted-foreground">
+											Loading tools...
 										</div>
-									);
-								})}
-								{!agentTools?.length && (
-									<div className="px-3 py-4 text-center text-xs text-muted-foreground">
-										Loading tools...
-									</div>
-								)}
-							</div>
-						</PopoverContent>
-					</Popover>
-					<Button
-						variant="ghost"
-						size="icon"
-						className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-						aria-label="Manage connectors"
-						onClick={() => setConnectorDialogOpen(true)}
-					>
-						<Unplug className="size-4" />
-					</Button>
+									)}
+								</div>
+							</DrawerContent>
+						</Drawer>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+							aria-label="Manage connectors"
+							onClick={() => setConnectorDialogOpen(true)}
+						>
+							<Unplug className="size-4" />
+						</Button>
 					</>
 				) : (
 					<Popover open={toolsPopoverOpen} onOpenChange={setToolsPopoverOpen}>
@@ -707,7 +694,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								aria-label="Manage tools"
 								data-joyride="connector-icon"
 							>
-								<Wrench className="size-4" />
+								<Settings2 className="size-4" />
 							</TooltipIconButton>
 						</PopoverTrigger>
 						<PopoverContent