diff --git a/client/bun.lockb b/client/bun.lockb
index 5f5d186..2878ccd 100755
Binary files a/client/bun.lockb and b/client/bun.lockb differ
diff --git a/client/src/components/ThreadDrawer/AgentsButton.tsx b/client/src/components/ThreadDrawer/AgentsButton.tsx
index b50e627..7a215a5 100644
--- a/client/src/components/ThreadDrawer/AgentsButton.tsx
+++ b/client/src/components/ThreadDrawer/AgentsButton.tsx
@@ -8,13 +8,8 @@ export function AgentsButton() {
     const path = usePathname();
     return (
         <LinkButton active={path === "/agents"} href={{ pathname: "/(app)/agents" }}>
-            <Icon
-                type="Ionicons"
-                name="grid-outline"
-                size={20}
-                className="text-secondary-foreground"
-            />
-            <Text className="font-medium" numberOfLines={1} ellipsizeMode="tail">
+            <Icon type="Ionicons" name="grid-outline" />
+            <Text className="font-medium" ellipsizeMode="tail">
                 Agents
             </Text>
         </LinkButton>
diff --git a/client/src/components/ThreadDrawer/LinkButton.tsx b/client/src/components/ThreadDrawer/LinkButton.tsx
index ff2d0ce..4df7041 100644
--- a/client/src/components/ThreadDrawer/LinkButton.tsx
+++ b/client/src/components/ThreadDrawer/LinkButton.tsx
@@ -1,8 +1,9 @@
-import { Link, type Href } from "expo-router";
+import { Link, useRouter, type Href } from "expo-router";
 import { Pressable } from "react-native";
 
 import { cn } from "@/lib/utils";
 import { TextClassContext } from "../ui/Text";
+import { useHoverHelper } from "@/hooks/useHoverHelper";
 
 type PathNameProps = { pathname: string };
 
@@ -19,21 +20,31 @@ export default function LinkButton<T extends PathNameProps>({
     className,
     active,
 }: LinkButtonProps<T>) {
+    const router = useRouter();
+    const { isHover, ...helpers } = useHoverHelper();
     return (
-        <TextClassContext.Provider
-            value={
-                "web:whitespace-nowrap text-sm native:text-base group-aria-selected:text-background text-foreground transition-colors text-secondary-foreground"
-            }
-        >
-            <Link asChild href={href} className={cn("w-full", className)}>
-                <Pressable
-                    role="tab"
-                    aria-selected={active}
-                    className="flex flex-row items-center justify-between w-full h-10 gap-2 p-2 transition-colors rounded-md group web:ring-offset-background aria-selected:bg-primary web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 bg-secondary hover:bg-secondary-foreground/10 dark:hover:bg-secondary-foreground/50 active:opacity-90 web:justify-start"
+        <Link href={href} asChild>
+            <Pressable
+                {...helpers}
+                onPress={() => router.push(href)}
+                role="tab"
+                aria-selected={active}
+                className={cn(
+                    "flex flex-row items-center justify-between w-full gap-2 p-2 transition-colors rounded group web:ring-offset-background aria-selected:bg-primary web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 active:opacity-90 web:justify-start",
+                    isHover
+                        ? "bg-secondary-foreground/10 dark:bg-secondary-foreground/50"
+                        : "bg-secondary",
+                    className
+                )}
+            >
+                <TextClassContext.Provider
+                    value={
+                        "web:whitespace-nowrap text-sm native:text-base group-aria-selected:text-background text-foreground transition-colors text-secondary-foreground"
+                    }
                 >
                     {children}
-                </Pressable>
-            </Link>
-        </TextClassContext.Provider>
+                </TextClassContext.Provider>
+            </Pressable>
+        </Link>
     );
 }
diff --git a/client/src/components/ThreadDrawer/SettingsButton.tsx b/client/src/components/ThreadDrawer/SettingsButton.tsx
index a635a32..3839142 100644
--- a/client/src/components/ThreadDrawer/SettingsButton.tsx
+++ b/client/src/components/ThreadDrawer/SettingsButton.tsx
@@ -8,12 +8,7 @@ export function SettingsButton() {
     const path = usePathname();
     return (
         <LinkButton active={path === "/settings"} href={{ pathname: "/(app)/settings" }}>
-            <Icon
-                type="MaterialIcons"
-                name="settings"
-                size={20}
-                className="text-secondary-foreground"
-            />
+            <Icon type="MaterialIcons" name="settings" />
             <Text className="font-medium">Settings</Text>
         </LinkButton>
     );
diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx
index f35059c..b695f62 100644
--- a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx
+++ b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.tsx
@@ -1,13 +1,17 @@
-import { ContextMenuView, type MenuConfig } from "react-native-ios-context-menu";
-import { Pressable, View } from "react-native";
+import {
+    ContextMenuView,
+    OnPressMenuItemEvent,
+    type MenuConfig,
+} from "react-native-ios-context-menu";
+import { View } from "react-native";
 import { useRouter } from "expo-router";
 
 import type { Thread } from "@/types";
 import { Text } from "@/components/ui/Text";
 import ChatHistory from "@/components/ChatHistory";
-import { useHoverHelper } from "@/hooks/useHoverHelper";
-import { cn } from "@/lib/utils";
 import { useDeleteActiveThread } from "@/hooks/actions";
+import LinkButton from "../LinkButton";
+import { useConfigStore } from "@/hooks/stores/configStore";
 
 const menuConfig: MenuConfig = {
     menuTitle: "",
@@ -20,15 +24,14 @@ const menuConfig: MenuConfig = {
 };
 
 export function ThreadButton({ thread }: { thread: Thread }) {
-    const { isHover, ...helpers } = useHoverHelper();
+    const threadId = useConfigStore.use.threadId();
     const deleteThread = useDeleteActiveThread();
     const router = useRouter();
 
-    const goToThread = () =>
-        router.push({ pathname: `/(app)/`, params: { c: thread.id } });
+    const href = { pathname: `/(app)/`, params: { c: thread.id } } as const;
 
-    const onMenuAction = (actionKey: string) => {
-        switch (actionKey) {
+    const onPressMenuItem: OnPressMenuItemEvent = ({ nativeEvent }) => {
+        switch (nativeEvent.actionKey) {
             case "delete":
                 deleteThread.action(thread.id);
                 break;
@@ -36,22 +39,11 @@ export function ThreadButton({ thread }: { thread: Thread }) {
     };
 
     return (
-        <Pressable
-            {...helpers}
-            className={cn(
-                "flex flex-row items-center justify-start w-full h-10 gap-2 p-2 rounded-md active:bg-primary group active:opacity-90",
-                !isHover
-                    ? "bg-secondary"
-                    : "bg-secondary-foreground/10 dark:bg-secondary-foreground/50"
-            )}
-            onPress={goToThread}
-            onLongPress={() => null}
-            delayLongPress={125}
-        >
+        <LinkButton active={thread.id === threadId} href={href}>
             <ContextMenuView
                 menuConfig={menuConfig}
-                onPressMenuItem={({ nativeEvent }) => onMenuAction(nativeEvent.actionKey)}
-                onPressMenuPreview={goToThread}
+                onPressMenuItem={onPressMenuItem}
+                onPressMenuPreview={() => router.push(href)}
                 previewConfig={{ previewType: "CUSTOM" }}
                 renderPreview={() => <ThreadPreview thread={thread} />}
             >
@@ -59,7 +51,7 @@ export function ThreadButton({ thread }: { thread: Thread }) {
                     {thread.title || "New chat"}
                 </Text>
             </ContextMenuView>
-        </Pressable>
+        </LinkButton>
     );
 }
 
diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx
index 98eb1ea..fbfe74e 100644
--- a/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx
+++ b/client/src/components/ThreadDrawer/ThreadButton/ThreadButton.web.tsx
@@ -11,10 +11,10 @@ import { useConfigStore } from "@/hooks/stores/configStore";
 export function ThreadButton({ thread }: { thread: Thread }) {
     const threadId = useConfigStore.use.threadId();
     return (
-        <View className="relative flex flex-row items-center w-full group">
+        <View className="relative flex flex-row items-center w-full group/thread">
             <LinkButton
                 active={thread.id === threadId}
-                className="pr-8"
+                className="w-full pr-4 group-hover/thread:pr-8"
                 href={{ pathname: `/(app)/`, params: { c: thread.id } }}
             >
                 <Text numberOfLines={1} ellipsizeMode="tail">
diff --git a/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx b/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx
index ad281a5..d2262de 100644
--- a/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx
+++ b/client/src/components/ThreadDrawer/ThreadButton/ThreadButtonPopover.tsx
@@ -34,7 +34,7 @@ export function ThreadButtonPopover({ thread }: { thread: Thread }) {
     ];
 
     return (
-        <Popover className="hidden group-hover:flex">
+        <Popover className="hidden group-hover/thread:flex">
             <PopoverTrigger className="absolute top-0 bottom-0 self-center right-1 group">
                 <Icon
                     type="AntDesign"
diff --git a/client/src/components/ThreadDrawer/ThreadGroups.tsx b/client/src/components/ThreadDrawer/ThreadGroups.tsx
index 0e330d2..1b6d1bc 100644
--- a/client/src/components/ThreadDrawer/ThreadGroups.tsx
+++ b/client/src/components/ThreadDrawer/ThreadGroups.tsx
@@ -12,7 +12,10 @@ type ThreadGroup = {
 
 export const ThreadGroup = ({ group: { label, threads } }: { group: ThreadGroup }) => (
     <View>
-        <Label className="pl-1 mb-1 text-foreground/75" id={"group-label-" + label}>
+        <Label
+            className="pl-1 mb-1 text-sm text-foreground/75"
+            id={"group-label-" + label}
+        >
             {label}
         </Label>
         {threads.map((thread) => (
diff --git a/client/src/components/primitives/popover/popover.tsx b/client/src/components/primitives/popover/popover.tsx
index ecc5dea..08e4427 100644
--- a/client/src/components/primitives/popover/popover.tsx
+++ b/client/src/components/primitives/popover/popover.tsx
@@ -1,135 +1,135 @@
 import {
-	useControllableState,
-	useRelativePosition,
-	type LayoutPosition,
+    useControllableState,
+    useRelativePosition,
+    type LayoutPosition,
 } from "@/components/primitives/hooks";
 import { Portal as RNPPortal } from "@/components/primitives/portal";
 import * as Slot from "@/components/primitives/slot";
 import type {
-	PositionedContentProps,
-	PressableRef,
-	SlottablePressableProps,
-	SlottableViewProps,
-	ViewRef,
+    PositionedContentProps,
+    PressableRef,
+    SlottablePressableProps,
+    SlottableViewProps,
+    ViewRef,
 } from "@/components/primitives/types";
 import * as React from "react";
 import {
-	BackHandler,
-	Pressable,
-	View,
-	type GestureResponderEvent,
-	type LayoutChangeEvent,
-	type LayoutRectangle,
+    BackHandler,
+    Pressable,
+    View,
+    type GestureResponderEvent,
+    type LayoutChangeEvent,
+    type LayoutRectangle,
 } from "react-native";
 import type {
-	PopoverOverlayProps,
-	PopoverPortalProps,
-	PopoverRootProps,
-	RootContext,
+    PopoverOverlayProps,
+    PopoverPortalProps,
+    PopoverRootProps,
+    RootContext,
 } from "./types";
 
 interface IRootContext extends RootContext {
-	triggerPosition: LayoutPosition | null;
-	setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
-	contentLayout: LayoutRectangle | null;
-	setContentLayout: (contentLayout: LayoutRectangle | null) => void;
-	nativeID: string;
+    triggerPosition: LayoutPosition | null;
+    setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+    contentLayout: LayoutRectangle | null;
+    setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+    nativeID: string;
 }
 
 const RootContext = React.createContext<IRootContext | null>(null);
 
 const Root = React.forwardRef<ViewRef, SlottableViewProps & PopoverRootProps>(
-	(
-		{
-			asChild,
-			open: openProp,
-			defaultOpen,
-			onOpenChange: onOpenChangeProp,
-			...viewProps
-		},
-		ref
-	) => {
-		const [open = false, onOpenChange] = useControllableState({
-			prop: openProp,
-			defaultProp: defaultOpen,
-			onChange: onOpenChangeProp,
-		});
-		const nativeID = React.useId();
-		const [triggerPosition, setTriggerPosition] =
-			React.useState<LayoutPosition | null>(null);
-		const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(
-			null
-		);
-
-		const Component = asChild ? Slot.View : View;
-		return (
-			<RootContext.Provider
-				value={{
-					open,
-					onOpenChange,
-					contentLayout,
-					nativeID,
-					setContentLayout,
-					setTriggerPosition,
-					triggerPosition,
-				}}
-			>
-				<Component ref={ref} {...viewProps} />
-			</RootContext.Provider>
-		);
-	}
+    (
+        {
+            asChild,
+            open: openProp,
+            defaultOpen,
+            onOpenChange: onOpenChangeProp,
+            ...viewProps
+        },
+        ref
+    ) => {
+        const [open = false, onOpenChange] = useControllableState({
+            prop: openProp,
+            defaultProp: defaultOpen,
+            onChange: onOpenChangeProp,
+        });
+        const nativeID = React.useId();
+        const [triggerPosition, setTriggerPosition] =
+            React.useState<LayoutPosition | null>(null);
+        const [contentLayout, setContentLayout] = React.useState<LayoutRectangle | null>(
+            null
+        );
+
+        const Component = asChild ? Slot.View : View;
+        return (
+            <RootContext.Provider
+                value={{
+                    open,
+                    onOpenChange,
+                    contentLayout,
+                    nativeID,
+                    setContentLayout,
+                    setTriggerPosition,
+                    triggerPosition,
+                }}
+            >
+                <Component ref={ref} {...viewProps} />
+            </RootContext.Provider>
+        );
+    }
 );
 
 Root.displayName = "RootNativePopover";
 
 function usePopoverContext() {
-	const context = React.useContext(RootContext);
-	if (!context) {
-		throw new Error(
-			"Popover compound components cannot be rendered outside the Popover component"
-		);
-	}
-	return context;
+    const context = React.useContext(RootContext);
+    if (!context) {
+        throw new Error(
+            "Popover compound components cannot be rendered outside the Popover component"
+        );
+    }
+    return context;
 }
 
 const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
-	({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-		const triggerRef = React.useRef<View>(null);
-		const { open, onOpenChange, setTriggerPosition } = usePopoverContext();
-
-		React.useImperativeHandle(
-			ref,
-			() => {
-				if (!triggerRef.current) {
-					return new View({});
-				}
-				return triggerRef.current;
-			},
-			[triggerRef.current]
-		);
-
-		function onPress(ev: GestureResponderEvent) {
-			if (disabled) return;
-			triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-				setTriggerPosition({ width, pageX, pageY: pageY, height });
-			});
-			const newValue = !open;
-			onOpenChange(newValue);
-			onPressProp?.(ev);
-		}
-
-		const Component = asChild ? Slot.Pressable : Pressable;
-		return (
-			<Component
-				ref={triggerRef}
-				aria-disabled={disabled ?? undefined}
-				role="button"
-				onPress={onPress}
-				disabled={disabled ?? undefined}
-				{...props}
-			/>
-		);
-	}
+    ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+        const triggerRef = React.useRef<View>(null);
+        const { open, onOpenChange, setTriggerPosition } = usePopoverContext();
+
+        React.useImperativeHandle(
+            ref,
+            () => {
+                if (!triggerRef.current) {
+                    return new View({});
+                }
+                return triggerRef.current;
+            },
+            [triggerRef.current]
+        );
+
+        function onPress(ev: GestureResponderEvent) {
+            if (disabled) return;
+            triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+                setTriggerPosition({ width, pageX, pageY: pageY, height });
+            });
+            const newValue = !open;
+            onOpenChange(newValue);
+            onPressProp?.(ev);
+        }
+
+        const Component = asChild ? Slot.Pressable : Pressable;
+        return (
+            <Component
+                ref={triggerRef}
+                aria-disabled={disabled ?? undefined}
+                role="button"
+                onPress={onPress}
+                disabled={disabled ?? undefined}
+                {...props}
+            />
+        );
+    }
 );
 
 Trigger.displayName = "TriggerNativePopover";
@@ -138,49 +138,40 @@ Trigger.displayName = "TriggerNativePopover";
  * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
  */
 function Portal({ forceMount, hostName, children }: PopoverPortalProps) {
-	const value = usePopoverContext();
-
-	if (!value.triggerPosition) {
-		return null;
-	}
-
-	if (!forceMount) {
-		if (!value.open) {
-			return null;
-		}
-	}
-
-	return (
-		<RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
-			<RootContext.Provider value={value}>{children}</RootContext.Provider>
-		</RNPPortal>
-	);
+    const value = usePopoverContext();
+    if (!value.triggerPosition) return null;
+    if (!forceMount && !value.open) return null;
+    return (
+        <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
+            <RootContext.Provider value={value}>{children}</RootContext.Provider>
+        </RNPPortal>
+    );
 }
 
 const Overlay = React.forwardRef<
-	PressableRef,
-	SlottablePressableProps & PopoverOverlayProps
+    PressableRef,
+    SlottablePressableProps & PopoverOverlayProps
 >(({ asChild, forceMount, onPress: OnPressProp, closeOnPress = true, ...props }, ref) => {
-	const { open, onOpenChange, setTriggerPosition, setContentLayout } =
-		usePopoverContext();
-
-	function onPress(ev: GestureResponderEvent) {
-		if (closeOnPress) {
-			setTriggerPosition(null);
-			setContentLayout(null);
-			onOpenChange(false);
-		}
-		OnPressProp?.(ev);
-	}
-
-	if (!forceMount) {
-		if (!open) {
-			return null;
-		}
-	}
-
-	const Component = asChild ? Slot.Pressable : Pressable;
-	return <Component ref={ref} onPress={onPress} {...props} />;
+    const { open, onOpenChange, setTriggerPosition, setContentLayout } =
+        usePopoverContext();
+
+    function onPress(ev: GestureResponderEvent) {
+        if (closeOnPress) {
+            setTriggerPosition(null);
+            setContentLayout(null);
+            onOpenChange(false);
+        }
+        OnPressProp?.(ev);
+    }
+
+    if (!forceMount) {
+        if (!open) {
+            return null;
+        }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} onPress={onPress} {...props} />;
 });
 
 Overlay.displayName = "OverlayNativePopover";
@@ -189,113 +180,113 @@ Overlay.displayName = "OverlayNativePopover";
  * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
  */
 const Content = React.forwardRef<ViewRef, SlottableViewProps & PositionedContentProps>(
-	(
-		{
-			asChild = false,
-			forceMount,
-			align = "start",
-			side = "bottom",
-			sideOffset = 0,
-			alignOffset = 0,
-			avoidCollisions = true,
-			onLayout: onLayoutProp,
-			insets,
-			style,
-			disablePositioningStyle,
-			...props
-		},
-		ref
-	) => {
-		const {
-			open,
-			onOpenChange,
-			contentLayout,
-			nativeID,
-			setContentLayout,
-			setTriggerPosition,
-			triggerPosition,
-		} = usePopoverContext();
-
-		React.useEffect(() => {
-			const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
-				setTriggerPosition(null);
-				setContentLayout(null);
-				onOpenChange(false);
-				return true;
-			});
-
-			return () => {
-				setContentLayout(null);
-				backHandler.remove();
-			};
-		}, []);
-
-		const positionStyle = useRelativePosition({
-			align,
-			avoidCollisions,
-			triggerPosition,
-			contentLayout,
-			alignOffset,
-			insets,
-			sideOffset,
-			side,
-			disablePositioningStyle,
-		});
-
-		function onLayout(event: LayoutChangeEvent) {
-			setContentLayout(event.nativeEvent.layout);
-			onLayoutProp?.(event);
-		}
-
-		if (!forceMount) {
-			if (!open) {
-				return null;
-			}
-		}
-
-		const Component = asChild ? Slot.View : View;
-		return (
-			<Component
-				ref={ref}
-				role="dialog"
-				nativeID={nativeID}
-				aria-modal={true}
-				style={[positionStyle, style]}
-				onLayout={onLayout}
-				onStartShouldSetResponder={onStartShouldSetResponder}
-				{...props}
-			/>
-		);
-	}
+    (
+        {
+            asChild = false,
+            forceMount,
+            align = "start",
+            side = "bottom",
+            sideOffset = 0,
+            alignOffset = 0,
+            avoidCollisions = true,
+            onLayout: onLayoutProp,
+            insets,
+            style,
+            disablePositioningStyle,
+            ...props
+        },
+        ref
+    ) => {
+        const {
+            open,
+            onOpenChange,
+            contentLayout,
+            nativeID,
+            setContentLayout,
+            setTriggerPosition,
+            triggerPosition,
+        } = usePopoverContext();
+
+        React.useEffect(() => {
+            const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+                setTriggerPosition(null);
+                setContentLayout(null);
+                onOpenChange(false);
+                return true;
+            });
+
+            return () => {
+                setContentLayout(null);
+                backHandler.remove();
+            };
+        }, []);
+
+        const positionStyle = useRelativePosition({
+            align,
+            avoidCollisions,
+            triggerPosition,
+            contentLayout,
+            alignOffset,
+            insets,
+            sideOffset,
+            side,
+            disablePositioningStyle,
+        });
+
+        function onLayout(event: LayoutChangeEvent) {
+            setContentLayout(event.nativeEvent.layout);
+            onLayoutProp?.(event);
+        }
+
+        if (!forceMount) {
+            if (!open) {
+                return null;
+            }
+        }
+
+        const Component = asChild ? Slot.View : View;
+        return (
+            <Component
+                ref={ref}
+                role="dialog"
+                nativeID={nativeID}
+                aria-modal={true}
+                style={[positionStyle, style]}
+                onLayout={onLayout}
+                onStartShouldSetResponder={onStartShouldSetResponder}
+                {...props}
+            />
+        );
+    }
 );
 
 Content.displayName = "ContentNativePopover";
 
 const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
-	({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
-		const { onOpenChange, setContentLayout, setTriggerPosition } =
-			usePopoverContext();
-
-		function onPress(ev: GestureResponderEvent) {
-			if (disabled) return;
-			setTriggerPosition(null);
-			setContentLayout(null);
-			onOpenChange(false);
-			onPressProp?.(ev);
-		}
-
-		const Component = asChild ? Slot.Pressable : Pressable;
-		return (
-			<Component
-				ref={ref}
-				aria-disabled={disabled ?? undefined}
-				role="button"
-				onPress={onPress}
-				disabled={disabled ?? undefined}
-				{...props}
-			/>
-		);
-	}
+    ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+        const { onOpenChange, setContentLayout, setTriggerPosition } =
+            usePopoverContext();
+
+        function onPress(ev: GestureResponderEvent) {
+            if (disabled) return;
+            setTriggerPosition(null);
+            setContentLayout(null);
+            onOpenChange(false);
+            onPressProp?.(ev);
+        }
+
+        const Component = asChild ? Slot.Pressable : Pressable;
+        return (
+            <Component
+                ref={ref}
+                aria-disabled={disabled ?? undefined}
+                role="button"
+                onPress={onPress}
+                disabled={disabled ?? undefined}
+                {...props}
+            />
+        );
+    }
 );
 
 Close.displayName = "CloseNativePopover";
@@ -303,5 +294,5 @@ Close.displayName = "CloseNativePopover";
 export { Close, Content, Overlay, Portal, Root, Trigger, usePopoverContext };
 
 function onStartShouldSetResponder() {
-	return true;
+    return true;
 }
diff --git a/client/src/components/ui/DropdownMenu.tsx b/client/src/components/ui/DropdownMenu.tsx
index 5a4e358..9d0765c 100644
--- a/client/src/components/ui/DropdownMenu.tsx
+++ b/client/src/components/ui/DropdownMenu.tsx
@@ -121,9 +121,10 @@ const DropdownMenuItem = React.forwardRef<
         <DropdownMenuPrimitive.Item
             ref={ref}
             className={cn(
-                "relative flex flex-row web:cursor-default gap-2 items-center rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group",
+                "relative flex flex-row web:cursor-pointer gap-2 items-center rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group",
                 inset && "pl-8",
-                props.disabled && "opacity-50 web:pointer-events-none",
+                props.disabled &&
+                    "opacity-50 web:pointer-events-none web:cursor-not-allowed",
                 className
             )}
             {...props}
diff --git a/client/src/components/ui/Icon.tsx b/client/src/components/ui/Icon.tsx
index 24b23fa..770eb99 100644
--- a/client/src/components/ui/Icon.tsx
+++ b/client/src/components/ui/Icon.tsx
@@ -1,44 +1,10 @@
-import { cssInterop } from "nativewind";
-import {
-    AntDesign,
-    EvilIcons,
-    Entypo,
-    Feather,
-    FontAwesome,
-    FontAwesome5,
-    FontAwesome6,
-    Fontisto,
-    Foundation,
-    Ionicons,
-    MaterialCommunityIcons,
-    MaterialIcons,
-    Octicons,
-    SimpleLineIcons,
-    Zocial,
-} from "@expo/vector-icons";
+import * as IconProviders from "@expo/vector-icons";
 import { IconProps as baseProps } from "@expo/vector-icons/build/createIconSet";
 import { useContext } from "react";
 
 import { TextClassContext } from "./Text";
 import { cn } from "@/lib/utils";
 
-const IconProviders = {
-    AntDesign,
-    EvilIcons,
-    Entypo,
-    Feather,
-    FontAwesome,
-    FontAwesome5,
-    FontAwesome6,
-    Fontisto,
-    Foundation,
-    Ionicons,
-    MaterialCommunityIcons,
-    MaterialIcons,
-    Octicons,
-    SimpleLineIcons,
-    Zocial,
-} as const;
 type IconProviders = typeof IconProviders;
 type IconType = keyof IconProviders;
 
@@ -55,28 +21,18 @@ export type IconProps = IconComponentType & baseProps<string>;
  * @param name - Icon name
  * @param props - Icon props
  * */
-export function Icon({ type, name, className, ...props }: IconProps) {
+export function Icon({ type, name, className, size = 20, ...props }: IconProps) {
     const IconProvider = IconProviders[type];
     const textClass = useContext(TextClassContext);
     return (
         <IconProvider
             name={name}
+            size={size}
             className={cn("transition-colors text-foreground", textClass, className)}
             {...props}
         />
     );
 }
 
-Object.values(IconProviders).forEach((provider) => {
-    cssInterop(provider, {
-        className: {
-            target: "style",
-            nativeStyleToProp: {
-                color: true,
-            },
-        },
-    });
-});
-
 // test types
 //export const b = <Icon type="Ionicons" name="mnu" />;
diff --git a/client/src/components/ui/Popover.tsx b/client/src/components/ui/Popover.tsx
index b174249..2a7507c 100644
--- a/client/src/components/ui/Popover.tsx
+++ b/client/src/components/ui/Popover.tsx
@@ -10,31 +10,33 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
-	React.ElementRef<typeof PopoverPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
-	return (
-		<PopoverPrimitive.Portal>
-			<PopoverPrimitive.Overlay
-				style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined}
-			>
-				<Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
-					<TextClassContext.Provider value="text-popover-foreground">
-						<PopoverPrimitive.Content
-							ref={ref}
-							align={align}
-							sideOffset={sideOffset}
-							className={cn(
-								"z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-2 shadow-md shadow-foreground/5 web:outline-none web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 web:animate-in web:zoom-in-95 web:fade-in-0",
-								className
-							)}
-							{...props}
-						/>
-					</TextClassContext.Provider>
-				</Animated.View>
-			</PopoverPrimitive.Overlay>
-		</PopoverPrimitive.Portal>
-	);
+    React.ElementRef<typeof PopoverPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+        container?: HTMLElement | null;
+    }
+>(({ className, align = "center", sideOffset = 4, container, ...props }, ref) => {
+    return (
+        <PopoverPrimitive.Portal container={container}>
+            <PopoverPrimitive.Overlay
+                style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined}
+            >
+                <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
+                    <TextClassContext.Provider value="text-popover-foreground">
+                        <PopoverPrimitive.Content
+                            ref={ref}
+                            align={align}
+                            sideOffset={sideOffset}
+                            className={cn(
+                                "z-50 w-72 rounded-md web:cursor-auto border border-border bg-popover p-2 shadow-md shadow-foreground/5 web:outline-none web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 web:animate-in web:zoom-in-95 web:fade-in-0",
+                                className
+                            )}
+                            {...props}
+                        />
+                    </TextClassContext.Provider>
+                </Animated.View>
+            </PopoverPrimitive.Overlay>
+        </PopoverPrimitive.Portal>
+    );
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
diff --git a/client/src/views/agent/helpers/ToggleTools.tsx b/client/src/views/agent/helpers/ToggleTools.tsx
index 5a1eff6..c3758d6 100644
--- a/client/src/views/agent/helpers/ToggleTools.tsx
+++ b/client/src/views/agent/helpers/ToggleTools.tsx
@@ -25,7 +25,7 @@ export function ToggleToolsSwitch({ agent }: { agent: Agent }) {
 
     return (
         <Switch
-            className="scale-[70%]"
+            className="scale-[0.7]"
             checked={agent.toolsEnabled}
             onCheckedChange={onCheckedChange}
         />
diff --git a/client/src/views/chat/ChatHeader/Dropdown.tsx b/client/src/views/chat/ChatHeader/Dropdown.tsx
index e835f50..caf52ac 100644
--- a/client/src/views/chat/ChatHeader/Dropdown.tsx
+++ b/client/src/views/chat/ChatHeader/Dropdown.tsx
@@ -76,21 +76,16 @@ export function Dropdown({
                         {actions.map((action, index) =>
                             !action.hidden ? (
                                 <DropdownMenuItem
-                                    className="cursor-pointer"
                                     key={index}
                                     disabled={action.disabled}
-                                    onPress={
-                                        action.onPress
-                                            ? () => action.onPress()
-                                            : undefined
-                                    }
+                                    onPress={() => action.onPress?.()}
                                 >
-                                    <Text>{action.label}</Text>
+                                    <Text className="w-full">{action.label}</Text>
                                     {action.icon && (
                                         <DropdownMenuShortcut>
                                             <Icon
                                                 type={action.icon}
-                                                name={action.iconLabel as any}
+                                                name={action.iconLabel}
                                             />
                                         </DropdownMenuShortcut>
                                     )}