diff --git a/.changeset/hungry-socks-grin.md b/.changeset/hungry-socks-grin.md
new file mode 100644
index 00000000000..36cbad7dfeb
--- /dev/null
+++ b/.changeset/hungry-socks-grin.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+fix: allow dropdowns in Modes modal to be changed
diff --git a/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx b/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx
index 77968f4e3ab..b8fa0d7c1b7 100644
--- a/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx
+++ b/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect } from "react"
-import { useWindowSize, useClickAway } from "react-use"
+import { useWindowSize } from "react-use"
 import { useTranslation } from "react-i18next"
 import styled from "styled-components"
 
@@ -30,9 +30,21 @@ const KiloRulesToggleModal: React.FC = () => {
 	const [menuPosition, setMenuPosition] = useState(0)
 	const [currentView, setCurrentView] = useState<"modes" | "mcp" | "rule" | "workflow" | "skills">("rule")
 
-	useClickAway(modalRef, () => {
-		setIsVisible(false)
-	})
+	useEffect(() => {
+		const handler = (event: MouseEvent | TouchEvent) => {
+			const target = event.target as HTMLElement
+			if (modalRef.current?.contains(target)) return
+			// Ignore clicks on Radix portaled content (Select/Popover dropdowns)
+			if (target.closest("[data-radix-popper-content-wrapper]")) return
+			setIsVisible(false)
+		}
+		document.addEventListener("mousedown", handler)
+		document.addEventListener("touchstart", handler)
+		return () => {
+			document.removeEventListener("mousedown", handler)
+			document.removeEventListener("touchstart", handler)
+		}
+	}, [])
 
 	useEffect(() => {
 		if (isVisible && buttonRef.current) {