tailwind css to popup

4 files changed, 86 insertions, 772 deletions

diff --git a/apps/browser-extension/entrypoints/popup/App.css b/apps/browser-extension/entrypoints/popup/App.css
index 4924360e..f91be533 100644
--- a/apps/browser-extension/entrypoints/popup/App.css
+++ b/apps/browser-extension/entrypoints/popup/App.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 /* Custom Font Definitions */
 @font-face {
 	font-family: "Space Grotesk";
@@ -38,671 +40,3 @@
 	font-display: swap;
 	src: url("/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
 }
-
-.popup-container {
-	width: 320px;
-	padding: 0;
-	font-family:
-		"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-		sans-serif;
-	background: #ffffff;
-	border-radius: 8px;
-	position: relative;
-	overflow: hidden;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 10px;
-	border-bottom: 1px solid #e5e7eb;
-	position: relative;
-}
-
-.header .logo {
-	width: 32px;
-	height: 32px;
-	flex-shrink: 0;
-}
-
-.header h1 {
-	margin: 0;
-	font-size: 18px;
-	font-weight: 600;
-	color: #000000;
-	flex: 1;
-}
-
-.header-sign-out {
-	background: none;
-	border: none;
-	font-size: 16px;
-	cursor: pointer;
-	color: #6c757d;
-	padding: 4px;
-	border-radius: 4px;
-	transition:
-		color 0.2s ease,
-		background-color 0.2s ease;
-}
-
-.header-sign-out:hover {
-	color: #000000;
-	background-color: #f1f3f4;
-}
-
-.content {
-	padding: 16px;
-}
-
-.status {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 16px;
-	font-size: 14px;
-	color: #000000;
-}
-
-.status-indicator {
-	width: 8px;
-	height: 8px;
-	border-radius: 50%;
-	flex-shrink: 0;
-}
-
-.status-indicator.signed-in {
-	background-color: #000000;
-}
-
-.status-indicator.signed-out {
-	background-color: #666666;
-}
-
-.sign-out-btn {
-	width: 100%;
-	padding: 8px 16px;
-	background-color: #000000;
-	color: white;
-	border: none;
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 500;
-	cursor: pointer;
-}
-
-.sign-out-btn:hover {
-	background-color: #333333;
-}
-
-.instruction {
-	margin: 0;
-	font-size: 13px;
-	color: #666666;
-	line-height: 1.4;
-}
-
-.login-btn {
-	background: none;
-	border: none;
-	color: #1976d2;
-	cursor: pointer;
-	text-decoration: underline;
-	font-size: 13px;
-	padding: 0;
-}
-
-.login-btn:hover {
-	color: #1565c0;
-}
-
-.authenticated {
-	text-align: left;
-}
-
-.unauthenticated {
-	text-align: center;
-	padding: 8px 0;
-}
-
-/* Login Screen Styles */
-.login-intro {
-	margin-bottom: 32px;
-}
-
-.login-title {
-	margin: 0 0 16px 0;
-	font-size: 14px;
-	font-weight: 400;
-	color: #000000;
-	line-height: 1.3;
-}
-
-.features-list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	text-align: left;
-}
-
-.features-list li {
-	padding: 6px 0;
-	font-size: 14px;
-	color: #000000;
-	position: relative;
-	padding-left: 20px;
-}
-
-.features-list li::before {
-	content: "•";
-	position: absolute;
-	left: 0;
-	color: #000000;
-	font-weight: bold;
-}
-
-.login-actions {
-	margin-top: 32px;
-}
-
-.login-help {
-	margin: 0 0 16px 0;
-	font-size: 14px;
-	color: #6c757d;
-}
-
-.help-link {
-	background: none;
-	border: none;
-	color: #4285f4;
-	cursor: pointer;
-	text-decoration: underline;
-	font-size: 14px;
-	padding: 0;
-}
-
-.help-link:hover {
-	color: #1a73e8;
-}
-
-.login-primary-btn {
-	width: 100%;
-	padding: 12px 24px;
-	background-color: #374151;
-	color: white;
-	border: none;
-	border-radius: 24px;
-	font-size: 16px;
-	font-weight: 500;
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-}
-
-.login-primary-btn:hover:not(:disabled) {
-	background-color: #1f2937;
-}
-
-.login-primary-btn:disabled {
-	background-color: #9e9e9e;
-	cursor: not-allowed;
-}
-
-/* Tab Navigation Styles */
-.tab-navigation {
-	display: flex;
-	background-color: #f1f3f4;
-	border-radius: 8px;
-	padding: 4px;
-	margin-bottom: 16px;
-}
-
-.tab-btn {
-	flex: 1;
-	padding: 8px 16px;
-	background: transparent;
-	border: none;
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 500;
-	color: #6c757d;
-	cursor: pointer;
-	transition: all 0.2s ease;
-	outline: none;
-	box-shadow: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-}
-
-.tab-btn:focus {
-	outline: none;
-	box-shadow: none;
-	border: none;
-}
-
-.tab-btn:active {
-	outline: none;
-	box-shadow: none;
-}
-
-.tab-btn.active {
-	background-color: #ffffff;
-	color: #000000;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.tab-btn:hover:not(.active) {
-	color: #374151;
-}
-
-/* Tab Content */
-.tab-content {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	min-height: 200px;
-}
-
-/* Save Action at Bottom */
-.save-action {
-	margin-top: auto;
-	padding-top: 16px;
-}
-
-/* Import Actions */
-.import-actions {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.import-item {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.import-instructions {
-	margin: 0;
-	font-size: 12px;
-	color: #6c757d;
-	line-height: 1.3;
-	padding-left: 4px;
-}
-
-/* Save Section Styles */
-.save-section {
-	margin-bottom: 16px;
-}
-
-.current-page {
-	margin-bottom: 0;
-}
-
-.page-info {
-	background-color: #f8f9fa;
-	padding: 12px;
-	border-radius: 6px;
-	border: 1px solid #e9ecef;
-}
-
-.page-title {
-	margin: 0 0 4px 0;
-	font-size: 14px;
-	font-weight: 600;
-	color: #000000;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.page-url {
-	margin: 0;
-	font-size: 12px;
-	color: #6c757d;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.save-page-btn {
-	width: 100%;
-	padding: 12px 16px;
-	background-color: #1976d2;
-	color: white;
-	border: none;
-	border-radius: 6px;
-	font-size: 16px;
-	font-weight: 600;
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-}
-
-.save-page-btn:hover:not(:disabled) {
-	background-color: #1565c0;
-}
-
-.save-page-btn:disabled {
-	background-color: #9e9e9e;
-	cursor: not-allowed;
-}
-
-.secondary-actions {
-	margin-top: 16px;
-}
-
-.secondary-btn {
-	width: 100%;
-	padding: 8px 12px;
-	background-color: white;
-	color: #6c757d;
-	border: 1px solid #e4e6eb;
-	border-radius: 6px;
-	font-size: 13px;
-	font-weight: 400;
-	cursor: pointer;
-	transition:
-		background-color 0.2s ease,
-		color 0.2s ease;
-}
-
-.secondary-btn:hover {
-	background-color: #f8f9fa;
-	color: #000000;
-}
-
-.actions {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-.chatgpt-btn {
-	width: 100%;
-	padding: 12px 12px;
-	background-color: white;
-	color: black;
-	border: 1px solid #e4e6eb;
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 500;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background-color 0.2s ease;
-}
-
-.chatgpt-btn:hover {
-	background-color: #f0f0f0;
-	border-color: #e4e6eb;
-}
-
-.chatgpt-logo {
-	width: 18px;
-	height: 18px;
-	flex-shrink: 0;
-	margin-right: 8px;
-}
-
-.twitter-btn {
-	width: 100%;
-	padding: 12px 12px;
-	background-color: white;
-	color: black;
-	border: 1px solid #e4e6eb;
-	border-radius: 6px;
-	font-size: 14px;
-	font-weight: 500;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background-color 0.2s ease;
-	outline: none;
-	box-shadow: none;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-}
-
-.twitter-btn:hover {
-	background-color: #f0f0f0;
-	border-color: #e4e6eb;
-}
-
-.twitter-btn:focus {
-	outline: none;
-	box-shadow: none;
-}
-
-.twitter-logo {
-	width: 18px;
-	height: 18px;
-	flex-shrink: 0;
-	margin-right: 8px;
-}
-
-/* Project Selection Styles */
-.project-section {
-	margin-bottom: 0;
-}
-
-.project-selector-btn {
-	width: 100%;
-	background: none;
-	border: none;
-	padding: 0;
-	cursor: pointer;
-	text-align: left;
-}
-
-.project-selector-content {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 12px;
-	background-color: #f8f9fa;
-	border-radius: 8px;
-	border: 1px solid #e9ecef;
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease;
-}
-
-.project-selector-btn:hover .project-selector-content {
-	background-color: #e9ecef;
-	border-color: #ced4da;
-}
-
-.project-label {
-	font-size: 14px;
-	font-weight: 500;
-	color: #495057;
-}
-
-.project-value {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.project-name {
-	font-size: 14px;
-	font-weight: 500;
-	color: #000000;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	max-width: 120px;
-}
-
-.project-arrow {
-	color: #6c757d;
-	flex-shrink: 0;
-	transition: transform 0.2s ease;
-}
-
-.project-selector-btn:hover .project-arrow {
-	color: #495057;
-	transform: translateX(2px);
-}
-
-.project-count {
-	font-size: 12px;
-	color: #6c757d;
-	margin-left: 8px;
-}
-
-.project-none {
-	font-size: 14px;
-	color: #6c757d;
-	font-style: italic;
-}
-
-/* Project Selector Modal */
-.project-selector {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: #ffffff;
-	border-radius: 8px;
-	z-index: 1000;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-	display: flex;
-	flex-direction: column;
-}
-
-.project-selector-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 16px;
-	border-bottom: 1px solid #e5e7eb;
-	font-size: 16px;
-	font-weight: 600;
-	color: #000000;
-	flex-shrink: 0;
-}
-
-.project-header-actions {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.project-logout-btn {
-	background: none;
-	border: none;
-	font-size: 14px;
-	color: #6c757d;
-	cursor: pointer;
-	padding: 4px 8px;
-	border-radius: 4px;
-	transition:
-		color 0.2s ease,
-		background-color 0.2s ease;
-	outline: none;
-}
-
-.project-logout-btn:hover {
-	color: #dc3545;
-	background-color: #f8f9fa;
-}
-
-.project-logout-btn:focus {
-	outline: none;
-}
-
-.project-close-btn {
-	background: none;
-	border: none;
-	font-size: 20px;
-	cursor: pointer;
-	color: #6c757d;
-	padding: 0;
-	width: 24px;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.project-close-btn:hover {
-	color: #000000;
-}
-
-.project-loading {
-	padding: 32px 16px;
-	text-align: center;
-	color: #6c757d;
-	font-size: 14px;
-}
-
-.project-list {
-	flex: 1;
-	overflow-y: auto;
-	min-height: 0;
-}
-
-.project-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 12px 16px;
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-	border-bottom: 1px solid #f1f3f4;
-	background: none;
-	border: none;
-	width: 100%;
-	text-align: left;
-}
-
-.project-item:hover {
-	background-color: #f8f9fa;
-}
-
-.project-item:last-child {
-	border-bottom: none;
-}
-
-.project-item.selected {
-	background-color: #e3f2fd;
-}
-
-.project-item-info {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	gap: 2px;
-}
-
-.project-item-name {
-	font-size: 14px;
-	font-weight: 500;
-	color: #000000;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	hyphens: auto;
-	line-height: 1.3;
-}
-
-.project-item-count {
-	font-size: 12px;
-	color: #6c757d;
-}
-
-.project-item-check {
-	color: #1976d2;
-	font-weight: bold;
-	font-size: 16px;
-}
diff --git a/apps/browser-extension/entrypoints/popup/App.tsx b/apps/browser-extension/entrypoints/popup/App.tsx
index 2f42747a..50a502d3 100644
--- a/apps/browser-extension/entrypoints/popup/App.tsx
+++ b/apps/browser-extension/entrypoints/popup/App.tsx
@@ -115,12 +115,12 @@ function App() {
 
 	if (loading) {
 		return (
-			<div className="popup-container">
-				<div className="header">
-					<img alt="supermemory" className="logo" src="/icon-48.png" />
-					<h1>supermemory</h1>
+			<div className="w-80 p-0 font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] bg-white rounded-lg relative overflow-hidden">
+				<div className="flex items-center justify-between gap-3 p-2.5 border-b border-gray-200 relative">
+					<img alt="supermemory" className="w-8 h-8 flex-shrink-0" src="/icon-48.png" />
+					<h1 className="m-0 text-lg font-semibold text-black flex-1">supermemory</h1>
 				</div>
-				<div className="content">
+				<div className="p-4">
 					<div>Loading...</div>
 				</div>
 			</div>
@@ -128,17 +128,17 @@ function App() {
 	}
 
 	return (
-		<div className="popup-container">
-			<div className="header">
+		<div className="w-80 p-0 font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] bg-white rounded-lg relative overflow-hidden">
+			<div className="flex items-center justify-between gap-3 p-2.5 border-b border-gray-200 relative">
 				<img
 					alt="supermemory"
-					className="logo"
+					className="w-8 h-8 flex-shrink-0"
 					src="https://assets.supermemory.ai/brand/wordmark/dark-transparent.svg"
 					style={{ width: "80%", height: "45px" }}
 				/>
 				{userSignedIn && (
 					<button
-						className="header-sign-out"
+						className="bg-none border-none text-base cursor-pointer text-gray-500 p-1 rounded transition-colors duration-200 hover:text-black hover:bg-gray-100"
 						onClick={handleSignOut}
 						title="Logout"
 						type="button"
@@ -161,20 +161,28 @@ function App() {
 					</button>
 				)}
 			</div>
-			<div className="content">
+			<div className="p-4">
 				{userSignedIn ? (
-					<div className="authenticated">
+					<div className="text-left">
 						{/* Tab Navigation */}
-						<div className="tab-navigation">
+						<div className="flex bg-gray-100 rounded-lg p-1 mb-4">
 							<button
-								className={`tab-btn ${activeTab === "save" ? "active" : ""}`}
+								className={`flex-1 py-2 px-4 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
+									activeTab === "save"
+										? "bg-white text-black shadow-sm"
+										: "text-gray-500 hover:text-gray-700"
+								}`}
 								onClick={() => setActiveTab("save")}
 								type="button"
 							>
 								Save
 							</button>
 							<button
-								className={`tab-btn ${activeTab === "imports" ? "active" : ""}`}
+								className={`flex-1 py-2 px-4 bg-transparent border-none rounded-md text-sm font-medium cursor-pointer transition-all duration-200 outline-none appearance-none ${
+									activeTab === "imports"
+										? "bg-white text-black shadow-sm"
+										: "text-gray-500 hover:text-gray-700"
+								}`}
 								onClick={() => setActiveTab("imports")}
 								type="button"
 							>
@@ -184,35 +192,35 @@ function App() {
 
 						{/* Tab Content */}
 						{activeTab === "save" ? (
-							<div className="tab-content">
+							<div className="flex flex-col gap-4 min-h-[200px]">
 								{/* Current Page Info */}
-								<div className="current-page">
-									<div className="page-info">
-										<h3 className="page-title">
+								<div className="mb-0">
+									<div className="bg-gray-50 p-3 rounded-md border border-gray-200">
+										<h3 className="m-0 mb-1 text-sm font-semibold text-black overflow-hidden text-ellipsis whitespace-nowrap">
 											{currentTitle || "Current Page"}
 										</h3>
-										<p className="page-url">{currentUrl}</p>
+										<p className="m-0 text-xs text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">{currentUrl}</p>
 									</div>
 								</div>
 
 								{/* Project Selection */}
-								<div className="project-section">
+								<div className="mb-0">
 									<button
-										className="project-selector-btn"
+										className="w-full bg-transparent border-none p-0 cursor-pointer text-left"
 										onClick={handleShowProjectSelector}
 										type="button"
 									>
-										<div className="project-selector-content">
-											<span className="project-label">Save to project:</span>
-											<div className="project-value">
-												<span className="project-name">
+										<div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg border border-gray-200 transition-colors duration-200 hover:bg-gray-200 hover:border-gray-300">
+											<span className="text-sm font-medium text-gray-600">Save to project:</span>
+											<div className="flex items-center gap-2">
+												<span className="text-sm font-medium text-black overflow-hidden text-ellipsis whitespace-nowrap max-w-[120px]">
 													{defaultProject
 														? defaultProject.name
 														: "Default Project"}
 												</span>
 												<svg
 													aria-label="Select project"
-													className="project-arrow"
+													className="text-gray-500 flex-shrink-0 transition-transform duration-200 hover:text-gray-700 hover:translate-x-0.5"
 													fill="none"
 													height="16"
 													stroke="currentColor"
@@ -231,9 +239,9 @@ function App() {
 								</div>
 
 								{/* Save Button at Bottom */}
-								<div className="save-action">
+								<div className="mt-auto pt-4">
 									<button
-										className="login-primary-btn"
+										className="w-full py-3 px-6 bg-gray-700 text-white border-none rounded-3xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
 										disabled={saving}
 										onClick={handleSaveCurrentPage}
 										type="button"
@@ -243,12 +251,12 @@ function App() {
 								</div>
 							</div>
 						) : (
-							<div className="tab-content">
+							<div className="flex flex-col gap-4 min-h-[200px]">
 								{/* Import Actions */}
-								<div className="import-actions">
-									<div className="import-item">
+								<div className="flex flex-col gap-4">
+									<div className="flex flex-col gap-2">
 										<button
-											className="chatgpt-btn"
+											className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center transition-colors duration-200 hover:bg-gray-50"
 											onClick={() => {
 												chrome.tabs.create({
 													url: "https://chatgpt.com/#settings/Personalization",
@@ -258,7 +266,7 @@ function App() {
 										>
 											<svg
 												aria-label="ChatGPT Logo"
-												className="chatgpt-logo"
+												className="w-4.5 h-4.5 flex-shrink-0 mr-2"
 												fill="currentColor"
 												role="img"
 												viewBox="0 0 24 24"
@@ -271,9 +279,9 @@ function App() {
 										</button>
 									</div>
 
-									<div className="import-item">
+									<div className="flex flex-col gap-2">
 										<button
-											className="twitter-btn"
+											className="w-full py-3 px-3 bg-white text-black border border-gray-200 rounded-md text-sm font-medium cursor-pointer flex items-center justify-center transition-colors duration-200 outline-none appearance-none hover:bg-gray-50 focus:outline-none"
 											onClick={() => {
 												chrome.tabs.create({
 													url: "https://x.com/i/bookmarks",
@@ -283,7 +291,7 @@ function App() {
 										>
 											<svg
 												aria-label="X Twitter Logo"
-												className="twitter-logo"
+												className="w-4.5 h-4.5 flex-shrink-0 mr-2"
 												fill="currentColor"
 												viewBox="0 0 24 24"
 												xmlns="http://www.w3.org/2000/svg"
@@ -293,7 +301,7 @@ function App() {
 											</svg>
 											Import X Bookmarks
 										</button>
-										<p className="import-instructions">
+										<p className="m-0 text-xs text-gray-500 leading-tight pl-1">
 											Click on supermemory on top right to import bookmarks
 										</p>
 									</div>
@@ -302,11 +310,11 @@ function App() {
 						)}
 
 						{showProjectSelector && (
-							<div className="project-selector">
-								<div className="project-selector-header">
+							<div className="absolute inset-0 bg-white rounded-lg z-[1000] shadow-xl flex flex-col">
+								<div className="flex justify-between items-center p-4 border-b border-gray-200 text-base font-semibold text-black flex-shrink-0">
 									<span>Select the Project</span>
 									<button
-										className="project-close-btn"
+										className="bg-transparent border-none text-xl cursor-pointer text-gray-500 p-0 w-6 h-6 flex items-center justify-center hover:text-black"
 										onClick={() => setShowProjectSelector(false)}
 										type="button"
 									>
@@ -314,26 +322,28 @@ function App() {
 									</button>
 								</div>
 								{loadingProjects ? (
-									<div className="project-loading">Loading projects...</div>
+									<div className="py-8 px-4 text-center text-gray-500 text-sm">Loading projects...</div>
 								) : (
-									<div className="project-list">
+									<div className="flex-1 overflow-y-auto min-h-0">
 										{projects.map((project) => (
 											<button
-												className={`project-item ${defaultProject?.id === project.id ? "selected" : ""}`}
+												className={`flex justify-between items-center py-3 px-4 cursor-pointer transition-colors duration-200 border-b border-gray-100 bg-transparent border-none w-full text-left last:border-b-0 hover:bg-gray-50 ${
+													defaultProject?.id === project.id ? "bg-blue-50" : ""
+												}`}
 												key={project.id}
 												onClick={() => handleProjectSelect(project)}
 												type="button"
 											>
-												<div className="project-item-info">
-													<span className="project-item-name">
+												<div className="flex flex-col flex-1 gap-0.5">
+													<span className="text-sm font-medium text-black break-words leading-tight">
 														{project.name}
 													</span>
-													<span className="project-item-count">
+													<span className="text-xs text-gray-500">
 														{project.documentCount} docs
 													</span>
 												</div>
 												{defaultProject?.id === project.id && (
-													<span className="project-item-check">✓</span>
+													<span className="text-blue-600 font-bold text-base">✓</span>
 												)}
 											</button>
 										))}
@@ -343,24 +353,24 @@ function App() {
 						)}
 					</div>
 				) : (
-					<div className="unauthenticated">
-						<div className="login-intro">
-							<h2 className="login-title">
+					<div className="text-center py-2">
+						<div className="mb-8">
+							<h2 className="m-0 mb-4 text-sm font-normal text-black leading-tight">
 								Login to unlock all chrome extension features
 							</h2>
 
-							<ul className="features-list">
-								<li>Save any page to your supermemory</li>
-								<li>Import all your Twitter / X Bookmarks</li>
-								<li>Import your ChatGPT Memories</li>
+							<ul className="list-none p-0 m-0 text-left">
+								<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Save any page to your supermemory</li>
+								<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Import all your Twitter / X Bookmarks</li>
+								<li className="py-1.5 text-sm text-black relative pl-5 before:content-['•'] before:absolute before:left-0 before:text-black before:font-bold">Import your ChatGPT Memories</li>
 							</ul>
 						</div>
 
-						<div className="login-actions">
-							<p className="login-help">
+						<div className="mt-8">
+							<p className="m-0 mb-4 text-sm text-gray-500">
 								Having trouble logging in?{" "}
 								<button
-									className="help-link"
+									className="bg-transparent border-none text-blue-500 cursor-pointer underline text-sm p-0 hover:text-blue-700"
 									onClick={() => {
 										window.open("mailto:[email protected]", "_blank")
 									}}
@@ -371,7 +381,7 @@ function App() {
 							</p>
 
 							<button
-								className="login-primary-btn"
+								className="w-full py-3 px-6 bg-gray-700 text-white border-none rounded-3xl text-base font-medium cursor-pointer transition-colors duration-200 hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
 								onClick={() => {
 									chrome.tabs.create({
 										url: import.meta.env.PROD
diff --git a/apps/browser-extension/entrypoints/popup/style.css b/apps/browser-extension/entrypoints/popup/style.css
index ee057e19..5e7a2b6f 100644
--- a/apps/browser-extension/entrypoints/popup/style.css
+++ b/apps/browser-extension/entrypoints/popup/style.css
@@ -15,46 +15,6 @@
 	-webkit-text-size-adjust: 100%;
 }
 
-a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-}
-a:hover {
-	color: #535bf2;
-}
-
-body {
-	margin: 0;
-	display: flex;
-	place-items: center;
-	min-width: 320px;
-	min-height: 100vh;
-}
-
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	background-color: #1a1a1a;
-	cursor: pointer;
-	transition: border-color 0.25s;
-}
-button:hover {
-	border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-	outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
 	:root {
diff --git a/apps/browser-extension/entrypoints/welcome/Welcome.tsx b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
index 205fbad2..be59538c 100644
--- a/apps/browser-extension/entrypoints/welcome/Welcome.tsx
+++ b/apps/browser-extension/entrypoints/welcome/Welcome.tsx
@@ -1,6 +1,6 @@
 function Welcome() {
 	return (
-		<div className="min-h-screen flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
+		<div className="min-h-screen font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
 			<div className="max-w-4xl w-full text-center">
 				{/* Header */}
 				<div className="mb-12">
@@ -17,12 +17,16 @@ function Welcome() {
 
 				{/* Features Section */}
 				<div className="mb-12">
-					<h2 className="text-2xl font-semibold text-black mb-8">What can you do with supermemory?</h2>
+					<h2 className="text-2xl font-semibold text-black mb-8"
+						>What can you do with supermemory
+					?</h2>
 
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
 						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
 							<div className="text-3xl mb-4 block">💾</div>
-							<h3 className="text-lg font-semibold text-black mb-3">Save Any Page</h3>
+							<h3 className="text-lg font-semibold text-black mb-3"
+								>Save Any Pag
+							e</h3>
 							<p className="text-sm text-gray-600 leading-snug">
 								Instantly save web pages, articles, and content to your personal
 								knowledge base
@@ -31,7 +35,9 @@ function Welcome() {
 
 						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
 							<div className="text-3xl mb-4 block">🐦</div>
-							<h3 className="text-lg font-semibold text-black mb-3">Import Twitter/X Bookmarks</h3>
+							<h3 className="text-lg font-semibold text-black mb-3">
+								Import Twitter/X Bookmarks
+							</h3>
 							<p className="text-sm text-gray-600 leading-snug">
 								Bring all your saved tweets and bookmarks into one organized
 								place
@@ -40,7 +46,9 @@ function Welcome() {
 
 						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
 							<div className="text-3xl mb-4 block">🤖</div>
-							<h3 className="text-lg font-semibold text-black mb-3">Import ChatGPT Memories</h3>
+							<h3 className="text-lg font-semibold text-black mb-3">
+								Import ChatGPT Memories
+							</h3>
 							<p className="text-sm text-gray-600 leading-snug">
 								Keep your important AI conversations and insights accessible
 							</p>
@@ -48,7 +56,9 @@ function Welcome() {
 
 						<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
 							<div className="text-3xl mb-4 block">🔍</div>
-							<h3 className="text-lg font-semibold text-black mb-3">AI-Powered Search</h3>
+							<h3 className="text-lg font-semibold text-black mb-3">
+								AI-Powered Search
+							</h3>
 							<p className="text-sm text-gray-600 leading-snug">
 								Find anything you've saved using intelligent semantic search
 							</p>