diff --git a/apps/web/components/chat/model-selector.tsx b/apps/web/components/chat/model-selector.tsx
index 74f3a1ad..a9dd2d45 100644
--- a/apps/web/components/chat/model-selector.tsx
+++ b/apps/web/components/chat/model-selector.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { cn } from "@lib/utils"
 import { Button } from "@ui/components/button"
 import { dmSansClassName } from "@/lib/fonts"
@@ -23,6 +23,21 @@ export default function ChatModelSelector({
 	const [internalModel, setInternalModel] =
 		useState<ModelId>("claude-sonnet-4.6")
 	const [isOpen, setIsOpen] = useState(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (!isOpen) return
+		const handleClickOutside = (e: MouseEvent) => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(e.target as Node)
+			) {
+				setIsOpen(false)
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside)
+		return () => document.removeEventListener("mousedown", handleClickOutside)
+	}, [isOpen])
 
 	const selectedModel = selectedModelProp ?? internalModel
 	const currentModelData = modelNames[selectedModel]
@@ -73,53 +88,44 @@ export default function ChatModelSelector({
 	)
 
 	return (
-		<div className="relative flex min-w-0 shrink items-center gap-2">
+		<div
+			ref={containerRef}
+			className="relative flex min-w-0 shrink items-center gap-2"
+		>
 			{trigger}
 
 			{isOpen && (
-				<>
-					<button
-						type="button"
-						className="fixed inset-0 z-40"
-						onClick={() => setIsOpen(false)}
-						onKeyDown={(e) => e.key === "Escape" && setIsOpen(false)}
-						aria-label="Close model selector"
-					/>
-
-					<div className="absolute bottom-full left-0 mb-2 w-64 bg-surface-card backdrop-blur-xl border border-surface-border rounded-lg shadow-xl z-50 overflow-hidden">
-						<div className="p-2 space-y-1">
-							{models.map((model) => {
-								const modelData = modelNames[model.id]
-								return (
-									<button
-										key={model.id}
-										type="button"
-										className={cn(
-											"flex flex-col items-start p-2 px-3 rounded-md transition-colors cursor-pointer w-full text-left",
-											selectedModel === model.id
-												? "bg-[#293952]/60"
-												: "hover:bg-[#293952]/40",
-										)}
-										onClick={() => handleModelSelect(model.id)}
-										onKeyDown={(e) =>
-											e.key === "Enter" && handleModelSelect(model.id)
-										}
-									>
-										<div className="text-sm font-medium text-white">
-											{modelData.name}{" "}
-											<span className="text-fg-subtle">
-												{modelData.version}
-											</span>
-										</div>
-										<div className="text-xs text-fg-muted truncate w-full">
-											{model.description}
-										</div>
-									</button>
-								)
-							})}
-						</div>
+				<div className="absolute bottom-full left-0 mb-2 w-64 bg-surface-card backdrop-blur-xl border border-surface-border rounded-lg shadow-xl z-50 overflow-hidden">
+					<div className="p-2 space-y-1">
+						{models.map((model) => {
+							const modelData = modelNames[model.id]
+							return (
+								<button
+									key={model.id}
+									type="button"
+									className={cn(
+										"flex flex-col items-start p-2 px-3 rounded-md transition-colors cursor-pointer w-full text-left",
+										selectedModel === model.id
+											? "bg-[#293952]/60"
+											: "hover:bg-[#293952]/40",
+									)}
+									onClick={() => handleModelSelect(model.id)}
+									onKeyDown={(e) =>
+										e.key === "Enter" && handleModelSelect(model.id)
+									}
+								>
+									<div className="text-sm font-medium text-white">
+										{modelData.name}{" "}
+										<span className="text-fg-subtle">{modelData.version}</span>
+									</div>
+									<div className="text-xs text-fg-muted truncate w-full">
+										{model.description}
+									</div>
+								</button>
+							)
+						})}
 					</div>
-				</>
+				</div>
 			)}
 		</div>
 	)