diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index d25b5fe9e..93b296000 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -73,6 +73,7 @@ import { useCommentsElectric } from "@/hooks/use-comments-electric";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import {
 	agentToolsAtom,
 	disabledToolsAtom,
@@ -562,7 +563,16 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const mentionedDocuments = useAtomValue(mentionedDocumentsAtom);
 	const sidebarDocs = useAtomValue(sidebarSelectedDocumentsAtom);
 	const setDocumentsSidebarOpen = useSetAtom(documentsSidebarOpenAtom);
+	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
 	const [toolsPopoverOpen, setToolsPopoverOpen] = useState(false);
+	const isDesktop = useMediaQuery("(min-width: 640px)");
+	const [toolsScrollPos, setToolsScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const handleToolsScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setToolsScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
 	const isComposerTextEmpty = useAssistantState(({ composer }) => {
 		const text = composer.text?.trim() || "";
 		return text.length === 0;
@@ -613,32 +623,46 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 							<Wrench className="size-4" />
 						</TooltipIconButton>
 					</PopoverTrigger>
-					<PopoverContent
-						side="top"
-						align="start"
-						sideOffset={12}
-						className="w-[calc(100vw-2rem)] max-w-80 sm:w-80 p-0"
-					>
-						<div className="flex items-center justify-between px-3 py-2.5 border-b">
-							<span className="text-sm font-medium">Agent Tools</span>
-							<span className="text-xs text-muted-foreground">
+				<PopoverContent
+					side="bottom"
+					align="start"
+					sideOffset={12}
+					className="w-[calc(100vw-2rem)] max-w-56 sm:max-w-72 sm:w-72 p-0"
+					onOpenAutoFocus={(e) => e.preventDefault()}
+				>
+						<div className="flex items-center justify-between px-2.5 py-2 sm:px-3 sm:py-2.5 border-b">
+							<span className="text-xs sm:text-sm font-medium">Agent Tools</span>
+							<span className="text-[10px] sm:text-xs text-muted-foreground">
 								{enabledCount}/{agentTools?.length ?? 0} enabled
 							</span>
 						</div>
-						<div className="max-h-64 overflow-y-auto py-1">
+						<div
+							className="max-h-48 sm:max-h-64 overflow-y-auto py-0.5 sm:py-1"
+							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);
+								const row = (
+									<label className="flex items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 cursor-pointer hover:bg-muted-foreground/10 transition-colors">
+										<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">{formatToolName(tool.name)}</span>
+										<Switch
+											checked={!isDisabled}
+											onCheckedChange={() => toggleTool(tool.name)}
+											className="shrink-0 scale-[0.6] sm:scale-75"
+										/>
+									</label>
+								);
+								if (!isDesktop) {
+									return <div key={tool.name}>{row}</div>;
+								}
 								return (
 									<Tooltip key={tool.name}>
 										<TooltipTrigger asChild>
-											<label className="flex items-center gap-3 px-3 py-1.5 cursor-pointer 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 scale-75"
-												/>
-											</label>
+											{row}
 										</TooltipTrigger>
 										<TooltipContent side="right" className="max-w-64 text-xs">
 											{tool.description}
@@ -654,6 +678,19 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 						</div>
 					</PopoverContent>
 				</Popover>
+				{!isDesktop && (
+					<TooltipIconButton
+						tooltip="Manage connectors"
+						side="bottom"
+						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" />
+					</TooltipIconButton>
+				)}
 				{sidebarDocs.length > 0 && (
 					<button
 						type="button"
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 65a1317f5..58770c01d 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -233,35 +233,63 @@ export function DocumentsSidebar({
 			</div>
 
 			{/* Connected tools strip */}
-			<div className="shrink-0 mx-4 mt-2 mb-3 flex select-none items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2">
-				<button
-					type="button"
-					onClick={() => setConnectorDialogOpen(true)}
-					className="flex items-center gap-2 min-w-0 flex-1 text-left"
+		<div className="shrink-0 mx-4 mt-2 mb-3 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
+			<button
+				type="button"
+				onClick={() => setConnectorDialogOpen(true)}
+				className="flex items-center gap-2 min-w-0 flex-1 text-left px-3 py-2"
 				>
-					<Unplug className="size-4 shrink-0 text-muted-foreground" />
-					<span className="truncate text-xs text-muted-foreground">
-						{connectorCount > 0 ? "Manage connectors" : "Connect connectors"}
+				<Unplug className="size-4 shrink-0 text-muted-foreground" />
+				<span className="truncate text-xs text-muted-foreground">
+					{connectorCount > 0 ? "Manage connectors" : "Connect your connectors"}
+				</span>
+				{connectorCount > 0 && (
+					<span className="shrink-0 rounded-full bg-muted-foreground/15 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+						{connectorCount}
 					</span>
-					{connectorCount > 0 && (
-						<span className="ml-auto shrink-0 text-xs font-medium text-muted-foreground">{connectorCount}</span>
-					)}
-					<AvatarGroup className="ml-auto shrink-0">
-						{SHOWCASE_CONNECTORS.map(({ type, label }, i) => (
-							<Tooltip key={type}>
-								<TooltipTrigger asChild>
-									<Avatar className="size-6" style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}>
+				)}
+			<AvatarGroup className="ml-auto shrink-0">
+				{connectorCount > 0 && connectors
+					? connectors
+							.slice(0, isMobile ? 5 : 9)
+							.map((connector, i) => {
+								const avatar = (
+									<Avatar key={connector.id} className="size-6" style={{ zIndex: Math.max(9 - i, 1) }}>
+										<AvatarFallback className="bg-muted text-[10px]">
+											{getConnectorIcon(connector.connector_type, "size-3.5")}
+										</AvatarFallback>
+									</Avatar>
+								);
+								if (isMobile) return avatar;
+								return (
+									<Tooltip key={connector.id}>
+										<TooltipTrigger asChild>{avatar}</TooltipTrigger>
+										<TooltipContent side="top" className="text-xs">
+											{connector.name}
+										</TooltipContent>
+									</Tooltip>
+								);
+							})
+					: (isMobile ? SHOWCASE_CONNECTORS.slice(0, 5) : SHOWCASE_CONNECTORS).map(({ type, label }, i) => {
+								const avatar = (
+									<Avatar key={type} className="size-6" style={{ zIndex: SHOWCASE_CONNECTORS.length - i }}>
 										<AvatarFallback className="bg-muted text-[10px]">
 											{getConnectorIcon(type, "size-3.5")}
 										</AvatarFallback>
 									</Avatar>
-								</TooltipTrigger>
-								<TooltipContent side="top" className="text-xs">
-									{label}
-								</TooltipContent>
-							</Tooltip>
-						))}
-					</AvatarGroup>
+								);
+								if (isMobile) return avatar;
+								return (
+									<Tooltip key={type}>
+										<TooltipTrigger asChild>{avatar}</TooltipTrigger>
+										<TooltipContent side="top" className="text-xs">
+											{label}
+										</TooltipContent>
+									</Tooltip>
+								);
+							})
+				}
+				</AvatarGroup>
 				</button>
 			</div>