diff --git a/apps/web/app/new/page.tsx b/apps/web/app/new/page.tsx
index e48db193..2758ff0d 100644
--- a/apps/web/app/new/page.tsx
+++ b/apps/web/app/new/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { Header } from "@/components/new/header"
-import { ChatSidebar } from "@/components/chat"
+import { ChatSidebar } from "@/components/new/chat"
 import { AnimatePresence } from "motion/react"
 import { MemoriesGrid } from "@/components/new/memories-grid"
 import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background"
@@ -9,7 +9,7 @@ import { AnimatedGradientBackground } from "@/components/new/animated-gradient-b
 export default function NewPage() {
 	return (
 		<div className="h-screen overflow-hidden bg-black">
-			<AnimatedGradientBackground topPosition="15%" />
+			<AnimatedGradientBackground topPosition="15%" animateFromBottom={false} />
 			<Header />
 			<main className="relative">
 				<div className="relative z-10">
diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
index 09e4a470..896c8bfd 100644
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -190,7 +190,7 @@ export default function OnboardingPage() {
 			)}
 			{isSetupFlow && <SetupHeader />}
 
-			{isSetupFlow && <AnimatedGradientBackground />}
+			{isSetupFlow && <AnimatedGradientBackground animateFromBottom={false} />}
 
 			{isWelcomeFlow && currentStep === "input" && (
 				<AnimatedGradientBackground animateFromBottom={true} />
diff --git a/apps/web/app/onboarding/setup/header.tsx b/apps/web/app/onboarding/setup/header.tsx
index 95121b06..4981c6aa 100644
--- a/apps/web/app/onboarding/setup/header.tsx
+++ b/apps/web/app/onboarding/setup/header.tsx
@@ -23,11 +23,11 @@ export function SetupHeader() {
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.6, ease: "easeOut" }}
 		>
-			<div className="flex items-center">
+			<div className="flex items-center z-10!">
 				<Logo className="h-7" />
 				{name && (
 					<div className="flex flex-col items-start justify-center ml-2">
-						<p className="text-[#8B8B8B] text-xs leading-tight">
+						<p className="text-[#8B8B8B] text-[11px] leading-tight">
 							{userName}
 						</p>
 						<p className="text-white font-bold text-xl leading-none -mt-1">
@@ -37,7 +37,7 @@ export function SetupHeader() {
 				)}
 			</div>
 			{user && (
-				<Avatar className="border border-border h-8 w-8 md:h-10 md:w-10">
+				<Avatar className="border border-border h-8 w-8 md:h-10 md:w-10 z-10!">
 					<AvatarImage src={user?.image ?? ""} />
 					<AvatarFallback>{user?.name?.charAt(0)}</AvatarFallback>
 				</Avatar>
diff --git a/apps/web/app/onboarding/setup/integrations-step.tsx b/apps/web/app/onboarding/setup/integrations-step.tsx
index df0ec69c..c9d67861 100644
--- a/apps/web/app/onboarding/setup/integrations-step.tsx
+++ b/apps/web/app/onboarding/setup/integrations-step.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { Button } from "@ui/components/button"
 import { MCPDetailView } from "@/components/mcp-detail-view"
-import { ChromeExtensionDetailView } from "@/components/chrome-extension-detail-view"
+import { XBookmarksDetailView } from "@/components/x-bookmarks-detail-view"
 import { useRouter } from "next/navigation"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/utils/fonts"
@@ -70,8 +70,8 @@ export function IntegrationsStep() {
 	if (selectedCard === "Connect to AI") {
 		return <MCPDetailView onBack={() => setSelectedCard(null)} />
 	}
-	if (selectedCard === "Capture") {
-		return <ChromeExtensionDetailView onBack={() => setSelectedCard(null)} />
+	if (selectedCard === "Import") {
+		return <XBookmarksDetailView onBack={() => setSelectedCard(null)} />
 	}
 	return (
 		<div className="flex flex-col items-center justify-center h-full p-8">
@@ -93,7 +93,9 @@ export function IntegrationsStep() {
 			<div className="grid grid-cols-2 gap-3 max-w-lg w-full mb-12">
 				{integrationCards.map((card) => {
 					const isClickable =
-						card.title === "Connect to AI" || card.title === "Capture"
+						card.title === "Connect to AI" ||
+						card.title === "Capture" ||
+						card.title === "Import"
 
 					if (isClickable) {
 						return (
@@ -104,7 +106,16 @@ export function IntegrationsStep() {
 									"bg-[#080B0F] relative rounded-lg p-3 hover:border-[#3374FF] hover:border-[0.1px] transition-colors duration-300 border-[0.1px] border-[#0D121A] cursor-pointer text-left w-full hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:175%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat",
 									"hover:border-b-0 border-b-0",
 								)}
-								onClick={() => setSelectedCard(card.title)}
+								onClick={() => {
+									if (card.title === "Capture") {
+										window.open(
+											"https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnpoaffkcankadgjfc",
+											"_blank",
+										)
+									} else {
+										setSelectedCard(card.title)
+									}
+								}}
 							>
 								<div className="flex-1 mt-10">
 									<h3 className="text-white text-sm font-medium">
@@ -127,7 +138,10 @@ export function IntegrationsStep() {
 					return (
 						<div
 							key={card.title}
-							className="bg-[#080B0F] relative rounded-lg p-3 hover:border-[#3374FF] hover:border-[0.1px] transition-colors duration-300 border-[0.1px] border-[#0D121A] hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:175%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat"
+							className={cn(
+								"bg-[#080B0F] relative rounded-lg p-3 hover:border-[#3374FF] hover:border-[0.1px] transition-colors duration-300 border-[0.1px] border-[#0D121A] hover:bg-[url('/onboarding/bg-gradient-1.png')] hover:bg-[length:175%_auto] hover:bg-[center_top_2rem] hover:bg-no-repeat",
+								"hover:border-b-0 border-b-0",
+							)}
 						>
 							<div className="flex-1 mt-10">
 								<h3 className="text-white text-sm font-medium">{card.title}</h3>
@@ -149,14 +163,14 @@ export function IntegrationsStep() {
 			<div className="flex justify-between w-full max-w-4xl">
 				<Button
 					variant="link"
-					className="text-white hover:text-gray-300"
+					className="text-white hover:text-gray-300 hover:no-underline cursor-pointer"
 					onClick={() => router.push("/onboarding?flow=setup&step=relatable")}
 				>
 					← Back
 				</Button>
 				<Button
 					variant="link"
-					className="text-white hover:text-gray-300"
+					className="text-white hover:text-gray-300 hover:no-underline cursor-pointer"
 					onClick={handleContinue}
 				>
 					Continue →
diff --git a/apps/web/app/onboarding/setup/relatable-question.tsx b/apps/web/app/onboarding/setup/relatable-question.tsx
index 5e65140e..5a2d344d 100644
--- a/apps/web/app/onboarding/setup/relatable-question.tsx
+++ b/apps/web/app/onboarding/setup/relatable-question.tsx
@@ -133,7 +133,7 @@ export function RelatableQuestion() {
 				<div key={selectedOptions.length === 0 ? "skip" : "continue"}>
 					<Button
 						className={cn(
-							"font-medium text-white hover:no-underline",
+							"font-medium text-white hover:no-underline cursor-pointer",
 							selectedOptions.length !== 0 ? "rounded-xl" : "",
 						)}
 						variant={selectedOptions.length !== 0 ? "onboarding" : "link"}
diff --git a/apps/web/app/onboarding/welcome/features-step.tsx b/apps/web/app/onboarding/welcome/features-step.tsx
index 01506cfd..094afa4e 100644
--- a/apps/web/app/onboarding/welcome/features-step.tsx
+++ b/apps/web/app/onboarding/welcome/features-step.tsx
@@ -33,7 +33,7 @@ export function FeaturesStep() {
 					</div>
 					<div className="text-left">
 						<p className="text-white font-light">Remember every context</p>
-						<p className="text-[#8A8A8A]">
+						<p className="text-[#8A8A8A] text-[14px]">
 							I keep track of what you've saved and shared with your
 							supermemory.
 						</p>
@@ -50,7 +50,7 @@ export function FeaturesStep() {
 					</div>
 					<div className="text-left">
 						<p className="text-white font-light">Find when you need it</p>
-						<p className="text-[#8A8A8A]">
+						<p className="text-[#8A8A8A] text-[14px]">
 							I surface the right memories inside <br /> your supermemory,
 							superfast.
 						</p>
@@ -67,7 +67,7 @@ export function FeaturesStep() {
 					</div>
 					<div className="text-left">
 						<p className="text-white font-light">Grow with your supermemory</p>
-						<p className="text-[#8A8A8A]">
+						<p className="text-[#8A8A8A] text-[14px]">
 							I learn and personalize over time, so every interaction feels
 							natural.
 						</p>
diff --git a/apps/web/app/onboarding/welcome/greeting-step.tsx b/apps/web/app/onboarding/welcome/greeting-step.tsx
index 343d0218..744e3719 100644
--- a/apps/web/app/onboarding/welcome/greeting-step.tsx
+++ b/apps/web/app/onboarding/welcome/greeting-step.tsx
@@ -5,6 +5,7 @@ interface GreetingStepProps {
 }
 
 export function GreetingStep({ name }: GreetingStepProps) {
+	const userName = name ? `${name.split(" ")[0]}` : ""
 	return (
 		<motion.div
 			className="text-center"
@@ -15,7 +16,7 @@ export function GreetingStep({ name }: GreetingStepProps) {
 			layout
 		>
 			<h2 className="text-white text-[32px] font-medium mb-2">
-				Hi {name}, I'm Nova
+				Hi {userName}, I'm Nova
 			</h2>
 		</motion.div>
 	)
diff --git a/apps/web/app/onboarding/welcome/memories-step.tsx b/apps/web/app/onboarding/welcome/memories-step.tsx
index 5545a723..a2480b43 100644
--- a/apps/web/app/onboarding/welcome/memories-step.tsx
+++ b/apps/web/app/onboarding/welcome/memories-step.tsx
@@ -277,7 +277,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				className="mt-[24px] pb-30"
 			>
 				<Button
-					className="rounded-xl px-6 py-3 border border-onboarding/20 max-w-48 text-white disabled:opacity-50 disabled:cursor-not-allowed h-[40px] cursor-pointer"
+					variant="onboarding"
 					disabled={isSubmitting}
 					style={{
 						background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
diff --git a/apps/web/components/initial-header.tsx b/apps/web/components/initial-header.tsx
index bb38730d..3861b95d 100644
--- a/apps/web/components/initial-header.tsx
+++ b/apps/web/components/initial-header.tsx
@@ -15,7 +15,7 @@ export function InitialHeader({
 				<Logo className="h-7" />
 				{showUserSupermemory && (
 					<div className="flex flex-col items-start justify-center ml-2">
-						<p className="text-[#8B8B8B] text-sm leading-tight">{userName}</p>
+						<p className="text-[#8B8B8B] text-[11px] leading-tight">{userName}</p>
 						<p className="text-white font-bold text-xl leading-none -mt-1">
 							supermemory
 						</p>
diff --git a/apps/web/components/mcp-detail-view.tsx b/apps/web/components/mcp-detail-view.tsx
index 499419fd..83578181 100644
--- a/apps/web/components/mcp-detail-view.tsx
+++ b/apps/web/components/mcp-detail-view.tsx
@@ -72,7 +72,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 			<div className="mb-6">
 				<Button
 					variant="link"
-					className="text-white hover:text-gray-300 p-0"
+					className="text-white hover:text-gray-300 p-0 hover:no-underline cursor-pointer"
 					onClick={onBack}
 				>
 					← Back
@@ -91,7 +91,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 							dmSansClassName(),
 						)}
 					>
-						<CircleCheckIcon className="size-4 text-green-500 flex-shrink-0 mt-0.5" />
+						<CircleCheckIcon className="size-4 text-green-500 shrink-0 mt-0.5" />
 						<p className="text-[#8B8B8B] text-sm">
 							MCP connects your AI apps to create and use memories directly
 						</p>
@@ -128,7 +128,10 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 					<div className="flex items-start space-x-4 z-20">
 						<div
 							className={cn(
-								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 bg-[#161F2B] text-white",
+								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white",
+								activeStep === 1
+									? "border border-[#15233C] bg-[#08142D]"
+									: "bg-[#161F2B] ",
 							)}
 						>
 							<span
@@ -199,14 +202,14 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 												<SelectValue placeholder="Select a client" />
 											)}
 										</SelectTrigger>
-										<SelectContent className="bg-black border-none">
+										<SelectContent className="bg-black border-none pl-3 pr-2">
 											{Object.entries(clients)
 												.slice(0, 7)
 												.map(([key, clientName]) => (
 													<SelectItem
 														key={key}
 														value={key}
-														className="text-white hover:bg-[#080B0F]"
+														className="text-white hover:bg-[#080B0F] p-0"
 													>
 														<div className="flex items-center gap-2">
 															<Image
@@ -244,13 +247,13 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 												setSelectedClient(key as keyof typeof clients)
 												setActiveStep(2)
 											}}
-											className={`mcp-client-button-group px-3 py-1 rounded-full border transition-colors cursor-pointer duration-200 ${
+											className={`mcp-client-button-group py-[6px] pl-2 pr-3 rounded-full border transition-colors cursor-pointer duration-200 ${
 												selectedClient === key
 													? "border-blue-500 bg-blue-500/10"
 													: "border-[#242A33] bg-[#080B0F] hover:border-[#3273FC4D] hover:bg-[#08142D]"
 											}`}
 										>
-											<div className="flex items-center space-x-2">
+											<div className="flex items-center space-x-1">
 												<div className="w-5 h-5 flex items-center justify-center">
 													<Image
 														alt={clientName}
@@ -306,8 +309,10 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 					<div className="flex items-start space-x-4">
 						<div
 							className={cn(
-								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white bg-[#161F2B]",
-								"",
+								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white",
+								activeStep === 2
+									? "border border-[#15233C] bg-[#08142D]"
+									: "bg-[#161F2B]",
 							)}
 						>
 							<span
@@ -463,9 +468,15 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 										<div className="space-y-3">
 											<div className="relative">
 												<input
-													className="font-mono text-xs w-full pr-10 p-4 px-2 bg-[#0D121A] rounded-xl text-white pl-3"
+													className={cn(
+														"text-xs w-full pr-24 py-4 bg-[#0D121A] rounded-xl text-white pl-3",
+														dmMonoClassName(),
+													)}
 													style={{
 														border: "1px solid rgba(61, 67, 77, 0.10)",
+														textOverflow: "ellipsis",
+														overflow: "hidden",
+														whiteSpace: "nowrap",
 													}}
 													readOnly
 													value={generateInstallCommand()}
@@ -473,7 +484,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 												<button
 													type="button"
 													className={cn(
-														"absolute top-1.5 right-1 cursor-pointer p-1 flex items-center rounded-[10px] px-3 py-2 gap-2",
+														"absolute top-[5px] right-1 cursor-pointer p-1 flex items-center rounded-[10px] px-3 py-2 gap-2",
 														dmSansClassName(),
 													)}
 													style={{
@@ -506,8 +517,10 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 					<div className="flex items-start space-x-4">
 						<div
 							className={cn(
-								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20",
-								"bg-[#161F2B] text-white",
+								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20 text-white",
+								activeStep === 3
+									? "border border-[#15233C] bg-[#08142D]"
+									: "bg-[#161F2B] ",
 							)}
 						>
 							<span
diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/new/chat/index.tsx
similarity index 99%
rename from apps/web/components/chat/index.tsx
rename to apps/web/components/new/chat/index.tsx
index 37f89caa..694e7c12 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/new/chat/index.tsx
@@ -19,18 +19,55 @@ import ChatModelSelector from "./model-selector"
 import { GradientLogo, LogoBgGradient } from "@ui/assets/Logo"
 import { useProject, usePersistentChat } from "@/stores"
 import type { ModelId } from "@/lib/models"
-import { SuperLoader } from "../superloader"
+import { SuperLoader } from "../../superloader"
 import { UserMessage } from "./message/user-message"
 import { AgentMessage } from "./message/agent-message"
 import { ChainOfThought } from "./input/chain-of-thought"
 
+function ChatEmptyStatePlaceholder() {
+	const suggestions = [
+		"Show me all content related to Supermemory.",
+		"Summarize the key ideas from My Gita.",
+		"Which memories connect design and AI?",
+		"What are the main themes across my memories?",
+	]
+
+	return (
+		<div className="flex flex-col items-center justify-center h-full">
+			<div className="relative w-32 h-32">
+				<GradientLogo className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16" />
+				<LogoBgGradient className="w-full h-full" />
+			</div>
+			<div className="gap-3 flex flex-col items-center justify-center">
+				<p>Ask me anything about your memories...</p>
+				<div
+					className={cn(
+						dmSansClassName(),
+						"flex flex-col gap-2 justify-center items-center",
+					)}
+				>
+					{suggestions.map((suggestion) => (
+						<Button
+							key={suggestion}
+							variant="default"
+							className="rounded-full text-base gap-1 h-10! border-[#2261CA33] bg-[#041127] border w-fit py-[4px] pl-[8px] pr-[12px]"
+						>
+							<SearchIcon className="size-4 text-[#267BF1]" />
+							<span className="text-[#267BF1] text-[12px]">{suggestion}</span>
+						</Button>
+					))}
+				</div>
+			</div>
+		</div>
+	)
+}
+
 export function ChatSidebar() {
 	const [input, setInput] = useState("")
 	const [isChatOpen, setIsChatOpen] = useState(true)
 	const [selectedModel, setSelectedModel] = useState<ModelId>("gemini-2.5-pro")
 	const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
 	const [hoveredMessageId, setHoveredMessageId] = useState<string | null>(null)
-	const [chainOfThought, setChainOfThought] = useState<any[] | null>(null)
 	const [messageFeedback, setMessageFeedback] = useState<
 		Record<string, "like" | "dislike" | null>
 	>({})
@@ -416,41 +453,3 @@ export function ChatSidebar() {
 		</AnimatePresence>
 	)
 }
-
-function ChatEmptyStatePlaceholder() {
-	const suggestions = [
-		"Show me all content related to Supermemory.",
-		"Summarize the key ideas from My Gita.",
-		"Which memories connect design and AI?",
-		"What are the main themes across my memories?",
-	]
-
-	return (
-		<div className="flex flex-col items-center justify-center h-full">
-			<div className="relative w-32 h-32">
-				<GradientLogo className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16" />
-				<LogoBgGradient className="w-full h-full" />
-			</div>
-			<div className="gap-3 flex flex-col items-center justify-center">
-				<p>Ask me anything about your memories...</p>
-				<div
-					className={cn(
-						dmSansClassName(),
-						"flex flex-col gap-2 justify-center items-center",
-					)}
-				>
-					{suggestions.map((suggestion) => (
-						<Button
-							key={suggestion}
-							variant="default"
-							className="rounded-full text-base gap-1 h-10! border-[#2261CA33] bg-[#041127] border w-fit py-[4px] pl-[8px] pr-[12px]"
-						>
-							<SearchIcon className="size-4 text-[#267BF1]" />
-							<span className="text-[#267BF1] text-[12px]">{suggestion}</span>
-						</Button>
-					))}
-				</div>
-			</div>
-		</div>
-	)
-}
diff --git a/apps/web/components/chat/input/actions.tsx b/apps/web/components/new/chat/input/actions.tsx
similarity index 100%
rename from apps/web/components/chat/input/actions.tsx
rename to apps/web/components/new/chat/input/actions.tsx
diff --git a/apps/web/components/chat/input/chain-of-thought.tsx b/apps/web/components/new/chat/input/chain-of-thought.tsx
similarity index 100%
rename from apps/web/components/chat/input/chain-of-thought.tsx
rename to apps/web/components/new/chat/input/chain-of-thought.tsx
diff --git a/apps/web/components/chat/input/index.tsx b/apps/web/components/new/chat/input/index.tsx
similarity index 100%
rename from apps/web/components/chat/input/index.tsx
rename to apps/web/components/new/chat/input/index.tsx
diff --git a/apps/web/components/chat/message/agent-message.tsx b/apps/web/components/new/chat/message/agent-message.tsx
similarity index 100%
rename from apps/web/components/chat/message/agent-message.tsx
rename to apps/web/components/new/chat/message/agent-message.tsx
diff --git a/apps/web/components/chat/message/follow-up-questions.tsx b/apps/web/components/new/chat/message/follow-up-questions.tsx
similarity index 100%
rename from apps/web/components/chat/message/follow-up-questions.tsx
rename to apps/web/components/new/chat/message/follow-up-questions.tsx
diff --git a/apps/web/components/chat/message/message-actions.tsx b/apps/web/components/new/chat/message/message-actions.tsx
similarity index 100%
rename from apps/web/components/chat/message/message-actions.tsx
rename to apps/web/components/new/chat/message/message-actions.tsx
diff --git a/apps/web/components/chat/message/related-memories.tsx b/apps/web/components/new/chat/message/related-memories.tsx
similarity index 100%
rename from apps/web/components/chat/message/related-memories.tsx
rename to apps/web/components/new/chat/message/related-memories.tsx
diff --git a/apps/web/components/chat/message/user-message.tsx b/apps/web/components/new/chat/message/user-message.tsx
similarity index 100%
rename from apps/web/components/chat/message/user-message.tsx
rename to apps/web/components/new/chat/message/user-message.tsx
diff --git a/apps/web/components/chat/model-selector.tsx b/apps/web/components/new/chat/model-selector.tsx
similarity index 97%
rename from apps/web/components/chat/model-selector.tsx
rename to apps/web/components/new/chat/model-selector.tsx
index 9b47ca46..9cecafc2 100644
--- a/apps/web/components/chat/model-selector.tsx
+++ b/apps/web/components/new/chat/model-selector.tsx
@@ -36,7 +36,7 @@ export default function ChatModelSelector({
 			<Button
 				variant="headers"
 				className={cn(
-					"rounded-full text-base gap-1 !h-10 border-[#73737333] bg-[#0D121A]",
+					"rounded-full text-base gap-1 h-10! border-[#73737333] bg-[#0D121A]",
 					dmSansClassName(),
 				)}
 				style={{
diff --git a/apps/web/components/new/header.tsx b/apps/web/components/new/header.tsx
index dd24117c..8ae8b3d9 100644
--- a/apps/web/components/new/header.tsx
+++ b/apps/web/components/new/header.tsx
@@ -67,12 +67,14 @@ export function Header() {
 	const userName = name ? `${name.split(" ")[0]}'s` : "My"
 	return (
 		<div className="flex p-4 justify-between items-center">
-			<div className="flex items-center justify-center gap-4">
+			<div className="flex items-center justify-center gap-4 z-10!">
 				<div className="flex items-center">
 					<Logo className="h-7" />
 					{name && (
 						<div className="flex flex-col items-start justify-center ml-2">
-							<p className="text-[#8B8B8B] text-sm leading-tight">{userName}</p>
+							<p className="text-[#8B8B8B] text-[11px] leading-tight">
+								{userName}
+							</p>
 							<p className="text-white font-bold text-xl leading-none -mt-1">
 								supermemory
 							</p>
@@ -123,11 +125,11 @@ export function Header() {
 				</div>
 			</div>
 			<Tabs defaultValue="grid">
-				<TabsList className="rounded-full border border-[#161F2C] h-11!">
+				<TabsList className="rounded-full border border-[#161F2C] h-11! z-10!">
 					<TabsTrigger
 						value="grid"
 						className={cn(
-							"rounded-full data-[state=active]:!bg-[#00173C] dark:data-[state=active]:!border-[#2261CA33] px-4 py-4",
+							"rounded-full data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
 							dmSansClassName(),
 						)}
 					>
@@ -137,7 +139,7 @@ export function Header() {
 					<TabsTrigger
 						value="graph"
 						className={cn(
-							"rounded-full dark:data-[state=active]:!bg-[#00173C] dark:data-[state=active]:!border-[#2261CA33] px-4 py-4",
+							"rounded-full dark:data-[state=active]:bg-[#00173C]! dark:data-[state=active]:border-[#2261CA33]! px-4 py-4",
 							dmSansClassName(),
 						)}
 					>
@@ -146,7 +148,7 @@ export function Header() {
 					</TabsTrigger>
 				</TabsList>
 			</Tabs>
-			<div className="flex items-center gap-2">
+			<div className="flex items-center gap-2 z-10!">
 				<Button
 					variant="headers"
 					className="rounded-full text-base gap-2 !h-10"
diff --git a/apps/web/components/new/memories-grid.tsx b/apps/web/components/new/memories-grid.tsx
index 7de4fbc2..3e76ae16 100644
--- a/apps/web/components/new/memories-grid.tsx
+++ b/apps/web/components/new/memories-grid.tsx
@@ -266,24 +266,33 @@ const DocumentCard = memo(
 									<DocumentUrlDisplay url={document.url} />
 								</div>
 							)}
-						<div className="flex items-center justify-between px-3">
-							<p
-								className={cn(
-									dmSansClassName(),
-									"text-[10px] text-[#369BFD] line-clamp-1 font-semibold flex items-center gap-1",
-								)}
-								style={{
-									background:
-										"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
-									backgroundClip: "text",
-									WebkitBackgroundClip: "text",
-									WebkitTextFillColor: "transparent",
-								}}
-							>
-								<SyncLogoIcon className="w-[12.33px] h-[10px]" />
-								{document.memoryEntries.length}{" "}
-								{document.memoryEntries.length === 1 ? "memory" : "memories"}
-							</p>
+						<div
+							className={cn(
+								"flex items-center px-3",
+								document.memoryEntries.length > 0
+									? "justify-between"
+									: "justify-end",
+							)}
+						>
+							{document.memoryEntries.length > 0 && (
+								<p
+									className={cn(
+										dmSansClassName(),
+										"text-[10px] text-[#369BFD] line-clamp-1 font-semibold flex items-center gap-1",
+									)}
+									style={{
+										background:
+											"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
+										backgroundClip: "text",
+										WebkitBackgroundClip: "text",
+										WebkitTextFillColor: "transparent",
+									}}
+								>
+									<SyncLogoIcon className="w-[12.33px] h-[10px]" />
+									{document.memoryEntries.length}{" "}
+									{document.memoryEntries.length === 1 ? "memory" : "memories"}
+								</p>
+							)}
 							<p
 								className={cn(
 									dmSansClassName(),
diff --git a/apps/web/components/chrome-extension-detail-view.tsx b/apps/web/components/x-bookmarks-detail-view.tsx
similarity index 84%
rename from apps/web/components/chrome-extension-detail-view.tsx
rename to apps/web/components/x-bookmarks-detail-view.tsx
index b45e6677..a359d083 100644
--- a/apps/web/components/chrome-extension-detail-view.tsx
+++ b/apps/web/components/x-bookmarks-detail-view.tsx
@@ -5,7 +5,7 @@ import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/utils/fonts"
 import Image from "next/image"
 
-interface ChromeExtensionDetailViewProps {
+interface XBookmarksDetailViewProps {
 	onBack: () => void
 }
 
@@ -27,9 +27,9 @@ const steps = [
 	},
 ]
 
-export function ChromeExtensionDetailView({
+export function XBookmarksDetailView({
 	onBack,
-}: ChromeExtensionDetailViewProps) {
+}: XBookmarksDetailViewProps) {
 	const handleInstall = () => {
 		window.open(
 			"https://chromewebstore.google.com/detail/supermemory/afpgkkipfdpeaflnangednailhoegogi",
@@ -42,7 +42,7 @@ export function ChromeExtensionDetailView({
 			<div className="mb-6">
 				<Button
 					variant="link"
-					className="text-white hover:text-gray-300 p-0"
+					className="text-white hover:text-gray-300 p-0 hover:no-underline cursor-pointer"
 					onClick={onBack}
 				>
 					← Back
@@ -72,7 +72,7 @@ export function ChromeExtensionDetailView({
 								key={step.number}
 								className="flex flex-col items-center text-center bg-[#080B0F] p-3 rounded-[10px]"
 							>
-								<div className="rounded-2xl p-6 mb-4 w-full aspect-[4/4] flex items-center justify-center relative overflow-hidden">
+								<div className="rounded-2xl p-6 mb-3 w-full aspect-4/4 flex items-center justify-center relative overflow-hidden">
 									<Image
 										src={step.image}
 										alt={`Step ${step.number}`}
@@ -83,7 +83,7 @@ export function ChromeExtensionDetailView({
 								</div>
 								<div className="flex flex-col items-start justify-start">
 									<div className="mb-2">
-										<span className="text-white font-medium">
+										<span className="text-white text-sm font-medium">
 											Step {step.number}
 										</span>
 									</div>
@@ -102,7 +102,7 @@ export function ChromeExtensionDetailView({
 				</div>
 
 				<Button
-					className="rounded-xl px-6 py-3 text-white h-[44px] cursor-pointer mx-auto bg-black"
+					className="rounded-xl px-4 py-2 text-white h-10 cursor-pointer mx-auto bg-black"
 					onClick={handleInstall}
 				>
 					Install Chrome Extension →
diff --git a/packages/ui/globals.css b/packages/ui/globals.css
index fb17c06e..d92fd10f 100644
--- a/packages/ui/globals.css
+++ b/packages/ui/globals.css
@@ -90,7 +90,7 @@
 	--shadow-offset-x: 0;
 	--shadow-offset-y: 1px;
 	--letter-spacing: -0.01em;
-	--spacing: 0.24rem;
+	--spacing: 0.25rem;
 	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
 	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
 	--shadow-sm:
@@ -151,7 +151,7 @@
 	--shadow-offset-x: 0;
 	--shadow-offset-y: 1px;
 	--letter-spacing: -0.01em;
-	--spacing: 0.24rem;
+	--spacing: 0.25rem;
 	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
 	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.02);
 	--shadow-sm: