diff --git a/apps/web/app/onboarding/setup/chat-sidebar.tsx b/apps/web/app/onboarding/setup/chat-sidebar.tsx
index a8adc2b8..973d31ae 100644
--- a/apps/web/app/onboarding/setup/chat-sidebar.tsx
+++ b/apps/web/app/onboarding/setup/chat-sidebar.tsx
@@ -307,18 +307,6 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 						Close chat
 					</motion.button>
 					<div className="flex-1 flex flex-col px-4 space-y-3 pb-4 justify-end">
-						{messages.length === 0 && !isLoading && !formData && (
-							<div className="flex items-center gap-2 text-white/50">
-								<NovaOrb size={28} className="!blur-none" />
-								<span className="text-sm">Waiting for your input</span>
-							</div>
-						)}
-						{isLoading && (
-							<div className="flex items-center gap-2 text-foreground/50">
-								<NovaOrb size={28} className="!blur-none" />
-								<span className="text-sm">Fetching your memories...</span>
-							</div>
-						)}
 						{messages.map((msg, i) => (
 							<div
 								key={`message-${i}-${msg.message}`}
@@ -386,6 +374,18 @@ export function ChatSidebar({ formData }: ChatSidebarProps) {
 								)}
 							</div>
 						))}
+						{messages.length === 0 && !isLoading && !formData && (
+							<div className="flex items-center gap-2 text-white/50">
+								<NovaOrb size={28} className="!blur-none" />
+								<span className="text-sm">Waiting for your input</span>
+							</div>
+						)}
+						{isLoading && (
+							<div className="flex items-center gap-2 text-foreground/50">
+								<NovaOrb size={28} className="!blur-none" />
+								<span className="text-sm">Fetching your memories...</span>
+							</div>
+						)}
 					</div>
 
 					<div className="p-4">
diff --git a/apps/web/app/onboarding/welcome/input-step.tsx b/apps/web/app/onboarding/welcome/input-step.tsx
index 08325b1e..ae567fdb 100644
--- a/apps/web/app/onboarding/welcome/input-step.tsx
+++ b/apps/web/app/onboarding/welcome/input-step.tsx
@@ -45,11 +45,11 @@ export function InputStep({
 			<h2 className="text-white text-3xl font-medium mb-2">
 				What should I call you?
 			</h2>
-			<div className="flex items-center space-x-3 w-full relative">
+			<div className="flex items-center w-full relative">
 				<LabeledInput
 					inputType="text"
 					inputPlaceholder="your name"
-					className="w-full flex-1 !h-11"
+					className="w-full flex-1"
 					inputProps={{
 						value: name,
 						onKeyDown: (e) => {
@@ -57,7 +57,7 @@ export function InputStep({
 								handleSubmit()
 							}
 						},
-						className: "!text-white placeholder:!text-white",
+						className: "!text-white placeholder:!text-[#525966] !h-10",
 					}}
 					onChange={(e) => setName((e.target as HTMLInputElement).value)}
 					style={{
@@ -66,7 +66,7 @@ export function InputStep({
 					}}
 				/>
 				<Button
-					className={`rounded-xl p-2 !bg-black absolute right-4 border-[0.5px] border-gray-800 hover:cursor-pointer hover:scale-[0.95] active:scale-[0.95] transition-transform ${
+					className={`rounded-[10px] size-8 p-2 !bg-black absolute right-1 border-[0.5px] border-gray-800 hover:cursor-pointer hover:scale-[0.95] active:scale-[0.95] transition-transform ${
 						isSubmitting ? "scale-[0.90]" : ""
 					}`}
 					size="icon"
diff --git a/apps/web/components/mcp-detail-view.tsx b/apps/web/components/mcp-detail-view.tsx
index 37bfd6ef..b911eddf 100644
--- a/apps/web/components/mcp-detail-view.tsx
+++ b/apps/web/components/mcp-detail-view.tsx
@@ -10,6 +10,7 @@ import {
 	SelectValue,
 } from "@ui/components/select"
 import { CircleCheckIcon, CopyIcon } from "lucide-react"
+import Image from "next/image"
 import { toast } from "sonner"
 import { analytics } from "@/lib/analytics"
 import { cn } from "@lib/utils"
@@ -39,6 +40,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 	const [selectedProject] = useState<string>("sm_project_default")
 	const [mcpUrlTab, setMcpUrlTab] = useState<"oneClick" | "manual">("oneClick")
 	const [isCopied, setIsCopied] = useState(false)
+	const [activeStep, setActiveStep] = useState<1 | 2 | 3>(1)
 
 	useEffect(() => {
 		analytics.mcpViewOpened()
@@ -60,6 +62,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 		navigator.clipboard.writeText(command)
 		analytics.mcpInstallCmdCopied()
 		toast.success("Copied to clipboard!")
+		setActiveStep(3)
 	}
 
 	return (
@@ -103,18 +106,31 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 				<div className="w-full max-w-2xl relative">
 					<div className="absolute left-4 top-0 w-[1px] h-full bg-[#1E293B] z-10" />
 					<div className="flex items-start space-x-4 z-20">
-						<div className="bg-[#161F2B] text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20">
-							1
+						<div className={cn(
+							"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20 bg-[#161F2B] text-white",
+						)} >
+							<span style={activeStep === 1 ? {
+								background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+								backgroundClip: "text",
+								WebkitBackgroundClip: "text",
+								WebkitTextFillColor: "transparent",
+							} : undefined}>1</span>
 						</div>
 						<div className="flex-1 mb-4">
 							<div className="flex gap-4 mb-4">
-								<h3 className="text-white text-lg font-medium">
+								<h3 className="text-white text-lg font-medium" style={activeStep === 1 ? {
+									background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+									backgroundClip: "text",
+									WebkitBackgroundClip: "text",
+									WebkitTextFillColor: "transparent",
+								} : undefined}>
 									Select your AI client
 								</h3>
 								{selectedClient && <Select
-									onValueChange={(value) =>
+									onValueChange={(value) => {
 										setSelectedClient(value as keyof typeof clients)
-									}
+										setActiveStep(2)
+									}}
 									value={selectedClient || undefined}
 								>
 									<SelectTrigger className="max-w-md rounded-full border-[#242A33] text-white hover:border-gray-600 !bg-transparent">
@@ -141,16 +157,47 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 										<button
 											key={key}
 											type="button"
-											onClick={() =>
+											onClick={() => {
 												setSelectedClient(key as keyof typeof clients)
-											}
-											className={`px-3 py-2 rounded-full border-2 transition-colors duration-200 ${
+												setActiveStep(2)
+											}}
+											className={`px-3 py-1 rounded-full border-1 transition-colors cursor-pointer duration-200 ${
 												selectedClient === key
 													? "border-blue-500 bg-blue-500/10"
 													: "border-[#0D121A] bg-[#080B0F] hover:border-gray-600"
 											}`}
 										>
 											<div className="flex items-center space-x-2">
+												<div className="w-5 h-5 flex items-center justify-center">
+													<Image
+														alt={clientName}
+														className="rounded object-contain"
+														height={20}
+														onError={(e) => {
+															const target = e.target as HTMLImageElement
+															target.style.display = "none"
+															const parent = target.parentElement
+															if (
+																parent &&
+																!parent.querySelector(".fallback-text")
+															) {
+																const fallback = document.createElement("span")
+																fallback.className =
+																	"fallback-text text-xs font-bold text-white"
+																fallback.textContent = clientName
+																	.substring(0, 2)
+																	.toUpperCase()
+																parent.appendChild(fallback)
+															}
+														}}
+														src={
+															key === "mcp-url"
+																? "/mcp-icon.svg"
+																: `/mcp-supported-tools/${key === "claude-code" ? "claude" : key}.png`
+														}
+														width={20}
+													/>
+												</div>
 												<span className="text-sm font-medium text-white">
 													{clientName}
 												</span>
@@ -166,11 +213,24 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 					</div>
 
 					<div className="flex items-start space-x-4">
-						<div className="bg-[#161F2B] text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20">
-							2
+						<div className={cn(
+							"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20 text-white bg-[#161F2B]",
+							""
+						)} >
+							<span style={activeStep === 2 ? {
+								background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+								backgroundClip: "text",
+								WebkitBackgroundClip: "text",
+								WebkitTextFillColor: "transparent",
+							} : undefined}>2</span>
 						</div>
 						<div className="flex-1 mb-4">
-							<h3 className="text-white text-lg font-medium mb-4">
+							<h3 className="text-white text-lg font-medium mb-4" style={activeStep === 2 ? {
+								background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+								backgroundClip: "text",
+								WebkitBackgroundClip: "text",
+								WebkitTextFillColor: "transparent",
+							} : undefined}>
 								Copy the installation command
 							</h3>
 							{selectedClient && (
@@ -225,6 +285,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 																)
 																analytics.mcpInstallCmdCopied()
 																toast.success("Copied to clipboard!")
+																setActiveStep(3)
 															}}
 														>
 															<CopyIcon className="size-4 text-gray-400 hover:text-white" />
@@ -270,6 +331,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 																analytics.mcpInstallCmdCopied()
 																toast.success("Copied to clipboard!")
 																setIsCopied(true)
+																setActiveStep(3)
 																setTimeout(() => setIsCopied(false), 2000)
 															}}
 														>
@@ -315,11 +377,24 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 					</div>
 
 					<div className="flex items-start space-x-4">
-						<div className="bg-[#161F2B] text-white rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20">
-							3
+						<div className={cn(
+							"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium flex-shrink-0 z-20",
+							"bg-[#161F2B] text-white"
+						)} >
+							<span style={activeStep === 3 ? {
+								background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+								backgroundClip: "text",
+								WebkitBackgroundClip: "text",
+								WebkitTextFillColor: "transparent",
+							} : undefined}>3</span>
 						</div>
 						<div className="flex-1">
-							<h3 className="text-white text-lg font-medium">
+							<h3 className="text-white text-lg font-medium" style={activeStep === 3 ? {
+								background: "linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+								backgroundClip: "text",
+								WebkitBackgroundClip: "text",
+								WebkitTextFillColor: "transparent",
+							} : undefined}>
 								Run command in your terminal
 							</h3>
 						</div>