diff --git a/backend/src/index.js b/backend/src/index.js
index adb2bfa..743244f 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -70,7 +70,7 @@ app.use(clerkMiddleware());
 
 app.get('/', (req, res) => {
     res.json({
-        message: 'Portlify API is running',
+        message: 'PortlifyAi API is running',
         version: '1.0.0'
     });
 });
diff --git a/backend/src/routes/export.js b/backend/src/routes/export.js
index 875a83e..e5dbc7f 100644
--- a/backend/src/routes/export.js
+++ b/backend/src/routes/export.js
@@ -183,7 +183,7 @@ const generateHTML = (profile, preferences) => {
         ` : ''}
 
         <footer>
-            <p>Generated with ❤️ by Portlify</p>
+            <p>Generated with ❤️ by PortlifyAi</p>
         </footer>
     </div>
     <script src="script.js"></script>
@@ -437,7 +437,7 @@ router.get('/portfolio', authMiddleware, getUserFromAuth, async (req, res) => {
         // Add README
         archive.append(`# ${profile.basicDetails?.name || user.username}'s Portfolio
 
-Generated from Portlify on ${new Date().toLocaleDateString()}
+Generated from PortlifyAi on ${new Date().toLocaleDateString()}
 
 ## Usage
 1. Open index.html in a browser
@@ -451,7 +451,7 @@ Generated from Portlify on ${new Date().toLocaleDateString()}
 ## Customization
 Feel free to modify the CSS variables in styles.css to change colors.
 
-Generated with ❤️ by Portlify
+Generated with ❤️ by PortlifyAi
 ${process.env.FRONTEND_URL || 'https://portlify.techycsr.dev'}
 `, { name: 'README.md' });
 
diff --git a/frontend/index.html b/frontend/index.html
index 5bb059c..0419adc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,23 +6,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <!-- Primary Meta Tags -->
-  <title>Portlify - AI-Powered Resume to Portfolio Builder</title>
-  <meta name="title" content="Portlify - AI-Powered Resume to Portfolio Builder" />
+  <title>PortlifyAi - AI-Powered Resume to Portfolio Builder</title>
+  <meta name="title" content="PortlifyAi - AI-Powered Resume to Portfolio Builder" />
   <meta name="description"
-    content="Transform your resume into a stunning, professional portfolio in seconds. Upload your PDF, let AI extract your skills & experience, and get a shareable portfolio URL instantly." />
+    content="PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL." />
   <meta name="keywords"
-    content="portfolio builder, resume to portfolio, AI portfolio, professional portfolio, developer portfolio, career portfolio, resume parser, online portfolio, portfolio website, job portfolio" />
+    content="PortlifyAi, Portlify AI, AI portfolio builder, resume to portfolio, AI resume parser, professional portfolio, developer portfolio, online portfolio website, portfolio generator, career portfolio, job portfolio, resume portfolio maker" />
   <meta name="author" content="TechyCSR" />
   <meta name="robots" content="index, follow" />
   <meta name="language" content="English" />
   <meta name="revisit-after" content="7 days" />
-  <link rel="canonical" href="https://portlify.techycsr.dev" />
+  <link rel="canonical" href="https://portlify.techycsr.dev/" />
 
-  <!-- Favicon -->
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <!-- Favicon — all generated from portlify_clean_logo.png -->
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />
+  <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png?v=2" />
+  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png?v=2" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
+  <link rel="shortcut icon" href="/favicon-32x32.png?v=2" />
   <link rel="manifest" href="/manifest.json" />
   <meta name="theme-color" content="#5a7a9e" />
   <meta name="msapplication-TileColor" content="#5a7a9e" />
@@ -30,14 +33,14 @@
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://portlify.techycsr.dev/" />
-  <meta property="og:title" content="Portlify - AI-Powered Resume to Portfolio Builder" />
+  <meta property="og:title" content="PortlifyAi - AI-Powered Resume to Portfolio Builder" />
   <meta property="og:description"
-    content="Transform your resume into a stunning, professional portfolio in seconds. Upload your PDF, let AI extract your skills & experience, and get a shareable portfolio URL instantly." />
+    content="PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL." />
   <meta property="og:image" content="https://portlify.techycsr.dev/og-image.png" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
-  <meta property="og:image:alt" content="Portlify - Transform your resume into a portfolio" />
-  <meta property="og:site_name" content="Portlify" />
+  <meta property="og:image:alt" content="PortlifyAi - Transform your resume into a portfolio" />
+  <meta property="og:site_name" content="PortlifyAi" />
   <meta property="og:locale" content="en_US" />
 
   <!-- Open Graph Video -->
@@ -49,16 +52,16 @@
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:url" content="https://portlify.techycsr.dev/" />
-  <meta name="twitter:title" content="Portlify - AI-Powered Resume to Portfolio Builder" />
+  <meta name="twitter:title" content="PortlifyAi - AI-Powered Resume to Portfolio Builder" />
   <meta name="twitter:description"
-    content="Transform your resume into a stunning, professional portfolio in seconds. Upload your PDF, let AI extract your skills & experience, and get a shareable portfolio URL instantly." />
+    content="PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL." />
   <meta name="twitter:image" content="https://portlify.techycsr.dev/og-image.png" />
   <meta name="twitter:creator" content="@techycsr" />
   <meta name="twitter:site" content="@techycsr" />
 
   <!-- Additional SEO -->
-  <meta name="application-name" content="Portlify" />
-  <meta name="apple-mobile-web-app-title" content="Portlify" />
+  <meta name="application-name" content="PortlifyAi" />
+  <meta name="apple-mobile-web-app-title" content="PortlifyAi" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <meta name="mobile-web-app-capable" content="yes" />
@@ -69,9 +72,10 @@
     {
       "@context": "https://schema.org",
       "@type": "WebApplication",
-      "name": "Portlify",
+      "name": "PortlifyAi",
       "url": "https://portlify.techycsr.dev",
-      "description": "AI-powered resume to portfolio builder. Transform your resume into a stunning, professional portfolio in seconds.",
+      "description": "PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL.",
+      "alternateName": ["Portlify AI", "Portlify", "PortlifyAi Portfolio"],
       "applicationCategory": "BusinessApplication",
       "operatingSystem": "Web",
       "offers": {
@@ -113,8 +117,8 @@
     {
       "@context": "https://schema.org",
       "@type": "VideoObject",
-      "name": "Portlify Demo — AI Resume to Portfolio Builder",
-      "description": "Watch how Portlify transforms your resume into a professional portfolio website in seconds using AI. Upload your PDF, DOC, or DOCX and get a shareable portfolio URL instantly.",
+      "name": "PortlifyAi Demo — AI Resume to Portfolio Builder",
+      "description": "Watch how PortlifyAi transforms your resume into a professional portfolio website in seconds using AI. Upload your PDF, DOC, or DOCX and get a shareable portfolio URL instantly.",
       "thumbnailUrl": "https://portlify.techycsr.dev/og-image.png",
       "uploadDate": "2026-01-15",
       "contentUrl": "https://github.com/user-attachments/assets/e36d6f10-bb27-4ae8-a2b6-81122ef85994",
@@ -147,9 +151,9 @@
   <div id="root"></div>
   <noscript>
     <div style="max-width:800px;margin:40px auto;padding:20px;font-family:system-ui,sans-serif;color:#1e293b">
-      <h1>Portlify — AI-Powered Resume to Portfolio Builder</h1>
-      <p>Transform your resume into a stunning, professional portfolio in seconds. Upload your PDF, DOC, or DOCX and let
-        AI extract your skills, experience, projects, and achievements.</p>
+      <h1>PortlifyAi — AI-Powered Resume to Portfolio Builder</h1>
+      <p>PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX and
+        let AI extract your skills, experience, projects, and achievements into a shareable portfolio URL.</p>
       <h2>Features</h2>
       <ul>
         <li>Smart AI Resume Parsing — supports PDF, DOC, DOCX</li>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2213aab..9ebc811 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -370,16 +370,16 @@
             }
         },
         "node_modules/@clerk/shared": {
-            "version": "3.44.0",
-            "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.44.0.tgz",
-            "integrity": "sha512-kH+chNeZwqml3IDpWLgebWECfOZifyUQO4OISd/96w1EuCY1Bzw6cBq/ZbpsoO8jyG8/6bGr/MGXLhDzTrpPfA==",
+            "version": "3.47.7",
+            "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-3.47.7.tgz",
+            "integrity": "sha512-9Yv4MJFEaC7BzV0whxa4txQ4SoMu/3j1LBnI85EBykb5CcfXxIKvNX/9sjMUUySHlTOjsj7XZa5i3W5Dx02K/Q==",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
                 "csstype": "3.1.3",
                 "dequal": "2.0.3",
                 "glob-to-regexp": "0.4.1",
-                "js-cookie": "3.0.5",
+                "js-cookie": "3.0.7",
                 "std-env": "^3.9.0",
                 "swr": "2.3.4"
             },
@@ -4311,12 +4311,12 @@
             }
         },
         "node_modules/js-cookie": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
-            "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.7.tgz",
+            "integrity": "sha512-z/wZZgDrkNV1eA0ULjM/F9/50Ya8fbzgKneSpoPsXSGd0KnpdtHfOZWK+GcwLk+EZbS4F9RBhU+K2RgzuDaItw==",
             "license": "MIT",
             "engines": {
-                "node": ">=14"
+                "node": ">=20"
             }
         },
         "node_modules/js-tokens": {
diff --git a/frontend/package.json b/frontend/package.json
index 64d04e3..5094ff0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,10 +32,10 @@
         "eslint-plugin-react": "^7.37.0",
         "eslint-plugin-react-hooks": "^5.1.0",
         "globals": "^15.14.0",
+        "jsdom": "^25.0.0",
         "postcss": "^8.4.32",
         "tailwindcss": "^3.4.0",
         "vite": "^5.0.0",
-        "jsdom": "^25.0.0",
         "vitest": "^2.1.0"
     }
 }
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
index 972d079..b1912fd 100644
Binary files a/frontend/public/apple-touch-icon.png and b/frontend/public/apple-touch-icon.png differ
diff --git a/frontend/public/favicon-16x16.png b/frontend/public/favicon-16x16.png
index 608c894..4530a53 100644
Binary files a/frontend/public/favicon-16x16.png and b/frontend/public/favicon-16x16.png differ
diff --git a/frontend/public/favicon-192x192.png b/frontend/public/favicon-192x192.png
index 1b8778c..71a9136 100644
Binary files a/frontend/public/favicon-192x192.png and b/frontend/public/favicon-192x192.png differ
diff --git a/frontend/public/favicon-32x32.png b/frontend/public/favicon-32x32.png
index 439f25b..31aef26 100644
Binary files a/frontend/public/favicon-32x32.png and b/frontend/public/favicon-32x32.png differ
diff --git a/frontend/public/favicon-512x512.png b/frontend/public/favicon-512x512.png
index 2930a15..1930b48 100644
Binary files a/frontend/public/favicon-512x512.png and b/frontend/public/favicon-512x512.png differ
diff --git a/frontend/public/favicon.png b/frontend/public/favicon.png
new file mode 100644
index 0000000..31aef26
Binary files /dev/null and b/frontend/public/favicon.png differ
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
index d359530..7196d71 100644
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -1,10 +1,3 @@
 <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#5a7a9e"/>
-      <stop offset="100%" style="stop-color:#7a96b5"/>
-    </linearGradient>
-  </defs>
-  <rect width="512" height="512" rx="96" fill="url(#gradient)"/>
-  <text x="256" y="340" font-family="Arial, sans-serif" font-size="300" font-weight="bold" fill="white" text-anchor="middle">P</text>
+  <image href="/portlify_clean_logo.png" width="512" height="512" preserveAspectRatio="xMidYMid meet"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index 96eea35..7540604 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -1,7 +1,7 @@
 {
-  "name": "Portlify - AI Resume to Portfolio Builder",
-  "short_name": "Portlify",
-  "description": "Transform your resume into a stunning, professional portfolio in seconds with AI.",
+  "name": "PortlifyAi - AI Resume to Portfolio Builder",
+  "short_name": "PortlifyAi",
+  "description": "PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL.",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#09090b",
@@ -12,10 +12,16 @@
   "categories": ["productivity", "business", "utilities"],
   "icons": [
     {
-      "src": "/favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "any maskable"
+      "src": "/portlify_clean_logo.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/portlify_clean_logo.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
     },
     {
       "src": "/favicon-192x192.png",
@@ -25,7 +31,8 @@
     {
       "src": "/favicon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     }
   ],
   "screenshots": [
@@ -34,9 +41,9 @@
       "sizes": "1200x630",
       "type": "image/png",
       "form_factor": "wide",
-      "label": "Portlify Homepage"
+      "label": "PortlifyAi Homepage"
     }
   ],
   "related_applications": [],
   "prefer_related_applications": false
-}
+}
\ No newline at end of file
diff --git a/frontend/public/og-image.svg b/frontend/public/og-image.svg
index e415920..bc4e52c 100644
--- a/frontend/public/og-image.svg
+++ b/frontend/public/og-image.svg
@@ -30,10 +30,9 @@
   <rect width="1200" height="630" fill="url(#grid)"/>
   
   <g transform="translate(600, 250)">
-    <rect x="-45" y="-120" width="90" height="90" rx="20" fill="url(#accent)"/>
-    <text x="0" y="-60" font-family="Arial, sans-serif" font-size="50" font-weight="bold" fill="white" text-anchor="middle">P</text>
+    <image href="portlify_clean_logo.png" x="-50" y="-130" width="100" height="100" preserveAspectRatio="xMidYMid meet"/>
     
-    <text y="30" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="#fafafa" text-anchor="middle">Portlify</text>
+    <text y="30" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="#fafafa" text-anchor="middle">PortlifyAi</text>
     
     <text y="90" font-family="Arial, sans-serif" font-size="28" fill="#a1a1aa" text-anchor="middle">AI-Powered Resume to Portfolio Builder</text>
   </g>
diff --git a/frontend/public/portlify_clean_logo.png b/frontend/public/portlify_clean_logo.png
new file mode 100644
index 0000000..d7001d1
Binary files /dev/null and b/frontend/public/portlify_clean_logo.png differ
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
index b432561..95a1b40 100644
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -1,4 +1,4 @@
-# Robots.txt for Portlify
+# Robots.txt for PortlifyAi
 # https://portlify.techycsr.dev
 # Created by TechyCSR
 
diff --git a/frontend/public/sitemap.xml b/frontend/public/sitemap.xml
index c9433d2..e57b519 100644
--- a/frontend/public/sitemap.xml
+++ b/frontend/public/sitemap.xml
@@ -2,25 +2,25 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://portlify.techycsr.dev/</loc>
-    <lastmod>2026-02-21</lastmod>
+    <lastmod>2026-06-06</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://portlify.techycsr.dev/premium</loc>
-    <lastmod>2026-02-21</lastmod>
+    <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://portlify.techycsr.dev/sign-in</loc>
-    <lastmod>2026-02-21</lastmod>
+    <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.5</priority>
   </url>
   <url>
     <loc>https://portlify.techycsr.dev/sign-up</loc>
-    <lastmod>2026-02-21</lastmod>
+    <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.5</priority>
   </url>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5d3ae8d..71216dd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,6 +16,8 @@ import Premium from './pages/Premium'
 import Portfolio from './pages/Portfolio'
 import ProtectedRoute from './components/ProtectedRoute'
 import DashboardLayout from './components/DashboardLayout'
+import ClerkThemeProvider from './components/ClerkThemeProvider'
+import SeoManager from './components/SeoManager'
 import { getClerkAppearance } from './utils/clerkAppearance'
 
 // Layout wrapper that conditionally shows navbar
@@ -127,12 +129,15 @@ function AppRoutes() {
 function App() {
     return (
         <ThemeProvider>
-            <ToastProvider>
-                <Router>
-                    <ScrollToTop />
-                    <AppRoutes />
-                </Router>
-            </ToastProvider>
+            <ClerkThemeProvider>
+                <ToastProvider>
+                    <Router>
+                        <ScrollToTop />
+                        <SeoManager />
+                        <AppRoutes />
+                    </Router>
+                </ToastProvider>
+            </ClerkThemeProvider>
         </ThemeProvider>
     )
 }
diff --git a/frontend/src/components/BrandLogo.jsx b/frontend/src/components/BrandLogo.jsx
new file mode 100644
index 0000000..6bfcba9
--- /dev/null
+++ b/frontend/src/components/BrandLogo.jsx
@@ -0,0 +1,47 @@
+import { BRAND_LOGO_ALT, BRAND_LOGO_SRC, BRAND_NAME_DISPLAY } from '../constants/brand'
+
+const SIZE_STYLES = {
+    sm: {
+        image: 'w-8 h-8 rounded-lg',
+        text: 'text-base',
+    },
+    md: {
+        image: 'w-9 h-9 sm:w-10 sm:h-10 rounded-xl',
+        text: 'text-lg sm:text-xl',
+    },
+    lg: {
+        image: 'w-12 h-12 rounded-xl',
+        text: 'text-2xl',
+    },
+}
+
+function BrandLogo({
+    size = 'md',
+    showName = true,
+    className = '',
+    nameClassName = '',
+    imageClassName = '',
+}) {
+    const styles = SIZE_STYLES[size] || SIZE_STYLES.md
+
+    return (
+        <span className={`inline-flex items-center gap-2.5 sm:gap-3 min-w-0 ${className}`}>
+            <img
+                src={BRAND_LOGO_SRC}
+                alt={BRAND_LOGO_ALT}
+                className={`${styles.image} object-contain flex-shrink-0 shadow-sm ${imageClassName}`}
+                width={size === 'sm' ? 32 : size === 'lg' ? 48 : 40}
+                height={size === 'sm' ? 32 : size === 'lg' ? 48 : 40}
+                decoding="async"
+            />
+            {showName && (
+                <span className={`font-display font-bold truncate ${styles.text} ${nameClassName}`}>
+                    <span className="text-primary">Portlify</span>
+                    <span className="heading-gradient">Ai</span>
+                </span>
+            )}
+        </span>
+    )
+}
+
+export default BrandLogo
\ No newline at end of file
diff --git a/frontend/src/components/ClerkThemeProvider.jsx b/frontend/src/components/ClerkThemeProvider.jsx
new file mode 100644
index 0000000..4c3c2c3
--- /dev/null
+++ b/frontend/src/components/ClerkThemeProvider.jsx
@@ -0,0 +1,24 @@
+import { ClerkProvider } from '@clerk/clerk-react'
+import { useTheme } from '../context/ThemeContext'
+import { getClerkAppearance } from '../utils/clerkAppearance'
+
+const CLERK_PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+
+if (!CLERK_PUBLISHABLE_KEY) {
+    throw new Error('Missing Clerk Publishable Key')
+}
+
+function ClerkThemeProvider({ children }) {
+    const { theme } = useTheme()
+
+    return (
+        <ClerkProvider
+            publishableKey={CLERK_PUBLISHABLE_KEY}
+            appearance={getClerkAppearance(theme)}
+        >
+            {children}
+        </ClerkProvider>
+    )
+}
+
+export default ClerkThemeProvider
\ No newline at end of file
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 051d28a..5eeadd7 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -8,6 +8,8 @@ import { dashboardNavItems } from './DashboardSidebar'
 import ThemeToggle from './ThemeToggle'
 import { useTheme } from '../context/ThemeContext'
 import { getUserButtonAppearance } from '../utils/clerkAppearance'
+import BrandLogo from './BrandLogo'
+import { BRAND_NAME_DISPLAY } from '../constants/brand'
 
 const DASHBOARD_PATHS = dashboardNavItems.map((item) => item.to)
 const MOBILE_MENU_ID = 'navbar-mobile-menu'
@@ -108,16 +110,11 @@ function Navbar() {
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="flex justify-between items-center h-16">
                         <Link
-                            to={onDashboard ? '/dashboard' : '/'}
+                            to="/"
                             className="flex items-center gap-3 group min-w-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50"
-                            aria-label={onDashboard ? 'Portlify dashboard home' : 'Portlify home'}
+                            aria-label={`${BRAND_NAME_DISPLAY} home`}
                         >
-                            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl flex items-center justify-center bg-primary-500 shadow-sm transition-transform group-hover:scale-[1.03]">
-                                <span className="text-white font-bold text-lg sm:text-xl">P</span>
-                            </div>
-                            <span className="font-display font-bold text-lg sm:text-xl heading-gradient truncate">
-                                Portlify
-                            </span>
+                            <BrandLogo className="transition-transform group-hover:scale-[1.02]" />
                         </Link>
 
                         {/* Desktop */}
diff --git a/frontend/src/components/SeoManager.jsx b/frontend/src/components/SeoManager.jsx
new file mode 100644
index 0000000..e74029b
--- /dev/null
+++ b/frontend/src/components/SeoManager.jsx
@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { applySiteSeo } from '../utils/seo'
+import { getAppUrl } from '../utils/appUrl'
+import {
+    isPortfolioRoute,
+    isPrivateRoute,
+    getPrivateRouteTitle,
+    resolvePageSeo,
+} from '../constants/seo'
+
+function SeoManager() {
+    const { pathname } = useLocation()
+
+    useEffect(() => {
+        if (isPortfolioRoute(pathname)) return
+
+        const siteUrl = getAppUrl().replace(/\/$/, '')
+        const canonical = `${siteUrl}${pathname === '/' ? '/' : pathname}`
+
+        if (isPrivateRoute(pathname)) {
+            applySiteSeo({
+                title: getPrivateRouteTitle(pathname),
+                robots: 'noindex, nofollow',
+                canonical,
+            })
+            return
+        }
+
+        const pageSeo = resolvePageSeo(pathname)
+        applySiteSeo({
+            ...pageSeo,
+            canonical,
+        })
+    }, [pathname])
+
+    return null
+}
+
+export default SeoManager
\ No newline at end of file
diff --git a/frontend/src/components/onboarding/OnboardingOptionCard.jsx b/frontend/src/components/onboarding/OnboardingOptionCard.jsx
new file mode 100644
index 0000000..c8cd5df
--- /dev/null
+++ b/frontend/src/components/onboarding/OnboardingOptionCard.jsx
@@ -0,0 +1,78 @@
+import { motion } from 'framer-motion'
+import { Check } from 'lucide-react'
+import { IconTile, ICON_STROKE } from '../IconTile'
+
+const cardVariants = {
+    initial: { opacity: 0, y: 24 },
+    animate: (i) => ({
+        opacity: 1,
+        y: 0,
+        transition: { delay: i * 0.08, duration: 0.35, ease: 'easeOut' },
+    }),
+}
+
+function OnboardingOptionCard({
+    icon,
+    title,
+    description,
+    footer,
+    footerLabel,
+    selected,
+    onSelect,
+    index = 0,
+}) {
+    return (
+        <motion.button
+            type="button"
+            variants={cardVariants}
+            initial="initial"
+            animate="animate"
+            whileHover={{ y: -2 }}
+            whileTap={{ scale: 0.99 }}
+            custom={index}
+            onClick={onSelect}
+            aria-pressed={selected}
+            className={[
+                'relative w-full text-left rounded-2xl sm:rounded-3xl p-5 sm:p-7 lg:p-8',
+                'border-2 transition-all duration-200 min-h-[11.5rem] sm:min-h-[13rem]',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                selected
+                    ? 'border-primary-500 bg-surface shadow-md'
+                    : 'border-border bg-surface hover:border-border-hover hover:bg-surface-hover',
+            ].join(' ')}
+        >
+            {selected && (
+                <motion.div
+                    initial={{ scale: 0 }}
+                    animate={{ scale: 1 }}
+                    className="absolute top-4 right-4 w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-primary-500 flex items-center justify-center text-white"
+                    aria-hidden="true"
+                >
+                    <Check size={16} strokeWidth={ICON_STROKE} />
+                </motion.div>
+            )}
+
+            <IconTile
+                icon={icon}
+                className="w-12 h-12 sm:w-14 sm:h-14 mb-4 sm:mb-5"
+                size={22}
+                iconClassName={selected ? 'text-primary-400' : 'text-secondary'}
+            />
+
+            <h3 className="text-lg sm:text-xl font-bold text-primary mb-1.5 sm:mb-2 pr-8">
+                {title}
+            </h3>
+            <p className="text-sm sm:text-base text-secondary mb-3 sm:mb-4">
+                {description}
+            </p>
+            {footer && (
+                <p className="text-xs sm:text-sm text-muted leading-relaxed">
+                    <span className="font-medium text-secondary">{footerLabel}:</span>{' '}
+                    {footer}
+                </p>
+            )}
+        </motion.button>
+    )
+}
+
+export default OnboardingOptionCard
\ No newline at end of file
diff --git a/frontend/src/components/onboarding/OnboardingProgress.jsx b/frontend/src/components/onboarding/OnboardingProgress.jsx
new file mode 100644
index 0000000..5fd5602
--- /dev/null
+++ b/frontend/src/components/onboarding/OnboardingProgress.jsx
@@ -0,0 +1,101 @@
+import { Fragment } from 'react'
+import { Check } from 'lucide-react'
+import { ICON_STROKE } from '../IconTile'
+
+export const ONBOARDING_STEPS = [
+    { id: 1, label: 'Portfolio Type', shortLabel: 'Type' },
+    { id: 2, label: 'Experience', shortLabel: 'Level' },
+    { id: 3, label: 'Theme', shortLabel: 'Theme' },
+]
+
+function OnboardingProgress({ step }) {
+    const currentStep = ONBOARDING_STEPS[step - 1]
+    const progressPercent = ((step - 1) / (ONBOARDING_STEPS.length - 1)) * 100
+
+    return (
+        <nav className="mb-8 sm:mb-10" aria-label="Onboarding progress">
+            <div className="mb-5 sm:mb-6 px-1">
+                <div
+                    className="h-1 rounded-full bg-border overflow-hidden"
+                    role="progressbar"
+                    aria-valuenow={step}
+                    aria-valuemin={1}
+                    aria-valuemax={ONBOARDING_STEPS.length}
+                    aria-label={`Step ${step} of ${ONBOARDING_STEPS.length}`}
+                >
+                    <div
+                        className="h-full rounded-full transition-all duration-500 ease-out"
+                        style={{
+                            width: `${progressPercent}%`,
+                            background: 'var(--gradient-primary)',
+                        }}
+                    />
+                </div>
+            </div>
+
+            <ol className="flex items-start w-full max-w-md sm:max-w-lg mx-auto px-1">
+                {ONBOARDING_STEPS.map((item, index) => {
+                    const isComplete = step > item.id
+                    const isCurrent = step === item.id
+
+                    return (
+                        <Fragment key={item.id}>
+                            {index > 0 && (
+                                <li
+                                    className="flex-1 h-0.5 mt-[1.125rem] sm:mt-5 mx-1.5 sm:mx-2 rounded-full bg-border overflow-hidden list-none min-w-[1.5rem]"
+                                    aria-hidden="true"
+                                >
+                                    <div
+                                        className="h-full rounded-full transition-all duration-500 ease-out"
+                                        style={{
+                                            width: step > index ? '100%' : '0%',
+                                            background: 'var(--color-primary-500)',
+                                        }}
+                                    />
+                                </li>
+                            )}
+
+                            <li className="flex flex-col items-center gap-1.5 sm:gap-2 flex-shrink-0 list-none">
+                                <div
+                                    className={[
+                                        'w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-300',
+                                        isComplete
+                                            ? 'border-primary-500 bg-primary-500 text-white'
+                                            : isCurrent
+                                                ? 'border-primary-500 bg-surface text-primary-500 shadow-[0_0_0_4px_rgba(var(--primary-rgb),0.12)]'
+                                                : 'border-border bg-surface text-muted',
+                                    ].join(' ')}
+                                    aria-current={isCurrent ? 'step' : undefined}
+                                >
+                                    {isComplete ? (
+                                        <Check size={16} strokeWidth={ICON_STROKE} aria-hidden="true" />
+                                    ) : (
+                                        <span>{item.id}</span>
+                                    )}
+                                </div>
+
+                                <span
+                                    className={[
+                                        'text-[10px] sm:text-xs font-medium text-center leading-tight w-[3.25rem] sm:w-auto sm:min-w-[4.5rem]',
+                                        isCurrent ? 'text-primary' : isComplete ? 'text-secondary' : 'text-muted',
+                                    ].join(' ')}
+                                >
+                                    <span className="sm:hidden">{item.shortLabel}</span>
+                                    <span className="hidden sm:inline">{item.label}</span>
+                                </span>
+                            </li>
+                        </Fragment>
+                    )
+                })}
+            </ol>
+
+            <p className="text-center text-sm text-secondary mt-4 sm:mt-5">
+                Step {step} of {ONBOARDING_STEPS.length}
+                <span className="text-muted mx-1.5" aria-hidden="true">·</span>
+                <span className="text-primary font-medium">{currentStep?.label}</span>
+            </p>
+        </nav>
+    )
+}
+
+export default OnboardingProgress
\ No newline at end of file
diff --git a/frontend/src/components/onboarding/OnboardingThemeCard.jsx b/frontend/src/components/onboarding/OnboardingThemeCard.jsx
new file mode 100644
index 0000000..42f6d77
--- /dev/null
+++ b/frontend/src/components/onboarding/OnboardingThemeCard.jsx
@@ -0,0 +1,84 @@
+import { motion } from 'framer-motion'
+import { Check } from 'lucide-react'
+import { PORTFOLIO_PALETTES } from '../../portfolio/theme'
+import { ICON_STROKE } from '../IconTile'
+
+const cardVariants = {
+    initial: { opacity: 0, y: 20 },
+    animate: (i) => ({
+        opacity: 1,
+        y: 0,
+        transition: { delay: i * 0.06, duration: 0.35, ease: 'easeOut' },
+    }),
+}
+
+function OnboardingThemeCard({ theme, selected, onSelect, index = 0 }) {
+    const palette = PORTFOLIO_PALETTES[theme.id] || PORTFOLIO_PALETTES.modern
+    const lineColor = theme.isLight ? '#e4e4e7' : 'rgba(255,255,255,0.18)'
+    const lineMuted = theme.isLight ? '#f4f4f5' : 'rgba(255,255,255,0.08)'
+    const cardSurface = theme.isLight ? '#f4f4f5' : 'rgba(255,255,255,0.05)'
+
+    return (
+        <motion.button
+            type="button"
+            variants={cardVariants}
+            initial="initial"
+            animate="animate"
+            whileHover={{ y: -2 }}
+            whileTap={{ scale: 0.99 }}
+            custom={index}
+            onClick={onSelect}
+            aria-pressed={selected}
+            className={[
+                'relative w-full text-left rounded-xl sm:rounded-2xl p-2 sm:p-2.5',
+                'border-2 transition-all duration-200',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                selected
+                    ? 'border-primary-500 bg-surface shadow-md'
+                    : 'border-border bg-surface hover:border-border-hover',
+            ].join(' ')}
+        >
+            <div
+                className="aspect-[4/5] sm:aspect-[3/4] rounded-lg sm:rounded-xl overflow-hidden"
+                style={{ background: theme.previewBg }}
+            >
+                <div className="p-3 sm:p-4 h-full flex flex-col">
+                    <div
+                        className="w-8 h-8 sm:w-10 sm:h-10 rounded-full mb-2 sm:mb-3 flex-shrink-0"
+                        style={{
+                            background: `linear-gradient(135deg, ${palette.primary}, ${palette.secondary})`,
+                        }}
+                    />
+                    <div className="h-1.5 sm:h-2 rounded mb-1.5 sm:mb-2" style={{ background: lineColor, width: '70%' }} />
+                    <div className="h-1.5 sm:h-2 rounded mb-3 sm:mb-4" style={{ background: lineMuted, width: '50%' }} />
+                    <div className="flex-1 space-y-1.5 sm:space-y-2">
+                        {[1, 2, 3].map((n) => (
+                            <div
+                                key={n}
+                                className="h-6 sm:h-8 rounded-md sm:rounded-lg"
+                                style={{ background: cardSurface }}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+            <p className={`text-center text-sm sm:text-base font-medium mt-2 sm:mt-3 ${selected ? 'text-primary' : 'text-secondary'}`}>
+                {theme.name}
+            </p>
+
+            {selected && (
+                <motion.div
+                    initial={{ scale: 0 }}
+                    animate={{ scale: 1 }}
+                    className="absolute top-2 right-2 sm:top-2.5 sm:right-2.5 w-6 h-6 rounded-full bg-primary-500 flex items-center justify-center text-white"
+                    aria-hidden="true"
+                >
+                    <Check size={14} strokeWidth={ICON_STROKE} />
+                </motion.div>
+            )}
+        </motion.button>
+    )
+}
+
+export default OnboardingThemeCard
\ No newline at end of file
diff --git a/frontend/src/constants/brand.js b/frontend/src/constants/brand.js
new file mode 100644
index 0000000..638d698
--- /dev/null
+++ b/frontend/src/constants/brand.js
@@ -0,0 +1,34 @@
+export const BRAND_NAME = 'PortlifyAi'
+export const BRAND_NAME_DISPLAY = 'PortlifyAi'
+export const BRAND_ALTERNATE_NAMES = ['Portlify AI', 'Portlify', 'PortlifyAi Portfolio']
+export const BRAND_TAGLINE = 'AI-Powered Resume to Portfolio Builder'
+export const BRAND_DESCRIPTION =
+    'PortlifyAi transforms your resume into a stunning, professional portfolio in seconds. Upload PDF, DOC, or DOCX — AI extracts your skills, experience, and projects into a shareable portfolio URL.'
+export const BRAND_KEYWORDS = [
+    'PortlifyAi',
+    'Portlify AI',
+    'AI portfolio builder',
+    'resume to portfolio',
+    'AI resume parser',
+    'professional portfolio',
+    'developer portfolio',
+    'online portfolio website',
+    'portfolio generator',
+    'career portfolio',
+    'job portfolio',
+    'resume portfolio maker',
+].join(', ')
+export const BRAND_LOGO_SRC = '/portlify_clean_logo.png'
+export const BRAND_LOGO_ALT = 'PortlifyAi logo'
+export const BRAND_AUTHOR = 'TechyCSR'
+export const BRAND_AUTHOR_URL = 'https://techycsr.dev'
+export const BRAND_TWITTER = '@techycsr'
+export const BRAND_SOCIAL = [
+    'https://github.com/TechyCSR',
+    'https://linkedin.com/in/techycsr',
+    'https://twitter.com/techycsr',
+]
+
+export const DEFAULT_SITE_URL = 'https://portlify.techycsr.dev'
+export const DEFAULT_OG_IMAGE = `${DEFAULT_SITE_URL}/og-image.png`
+export const DEFAULT_TITLE = `${BRAND_NAME_DISPLAY} - ${BRAND_TAGLINE}`
\ No newline at end of file
diff --git a/frontend/src/constants/seo.js b/frontend/src/constants/seo.js
new file mode 100644
index 0000000..bfea857
--- /dev/null
+++ b/frontend/src/constants/seo.js
@@ -0,0 +1,79 @@
+import {
+    BRAND_DESCRIPTION,
+    BRAND_KEYWORDS,
+    BRAND_NAME_DISPLAY,
+    DEFAULT_TITLE,
+} from './brand'
+
+export const PAGE_SEO = {
+    '/': {
+        title: DEFAULT_TITLE,
+        description: BRAND_DESCRIPTION,
+        keywords: BRAND_KEYWORDS,
+        robots: 'index, follow',
+    },
+    '/premium': {
+        title: `Premium Plans | ${BRAND_NAME_DISPLAY}`,
+        description: `Unlock custom branding, portfolio analytics, and premium features with ${BRAND_NAME_DISPLAY} — the AI resume-to-portfolio builder.`,
+        robots: 'index, follow',
+    },
+    '/sign-in': {
+        title: `Sign In | ${BRAND_NAME_DISPLAY}`,
+        description: `Sign in to your ${BRAND_NAME_DISPLAY} account to manage and publish your AI-powered professional portfolio.`,
+        robots: 'index, follow',
+    },
+    '/sign-up': {
+        title: `Sign Up Free | ${BRAND_NAME_DISPLAY}`,
+        description: `Create your free ${BRAND_NAME_DISPLAY} account and turn your resume into a shareable portfolio in seconds.`,
+        robots: 'index, follow',
+    },
+}
+
+export const PRIVATE_ROUTE_PREFIXES = [
+    '/dashboard',
+    '/settings',
+    '/onboarding',
+    '/upload',
+    '/editor',
+    '/analytics',
+    '/username',
+]
+
+const PRIVATE_ROUTE_TITLES = {
+    '/dashboard': 'Dashboard',
+    '/settings': 'Settings',
+    '/onboarding': 'Onboarding',
+    '/upload': 'Upload Resume',
+    '/editor': 'Profile Editor',
+    '/analytics': 'Analytics',
+    '/username': 'Choose Username',
+}
+
+export function isPortfolioRoute(pathname) {
+    return pathname !== '/'
+        && !pathname.startsWith('/sign')
+        && !pathname.startsWith('/username')
+        && !pathname.startsWith('/onboarding')
+        && !pathname.startsWith('/upload')
+        && !pathname.startsWith('/editor')
+        && !pathname.startsWith('/dashboard')
+        && !pathname.startsWith('/settings')
+        && !pathname.startsWith('/analytics')
+        && !pathname.startsWith('/premium')
+}
+
+export function isPrivateRoute(pathname) {
+    return PRIVATE_ROUTE_PREFIXES.some((prefix) => pathname.startsWith(prefix))
+}
+
+export function getPrivateRouteTitle(pathname) {
+    const match = PRIVATE_ROUTE_PREFIXES.find((prefix) => pathname.startsWith(prefix))
+    const label = match ? PRIVATE_ROUTE_TITLES[match] : 'Dashboard'
+    return `${label} | ${BRAND_NAME_DISPLAY}`
+}
+
+export function resolvePageSeo(pathname) {
+    if (pathname.startsWith('/sign-in')) return PAGE_SEO['/sign-in']
+    if (pathname.startsWith('/sign-up')) return PAGE_SEO['/sign-up']
+    return PAGE_SEO[pathname] || PAGE_SEO['/']
+}
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f1132a3..7059e58 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -604,4 +604,65 @@ body {
 .animate-gradient-slow {
   animation: gradient-slow 8s ease infinite;
   background-size: 200% 200%;
+}
+
+/* ===== CLERK USER BUTTON ===== */
+.cl-userButtonTrigger .cl-userButtonAvatarBox,
+.cl-userPreviewAvatarBox .cl-avatarBox,
+.cl-userButtonPopoverCard .cl-avatarBox {
+  background-color: var(--color-primary-500) !important;
+  color: #ffffff !important;
+}
+
+.cl-userButtonPopoverCard {
+  background-color: var(--color-surface) !important;
+  border: 1px solid var(--color-border) !important;
+  box-shadow: var(--shadow-lg) !important;
+}
+
+.cl-userButtonPopoverMain,
+.cl-userButtonPopoverActions {
+  background-color: var(--color-surface) !important;
+}
+
+.cl-userButtonPopoverActionButton {
+  color: var(--color-text-primary) !important;
+}
+
+.cl-userButtonPopoverActionButton:hover {
+  background-color: var(--color-surface-hover) !important;
+}
+
+.cl-userButtonPopoverActionButtonIcon {
+  color: var(--color-text-secondary) !important;
+}
+
+.cl-userPreviewMainIdentifier,
+.cl-userPreviewMainIdentifierText {
+  color: var(--color-text-primary) !important;
+}
+
+.cl-userPreviewSecondaryIdentifier {
+  color: var(--color-text-secondary) !important;
+}
+
+.cl-userButtonPopoverFooter {
+  background-color: var(--color-bg-secondary) !important;
+  background-image: none !important;
+  border-top: 1px solid var(--color-border) !important;
+}
+
+.cl-userButtonPopoverFooter * {
+  color: var(--color-text-secondary) !important;
+}
+
+.cl-userButtonPopoverFooter [data-localization-key*='development'] {
+  color: var(--color-warning) !important;
+}
+
+@media (min-width: 640px) {
+  .cl-userButtonTrigger .cl-userButtonAvatarBox {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 29ecdb5..ea2dd50 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,38 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { ClerkProvider } from '@clerk/clerk-react'
 import App from './App.jsx'
 import './index.css'
 
-const CLERK_PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
-
-if (!CLERK_PUBLISHABLE_KEY) {
-    throw new Error('Missing Clerk Publishable Key')
-}
-
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
-        <ClerkProvider
-            publishableKey={CLERK_PUBLISHABLE_KEY}
-            appearance={{
-                variables: {
-                    colorPrimary: '#5a7a9e',
-                    colorBackground: '#09090b',
-                    colorText: '#fafafa',
-                    colorInputBackground: '#18181b',
-                    colorInputText: '#fafafa',
-                    borderRadius: '0.625rem',
-                },
-                elements: {
-                    card: 'bg-dark-900/80 backdrop-blur-xl border border-white/[0.06]',
-                    headerTitle: 'text-white',
-                    headerSubtitle: 'text-dark-400',
-                    formButtonPrimary: 'bg-primary-500 hover:bg-primary-600',
-                    footerActionLink: 'text-primary-400 hover:text-primary-300',
-                }
-            }}
-        >
-            <App />
-        </ClerkProvider>
+        <App />
     </React.StrictMode>,
 )
\ No newline at end of file
diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx
index 8d33029..5a753c5 100644
--- a/frontend/src/pages/Landing.jsx
+++ b/frontend/src/pages/Landing.jsx
@@ -13,7 +13,9 @@ import {
     Sparkles,
     Zap,
 } from 'lucide-react'
+import BrandLogo from '../components/BrandLogo'
 import { IconTile, ICON_STROKE } from '../components/IconTile'
+import { BRAND_NAME_DISPLAY } from '../constants/brand'
 
 const fadeUp = {
     initial: { opacity: 0, y: 16 },
@@ -286,7 +288,7 @@ function Landing() {
                             Ready to Build Your Portfolio?
                         </h2>
                         <p className="text-base sm:text-lg text-secondary mb-6 sm:mb-10 max-w-xl mx-auto px-2">
-                            Join thousands of professionals showcasing their work with Portlify.
+                            Join thousands of professionals showcasing their work with {BRAND_NAME_DISPLAY}.
                             Start for free, no credit card required.
                         </p>
                         <SignedOut>
@@ -309,14 +311,9 @@ function Landing() {
             <footer className="py-8 sm:py-12 bg-secondary">
                 <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                     <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-                        <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-primary-500">
-                                <span className="text-white font-bold text-sm">P</span>
-                            </div>
-                            <span className="font-display font-semibold heading-gradient">Portlify</span>
-                        </div>
+                        <BrandLogo size="sm" />
                         <p className="text-muted text-xs sm:text-sm text-center md:text-right">
-                            © 2026 Portlify. Built for professionals by{' '}
+                            © 2026 {BRAND_NAME_DISPLAY}. Built for professionals by{' '}
                             <a
                                 href="https://techycsr.dev"
                                 target="_blank"
diff --git a/frontend/src/pages/Onboarding.jsx b/frontend/src/pages/Onboarding.jsx
index 080ec7c..1e13714 100644
--- a/frontend/src/pages/Onboarding.jsx
+++ b/frontend/src/pages/Onboarding.jsx
@@ -3,25 +3,29 @@ import { useNavigate } from 'react-router-dom'
 import { useUser } from '@clerk/clerk-react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { savePreferences, getCurrentUser } from '../utils/api'
-import { Briefcase, Check, Code2, GraduationCap, Star } from 'lucide-react'
-import { IconTile, ICON_STROKE } from '../components/IconTile'
+import { Briefcase, Code2, GraduationCap, Star } from 'lucide-react'
+import OnboardingProgress from '../components/onboarding/OnboardingProgress'
+import OnboardingOptionCard from '../components/onboarding/OnboardingOptionCard'
+import OnboardingThemeCard from '../components/onboarding/OnboardingThemeCard'
+import { PORTFOLIO_THEME_OPTIONS } from '../portfolio/theme'
 
-// Animation variants
 const pageVariants = {
     initial: { opacity: 0, y: 16 },
     animate: { opacity: 1, y: 0, transition: { duration: 0.35, ease: 'easeOut' } },
-    exit: { opacity: 0, y: -12, transition: { duration: 0.25 } }
+    exit: { opacity: 0, y: -12, transition: { duration: 0.25 } },
 }
 
-const cardVariants = {
-    initial: { opacity: 0, y: 30 },
-    animate: (i) => ({
-        opacity: 1,
-        y: 0,
-        transition: { delay: i * 0.1, duration: 0.4, ease: 'easeOut' }
-    }),
-    hover: { scale: 1.02, transition: { duration: 0.2 } },
-    tap: { scale: 0.98 }
+function OnboardingStepHeader({ title, description }) {
+    return (
+        <header className="text-center mb-8 sm:mb-10 lg:mb-12 max-w-2xl mx-auto px-1">
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-display font-bold text-primary mb-3 sm:mb-4 leading-tight">
+                {title}
+            </h1>
+            <p className="text-sm sm:text-base text-secondary leading-relaxed">
+                {description}
+            </p>
+        </header>
+    )
 }
 
 function Onboarding() {
@@ -34,7 +38,7 @@ function Onboarding() {
     const [preferences, setPreferences] = useState({
         portfolioType: '',
         experienceLevel: '',
-        themePreference: ''
+        themePreference: '',
     })
 
     useEffect(() => {
@@ -44,7 +48,6 @@ function Onboarding() {
             return
         }
 
-        // Check if user needs onboarding
         const checkOnboarding = async () => {
             try {
                 const { data } = await getCurrentUser()
@@ -61,7 +64,7 @@ function Onboarding() {
     }, [isLoaded, isSignedIn, navigate])
 
     const handleSelect = (field, value) => {
-        setPreferences(prev => ({ ...prev, [field]: value }))
+        setPreferences((prev) => ({ ...prev, [field]: value }))
     }
 
     const handleNext = () => {
@@ -82,7 +85,7 @@ function Onboarding() {
         try {
             await savePreferences(preferences)
             navigate('/upload')
-        } catch (err) {
+        } catch {
             setError('Failed to save preferences. Please try again.')
         } finally {
             setSaving(false)
@@ -112,7 +115,7 @@ function Onboarding() {
             title: 'General Portfolio',
             description: 'For business, creative, academic roles',
             examples: 'Work experience, publications, achievements',
-        }
+        },
     ]
 
     const experienceLevels = [
@@ -129,51 +132,15 @@ function Onboarding() {
             title: 'Experienced Professional',
             description: '2+ years of work experience',
             highlights: 'Career growth, leadership, achievements',
-        }
-    ]
-
-    const themes = [
-        { id: 'modern', name: 'Modern', colors: ['#5a7a9e', '#7a96b5'], bg: '#09090b' },
-        { id: 'minimal', name: 'Minimal', colors: ['#18181b', '#3f3f46'], bg: '#ffffff' },
-        { id: 'creative', name: 'Creative', colors: ['#ec4899', '#f472b6'], bg: '#1f1f1f' },
-        { id: 'professional', name: 'Professional', colors: ['#0f766e', '#14b8a6'], bg: '#f0fdfa' }
+        },
     ]
 
     return (
-        <div className="min-h-screen pt-navbar pb-12 px-4 overflow-x-clip">
+        <div className="min-h-screen pt-navbar pb-8 sm:pb-12 px-4 sm:px-6 overflow-x-clip">
             <div className="max-w-4xl mx-auto">
-                {/* Progress Bar */}
-                <div className="mb-12">
-                    <div className="flex items-center justify-between mb-4">
-                        {[1, 2, 3].map((s) => (
-                            <div key={s} className="flex items-center">
-                                <motion.div
-                                    className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm transition-all ${step >= s
-                                            ? 'text-white'
-                                            : 'bg-surface text-muted border border-border'
-                                        }`}
-                                    style={step >= s ? { background: 'var(--gradient-primary)' } : {}}
-                                    animate={{ scale: step === s ? 1.1 : 1 }}
-                                >
-                                    {step > s ? <Check size={16} strokeWidth={ICON_STROKE} /> : s}
-                                </motion.div>
-                                {s < 3 && (
-                                    <div
-                                        className={`hidden sm:block w-24 md:w-40 h-1 mx-2 rounded transition-all ${step > s ? 'bg-primary-500' : 'bg-border'
-                                            }`}
-                                    />
-                                )}
-                            </div>
-                        ))}
-                    </div>
-                    <p className="text-center text-secondary">
-                        Step {step} of 3 — {step === 1 ? 'Portfolio Type' : step === 2 ? 'Experience Level' : 'Theme'}
-                    </p>
-                </div>
+                <OnboardingProgress step={step} />
 
-                {/* Content */}
                 <AnimatePresence mode="wait">
-                    {/* Step 1: Portfolio Type */}
                     {step === 1 && (
                         <motion.div
                             key="step1"
@@ -182,56 +149,29 @@ function Onboarding() {
                             animate="animate"
                             exit="exit"
                         >
-                            <h1 className="text-3xl md:text-4xl font-display font-bold text-center text-primary mb-4">
-                                What type of portfolio is this for?
-                            </h1>
-                            <p className="text-center text-secondary mb-12 max-w-2xl mx-auto">
-                                This helps us show the right sections and optimize your portfolio for your field.
-                            </p>
+                            <OnboardingStepHeader
+                                title="What type of portfolio is this for?"
+                                description="This helps us show the right sections and optimize your portfolio for your field."
+                            />
 
-                            <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5 lg:gap-6 max-w-3xl mx-auto">
                                 {portfolioTypes.map((type, i) => (
-                                    <motion.button
-                                        type="button"
+                                    <OnboardingOptionCard
                                         key={type.id}
-                                        variants={cardVariants}
-                                        initial="initial"
-                                        animate="animate"
-                                        whileHover="hover"
-                                        whileTap="tap"
-                                        custom={i}
-                                        onClick={() => handleSelect('portfolioType', type.id)}
-                                        aria-pressed={preferences.portfolioType === type.id}
-                                        className={`relative glass-card rounded-3xl p-8 cursor-pointer transition-all overflow-hidden hover:bg-surface-hover w-full text-left ${preferences.portfolioType === type.id
-                                                ? 'ring-2 ring-primary-500/40'
-                                                : ''
-                                            }`}
-                                    >
-                                        {/* Selected indicator */}
-                                        {preferences.portfolioType === type.id && (
-                                            <motion.div
-                                                initial={{ scale: 0 }}
-                                                animate={{ scale: 1 }}
-                                                className="absolute top-4 right-4 w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white"
-                                            >
-                                                <Check size={16} strokeWidth={ICON_STROKE} />
-                                            </motion.div>
-                                        )}
-
-                                        <IconTile icon={type.icon} className="w-14 h-14 mb-6" size={24} />
-
-                                        <h3 className="text-xl font-bold text-primary mb-2">{type.title}</h3>
-                                        <p className="text-secondary mb-4">{type.description}</p>
-                                        <p className="text-sm text-muted">
-                                            <span className="font-medium">Examples:</span> {type.examples}
-                                        </p>
-                                    </motion.button>
+                                        index={i}
+                                        icon={type.icon}
+                                        title={type.title}
+                                        description={type.description}
+                                        footer={type.examples}
+                                        footerLabel="Examples"
+                                        selected={preferences.portfolioType === type.id}
+                                        onSelect={() => handleSelect('portfolioType', type.id)}
+                                    />
                                 ))}
                             </div>
                         </motion.div>
                     )}
 
-                    {/* Step 2: Experience Level */}
                     {step === 2 && (
                         <motion.div
                             key="step2"
@@ -240,55 +180,29 @@ function Onboarding() {
                             animate="animate"
                             exit="exit"
                         >
-                            <h1 className="text-3xl md:text-4xl font-display font-bold text-center text-primary mb-4">
-                                What's your experience level?
-                            </h1>
-                            <p className="text-center text-secondary mb-12 max-w-2xl mx-auto">
-                                We'll prioritize the right sections based on where you are in your career.
-                            </p>
+                            <OnboardingStepHeader
+                                title="What's your experience level?"
+                                description="We'll prioritize the right sections based on where you are in your career."
+                            />
 
-                            <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5 lg:gap-6 max-w-3xl mx-auto">
                                 {experienceLevels.map((level, i) => (
-                                    <motion.button
-                                        type="button"
+                                    <OnboardingOptionCard
                                         key={level.id}
-                                        variants={cardVariants}
-                                        initial="initial"
-                                        animate="animate"
-                                        whileHover="hover"
-                                        whileTap="tap"
-                                        custom={i}
-                                        onClick={() => handleSelect('experienceLevel', level.id)}
-                                        aria-pressed={preferences.experienceLevel === level.id}
-                                        className={`relative glass-card rounded-3xl p-8 cursor-pointer transition-all hover:bg-surface-hover w-full text-left ${preferences.experienceLevel === level.id
-                                                ? 'ring-2 ring-primary-500/40'
-                                                : ''
-                                            }`}
-                                    >
-                                        {preferences.experienceLevel === level.id && (
-                                            <motion.div
-                                                initial={{ scale: 0 }}
-                                                animate={{ scale: 1 }}
-                                                className="absolute top-4 right-4 w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white"
-                                            >
-                                                <Check size={16} strokeWidth={ICON_STROKE} />
-                                            </motion.div>
-                                        )}
-
-                                        <IconTile icon={level.icon} className="w-14 h-14 mb-6" size={24} />
-
-                                        <h3 className="text-xl font-bold text-primary mb-2">{level.title}</h3>
-                                        <p className="text-secondary mb-4">{level.description}</p>
-                                        <p className="text-sm text-muted">
-                                            <span className="font-medium">Highlights:</span> {level.highlights}
-                                        </p>
-                                    </motion.button>
+                                        index={i}
+                                        icon={level.icon}
+                                        title={level.title}
+                                        description={level.description}
+                                        footer={level.highlights}
+                                        footerLabel="Highlights"
+                                        selected={preferences.experienceLevel === level.id}
+                                        onSelect={() => handleSelect('experienceLevel', level.id)}
+                                    />
                                 ))}
                             </div>
                         </motion.div>
                     )}
 
-                    {/* Step 3: Theme Selection */}
                     {step === 3 && (
                         <motion.div
                             key="step3"
@@ -297,131 +211,78 @@ function Onboarding() {
                             animate="animate"
                             exit="exit"
                         >
-                            <h1 className="text-3xl md:text-4xl font-display font-bold text-center text-primary mb-4">
-                                Choose your portfolio theme
-                            </h1>
-                            <p className="text-center text-secondary mb-12 max-w-2xl mx-auto">
-                                Pick a style that represents you. You can change this anytime in settings.
-                            </p>
+                            <OnboardingStepHeader
+                                title="Choose your portfolio theme"
+                                description="Pick a style that represents you. You can change this anytime in settings."
+                            />
 
-                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
-                                {themes.map((theme, i) => (
-                                    <motion.button
-                                        type="button"
+                            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 max-w-4xl mx-auto">
+                                {PORTFOLIO_THEME_OPTIONS.map((theme, i) => (
+                                    <OnboardingThemeCard
                                         key={theme.id}
-                                        variants={cardVariants}
-                                        initial="initial"
-                                        animate="animate"
-                                        whileHover="hover"
-                                        whileTap="tap"
-                                        custom={i}
-                                        onClick={() => handleSelect('themePreference', theme.id)}
-                                        aria-pressed={preferences.themePreference === theme.id}
-                                        className={`relative cursor-pointer transition-all w-full text-left ${preferences.themePreference === theme.id
-                                                ? 'ring-2 ring-primary-500 ring-offset-2 ring-offset-background'
-                                                : ''
-                                            }`}
-                                    >
-                                        {/* Theme preview */}
-                                        <div
-                                            className="aspect-[3/4] rounded-2xl overflow-hidden mb-3"
-                                            style={{ background: theme.bg }}
-                                        >
-                                            <div className="p-4 h-full flex flex-col">
-                                                {/* Mini header */}
-                                                <div
-                                                    className="w-10 h-10 rounded-full mb-3"
-                                                    style={{ background: `linear-gradient(135deg, ${theme.colors[0]}, ${theme.colors[1]})` }}
-                                                />
-                                                {/* Mini lines */}
-                                                <div
-                                                    className="h-2 rounded mb-2"
-                                                    style={{ background: theme.id === 'minimal' ? '#e4e4e7' : 'rgba(255,255,255,0.2)', width: '70%' }}
-                                                />
-                                                <div
-                                                    className="h-2 rounded mb-4"
-                                                    style={{ background: theme.id === 'minimal' ? '#e4e4e7' : 'rgba(255,255,255,0.1)', width: '50%' }}
-                                                />
-                                                {/* Mini cards */}
-                                                <div className="flex-1 space-y-2">
-                                                    {[1, 2, 3].map((n) => (
-                                                        <div
-                                                            key={n}
-                                                            className="h-8 rounded-lg"
-                                                            style={{ background: theme.id === 'minimal' ? '#f4f4f5' : 'rgba(255,255,255,0.05)' }}
-                                                        />
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <p className="text-center font-medium text-primary">{theme.name}</p>
-
-                                        {preferences.themePreference === theme.id && (
-                                            <motion.div
-                                                initial={{ scale: 0 }}
-                                                animate={{ scale: 1 }}
-                                                className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-primary-500 flex items-center justify-center text-white text-xs"
-                                            >
-                                                <Check size={14} strokeWidth={ICON_STROKE} />
-                                            </motion.div>
-                                        )}
-                                    </motion.button>
+                                        index={i}
+                                        theme={theme}
+                                        selected={preferences.themePreference === theme.id}
+                                        onSelect={() => handleSelect('themePreference', theme.id)}
+                                    />
                                 ))}
                             </div>
                         </motion.div>
                     )}
                 </AnimatePresence>
 
-                {/* Error message */}
                 {error && (
                     <motion.p
                         initial={{ opacity: 0, y: 10 }}
                         animate={{ opacity: 1, y: 0 }}
-                        className="text-center text-red-400 mt-6"
+                        className="text-center text-error text-sm mt-6"
+                        role="alert"
                     >
                         {error}
                     </motion.p>
                 )}
 
-                {/* Navigation buttons */}
-                <div className="flex justify-between items-center mt-12 max-w-3xl mx-auto">
-                    <button
-                        onClick={handleBack}
-                        disabled={step === 1}
-                        className={`px-6 py-3 rounded-xl font-medium transition-all ${step === 1
-                                ? 'opacity-0 pointer-events-none'
-                                : 'text-secondary hover:text-primary'
-                            }`}
-                    >
-                        ← Back
-                    </button>
-
-                    <motion.button
-                        whileHover={{ scale: canProceed() ? 1.02 : 1 }}
-                        whileTap={{ scale: canProceed() ? 0.98 : 1 }}
-                        onClick={handleNext}
-                        disabled={!canProceed() || saving}
-                        className={`px-8 py-3 rounded-xl font-medium transition-all ${canProceed()
-                                ? 'btn-primary'
-                                : 'bg-surface text-muted cursor-not-allowed'
-                            }`}
-                    >
-                        {saving ? (
-                            <span className="flex items-center gap-2">
-                                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                                Saving...
-                            </span>
-                        ) : step === 3 ? (
-                            'Complete Setup →'
-                        ) : (
-                            'Continue →'
+                <div className="mt-8 sm:mt-10 lg:mt-12 max-w-3xl mx-auto">
+                    <div className={`flex flex-col-reverse sm:flex-row gap-3 sm:gap-4 ${step === 1 ? 'sm:justify-end' : 'sm:justify-between'}`}>
+                        {step > 1 && (
+                            <button
+                                type="button"
+                                onClick={handleBack}
+                                className="w-full sm:w-auto px-6 py-3 rounded-xl font-medium text-secondary hover:text-primary border border-border hover:border-border-hover bg-surface transition-colors min-h-[44px]"
+                            >
+                                ← Back
+                            </button>
                         )}
-                    </motion.button>
+
+                        <motion.button
+                            type="button"
+                            whileHover={{ scale: canProceed() && !saving ? 1.01 : 1 }}
+                            whileTap={{ scale: canProceed() && !saving ? 0.99 : 1 }}
+                            onClick={handleNext}
+                            disabled={!canProceed() || saving}
+                            className={[
+                                'w-full sm:w-auto sm:min-w-[12rem] px-8 py-3 rounded-xl font-medium transition-all min-h-[44px]',
+                                canProceed() && !saving
+                                    ? 'btn-primary justify-center'
+                                    : 'bg-surface text-muted border border-border cursor-not-allowed',
+                            ].join(' ')}
+                        >
+                            {saving ? (
+                                <span className="flex items-center justify-center gap-2">
+                                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" aria-hidden="true" />
+                                    Saving...
+                                </span>
+                            ) : step === 3 ? (
+                                'Complete Setup →'
+                            ) : (
+                                'Continue →'
+                            )}
+                        </motion.button>
+                    </div>
                 </div>
             </div>
         </div>
     )
 }
 
-export default Onboarding
+export default Onboarding
\ No newline at end of file
diff --git a/frontend/src/pages/Portfolio.jsx b/frontend/src/pages/Portfolio.jsx
index 40bf756..5ba81f9 100644
--- a/frontend/src/pages/Portfolio.jsx
+++ b/frontend/src/pages/Portfolio.jsx
@@ -6,6 +6,7 @@ import { getThemeColors } from '../portfolio/theme'
 import PortfolioTemplate from '../portfolio/PortfolioTemplate'
 import LoadingState from '../portfolio/components/LoadingState'
 import ErrorState from '../portfolio/components/ErrorState'
+import { applySiteSeo, buildPortfolioSeo, resetSiteSeo } from '../utils/seo'
 
 function Portfolio() {
     const { username } = useParams()
@@ -27,32 +28,7 @@ function Portfolio() {
                 if (cancelled) return
 
                 setProfile(data)
-
-                const name = data.basicDetails?.name || username
-                const headline = data.basicDetails?.headline
-                    || data.basicDetails?.about?.substring(0, 60)
-                    || 'Professional'
-
-                document.title = `${name} — ${headline} | Portlify by TechyCSR`
-
-                const metaDesc = document.querySelector('meta[name="description"]')
-                if (metaDesc) {
-                    metaDesc.setAttribute(
-                        'content',
-                        `${name}'s professional portfolio — ${headline}. Built with Portlify by TechyCSR.`
-                    )
-                }
-
-                const ogTitle = document.querySelector('meta[property="og:title"]')
-                if (ogTitle) ogTitle.setAttribute('content', `${name} — ${headline} | Portlify`)
-
-                const ogDesc = document.querySelector('meta[property="og:description"]')
-                if (ogDesc) {
-                    ogDesc.setAttribute(
-                        'content',
-                        `${name}'s professional portfolio — ${headline}. Built with Portlify.`
-                    )
-                }
+                applySiteSeo(buildPortfolioSeo(data, username))
 
                 const viewKey = `viewed_${username}`
                 if (!sessionStorage.getItem(viewKey)) {
@@ -75,6 +51,7 @@ function Portfolio() {
 
         return () => {
             cancelled = true
+            resetSiteSeo()
         }
     }, [username])
 
diff --git a/frontend/src/pages/Premium.jsx b/frontend/src/pages/Premium.jsx
index 4b033da..2b5bd1e 100644
--- a/frontend/src/pages/Premium.jsx
+++ b/frontend/src/pages/Premium.jsx
@@ -7,6 +7,7 @@ import { useToast } from '../context/ToastContext'
 import { Check, Heart, Lock, Pencil, ShieldCheck, Sparkles, Star, Tag, Zap } from 'lucide-react'
 import { IconTile, InlineIcon, ICON_STROKE } from '../components/IconTile'
 import PageHeader from '../components/PageHeader'
+import { BRAND_NAME_DISPLAY } from '../constants/brand'
 import { ErrorState, LoadingState } from '../components/AsyncState'
 
 const premiumFeatures = [
@@ -96,7 +97,7 @@ function Premium() {
                 key: keyId,
                 amount: amount,
                 currency: currency,
-                name: 'Portlify',
+                name: BRAND_NAME_DISPLAY,
                 description: 'Premium Membership - Lifetime Access',
                 order_id: orderId,
                 handler: async (response) => {
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 3b699b6..647eda9 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -804,7 +804,7 @@ function Settings() {
                                                 <div className="flex items-center justify-between">
                                                     <div>
                                                         <p className="font-medium text-primary">Enable Custom Branding</p>
-                                                        <p className="text-xs text-muted mt-1">Show your custom text instead of "Built with Portlify"</p>
+                                                        <p className="text-xs text-muted mt-1">Show your custom text instead of "Built with PortlifyAi"</p>
                                                     </div>
                                                     <button
                                                         onClick={async () => {
diff --git a/frontend/src/portfolio/PortfolioTemplate.jsx b/frontend/src/portfolio/PortfolioTemplate.jsx
index c30619d..4d1e1c8 100644
--- a/frontend/src/portfolio/PortfolioTemplate.jsx
+++ b/frontend/src/portfolio/PortfolioTemplate.jsx
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
 import { useTheme } from '../context/ThemeContext'
 import { buildPortfolioSections } from './buildSections'
 import { getCssVars, getThemeColors } from './theme'
@@ -8,6 +9,13 @@ import ProfileAside from './components/ProfileAside'
 import SectionNav from './components/SectionNav'
 import SectionContent from './components/SectionContent'
 import Footer from './components/Footer'
+import PortfolioScrollArea from './components/PortfolioScrollArea'
+
+const sectionVariants = {
+    initial: { opacity: 0, x: 12 },
+    animate: { opacity: 1, x: 0, transition: { duration: 0.25, ease: 'easeOut' } },
+    exit: { opacity: 0, x: -8, transition: { duration: 0.18 } },
+}
 
 function PortfolioTemplate({ profile, username }) {
     const { theme, toggleTheme } = useTheme()
@@ -16,6 +24,12 @@ function PortfolioTemplate({ profile, username }) {
     const cssVars = useMemo(() => getCssVars(colors), [colors])
     const sections = useMemo(() => buildPortfolioSections(profile), [profile])
     const [activeSection, setActiveSection] = useState(sections[0]?.id || 'about')
+    const contentRef = useRef(null)
+
+    const activeSectionData = useMemo(
+        () => sections.find((section) => section.id === activeSection) || sections[0],
+        [sections, activeSection]
+    )
 
     useEffect(() => {
         if (sections.length > 0 && !sections.some((section) => section.id === activeSection)) {
@@ -24,38 +38,30 @@ function PortfolioTemplate({ profile, username }) {
     }, [sections, activeSection])
 
     useEffect(() => {
-        const sectionIds = sections.map((section) => section.id)
-        if (sectionIds.length === 0) return
-
-        const observer = new IntersectionObserver(
-            (entries) => {
-                const visible = entries
-                    .filter((entry) => entry.isIntersecting)
-                    .sort((a, b) => b.intersectionRatio - a.intersectionRatio)
-
-                if (visible[0]?.target?.id) {
-                    setActiveSection(visible[0].target.id)
-                }
-            },
-            {
-                rootMargin: '-20% 0px -55% 0px',
-                threshold: [0.1, 0.25, 0.5],
-            }
-        )
-
-        sectionIds.forEach((id) => {
-            const element = document.getElementById(id)
-            if (element) observer.observe(element)
-        })
-
-        return () => observer.disconnect()
+        const hash = window.location.hash.replace('#', '')
+        if (hash && sections.some((section) => section.id === hash)) {
+            setActiveSection(hash)
+        }
     }, [sections])
 
-    const scrollToSection = useCallback((sectionId) => {
-        const element = document.getElementById(sectionId)
-        if (!element) return
+    useEffect(() => {
+        const previousHtmlOverflow = document.documentElement.style.overflow
+        const previousBodyOverflow = document.body.style.overflow
+        document.documentElement.style.overflow = 'hidden'
+        document.body.style.overflow = 'hidden'
+
+        return () => {
+            document.documentElement.style.overflow = previousHtmlOverflow
+            document.body.style.overflow = previousBodyOverflow
+        }
+    }, [])
+
+    const selectSection = useCallback((sectionId) => {
         setActiveSection(sectionId)
-        element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        window.history.replaceState(null, '', `#${sectionId}`)
+        requestAnimationFrame(() => {
+            contentRef.current?.scrollTo({ top: 0, behavior: 'auto' })
+        })
     }, [])
 
     const { basicDetails, socialLinks, resumeUrl } = profile
@@ -63,7 +69,7 @@ function PortfolioTemplate({ profile, username }) {
     return (
         <div
             id="top"
-            className="portfolio-root min-h-screen transition-colors duration-300"
+            className="portfolio-root h-dvh flex flex-col overflow-hidden transition-colors duration-300"
             style={cssVars}
         >
             <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
@@ -75,45 +81,61 @@ function PortfolioTemplate({ profile, username }) {
 
             <TopBar theme={theme} onToggleTheme={toggleTheme} />
 
-            <div className="relative max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-10">
-                <div className="lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8 xl:gap-10 lg:items-start">
-                    <ProfileAside
-                        username={username}
-                        basicDetails={basicDetails}
-                        socialLinks={socialLinks}
-                        resumeUrl={resumeUrl}
-                        sections={sections}
-                        activeSection={activeSection}
-                        onNavigate={scrollToSection}
-                    />
-
-                    <div className="min-w-0">
-                        <SectionNav
+            <div className="relative flex-1 min-h-0 overflow-hidden">
+                <div className="h-full max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-6">
+                    <div className="h-full grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8 xl:gap-10 min-h-0">
+                        <ProfileAside
+                            username={username}
+                            basicDetails={basicDetails}
+                            socialLinks={socialLinks}
+                            resumeUrl={resumeUrl}
                             sections={sections}
                             activeSection={activeSection}
-                            onNavigate={scrollToSection}
+                            onNavigate={selectSection}
                         />
 
-                        <main className="space-y-12 sm:space-y-14 lg:space-y-16 mt-6 lg:mt-0">
-                            {sections.map((section) => (
-                                <section
-                                    key={section.id}
-                                    id={section.id}
-                                    className="portfolio-section"
-                                    aria-labelledby={`${section.id}-heading`}
-                                >
-                                    <div id={`${section.id}-heading`} className="sr-only">
-                                        {section.label}
-                                    </div>
-                                    <SectionContent section={section} basicDetails={basicDetails} />
-                                </section>
-                            ))}
-                        </main>
+                        <div className="min-h-0 flex flex-col overflow-hidden mt-4 lg:mt-0">
+                            <SectionNav
+                                sections={sections}
+                                activeSection={activeSection}
+                                onNavigate={selectSection}
+                            />
+
+                            <PortfolioScrollArea
+                                ref={contentRef}
+                                className="mt-4 lg:mt-5"
+                                aria-live="polite"
+                                role="main"
+                            >
+                                <AnimatePresence mode="wait">
+                                    {activeSectionData && (
+                                        <motion.section
+                                            key={activeSectionData.id}
+                                            id={activeSectionData.id}
+                                            className="portfolio-section-content"
+                                            variants={sectionVariants}
+                                            initial="initial"
+                                            animate="animate"
+                                            exit="exit"
+                                            aria-labelledby={`${activeSectionData.id}-heading`}
+                                        >
+                                            <div id={`${activeSectionData.id}-heading`} className="sr-only">
+                                                {activeSectionData.label}
+                                            </div>
+                                            <SectionContent
+                                                section={activeSectionData}
+                                                basicDetails={basicDetails}
+                                            />
+                                        </motion.section>
+                                    )}
+                                </AnimatePresence>
+                            </PortfolioScrollArea>
+
+                            <Footer profile={profile} compact />
+                        </div>
                     </div>
                 </div>
             </div>
-
-            <Footer profile={profile} />
         </div>
     )
 }
diff --git a/frontend/src/portfolio/components/Footer.jsx b/frontend/src/portfolio/components/Footer.jsx
index c1a5b4a..f73373a 100644
--- a/frontend/src/portfolio/components/Footer.jsx
+++ b/frontend/src/portfolio/components/Footer.jsx
@@ -1,11 +1,12 @@
 import { useEffect, useRef, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { ChevronRight, Info, Sparkles } from 'lucide-react'
+import { ChevronRight, Info } from 'lucide-react'
 import { ICON_STROKE } from '../../components/IconTile'
 import { getAppUrl } from '../../utils/appUrl'
+import { BRAND_LOGO_ALT, BRAND_LOGO_SRC, BRAND_NAME_DISPLAY } from '../../constants/brand'
 import { safeHref } from '../../utils/safeUrl'
 
-function Footer({ profile }) {
+function Footer({ profile, compact = false }) {
     const [showPremiumInfo, setShowPremiumInfo] = useState(false)
     const timeoutRef = useRef(null)
 
@@ -25,22 +26,24 @@ function Footer({ profile }) {
     const customBranding = profile?.customBranding
 
     return (
-        <footer className="relative py-12 px-4 mt-8">
-            <div
-                className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 max-w-md h-px"
-                style={{ background: 'var(--pf-border-subtle)' }}
-            />
+        <footer className={`relative flex-shrink-0 ${compact ? 'py-3 mt-3' : 'py-12 px-4 mt-8'}`}>
+            {!compact && (
+                <div
+                    className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 max-w-md h-px"
+                    style={{ background: 'var(--pf-border-subtle)' }}
+                />
+            )}
 
-            <div className="max-w-6xl mx-auto flex justify-center">
+            <div className={`${compact ? '' : 'max-w-6xl mx-auto'} flex justify-center`}>
                 {customBranding?.enabled && customBranding?.text ? (
                     <a
                         href={safeHref(customBranding.url) || '#'}
                         target={safeHref(customBranding.url) ? '_blank' : '_self'}
                         rel="noopener noreferrer"
                         onClick={(e) => !safeHref(customBranding.url) && e.preventDefault()}
-                        className="group portfolio-surface rounded-xl px-6 py-3 inline-flex items-center gap-3 transition-transform hover:-translate-y-0.5"
+                        className={`group portfolio-surface rounded-xl inline-flex items-center gap-3 transition-transform hover:-translate-y-0.5 ${compact ? 'px-4 py-2' : 'px-6 py-3'}`}
                     >
-                        <span className="text-sm font-medium portfolio-text">
+                        <span className={`font-medium portfolio-text ${compact ? 'text-xs' : 'text-sm'}`}>
                             {customBranding.text}
                         </span>
                         {customBranding.url && (
@@ -97,15 +100,21 @@ function Footer({ profile }) {
                             href={getAppUrl()}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="group portfolio-surface rounded-xl px-6 py-3 inline-flex items-center gap-3 transition-transform hover:-translate-y-0.5"
+                            className={`group portfolio-surface rounded-xl inline-flex items-center gap-3 transition-transform hover:-translate-y-0.5 ${compact ? 'px-4 py-2' : 'px-6 py-3'}`}
                         >
-                            <div className="portfolio-brand-gradient w-8 h-8 rounded-lg flex items-center justify-center">
-                                <Sparkles size={16} strokeWidth={ICON_STROKE} className="text-white" />
-                            </div>
+                            <img
+                                src={BRAND_LOGO_SRC}
+                                alt={BRAND_LOGO_ALT}
+                                className={`object-contain flex-shrink-0 ${compact ? 'w-6 h-6' : 'w-8 h-8'}`}
+                                width={compact ? 24 : 32}
+                                height={compact ? 24 : 32}
+                                decoding="async"
+                            />
                             <div className="flex items-center gap-2">
-                                <span className="text-sm portfolio-text-secondary">Built with</span>
-                                <span className="portfolio-brand-text font-semibold text-sm">
-                                    Portlify
+                                <span className={`portfolio-text-secondary ${compact ? 'text-xs' : 'text-sm'}`}>Built with</span>
+                                <span className={`font-semibold ${compact ? 'text-xs' : 'text-sm'}`}>
+                                    <span className="portfolio-text">Portlify</span>
+                                    <span className="portfolio-brand-text">Ai</span>
                                 </span>
                             </div>
                             <ChevronRight
diff --git a/frontend/src/portfolio/components/PortfolioScrollArea.jsx b/frontend/src/portfolio/components/PortfolioScrollArea.jsx
new file mode 100644
index 0000000..0520eb9
--- /dev/null
+++ b/frontend/src/portfolio/components/PortfolioScrollArea.jsx
@@ -0,0 +1,72 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+
+const PortfolioScrollArea = forwardRef(function PortfolioScrollArea(
+    { children, className = '', innerClassName = '', ...props },
+    ref
+) {
+    const scrollRef = useRef(null)
+    const [canScrollUp, setCanScrollUp] = useState(false)
+    const [canScrollDown, setCanScrollDown] = useState(false)
+
+    const setRefs = useCallback((node) => {
+        scrollRef.current = node
+        if (typeof ref === 'function') {
+            ref(node)
+        } else if (ref) {
+            ref.current = node
+        }
+    }, [ref])
+
+    const updateScrollState = useCallback(() => {
+        const el = scrollRef.current
+        if (!el) return
+
+        const { scrollTop, clientHeight, scrollHeight } = el
+        setCanScrollUp(scrollTop > 6)
+        setCanScrollDown(scrollTop + clientHeight < scrollHeight - 6)
+    }, [])
+
+    useEffect(() => {
+        const el = scrollRef.current
+        if (!el) return
+
+        updateScrollState()
+
+        const handleScroll = () => updateScrollState()
+        el.addEventListener('scroll', handleScroll, { passive: true })
+
+        const resizeObserver = new ResizeObserver(updateScrollState)
+        resizeObserver.observe(el)
+
+        const mutationObserver = new MutationObserver(updateScrollState)
+        mutationObserver.observe(el, { childList: true, subtree: true })
+
+        return () => {
+            el.removeEventListener('scroll', handleScroll)
+            resizeObserver.disconnect()
+            mutationObserver.disconnect()
+        }
+    }, [updateScrollState, children])
+
+    return (
+        <div className={`portfolio-scroll-area relative flex-1 min-h-0 ${className}`}>
+            {canScrollUp && (
+                <div className="portfolio-scroll-fade portfolio-scroll-fade-top" aria-hidden="true" />
+            )}
+
+            <div
+                ref={setRefs}
+                className={`portfolio-scroll portfolio-section-panel h-full overflow-y-auto ${innerClassName}`}
+                {...props}
+            >
+                {children}
+            </div>
+
+            {canScrollDown && (
+                <div className="portfolio-scroll-fade portfolio-scroll-fade-bottom" aria-hidden="true" />
+            )}
+        </div>
+    )
+})
+
+export default PortfolioScrollArea
\ No newline at end of file
diff --git a/frontend/src/portfolio/components/ProfileAside.jsx b/frontend/src/portfolio/components/ProfileAside.jsx
index 80bc049..63574bf 100644
--- a/frontend/src/portfolio/components/ProfileAside.jsx
+++ b/frontend/src/portfolio/components/ProfileAside.jsx
@@ -40,8 +40,8 @@ function ProfileAside({
     const resumeLink = safeHref(resumeUrl)
 
     return (
-        <aside className="lg:sticky lg:sticky-below-navbar lg:self-start">
-            <div className="portfolio-surface rounded-2xl p-5 sm:p-6">
+        <aside className="portfolio-scroll portfolio-aside-scroll min-h-0 max-h-[34vh] lg:max-h-none overflow-y-auto lg:overflow-visible">
+            <div className="portfolio-surface rounded-2xl p-5 sm:p-6 lg:h-full lg:flex lg:flex-col">
                 <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
                     <div className="portfolio-surface-raised w-24 h-24 sm:w-28 sm:h-28 rounded-2xl mb-4 overflow-hidden flex items-center justify-center border-2 border-[var(--pf-border)]">
                         {basicDetails?.profilePhoto ? (
@@ -111,7 +111,7 @@ function ProfileAside({
                     )}
                 </div>
 
-                <nav className="hidden lg:block border-t border-[var(--pf-border-subtle)] pt-4" aria-label="Section navigation">
+                <nav className="portfolio-scroll hidden lg:block border-t border-[var(--pf-border-subtle)] pt-4 lg:flex-1 lg:min-h-0 lg:overflow-y-auto" aria-label="Section navigation">
                     <p className="text-[10px] font-semibold uppercase tracking-[0.14em] mb-2 px-2 portfolio-text-muted">
                         Sections
                     </p>
@@ -124,6 +124,7 @@ function ProfileAside({
                                         type="button"
                                         onClick={() => onNavigate(section.id)}
                                         data-active={activeSection === section.id}
+                                        aria-current={activeSection === section.id ? 'true' : undefined}
                                         className="portfolio-nav-link w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-sm font-medium text-left"
                                     >
                                         <Icon size={15} strokeWidth={ICON_STROKE} />
diff --git a/frontend/src/portfolio/components/SectionContent.jsx b/frontend/src/portfolio/components/SectionContent.jsx
index 1956c64..7b76b1d 100644
--- a/frontend/src/portfolio/components/SectionContent.jsx
+++ b/frontend/src/portfolio/components/SectionContent.jsx
@@ -157,7 +157,7 @@ function EducationItem({ item, isLast }) {
 
 function ProjectCard({ project }) {
     return (
-        <Surface className="p-5 sm:p-6 h-full flex flex-col">
+        <Surface className="p-5 sm:p-6 flex flex-col">
             <div className="flex items-start justify-between gap-3 mb-4">
                 <div className="portfolio-icon-tile w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0">
                     <Rocket size={20} strokeWidth={ICON_STROKE} />
@@ -249,7 +249,7 @@ function SectionContent({ section, basicDetails }) {
                     <SectionTitle icon={section.icon}>About</SectionTitle>
                     <Surface className="p-5 sm:p-6">
                         <p className="leading-relaxed whitespace-pre-wrap text-sm sm:text-base portfolio-text-secondary">
-                            {basicDetails?.about || 'Professional portfolio powered by Portlify.'}
+                            {basicDetails?.about || 'Professional portfolio powered by PortlifyAi.'}
                         </p>
                     </Surface>
                 </>
@@ -271,7 +271,7 @@ function SectionContent({ section, basicDetails }) {
             return (
                 <>
                     <SectionTitle icon={section.icon}>Projects</SectionTitle>
-                    <div className="grid sm:grid-cols-2 gap-4">
+                    <div className="grid sm:grid-cols-2 gap-3 sm:gap-4">
                         {section.items.map((project, index) => (
                             <ProjectCard key={index} project={project} />
                         ))}
diff --git a/frontend/src/portfolio/components/SectionNav.jsx b/frontend/src/portfolio/components/SectionNav.jsx
index 26800be..872f4b3 100644
--- a/frontend/src/portfolio/components/SectionNav.jsx
+++ b/frontend/src/portfolio/components/SectionNav.jsx
@@ -3,7 +3,7 @@ function SectionNav({ sections, activeSection, onNavigate }) {
 
     return (
         <nav
-            className="portfolio-no-print portfolio-surface lg:hidden sticky top-14 z-40 -mx-4 sm:-mx-6 px-4 sm:px-6 py-3 border-b border-[var(--pf-border-subtle)] rounded-none shadow-none"
+            className="portfolio-no-print portfolio-surface lg:hidden flex-shrink-0 py-2.5 px-3 border border-[var(--pf-border-subtle)] rounded-xl shadow-none"
             aria-label="Section navigation"
         >
             <div className="flex gap-2 overflow-x-auto hide-scrollbar">
@@ -15,6 +15,7 @@ function SectionNav({ sections, activeSection, onNavigate }) {
                             type="button"
                             onClick={() => onNavigate(section.id)}
                             data-active={activeSection === section.id}
+                            aria-current={activeSection === section.id ? 'true' : undefined}
                             className="portfolio-nav-link flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium whitespace-nowrap flex-shrink-0"
                         >
                             <Icon size={14} />
diff --git a/frontend/src/portfolio/components/TopBar.jsx b/frontend/src/portfolio/components/TopBar.jsx
index b67f9ea..f344813 100644
--- a/frontend/src/portfolio/components/TopBar.jsx
+++ b/frontend/src/portfolio/components/TopBar.jsx
@@ -1,16 +1,24 @@
+import { Link } from 'react-router-dom'
 import { Moon, Sun } from 'lucide-react'
+import BrandLogo from '../../components/BrandLogo'
 import { ICON_STROKE } from '../../components/IconTile'
+import { BRAND_NAME_DISPLAY } from '../../constants/brand'
 
 function TopBar({ theme, onToggleTheme }) {
     return (
-        <div className="portfolio-no-print portfolio-surface sticky top-0 z-50 border-b border-[var(--pf-border-subtle)] rounded-none shadow-none">
+        <div className="portfolio-no-print portfolio-surface flex-shrink-0 z-50 border-b border-[var(--pf-border-subtle)] rounded-none shadow-none">
             <div className="max-w-6xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
-                <a
-                    href="#top"
-                    className="font-display font-bold text-sm sm:text-base portfolio-text"
+                <Link
+                    to="/"
+                    className="group rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
+                    aria-label={`${BRAND_NAME_DISPLAY} home`}
                 >
-                    Portfolio
-                </a>
+                    <BrandLogo
+                        size="sm"
+                        nameClassName="portfolio-text"
+                        className="transition-transform group-hover:scale-[1.02]"
+                    />
+                </Link>
                 <button
                     type="button"
                     onClick={onToggleTheme}
diff --git a/frontend/src/portfolio/portfolio.css b/frontend/src/portfolio/portfolio.css
index 3e8cee1..8e5b76e 100644
--- a/frontend/src/portfolio/portfolio.css
+++ b/frontend/src/portfolio/portfolio.css
@@ -3,16 +3,80 @@
   -webkit-font-smoothing: antialiased;
   color: var(--pf-text);
   background: var(--pf-bg);
+  height: 100dvh;
+  overflow: hidden;
 }
 
-.portfolio-section {
-  scroll-margin-top: 5.5rem;
+.portfolio-section-panel {
+  overscroll-behavior: contain;
 }
 
-@media (min-width: 1024px) {
-  .portfolio-section {
-    scroll-margin-top: 2rem;
-  }
+.portfolio-scroll-area {
+  isolation: isolate;
+}
+
+.portfolio-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.portfolio-scroll::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.portfolio-scroll:hover,
+.portfolio-scroll:focus-within {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pf-border) transparent;
+}
+
+.portfolio-scroll:hover::-webkit-scrollbar,
+.portfolio-scroll:focus-within::-webkit-scrollbar {
+  width: 5px;
+}
+
+.portfolio-scroll:hover::-webkit-scrollbar-track,
+.portfolio-scroll:focus-within::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.portfolio-scroll:hover::-webkit-scrollbar-thumb,
+.portfolio-scroll:focus-within::-webkit-scrollbar-thumb {
+  background: var(--pf-border);
+  border-radius: 9999px;
+}
+
+.portfolio-scroll:hover::-webkit-scrollbar-thumb:hover,
+.portfolio-scroll:focus-within::-webkit-scrollbar-thumb:hover {
+  background: var(--pf-text-muted);
+}
+
+.portfolio-scroll-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2.5rem;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.portfolio-scroll-fade-top {
+  top: 0;
+  background: linear-gradient(to bottom, var(--pf-bg) 0%, transparent 100%);
+}
+
+.portfolio-scroll-fade-bottom {
+  bottom: 0;
+  background: linear-gradient(to top, var(--pf-bg) 0%, transparent 100%);
+}
+
+.portfolio-aside-scroll {
+  overscroll-behavior: contain;
+}
+
+.portfolio-section-content {
+  padding-bottom: 0.25rem;
 }
 
 .portfolio-text {
@@ -140,6 +204,17 @@
   .portfolio-root {
     background: #fff !important;
     color: #111 !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  .portfolio-scroll {
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  .portfolio-scroll-fade {
+    display: none !important;
   }
 
   .portfolio-surface {
diff --git a/frontend/src/portfolio/theme.js b/frontend/src/portfolio/theme.js
index 1d103c8..e482c2b 100644
--- a/frontend/src/portfolio/theme.js
+++ b/frontend/src/portfolio/theme.js
@@ -12,13 +12,22 @@ function getLuminance(hex) {
     return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
 
-const PALETTES = {
+export const PORTFOLIO_PALETTES = {
     modern: { primary: '#5a7a9e', secondary: '#7a96b5' },
     minimal: { primary: '#3f3f46', secondary: '#71717a' },
     creative: { primary: '#db2777', secondary: '#7c3aed' },
     professional: { primary: '#0f766e', secondary: '#0e7490' },
 }
 
+export const PORTFOLIO_THEME_OPTIONS = [
+    { id: 'modern', name: 'Modern', previewBg: '#09090b', isLight: false },
+    { id: 'minimal', name: 'Minimal', previewBg: '#fafaf9', isLight: true },
+    { id: 'creative', name: 'Creative', previewBg: '#09090b', isLight: false },
+    { id: 'professional', name: 'Professional', previewBg: '#fafaf9', isLight: true },
+]
+
+const PALETTES = PORTFOLIO_PALETTES
+
 const NEUTRALS = {
     dark: {
         bg: '#09090b',
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index f6f78f5..8aeb2ba 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -7,7 +7,7 @@ const API_URL = rawApiUrl.replace(/\/api\/?$/, '')
 
 if (import.meta.env.DEV && rawApiUrl.match(/\/api\/?$/) && !apiUrlWarningShown) {
     console.warn(
-        '[Portlify] VITE_API_URL should not include /api suffix. ' +
+        '[PortlifyAi] VITE_API_URL should not include /api suffix. ' +
         'Use the base URL only (e.g. http://localhost:5000). Auto-corrected.'
     )
     apiUrlWarningShown = true
diff --git a/frontend/src/utils/clerkAppearance.js b/frontend/src/utils/clerkAppearance.js
index 78c4398..b96bd57 100644
--- a/frontend/src/utils/clerkAppearance.js
+++ b/frontend/src/utils/clerkAppearance.js
@@ -1,116 +1,220 @@
-export function getUserButtonAppearance(theme) {
+const BRAND = {
+    primary: '#5a7a9e',
+    primaryHover: '#4a6585',
+    onPrimary: '#ffffff',
+}
+
+const TOKENS = {
+    dark: {
+        background: '#1a1a1d',
+        backgroundSecondary: '#0f0f12',
+        text: '#fafafa',
+        textSecondary: '#a1a1aa',
+        textMuted: '#71717a',
+        border: 'rgba(255, 255, 255, 0.06)',
+        borderHover: 'rgba(255, 255, 255, 0.1)',
+        inputBg: '#0f0f12',
+        shadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+    },
+    light: {
+        background: '#ffffff',
+        backgroundSecondary: '#f4f4f5',
+        text: '#18181b',
+        textSecondary: '#52525b',
+        textMuted: '#a1a1aa',
+        border: 'rgba(0, 0, 0, 0.06)',
+        borderHover: 'rgba(0, 0, 0, 0.1)',
+        inputBg: '#fafaf9',
+        shadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
+    },
+}
+
+function getTokens(theme) {
+    return TOKENS[theme === 'light' ? 'light' : 'dark']
+}
+
+function getAvatarElements() {
     return {
-        elements: {
-            avatarBox: 'w-9 h-9 sm:w-10 sm:h-10 ring-2 ring-primary-500/30 ring-offset-2 ring-offset-transparent',
-            userButtonPopoverCard: {
-                backgroundColor: theme === 'dark' ? '#1a1a1d' : '#ffffff',
-                border: theme === 'dark' ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.06)',
-                boxShadow: theme === 'dark'
-                    ? '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
-                    : '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
-            },
-            userButtonPopoverActionButton: {
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
-                '&:hover': {
-                    backgroundColor: theme === 'dark' ? '#0f0f12' : '#f4f4f5',
-                },
-            },
-            userButtonPopoverActionButtonText: {
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
-            },
-            userButtonPopoverActionButtonIcon: {
-                color: theme === 'dark' ? '#a1a1aa' : '#52525b',
+        userButtonAvatarBox: {
+            width: '2.25rem',
+            height: '2.25rem',
+            borderRadius: '9999px',
+            backgroundColor: BRAND.primary,
+            color: BRAND.onPrimary,
+            border: '2px solid rgba(90, 122, 158, 0.35)',
+            boxShadow: 'none',
+        },
+        userButtonTrigger: {
+            borderRadius: '9999px',
+            '&:hover': {
+                opacity: 0.92,
             },
-            userPreviewMainIdentifier: {
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
+            '&:focus': {
+                boxShadow: '0 0 0 3px rgba(90, 122, 158, 0.28)',
             },
-            userPreviewSecondaryIdentifier: {
-                color: theme === 'dark' ? '#a1a1aa' : '#52525b',
+        },
+        avatarBox: {
+            backgroundColor: BRAND.primary,
+            color: BRAND.onPrimary,
+            border: '2px solid rgba(90, 122, 158, 0.35)',
+        },
+        userPreviewAvatarBox: {
+            backgroundColor: BRAND.primary,
+            color: BRAND.onPrimary,
+            border: '2px solid rgba(90, 122, 158, 0.35)',
+        },
+        userPreviewAvatarContainer: {
+            backgroundColor: 'transparent',
+        },
+    }
+}
+
+function getUserButtonPopoverElements(tokens) {
+    return {
+        userButtonPopoverCard: {
+            backgroundColor: tokens.background,
+            border: `1px solid ${tokens.border}`,
+            borderRadius: '12px',
+            boxShadow: tokens.shadow,
+            overflow: 'hidden',
+        },
+        userButtonPopoverMain: {
+            backgroundColor: tokens.background,
+        },
+        userButtonPopoverActions: {
+            backgroundColor: tokens.background,
+            borderTop: `1px solid ${tokens.border}`,
+        },
+        userButtonPopoverActionButton: {
+            color: tokens.text,
+            borderRadius: '8px',
+            '&:hover': {
+                backgroundColor: tokens.backgroundSecondary,
             },
         },
+        userButtonPopoverActionButtonText: {
+            color: tokens.text,
+            fontWeight: 500,
+        },
+        userButtonPopoverActionButtonIcon: {
+            color: tokens.textSecondary,
+        },
+        userButtonPopoverFooter: {
+            backgroundColor: tokens.backgroundSecondary,
+            backgroundImage: 'none',
+            borderTop: `1px solid ${tokens.border}`,
+        },
+        userPreview: {
+            backgroundColor: tokens.background,
+        },
+        userPreviewMainIdentifier: {
+            color: tokens.text,
+            fontWeight: 600,
+        },
+        userPreviewMainIdentifierText: {
+            color: tokens.text,
+        },
+        userPreviewSecondaryIdentifier: {
+            color: tokens.textSecondary,
+        },
+        userPreviewTextContainer: {
+            color: tokens.text,
+        },
+    }
+}
+
+export function getUserButtonAppearance(theme) {
+    const tokens = getTokens(theme)
+
+    return {
+        elements: {
+            ...getAvatarElements(),
+            ...getUserButtonPopoverElements(tokens),
+        },
         variables: {
-            colorPrimary: '#5a7a9e',
-            colorBackground: theme === 'dark' ? '#1a1a1d' : '#ffffff',
-            colorText: theme === 'dark' ? '#fafafa' : '#18181b',
+            colorPrimary: BRAND.primary,
+            colorBackground: tokens.background,
+            colorText: tokens.text,
+            colorTextSecondary: tokens.textSecondary,
+            colorNeutral: tokens.textSecondary,
+            borderRadius: '10px',
         },
     }
 }
 
 export function getClerkAppearance(theme) {
+    const tokens = getTokens(theme)
+
     return {
-        baseTheme: theme === 'dark' ? undefined : undefined,
         variables: {
-            colorPrimary: '#5a7a9e',
-            colorBackground: theme === 'dark' ? '#1a1a1d' : '#ffffff',
-            colorText: theme === 'dark' ? '#fafafa' : '#18181b',
-            colorTextSecondary: theme === 'dark' ? '#a1a1aa' : '#52525b',
-            colorInputBackground: theme === 'dark' ? '#18181b' : '#f4f4f5',
-            colorInputText: theme === 'dark' ? '#fafafa' : '#18181b',
-            colorNeutral: theme === 'dark' ? '#a1a1aa' : '#52525b',
+            colorPrimary: BRAND.primary,
+            colorBackground: tokens.background,
+            colorText: tokens.text,
+            colorTextSecondary: tokens.textSecondary,
+            colorInputBackground: tokens.inputBg,
+            colorInputText: tokens.text,
+            colorNeutral: tokens.textSecondary,
             borderRadius: '10px',
             fontFamily: 'Inter, system-ui, sans-serif',
         },
         elements: {
-            ...getUserButtonAppearance(theme).elements,
-            rootBox: {
-                boxShadow: theme === 'dark'
-                    ? '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
-                    : '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
-            },
+            ...getAvatarElements(),
+            ...getUserButtonPopoverElements(tokens),
             card: {
-                backgroundColor: theme === 'dark' ? '#1a1a1d' : '#ffffff',
-                border: theme === 'dark' ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.06)',
-                boxShadow: 'none',
+                backgroundColor: tokens.background,
+                border: `1px solid ${tokens.border}`,
+                boxShadow: tokens.shadow,
             },
             headerTitle: {
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
+                color: tokens.text,
             },
             headerSubtitle: {
-                color: theme === 'dark' ? '#a1a1aa' : '#52525b',
+                color: tokens.textSecondary,
             },
             socialButtonsBlockButton: {
-                backgroundColor: theme === 'dark' ? '#0f0f12' : '#fafaf9',
-                border: theme === 'dark' ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.08)',
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
+                backgroundColor: tokens.backgroundSecondary,
+                border: `1px solid ${tokens.borderHover}`,
+                color: tokens.text,
                 '&:hover': {
-                    backgroundColor: theme === 'dark' ? '#18181b' : '#f4f4f5',
+                    backgroundColor: tokens.inputBg,
                 },
             },
             formFieldLabel: {
-                color: theme === 'dark' ? '#a1a1aa' : '#52525b',
+                color: tokens.textSecondary,
             },
             formFieldInput: {
-                backgroundColor: theme === 'dark' ? '#0f0f12' : '#fafaf9',
-                borderColor: theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)',
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
+                backgroundColor: tokens.inputBg,
+                borderColor: tokens.borderHover,
+                color: tokens.text,
                 '&:focus': {
-                    borderColor: '#5a7a9e',
+                    borderColor: BRAND.primary,
                     boxShadow: '0 0 0 3px rgba(90, 122, 158, 0.15)',
                 },
             },
             formButtonPrimary: {
-                background: '#5a7a9e',
+                backgroundColor: BRAND.primary,
+                color: BRAND.onPrimary,
                 '&:hover': {
-                    background: '#4a6585',
+                    backgroundColor: BRAND.primaryHover,
                 },
             },
             footerActionLink: {
-                color: '#5a7a9e',
+                color: BRAND.primary,
             },
             identityPreviewText: {
-                color: theme === 'dark' ? '#fafafa' : '#18181b',
+                color: tokens.text,
             },
             identityPreviewEditButton: {
-                color: '#5a7a9e',
+                color: BRAND.primary,
             },
             formFieldHintText: {
-                color: theme === 'dark' ? '#71717a' : '#a1a1aa',
+                color: tokens.textMuted,
             },
             dividerLine: {
-                backgroundColor: theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+                backgroundColor: tokens.borderHover,
             },
             dividerText: {
-                color: theme === 'dark' ? '#71717a' : '#a1a1aa',
+                color: tokens.textMuted,
             },
         },
     }
diff --git a/frontend/src/utils/seo.js b/frontend/src/utils/seo.js
new file mode 100644
index 0000000..e5100f4
--- /dev/null
+++ b/frontend/src/utils/seo.js
@@ -0,0 +1,304 @@
+import {
+    BRAND_ALTERNATE_NAMES,
+    BRAND_AUTHOR,
+    BRAND_AUTHOR_URL,
+    BRAND_DESCRIPTION,
+    BRAND_LOGO_SRC,
+    BRAND_NAME,
+    BRAND_NAME_DISPLAY,
+    BRAND_SOCIAL,
+    BRAND_TAGLINE,
+    BRAND_TWITTER,
+    DEFAULT_OG_IMAGE,
+    DEFAULT_SITE_URL,
+    DEFAULT_TITLE,
+} from '../constants/brand'
+import { getAppUrl, getPortfolioUrl } from './appUrl'
+import { safeHref } from './safeUrl'
+
+const DEFAULT_META = {
+    title: DEFAULT_TITLE,
+    description: BRAND_DESCRIPTION,
+    canonical: `${DEFAULT_SITE_URL}/`,
+    ogType: 'website',
+    ogImage: DEFAULT_OG_IMAGE,
+    ogImageAlt: `${BRAND_NAME_DISPLAY} - Transform your resume into a portfolio`,
+    robots: 'index, follow',
+}
+
+const JSON_LD_ID = 'portlify-dynamic-jsonld'
+
+function getSiteUrl() {
+    const url = getAppUrl()
+    return url || DEFAULT_SITE_URL
+}
+
+function getAbsoluteAsset(path) {
+    const base = getSiteUrl().replace(/\/$/, '')
+    return path.startsWith('http') ? path : `${base}${path.startsWith('/') ? path : `/${path}`}`
+}
+
+function upsertMeta(selector, attributes) {
+    let element = document.querySelector(selector)
+    if (!element) {
+        const isProperty = selector.includes('[property=')
+        element = document.createElement('meta')
+        if (isProperty) {
+            const property = selector.match(/property="([^"]+)"/)?.[1]
+            if (property) element.setAttribute('property', property)
+        } else {
+            const name = selector.match(/name="([^"]+)"/)?.[1]
+            if (name) element.setAttribute('name', name)
+        }
+        document.head.appendChild(element)
+    }
+
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (value != null && value !== '') {
+            element.setAttribute(key, value)
+        }
+    })
+
+    return element
+}
+
+function upsertLink(rel, href) {
+    let element = document.querySelector(`link[rel="${rel}"]`)
+    if (!element) {
+        element = document.createElement('link')
+        element.setAttribute('rel', rel)
+        document.head.appendChild(element)
+    }
+    element.setAttribute('href', href)
+    return element
+}
+
+function setJsonLd(data) {
+    let script = document.getElementById(JSON_LD_ID)
+    if (!script) {
+        script = document.createElement('script')
+        script.id = JSON_LD_ID
+        script.type = 'application/ld+json'
+        document.head.appendChild(script)
+    }
+    script.textContent = JSON.stringify(data)
+}
+
+function removeJsonLd() {
+    document.getElementById(JSON_LD_ID)?.remove()
+}
+
+export function applySiteSeo(overrides = {}) {
+    const siteUrl = getSiteUrl().replace(/\/$/, '')
+    const meta = {
+        ...DEFAULT_META,
+        canonical: `${siteUrl}/`,
+        ogImage: getAbsoluteAsset('/og-image.png'),
+        ...overrides,
+    }
+
+    document.title = meta.title
+
+    upsertMeta('meta[name="description"]', { content: meta.description })
+    if (meta.keywords) {
+        upsertMeta('meta[name="keywords"]', { content: meta.keywords })
+    }
+    upsertMeta('meta[name="robots"]', { content: meta.robots })
+    upsertMeta('meta[property="og:type"]', { content: meta.ogType })
+    upsertMeta('meta[property="og:url"]', { content: meta.canonical })
+    upsertMeta('meta[property="og:title"]', { content: meta.title })
+    upsertMeta('meta[property="og:description"]', { content: meta.description })
+    upsertMeta('meta[property="og:image"]', { content: meta.ogImage })
+    upsertMeta('meta[property="og:image:alt"]', { content: meta.ogImageAlt })
+    upsertMeta('meta[property="og:site_name"]', { content: BRAND_NAME_DISPLAY })
+    upsertMeta('meta[name="twitter:card"]', { content: 'summary_large_image' })
+    upsertMeta('meta[name="twitter:title"]', { content: meta.title })
+    upsertMeta('meta[name="twitter:description"]', { content: meta.description })
+    upsertMeta('meta[name="twitter:image"]', { content: meta.ogImage })
+    upsertMeta('meta[name="twitter:creator"]', { content: BRAND_TWITTER })
+    upsertMeta('meta[name="twitter:site"]', { content: BRAND_TWITTER })
+
+    upsertLink('canonical', meta.canonical)
+
+    if (meta.jsonLd) {
+        setJsonLd(meta.jsonLd)
+    } else {
+        removeJsonLd()
+    }
+}
+
+export function resetSiteSeo() {
+    applySiteSeo()
+    removeJsonLd()
+}
+
+export function buildPortfolioSeo(profile, username) {
+    const name = profile?.basicDetails?.name || username
+    const headline = profile?.basicDetails?.headline
+        || profile?.basicDetails?.about?.substring(0, 120)
+        || 'Professional Portfolio'
+    const aboutSnippet = profile?.basicDetails?.about?.substring(0, 155)
+    const canonical = getPortfolioUrl(username)
+    const profilePhoto = profile?.basicDetails?.profilePhoto
+    const ogImage = profilePhoto || getAbsoluteAsset('/og-image.png')
+
+    const description = aboutSnippet
+        ? `${name} — ${aboutSnippet}${aboutSnippet.length >= 155 ? '…' : ''} View ${name}'s portfolio on ${BRAND_NAME_DISPLAY}.`
+        : `${name}'s professional portfolio — ${headline}. Powered by ${BRAND_NAME_DISPLAY}, the AI resume-to-portfolio builder.`
+
+    const title = `${name} — ${headline} | ${BRAND_NAME_DISPLAY}`
+
+    const socialLinks = profile?.socialLinks || {}
+    const sameAs = [
+        safeHref(socialLinks.github),
+        safeHref(socialLinks.linkedin),
+        safeHref(socialLinks.twitter),
+        safeHref(socialLinks.website),
+    ].filter(Boolean)
+
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@graph': [
+            {
+                '@type': 'ProfilePage',
+                '@id': `${canonical}#profilepage`,
+                url: canonical,
+                name: `${name} | ${BRAND_NAME_DISPLAY}`,
+                description,
+                isPartOf: {
+                    '@type': 'WebSite',
+                    name: BRAND_NAME_DISPLAY,
+                    url: getSiteUrl().replace(/\/$/, ''),
+                },
+                mainEntity: {
+                    '@id': `${canonical}#person`,
+                },
+            },
+            {
+                '@type': 'Person',
+                '@id': `${canonical}#person`,
+                name,
+                jobTitle: profile?.basicDetails?.headline || undefined,
+                description: profile?.basicDetails?.about || undefined,
+                url: canonical,
+                image: profilePhoto || undefined,
+                email: socialLinks.email || profile?.basicDetails?.email || undefined,
+                sameAs: sameAs.length > 0 ? sameAs : undefined,
+            },
+            {
+                '@type': 'WebPage',
+                '@id': `${canonical}#webpage`,
+                url: canonical,
+                name: title,
+                description,
+                isPartOf: {
+                    '@type': 'WebSite',
+                    name: BRAND_NAME_DISPLAY,
+                    url: getSiteUrl().replace(/\/$/, ''),
+                },
+                about: {
+                    '@id': `${canonical}#person`,
+                },
+            },
+        ],
+    }
+
+    return {
+        title,
+        description,
+        canonical,
+        ogType: 'profile',
+        ogImage,
+        ogImageAlt: `${name} — ${headline} on ${BRAND_NAME_DISPLAY}`,
+        robots: 'index, follow',
+        jsonLd,
+    }
+}
+
+export function getSiteStructuredData(siteUrl = DEFAULT_SITE_URL) {
+    const base = siteUrl.replace(/\/$/, '')
+    const logoUrl = `${base}${BRAND_LOGO_SRC}`
+
+    return {
+        '@context': 'https://schema.org',
+        '@graph': [
+            {
+                '@type': 'Organization',
+                '@id': `${base}/#organization`,
+                name: BRAND_NAME,
+                alternateName: BRAND_ALTERNATE_NAMES,
+                url: base,
+                logo: {
+                    '@type': 'ImageObject',
+                    url: logoUrl,
+                    width: 512,
+                    height: 512,
+                },
+                founder: {
+                    '@type': 'Person',
+                    name: BRAND_AUTHOR,
+                    url: BRAND_AUTHOR_URL,
+                },
+                sameAs: BRAND_SOCIAL,
+            },
+            {
+                '@type': 'WebSite',
+                '@id': `${base}/#website`,
+                name: BRAND_NAME_DISPLAY,
+                alternateName: BRAND_ALTERNATE_NAMES,
+                url: base,
+                description: BRAND_DESCRIPTION,
+                publisher: {
+                    '@id': `${base}/#organization`,
+                },
+                inLanguage: 'en-US',
+            },
+            {
+                '@type': 'WebApplication',
+                '@id': `${base}/#app`,
+                name: BRAND_NAME_DISPLAY,
+                alternateName: BRAND_ALTERNATE_NAMES,
+                url: base,
+                applicationCategory: 'BusinessApplication',
+                operatingSystem: 'Web',
+                description: BRAND_DESCRIPTION,
+                offers: {
+                    '@type': 'Offer',
+                    price: '0',
+                    priceCurrency: 'INR',
+                },
+                featureList: [
+                    'AI Resume Parsing',
+                    'Instant Portfolio Generation',
+                    'Custom Username URLs',
+                    'Dark and Light Theme',
+                    'Portfolio Analytics',
+                    'PDF DOC DOCX Support',
+                    'Custom Branding',
+                    'Portfolio Export',
+                ],
+                screenshot: `${base}/og-image.png`,
+                author: {
+                    '@type': 'Person',
+                    name: BRAND_AUTHOR,
+                    url: BRAND_AUTHOR_URL,
+                },
+                publisher: {
+                    '@id': `${base}/#organization`,
+                },
+            },
+        ],
+    }
+}
+
+export function getDefaultSiteTitle() {
+    return DEFAULT_TITLE
+}
+
+export function getDefaultSiteDescription() {
+    return BRAND_DESCRIPTION
+}
+
+export function getDefaultSiteTagline() {
+    return BRAND_TAGLINE
+}
\ No newline at end of file