diff --git a/apps/web/app/(navigation)/chat/[id]/page.tsx b/apps/web/app/(navigation)/chat/[id]/page.tsx
index 9bb2038b..b3812998 100644
--- a/apps/web/app/(navigation)/chat/[id]/page.tsx
+++ b/apps/web/app/(navigation)/chat/[id]/page.tsx
@@ -7,7 +7,7 @@ import { ChatMessages } from "@/components/views/chat/chat-messages"
 
 export default function ChatPage() {
 	const params = useParams()
-	const { setCurrentChatId, getCurrentChat } = usePersistentChat()
+	const { setCurrentChatId } = usePersistentChat()
 
 	const chatId = params.id as string
 
@@ -17,17 +17,9 @@ export default function ChatPage() {
 		}
 	}, [chatId, setCurrentChatId])
 
-	const currentChat = getCurrentChat()
-
 	return (
 		<div className="flex flex-col w-full">
 			<div className="flex flex-col h-[93vh]">
-				<div className="flex justify-center w-full">
-					<h1 className="text-lg font-semibold flex-1 truncate text-center">
-						{currentChat?.title || "New Chat"}
-					</h1>
-				</div>
-
 				<div className="flex-1 flex justify-center min-h-0 w-full px-4">
 					<div className="flex flex-col min-h-0 w-full max-w-4xl">
 						<ChatMessages />
diff --git a/apps/web/app/(navigation)/settings/support/page.tsx b/apps/web/app/(navigation)/settings/support/page.tsx
index de4b3c78..7dc2a207 100644
--- a/apps/web/app/(navigation)/settings/support/page.tsx
+++ b/apps/web/app/(navigation)/settings/support/page.tsx
@@ -69,7 +69,7 @@ export default function SupportPage() {
 								What's included in the Pro plan?
 							</h4>
 							<p className="text-muted-foreground text-sm">
-								Pro includes 5,000 memories (vs 200 in free), 10 connections to
+								Pro includes unlimited memories (vs 200 in free), 10 connections to
 								external services like Google Drive and Notion, advanced search
 								features, and priority support.
 							</p>
diff --git a/apps/web/app/onboarding/bio-form.tsx b/apps/web/app/onboarding/bio-form.tsx
index d985a775..63f359ec 100644
--- a/apps/web/app/onboarding/bio-form.tsx
+++ b/apps/web/app/onboarding/bio-form.tsx
@@ -31,23 +31,23 @@ export function BioForm() {
 		})
 	}
 	return (
-		<div className="relative">
+		<div className="relative w-full">
 			<div className="space-y-4">
 				<NavMenu>
 					<p className="text-base text-white/60">
 						Step {getStepNumberFor("bio")} of {totalSteps}
 					</p>
 				</NavMenu>
-				<h1 className="max-sm:text-4xl text-white font-medium">
-					Tell us about yourself
+				<h1 className="text-2xl md:text-4xl text-white font-medium">
+					Tell Supermemory about yourself
 				</h1>
-				<p className="text-2xl max-sm:text-lg text-white/80">
-					What should Supermemory know about you?
+				<p className="text-lg md:text-xl text-white/80">
+					share with Supermemory what you do, who you are, and what you're interested in
 				</p>
 			</div>
 			<Textarea
 				autoFocus
-				className="font-sans mt-6 text-base! text-white tracking-normal font-medium border bg-white/30 border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)]"
+				className="font-sans mt-6 text-base! placeholder:text-white/80 text-white tracking-normal font-medium border bg-white/30 border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)] w-full"
 				placeholder="I'm a software engineer from San Francisco..."
 				rows={3}
 				value={bio}
@@ -61,12 +61,12 @@ export function BioForm() {
 						animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
 						exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
 						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-2 absolute -bottom-12 right-0"
+						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
 					>
 						<Button
 							variant="link"
 							size="lg"
-							className="text-white/80 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
 							onClick={handleNext}
 						>
 							Save & Continue
@@ -79,12 +79,12 @@ export function BioForm() {
 						animate={{ opacity: 1, filter: "blur(0px)" }}
 						exit={{ opacity: 0, filter: "blur(5px)" }}
 						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-2 absolute -bottom-12 right-0"
+						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
 					>
 						<Button
 							variant="link"
 							size="lg"
-							className="text-white/80 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
 							onClick={handleNext}
 						>
 							Skip For Now
diff --git a/apps/web/app/onboarding/extension-form.tsx b/apps/web/app/onboarding/extension-form.tsx
index 63e7dff1..721acb4f 100644
--- a/apps/web/app/onboarding/extension-form.tsx
+++ b/apps/web/app/onboarding/extension-form.tsx
@@ -1,720 +1,907 @@
-"use client";
+"use client"
 
-import { ArrowUpIcon, MicIcon, PlusIcon, MousePointer2, LoaderIcon, CheckIcon, XIcon, ChevronRightIcon } from "lucide-react";
-import { NavMenu } from "./nav-menu";
-import { useOnboarding } from "./onboarding-context";
-import { motion, AnimatePresence, type ResolvedValues } from "framer-motion";
-import { useEffect, useMemo, useRef, useState, useLayoutEffect } from "react";
-import React from "react";
-import { cn } from "@lib/utils";
-import { Button } from "@ui/components/button";
+import {
+	ArrowUpIcon,
+	MicIcon,
+	PlusIcon,
+	MousePointer2,
+	LoaderIcon,
+	CheckIcon,
+	XIcon,
+	ChevronRightIcon,
+} from "lucide-react"
+import { NavMenu } from "./nav-menu"
+import { useOnboarding } from "./onboarding-context"
+import { motion, AnimatePresence, type ResolvedValues } from "framer-motion"
+import { useEffect, useMemo, useRef, useState, useLayoutEffect } from "react"
+import React from "react"
+import { cn } from "@lib/utils"
+import { Button } from "@ui/components/button"
 
 type CursorAction =
-    | { type: 'startAt'; target: React.RefObject<HTMLElement | null> }
-    | { type: 'startAtPercent'; xPercent: number; yPercent: number }
-    | { type: 'move'; target: React.RefObject<HTMLElement | null>; duration: number }
-    | { type: 'move'; xPercent: number; yPercent: number; duration: number }
-    | { type: 'pause'; duration: number }
-    | { type: 'click' }
-    | { type: 'call'; fn: () => void }
+	| { type: "startAt"; target: React.RefObject<HTMLElement | null> }
+	| { type: "startAtPercent"; xPercent: number; yPercent: number }
+	| {
+			type: "move"
+			target: React.RefObject<HTMLElement | null>
+			duration: number
+	  }
+	| { type: "move"; xPercent: number; yPercent: number; duration: number }
+	| { type: "pause"; duration: number }
+	| { type: "click" }
+	| { type: "call"; fn: () => void }
 
 interface CursorProps {
-    actions: CursorAction[];
-    className?: string;
-    onPositionChange?: (clientX: number, clientY: number) => void;
+	actions: CursorAction[]
+	className?: string
+	onPositionChange?: (clientX: number, clientY: number) => void
 }
 
 function useContainerRect(ref: React.RefObject<HTMLDivElement | null>) {
-    const rectRef = React.useRef<DOMRect | null>(null);
+	const rectRef = React.useRef<DOMRect | null>(null)
 
-    useLayoutEffect(function setup() {
-        if (!ref.current) return;
+	useLayoutEffect(
+		function setup() {
+			if (!ref.current) return
 
-        function measure() {
-            if (ref.current) {
-                rectRef.current = ref.current.getBoundingClientRect();
-            }
-        }
+			function measure() {
+				if (ref.current) {
+					rectRef.current = ref.current.getBoundingClientRect()
+				}
+			}
 
-        measure();
+			measure()
 
-        let resizeObserver: ResizeObserver | null = null;
-        if (typeof ResizeObserver !== "undefined") {
-            resizeObserver = new ResizeObserver(function onResize() {
-                measure();
-            });
-            if (ref.current) {
-                resizeObserver.observe(ref.current);
-            }
-        }
+			let resizeObserver: ResizeObserver | null = null
+			if (typeof ResizeObserver !== "undefined") {
+				resizeObserver = new ResizeObserver(function onResize() {
+					measure()
+				})
+				if (ref.current) {
+					resizeObserver.observe(ref.current)
+				}
+			}
 
-        function onScroll() {
-            measure();
-        }
+			function onScroll() {
+				measure()
+			}
 
-        window.addEventListener("resize", measure);
-        window.addEventListener("scroll", onScroll, true);
+			window.addEventListener("resize", measure)
+			window.addEventListener("scroll", onScroll, true)
 
-        return function cleanup() {
-            if (resizeObserver) {
-                resizeObserver.disconnect();
-            }
-            window.removeEventListener("resize", measure);
-            window.removeEventListener("scroll", onScroll, true);
-        };
-    }, [ref]);
+			return function cleanup() {
+				if (resizeObserver) {
+					resizeObserver.disconnect()
+				}
+				window.removeEventListener("resize", measure)
+				window.removeEventListener("scroll", onScroll, true)
+			}
+		},
+		[ref],
+	)
 
-    return rectRef;
+	return rectRef
 }
 
 function Cursor({ actions, className, onPositionChange }: CursorProps) {
-    const [position, setPosition] = useState({ x: '0px', y: '0px' });
-    const [scale, setScale] = useState(1);
-    const [currentMoveDuration, setCurrentMoveDuration] = useState(0.7); // Default move duration
-    const containerRef = useRef<HTMLDivElement>(null);
-    const timeoutsRef = useRef<number[]>([]);
-    const containerRectRef = useContainerRect(containerRef);
-    const lastUpdateRef = useRef(0);
+	const [position, setPosition] = useState({ x: "0px", y: "0px" })
+	const [scale, setScale] = useState(1)
+	const [currentMoveDuration, setCurrentMoveDuration] = useState(0.7) // Default move duration
+	const containerRef = useRef<HTMLDivElement>(null)
+	const timeoutsRef = useRef<number[]>([])
+	const containerRectRef = useContainerRect(containerRef)
+	const lastUpdateRef = useRef(0)
 
-    function moveToElement(elementRef: React.RefObject<HTMLElement | null>, duration: number) {
-        if (!containerRef.current || !elementRef.current) return;
+	function moveToElement(
+		elementRef: React.RefObject<HTMLElement | null>,
+		duration: number,
+	) {
+		if (!containerRef.current || !elementRef.current) return
 
-        setCurrentMoveDuration(duration / 1000); // Convert to seconds for Framer Motion
+		setCurrentMoveDuration(duration / 1000) // Convert to seconds for Framer Motion
 
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const elementRect = elementRef.current.getBoundingClientRect();
-        // Position the TOP-LEFT of the cursor at the center of the target element
-        const x = elementRect.left - containerRect.left + elementRect.width / 2;
-        const y = elementRect.top - containerRect.top + elementRect.height / 2;
+		const containerRect = containerRef.current.getBoundingClientRect()
+		const elementRect = elementRef.current.getBoundingClientRect()
+		// Position the TOP-LEFT of the cursor at the center of the target element
+		const x = elementRect.left - containerRect.left + elementRect.width / 2
+		const y = elementRect.top - containerRect.top + elementRect.height / 2
 
-        setPosition({ x: `${x}px`, y: `${y}px` });
-    }
+		setPosition({ x: `${x}px`, y: `${y}px` })
+	}
 
-    function setPositionByPercent(xPercent: number, yPercent: number) {
-        if (!containerRef.current) return;
-        const containerRect = containerRef.current.getBoundingClientRect();
-        // Percentages indicate where the TOP-LEFT of the cursor should be placed
-        const x = (containerRect.width * xPercent) / 100;
-        const y = (containerRect.height * yPercent) / 100;
-        setCurrentMoveDuration(0); // snap without animating
-        setPosition({ x: `${x}px`, y: `${y}px` });
-    }
+	function setPositionByPercent(xPercent: number, yPercent: number) {
+		if (!containerRef.current) return
+		const containerRect = containerRef.current.getBoundingClientRect()
+		// Percentages indicate where the TOP-LEFT of the cursor should be placed
+		const x = (containerRect.width * xPercent) / 100
+		const y = (containerRect.height * yPercent) / 100
+		setCurrentMoveDuration(0) // snap without animating
+		setPosition({ x: `${x}px`, y: `${y}px` })
+	}
 
-    function moveToPercent(xPercent: number, yPercent: number, duration: number) {
-        if (!containerRef.current) return;
-        setCurrentMoveDuration(duration / 1000);
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const x = (containerRect.width * xPercent) / 100;
-        const y = (containerRect.height * yPercent) / 100;
-        setPosition({ x: `${x}px`, y: `${y}px` });
-    }
+	function moveToPercent(xPercent: number, yPercent: number, duration: number) {
+		if (!containerRef.current) return
+		setCurrentMoveDuration(duration / 1000)
+		const containerRect = containerRef.current.getBoundingClientRect()
+		const x = (containerRect.width * xPercent) / 100
+		const y = (containerRect.height * yPercent) / 100
+		setPosition({ x: `${x}px`, y: `${y}px` })
+	}
 
-    useEffect(() => {
-        // Clear any existing timeouts before scheduling new ones
-        timeoutsRef.current.forEach((id) => clearTimeout(id));
-        timeoutsRef.current = [];
+	useEffect(() => {
+		// Clear any existing timeouts before scheduling new ones
+		timeoutsRef.current.forEach((id) => {
+			clearTimeout(id)
+		})
+		timeoutsRef.current = []
 
-        let timeAccumulator = 0;
+		let timeAccumulator = 0
 
-        function schedule(callback: () => void, delay: number): number {
-            const id = window.setTimeout(callback, delay);
-            timeoutsRef.current.push(id);
-            return id;
-        }
+		function schedule(callback: () => void, delay: number): number {
+			const id = window.setTimeout(callback, delay)
+			timeoutsRef.current.push(id)
+			return id
+		}
 
-        function executeActions(): void {
-            actions.forEach((action) => {
-                // startAt should apply immediately at its place in the sequence and not advance time
-                if (action.type === 'startAt') {
-                    moveToElement(action.target, 0);
-                    return;
-                }
-                if (action.type === 'startAtPercent') {
-                    setPositionByPercent(action.xPercent, action.yPercent);
-                    return;
-                }
+		function executeActions(): void {
+			actions.forEach((action) => {
+				// startAt should apply immediately at its place in the sequence and not advance time
+				if (action.type === "startAt") {
+					moveToElement(action.target, 0)
+					return
+				}
+				if (action.type === "startAtPercent") {
+					setPositionByPercent(action.xPercent, action.yPercent)
+					return
+				}
 
-                schedule(() => {
-                    switch (action.type) {
-                        case 'move':
-                            if ('target' in action) {
-                                moveToElement(action.target, action.duration);
-                            } else {
-                                moveToPercent(action.xPercent, action.yPercent, action.duration);
-                            }
-                            break;
-                        case 'click':
-                            setScale(0.9);
-                            schedule(function resetClickScale() { setScale(1); }, 100); // Fixed 100ms click duration
-                            break;
-                        case 'call':
-                            try {
-                                action.fn();
-                            } catch (_) {
-                                // no-op on errors to avoid breaking demo
-                            }
-                            break;
-                        case 'pause':
-                            // Pause doesn't require any action, just time passing
-                            break;
-                    }
-                }, timeAccumulator);
+				schedule(() => {
+					switch (action.type) {
+						case "move":
+							if ("target" in action) {
+								moveToElement(action.target, action.duration)
+							} else {
+								moveToPercent(action.xPercent, action.yPercent, action.duration)
+							}
+							break
+						case "click":
+							setScale(0.9)
+							schedule(function resetClickScale() {
+								setScale(1)
+							}, 100) // Fixed 100ms click duration
+							break
+						case "call":
+							try {
+								action.fn()
+							} catch (_) {
+								// no-op on errors to avoid breaking demo
+							}
+							break
+						case "pause":
+							// Pause doesn't require any action, just time passing
+							break
+					}
+				}, timeAccumulator)
 
-                // Add this action's duration to the accumulator for the next action
-                if (action.type === 'click') {
-                    timeAccumulator += 100;
-                } else if (action.type === 'pause') {
-                    timeAccumulator += action.duration;
-                } else if (action.type === 'move') {
-                    timeAccumulator += action.duration;
-                } else {
-                    // 'call' and startAt/startAtPercent don't consume time
-                }
-            });
-        }
+				// Add this action's duration to the accumulator for the next action
+				if (action.type === "click") {
+					timeAccumulator += 100
+				} else if (action.type === "pause") {
+					timeAccumulator += action.duration
+				} else if (action.type === "move") {
+					timeAccumulator += action.duration
+				} else {
+					// 'call' and startAt/startAtPercent don't consume time
+				}
+			})
+		}
 
-        // make sure refs are ready
-        schedule(executeActions, 100);
+		// make sure refs are ready
+		schedule(executeActions, 100)
 
-        return function cleanup(): void {
-            timeoutsRef.current.forEach((id) => clearTimeout(id));
-            timeoutsRef.current = [];
-        };
-    }, [actions]);
+		return function cleanup(): void {
+			timeoutsRef.current.forEach((id) => {
+				clearTimeout(id)
+			})
+			timeoutsRef.current = []
+		}
+	}, [actions])
 
-    return (
-        <div ref={containerRef} className={`absolute inset-0 pointer-events-none ${className || ''}`}>
-            <motion.div
-                animate={{
-                    x: position.x,
-                    y: position.y,
-                    scale: scale
-                }}
-                transition={{
-                    x: { duration: currentMoveDuration, ease: "easeInOut" },
-                    y: { duration: currentMoveDuration, ease: "easeInOut" },
-                    scale: { duration: 0.1, ease: "easeInOut" }
-                }}
-                className="absolute top-0 left-0"
-                style={{ zIndex: 10 }}
-                onUpdate={(latest: ResolvedValues) => {
-                    if (!onPositionChange) return;
-                    const containerRect = containerRectRef.current;
-                    if (!containerRect) return;
-                    const now = performance.now();
-                    if (now - lastUpdateRef.current < 50) return; // ~20fps throttle
-                    lastUpdateRef.current = now;
-                    const latestX = typeof latest.x === 'number' ? latest.x : parseFloat(String(latest.x || 0));
-                    const latestY = typeof latest.y === 'number' ? latest.y : parseFloat(String(latest.y || 0));
-                    const clientX = containerRect.left + latestX;
-                    const clientY = containerRect.top + latestY;
-                    onPositionChange(clientX, clientY);
-                }}
-            >
-                <MousePointer2 className="size-6 drop-shadow" strokeWidth={1.5} fill="white" />
-            </motion.div>
-        </div>
-    )
+	return (
+		<div
+			ref={containerRef}
+			className={`absolute inset-0 pointer-events-none ${className || ""}`}
+		>
+			<motion.div
+				animate={{
+					x: position.x,
+					y: position.y,
+					scale: scale,
+				}}
+				transition={{
+					x: { duration: currentMoveDuration, ease: "easeInOut" },
+					y: { duration: currentMoveDuration, ease: "easeInOut" },
+					scale: { duration: 0.1, ease: "easeInOut" },
+				}}
+				className="absolute top-0 left-0"
+				style={{ zIndex: 10 }}
+				onUpdate={(latest: ResolvedValues) => {
+					if (!onPositionChange) return
+					const containerRect = containerRectRef.current
+					if (!containerRect) return
+					const now = performance.now()
+					if (now - lastUpdateRef.current < 50) return // ~20fps throttle
+					lastUpdateRef.current = now
+					const latestX =
+						typeof latest.x === "number"
+							? latest.x
+							: Number.parseFloat(String(latest.x || 0))
+					const latestY =
+						typeof latest.y === "number"
+							? latest.y
+							: Number.parseFloat(String(latest.y || 0))
+					const clientX = containerRect.left + latestX
+					const clientY = containerRect.top + latestY
+					onPositionChange(clientX, clientY)
+				}}
+			>
+				<MousePointer2
+					className="size-6 drop-shadow"
+					strokeWidth={1.5}
+					fill="white"
+				/>
+			</motion.div>
+		</div>
+	)
 }
 
 function SnippetDemo() {
-    const snippetRootRef = useRef<HTMLDivElement>(null);
-    const sentenceRef = useRef<HTMLSpanElement>(null);
-    const [currentEndIndex, setCurrentEndIndex] = useState<number>(0);
-    const lastStableIndexRef = useRef<number>(0);
-    const [cursorActions, setCursorActions] = useState<CursorAction[]>([]);
-    const [menuOpen, setMenuOpen] = useState<boolean>(false);
-    const [hoveredMenuIndex, setHoveredMenuIndex] = useState<number | null>(null);
-    const menuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
-    const menuItem6Ref = useRef<HTMLElement | null>(null);
-    const charRectsRef = useRef<DOMRect[]>([]);
+	const snippetRootRef = useRef<HTMLDivElement>(null)
+	const sentenceRef = useRef<HTMLSpanElement>(null)
+	const [currentEndIndex, setCurrentEndIndex] = useState<number>(0)
+	const lastStableIndexRef = useRef<number>(0)
+	const [cursorActions, setCursorActions] = useState<CursorAction[]>([])
+	const [menuOpen, setMenuOpen] = useState<boolean>(false)
+	const [hoveredMenuIndex, setHoveredMenuIndex] = useState<number | null>(null)
+	const menuItemRefs = useRef<(HTMLDivElement | null)[]>([])
+	const menuItem6Ref = useRef<HTMLElement | null>(null)
+	const charRectsRef = useRef<DOMRect[]>([])
 
-    const targetText = "There's an Italian dish called saltimbocca, which means \"leap into the mouth.\"";
+	const targetText =
+		'There\'s an Italian dish called saltimbocca, which means "leap into the mouth."'
 
-    function getIndexFromClientPoint(clientX: number, clientY: number): number {
-        const rects = charRectsRef.current;
-        if (!sentenceRef.current || rects.length === 0) return 0;
-        let bestIdx = 0;
-        let bestDist = Number.POSITIVE_INFINITY;
-        for (let i = 0; i < rects.length; i++) {
-            const r = rects[i];
-            if (!r) continue;
-            const cx = r.left + r.width / 2;
-            const cy = r.top + r.height / 2;
-            const dx = clientX - cx;
-            const dy = clientY - cy;
-            const d = dx * dx + dy * dy;
-            if (d < bestDist) {
-                bestDist = d;
-                bestIdx = i;
-            }
-        }
-        return bestIdx;
-    }
+	function getIndexFromClientPoint(clientX: number, clientY: number): number {
+		const rects = charRectsRef.current
+		if (!sentenceRef.current || rects.length === 0) return 0
+		let bestIdx = 0
+		let bestDist = Number.POSITIVE_INFINITY
+		for (let i = 0; i < rects.length; i++) {
+			const r = rects[i]
+			if (!r) continue
+			const cx = r.left + r.width / 2
+			const cy = r.top + r.height / 2
+			const dx = clientX - cx
+			const dy = clientY - cy
+			const d = dx * dx + dy * dy
+			if (d < bestDist) {
+				bestDist = d
+				bestIdx = i
+			}
+		}
+		return bestIdx
+	}
 
-    function getMenuItemIndexFromPoint(clientX: number, clientY: number): number | null {
-        const el = document.elementFromPoint(clientX, clientY) as HTMLElement | null;
-        if (!el) return null;
+	function getMenuItemIndexFromPoint(
+		clientX: number,
+		clientY: number,
+	): number | null {
+		const el = document.elementFromPoint(clientX, clientY) as HTMLElement | null
+		if (!el) return null
 
-        const menuItem = el.closest('[data-menu-idx]') as HTMLElement | null;
-        if (menuItem) {
-            const idx = parseInt(menuItem.dataset.menuIdx || '', 10);
-            return Number.isFinite(idx) ? idx : null;
-        }
-        return null;
-    }
+		const menuItem = el.closest("[data-menu-idx]") as HTMLElement | null
+		if (menuItem) {
+			const idx = Number.parseInt(menuItem.dataset.menuIdx || "", 10)
+			return Number.isFinite(idx) ? idx : null
+		}
+		return null
+	}
 
-    useLayoutEffect(function setupCharRectsMeasurement() {
-        function measureCharRects(): void {
-            if (!sentenceRef.current) {
-                charRectsRef.current = [];
-                return;
-            }
-            const spans = sentenceRef.current.querySelectorAll('span[data-idx]');
-            const rects: DOMRect[] = [];
-            spans.forEach(function collect(node) {
-                rects.push((node as HTMLElement).getBoundingClientRect());
-            });
-            charRectsRef.current = rects;
-        }
+	useLayoutEffect(
+		function setupCharRectsMeasurement() {
+			function measureCharRects(): void {
+				if (!sentenceRef.current) {
+					charRectsRef.current = []
+					return
+				}
+				const spans = sentenceRef.current.querySelectorAll("span[data-idx]")
+				const rects: DOMRect[] = []
+				spans.forEach(function collect(node) {
+					rects.push((node as HTMLElement).getBoundingClientRect())
+				})
+				charRectsRef.current = rects
+			}
 
-        measureCharRects();
+			measureCharRects()
 
-        let ro1: ResizeObserver | null = null;
-        let ro2: ResizeObserver | null = null;
-        if (typeof ResizeObserver !== "undefined") {
-            ro1 = new ResizeObserver(function onResize() { measureCharRects(); });
-            ro2 = new ResizeObserver(function onResize() { measureCharRects(); });
-            if (snippetRootRef.current) ro1.observe(snippetRootRef.current);
-            if (sentenceRef.current) ro2.observe(sentenceRef.current);
-        }
+			let ro1: ResizeObserver | null = null
+			let ro2: ResizeObserver | null = null
+			if (typeof ResizeObserver !== "undefined") {
+				ro1 = new ResizeObserver(function onResize() {
+					measureCharRects()
+				})
+				ro2 = new ResizeObserver(function onResize() {
+					measureCharRects()
+				})
+				if (snippetRootRef.current) ro1.observe(snippetRootRef.current)
+				if (sentenceRef.current) ro2.observe(sentenceRef.current)
+			}
 
-        function onScroll(): void { measureCharRects(); }
-        window.addEventListener("resize", measureCharRects);
-        window.addEventListener("scroll", onScroll, true);
+			function onScroll(): void {
+				measureCharRects()
+			}
+			window.addEventListener("resize", measureCharRects)
+			window.addEventListener("scroll", onScroll, true)
 
-        return function cleanup(): void {
-            if (ro1) ro1.disconnect();
-            if (ro2) ro2.disconnect();
-            window.removeEventListener("resize", measureCharRects);
-            window.removeEventListener("scroll", onScroll, true);
-        };
-    }, [targetText]);
+			return function cleanup(): void {
+				if (ro1) ro1.disconnect()
+				if (ro2) ro2.disconnect()
+				window.removeEventListener("resize", measureCharRects)
+				window.removeEventListener("scroll", onScroll, true)
+			}
+		},
+		[targetText],
+	)
 
-    useEffect(function setupActionsOnce() {
-        lastStableIndexRef.current = 0;
-        setCurrentEndIndex(0);
-        if (!sentenceRef.current) return;
-        const total = targetText.length;
-        const firstSpan = sentenceRef.current.querySelector('span[data-idx="0"]') as HTMLSpanElement | null;
-        const lastSpan = sentenceRef.current.querySelector(`span[data-idx="${Math.max(0, total - 1)}"]`) as HTMLSpanElement | null;
-        if (!firstSpan || !lastSpan) return;
-        const firstRef = { current: firstSpan } as React.RefObject<HTMLElement>;
-        const lastRef = { current: lastSpan } as React.RefObject<HTMLElement>;
-        setCursorActions([
-            { type: 'call', fn: function reset() { lastStableIndexRef.current = 0; setCurrentEndIndex(0); setHoveredMenuIndex(null); } },
-            { type: 'startAt', target: firstRef },
-            { type: 'pause', duration: 200 },
-            { type: 'move', target: lastRef, duration: 1800 },
-            { type: 'pause', duration: 1200 },
-            { type: "click" },
-            { type: 'call', fn: () => { setMenuOpen(true); } },
-            { type: 'pause', duration: 1000 },
-            { type: 'move', target: menuItem6Ref, duration: 1000 },
-            { type: 'pause', duration: 500 },
-            { type: 'click' },
-        ]);
-    }, []);
+	useEffect(function setupActionsOnce() {
+		lastStableIndexRef.current = 0
+		setCurrentEndIndex(0)
+		if (!sentenceRef.current) return
+		const total = targetText.length
+		const firstSpan = sentenceRef.current.querySelector(
+			'span[data-idx="0"]',
+		) as HTMLSpanElement | null
+		const lastSpan = sentenceRef.current.querySelector(
+			`span[data-idx="${Math.max(0, total - 1)}"]`,
+		) as HTMLSpanElement | null
+		if (!firstSpan || !lastSpan) return
+		const firstRef = { current: firstSpan } as React.RefObject<HTMLElement>
+		const lastRef = { current: lastSpan } as React.RefObject<HTMLElement>
+		setCursorActions([
+			{
+				type: "call",
+				fn: function reset() {
+					lastStableIndexRef.current = 0
+					setCurrentEndIndex(0)
+					setHoveredMenuIndex(null)
+				},
+			},
+			{ type: "startAt", target: firstRef },
+			{ type: "pause", duration: 200 },
+			{ type: "move", target: lastRef, duration: 1800 },
+			{ type: "pause", duration: 1200 },
+			{ type: "click" },
+			{
+				type: "call",
+				fn: () => {
+					setMenuOpen(true)
+				},
+			},
+			{ type: "pause", duration: 1000 },
+			{ type: "move", target: menuItem6Ref, duration: 1000 },
+			{ type: "pause", duration: 500 },
+			{ type: "click" },
+		])
+	}, [])
 
-    return (
-        <div ref={snippetRootRef} className="size-full select-none text-xs relative overflow-hidden">
-            <Cursor
-                actions={cursorActions}
-                onPositionChange={function onPositionChange(clientX: number, clientY: number) {
-                    // Handle text highlighting
-                    const textIdx = getIndexFromClientPoint(clientX, clientY);
-                    const next = textIdx < lastStableIndexRef.current ? lastStableIndexRef.current : textIdx;
-                    if (next !== lastStableIndexRef.current) {
-                        lastStableIndexRef.current = next;
-                        setCurrentEndIndex(next);
-                    }
+	return (
+		<div
+			ref={snippetRootRef}
+			className="size-full select-none text-xs relative overflow-hidden"
+		>
+			<Cursor
+				actions={cursorActions}
+				onPositionChange={function onPositionChange(
+					clientX: number,
+					clientY: number,
+				) {
+					// Handle text highlighting
+					const textIdx = getIndexFromClientPoint(clientX, clientY)
+					const next =
+						textIdx < lastStableIndexRef.current
+							? lastStableIndexRef.current
+							: textIdx
+					if (next !== lastStableIndexRef.current) {
+						lastStableIndexRef.current = next
+						setCurrentEndIndex(next)
+					}
 
-                    // Handle menu item hovering
-                    if (menuOpen) {
-                        const menuIdx = getMenuItemIndexFromPoint(clientX, clientY);
-                        if (menuIdx !== hoveredMenuIndex) {
-                            setHoveredMenuIndex(menuIdx);
-                        }
-                    }
-                }}
-            />
-            <div className="h-[125%] w-full bg-white text-justify p-4 text-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                writing is easier to read, and the easier something is to read, the more deeply readers will engage with it. The less energy they expend on your prose, the more they'll have left for your ideas. And the further they'll read. Most readers' energy tends to flag part way through an article or essay. If the friction of reading is low enough, more keep going till the end.
-                {" "}
-                <span ref={sentenceRef}>
-                    {targetText.split("").map(function renderChar(ch, idx) {
-                        const highlighted = idx <= currentEndIndex;
-                        return (
-                            <span
-                                key={idx}
-                                data-idx={idx}
-                                className={highlighted ? "bg-blue-200/70" : undefined}
-                            >
-                                {ch}
-                            </span>
-                        );
-                    })}
-                </span>
-                <span className="size-0 relative">
-                    {menuOpen && (
-                        <div className="flex flex-col w-48 text-left absolute top-0 right-0 text-white bg-zinc-800/70 text-xs border-0.5 backdrop-blur-sm border-zinc-900/80 rounded-md px-1.5 py-1.5">
-                            {["Back", "Forward", "Reload", "Save As...", "Print...", "Translate to English", "Save to Supermemory", "View Page Source", "Inspect"].map((item, idx) => (
-                                <React.Fragment key={item}>
-                                    <div
-                                        ref={el => { menuItemRefs.current[idx] = el; if (idx === 6) { menuItem6Ref.current = el; } }}
-                                        data-menu-idx={idx}
-                                        className={cn(
-                                            "px-2 py-0.5 flex items-center gap-1.5 rounded-sm transition-colors",
-                                            (idx === 0 || idx === 1) && "text-white/30",
-                                            hoveredMenuIndex === idx && "bg-blue-500"
-                                        )}
-                                    >
-                                        {idx === 6 && <img src="/images/icon-16.png" alt="Supermemory" className="size-3.5" />}
-                                        {item}
-                                    </div>
-                                    {[2, 5, 6].includes(idx) && <div className="h-px rounded-full my-1 mx-2 bg-zinc-300/20" />}
-                                </React.Fragment>
-                            ))}
-                        </div>
-                    )}
-                </span>
-                {" "}My goal when writing might be called saltintesta: the ideas leap into your head and you barely notice the words that got them there. It's too much to hope that writing could ever be pure ideas. You might not even want it to be. But for most writers, most of the time, that's the goal to aim for. The gap between most writing and pure ideas is not filled with poetry. Plus it's more considerate to write simply. When you write in a fancy way to impress people, you're making them do extra work just so you can seem cool. It's like trailing a long train behind you that readers have to carry.
-            </div>
-        </div>
-    )
+					// Handle menu item hovering
+					if (menuOpen) {
+						const menuIdx = getMenuItemIndexFromPoint(clientX, clientY)
+						if (menuIdx !== hoveredMenuIndex) {
+							setHoveredMenuIndex(menuIdx)
+						}
+					}
+				}}
+			/>
+			<div className="h-[125%] w-full bg-white text-justify p-4 text-black absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+				writing is easier to read, and the easier something is to read, the more
+				deeply readers will engage with it. The less energy they expend on your
+				prose, the more they'll have left for your ideas. And the further
+				they'll read. Most readers' energy tends to flag part way through an
+				article or essay. If the friction of reading is low enough, more keep
+				going till the end.{" "}
+				<span ref={sentenceRef}>
+					{targetText.split("").map(function renderChar(ch, idx) {
+						const highlighted = idx <= currentEndIndex
+						return (
+							<span
+								key={`char-${idx}-${ch}`}
+								data-idx={idx}
+								className={highlighted ? "bg-blue-200/70" : undefined}
+							>
+								{ch}
+							</span>
+						)
+					})}
+				</span>
+				<span className="size-0 relative">
+					{menuOpen && (
+						<div className="flex flex-col w-48 text-left absolute top-0 right-0 text-white bg-zinc-800/70 text-xs border-0.5 backdrop-blur-sm border-zinc-900/80 rounded-md px-1.5 py-1.5">
+							{[
+								"Back",
+								"Forward",
+								"Reload",
+								"Save As...",
+								"Print...",
+								"Translate to English",
+								"Save to Supermemory",
+								"View Page Source",
+								"Inspect",
+							].map((item, idx) => (
+								<React.Fragment key={item}>
+									<div
+										ref={(el) => {
+											menuItemRefs.current[idx] = el
+											if (idx === 6) {
+												menuItem6Ref.current = el
+											}
+										}}
+										data-menu-idx={idx}
+										className={cn(
+											"px-2 py-0.5 flex items-center gap-1.5 rounded-sm transition-colors",
+											(idx === 0 || idx === 1) && "text-white/30",
+											hoveredMenuIndex === idx && "bg-blue-500",
+										)}
+									>
+										{idx === 6 && (
+											<img
+												src="/images/icon-16.png"
+												alt="Supermemory"
+												className="size-3.5"
+											/>
+										)}
+										{item}
+									</div>
+									{[2, 5, 6].includes(idx) && (
+										<div className="h-px rounded-full my-1 mx-2 bg-zinc-300/20" />
+									)}
+								</React.Fragment>
+							))}
+						</div>
+					)}
+				</span>{" "}
+				My goal when writing might be called saltintesta: the ideas leap into
+				your head and you barely notice the words that got them there. It's too
+				much to hope that writing could ever be pure ideas. You might not even
+				want it to be. But for most writers, most of the time, that's the goal
+				to aim for. The gap between most writing and pure ideas is not filled
+				with poetry. Plus it's more considerate to write simply. When you write
+				in a fancy way to impress people, you're making them do extra work just
+				so you can seem cool. It's like trailing a long train behind you that
+				readers have to carry.
+			</div>
+		</div>
+	)
 }
 
 function ChatGPTDemo() {
-    const iconRef = useRef<HTMLImageElement>(null);
-    const submitButtonRef = useRef<HTMLDivElement>(null);
-    const [enhancementStatus, setEnhancementStatus] = useState<"notStarted" | "enhancing" | "done">("notStarted");
-    const [memoriesExpanded, setMemoriesExpanded] = useState(false);
+	const iconRef = useRef<HTMLImageElement>(null)
+	const submitButtonRef = useRef<HTMLDivElement>(null)
+	const [enhancementStatus, setEnhancementStatus] = useState<
+		"notStarted" | "enhancing" | "done"
+	>("notStarted")
+	const [memoriesExpanded, setMemoriesExpanded] = useState(false)
 
-    const cursorActions: CursorAction[] = useMemo(() => [
-        {
-            type: "call", fn: function resetStates() {
-                setEnhancementStatus("notStarted");
-                setMemoriesExpanded(false);
-            }
-        },
-        { type: 'startAtPercent', xPercent: 80, yPercent: 80 },
-        { type: 'pause', duration: 1000 },
-        { type: 'move', target: iconRef, duration: 1000 },
-        { type: 'pause', duration: 1000 },
-        { type: 'click' },
-        { type: 'call', fn: function startEnhancing() { setEnhancementStatus("enhancing"); } },
-        { type: 'pause', duration: 1000 },
-        { type: 'move', xPercent: 10, yPercent: 80, duration: 1000 },
-        { type: 'call', fn: function finishEnhancing() { setEnhancementStatus("done"); } },
-        { type: 'pause', duration: 500 },
-        { type: 'move', target: iconRef, duration: 1000 },
-        { type: 'call', fn: function expandMemories() { setMemoriesExpanded(true); } },
-        { type: "pause", duration: 1000 },
-        { type: 'move', xPercent: 80, yPercent: 80, duration: 1000 },
-    ], []);
+	const cursorActions: CursorAction[] = useMemo(
+		() => [
+			{
+				type: "call",
+				fn: function resetStates() {
+					setEnhancementStatus("notStarted")
+					setMemoriesExpanded(false)
+				},
+			},
+			{ type: "startAtPercent", xPercent: 80, yPercent: 80 },
+			{ type: "pause", duration: 1000 },
+			{ type: "move", target: iconRef, duration: 1000 },
+			{ type: "pause", duration: 1000 },
+			{ type: "click" },
+			{
+				type: "call",
+				fn: function startEnhancing() {
+					setEnhancementStatus("enhancing")
+				},
+			},
+			{ type: "pause", duration: 1000 },
+			{ type: "move", xPercent: 10, yPercent: 80, duration: 1000 },
+			{
+				type: "call",
+				fn: function finishEnhancing() {
+					setEnhancementStatus("done")
+				},
+			},
+			{ type: "pause", duration: 500 },
+			{ type: "move", target: iconRef, duration: 1000 },
+			{
+				type: "call",
+				fn: function expandMemories() {
+					setMemoriesExpanded(true)
+				},
+			},
+			{ type: "pause", duration: 1000 },
+			{ type: "move", xPercent: 80, yPercent: 80, duration: 1000 },
+		],
+		[],
+	)
 
-    return (
-        <div className="size-full relative overflow-hidden select-none pointer-events-none text-white flex flex-col gap-6 items-center justify-center" style={{
-            backgroundColor: "#212121",
-            fontFamily: "ui-sans-serif, -apple-system, system-ui"
-        }}>
-            <Cursor actions={cursorActions} />
-            <div className="text-xl">What's on your mind today?</div>
-            <div className="w-[85%] text-sm rounded-3xl p-2 flex flex-col gap-2" style={{ backgroundColor: "#303030" }}>
-                <div className="p-2">
-                    what are my card's benefits?
-                </div>
-                <div className="flex justify-between items-center p-1 pt-0">
-                    <PlusIcon className="size-5" strokeWidth={1.5} />
-                    <div className="flex items-center gap-2">
-                        <div className="h-4.5 flex items-center">
-                            <motion.div
-                                ref={iconRef}
-                                layout
-                                initial={false}
-                                animate={{
-                                    backgroundColor: enhancementStatus === "notStarted" ? "transparent" : "#1e1b4b",
-                                    borderColor: enhancementStatus === "notStarted" ? "transparent" : "#4338ca",
-                                    borderWidth: enhancementStatus === "notStarted" ? 0 : 1,
-                                    paddingLeft: enhancementStatus === "notStarted" ? 0 : (enhancementStatus === "enhancing" ? 4 : 8),
-                                    paddingRight: enhancementStatus === "notStarted" ? 0 : (enhancementStatus === "enhancing" ? 6 : 8),
-                                    paddingTop: enhancementStatus === "notStarted" ? 0 : 4,
-                                    paddingBottom: enhancementStatus === "notStarted" ? 0 : 4,
-                                    marginTop: enhancementStatus === "notStarted" ? 0 : 4,
-                                    marginBottom: enhancementStatus === "notStarted" ? 0 : 4,
-                                }}
-                                transition={{
-                                    duration: 0.2,
-                                    ease: "easeInOut",
-                                    layout: { duration: 0.2, ease: "easeInOut" }
-                                }}
-                                className="rounded-full text-xs w-fit flex items-center relative"
-                                style={{ border: "solid" }}
-                            >
-                                {enhancementStatus === "notStarted" && (
-                                    <img src="/images/icon-16.png" alt="Enhance with Supermemory" className="size-5" />
-                                )}
-                                {enhancementStatus === "enhancing" && (
-                                    <>
-                                        <LoaderIcon className="size-3 animate-spin" />
-                                        <motion.span
-                                            initial={{ opacity: 0, width: 0 }}
-                                            animate={{ opacity: 1, width: "auto" }}
-                                            transition={{ delay: 0.1, duration: 0.2 }}
-                                            className="ml-2 whitespace-nowrap overflow-hidden"
-                                        >
-                                            Searching...
-                                        </motion.span>
-                                    </>
-                                )}
-                                {enhancementStatus === "done" && (
-                                    <>
-                                        <CheckIcon className="size-3 text-green-400" />
-                                        <motion.span
-                                            initial={{ opacity: 0, width: "auto" }}
-                                            animate={{ opacity: 1, width: "auto" }}
-                                            transition={{ delay: 0.1, duration: 0.2 }}
-                                            className="ml-2">Including 1 memory</motion.span>
-                                    </>
-                                )}
-                                <AnimatePresence>
-                                    {memoriesExpanded && (
-                                        <motion.div
-                                            initial={{
-                                                opacity: 0,
-                                                scale: 0.95,
-                                                y: -8
-                                            }}
-                                            animate={{
-                                                opacity: 1,
-                                                scale: 1,
-                                                y: 0
-                                            }}
-                                            exit={{
-                                                opacity: 0,
-                                                scale: 0.95,
-                                                y: -8
-                                            }}
-                                            transition={{
-                                                duration: 0.15,
-                                                ease: [0.16, 1, 0.3, 1],
-                                            }}
-                                            className="absolute left-1/2 -translate-x-1/2 top-8 bg-[#1e1b4b] border border-[#4338ca] w-56 rounded-lg p-2"
-                                            style={{ transformOrigin: 'top center' }}
-                                        >
-                                            <div className="flex items-center gap-2">
-                                                <img src="/images/icon-16.png" alt="Enhance with Supermemory" className="size-5" />
-                                                <span className="text-xs">User possesses an American Express Platinum card</span>
-                                            </div>
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </motion.div>
-                        </div>
+	return (
+		<div
+			className="size-full relative overflow-hidden select-none pointer-events-none text-white flex flex-col gap-6 items-center justify-center"
+			style={{
+				backgroundColor: "#212121",
+				fontFamily: "ui-sans-serif, -apple-system, system-ui",
+			}}
+		>
+			<Cursor actions={cursorActions} />
+			<div className="text-xl">What's on your mind today?</div>
+			<div
+				className="w-[85%] text-sm rounded-3xl p-2 flex flex-col gap-2"
+				style={{ backgroundColor: "#303030" }}
+			>
+				<div className="p-2">what are my card's benefits?</div>
+				<div className="flex justify-between items-center p-1 pt-0">
+					<PlusIcon className="size-5" strokeWidth={1.5} />
+					<div className="flex items-center gap-2">
+						<div className="h-4.5 flex items-center">
+							<motion.div
+								ref={iconRef}
+								layout
+								initial={false}
+								animate={{
+									backgroundColor:
+										enhancementStatus === "notStarted"
+											? "transparent"
+											: "#1e1b4b",
+									borderColor:
+										enhancementStatus === "notStarted"
+											? "transparent"
+											: "#4338ca",
+									borderWidth: enhancementStatus === "notStarted" ? 0 : 1,
+									paddingLeft:
+										enhancementStatus === "notStarted"
+											? 0
+											: enhancementStatus === "enhancing"
+												? 4
+												: 8,
+									paddingRight:
+										enhancementStatus === "notStarted"
+											? 0
+											: enhancementStatus === "enhancing"
+												? 6
+												: 8,
+									paddingTop: enhancementStatus === "notStarted" ? 0 : 4,
+									paddingBottom: enhancementStatus === "notStarted" ? 0 : 4,
+									marginTop: enhancementStatus === "notStarted" ? 0 : 4,
+									marginBottom: enhancementStatus === "notStarted" ? 0 : 4,
+								}}
+								transition={{
+									duration: 0.2,
+									ease: "easeInOut",
+									layout: { duration: 0.2, ease: "easeInOut" },
+								}}
+								className="rounded-full text-xs w-fit flex items-center relative"
+								style={{ border: "solid" }}
+							>
+								{enhancementStatus === "notStarted" && (
+									<img
+										src="/images/icon-16.png"
+										alt="Enhance with Supermemory"
+										className="size-5"
+									/>
+								)}
+								{enhancementStatus === "enhancing" && (
+									<>
+										<LoaderIcon className="size-3 animate-spin" />
+										<motion.span
+											initial={{ opacity: 0, width: 0 }}
+											animate={{ opacity: 1, width: "auto" }}
+											transition={{ delay: 0.1, duration: 0.2 }}
+											className="ml-2 whitespace-nowrap overflow-hidden"
+										>
+											Searching...
+										</motion.span>
+									</>
+								)}
+								{enhancementStatus === "done" && (
+									<>
+										<CheckIcon className="size-3 text-green-400" />
+										<motion.span
+											initial={{ opacity: 0, width: "auto" }}
+											animate={{ opacity: 1, width: "auto" }}
+											transition={{ delay: 0.1, duration: 0.2 }}
+											className="ml-2"
+										>
+											Including 1 memory
+										</motion.span>
+									</>
+								)}
+								<AnimatePresence>
+									{memoriesExpanded && (
+										<motion.div
+											initial={{
+												opacity: 0,
+												scale: 0.95,
+												y: -8,
+											}}
+											animate={{
+												opacity: 1,
+												scale: 1,
+												y: 0,
+											}}
+											exit={{
+												opacity: 0,
+												scale: 0.95,
+												y: -8,
+											}}
+											transition={{
+												duration: 0.15,
+												ease: [0.16, 1, 0.3, 1],
+											}}
+											className="absolute left-1/2 -translate-x-1/2 top-8 bg-[#1e1b4b] border border-[#4338ca] w-56 rounded-lg p-2"
+											style={{ transformOrigin: "top center" }}
+										>
+											<div className="flex items-center gap-2">
+												<img
+													src="/images/icon-16.png"
+													alt="Enhance with Supermemory"
+													className="size-5"
+												/>
+												<span className="text-xs">
+													User possesses an American Express Platinum card
+												</span>
+											</div>
+										</motion.div>
+									)}
+								</AnimatePresence>
+							</motion.div>
+						</div>
 
-                        <MicIcon className="size-4" strokeWidth={1.5} />
-                        <div ref={submitButtonRef} className="rounded-full bg-white size-6 flex items-center justify-center">
-                            <ArrowUpIcon className="size-4 text-black" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
+						<MicIcon className="size-4" strokeWidth={1.5} />
+						<div
+							ref={submitButtonRef}
+							className="rounded-full bg-white size-6 flex items-center justify-center"
+						>
+							<ArrowUpIcon className="size-4 text-black" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
 }
 
 function TwitterDemo() {
-    const importButtonRef = useRef<HTMLButtonElement>(null);
-    const [importStatus, setImportStatus] = useState<"notStarted" | "importing" | "done">("notStarted");
+	const importButtonRef = useRef<HTMLButtonElement>(null)
+	const [importStatus, setImportStatus] = useState<
+		"notStarted" | "importing" | "done"
+	>("notStarted")
 
-    const cursorActions: CursorAction[] = useMemo(() => [
-        {
-            type: "call", fn: function resetStates() {
-                setImportStatus("notStarted");
-            }
-        },
-        { type: 'startAtPercent', xPercent: 10, yPercent: 80 },
-        { type: 'pause', duration: 1300 },
-        { type: 'move', target: importButtonRef, duration: 1100 },
-        { type: 'pause', duration: 800 },
-        { type: 'click' },
-        { type: 'call', fn: function startImporting() { setImportStatus("importing"); } },
-        { type: 'pause', duration: 700 },
-        { type: 'move', xPercent: 80, yPercent: 80, duration: 1200 },
-        { type: 'call', fn: function finishImporting() { setImportStatus("done"); } },
-    ], []);
+	const cursorActions: CursorAction[] = useMemo(
+		() => [
+			{
+				type: "call",
+				fn: function resetStates() {
+					setImportStatus("notStarted")
+				},
+			},
+			{ type: "startAtPercent", xPercent: 10, yPercent: 80 },
+			{ type: "pause", duration: 1300 },
+			{ type: "move", target: importButtonRef, duration: 1100 },
+			{ type: "pause", duration: 800 },
+			{ type: "click" },
+			{
+				type: "call",
+				fn: function startImporting() {
+					setImportStatus("importing")
+				},
+			},
+			{ type: "pause", duration: 700 },
+			{ type: "move", xPercent: 80, yPercent: 80, duration: 1200 },
+			{
+				type: "call",
+				fn: function finishImporting() {
+					setImportStatus("done")
+				},
+			},
+		],
+		[],
+	)
 
-    return (
-        <div className="size-full relative overflow-hidden select-none flex flex-col items-center justify-center">
-            <div className="bg-white text-black px-5 py-3 text-sm rounded-2xl w-9/10">
-                <div className="flex justify-between items-center">
-                    <div className="flex items-center gap-2">
-                        <span className="text-xl font-bold">𝕏</span>
-                        <span className="text-base font-medium">Import Twitter Bookmarks</span>
-                    </div>
-                    <XIcon className="size-4" />
-                </div>
-                <div className="mt-3">
-                    <p className="text-sm text-zinc-600">
-                        This will import all your Twitter bookmarks to Supermemory
-                    </p>
-                </div>
-                <div className="mt-3">
-                    <motion.button
-                        ref={importButtonRef}
-                        animate={{
-                            backgroundColor: importStatus === "importing"
-                                ? "#f59e0b"
-                                : importStatus === "done"
-                                    ? "#10b981"
-                                    : "#3b82f6"
-                        }}
-                        transition={{ duration: 0.3, ease: "easeInOut" }}
-                        className="text-white px-4 py-2 rounded-lg flex items-center gap-2 min-w-[180px] justify-center"
-                    >
-                        <AnimatePresence mode="wait">
-                            {importStatus === "importing" && (
-                                <motion.div
-                                    initial={{ opacity: 0, scale: 0 }}
-                                    animate={{ opacity: 1, scale: 1 }}
-                                    exit={{ opacity: 0, scale: 0 }}
-                                    transition={{ duration: 0.2 }}
-                                >
-                                    <LoaderIcon className="size-4 animate-spin" />
-                                </motion.div>
-                            )}
-                            {importStatus === "done" && (
-                                <motion.div
-                                    initial={{ opacity: 0, scale: 0 }}
-                                    animate={{ opacity: 1, scale: 1 }}
-                                    exit={{ opacity: 0, scale: 0 }}
-                                    transition={{ duration: 0.2 }}
-                                >
-                                    <CheckIcon className="size-4" />
-                                </motion.div>
-                            )}
-                        </AnimatePresence>
-                        <motion.span
-                            key={importStatus}
-                            initial={{ opacity: 0, y: 10 }}
-                            animate={{ opacity: 1, y: 0 }}
-                            exit={{ opacity: 0, y: -10 }}
-                            transition={{ duration: 0.3, ease: "easeInOut" }}
-                        >
-                            {importStatus === "importing"
-                                ? "Importing bookmarks..."
-                                : importStatus === "done"
-                                    ? "Import successful"
-                                    : "Import All Bookmarks"}
-                        </motion.span>
-                    </motion.button>
-                </div>
-            </div>
-            <Cursor actions={cursorActions} />
-        </div>
-    )
+	return (
+		<div className="size-full relative overflow-hidden select-none flex flex-col items-center justify-center">
+			<div className="bg-white text-black px-5 py-3 text-sm rounded-2xl w-9/10">
+				<div className="flex justify-between items-center">
+					<div className="flex items-center gap-2">
+						<span className="text-xl font-bold">𝕏</span>
+						<span className="text-base font-medium">
+							Import Twitter Bookmarks
+						</span>
+					</div>
+					<XIcon className="size-4" />
+				</div>
+				<div className="mt-3">
+					<p className="text-sm text-zinc-600">
+						This will import all your Twitter bookmarks to Supermemory
+					</p>
+				</div>
+				<div className="mt-3">
+					<motion.button
+						ref={importButtonRef}
+						animate={{
+							backgroundColor:
+								importStatus === "importing"
+									? "#f59e0b"
+									: importStatus === "done"
+										? "#10b981"
+										: "#3b82f6",
+						}}
+						transition={{ duration: 0.3, ease: "easeInOut" }}
+						className="text-white px-4 py-2 rounded-lg flex items-center gap-2 min-w-[180px] justify-center"
+					>
+						<AnimatePresence mode="wait">
+							{importStatus === "importing" && (
+								<motion.div
+									initial={{ opacity: 0, scale: 0 }}
+									animate={{ opacity: 1, scale: 1 }}
+									exit={{ opacity: 0, scale: 0 }}
+									transition={{ duration: 0.2 }}
+								>
+									<LoaderIcon className="size-4 animate-spin" />
+								</motion.div>
+							)}
+							{importStatus === "done" && (
+								<motion.div
+									initial={{ opacity: 0, scale: 0 }}
+									animate={{ opacity: 1, scale: 1 }}
+									exit={{ opacity: 0, scale: 0 }}
+									transition={{ duration: 0.2 }}
+								>
+									<CheckIcon className="size-4" />
+								</motion.div>
+							)}
+						</AnimatePresence>
+						<motion.span
+							key={importStatus}
+							initial={{ opacity: 0, y: 10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.3, ease: "easeInOut" }}
+						>
+							{importStatus === "importing"
+								? "Importing bookmarks..."
+								: importStatus === "done"
+									? "Import successful"
+									: "Import All Bookmarks"}
+						</motion.span>
+					</motion.button>
+				</div>
+			</div>
+			<Cursor actions={cursorActions} />
+		</div>
+	)
 }
 
 export function ExtensionForm() {
-    const { totalSteps, nextStep, getStepNumberFor } = useOnboarding();
-    return (
-					<div className="relative flex items-start flex-col gap-6">
-						<div className="flex items-center justify-between w-full">
-							<div className="flex flex-col items-start text-left gap-4">
-								<NavMenu>
-									<p className="text-base text-white/60">
-										Step {getStepNumberFor("extension")} of {totalSteps}
-									</p>
-								</NavMenu>
-								<h1 className="text-white font-medium">
-									Install the Chrome extension
-								</h1>
-								<p className="text-white/80 text-2xl">
-									{/* Install the Supermemory extension to start saving and organizing everything that matters. */}
-									Bring Supermemory everywhere
-								</p>
-							</div>
-							<div className="flex flex-col items-center text-center gap-4">
-								<a
-									href="https://chromewebstore.google.com/detail/afpgkkipfdpeaflnpoaffkcankadgjfc?utm_source=item-share-cb"
-									rel="noopener noreferrer"
-									target="_blank"
-									className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full mt-6 pl-4.5 pr-6 py-4 text-2xl font-sans tracking-tight font-medium flex items-center gap-4"
-								>
-									<img
-										src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/2048px-Google_Chrome_icon_%28February_2022%29.svg.png"
-										alt="Chrome"
-										className="size-8"
-									/>
-									Add to Chrome
-								</a>
-							</div>
-						</div>
+	const { totalSteps, nextStep, getStepNumberFor } = useOnboarding()
+	return (
+		<div className="relative flex items-start flex-col gap-6 w-full">
+			<div className="flex flex-col md:flex-row items-start md:items-center justify-between w-full gap-6">
+				<div className="flex flex-col items-start text-left gap-4 flex-1">
+					<NavMenu>
+						<p className="text-base text-white/60">
+							Step {getStepNumberFor("extension")} of {totalSteps}
+						</p>
+					</NavMenu>
+					<h1 className="text-white font-medium text-2xl md:text-4xl">
+						Install the Chrome extension
+					</h1>
+					<p className="text-white/80 text-lg md:text-2xl">
+						{/* Install the Supermemory extension to start saving and organizing everything that matters. */}
+						Bring Supermemory everywhere
+					</p>
+				</div>
+				<div className="flex flex-col items-center text-center gap-4 w-full md:w-auto">
+					<a
+						href="https://chromewebstore.google.com/detail/afpgkkipfdpeaflnpoaffkcankadgjfc?utm_source=item-share-cb"
+						rel="noopener noreferrer"
+						target="_blank"
+						className="bg-zinc-50/80 backdrop-blur-lg border-2 hover:bg-zinc-100/80 transition-colors duration-100 border-zinc-200/80 shadow-xs rounded-full pl-4.5 pr-6 py-4 text-lg md:text-2xl font-sans tracking-tight font-medium flex items-center gap-4 w-full md:w-auto justify-center"
+					>
+						<img
+							src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/2048px-Google_Chrome_icon_%28February_2022%29.svg.png"
+							alt="Chrome"
+							className="size-6 md:size-8"
+						/>
+						Add to Chrome
+					</a>
+				</div>
+			</div>
 
-						<div className="grid grid-cols-3 w-fit gap-4 text-base font-sans font-medium tracking-normal">
-							<div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
-								<div className="p-4 bg-white">
-									<h2 className="text-lg">Remember anything, anywhere</h2>
-									<p className="text-zinc-600 text-sm">
-										Just right-click to save instantly.
-									</p>
-								</div>
-								<div className="aspect-square bg-blue-500">
-									<SnippetDemo />
-								</div>
-							</div>
-							<div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
-								<div className="p-4 bg-white">
-									<h2 className="text-lg">Integrate with your AI</h2>
-									{/* Supercharge your AI with memory */}
-									{/* Supercharge any AI with Supermemory. */}
-									{/* ChatGPT is better with Supermemory. */}
-									{/* Seamless integration with your workflow */}
-									<p className="text-zinc-600 text-sm">
-										{/* Integrates with ChatGPT and Claude. */}
-										{/* Integrates with your chat apps */}
-										Enhance any prompt with Supermemory.
-										{/* Seamlessly */}
-									</p>
-								</div>
-								<div className="aspect-square bg-blue-500">
-									<ChatGPTDemo />
-								</div>
-							</div>
-							<div className="flex flex-col w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
-								<div className="p-4 bg-white">
-									<h2 className="text-lg">Import Twitter bookmarks</h2>
-									<p className="text-zinc-600 text-sm">
-										Search semantically and effortlessly.
-										{/* Import instantly and search effortlessly. */}
-									</p>
-								</div>
-								<div className="aspect-square bg-blue-500">
-									<TwitterDemo />
-								</div>
-							</div>
-						</div>
-						<div className="flex w-full justify-end">
-							<Button
-								variant="link"
-								size="lg"
-								className="text-black/40 hover:text-black font-medium! text-lg underline w-fit px-0! cursor-pointer"
-								onClick={nextStep}
-							>
-								Continue
-								<ChevronRightIcon className="size-4" />
-							</Button>
-						</div>
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 w-full max-w-6xl gap-4 text-base font-sans font-medium tracking-normal">
+				<div className="flex flex-col w-full max-w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+					<div className="p-4 bg-white">
+						<h2 className="text-lg">Remember anything, anywhere</h2>
+						<p className="text-zinc-600 text-sm">
+							Just right-click to save instantly.
+						</p>
 					</div>
-				)
-}
\ No newline at end of file
+					<div className="aspect-square bg-blue-500">
+						<SnippetDemo />
+					</div>
+				</div>
+				<div className="flex flex-col w-full max-w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+					<div className="p-4 bg-white">
+						<h2 className="text-lg">Integrate with your AI</h2>
+						{/* Supercharge your AI with memory */}
+						{/* Supercharge any AI with Supermemory. */}
+						{/* ChatGPT is better with Supermemory. */}
+						{/* Seamless integration with your workflow */}
+						<p className="text-zinc-600 text-sm">
+							{/* Integrates with ChatGPT and Claude. */}
+							{/* Integrates with your chat apps */}
+							Enhance any prompt with Supermemory.
+							{/* Seamlessly */}
+						</p>
+					</div>
+					<div className="aspect-square bg-blue-500">
+						<ChatGPTDemo />
+					</div>
+				</div>
+				<div className="flex flex-col w-full max-w-80 divide-y divide-zinc-200 border border-zinc-200 shadow-xs rounded-xl overflow-hidden">
+					<div className="p-4 bg-white">
+						<h2 className="text-lg">Import Twitter bookmarks</h2>
+						<p className="text-zinc-600 text-sm">
+							Search semantically and effortlessly.
+							{/* Import instantly and search effortlessly. */}
+						</p>
+					</div>
+					<div className="aspect-square bg-blue-500">
+						<TwitterDemo />
+					</div>
+				</div>
+			</div>
+			<div className="flex w-full justify-end">
+				<Button
+					variant="link"
+					size="lg"
+					className="text-black/40 hover:text-black font-medium! text-lg underline w-fit px-0! cursor-pointer"
+					onClick={nextStep}
+				>
+					Continue
+					<ChevronRightIcon className="size-4" />
+				</Button>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/web/app/onboarding/intro.tsx b/apps/web/app/onboarding/intro.tsx
index cc242df3..ebf9b471 100644
--- a/apps/web/app/onboarding/intro.tsx
+++ b/apps/web/app/onboarding/intro.tsx
@@ -11,7 +11,7 @@ export function Intro() {
 
 	return (
 		<motion.div
-			className="flex flex-col gap-4 relative max-sm:text-4xl max-sm:w-full text-white text-center"
+			className="flex flex-col gap-4 relative text-2xl md:text-4xl w-full text-white text-center"
 			layout
 			transition={{
 				layout: { duration: 0.8, ease: "anticipate" },
diff --git a/apps/web/app/onboarding/mcp-form.tsx b/apps/web/app/onboarding/mcp-form.tsx
index f8561a09..d3152e42 100644
--- a/apps/web/app/onboarding/mcp-form.tsx
+++ b/apps/web/app/onboarding/mcp-form.tsx
@@ -220,7 +220,7 @@ export function MCPForm() {
 						<Button
 							variant="link"
 							size="lg"
-							className="text-black/40 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white not-odd:font-medium! text-lg underline w-fit px-0! cursor-pointer"
 							onClick={nextStep}
 						>
 							Continue
@@ -238,7 +238,7 @@ export function MCPForm() {
 						<Button
 							variant="link"
 							size="lg"
-							className="text-black/40 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white font-medium! text-lg underline w-fit px-0! cursor-pointer"
 							onClick={nextStep}
 						>
 							Skip For Now
diff --git a/apps/web/app/onboarding/name-form.tsx b/apps/web/app/onboarding/name-form.tsx
index df734601..018508b1 100644
--- a/apps/web/app/onboarding/name-form.tsx
+++ b/apps/web/app/onboarding/name-form.tsx
@@ -1,11 +1,9 @@
 "use client"
 
-import { Button } from "@repo/ui/components/button"
 import { useOnboarding } from "./onboarding-context"
 import { useAuth } from "@lib/auth-context"
 import Link from "next/link"
 import { useEffect, useState } from "react"
-import { Input } from "@ui/components/input"
 import { CheckIcon } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import { NavMenu } from "./nav-menu"
@@ -20,8 +18,7 @@ export function NameForm() {
 		if (!name && user?.name) {
 			setName(user.name)
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [user?.name])
+	}, [name, user?.name])
 
 	function handleNext(): void {
 		const trimmed = name.trim()
@@ -51,13 +48,15 @@ export function NameForm() {
 	}
 
 	return (
-		<div className="flex flex-col gap-4">
+		<div className="flex flex-col gap-4 w-full">
 			<NavMenu>
 				<p className="text-base text-white/60">
 					Step {getStepNumberFor("name")} of {totalSteps}
 				</p>
 			</NavMenu>
-			<p className="text-4xl text-white font-medium">What should we call you?</p>
+			<p className="text-2xl md:text-4xl text-white font-medium">
+				What should we call you?
+			</p>
 
 			<form onSubmit={handleSubmit} className="flex flex-col group text-white">
 				<div className="relative flex flex-col">
diff --git a/apps/web/app/onboarding/onboarding-background.tsx b/apps/web/app/onboarding/onboarding-background.tsx
index 366648fa..dce144ea 100644
--- a/apps/web/app/onboarding/onboarding-background.tsx
+++ b/apps/web/app/onboarding/onboarding-background.tsx
@@ -17,7 +17,7 @@ export function OnboardingBackground({ children }: OnboardingBackgroundProps) {
 		currentZoomStepIndex >= 0 ? 1.0 + currentZoomStepIndex * 0.1 : 1.0
 
 	return (
-		<div className="min-h-screen w-full overflow-x-hidden text-zinc-900 flex items-center justify-center relative">
+		<div className="min-h-screen w-full overflow-x-hidden text-zinc-900 flex items-center justify-center relative px-4 md:px-0">
 			<div
 				className="absolute inset-0 transition-transform duration-700 ease-in-out"
 				style={{
@@ -26,10 +26,9 @@ export function OnboardingBackground({ children }: OnboardingBackgroundProps) {
 					backgroundPosition: "bottom",
 					backgroundRepeat: "no-repeat",
 					transform: `scale(${zoomScale})`,
-					transformOrigin: "center bottom",
 				}}
 			/>
-			<div className="relative z-10">{children}</div>
+			<div className="relative z-10 w-full max-w-4xl mx-auto">{children}</div>
 		</div>
 	)
 }
diff --git a/apps/web/app/onboarding/onboarding-form.tsx b/apps/web/app/onboarding/onboarding-form.tsx
index 520a2691..b943e5f4 100644
--- a/apps/web/app/onboarding/onboarding-form.tsx
+++ b/apps/web/app/onboarding/onboarding-form.tsx
@@ -22,7 +22,7 @@ export function OnboardingForm() {
 	return (
 		<div
 			className={cn(
-				"text-4xl px-6 py-8 flex flex-col justify-center max-sm:w-full",
+				"text-2xl md:text-4xl px-4 md:px-6 py-6 md:py-8 flex flex-col justify-center w-full max-w-4xl mx-auto",
 				sans.variable,
 			)}
 		>
diff --git a/apps/web/app/onboarding/welcome.tsx b/apps/web/app/onboarding/welcome.tsx
index 93313f7a..a236037c 100644
--- a/apps/web/app/onboarding/welcome.tsx
+++ b/apps/web/app/onboarding/welcome.tsx
@@ -14,16 +14,18 @@ export function Welcome() {
 	}
 
 	return (
-		<div className="flex flex-col gap-4 items-center text-center">
-			<h1 className="text-white font-medium">Welcome to Supermemory</h1>
-			<p className="text-white/80 text-2xl">
+		<div className="flex flex-col gap-4 items-center text-center w-full">
+			<h1 className="text-white font-medium text-2xl md:text-4xl">
+				Welcome to Supermemory
+			</h1>
+			<p className="text-white/80 text-lg md:text-2xl">
 				We're excited to have you on board.
 			</p>
 
 			<button
 				type="button"
 				onClick={handleGetStarted}
-				className="tracking-normal w-fit flex items-center justify-center text-2xl underline cursor-pointer font-medium text-white/80 hover:text-white transition-colors"
+				className="tracking-normal w-fit flex items-center justify-center text-lg md:text-2xl underline cursor-pointer font-medium text-white/80 hover:text-white transition-colors"
 			>
 				Get started
 				<ArrowRightIcon className="size-4 ml-2" />
diff --git a/apps/web/components/chat-input.tsx b/apps/web/components/chat-input.tsx
index c5fd0c5c..38f89815 100644
--- a/apps/web/components/chat-input.tsx
+++ b/apps/web/components/chat-input.tsx
@@ -1,20 +1,44 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { generateId } from "@lib/generate-id"
 import { usePersistentChat } from "@/stores/chat"
 import { ArrowUp } from "lucide-react"
 import { Button } from "@ui/components/button"
 import { ProjectSelector } from "./project-selector"
+import { ModelSelector } from "./model-selector"
 import { useAuth } from "@lib/auth-context"
 
 export function ChatInput() {
 	const [message, setMessage] = useState("")
+	const [selectedModel, setSelectedModel] = useState<
+		"gpt-5" | "claude-sonnet-4.5" | "gemini-2.5-pro"
+	>("gemini-2.5-pro")
 	const router = useRouter()
 	const { setCurrentChatId } = usePersistentChat()
 	const { user } = useAuth()
 
+	useEffect(() => {
+		const savedModel = localStorage.getItem("selectedModel") as
+			| "gpt-5"
+			| "claude-sonnet-4.5"
+			| "gemini-2.5-pro"
+		if (
+			savedModel &&
+			["gpt-5", "claude-sonnet-4.5", "gemini-2.5-pro"].includes(savedModel)
+		) {
+			setSelectedModel(savedModel)
+		}
+	}, [])
+
+	const handleModelChange = (
+		modelId: "gpt-5" | "claude-sonnet-4.5" | "gemini-2.5-pro",
+	) => {
+		setSelectedModel(modelId)
+		localStorage.setItem("selectedModel", modelId)
+	}
+
 	const handleSend = () => {
 		if (!message.trim()) return
 
@@ -22,8 +46,8 @@ export function ChatInput() {
 
 		setCurrentChatId(newChatId)
 
-		// Store the initial message in sessionStorage for the chat page to pick up
 		sessionStorage.setItem(`chat-initial-${newChatId}`, message.trim())
+		sessionStorage.setItem(`chat-model-${newChatId}`, selectedModel)
 
 		router.push(`/chat/${newChatId}`)
 
@@ -62,17 +86,23 @@ export function ChatInput() {
 							className="w-full text-foreground placeholder-muted-foreground rounded-md outline-none resize-none text-base leading-relaxed px-6 py-4 bg-transparent"
 							rows={2}
 						/>
-						<div className="flex items-center gap-2 w-full justify-between bg-accent py-2 px-3 rounded-b-[14px]">
+						<div className="flex items-center gap-2 w-full justify-between py-2 px-3 rounded-b-[14px]">
 							<ProjectSelector />
-							<Button
-								onClick={handleSend}
-								disabled={!message.trim()}
-								className="text-primary-foreground border-0 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed !bg-primary h-8 w-8"
-								variant="outline"
-								size="icon"
-							>
-								<ArrowUp className="size-3.5" />
-							</Button>
+							<div className="flex items-center gap-2">
+								<ModelSelector
+									selectedModel={selectedModel}
+									onModelChange={handleModelChange}
+								/>
+								<Button
+									onClick={handleSend}
+									disabled={!message.trim()}
+									className="text-primary-foreground border-0 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed !bg-primary h-8 w-8"
+									variant="outline"
+									size="icon"
+								>
+									<ArrowUp className="size-3.5" />
+								</Button>
+							</div>
 						</div>
 					</form>
 				</div>
diff --git a/apps/web/components/chrome-extension-button.tsx b/apps/web/components/chrome-extension-button.tsx
index 5fd58cac..3f7510e3 100644
--- a/apps/web/components/chrome-extension-button.tsx
+++ b/apps/web/components/chrome-extension-button.tsx
@@ -14,17 +14,23 @@ import { useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import Image from "next/image"
 import { analytics } from "@/lib/analytics"
+import { useIsMobile } from "@hooks/use-mobile"
 
 export function ChromeExtensionButton() {
 	const [isExtensionInstalled, setIsExtensionInstalled] = useState(false)
 	const [isChecking, setIsChecking] = useState(true)
 	const [isDismissed, setIsDismissed] = useState(false)
 	const [isMinimized, setIsMinimized] = useState(false)
+	const isMobile = useIsMobile()
 
 	useEffect(() => {
 		const dismissed =
 			localStorage.getItem("chrome-extension-dismissed") === "true"
+		const minimized =
+			localStorage.getItem("chrome-extension-minimized") === "true"
+
 		setIsDismissed(dismissed)
+		setIsMinimized(minimized)
 
 		const checkExtension = () => {
 			const message = { action: "check-extension" }
@@ -33,9 +39,10 @@ export function ChromeExtensionButton() {
 				setIsExtensionInstalled(false)
 				setIsChecking(false)
 				// Auto-minimize after 3 seconds if extension is not installed and not dismissed
-				if (!dismissed) {
+				if (!dismissed && !minimized) {
 					setTimeout(() => {
 						setIsMinimized(true)
+						localStorage.setItem("chrome-extension-minimized", "true")
 					}, 3000)
 				}
 			}, 1000)
@@ -77,11 +84,12 @@ export function ChromeExtensionButton() {
 
 	const handleDismiss = () => {
 		localStorage.setItem("chrome-extension-dismissed", "true")
+		localStorage.removeItem("chrome-extension-minimized")
 		setIsDismissed(true)
 	}
 
-	// Don't show if extension is installed, checking, or dismissed
-	if (isExtensionInstalled || isChecking || isDismissed) {
+	// Don't show if extension is installed, checking, dismissed, or on mobile
+	if (isExtensionInstalled || isChecking || isDismissed || isMobile) {
 		return null
 	}
 
@@ -130,42 +138,42 @@ export function ChromeExtensionButton() {
 
 						<div className="px-6 py-2 pb-4 space-y-4">
 							<div className="flex items-start gap-3">
-								<div className="w-10 h-10 bg-blue-50 border border-blue-200 rounded-lg flex items-center justify-center flex-shrink-0">
-									<TwitterIcon className="fill-blue-500 text-blue-500" />
+								<div className="w-10 h-10 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg flex items-center justify-center flex-shrink-0">
+									<TwitterIcon className="fill-blue-500 dark:fill-blue-400 text-blue-500 dark:text-blue-400" />
 								</div>
 								<div>
-									<h3 className="font-semibold text-sm text-gray-800">
+									<h3 className="font-semibold text-sm text-foreground">
 										Twitter Imports
 									</h3>
-									<p className="text-xs text-gray-600">
+									<p className="text-xs text-muted-foreground">
 										Import your twitter timeline & save tweets.
 									</p>
 								</div>
 							</div>
 
 							<div className="flex items-start gap-3">
-								<div className="w-10 h-10 bg-orange-50 border border-orange-200 rounded-lg flex items-center justify-center flex-shrink-0">
-									<Bookmark className="w-5 h-5 text-orange-600" />
+								<div className="w-10 h-10 bg-orange-50 dark:bg-orange-950 border border-orange-200 dark:border-orange-800 rounded-lg flex items-center justify-center flex-shrink-0">
+									<Bookmark className="w-5 h-5 text-orange-600 dark:text-orange-400" />
 								</div>
 								<div>
-									<h3 className="font-semibold text-sm text-gray-800">
+									<h3 className="font-semibold text-sm text-foreground">
 										Save All Bookmarks
 									</h3>
-									<p className="text-xs text-gray-600">
+									<p className="text-xs text-muted-foreground">
 										Instantly save any webpage to your memory.
 									</p>
 								</div>
 							</div>
 
 							<div className="flex items-start gap-3">
-								<div className="w-10 h-10 bg-green-50 border border-green-200 rounded-lg flex items-center justify-center flex-shrink-0">
-									<Zap className="w-5 h-5 text-green-600" />
+								<div className="w-10 h-10 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg flex items-center justify-center flex-shrink-0">
+									<Zap className="w-5 h-5 text-green-600 dark:text-green-400" />
 								</div>
 								<div>
-									<h3 className="font-semibold text-sm text-gray-800">
+									<h3 className="font-semibold text-sm text-foreground">
 										Charge Empty Memory
 									</h3>
-									<p className="text-xs text-gray-600">
+									<p className="text-xs text-muted-foreground">
 										Automatically capture & organize your browsing history.
 									</p>
 								</div>
@@ -175,7 +183,7 @@ export function ChromeExtensionButton() {
 						<div className="px-6 pb-4">
 							<Button
 								onClick={handleInstall}
-								className="w-full bg-white border border-[#686CFD] text-gray-800 hover:bg-gray-50 font-semibold rounded-lg h-10 flex items-center justify-center gap-3"
+								className="w-full bg-background border border-primary text-foreground hover:bg-accent font-semibold rounded-lg h-10 flex items-center justify-center gap-3"
 							>
 								<div className="w-6 h-6 bg-[#686CFD] rounded-full flex items-center justify-center">
 									<Image
@@ -189,7 +197,7 @@ export function ChromeExtensionButton() {
 							</Button>
 						</div>
 
-						<div className="px-6 pb-4 flex items-center justify-center gap-6 text-xs text-gray-500">
+						<div className="px-6 pb-4 flex items-center justify-center gap-6 text-xs text-muted-foreground">
 							<div className="flex items-center gap-1">
 								<Users className="w-3 h-3" />
 								<span>4K+ users</span>
diff --git a/apps/web/components/content-cards/website.tsx b/apps/web/components/content-cards/website.tsx
index b3ee7df6..f0e614c9 100644
--- a/apps/web/components/content-cards/website.tsx
+++ b/apps/web/components/content-cards/website.tsx
@@ -25,6 +25,7 @@ interface WebsiteCardProps {
 	description?: string
 	className?: string
 	onClick?: () => void
+	onOpenDetails?: () => void
 	onDelete?: () => void
 	showExternalLink?: boolean
 }
@@ -36,6 +37,7 @@ export const WebsiteCard = ({
 	description,
 	className,
 	onClick,
+	onOpenDetails,
 	onDelete,
 	showExternalLink = true,
 }: WebsiteCardProps) => {
@@ -44,6 +46,8 @@ export const WebsiteCard = ({
 	const handleCardClick = () => {
 		if (onClick) {
 			onClick()
+		} else if (onOpenDetails) {
+			onOpenDetails()
 		} else {
 			window.open(url, "_blank", "noopener,noreferrer")
 		}
diff --git a/apps/web/components/create-project-dialog.tsx b/apps/web/components/create-project-dialog.tsx
index 9a65b894..468a07d2 100644
--- a/apps/web/components/create-project-dialog.tsx
+++ b/apps/web/components/create-project-dialog.tsx
@@ -10,7 +10,6 @@ import {
 	DialogTitle,
 } from "@repo/ui/components/dialog"
 import { Input } from "@repo/ui/components/input"
-import { Label } from "@repo/ui/components/label"
 import { Loader2 } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import { useState } from "react"
@@ -47,7 +46,7 @@ export function CreateProjectDialog({
 		<AnimatePresence>
 			{open && (
 				<Dialog onOpenChange={onOpenChange} open={open}>
-					<DialogContent className="sm:max-w-2xl bg-[#0f1419] backdrop-blur-xl border-white/10 text-white">
+					<DialogContent className="sm:max-w-2xl backdrop-blur-xl">
 						<motion.div
 							animate={{ opacity: 1, scale: 1 }}
 							exit={{ opacity: 0, scale: 0.95 }}
@@ -55,7 +54,7 @@ export function CreateProjectDialog({
 						>
 							<DialogHeader>
 								<DialogTitle>Create New Project</DialogTitle>
-								<DialogDescription className="text-white/60">
+								<DialogDescription>
 									Give your project a unique name
 								</DialogDescription>
 							</DialogHeader>
@@ -66,9 +65,7 @@ export function CreateProjectDialog({
 									initial={{ opacity: 0, y: 10 }}
 									transition={{ delay: 0.1 }}
 								>
-									<Label htmlFor="projectName">Project Name</Label>
 									<Input
-										className="bg-white/5 border-white/10 text-white"
 										id="projectName"
 										onChange={(e) => setProjectName(e.target.value)}
 										onKeyDown={(e) => {
@@ -79,47 +76,31 @@ export function CreateProjectDialog({
 										placeholder="My Awesome Project"
 										value={projectName}
 									/>
-									<p className="text-xs text-white/50">
+									<p className="text-xs">
 										This will help you organize your memories
 									</p>
 								</motion.div>
 							</div>
 							<DialogFooter>
-								<motion.div
-									whileHover={{ scale: 1.05 }}
-									whileTap={{ scale: 0.95 }}
+								<Button onClick={handleClose} type="button" variant="outline">
+									Cancel
+								</Button>
+								<Button
+									disabled={
+										createProjectMutation.isPending || !projectName.trim()
+									}
+									onClick={handleCreate}
+									type="button"
 								>
-									<Button
-										className="bg-white/5 hover:bg-white/10 border-white/10 text-white"
-										onClick={handleClose}
-										type="button"
-										variant="outline"
-									>
-										Cancel
-									</Button>
-								</motion.div>
-								<motion.div
-									whileHover={{ scale: 1.05 }}
-									whileTap={{ scale: 0.95 }}
-								>
-									<Button
-										className="bg-white/10 hover:bg-white/20 text-white border-white/20"
-										disabled={
-											createProjectMutation.isPending || !projectName.trim()
-										}
-										onClick={handleCreate}
-										type="button"
-									>
-										{createProjectMutation.isPending ? (
-											<>
-												<Loader2 className="h-4 w-4 animate-spin mr-2" />
-												Creating...
-											</>
-										) : (
-											"Create Project"
-										)}
-									</Button>
-								</motion.div>
+									{createProjectMutation.isPending ? (
+										<>
+											<Loader2 className="h-4 w-4 animate-spin mr-2" />
+											Creating...
+										</>
+									) : (
+										"Create Project"
+									)}
+								</Button>
 							</DialogFooter>
 						</motion.div>
 					</DialogContent>
diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
index c055e94d..23fb5cf3 100644
--- a/apps/web/components/header.tsx
+++ b/apps/web/components/header.tsx
@@ -6,11 +6,14 @@ import {
 	Plus,
 	SunIcon,
 	MonitorIcon,
-	Network,
 	User,
 	CreditCard,
 	Chrome,
 	LogOut,
+	WaypointsIcon,
+	Gauge,
+	HistoryIcon,
+	Trash2,
 } from "lucide-react"
 import {
 	DropdownMenuContent,
@@ -21,21 +24,61 @@ import {
 import { DropdownMenuItem } from "@ui/components/dropdown-menu"
 import { DropdownMenu } from "@ui/components/dropdown-menu"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@ui/components/tooltip"
 import { useAuth } from "@lib/auth-context"
 import { ConnectAIModal } from "./connect-ai-modal"
 import { useTheme } from "next-themes"
-import { cn } from "@lib/utils"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import { MCPIcon } from "./menu"
 import { authClient } from "@lib/auth"
 import { analytics } from "@/lib/analytics"
-import { useGraphModal } from "@/stores"
+import { useGraphModal, usePersistentChat, useProject } from "@/stores"
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@ui/components/dialog"
+import { ScrollArea } from "@ui/components/scroll-area"
+import { formatDistanceToNow } from "date-fns"
+import { cn } from "@lib/utils"
+import { useMemo, useState } from "react"
 
 export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 	const { user } = useAuth()
 	const { theme, setTheme } = useTheme()
 	const router = useRouter()
 	const { setIsOpen: setGraphModalOpen } = useGraphModal()
+	const {
+		getCurrentChat,
+		conversations,
+		currentChatId,
+		setCurrentChatId,
+		deleteConversation,
+	} = usePersistentChat()
+	const { selectedProject } = useProject()
+	const pathname = usePathname()
+	const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+	const sorted = useMemo(() => {
+		return [...conversations].sort((a, b) =>
+			a.lastUpdated < b.lastUpdated ? 1 : -1,
+		)
+	}, [conversations])
+
+	function handleNewChat() {
+		analytics.newChatStarted()
+		const newId = crypto.randomUUID()
+		setCurrentChatId(newId)
+		router.push(`/chat/${newId}`)
+		setIsDialogOpen(false)
+	}
+
+	function formatRelativeTime(isoString: string): string {
+		return formatDistanceToNow(new Date(isoString), { addSuffix: true })
+	}
 
 	const handleSignOut = () => {
 		analytics.userSignedOut()
@@ -46,20 +89,31 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 	return (
 		<div className="flex items-center justify-between w-full p-3 md:p-4">
 			<div className="flex items-center gap-2 md:gap-3 justify-between w-full">
-				<Link
-					className="pointer-events-auto"
-					href={
-						process.env.NODE_ENV === "development"
-							? "http://localhost:3000"
-							: "https://app.supermemory.ai"
-					}
-					rel="noopener noreferrer"
-				>
-					<LogoFull className="h-8 hidden md:block" />
-					<Logo className="h-8 md:hidden" />
-				</Link>
+				<div className="flex items-center gap-1.5 md:gap-2">
+					<Link
+						className="pointer-events-auto"
+						href={
+							process.env.NODE_ENV === "development"
+								? "http://localhost:3000"
+								: "https://app.supermemory.ai"
+						}
+						rel="noopener noreferrer"
+					>
+						{getCurrentChat()?.title && pathname.includes("/chat") ? (
+							<div className="flex items-center gap-4">
+								<Logo className="h-6 block text-foreground" />
+								<span className="truncate">{getCurrentChat()?.title}</span>
+							</div>
+						) : (
+							<>
+								<LogoFull className="h-8 hidden md:block" />
+								<Logo className="h-8 md:hidden text-foreground" />
+							</>
+						)}
+					</Link>
+				</div>
 
-				<div className="flex items-center gap-1.5 md:gap-3">
+				<div className="flex items-center gap-1.5 md:gap-2">
 					<Button
 						variant="secondary"
 						size="sm"
@@ -72,20 +126,131 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 							c
 						</span>
 					</Button>
-					<Button
-						variant="ghost"
-						size="sm"
-						onClick={() => setGraphModalOpen(true)}
-						className="gap-1.5"
+					<Dialog
+						open={isDialogOpen}
+						onOpenChange={(open) => {
+							setIsDialogOpen(open)
+							if (open) {
+								analytics.chatHistoryViewed()
+							}
+						}}
 					>
-						<Network className="h-4 w-4" />
-						<span className="hidden sm:inline">Graph View</span>
-					</Button>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<DialogTrigger asChild>
+									<Button variant="ghost" size="sm">
+										<HistoryIcon className="h-4 w-4" />
+									</Button>
+								</DialogTrigger>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>Chat History</p>
+							</TooltipContent>
+						</Tooltip>
+						<DialogContent className="sm:max-w-lg">
+							<DialogHeader className="pb-4 border-b rounded-t-lg">
+								<DialogTitle className="">Conversations</DialogTitle>
+								<DialogDescription>
+									Project{" "}
+									<span className="font-mono font-medium">
+										{selectedProject}
+									</span>
+								</DialogDescription>
+							</DialogHeader>
+
+							<ScrollArea className="max-h-96">
+								<div className="flex flex-col gap-1">
+									{sorted.map((c) => {
+										const isActive = c.id === currentChatId
+										return (
+											<button
+												key={c.id}
+												type="button"
+												onClick={() => {
+													setCurrentChatId(c.id)
+													router.push(`/chat/${c.id}`)
+													setIsDialogOpen(false)
+												}}
+												className={cn(
+													"flex items-center justify-between rounded-md px-3 py-2 outline-none w-full text-left",
+													"transition-colors",
+													isActive ? "bg-primary/10" : "hover:bg-muted",
+												)}
+												aria-current={isActive ? "true" : undefined}
+											>
+												<div className="min-w-0">
+													<div className="flex items-center gap-2">
+														<span
+															className={cn(
+																"text-sm font-medium truncate",
+																isActive ? "text-foreground" : undefined,
+															)}
+														>
+															{c.title || "Untitled Chat"}
+														</span>
+													</div>
+													<div className="text-xs text-muted-foreground">
+														Last updated {formatRelativeTime(c.lastUpdated)}
+													</div>
+												</div>
+												<Button
+													type="button"
+													variant="ghost"
+													size="icon"
+													onClick={(e) => {
+														e.stopPropagation()
+														analytics.chatDeleted()
+														deleteConversation(c.id)
+													}}
+													aria-label="Delete conversation"
+												>
+													<Trash2 className="size-4 text-muted-foreground" />
+												</Button>
+											</button>
+										)
+									})}
+									{sorted.length === 0 && (
+										<div className="text-xs text-muted-foreground px-3 py-2">
+											No conversations yet
+										</div>
+									)}
+								</div>
+							</ScrollArea>
+							<Button
+								variant="outline"
+								size="lg"
+								className="w-full border-dashed"
+								onClick={handleNewChat}
+							>
+								<Plus className="size-4 mr-1" /> New Conversation
+							</Button>
+						</DialogContent>
+					</Dialog>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="sm"
+								onClick={() => setGraphModalOpen(true)}
+							>
+								<WaypointsIcon className="h-5 w-5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>Graph View</p>
+						</TooltipContent>
+					</Tooltip>
 					<ConnectAIModal>
-						<Button variant="ghost" size="sm" className="gap-1.5">
-							<MCPIcon className="h-4 w-4" />
-							<span className="hidden lg:inline">Connect to AI (MCP)</span>
-						</Button>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="sm" className="gap-1.5">
+									<MCPIcon className="h-4 w-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>Connect to AI (MCP)</p>
+							</TooltipContent>
+						</Tooltip>
 					</ConnectAIModal>
 					<DropdownMenu>
 						<DropdownMenuTrigger>
@@ -103,15 +268,21 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 							</DropdownMenuLabel>
 							<DropdownMenuSeparator />
 							<DropdownMenuItem onClick={() => router.push("/settings")}>
-								<User className="h-4 w-4 mr-2" />
+								<User className="h-4 w-4" />
 								Profile
 							</DropdownMenuItem>
 							<DropdownMenuItem
 								onClick={() => router.push("/settings/billing")}
 							>
-								<CreditCard className="h-4 w-4 mr-2" />
+								<CreditCard className="h-4 w-4" />
 								Billing
 							</DropdownMenuItem>
+							<DropdownMenuItem
+								onClick={() => router.push("/settings/integrations")}
+							>
+								<Gauge className="h-4 w-4" />
+								Integrations
+							</DropdownMenuItem>
 							<DropdownMenuItem
 								onClick={() => {
 									window.open(
@@ -121,7 +292,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 									)
 								}}
 							>
-								<Chrome className="h-4 w-4 mr-2" />
+								<Chrome className="h-4 w-4" />
 								Chrome Extension
 							</DropdownMenuItem>
 							<DropdownMenuItem
@@ -142,7 +313,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 										<MonitorIcon
 											className={cn(
 												theme === "system"
-													? "text-primay-foreground"
+													? "text-primary-foreground"
 													: "text-muted-foreground",
 												"h-3 w-3 group-hover:text-foreground",
 											)}
@@ -160,7 +331,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 										<SunIcon
 											className={cn(
 												theme === "light"
-													? "text-primay-foreground"
+													? "text-primary-foreground"
 													: "text-muted-foreground",
 												"h-3 w-3 group-hover:text-foreground",
 											)}
@@ -178,7 +349,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 										<MoonIcon
 											className={cn(
 												theme === "dark"
-													? "text-primay-foreground"
+													? "text-primary-foreground"
 													: "text-muted-foreground",
 												"h-3 w-3 group-hover:text-foreground",
 											)}
@@ -188,7 +359,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 							</DropdownMenuItem>
 							<DropdownMenuSeparator />
 							<DropdownMenuItem onClick={() => handleSignOut()}>
-								<LogOut className="h-4 w-4 mr-2" />
+								<LogOut className="h-4 w-4" />
 								Logout
 							</DropdownMenuItem>
 						</DropdownMenuContent>
diff --git a/apps/web/components/masonry-memory-list.tsx b/apps/web/components/masonry-memory-list.tsx
index 93326e49..0511a061 100644
--- a/apps/web/components/masonry-memory-list.tsx
+++ b/apps/web/components/masonry-memory-list.tsx
@@ -89,6 +89,7 @@ const DocumentCard = memo(
 					url={document.url}
 					title={document.title || "Untitled Document"}
 					image={document.ogImage}
+					onOpenDetails={() => onOpenDetails(document)}
 					onDelete={() => onDelete(document)}
 				/>
 			)
diff --git a/apps/web/components/memories-utils/memory-detail.tsx b/apps/web/components/memories-utils/memory-detail.tsx
index 8f238731..378d3f79 100644
--- a/apps/web/components/memories-utils/memory-detail.tsx
+++ b/apps/web/components/memories-utils/memory-detail.tsx
@@ -28,6 +28,7 @@ import type { z } from "zod"
 import { formatDate, getSourceUrl } from "."
 import { Label1Regular } from "@ui/text/label/label-1-regular"
 import { HTMLContentRenderer } from "./html-content-renderer"
+import { Button } from "@ui/components/button"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -141,11 +142,13 @@ export const MemoryDetail = memo(
 			TitleComponent: typeof DialogTitle | typeof DrawerTitle
 		}) => (
 			<div className="flex items-start justify-between gap-2">
-				<div className="flex items-start gap-2 md:gap-3 flex-1 min-w-0">
+				<div className="flex items-end gap-2 md:gap-3 flex-1 min-w-0">
 					<div className="p-1.5 md:p-2 rounded-lg bg-muted/10 flex-shrink-0">
 						{getDocumentIcon(
 							document.type,
 							"w-4 h-4 md:w-5 md:h-5 text-foreground",
+							document.source ?? undefined,
+							document.url ?? undefined,
 						)}
 					</div>
 					<div className="flex-1 min-w-0">
@@ -156,25 +159,24 @@ export const MemoryDetail = memo(
 							<span>{formatDocumentType(document.type)}</span>
 							<span>•</span>
 							<span>{formatDate(document.createdAt)}</span>
-							{document.url && (
-								<>
-									<span>•</span>
-									<button
-										className="flex items-center gap-0.5 md:gap-1 transition-all hover:gap-1 md:hover:gap-2 text-primary hover:text-primary/80 whitespace-nowrap"
-										onClick={() => {
-											const sourceUrl = getSourceUrl(document)
-											window.open(sourceUrl ?? undefined, "_blank")
-										}}
-										type="button"
-									>
-										<span className="hidden sm:inline">View source</span>
-										<span className="sm:hidden">Source</span>
-										<ExternalLink className="w-2.5 h-2.5 md:w-3 md:h-3" />
-									</button>
-								</>
-							)}
 						</div>
 					</div>
+					{document.url && (
+						<div className="flex items-end">
+							<Button
+								onClick={() => {
+									const sourceUrl = getSourceUrl(document)
+									window.open(sourceUrl ?? undefined, "_blank")
+								}}
+								variant="secondary"
+								size="sm"
+							>
+								<span className="hidden sm:inline">visit source</span>
+								<span className="sm:hidden">Source</span>
+								<ExternalLink className="w-2.5 h-2.5 md:w-3 md:h-3" />
+							</Button>
+						</div>
+					)}
 				</div>
 			</div>
 		)
@@ -227,10 +229,10 @@ export const MemoryDetail = memo(
 			<div className="space-y-6">
 				{activeMemories.length > 0 && (
 					<div>
-						<div className="text-sm font-medium mb-2 flex items-start gap-2 py-2 text-muted-foreground">
+						<div className="text-sm font-medium flex items-start gap-2 pb-2 text-muted-foreground">
 							Active Memories ({activeMemories.length})
 						</div>
-						<div className="space-y-3">
+						<div className="space-y-3 max-h-[80vh] overflow-y-auto custom-scrollbar">
 							{activeMemories.map((memory) => (
 								<div key={memory.id}>
 									<MemoryDetailItem memory={memory} />
@@ -281,7 +283,7 @@ export const MemoryDetail = memo(
 										Content
 									</h4>
 								</div>
-								<div className="p-3 md:p-4">
+								<div className="p-3 md:p-4 m-4">
 									<ContentDisplaySection />
 								</div>
 							</div>
@@ -324,8 +326,8 @@ export const MemoryDetail = memo(
 
 					<div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
 						<div className="flex-1 flex flex-col h-full justify-between min-w-0">
-							<div className="p-2 px-3 md:px-4 overflow-y-auto custom-scrollbar transition-all duration-300">
-								<h3 className="font-medium text-[10px] md:text-xs text-muted-foreground uppercase pb-1 px-1">
+							<div className="p-2 px-3 md:pl-4 overflow-y-auto custom-scrollbar transition-all duration-300">
+								<h3 className="font-medium text-[10px] md:text-sm text-muted-foreground pb-2 px-1">
 									Content
 								</h3>
 								<ContentDisplaySection />
@@ -370,9 +372,9 @@ export const MemoryDetail = memo(
 							</div>
 						</div>
 
-						<div className="w-full lg:w-96 flex flex-col border-t lg:border-t-0 lg:border-l border-border">
+						<div className="w-full lg:w-96 flex flex-col border-t lg:border-t-0 border-border">
 							<div className="flex-1 flex flex-col">
-								<div className="flex-1 memory-dialog-scroll overflow-y-auto p-3 md:p-4">
+								<div className="flex-1 memory-dialog-scroll overflow-y-auto p-2 md:p-3">
 									<MemoryContent />
 								</div>
 							</div>
diff --git a/apps/web/components/memory-list-view.tsx b/apps/web/components/memory-list-view.tsx
index c2b4b0c8..02667147 100644
--- a/apps/web/components/memory-list-view.tsx
+++ b/apps/web/components/memory-list-view.tsx
@@ -294,10 +294,7 @@ export const MemoryListView = ({
 	// Always render with consistent structure
 	return (
 		<>
-			<div
-				className="h-full overflow-hidden relative pb-20"
-				ref={containerRef}
-			>
+			<div className="h-full overflow-hidden relative pb-20" ref={containerRef}>
 				{error ? (
 					<div className="h-full flex items-center justify-center p-4">
 						<div className="rounded-xl overflow-hidden">
diff --git a/apps/web/components/model-selector.tsx b/apps/web/components/model-selector.tsx
new file mode 100644
index 00000000..38b68f9f
--- /dev/null
+++ b/apps/web/components/model-selector.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@repo/ui/components/button"
+import { ChevronDown } from "lucide-react"
+import { motion } from "motion/react"
+
+const models = [
+	{
+		id: "gpt-5",
+		name: "GPT 5",
+		description: "OpenAI's latest model",
+	},
+	{
+		id: "claude-sonnet-4.5",
+		name: "Claude Sonnet 4.5",
+		description: "Anthropic's advanced model",
+	},
+	{
+		id: "gemini-2.5-pro",
+		name: "Gemini 2.5 Pro",
+		description: "Google's most capable model",
+	},
+] as const
+
+type ModelId = (typeof models)[number]["id"]
+
+interface ModelSelectorProps {
+	selectedModel?: ModelId
+	onModelChange?: (modelId: ModelId) => void
+	disabled?: boolean
+}
+
+export function ModelSelector({
+	selectedModel = "gemini-2.5-pro",
+	onModelChange,
+	disabled = false,
+}: ModelSelectorProps) {
+	const [isOpen, setIsOpen] = useState(false)
+
+	const currentModel = models.find((m) => m.id === selectedModel) || models[0]
+
+	const handleModelSelect = (modelId: ModelId) => {
+		onModelChange?.(modelId)
+		setIsOpen(false)
+	}
+
+	return (
+		<div className="relative">
+			<Button
+				variant="ghost"
+				className="flex items-center gap-1.5 px-2 py-1.5 rounded-md transition-colors"
+				onClick={() => !disabled && setIsOpen(!isOpen)}
+				disabled={disabled}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+				>
+					<title>Model Selector</title>
+					<g clip-path="url(#clip0_4418_9868)">
+						<path
+							d="M12.92 2.25984L19.43 5.76984C20.19 6.17984 20.19 7.34984 19.43 7.75984L12.92 11.2698C12.34 11.5798 11.66 11.5798 11.08 11.2698L4.57 7.75984C3.81 7.34984 3.81 6.17984 4.57 5.76984L11.08 2.25984C11.66 1.94984 12.34 1.94984 12.92 2.25984Z"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M3.61 10.1297L9.66 13.1597C10.41 13.5397 10.89 14.3097 10.89 15.1497V20.8697C10.89 21.6997 10.02 22.2297 9.28 21.8597L3.23 18.8297C2.48 18.4497 2 17.6797 2 16.8397V11.1197C2 10.2897 2.87 9.75968 3.61 10.1297Z"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M20.39 10.1297L14.34 13.1597C13.59 13.5397 13.11 14.3097 13.11 15.1497V20.8697C13.11 21.6997 13.98 22.2297 14.72 21.8597L20.77 18.8297C21.52 18.4497 22 17.6797 22 16.8397V11.1197C22 10.2897 21.13 9.75968 20.39 10.1297Z"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</g>
+					<defs>
+						<clipPath id="clip0_4418_9868">
+							<rect width="24" height="24" fill="white" />
+						</clipPath>
+					</defs>
+				</svg>
+				<span className="text-xs font-medium max-w-32 truncate">
+					{currentModel.name}
+				</span>
+				<motion.div
+					animate={{ rotate: isOpen ? 180 : 0 }}
+					transition={{ duration: 0.25 }}
+				>
+					<ChevronDown className="h-3 w-3" />
+				</motion.div>
+			</Button>
+
+			{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 top-full left-0 mt-1 w-64 bg-background/95 backdrop-blur-xl border border-border rounded-md shadow-xl z-50 overflow-hidden space-y-1">
+						<div className="p-1.5 space-y-1">
+							{models.map((model) => (
+								<button
+									key={model.id}
+									type="button"
+									className={`flex items-center p-1 px-2 rounded-md transition-colors cursor-pointer w-full text-left ${
+										selectedModel === model.id
+											? "bg-accent"
+											: "hover:bg-accent/50"
+									}`}
+									onClick={() => handleModelSelect(model.id)}
+									onKeyDown={(e) =>
+										e.key === "Enter" && handleModelSelect(model.id)
+									}
+								>
+									<div className="flex-1 min-w-0">
+										<div className="text-sm font-medium text-foreground">
+											{model.name}
+										</div>
+										<div className="text-xs text-muted-foreground truncate">
+											{model.description}
+										</div>
+									</div>
+								</button>
+							))}
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
diff --git a/apps/web/components/project-selector.tsx b/apps/web/components/project-selector.tsx
index 0682a641..a492783b 100644
--- a/apps/web/components/project-selector.tsx
+++ b/apps/web/components/project-selector.tsx
@@ -25,7 +25,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@repo/ui/components/select"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useQuery } from "@tanstack/react-query"
 import {
 	ChevronDown,
 	FolderIcon,
@@ -36,7 +36,6 @@ import {
 } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import { useState } from "react"
-import { toast } from "sonner"
 import { useProjectMutations } from "@/hooks/use-project-mutations"
 import { useProjectName } from "@/hooks/use-project-name"
 import { useProject } from "@/stores"
@@ -52,7 +51,6 @@ interface Project {
 }
 
 export function ProjectSelector() {
-	const queryClient = useQueryClient()
 	const [isOpen, setIsOpen] = useState(false)
 	const [showCreateDialog, setShowCreateDialog] = useState(false)
 	const { selectedProject } = useProject()
@@ -69,13 +67,6 @@ export function ProjectSelector() {
 		action: "move",
 		targetProjectId: DEFAULT_PROJECT_ID,
 	})
-	const [expDialog, setExpDialog] = useState<{
-		open: boolean
-		projectId: string
-	}>({
-		open: false,
-		projectId: "",
-	})
 
 	const { data: projects = [], isLoading } = useQuery({
 		queryKey: ["projects"],
@@ -91,30 +82,6 @@ export function ProjectSelector() {
 		staleTime: 30 * 1000,
 	})
 
-	const enableExperimentalMutation = useMutation({
-		mutationFn: async (projectId: string) => {
-			const response = await $fetch(
-				`@post/projects/${projectId}/enable-experimental`,
-			)
-			if (response.error) {
-				throw new Error(
-					response.error?.message || "Failed to enable experimental mode",
-				)
-			}
-			return response.data
-		},
-		onSuccess: () => {
-			toast.success("Experimental mode enabled for project")
-			queryClient.invalidateQueries({ queryKey: ["projects"] })
-			setExpDialog({ open: false, projectId: "" })
-		},
-		onError: (error) => {
-			toast.error("Failed to enable experimental mode", {
-				description: error instanceof Error ? error.message : "Unknown error",
-			})
-		},
-	})
-
 	const handleProjectSelect = (containerTag: string) => {
 		switchProject(containerTag)
 		setIsOpen(false)
@@ -138,7 +105,7 @@ export function ProjectSelector() {
 				</span>
 				<motion.div
 					animate={{ rotate: isOpen ? 180 : 0 }}
-					transition={{ duration: 0.15 }}
+					transition={{ duration: 0.25 }}
 				>
 					<ChevronDown className="h-3 w-3" />
 				</motion.div>
@@ -165,33 +132,30 @@ export function ProjectSelector() {
 							<div className="p-1.5 max-h-64 overflow-y-auto">
 								<Button
 									variant="ghost"
-									className={`flex items-center justify-between p-2 rounded-md transition-colors cursor-pointer ${
+									className={`flex items-center w-full justify-between p-2 rounded-md transition-colors cursor-pointer ${
 										selectedProject === DEFAULT_PROJECT_ID
 											? "bg-accent"
-											: "hover:bg-accent/50"
+											: "hover:bg-accent/20"
 									}`}
 									onClick={() => handleProjectSelect(DEFAULT_PROJECT_ID)}
 								>
 									<div className="flex items-center gap-2">
 										<FolderIcon className="h-3.5 w-3.5" />
-										<span className="text-xs font-medium">Default</span>
+										<span className="text-xs font-medium">Default Project</span>
 									</div>
 								</Button>
 
 								{/* User Projects */}
 								{projects
 									.filter((p: Project) => p.containerTag !== DEFAULT_PROJECT_ID)
-									.map((project: Project, index: number) => (
-										<motion.div
+									.map((project: Project) => (
+										<div
 											key={project.id}
 											className={`flex items-center justify-between p-2 rounded-md transition-colors group ${
 												selectedProject === project.containerTag
 													? "bg-accent"
 													: "hover:bg-accent/50"
 											}`}
-											initial={{ opacity: 0, x: -5 }}
-											animate={{ opacity: 1, x: 0 }}
-											transition={{ delay: index * 0.03 }}
 										>
 											<button
 												className="flex items-center gap-2 flex-1 cursor-pointer"
@@ -208,45 +172,18 @@ export function ProjectSelector() {
 											<div className="flex items-center gap-1">
 												<DropdownMenu>
 													<DropdownMenuTrigger asChild>
-														<motion.button
-															className="p-1 hover:bg-accent rounded transition-all"
+														<Button
+															variant="ghost"
+															size="icon"
+															className="h-6 w-6"
 															onClick={(e) => e.stopPropagation()}
-															whileHover={{ scale: 1.1 }}
-															whileTap={{ scale: 0.9 }}
 														>
 															<MoreHorizontal className="h-3 w-3" />
-														</motion.button>
+														</Button>
 													</DropdownMenuTrigger>
 													<DropdownMenuContent align="end">
-														{/* Show experimental toggle only if NOT experimental and NOT default project */}
-														{!project.isExperimental &&
-															project.containerTag !== DEFAULT_PROJECT_ID && (
-																<DropdownMenuItem
-																	className="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 cursor-pointer text-xs"
-																	onClick={(e) => {
-																		e.stopPropagation()
-																		setExpDialog({
-																			open: true,
-																			projectId: project.id,
-																		})
-																		setIsOpen(false)
-																	}}
-																>
-																	<div className="h-3 w-3 mr-2 rounded border border-blue-600 dark:border-blue-400" />
-																	Enable Experimental Mode
-																</DropdownMenuItem>
-															)}
-														{project.isExperimental && (
-															<DropdownMenuItem
-																className="text-blue-600/50 dark:text-blue-300/50 text-xs"
-																disabled
-															>
-																<div className="h-3 w-3 mr-2 rounded bg-blue-600 dark:bg-blue-400" />
-																Experimental Mode Active
-															</DropdownMenuItem>
-														)}
 														<DropdownMenuItem
-															className="text-red-600 dark:text-red-400 hover:text-red-500 dark:hover:text-red-300 cursor-pointer text-xs"
+															className="cursor-pointer text-xs hover:text-red-500"
 															onClick={(e) => {
 																e.stopPropagation()
 																setDeleteDialog({
@@ -262,13 +199,13 @@ export function ProjectSelector() {
 																setIsOpen(false)
 															}}
 														>
-															<Trash2 className="h-3 w-3 mr-2" />
+															<Trash2 className="h-3 w-3" />
 															Delete Project
 														</DropdownMenuItem>
 													</DropdownMenuContent>
 												</DropdownMenu>
 											</div>
-										</motion.div>
+										</div>
 									))}
 
 								<motion.div
@@ -489,82 +426,6 @@ export function ProjectSelector() {
 					</Dialog>
 				)}
 			</AnimatePresence>
-
-			{/* Experimental Mode Confirmation Dialog */}
-			<AnimatePresence>
-				{expDialog.open && (
-					<Dialog
-						onOpenChange={(open) => setExpDialog({ ...expDialog, open })}
-						open={expDialog.open}
-					>
-						<DialogContent className="sm:max-w-lg">
-							<motion.div
-								animate={{ opacity: 1, scale: 1 }}
-								className="flex flex-col gap-4"
-								exit={{ opacity: 0, scale: 0.95 }}
-								initial={{ opacity: 0, scale: 0.95 }}
-							>
-								<DialogHeader>
-									<DialogTitle>Enable Experimental Mode?</DialogTitle>
-									<DialogDescription>
-										Experimental mode enables beta features and advanced memory
-										relationships for this project.
-										<br />
-										<br />
-										<span className="text-yellow-600 dark:text-yellow-400 font-medium">
-											Warning:
-										</span>{" "}
-										This action is{" "}
-										<span className="text-red-600 dark:text-red-400 font-bold">
-											irreversible
-										</span>
-										. Once enabled, you cannot return to regular mode for this
-										project.
-									</DialogDescription>
-								</DialogHeader>
-								<DialogFooter>
-									<motion.div
-										whileHover={{ scale: 1.05 }}
-										whileTap={{ scale: 0.95 }}
-									>
-										<Button
-											onClick={() =>
-												setExpDialog({ open: false, projectId: "" })
-											}
-											type="button"
-											variant="outline"
-										>
-											Cancel
-										</Button>
-									</motion.div>
-									<motion.div
-										whileHover={{ scale: 1.05 }}
-										whileTap={{ scale: 0.95 }}
-									>
-										<Button
-											className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white"
-											disabled={enableExperimentalMutation.isPending}
-											onClick={() =>
-												enableExperimentalMutation.mutate(expDialog.projectId)
-											}
-											type="button"
-										>
-											{enableExperimentalMutation.isPending ? (
-												<>
-													<Loader2 className="h-4 w-4 animate-spin mr-2" />
-													Enabling...
-												</>
-											) : (
-												"Enable Experimental Mode"
-											)}
-										</Button>
-									</motion.div>
-								</DialogFooter>
-							</motion.div>
-						</DialogContent>
-					</Dialog>
-				)}
-			</AnimatePresence>
 		</div>
 	)
 }
diff --git a/apps/web/components/views/add-memory/index.tsx b/apps/web/components/views/add-memory/index.tsx
index d9c6aef8..19e02df1 100644
--- a/apps/web/components/views/add-memory/index.tsx
+++ b/apps/web/components/views/add-memory/index.tsx
@@ -1021,7 +1021,6 @@ export function AddMemoryView({
 								>
 									<Label htmlFor="projectName">Project Name</Label>
 									<Input
-										className="bg-white/5 border-white/10"
 										id="projectName"
 										onChange={(e) => setNewProjectName(e.target.value)}
 										placeholder="My Awesome Project"
diff --git a/apps/web/components/views/chat/chat-messages.tsx b/apps/web/components/views/chat/chat-messages.tsx
index db0ae209..b281f7a8 100644
--- a/apps/web/components/views/chat/chat-messages.tsx
+++ b/apps/web/components/views/chat/chat-messages.tsx
@@ -10,7 +10,6 @@ import {
 	ChevronDown,
 	ChevronRight,
 	Copy,
-	Plus,
 	RotateCcw,
 	X,
 } from "lucide-react"
@@ -216,7 +215,19 @@ export function ChatMessages() {
 		getCurrentChat,
 	} = usePersistentChat()
 
+	const storageKey = `chat-model-${currentChatId}`
+
 	const [input, setInput] = useState("")
+	const [selectedModel, setSelectedModel] = useState<
+		"gpt-5" | "claude-sonnet-4.5" | "gemini-2.5-pro"
+	>(
+		(sessionStorage.getItem(storageKey) as
+			| "gpt-5"
+			| "claude-sonnet-4.5"
+			| "gemini-2.5-pro") ||
+			"gemini-2.5-pro" ||
+			"gemini-2.5-pro",
+	)
 	const activeChatIdRef = useRef<string | null>(null)
 	const shouldGenerateTitleRef = useRef<boolean>(false)
 	const hasRunInitialMessageRef = useRef<boolean>(false)
@@ -229,7 +240,12 @@ export function ChatMessages() {
 			transport: new DefaultChatTransport({
 				api: `${process.env.NEXT_PUBLIC_BACKEND_URL}/chat`,
 				credentials: "include",
-				body: { metadata: { projectId: selectedProject } },
+				body: {
+					metadata: {
+						projectId: selectedProject,
+						model: selectedModel,
+					},
+				},
 			}),
 			maxSteps: 2,
 			onFinish: (result) => {
@@ -254,6 +270,22 @@ export function ChatMessages() {
 		activeChatIdRef.current = currentChatId ?? id ?? null
 	}, [currentChatId, id])
 
+	useEffect(() => {
+		if (currentChatId) {
+			const savedModel = sessionStorage.getItem(storageKey) as
+				| "gpt-5"
+				| "claude-sonnet-4.5"
+				| "gemini-2.5-pro"
+
+			if (
+				savedModel &&
+				["gpt-5", "claude-sonnet-4.5", "gemini-2.5-pro"].includes(savedModel)
+			) {
+				setSelectedModel(savedModel)
+			}
+		}
+	}, [currentChatId])
+
 	useEffect(() => {
 		if (currentChatId && !hasRunInitialMessageRef.current) {
 			// Check if there's an initial message from the home page in sessionStorage
diff --git a/apps/web/components/views/profile.tsx b/apps/web/components/views/profile.tsx
index 5aa21231..cd4e6085 100644
--- a/apps/web/components/views/profile.tsx
+++ b/apps/web/components/views/profile.tsx
@@ -301,7 +301,7 @@ export function ProfileView() {
 										</div>
 									</h4>
 									<ul className="space-y-2">
-										<li className="flex items-center gap-2 text-sm text-black/90">
+										<li className="flex items-center gap-2 text-xs sm:text-sm text-foreground">
 											<CheckCircle className="h-4 w-4 text-green-400" />
 											Unlimited memories
 										</li>
diff --git a/apps/web/lib/document-icon.tsx b/apps/web/lib/document-icon.tsx
index a0f56e63..edeaf76b 100644
--- a/apps/web/lib/document-icon.tsx
+++ b/apps/web/lib/document-icon.tsx
@@ -1,59 +1,119 @@
-import { MCPIcon } from '@/components/menu';
-import { colors } from '@repo/ui/memory-graph/constants';
+import { MCPIcon } from "@/components/menu"
+import { colors } from "@repo/ui/memory-graph/constants"
 import {
-  GoogleDocs,
-  MicrosoftWord,
-  NotionDoc,
-  GoogleDrive,
-  GoogleSheets,
-  GoogleSlides,
-  PDF,
-  OneDrive,
-  MicrosoftOneNote,
-  MicrosoftPowerpoint,
-  MicrosoftExcel,
-} from '@ui/assets/icons';
-import { FileText } from 'lucide-react';
+	GoogleDocs,
+	MicrosoftWord,
+	NotionDoc,
+	GoogleDrive,
+	GoogleSheets,
+	GoogleSlides,
+	PDF,
+	OneDrive,
+	MicrosoftOneNote,
+	MicrosoftPowerpoint,
+	MicrosoftExcel,
+} from "@ui/assets/icons"
+import { FileText, Globe } from "lucide-react"
+import { useState } from "react"
 
-export const getDocumentIcon = (type: string, className: string, source?: string) => {
-  const iconProps = {
-    className,
-    style: { color: colors.text.muted },
-  };
+const getFaviconUrl = (url: string): string => {
+	try {
+		const domain = new URL(url).hostname
+		return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+	} catch {
+		return ""
+	}
+}
 
-  if(source === "mcp") {
-    return <MCPIcon {...iconProps} />;
-  }
+const FaviconIcon = ({
+	url,
+	className,
+	iconProps,
+}: {
+	url: string
+	className: string
+	iconProps: { className: string; style: { color: string } }
+}) => {
+	const [hasError, setHasError] = useState(false)
+	const faviconUrl = getFaviconUrl(url)
 
-  switch (type) {
-    case 'google_doc':
-      return <GoogleDocs {...iconProps} />;
-    case 'google_sheet':
-      return <GoogleSheets {...iconProps} />;
-    case 'google_slide':
-      return <GoogleSlides {...iconProps} />;
-    case 'google_drive':
-      return <GoogleDrive {...iconProps} />;
-    case 'notion':
-    case 'notion_doc':
-      return <NotionDoc {...iconProps} />;
-    case 'word':
-    case 'microsoft_word':
-      return <MicrosoftWord {...iconProps} />;
-    case 'excel':
-    case 'microsoft_excel':
-      return <MicrosoftExcel {...iconProps} />;
-    case 'powerpoint':
-    case 'microsoft_powerpoint':
-      return <MicrosoftPowerpoint {...iconProps} />;
-    case 'onenote':
-    case 'microsoft_onenote':
-      return <MicrosoftOneNote {...iconProps} />;
-    case 'onedrive':
-      return <OneDrive {...iconProps} />;
-    case 'pdf':
-      return <PDF {...iconProps} />;
-    default:
-      return <FileText {...iconProps} />;
-  }
-};
+	if (hasError || !faviconUrl) {
+		return <Globe {...iconProps} />
+	}
+
+	return (
+		<img
+			src={faviconUrl}
+			alt="Website favicon"
+			className={className}
+			style={{
+				width: "2em",
+				height: "2em",
+				objectFit: "contain",
+			}}
+			onError={() => setHasError(true)}
+		/>
+	)
+}
+
+export const getDocumentIcon = (
+	type: string,
+	className: string,
+	source?: string,
+	url?: string,
+) => {
+	const iconProps = {
+		className,
+		style: { color: colors.text.muted },
+	}
+
+	if (source === "mcp") {
+		return <MCPIcon {...iconProps} />
+	}
+
+	if (
+		type === "webpage" ||
+		type === "url" ||
+		(url && (type === "unknown" || !type))
+	) {
+		if (url) {
+			return (
+				<FaviconIcon url={url} className={className} iconProps={iconProps} />
+			)
+		}
+
+		return <Globe {...iconProps} />
+	}
+
+	switch (type) {
+		case "google_doc":
+			return <GoogleDocs {...iconProps} />
+		case "google_sheet":
+			return <GoogleSheets {...iconProps} />
+		case "google_slide":
+			return <GoogleSlides {...iconProps} />
+		case "google_drive":
+			return <GoogleDrive {...iconProps} />
+		case "notion":
+		case "notion_doc":
+			return <NotionDoc {...iconProps} />
+		case "word":
+		case "microsoft_word":
+			return <MicrosoftWord {...iconProps} />
+		case "excel":
+		case "microsoft_excel":
+			return <MicrosoftExcel {...iconProps} />
+		case "powerpoint":
+		case "microsoft_powerpoint":
+			return <MicrosoftPowerpoint {...iconProps} />
+		case "onenote":
+		case "microsoft_onenote":
+			return <MicrosoftOneNote {...iconProps} />
+		case "onedrive":
+			return <OneDrive {...iconProps} />
+		case "pdf":
+			return <PDF {...iconProps} />
+		default:
+			return <FileText {...iconProps} />
+	}
+}
diff --git a/packages/ui/assets/Logo.tsx b/packages/ui/assets/Logo.tsx
index 805687d7..bb8800c8 100644
--- a/packages/ui/assets/Logo.tsx
+++ b/packages/ui/assets/Logo.tsx
@@ -16,7 +16,7 @@ export const Logo = ({
 			<title>supermemory Logo</title>
 			<path
 				d="M205.864 66.263h-76.401V0h-24.684v71.897c0 7.636 3.021 14.97 8.391 20.373l62.383 62.777 17.454-17.564-46.076-46.365h58.948v-24.84l-.015-.015ZM12.872 30.517l46.075 46.365H0v24.84h76.4v66.264h24.685V96.089c0-7.637-3.021-14.97-8.39-20.374l-62.37-62.762-17.453 17.564Z"
-				fill="#EFEFEF"
+				fill="currentColor"
 			/>
 		</svg>
 	);
diff --git a/packages/ui/components/tooltip.tsx b/packages/ui/components/tooltip.tsx
index 32a78f06..daea283d 100644
--- a/packages/ui/components/tooltip.tsx
+++ b/packages/ui/components/tooltip.tsx
@@ -43,7 +43,7 @@ function TooltipContent({
 		<TooltipPrimitive.Portal>
 			<TooltipPrimitive.Content
 				className={cn(
-					"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					"bg-secondary text-secondary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
 					className,
 				)}
 				data-slot="tooltip-content"
@@ -51,7 +51,7 @@ function TooltipContent({
 				{...props}
 			>
 				{children}
-				<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-sm" />
+				<TooltipPrimitive.Arrow className="bg-secondary fill-secondary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-sm" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	);
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index c6c904c9..357e34b7 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -65,7 +65,7 @@
 	--destructive: oklch(0.6368 0.2078 25.3313);
 	--border: oklch(0.9366 0.0017 247.8401);
 	--input: oklch(0.9702 0 0);
-	--ring: oklch(1 0 0);
+	--ring: oklch(0 0 0);
 	--chart-1: oklch(0.7197 0.1448 266.6983);
 	--chart-2: oklch(0.8101 0.1488 148.2032);
 	--chart-3: oklch(0.7507 0.1353 58.4182);
@@ -125,7 +125,7 @@
 	--destructive: oklch(0.6368 0.2078 25.3313);
 	--border: oklch(0.3715 0 0);
 	--input: oklch(0.262 0.0074 285.8781);
-	--ring: oklch(0 0 0);
+	--ring: oklch(1 0 0);
 	--chart-1: oklch(0.7197 0.1448 266.6983);
 	--chart-2: oklch(0.8101 0.1488 148.2032);
 	--chart-3: oklch(0.7507 0.1353 58.4182);