From c4baa26d413d2abd4ab29f5fc497c62f3c9803cf Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Sun, 7 Dec 2025 20:14:25 -0800
Subject: [PATCH] updates on the new changes

---
 apps/web/app/(auth)/login/page.tsx            | 11 ++-----
 apps/web/app/onboarding/page.tsx              |  8 ++---
 .../onboarding/setup/integrations-step.tsx    | 16 +++++++--
 .../onboarding/setup/relatable-question.tsx   | 22 ++++++++++---
 .../app/onboarding/welcome/continue-step.tsx  |  4 +++
 .../app/onboarding/welcome/features-step.tsx  | 33 +++++++++----------
 .../web/app/onboarding/welcome/input-step.tsx | 11 ++++---
 .../app/onboarding/welcome/memories-step.tsx  | 33 ++++++++++---------
 .../app/onboarding/welcome/welcome-step.tsx   |  2 +-
 .../chrome-extension-detail-view.tsx          |  6 ++--
 apps/web/components/initial-header.tsx        |  2 +-
 apps/web/components/mcp-detail-view.tsx       | 22 ++++++-------
 packages/ui/components/text-separator.tsx     |  2 +-
 packages/ui/pages/login.tsx                   | 20 +++++------
 14 files changed, 109 insertions(+), 83 deletions(-)

diff --git a/apps/web/app/(auth)/login/page.tsx b/apps/web/app/(auth)/login/page.tsx
index df052a3d..70b53606 100644
--- a/apps/web/app/(auth)/login/page.tsx
+++ b/apps/web/app/(auth)/login/page.tsx
@@ -1,12 +1,5 @@
-import { LoginPage } from "@repo/ui/pages/login";
+import { LoginPage } from "@repo/ui/pages/login"
 
 export default function Page() {
-	return (
-		<LoginPage
-			texts={[
-				"Your memory, everywhere, with you.",
-				"Private, secure, and reliable.",
-			]}
-		/>
-	);
+	return <LoginPage />
 }
diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
index 147bbfb6..ec0e7d6c 100644
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -25,7 +25,7 @@ import { AnimatedGradientBackground } from "./setup/page"
 function UserSupermemory({ name }: { name: string }) {
 	return (
 		<motion.div
-			className="absolute inset-0 flex items-center justify-center"
+			className="absolute inset-0 flex items-center justify-center z-10"
 			initial={{ opacity: 0, y: 0 }}
 			animate={{ opacity: 1, y: 0 }}
 			exit={{ opacity: 0, y: 0 }}
@@ -33,7 +33,7 @@ function UserSupermemory({ name }: { name: string }) {
 		>
 			<Logo className="h-14 text-white" />
 			<div className="flex flex-col items-start justify-center ml-4">
-				<p className="text-white text-xl font-medium leading-none">{name}'s</p>
+				<p className="text-white text-xs font-medium leading-none">{name}'s</p>
 				<p className="text-white font-bold text-4xl leading-none -mt-2">
 					supermemory
 				</p>
@@ -166,7 +166,7 @@ export default function OnboardingPage() {
 	const showUserSupermemory = isWelcomeFlow && currentStep === "username"
 
 	return (
-		<div className="min-h-screen bg-black">
+		<div className="h-screen overflow-hidden bg-black">
 			{isWelcomeFlow && (
 				<InitialHeader
 					showUserSupermemory={
@@ -180,7 +180,7 @@ export default function OnboardingPage() {
 			{isSetupFlow && <AnimatedGradientBackground />}
 
 			{isWelcomeFlow && (
-				<div className="flex flex-col items-center justify-start min-h-[calc(100vh-86px)] relative">
+				<div className="flex flex-col items-center justify-start h-[calc(100vh-86px)] overflow-y-auto relative">
 					<motion.div
 						className="fixed inset-0 bg-[url('/bg-rectangle.png')] bg-cover bg-center bg-no-repeat pointer-events-none"
 						transition={{ duration: 0.75, ease: "easeOut", bounce: 0 }}
diff --git a/apps/web/app/onboarding/setup/integrations-step.tsx b/apps/web/app/onboarding/setup/integrations-step.tsx
index 35faf5af..df0ec69c 100644
--- a/apps/web/app/onboarding/setup/integrations-step.tsx
+++ b/apps/web/app/onboarding/setup/integrations-step.tsx
@@ -101,7 +101,7 @@ export function IntegrationsStep() {
 								key={card.title}
 								type="button"
 								className={cn(
-									"bg-[#080B0F] relative rounded-lg p-4 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",
+									"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)}
@@ -110,7 +110,12 @@ export function IntegrationsStep() {
 									<h3 className="text-white text-sm font-medium">
 										{card.title}
 									</h3>
-									<p className="text-gray-400 text-xs leading-relaxed">
+									<p
+										className={cn(
+											"text-[#8B8B8B] text-xs leading-relaxed",
+											dmSansClassName(),
+										)}
+									>
 										{card.description}
 									</p>
 								</div>
@@ -126,7 +131,12 @@ export function IntegrationsStep() {
 						>
 							<div className="flex-1 mt-10">
 								<h3 className="text-white text-sm font-medium">{card.title}</h3>
-								<p className="text-gray-400 text-xs leading-relaxed">
+								<p
+									className={cn(
+										"text-[#8B8B8B] text-xs leading-relaxed",
+										dmSansClassName(),
+									)}
+								>
 									{card.description}
 								</p>
 							</div>
diff --git a/apps/web/app/onboarding/setup/relatable-question.tsx b/apps/web/app/onboarding/setup/relatable-question.tsx
index 693822aa..a4f2dc99 100644
--- a/apps/web/app/onboarding/setup/relatable-question.tsx
+++ b/apps/web/app/onboarding/setup/relatable-question.tsx
@@ -65,10 +65,10 @@ export function RelatableQuestion() {
 					<button
 						key={option.text}
 						className={`
-						relative rounded-lg p-2 cursor-pointer transition-all duration-300 opacity-50 hover:opacity-100 hover:border-[#4C608B66] border-[1px] border-[#0D121A] max-w-[140px] min-h-[159px]
+						group relative rounded-lg p-2 cursor-pointer transition-all duration-300 hover:border-[#4C608B66] border border-[#0D121A] max-w-[140px] min-h-[159px]
 						${
 							selectedOptions.includes(index)
-								? "border-[#3374FF] border-[1px] opacity-100 bg-[url('/onboarding/bg-gradient-1.png')] bg-[length:250%_auto] bg-[center_top_3rem] bg-no-repeat"
+								? "border-[#3374FF] border bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[350%_auto] bg-top bg-no-repeat"
 								: "bg-[#080B0F] hover:bg-no-repeat"
 						} 
 					`}
@@ -93,7 +93,13 @@ export function RelatableQuestion() {
 					>
 						<div className="flex flex-col items-start justify-between h-full">
 							<span className="text-2xl">{option.emoji}</span>
-							<p className="text-white text-sm leading-[135%] align-bottom text-left">
+							<p
+								className={`text-white text-sm leading-[135%] align-bottom text-left transition-opacity duration-300 ${
+									selectedOptions.includes(index)
+										? "opacity-100"
+										: "opacity-50 group-hover:opacity-100"
+								}`}
+							>
 								{option.text}
 							</p>
 						</div>
@@ -104,12 +110,20 @@ export function RelatableQuestion() {
 				<div key={selectedOptions.length === 0 ? "skip" : "continue"}>
 					<Button
 						className={cn(
-							"font-medium text-white",
+							"font-medium text-white hover:no-underline",
 							selectedOptions.length !== 0 ? "rounded-xl" : "",
 						)}
 						variant={selectedOptions.length !== 0 ? "onboarding" : "link"}
 						size="lg"
 						onClick={handleContinueOrSkip}
+						style={
+							selectedOptions.length !== 0
+								? {
+										background:
+											"linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
+									}
+								: undefined
+						}
 					>
 						{selectedOptions.length === 0
 							? "Skip for now →"
diff --git a/apps/web/app/onboarding/welcome/continue-step.tsx b/apps/web/app/onboarding/welcome/continue-step.tsx
index b4a4ef6c..0f47dcbd 100644
--- a/apps/web/app/onboarding/welcome/continue-step.tsx
+++ b/apps/web/app/onboarding/welcome/continue-step.tsx
@@ -33,6 +33,10 @@ export function ContinueStep() {
 			<Button
 				variant="onboarding"
 				onClick={handleContinue}
+				style={{
+					background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
+					width: "147px",
+				}}
 			>
 				Continue →
 			</Button>
diff --git a/apps/web/app/onboarding/welcome/features-step.tsx b/apps/web/app/onboarding/welcome/features-step.tsx
index 9a854672..01506cfd 100644
--- a/apps/web/app/onboarding/welcome/features-step.tsx
+++ b/apps/web/app/onboarding/welcome/features-step.tsx
@@ -15,16 +15,16 @@ export function FeaturesStep() {
 			initial={{ opacity: 0, y: 40 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
-			className="text-center max-w-[22rem] space-y-6"
+			className="text-center max-w-88 space-y-6"
 			layout
 		>
-			<h2 className="text-white text-[32px] font-medium">
+			<h2 className="text-white text-[32px] font-medium leading-[110%]">
 				What I can do for you
 			</h2>
 
-			<div className={cn("space-y-4 mb-8 mx-4", dmSansClassName())}>
+			<div className={cn("space-y-4 mb-[24px] mx-4", dmSansClassName())}>
 				<div className="flex items-start space-x-2">
-					<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
+					<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
 						<img
 							src="/onboarding/human-brain.png"
 							alt="Brain icon"
@@ -32,17 +32,16 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<p className="text-white font-light">
-							Remember every context
-						</p>
+						<p className="text-white font-light">Remember every context</p>
 						<p className="text-[#8A8A8A]">
-							I keep track of what you've saved and shared with your supermemory.
+							I keep track of what you've saved and shared with your
+							supermemory.
 						</p>
 					</div>
 				</div>
 
 				<div className="flex items-start space-x-2">
-					<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
+					<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
 						<img
 							src="/onboarding/search.png"
 							alt="Search icon"
@@ -50,17 +49,16 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<p className="text-white font-light">
-							Find when you need it
-						</p>
+						<p className="text-white font-light">Find when you need it</p>
 						<p className="text-[#8A8A8A]">
-							I surface the right memories inside <br /> your supermemory, superfast.
+							I surface the right memories inside <br /> your supermemory,
+							superfast.
 						</p>
 					</div>
 				</div>
 
 				<div className="flex items-start space-x-2">
-					<div className="w-14 h-14 rounded-lg flex items-center justify-center flex-shrink-0">
+					<div className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0">
 						<img
 							src="/onboarding/plant.png"
 							alt="Growth icon"
@@ -68,9 +66,7 @@ export function FeaturesStep() {
 						/>
 					</div>
 					<div className="text-left">
-						<p className="text-white font-light">
-							Grow with your supermemory
-						</p>
+						<p className="text-white font-light">Grow with your supermemory</p>
 						<p className="text-[#8A8A8A]">
 							I learn and personalize over time, so every interaction feels
 							natural.
@@ -89,6 +85,9 @@ export function FeaturesStep() {
 			>
 				<Button
 					variant="onboarding"
+					style={{
+						background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
+					}}
 					onClick={handleContinue}
 				>
 					Add memories →
diff --git a/apps/web/app/onboarding/welcome/input-step.tsx b/apps/web/app/onboarding/welcome/input-step.tsx
index cac747bf..72177d21 100644
--- a/apps/web/app/onboarding/welcome/input-step.tsx
+++ b/apps/web/app/onboarding/welcome/input-step.tsx
@@ -43,7 +43,7 @@ export function InputStep({
 			}}
 			layout
 		>
-			<h2 className="text-white text-[32px] font-medium">
+			<h2 className="text-white text-[32px] font-medium leading-[110%]">
 				What should I call you?
 			</h2>
 			<div className="flex items-center w-full relative">
@@ -67,16 +67,19 @@ export function InputStep({
 					}}
 				/>
 				<Button
-					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 ${
+					className={`rounded-[8px] w-8 h-8 p-2 absolute right-1 border-[0.5px] border-[#161F2C] hover:cursor-pointer hover:scale-[0.95] active:scale-[0.95] transition-transform ${
 						isSubmitting ? "scale-[0.90]" : ""
 					}`}
 					size="icon"
 					onClick={handleSubmit}
+					style={{
+						background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
+					}}
 				>
 					<svg
 						width="12"
-						height="10"
-						viewBox="0 0 12 10"
+						height="9"
+						viewBox="0 0 12 9"
 						fill="none"
 						xmlns="http://www.w3.org/2000/svg"
 					>
diff --git a/apps/web/app/onboarding/welcome/memories-step.tsx b/apps/web/app/onboarding/welcome/memories-step.tsx
index 260b61d2..11de1506 100644
--- a/apps/web/app/onboarding/welcome/memories-step.tsx
+++ b/apps/web/app/onboarding/welcome/memories-step.tsx
@@ -108,8 +108,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 			initial={{ opacity: 0, y: 40 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
-			className="text-center w-full"
-			layout
+			className="text-center w-full "
 		>
 			<h2 className="text-white text-[32px] font-medium mb-4 mt-[-36px]">
 				Let's add your memories
@@ -139,13 +138,13 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 							className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
 								errors.twitter
 									? "border-[#52596633] bg-[#290F0A]"
-									: "border-[#525966]/20"
+									: "border-onboarding/20"
 							}`}
 						/>
 						{errors.twitter && (
 							<div className="absolute left-full ml-3">
-								<div className="relative flex-shrink-0 px-3 py-2 bg-red-500/20 rounded-xl">
-									<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-[8px] border-t-transparent border-b-transparent border-r-red-500/20" />
+								<div className="relative shrink-0 px-3 py-2 bg-red-500/20 rounded-xl">
+									<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-8 border-t-transparent border-b-transparent border-r-red-500/20" />
 									<p className="text-red-500 text-xs whitespace-nowrap">
 										{errors.twitter}
 									</p>
@@ -178,18 +177,18 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 							className={`w-full px-4 py-2 bg-[#070E1B] border rounded-xl text-white placeholder-onboarding focus:outline-none transition-colors h-[40px] ${
 								errors.linkedin
 									? "border-[#52596633] bg-[#290F0A]"
-									: "border-[#525966]/20"
+									: "border-onboarding/20"
 							}`}
 						/>
 						{errors.linkedin && (
 							<div className="absolute left-full ml-3">
 								<div
 									className={cn(
-										"relative flex-shrink-0 px-3 py-2 bg-red-500/20 rounded-xl",
+										"relative shrink-0 px-3 py-2 bg-red-500/20 rounded-xl",
 										dmSansClassName(),
 									)}
 								>
-									<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-[8px] border-t-transparent border-b-transparent border-r-red-500/20" />
+									<div className="absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 w-0 h-0 border-t-[6px] border-b-[6px] border-r-8 border-t-transparent border-b-transparent border-r-red-500/20" />
 									<p className="text-red-500 text-xs whitespace-nowrap">
 										{errors.linkedin}
 									</p>
@@ -210,11 +209,11 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 						>
 							Other links
 						</label>
-						<span className="text-[#525966] text-[10px]">Upto 3</span>
+						<span className="text-onboarding text-[10px]">Upto 3</span>
 					</div>
 					{otherLinks.map((link, index) => (
 						<div
-							key={`other-link-${index}-${link.length}`}
+							key={`other-link-${index}`}
 							className="flex items-center mb-2 relative"
 						>
 							<input
@@ -223,12 +222,16 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 								placeholder="Add your website, GitHub, Notion..."
 								value={link}
 								onChange={(e) => updateOtherLink(index, e.target.value)}
-								className="flex-1 px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors h-[40px]"
+								className="flex-1 px-4 py-2 bg-[#070E1B] border border-onboarding/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors h-[40px]"
 							/>
 							{index === otherLinks.length - 1 && otherLinks.length < 3 && (
 								<button
 									type="button"
-									onClick={addOtherLink}
+									onClick={(e) => {
+										e.preventDefault()
+										e.stopPropagation()
+										addOtherLink()
+									}}
 									className="size-8 m-1 absolute right-0 top-0 bg-black border border-[#161F2C] rounded-lg flex items-center justify-center text-white hover:bg-[#161F2C] transition-colors text-xl"
 								>
 									+
@@ -254,7 +257,7 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 						value={description}
 						onChange={(e) => setDescription(e.target.value)}
 						rows={2}
-						className="w-full px-4 py-2 bg-[#070E1B] border border-[#525966]/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors min-h-[4rem]"
+						className="w-full px-4 py-2 bg-[#070E1B] border border-onboarding/20 rounded-xl text-white placeholder-onboarding focus:outline-none focus:border-[#4A4A4A] transition-colors min-h-16"
 					/>
 				</div>
 			</div>
@@ -266,10 +269,10 @@ export function MemoriesStep({ onSubmit }: MemoriesStepProps) {
 				}}
 				transition={{ duration: 1, ease: "easeOut", delay: 1 }}
 				initial={{ opacity: 0, y: 10 }}
-				className="mt-[24px]"
+				className="mt-[24px] pb-8"
 			>
 				<Button
-					className="rounded-xl px-6 py-3 border border-[#525966]/20 max-w-[12rem] text-white disabled:opacity-50 disabled:cursor-not-allowed h-[40px] cursor-pointer"
+					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"
 					disabled={isSubmitting}
 					style={{
 						background: "linear-gradient(180deg, #0D121A -26.14%, #000 100%)",
diff --git a/apps/web/app/onboarding/welcome/welcome-step.tsx b/apps/web/app/onboarding/welcome/welcome-step.tsx
index d781e818..5c0d998f 100644
--- a/apps/web/app/onboarding/welcome/welcome-step.tsx
+++ b/apps/web/app/onboarding/welcome/welcome-step.tsx
@@ -10,7 +10,7 @@ export function WelcomeStep() {
 			transition={{ duration: 1, ease: "easeOut" }}
 			layout
 		>
-			<h2 className="text-white text-[32px] font-medium mb-2">Welcome to</h2>
+			<h2 className="text-white text-[32px] font-medium mb-2">Welcome to...</h2>
 		</motion.div>
 	)
 }
diff --git a/apps/web/components/chrome-extension-detail-view.tsx b/apps/web/components/chrome-extension-detail-view.tsx
index 5b417095..b45e6677 100644
--- a/apps/web/components/chrome-extension-detail-view.tsx
+++ b/apps/web/components/chrome-extension-detail-view.tsx
@@ -51,13 +51,13 @@ export function ChromeExtensionDetailView({
 
 			<div className="flex flex-col items-start justify-start flex-1">
 				<div>
-					<h1 className="text-white text-[20px] font-medium mb-4 text-start">
+					<h1 className="text-white text-[20px] font-medium mb-3 text-start">
 						Import your X bookmarks via the Chrome Extension
 					</h1>
 
 					<p
 						className={cn(
-							"text-[#8B8B8B] text-sm mb-12 text-start max-w-2xl",
+							"text-[#8B8B8B] text-sm mb-6 text-start max-w-2xl",
 							dmSansClassName(),
 						)}
 					>
@@ -66,7 +66,7 @@ export function ChromeExtensionDetailView({
 						need, right when you need it.
 					</p>
 
-					<div className="grid grid-cols-3 gap-6 mb-12 max-w-5xl w-full">
+					<div className="grid grid-cols-3 gap-6 mb-6 max-w-5xl w-full">
 						{steps.map((step) => (
 							<div
 								key={step.number}
diff --git a/apps/web/components/initial-header.tsx b/apps/web/components/initial-header.tsx
index 59fb7a75..51baa78d 100644
--- a/apps/web/components/initial-header.tsx
+++ b/apps/web/components/initial-header.tsx
@@ -23,7 +23,7 @@ export function InitialHeader({
 			</div>
 			<Button
 				variant="newDefault"
-				className="rounded-2xl text-base gap-1 !h-11"
+				className="rounded-2xl text-base gap-1 h-11! z-10"
 				size={"lg"}
 			>
 				Memory API <span className="text-xs mt-[4px]">↗</span>
diff --git a/apps/web/components/mcp-detail-view.tsx b/apps/web/components/mcp-detail-view.tsx
index 1a58dad9..499419fd 100644
--- a/apps/web/components/mcp-detail-view.tsx
+++ b/apps/web/components/mcp-detail-view.tsx
@@ -80,11 +80,11 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 			</div>
 
 			<div className="flex-1 flex flex-col items-start justify-start">
-				<h1 className="text-white text-3xl font-medium mb-6 text-start">
+				<h1 className="text-white text-xl font-medium mb-4 text-start">
 					Connect your AI to supermemory MCP
 				</h1>
 
-				<div className="mb-8 space-x-4 flex max-w-2xl">
+				<div className="mb-12 space-x-4 flex max-w-2xl">
 					<div
 						className={cn(
 							"flex items-start space-x-3 w-[200px]",
@@ -102,7 +102,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">
 							Auto-fetch the right context from anything you've saved
 						</p>
@@ -113,22 +113,22 @@ 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">
-							One-time setup, seamless integration across your workflow
+							One-time setup, <br /> seamless integration across your workflow
 						</p>
 					</div>
 				</div>
 
 				<div className="w-full max-w-2xl relative">
 					<div
-						className="absolute left-4 top-0 w-[1px] bg-[#1E293B] z-10"
+						className="absolute left-4 top-0 w-px bg-[#1E293B] z-10"
 						style={{ height: activeStep === 3 ? "calc(100% - 4rem)" : "100%" }}
 					/>
 					<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 flex-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 bg-[#161F2B] text-white",
 							)}
 						>
 							<span
@@ -174,7 +174,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 										value={selectedClient || undefined}
 									>
 										<SelectTrigger
-											className="max-w-md rounded-full border-[#242A33] text-white hover:border-gray-600 !bg-transparent"
+											className="max-w-md rounded-full border-[#242A33] text-white hover:border-gray-600 bg-transparent!"
 											style={{
 												background:
 													"linear-gradient(0deg, #0A0E14 0%, #080B0F 100%)",
@@ -244,7 +244,7 @@ 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-1 transition-colors cursor-pointer duration-200 ${
+											className={`mcp-client-button-group px-3 py-1 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]"
@@ -306,7 +306,7 @@ 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 flex-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 bg-[#161F2B]",
 								"",
 							)}
 						>
@@ -506,7 +506,7 @@ 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 flex-shrink-0 z-20",
+								"rounded-full w-8 h-8 flex items-center justify-center text-sm font-medium shrink-0 z-20",
 								"bg-[#161F2B] text-white",
 							)}
 						>
diff --git a/packages/ui/components/text-separator.tsx b/packages/ui/components/text-separator.tsx
index 1c4bd80d..bd448233 100644
--- a/packages/ui/components/text-separator.tsx
+++ b/packages/ui/components/text-separator.tsx
@@ -14,7 +14,7 @@ export function TextSeparator({
 			className={cn("flex gap-4 items-center justify-center", className)}
 			{...props}
 		>
-			<span className="text-foreground font-sans text-[0.75rem] uppercase tracking-[-0.2px] leading-[0.875rem]">
+			<span className="text-foreground text-[0.75rem] uppercase tracking-[-0.2px] leading-3.5">
 				{text}
 			</span>
 		</div>
diff --git a/packages/ui/pages/login.tsx b/packages/ui/pages/login.tsx
index ccc59a1f..9aa35dd4 100644
--- a/packages/ui/pages/login.tsx
+++ b/packages/ui/pages/login.tsx
@@ -14,7 +14,7 @@ import { InitialHeader } from "../../../apps/web/components/initial-header";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
-import { dmSansClassName } from "../../../apps/web/utils/fonts"
+import { dmSansClassName } from "../../../apps/web/utils/fonts";
 import { cn } from "@lib/utils";
 import { Logo } from "@ui/assets/Logo";
 
@@ -22,7 +22,7 @@ function AnimatedGradientBackground() {
 	return (
 		<div className="fixed inset-0 z-0 overflow-hidden">
 			<motion.div
-				className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-0.png')] bg-[length:150%_auto] bg-top bg-no-repeat"
+				className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-0.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
 				initial={{ y: "100%" }}
 				animate={{
 					y: 0,
@@ -34,7 +34,7 @@ function AnimatedGradientBackground() {
 				}}
 			/>
 			<motion.div
-				className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-[length:150%_auto] bg-top bg-no-repeat"
+				className="absolute top-[40%] left-0 right-0 bottom-0 bg-[url('/onboarding/bg-gradient-1.png')] bg-size-[150%_auto] bg-top bg-no-repeat"
 				initial={{ y: "100%" }}
 				animate={{
 					y: 0,
@@ -62,7 +62,7 @@ function AnimatedGradientBackground() {
 function LoginCard({ children }: { children: React.ReactNode }) {
 	return (
 		<motion.div
-			className="flex w-[448px] p-8 flex-col items-start gap-2 rounded-[22px] bg-gradient-to-b from-[#06101F] to-[#030912] shadow-[1.5px_1.5px_20px_0_rgba(0,0,0,0.65),1px_1.5px_2px_0_rgba(128,189,255,0.07)_inset,-0.5px_-1.5px_4px_0_rgba(0,35,73,0.40)_inset]"
+			className="flex max-w-[360px] p-8 flex-col items-start gap-2 rounded-[22px] bg-linear-to-b from-[#06101F] to-[#030912] shadow-[1.5px_1.5px_20px_0_rgba(0,0,0,0.65),1px_1.5px_2px_0_rgba(128,189,255,0.07)_inset,-0.5px_-1.5px_4px_0_rgba(0,35,73,0.40)_inset]"
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.75, ease: "easeOut" }}
@@ -212,11 +212,11 @@ export function LoginPage() {
 	};
 
 	return (
-		<main className="relative min-h-screen">
+		<main className="relative h-screen overflow-hidden">
 			<AnimatedGradientBackground />
 			<div className="relative z-10">
 				<InitialHeader />
-				<section className="flex flex-col items-center justify-center p-4 space-y-12 sm:p-6 md:p-8 lg:px-[5rem] lg:py-[3.125rem] min-h-[calc(100vh-80px)]">
+				<section className="flex flex-col items-center justify-center p-4 space-y-12 sm:p-6 md:p-8 lg:px-20 lg:py-12.5 min-h-[calc(100vh-80px)]">
 					<div className="text-center">
 						<div className="text-5xl font-medium">
 							Never forget anything, anywhere
@@ -236,7 +236,7 @@ export function LoginPage() {
 									</HeadingH3Medium>
 								</div>
 
-								<TextSeparator text="OR" />
+								<TextSeparator text="OR" className={cn(dmSansClassName())} />
 
 								<form
 									className="flex flex-col gap-4 lg:gap-6"
@@ -272,7 +272,7 @@ export function LoginPage() {
 								<div className="flex flex-col gap-3">
 									{process.env.NEXT_PUBLIC_HOST_ID === "supermemory" ||
 									!process.env.NEXT_PUBLIC_GOOGLE_AUTH_ENABLED ? (
-										<div className="relative flex-grow">
+										<div className="relative grow">
 											<ExternalAuthButton
 												authIcon={
 													<svg
@@ -334,7 +334,7 @@ export function LoginPage() {
 									) : null}
 									{process.env.NEXT_PUBLIC_HOST_ID === "supermemory" ||
 									!process.env.NEXT_PUBLIC_GITHUB_AUTH_ENABLED ? (
-										<div className="relative flex-grow">
+										<div className="relative grow">
 											<ExternalAuthButton
 												authIcon={
 													<svg
@@ -448,7 +448,7 @@ export function LoginPage() {
 
 									<Label1Regular
 										className={cn(
-											"text-center !text-xs text-[#737373B2]",
+											"text-center text-xs! text-[#737373B2]",
 											dmSansClassName(),
 										)}
 									>