diff --git a/backend/.env.example b/backend/.env.example
index 8a16422..a2f470e 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -8,6 +8,6 @@ CLOUDINARY_API_SECRET=your_api_secret
 OLLAMA_API_KEY=your_ollama_api_key
 RAZORPAY_KEY_ID=your_razorpay_key_id
 RAZORPAY_KEY_SECRET=your_razorpay_key_secret
-FRONTEND_URL=https://portlify.techycsr.dev
+FRONTEND_URL=https://portlifyai.app
 NODE_ENV=development
-PORT=5000
\ No newline at end of file
+PORT=5001
\ No newline at end of file
diff --git a/backend/src/config/cors.js b/backend/src/config/cors.js
new file mode 100644
index 0000000..4c0ba32
--- /dev/null
+++ b/backend/src/config/cors.js
@@ -0,0 +1,61 @@
+const PRODUCTION_ORIGINS = [
+    'https://portlifyai.app',
+    'https://www.portlifyai.app',
+]
+
+const LOCAL_DEV_ORIGIN_PATTERNS = [
+    /^https?:\/\/localhost(?::\d+)?$/,
+    /^https?:\/\/127\.0\.0\.1(?::\d+)?$/,
+    /^https?:\/\/(192\.168\.\d{1,3}\.\d{1,3}|10\.\d{1,3}\.\d{1,3}\.\d{1,3}|172\.(?:1[6-9]|2\d|3[01])\.\d{1,3}\.\d{1,3})(?::\d+)?$/,
+]
+
+function normalizeOrigin(url) {
+    if (!url) return null
+    return url.replace(/\/$/, '')
+}
+
+export function getAllowedOrigins() {
+    const fromEnv = normalizeOrigin(process.env.FRONTEND_URL)
+    const origins = new Set(PRODUCTION_ORIGINS.map(normalizeOrigin))
+
+    if (fromEnv) {
+        origins.add(fromEnv)
+    }
+
+    return [...origins]
+}
+
+export function isAllowedCorsOrigin(origin, { isProduction = process.env.NODE_ENV === 'production' } = {}) {
+    if (!origin) {
+        return true
+    }
+
+    const normalized = normalizeOrigin(origin)
+    const allowedOrigins = getAllowedOrigins()
+
+    if (allowedOrigins.includes(normalized)) {
+        return true
+    }
+
+    if (!isProduction) {
+        return LOCAL_DEV_ORIGIN_PATTERNS.some((pattern) => pattern.test(normalized))
+    }
+
+    return false
+}
+
+export function createCorsOptions() {
+    return {
+        origin(origin, callback) {
+            if (isAllowedCorsOrigin(origin)) {
+                callback(null, true)
+                return
+            }
+
+            callback(new Error(`CORS blocked for origin: ${origin}`))
+        },
+        credentials: true,
+        methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+        allowedHeaders: ['Content-Type', 'Authorization'],
+    }
+}
\ No newline at end of file
diff --git a/backend/src/index.js b/backend/src/index.js
index 743244f..e30cc91 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -1,6 +1,7 @@
 import 'dotenv/config';
 import express from 'express';
 import cors from 'cors';
+import { createCorsOptions } from './config/cors.js';
 import helmet from 'helmet';
 import rateLimit from 'express-rate-limit';
 import { clerkMiddleware } from '@clerk/express';
@@ -30,14 +31,7 @@ cloudinary.config({
     api_secret: process.env.CLOUDINARY_API_SECRET
 });
 
-const corsOptions = {
-    origin: process.env.NODE_ENV === 'production'
-        ? process.env.FRONTEND_URL
-        : ['http://localhost:5173', 'http://localhost:5174', 'http://localhost:3000'],
-    credentials: true,
-    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
-    allowedHeaders: ['Content-Type', 'Authorization']
-};
+const corsOptions = createCorsOptions();
 
 const parseLimiter = rateLimit({
     windowMs: 60 * 60 * 1000,
diff --git a/backend/src/models/Analytics.js b/backend/src/models/Analytics.js
index ed78e1c..e5cbff4 100644
--- a/backend/src/models/Analytics.js
+++ b/backend/src/models/Analytics.js
@@ -1,4 +1,6 @@
 import mongoose from 'mongoose';
+import { getUtcDayStart, isSameUtcDay } from '../utils/analyticsDates.js';
+import { normalizeReferrer, resolveReferrer } from '../utils/referrer.js';
 
 // Daily stat tracking
 const dailyStatSchema = new mongoose.Schema({
@@ -10,9 +12,61 @@ const dailyStatSchema = new mongoose.Schema({
 // Referrer tracking
 const referrerSchema = new mongoose.Schema({
     source: { type: String, required: true },
+    referrerId: { type: String, default: '' },
     count: { type: Number, default: 0 }
 }, { _id: false });
 
+const MAX_STORED_REFERRERS = 50;
+const OTHER_REFERRER_ID = 'other-sites';
+const OTHER_REFERRER_LABEL = 'Other sites';
+
+function getReferrerEntryId(entry) {
+    if (entry.referrerId) {
+        return entry.referrerId;
+    }
+
+    return normalizeReferrer(entry.source).id;
+}
+
+function buildReferrerIndex(referrers) {
+    const index = new Map();
+
+    for (const entry of referrers) {
+        index.set(getReferrerEntryId(entry), entry);
+    }
+
+    return index;
+}
+
+function compactReferrers(referrers) {
+    if (referrers.length <= MAX_STORED_REFERRERS) {
+        return referrers;
+    }
+
+    const sorted = [...referrers].sort((a, b) => b.count - a.count);
+    const kept = sorted.slice(0, MAX_STORED_REFERRERS - 1);
+    const overflow = sorted.slice(MAX_STORED_REFERRERS - 1);
+    const overflowCount = overflow.reduce((sum, entry) => sum + entry.count, 0);
+
+    if (overflowCount <= 0) {
+        return kept;
+    }
+
+    const otherEntry = kept.find((entry) => getReferrerEntryId(entry) === OTHER_REFERRER_ID);
+
+    if (otherEntry) {
+        otherEntry.count += overflowCount;
+    } else {
+        kept.push({
+            source: OTHER_REFERRER_LABEL,
+            referrerId: OTHER_REFERRER_ID,
+            count: overflowCount,
+        });
+    }
+
+    return kept;
+}
+
 // Location tracking
 const locationSchema = new mongoose.Schema({
     country: { type: String, default: '' },
@@ -87,8 +141,7 @@ const analyticsSchema = new mongoose.Schema({
 
 // Method to record a view
 analyticsSchema.methods.recordView = async function (visitorHash, device, referrer, location) {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
+    const today = getUtcDayStart();
 
     // Increment total views
     this.totalViews += 1;
@@ -104,10 +157,8 @@ analyticsSchema.methods.recordView = async function (visitorHash, device, referr
         }
     }
 
-    // Update daily stats
-    let todayStat = this.dailyStats.find(s =>
-        s.date.getTime() === today.getTime()
-    );
+    // Update daily stats (normalize legacy local-midnight buckets to UTC)
+    let todayStat = this.dailyStats.find((s) => isSameUtcDay(s.date, today));
     if (!todayStat) {
         this.dailyStats.push({
             date: today,
@@ -119,6 +170,9 @@ analyticsSchema.methods.recordView = async function (visitorHash, device, referr
             this.dailyStats = this.dailyStats.slice(-90);
         }
     } else {
+        if (todayStat.date.getTime() !== today.getTime()) {
+            todayStat.date = today;
+        }
         todayStat.views += 1;
         if (isUnique) todayStat.uniqueViews += 1;
     }
@@ -128,14 +182,25 @@ analyticsSchema.methods.recordView = async function (visitorHash, device, referr
         this.devices[device] += 1;
     }
 
-    // Update referrer stats
-    if (referrer) {
-        const existingRef = this.referrers.find(r => r.source === referrer);
-        if (existingRef) {
-            existingRef.count += 1;
-        } else {
-            this.referrers.push({ source: referrer, count: 1 });
-        }
+    // Update referrer stats (always tracked, including direct traffic)
+    const normalizedReferrer = resolveReferrer(referrer);
+    const referrerIndex = buildReferrerIndex(this.referrers);
+    const existingRef = referrerIndex.get(normalizedReferrer.id);
+
+    if (existingRef) {
+        existingRef.count += 1;
+        existingRef.source = normalizedReferrer.label;
+        existingRef.referrerId = normalizedReferrer.id;
+    } else {
+        this.referrers.push({
+            source: normalizedReferrer.label,
+            referrerId: normalizedReferrer.id,
+            count: 1,
+        });
+    }
+
+    if (this.referrers.length > MAX_STORED_REFERRERS) {
+        this.referrers = compactReferrers(this.referrers);
     }
 
     // Update location stats
diff --git a/backend/src/routes/analytics.js b/backend/src/routes/analytics.js
index 8357384..9de1258 100644
--- a/backend/src/routes/analytics.js
+++ b/backend/src/routes/analytics.js
@@ -3,6 +3,8 @@ import Analytics from '../models/Analytics.js';
 import Profile from '../models/Profile.js';
 import User from '../models/User.js';
 import authMiddleware, { getUserFromAuth } from '../middleware/auth.js';
+import { getUtcDayStart, isSameUtcDay, shiftUtcDays } from '../utils/analyticsDates.js';
+import { aggregateReferrers, sanitizeReferrerInput } from '../utils/referrer.js';
 import crypto from 'crypto';
 
 const router = express.Router();
@@ -27,7 +29,7 @@ const getDeviceType = (userAgent) => {
 router.post('/track/:username', async (req, res) => {
     try {
         const { username } = req.params;
-        const { referrer } = req.body;
+        const referrer = sanitizeReferrerInput(req.body?.referrer);
 
         // Find profile
         const profile = await Profile.findOne({ username: username.toLowerCase() });
@@ -82,25 +84,19 @@ router.get('/summary', authMiddleware, getUserFromAuth, async (req, res) => {
             });
         }
 
-        // Calculate period stats
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
+        const today = getUtcDayStart();
+        const weekStart = shiftUtcDays(today, -6);
+        const monthStart = shiftUtcDays(today, -29);
 
-        const weekAgo = new Date(today);
-        weekAgo.setDate(weekAgo.getDate() - 7);
-
-        const monthAgo = new Date(today);
-        monthAgo.setDate(monthAgo.getDate() - 30);
-
-        const todayStats = analytics.dailyStats.find(s => s.date.getTime() === today.getTime());
+        const todayStats = analytics.dailyStats.find((s) => isSameUtcDay(s.date, today));
         const todayViews = todayStats ? todayStats.views : 0;
 
         const weekViews = analytics.dailyStats
-            .filter(s => s.date >= weekAgo)
+            .filter((s) => getUtcDayStart(s.date) >= weekStart)
             .reduce((sum, s) => sum + s.views, 0);
 
         const monthViews = analytics.dailyStats
-            .filter(s => s.date >= monthAgo)
+            .filter((s) => getUtcDayStart(s.date) >= monthStart)
             .reduce((sum, s) => sum + s.views, 0);
 
         res.json({
@@ -142,18 +138,13 @@ router.get('/me', authMiddleware, getUserFromAuth, async (req, res) => {
         }
 
         // Get last 30 days of daily stats
-        const thirtyDaysAgo = new Date();
-        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
-        thirtyDaysAgo.setHours(0, 0, 0, 0);
+        const thirtyDaysAgo = shiftUtcDays(getUtcDayStart(), -29);
 
         const recentDailyStats = analytics.dailyStats
-            .filter(s => s.date >= thirtyDaysAgo)
+            .filter((s) => getUtcDayStart(s.date) >= thirtyDaysAgo)
             .sort((a, b) => a.date - b.date);
 
-        // Top 10 referrers
-        const topReferrers = [...analytics.referrers]
-            .sort((a, b) => b.count - a.count)
-            .slice(0, 10);
+        const topReferrers = aggregateReferrers(analytics.referrers).slice(0, 10);
 
         // Top 10 locations
         const topLocations = [...analytics.locations]
diff --git a/backend/src/routes/export.js b/backend/src/routes/export.js
index e5dbc7f..9e304fa 100644
--- a/backend/src/routes/export.js
+++ b/backend/src/routes/export.js
@@ -452,7 +452,7 @@ Generated from PortlifyAi on ${new Date().toLocaleDateString()}
 Feel free to modify the CSS variables in styles.css to change colors.
 
 Generated with ❤️ by PortlifyAi
-${process.env.FRONTEND_URL || 'https://portlify.techycsr.dev'}
+${process.env.FRONTEND_URL || 'https://portlifyai.app'}
 `, { name: 'README.md' });
 
         await archive.finalize();
diff --git a/backend/src/routes/sitemap.js b/backend/src/routes/sitemap.js
index 335367b..5f4a8a9 100644
--- a/backend/src/routes/sitemap.js
+++ b/backend/src/routes/sitemap.js
@@ -4,7 +4,7 @@ import Profile from '../models/Profile.js';
 const router = express.Router();
 
 const getFrontendUrl = () => {
-    const url = process.env.FRONTEND_URL || 'https://portlify.techycsr.dev';
+    const url = process.env.FRONTEND_URL || 'https://portlifyai.app';
     return url.replace(/\/$/, '');
 };
 
diff --git a/backend/src/utils/analyticsDates.js b/backend/src/utils/analyticsDates.js
new file mode 100644
index 0000000..7294eb2
--- /dev/null
+++ b/backend/src/utils/analyticsDates.js
@@ -0,0 +1,13 @@
+export function getUtcDayStart(date = new Date()) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+}
+
+export function isSameUtcDay(a, b) {
+    return getUtcDayStart(a).getTime() === getUtcDayStart(b).getTime();
+}
+
+export function shiftUtcDays(date, days) {
+    const shifted = new Date(date.getTime());
+    shifted.setUTCDate(shifted.getUTCDate() + days);
+    return shifted;
+}
\ No newline at end of file
diff --git a/backend/src/utils/referrer.js b/backend/src/utils/referrer.js
new file mode 100644
index 0000000..d634eb5
--- /dev/null
+++ b/backend/src/utils/referrer.js
@@ -0,0 +1,289 @@
+const SOURCE_DEFINITIONS = [
+    { id: 'direct', label: 'Direct / Link', category: 'direct', patterns: [] },
+    { id: 'chatgpt', label: 'ChatGPT', category: 'ai', patterns: [/^(chat\.openai\.com|chatgpt\.com)$/i] },
+    { id: 'claude', label: 'Claude', category: 'ai', patterns: [/^claude\.ai$/i] },
+    { id: 'perplexity', label: 'Perplexity', category: 'ai', patterns: [/^perplexity\.ai$/i] },
+    { id: 'gemini', label: 'Google Gemini', category: 'ai', patterns: [/^(gemini\.google\.com|bard\.google\.com)$/i] },
+    { id: 'copilot', label: 'Microsoft Copilot', category: 'ai', patterns: [/^(copilot\.microsoft\.com|copilot\.cloud\.microsoft)$/i] },
+    { id: 'phind', label: 'Phind', category: 'ai', patterns: [/^phind\.com$/i] },
+    { id: 'poe', label: 'Poe', category: 'ai', patterns: [/^poe\.com$/i] },
+    { id: 'you', label: 'You.com', category: 'ai', patterns: [/^you\.com$/i] },
+    { id: 'meta-ai', label: 'Meta AI', category: 'ai', patterns: [/^meta\.ai$/i] },
+    { id: 'grok', label: 'Grok', category: 'ai', patterns: [/^grok\.com$/i] },
+    { id: 'deepseek', label: 'DeepSeek', category: 'ai', patterns: [/^chat\.deepseek\.com$/i] },
+    { id: 'linkedin', label: 'LinkedIn', category: 'social', patterns: [/^(linkedin\.com|lnkd\.in)$/i] },
+    { id: 'twitter', label: 'X (Twitter)', category: 'social', patterns: [/^(twitter\.com|x\.com|t\.co)$/i] },
+    { id: 'facebook', label: 'Facebook', category: 'social', patterns: [/^(facebook\.com|fb\.com|m\.facebook\.com)$/i] },
+    { id: 'instagram', label: 'Instagram', category: 'social', patterns: [/^(instagram\.com|l\.instagram\.com)$/i] },
+    { id: 'reddit', label: 'Reddit', category: 'social', patterns: [/^(reddit\.com|old\.reddit\.com)$/i] },
+    { id: 'youtube', label: 'YouTube', category: 'social', patterns: [/^(youtube\.com|youtu\.be|m\.youtube\.com)$/i] },
+    { id: 'tiktok', label: 'TikTok', category: 'social', patterns: [/^(tiktok\.com|vm\.tiktok\.com)$/i] },
+    { id: 'pinterest', label: 'Pinterest', category: 'social', patterns: [/^(pinterest\.com|pin\.it)$/i] },
+    { id: 'threads', label: 'Threads', category: 'social', patterns: [/^threads\.net$/i] },
+    { id: 'discord', label: 'Discord', category: 'social', patterns: [/^(discord\.com|discord\.gg)$/i] },
+    { id: 'telegram', label: 'Telegram', category: 'social', patterns: [/^(t\.me|telegram\.org|web\.telegram\.org)$/i] },
+    { id: 'whatsapp', label: 'WhatsApp', category: 'social', patterns: [/^(wa\.me|web\.whatsapp\.com|api\.whatsapp\.com)$/i] },
+    { id: 'github', label: 'GitHub', category: 'website', patterns: [/^github\.com$/i] },
+    { id: 'medium', label: 'Medium', category: 'website', patterns: [/^(medium\.com|www\.medium\.com)$/i] },
+    { id: 'substack', label: 'Substack', category: 'website', patterns: [/^(substack\.com|open\.substack\.com)$/i] },
+    { id: 'notion', label: 'Notion', category: 'website', patterns: [/^(notion\.so|www\.notion\.so)$/i] },
+    { id: 'google', label: 'Google Search', category: 'search', patterns: [/^google\.[a-z.]+$/i] },
+    { id: 'bing', label: 'Bing', category: 'search', patterns: [/^bing\.com$/i] },
+    { id: 'duckduckgo', label: 'DuckDuckGo', category: 'search', patterns: [/^duckduckgo\.com$/i] },
+    { id: 'yahoo', label: 'Yahoo', category: 'search', patterns: [/^(search\.yahoo\.com|yahoo\.com)$/i] },
+    { id: 'ecosia', label: 'Ecosia', category: 'search', patterns: [/^ecosia\.org$/i] },
+    { id: 'brave', label: 'Brave Search', category: 'search', patterns: [/^search\.brave\.com$/i] },
+    { id: 'gmail', label: 'Gmail', category: 'email', patterns: [/^mail\.google\.com$/i] },
+    { id: 'outlook', label: 'Outlook', category: 'email', patterns: [/^(outlook\.live\.com|outlook\.office\.com)$/i] },
+    { id: 'yahoo-mail', label: 'Yahoo Mail', category: 'email', patterns: [/^mail\.yahoo\.com$/i] },
+    { id: 'protonmail', label: 'Proton Mail', category: 'email', patterns: [/^(mail\.proton\.me|protonmail\.com)$/i] },
+];
+
+const LABEL_LOOKUP = new Map(
+    SOURCE_DEFINITIONS.flatMap((source) => [
+        [source.label.toLowerCase(), source],
+        [source.id, source],
+    ])
+);
+
+const LEGACY_DIRECT_LABELS = new Set(['direct', 'direct / link']);
+
+const UTM_SOURCE_LOOKUP = {
+    linkedin: 'linkedin',
+    twitter: 'twitter',
+    x: 'twitter',
+    facebook: 'facebook',
+    instagram: 'instagram',
+    reddit: 'reddit',
+    youtube: 'youtube',
+    tiktok: 'tiktok',
+    google: 'google',
+    bing: 'bing',
+    chatgpt: 'chatgpt',
+    claude: 'claude',
+    perplexity: 'perplexity',
+    gemini: 'gemini',
+    newsletter: 'newsletter',
+    email: 'email',
+    whatsapp: 'whatsapp',
+    telegram: 'telegram',
+    github: 'github',
+};
+
+const UTM_FALLBACK_LABELS = {
+    newsletter: { id: 'newsletter', label: 'Newsletter', category: 'email' },
+    email: { id: 'email', label: 'Email', category: 'email' },
+};
+
+const MAX_REFERRER_LENGTH = 2048;
+const INTERNAL_HOSTS = new Set(['localhost', '127.0.0.1']);
+
+function stripWww(hostname) {
+    return hostname.replace(/^www\./i, '');
+}
+
+function getConfiguredInternalHosts() {
+    const hosts = new Set(INTERNAL_HOSTS);
+    const frontendUrl = process.env.FRONTEND_URL;
+
+    if (frontendUrl) {
+        try {
+            const hostname = stripWww(new URL(frontendUrl).hostname);
+            if (hostname) hosts.add(hostname.toLowerCase());
+        } catch {
+            // Ignore invalid FRONTEND_URL values.
+        }
+    }
+
+    return hosts;
+}
+
+function tryParseReferrerHost(raw) {
+    try {
+        const url = /^https?:\/\//i.test(raw) ? new URL(raw) : new URL(`https://${raw}`);
+        return stripWww(url.hostname).toLowerCase();
+    } catch {
+        return null;
+    }
+}
+
+function isInternalHostname(hostname) {
+    const normalized = stripWww(hostname).toLowerCase();
+
+    for (const host of getConfiguredInternalHosts()) {
+        if (normalized === host || normalized.endsWith(`.${host}`)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function isInternalReferrer(raw) {
+    if (!raw || raw.startsWith('utm:')) {
+        return false;
+    }
+
+    const host = tryParseReferrerHost(raw);
+    return host ? isInternalHostname(host) : false;
+}
+
+function formatHostname(hostname) {
+    const parts = stripWww(hostname).split('.').filter(Boolean);
+    if (parts.length === 0) return hostname;
+
+    const base = parts.length >= 2 ? parts[parts.length - 2] : parts[0];
+    return base
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+}
+
+function matchSourceDefinition(hostname) {
+    return SOURCE_DEFINITIONS.find((source) =>
+        source.patterns.some((pattern) => pattern.test(hostname))
+    );
+}
+
+function buildResult(source, domain = null) {
+    return {
+        id: source.id,
+        label: source.label,
+        category: source.category,
+        domain,
+    };
+}
+
+function getCanonicalReferrerMeta(normalized) {
+    const definition = SOURCE_DEFINITIONS.find((entry) => entry.id === normalized.id)
+        || UTM_FALLBACK_LABELS[normalized.id];
+
+    if (definition) {
+        return {
+            id: definition.id,
+            label: definition.label,
+            category: definition.category,
+            domain: normalized.domain,
+        };
+    }
+
+    return normalized;
+}
+
+function normalizeUtmReferrer(raw) {
+    const parts = raw.split(':');
+    const source = (parts[1] || '').trim();
+    const medium = (parts[2] || '').trim();
+    const campaign = parts.slice(3).join(':').trim();
+    const normalizedSource = source.toLowerCase();
+    const normalizedMedium = medium.toLowerCase();
+
+    const mappedId = UTM_SOURCE_LOOKUP[normalizedSource];
+    if (mappedId) {
+        const definition = SOURCE_DEFINITIONS.find((entry) => entry.id === mappedId)
+            || UTM_FALLBACK_LABELS[mappedId];
+
+        if (definition) {
+            return getCanonicalReferrerMeta(buildResult(definition));
+        }
+    }
+
+    const fallbackLabel = [
+        source,
+        medium ? `(${medium})` : '',
+        campaign ? `· ${campaign}` : '',
+    ].filter(Boolean).join(' ');
+
+    return {
+        id: `utm-${normalizedSource || 'unknown'}`,
+        label: fallbackLabel || 'Campaign',
+        category: 'campaign',
+        domain: null,
+    };
+}
+
+export function resolveReferrer(rawReferrer) {
+    return getCanonicalReferrerMeta(normalizeReferrer(sanitizeReferrerInput(rawReferrer)));
+}
+
+export function sanitizeReferrerInput(input) {
+    if (input == null) {
+        return '';
+    }
+
+    if (typeof input !== 'string') {
+        return '';
+    }
+
+    return input.trim().slice(0, MAX_REFERRER_LENGTH);
+}
+
+export function normalizeReferrer(rawReferrer) {
+    const raw = sanitizeReferrerInput(rawReferrer);
+
+    if (!raw || LEGACY_DIRECT_LABELS.has(raw.toLowerCase())) {
+        return buildResult(SOURCE_DEFINITIONS[0]);
+    }
+
+    const known = LABEL_LOOKUP.get(raw.toLowerCase());
+    if (known) {
+        return buildResult(known);
+    }
+
+    if (raw.startsWith('utm:')) {
+        return normalizeUtmReferrer(raw);
+    }
+
+    if (isInternalReferrer(raw)) {
+        return buildResult(SOURCE_DEFINITIONS[0]);
+    }
+
+    try {
+        const url = /^https?:\/\//i.test(raw) ? new URL(raw) : new URL(`https://${raw}`);
+        const hostname = stripWww(url.hostname);
+        const matched = matchSourceDefinition(hostname);
+
+        if (matched) {
+            return buildResult(matched, hostname);
+        }
+
+        return {
+            id: hostname.toLowerCase(),
+            label: formatHostname(hostname),
+            category: 'website',
+            domain: hostname.toLowerCase(),
+        };
+    } catch {
+        return {
+            id: 'unknown',
+            label: raw.length > 48 ? `${raw.slice(0, 45)}...` : raw,
+            category: 'other',
+            domain: null,
+        };
+    }
+}
+
+export function aggregateReferrers(referrerEntries = []) {
+    const totals = new Map();
+
+    for (const entry of referrerEntries) {
+        if (!entry || typeof entry.source !== 'string') {
+            continue;
+        }
+
+        const normalized = resolveReferrer(entry.source);
+        const existing = totals.get(normalized.id);
+
+        if (existing) {
+            existing.count += entry.count || 0;
+        } else {
+            totals.set(normalized.id, {
+                ...normalized,
+                source: normalized.label,
+                count: entry.count || 0,
+            });
+        }
+    }
+
+    return [...totals.values()].sort((a, b) => b.count - a.count);
+}
diff --git a/backend/test/analyticsDates.test.js b/backend/test/analyticsDates.test.js
new file mode 100644
index 0000000..d299f72
--- /dev/null
+++ b/backend/test/analyticsDates.test.js
@@ -0,0 +1,25 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { getUtcDayStart, isSameUtcDay, shiftUtcDays } from '../src/utils/analyticsDates.js';
+
+describe('analyticsDates', () => {
+    it('normalizes dates to UTC midnight', () => {
+        const day = getUtcDayStart(new Date('2026-06-06T23:30:00Z'));
+
+        assert.equal(day.toISOString(), '2026-06-06T00:00:00.000Z');
+    });
+
+    it('shifts UTC day buckets without local timezone drift', () => {
+        const today = getUtcDayStart(new Date('2026-06-06T12:00:00Z'));
+        const weekAgo = shiftUtcDays(today, -7);
+
+        assert.equal(weekAgo.toISOString(), '2026-05-30T00:00:00.000Z');
+    });
+
+    it('treats legacy local-midnight buckets as the same UTC day', () => {
+        const utcMidnight = getUtcDayStart(new Date('2026-06-06T12:00:00Z'));
+        const legacyBucket = new Date('2026-06-06T07:00:00.000Z');
+
+        assert.equal(isSameUtcDay(legacyBucket, utcMidnight), true);
+    });
+});
\ No newline at end of file
diff --git a/backend/test/cors.test.js b/backend/test/cors.test.js
new file mode 100644
index 0000000..839cee1
--- /dev/null
+++ b/backend/test/cors.test.js
@@ -0,0 +1,43 @@
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { isAllowedCorsOrigin } from '../src/config/cors.js';
+
+describe('cors', () => {
+    const originalEnv = { ...process.env };
+
+    beforeEach(() => {
+        process.env = { ...originalEnv, NODE_ENV: 'development' };
+    });
+
+    afterEach(() => {
+        process.env = originalEnv;
+    });
+
+    it('allows localhost and LAN dev origins', () => {
+        assert.equal(isAllowedCorsOrigin('http://localhost:5173'), true);
+        assert.equal(isAllowedCorsOrigin('http://172.30.212.151:5173'), true);
+        assert.equal(isAllowedCorsOrigin('http://192.168.1.42:5173'), true);
+    });
+
+    it('allows portlifyai.app in production', () => {
+        assert.equal(
+            isAllowedCorsOrigin('https://portlifyai.app', { isProduction: true }),
+            true,
+        );
+    });
+
+    it('allows FRONTEND_URL from env in production', () => {
+        process.env.FRONTEND_URL = 'https://custom.example.com';
+        assert.equal(
+            isAllowedCorsOrigin('https://custom.example.com', { isProduction: true }),
+            true,
+        );
+    });
+
+    it('blocks unknown origins in production', () => {
+        assert.equal(
+            isAllowedCorsOrigin('http://172.30.212.151:5173', { isProduction: true }),
+            false,
+        );
+    });
+});
\ No newline at end of file
diff --git a/backend/test/referrer.test.js b/backend/test/referrer.test.js
new file mode 100644
index 0000000..4464184
--- /dev/null
+++ b/backend/test/referrer.test.js
@@ -0,0 +1,153 @@
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import {
+    aggregateReferrers,
+    normalizeReferrer,
+    resolveReferrer,
+    sanitizeReferrerInput,
+} from '../src/utils/referrer.js';
+
+describe('sanitizeReferrerInput', () => {
+    it('returns empty string for nullish and non-string values', () => {
+        assert.equal(sanitizeReferrerInput(null), '');
+        assert.equal(sanitizeReferrerInput(undefined), '');
+        assert.equal(sanitizeReferrerInput(42), '');
+        assert.equal(sanitizeReferrerInput({ source: 'x' }), '');
+    });
+
+    it('trims and caps referrer length', () => {
+        assert.equal(sanitizeReferrerInput('  direct  '), 'direct');
+        assert.equal(sanitizeReferrerInput(`https://example.com/${'a'.repeat(3000)}`).length, 2048);
+    });
+});
+
+describe('normalizeReferrer', () => {
+    const originalFrontendUrl = process.env.FRONTEND_URL;
+
+    beforeEach(() => {
+        process.env.FRONTEND_URL = 'https://portlify.app';
+    });
+
+    afterEach(() => {
+        process.env.FRONTEND_URL = originalFrontendUrl;
+    });
+
+    it('normalizes direct traffic and legacy labels', () => {
+        assert.deepEqual(normalizeReferrer(''), {
+            id: 'direct',
+            label: 'Direct / Link',
+            category: 'direct',
+            domain: null,
+        });
+        assert.equal(normalizeReferrer('direct').id, 'direct');
+        assert.equal(normalizeReferrer('Direct / Link').id, 'direct');
+    });
+
+    it('detects AI assistants', () => {
+        assert.deepEqual(normalizeReferrer('https://chatgpt.com/'), {
+            id: 'chatgpt',
+            label: 'ChatGPT',
+            category: 'ai',
+            domain: 'chatgpt.com',
+        });
+        assert.equal(normalizeReferrer('https://claude.ai/chat').label, 'Claude');
+        assert.equal(normalizeReferrer('https://www.perplexity.ai/search').label, 'Perplexity');
+        assert.equal(normalizeReferrer('https://gemini.google.com/app').label, 'Google Gemini');
+        assert.equal(normalizeReferrer('https://copilot.microsoft.com/').label, 'Microsoft Copilot');
+    });
+
+    it('detects social and search sources', () => {
+        assert.equal(normalizeReferrer('https://www.linkedin.com/in/user').label, 'LinkedIn');
+        assert.equal(normalizeReferrer('https://t.co/abc').label, 'X (Twitter)');
+        assert.equal(normalizeReferrer('https://www.google.com/search?q=portfolio').label, 'Google Search');
+        assert.equal(normalizeReferrer('https://github.com/user').label, 'GitHub');
+        assert.equal(normalizeReferrer('https://mail.google.com/').label, 'Gmail');
+    });
+
+    it('formats unknown websites by hostname', () => {
+        assert.equal(normalizeReferrer('https://news.ycombinator.com/item').label, 'Ycombinator');
+        assert.equal(normalizeReferrer('https://dev.to/post').label, 'Dev');
+    });
+
+    it('normalizes campaign links to canonical known sources', () => {
+        assert.equal(normalizeReferrer('utm:linkedin:post').label, 'LinkedIn');
+        assert.equal(normalizeReferrer('utm:newsletter:email').label, 'Newsletter');
+        assert.equal(normalizeReferrer('utm:chatgpt:share').label, 'ChatGPT');
+    });
+
+    it('keeps custom campaign labels for unknown utm sources', () => {
+        assert.equal(normalizeReferrer('utm:producthunt:launch').label, 'producthunt (launch)');
+        assert.equal(normalizeReferrer('utm:partner::spring-drive').label, 'partner · spring-drive');
+    });
+
+    it('treats internal app traffic as direct', () => {
+        assert.equal(normalizeReferrer('https://portlify.app/dashboard').id, 'direct');
+        assert.equal(normalizeReferrer('https://www.portlify.app/ashish').id, 'direct');
+        assert.equal(normalizeReferrer('http://localhost:5173/ashish').id, 'direct');
+    });
+
+    it('handles malformed referrer values safely', () => {
+        assert.equal(normalizeReferrer('not a valid url at all').category, 'other');
+        assert.equal(normalizeReferrer('   ').id, 'direct');
+    });
+});
+
+describe('resolveReferrer', () => {
+    it('sanitizes, normalizes, and canonicalizes in one step', () => {
+        assert.deepEqual(resolveReferrer('  https://chatgpt.com/  '), {
+            id: 'chatgpt',
+            label: 'ChatGPT',
+            category: 'ai',
+            domain: 'chatgpt.com',
+        });
+        assert.equal(resolveReferrer(null).id, 'direct');
+    });
+});
+
+describe('aggregateReferrers', () => {
+    it('merges equivalent sources and legacy labels', () => {
+        const aggregated = aggregateReferrers([
+            { source: 'direct', count: 2 },
+            { source: '', count: 1 },
+            { source: 'Direct / Link', count: 4 },
+            { source: 'https://chatgpt.com/', count: 3 },
+            { source: 'https://www.chat.openai.com/', count: 2 },
+        ]);
+
+        assert.equal(aggregated[0].label, 'Direct / Link');
+        assert.equal(aggregated[0].count, 7);
+        assert.equal(aggregated[1].label, 'ChatGPT');
+        assert.equal(aggregated[1].count, 5);
+        assert.equal(aggregated[1].category, 'ai');
+    });
+
+    it('merges campaign and social variants for the same source', () => {
+        const aggregated = aggregateReferrers([
+            { source: 'utm:linkedin:post', count: 4 },
+            { source: 'https://www.linkedin.com/feed/', count: 6 },
+            { source: 'utm:linkedin:email', count: 2 },
+        ]);
+
+        assert.equal(aggregated.length, 1);
+        assert.equal(aggregated[0].label, 'LinkedIn');
+        assert.equal(aggregated[0].count, 12);
+        assert.equal(aggregated[0].category, 'social');
+    });
+
+    it('sorts by count descending and ignores invalid entries', () => {
+        const aggregated = aggregateReferrers([
+            { source: 'https://google.com', count: 2 },
+            null,
+            { source: 'https://chatgpt.com', count: 5 },
+            { count: 3 },
+        ]);
+
+        assert.equal(aggregated[0].label, 'ChatGPT');
+        assert.equal(aggregated[1].label, 'Google Search');
+    });
+
+    it('returns an empty array when no valid referrers exist', () => {
+        assert.deepEqual(aggregateReferrers([]), []);
+        assert.deepEqual(aggregateReferrers([null, { count: 1 }]), []);
+    });
+});
\ No newline at end of file
diff --git a/frontend/.env.example b/frontend/.env.example
index 060d240..d90abe7 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1,6 +1,8 @@
 # Frontend Environment Variables
 VITE_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-# Backend API base URL — do NOT include /api suffix
+# Backend API base URL — do NOT include /api suffix.
+# Dev tip: leave unset (or comment out) to proxy /api via Vite — works with LAN IPs.
+# VITE_API_URL=http://localhost:5001
 VITE_API_URL=https://portlifybackend.techycsr.dev
 # Frontend app URL for portfolio links and sharing
-VITE_APP_URL=https://portlify.techycsr.dev
\ No newline at end of file
+VITE_APP_URL=https://portlifyai.app
\ No newline at end of file
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
index f9e9c75..7f13ed4 100644
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -34,6 +34,14 @@ export default [
             'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
         }
     },
+    {
+        files: ['vite.config.js', 'scripts/**/*.{js,mjs}'],
+        languageOptions: {
+            globals: {
+                ...globals.node,
+            },
+        },
+    },
     {
         ignores: ['dist/**', 'node_modules/**']
     }
diff --git a/frontend/index.html b/frontend/index.html
index 0419adc..c4bf10a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,27 +16,27 @@
   <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://portlifyai.app/" />
 
-  <!-- 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" />
+  <!-- Favicon — all generated from logo-2.png -->
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=3" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=3" />
+  <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png?v=3" />
+  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png?v=3" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=3" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3" />
+  <link rel="shortcut icon" href="/favicon-32x32.png?v=3" />
   <link rel="manifest" href="/manifest.json" />
   <meta name="theme-color" content="#5a7a9e" />
   <meta name="msapplication-TileColor" content="#5a7a9e" />
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://portlify.techycsr.dev/" />
+  <meta property="og:url" content="https://portlifyai.app/" />
   <meta property="og:title" content="PortlifyAi - AI-Powered Resume to Portfolio Builder" />
   <meta property="og:description"
     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" content="https://portlifyai.app/og-image.png?v=6" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta property="og:image:alt" content="PortlifyAi - Transform your resume into a portfolio" />
@@ -51,11 +51,11 @@
 
   <!-- Twitter -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:url" content="https://portlify.techycsr.dev/" />
+  <meta name="twitter:url" content="https://portlifyai.app/" />
   <meta name="twitter:title" content="PortlifyAi - AI-Powered Resume to Portfolio Builder" />
   <meta name="twitter:description"
     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:image" content="https://portlifyai.app/og-image.png?v=6" />
   <meta name="twitter:creator" content="@techycsr" />
   <meta name="twitter:site" content="@techycsr" />
 
@@ -73,7 +73,7 @@
       "@context": "https://schema.org",
       "@type": "WebApplication",
       "name": "PortlifyAi",
-      "url": "https://portlify.techycsr.dev",
+      "url": "https://portlifyai.app",
       "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",
@@ -108,7 +108,7 @@
         "Custom Branding",
         "Export as ZIP"
       ],
-      "screenshot": "https://portlify.techycsr.dev/og-image.png"
+      "screenshot": "https://portlifyai.app/og-image.png?v=6"
     }
     </script>
 
@@ -119,10 +119,10 @@
       "@type": "VideoObject",
       "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",
+      "thumbnailUrl": "https://portlifyai.app/og-image.png?v=6",
       "uploadDate": "2026-01-15",
       "contentUrl": "https://github.com/user-attachments/assets/e36d6f10-bb27-4ae8-a2b6-81122ef85994",
-      "embedUrl": "https://portlify.techycsr.dev",
+      "embedUrl": "https://portlifyai.app",
       "duration": "PT1M",
       "author": {
         "@type": "Person",
@@ -165,7 +165,7 @@ <h2>Features</h2>
         <li>Export your portfolio</li>
       </ul>
       <h2>Get Started</h2>
-      <p>Visit <a href="https://portlify.techycsr.dev">portlify.techycsr.dev</a> to create your portfolio for free.</p>
+      <p>Visit <a href="https://portlifyai.app">portlify.techycsr.dev</a> to create your portfolio for free.</p>
       <p>Created by <a href="https://techycsr.dev">TechyCSR</a> — <a href="https://github.com/TechyCSR">GitHub</a> | <a
           href="https://linkedin.com/in/techycsr">LinkedIn</a></p>
     </div>
diff --git a/frontend/package.json b/frontend/package.json
index 5094ff0..f9ab4e7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,9 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
+        "og:image": "node scripts/render-og-from-svg.mjs",
+        "og:image:crop": "node scripts/crop-og-image.mjs",
+        "og:image:render": "node scripts/render-og-image.mjs",
         "test": "vitest run"
     },
     "dependencies": {
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
index b1912fd..3bfa852 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 4530a53..64a0dfc 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 71a9136..ea2d190 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 31aef26..de721d7 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 1930b48..b13eaf9 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
index 31aef26..de721d7 100644
Binary files a/frontend/public/favicon.png and b/frontend/public/favicon.png differ
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
index 7196d71..9ecac3e 100644
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
@@ -1,3 +1,3 @@
 <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <image href="/portlify_clean_logo.png" width="512" height="512" preserveAspectRatio="xMidYMid meet"/>
+  <image href="/logo-2.png" width="512" height="512" preserveAspectRatio="xMidYMid meet"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/public/hero.png b/frontend/public/hero.png
new file mode 100644
index 0000000..e7342cb
Binary files /dev/null and b/frontend/public/hero.png differ
diff --git a/frontend/public/logo-2.png b/frontend/public/logo-2.png
new file mode 100644
index 0000000..6243c67
Binary files /dev/null and b/frontend/public/logo-2.png differ
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index 7540604..36cc1f7 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -12,13 +12,13 @@
   "categories": ["productivity", "business", "utilities"],
   "icons": [
     {
-      "src": "/portlify_clean_logo.png",
+      "src": "/logo-2.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/portlify_clean_logo.png",
+      "src": "/logo-2.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
diff --git a/frontend/public/og-image-source.html b/frontend/public/og-image-source.html
new file mode 100644
index 0000000..ee84267
--- /dev/null
+++ b/frontend/public/og-image-source.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 1200px;
+      height: 630px;
+      overflow: hidden;
+      font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+      -webkit-font-smoothing: antialiased;
+    }
+    .frame {
+      width: 1200px;
+      height: 630px;
+      background: #09090b;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .grid {
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(90, 122, 158, 0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(90, 122, 158, 0.045) 1px, transparent 1px);
+      background-size: 64px 64px;
+      pointer-events: none;
+    }
+    .glow {
+      position: absolute;
+      width: 420px;
+      height: 420px;
+      border-radius: 50%;
+      filter: blur(40px);
+      pointer-events: none;
+    }
+    .glow-a { left: 18%; top: 42%; background: rgba(90, 122, 158, 0.14); }
+    .glow-b { right: 14%; top: 28%; background: rgba(122, 150, 181, 0.1); }
+
+    .nav {
+      height: 72px;
+      padding: 0 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      z-index: 2;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .brand img {
+      width: 40px;
+      height: 40px;
+      border-radius: 12px;
+      object-fit: contain;
+      filter: invert(1) brightness(1.05);
+      background: rgba(255, 255, 255, 0.04);
+      padding: 6px;
+    }
+    .brand span {
+      font-size: 22px;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      color: #fafafa;
+    }
+    .brand .ai {
+      background: linear-gradient(135deg, #5a7a9e, #7a96b5);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .nav-actions {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+    .nav-ghost {
+      color: #a1a1aa;
+      font-size: 15px;
+      font-weight: 600;
+      padding: 10px 16px;
+    }
+    .nav-cta {
+      background: #5a7a9e;
+      color: #fafafa;
+      font-size: 15px;
+      font-weight: 700;
+      padding: 11px 20px;
+      border-radius: 12px;
+    }
+
+    .hero {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 64px 0;
+      position: relative;
+      z-index: 2;
+      text-align: center;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      color: #a1a1aa;
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 18px;
+    }
+    .badge-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #6b8aab;
+    }
+    .headline {
+      font-size: 54px;
+      line-height: 1.06;
+      font-weight: 800;
+      letter-spacing: -0.04em;
+      margin-bottom: 14px;
+    }
+    .headline .white { color: #fafafa; }
+    .headline .gradient {
+      background: linear-gradient(135deg, #5a7a9e 0%, #8fa4bc 55%, #7a96b5 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .subhead {
+      max-width: 700px;
+      font-size: 17px;
+      line-height: 1.45;
+      color: #a1a1aa;
+      font-weight: 500;
+      margin-bottom: 22px;
+    }
+    .actions {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 22px;
+    }
+    .btn-primary {
+      background: #5a7a9e;
+      color: #fafafa;
+      font-size: 15px;
+      font-weight: 700;
+      padding: 13px 22px;
+      border-radius: 14px;
+    }
+    .btn-secondary {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      color: #fafafa;
+      font-size: 15px;
+      font-weight: 600;
+      padding: 13px 22px;
+      border-radius: 14px;
+    }
+    .features {
+      display: flex;
+      gap: 28px;
+      color: #71717a;
+      font-size: 12.5px;
+      font-weight: 600;
+      flex-wrap: nowrap;
+    }
+    .feature {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      white-space: nowrap;
+    }
+    .feature svg {
+      width: 14px;
+      height: 14px;
+      stroke: #71717a;
+      fill: none;
+      stroke-width: 2;
+      flex-shrink: 0;
+    }
+  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet" />
+</head>
+<body>
+  <div class="frame">
+    <div class="grid"></div>
+    <div class="glow glow-a"></div>
+    <div class="glow glow-b"></div>
+
+    <header class="nav">
+      <div class="brand">
+        <img src="logo-2.png" alt="" />
+        <span>Portlify<span class="ai">Ai</span></span>
+      </div>
+      <div class="nav-actions">
+        <div class="nav-ghost">Sign In</div>
+        <div class="nav-cta">Get Started</div>
+      </div>
+    </header>
+
+    <main class="hero">
+      <div class="badge"><span class="badge-dot"></span>AI-Powered Portfolio Builder</div>
+      <h1 class="headline">
+        <span class="white">Your Resume.</span><br />
+        <span class="gradient">Your Portfolio.</span><br />
+        <span class="white">In Seconds.</span>
+      </h1>
+      <p class="subhead">Upload your resume and let AI transform it into a stunning, professional portfolio that showcases your skills and experience.</p>
+      <div class="actions">
+        <div class="btn-primary">Start Building Free →</div>
+        <div class="btn-secondary">Sign In</div>
+      </div>
+      <div class="features">
+        <div class="feature">
+          <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+          Developer-friendly design
+        </div>
+        <div class="feature">
+          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          SEO optimized pages
+        </div>
+        <div class="feature">
+          <svg viewBox="0 0 24 24"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="19" cy="17" r="2.5"/><circle cx="6" cy="12" r="2.5"/></svg>
+          Customizable themes
+        </div>
+        <div class="feature">
+          <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+          Lightning fast loading
+        </div>
+        <div class="feature">
+          <svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+          Portfolio analytics
+        </div>
+      </div>
+    </main>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/public/og-image.png b/frontend/public/og-image.png
index c12aa37..ddb35f1 100644
Binary files a/frontend/public/og-image.png and b/frontend/public/og-image.png differ
diff --git a/frontend/public/og-image.svg b/frontend/public/og-image.svg
index bc4e52c..177a742 100644
--- a/frontend/public/og-image.svg
+++ b/frontend/public/og-image.svg
@@ -30,7 +30,7 @@
   <rect width="1200" height="630" fill="url(#grid)"/>
   
   <g transform="translate(600, 250)">
-    <image href="portlify_clean_logo.png" x="-50" y="-130" width="100" height="100" preserveAspectRatio="xMidYMid meet"/>
+    <image href="logo-2.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">PortlifyAi</text>
     
@@ -48,7 +48,7 @@
     <text x="300" y="28" font-family="Arial, sans-serif" font-size="16" fill="#fafafa" text-anchor="middle">📊 Analytics</text>
   </g>
   
-  <text x="600" y="550" font-family="Arial, sans-serif" font-size="22" fill="url(#accent)" text-anchor="middle">portlify.techycsr.dev</text>
+  <text x="600" y="550" font-family="Arial, sans-serif" font-size="22" fill="url(#accent)" text-anchor="middle">portlifyai.app</text>
   
   <text x="600" y="590" font-family="Arial, sans-serif" font-size="16" fill="#71717a" text-anchor="middle">Transform your resume into a stunning portfolio in seconds</text>
 </svg>
\ No newline at end of file
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
index 95a1b40..29fe648 100644
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -1,5 +1,5 @@
 # Robots.txt for PortlifyAi
-# https://portlify.techycsr.dev
+# https://portlifyai.app
 # Created by TechyCSR
 
 User-agent: *
@@ -17,4 +17,4 @@ Disallow: /api/
 
 # Sitemaps — dynamic (primary) + static (fallback)
 Sitemap: https://portlifybackend.techycsr.dev/api/sitemap.xml
-Sitemap: https://portlify.techycsr.dev/sitemap.xml
+Sitemap: https://portlifyai.app/sitemap.xml
diff --git a/frontend/public/sitemap.xml b/frontend/public/sitemap.xml
index e57b519..409c1c0 100644
--- a/frontend/public/sitemap.xml
+++ b/frontend/public/sitemap.xml
@@ -1,25 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
-    <loc>https://portlify.techycsr.dev/</loc>
+    <loc>https://portlifyai.app/</loc>
     <lastmod>2026-06-06</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
-    <loc>https://portlify.techycsr.dev/premium</loc>
+    <loc>https://portlifyai.app/premium</loc>
     <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
-    <loc>https://portlify.techycsr.dev/sign-in</loc>
+    <loc>https://portlifyai.app/sign-in</loc>
     <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.5</priority>
   </url>
   <url>
-    <loc>https://portlify.techycsr.dev/sign-up</loc>
+    <loc>https://portlifyai.app/sign-up</loc>
     <lastmod>2026-06-06</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.5</priority>
diff --git a/frontend/scripts/crop-og-image.mjs b/frontend/scripts/crop-og-image.mjs
new file mode 100644
index 0000000..db52616
--- /dev/null
+++ b/frontend/scripts/crop-og-image.mjs
@@ -0,0 +1,42 @@
+import sharp from 'sharp'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const publicDir = path.resolve(__dirname, '../public')
+const src = path.join(publicDir, 'hero.png')
+const out = path.join(publicDir, 'og-image.png')
+
+const TARGET_W = 1200
+const TARGET_H = 630
+const ASPECT = TARGET_W / TARGET_H
+
+// Pixel-measured bounds from hero.png (2940×1616):
+// - Navbar + hero + feature row: y=0 → ~1200
+// - Scroll dot / dead space begins after y≈1240
+const CROP_TOP = 0
+const CROP_BOTTOM = 1210
+const CROP_HEIGHT = CROP_BOTTOM - CROP_TOP
+const CROP_WIDTH = Math.round(CROP_HEIGHT * ASPECT)
+
+const { width: srcW } = await sharp(src).metadata()
+const cropLeft = Math.round((srcW - CROP_WIDTH) / 2)
+
+await sharp(src)
+  .extract({
+    left: cropLeft,
+    top: CROP_TOP,
+    width: CROP_WIDTH,
+    height: CROP_HEIGHT,
+  })
+  .resize(TARGET_W, TARGET_H, { fit: 'fill' })
+  .png({ compressionLevel: 9, adaptiveFiltering: true })
+  .toFile(out)
+
+console.log('Cropped og-image.png', {
+  left: cropLeft,
+  top: CROP_TOP,
+  width: CROP_WIDTH,
+  height: CROP_HEIGHT,
+  output: `${TARGET_W}x${TARGET_H}`,
+})
\ No newline at end of file
diff --git a/frontend/scripts/render-og-from-svg.mjs b/frontend/scripts/render-og-from-svg.mjs
new file mode 100644
index 0000000..993f594
--- /dev/null
+++ b/frontend/scripts/render-og-from-svg.mjs
@@ -0,0 +1,21 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { chromium } from 'playwright'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const publicDir = path.resolve(__dirname, '../public')
+const svgPath = path.join(publicDir, 'og-image.svg')
+const out = path.join(publicDir, 'og-image.png')
+
+const browser = await chromium.launch()
+const page = await browser.newPage({ viewport: { width: 1200, height: 630 } })
+await page.goto(`file://${svgPath}`, { waitUntil: 'load' })
+await page.waitForTimeout(500)
+await page.screenshot({
+  path: out,
+  clip: { x: 0, y: 0, width: 1200, height: 630 },
+  type: 'png',
+})
+await browser.close()
+
+console.log('Rendered og-image.png from og-image.svg')
\ No newline at end of file
diff --git a/frontend/scripts/render-og-image.mjs b/frontend/scripts/render-og-image.mjs
new file mode 100644
index 0000000..4a4f19c
--- /dev/null
+++ b/frontend/scripts/render-og-image.mjs
@@ -0,0 +1,23 @@
+import sharp from 'sharp'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { chromium } from 'playwright'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const publicDir = path.resolve(__dirname, '../public')
+const htmlPath = path.join(publicDir, 'og-image-source.html')
+const out = path.join(publicDir, 'og-image.png')
+
+const browser = await chromium.launch()
+const page = await browser.newPage({ viewport: { width: 1200, height: 630 } })
+await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle' })
+await page.waitForTimeout(800)
+await page.screenshot({
+  path: out,
+  clip: { x: 0, y: 0, width: 1200, height: 630 },
+  type: 'png',
+})
+await browser.close()
+
+const meta = await sharp(out).metadata()
+console.log('Rendered og-image.png', `${meta.width}x${meta.height}`)
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 71216dd..effdadd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,6 +14,7 @@ import Settings from './pages/Settings'
 import Analytics from './pages/Analytics'
 import Premium from './pages/Premium'
 import Portfolio from './pages/Portfolio'
+import PostAuthRedirect from './pages/PostAuthRedirect'
 import ProtectedRoute from './components/ProtectedRoute'
 import DashboardLayout from './components/DashboardLayout'
 import ClerkThemeProvider from './components/ClerkThemeProvider'
@@ -34,7 +35,8 @@ function AppLayout({ children }) {
         !location.pathname.startsWith('/dashboard') &&
         !location.pathname.startsWith('/settings') &&
         !location.pathname.startsWith('/analytics') &&
-        !location.pathname.startsWith('/premium')
+        !location.pathname.startsWith('/premium') &&
+        !location.pathname.startsWith('/app')
 
     return (
         <>
@@ -56,7 +58,7 @@ function AppLayout({ children }) {
 function SignInPage() {
     const { theme } = useTheme()
     const location = useLocation()
-    const redirectUrl = location.state?.from?.pathname || '/dashboard'
+    const redirectUrl = location.state?.from?.pathname || '/app'
 
     return (
         <div className="min-h-screen flex items-center justify-center pt-navbar">
@@ -65,7 +67,7 @@ function SignInPage() {
                 path="/sign-in"
                 signUpUrl="/sign-up"
                 forceRedirectUrl={redirectUrl}
-                fallbackRedirectUrl="/dashboard"
+                fallbackRedirectUrl="/app"
                 appearance={getClerkAppearance(theme)}
             />
         </div>
@@ -80,6 +82,8 @@ function SignUpPage() {
                 routing="path"
                 path="/sign-up"
                 signInUrl="/sign-in"
+                forceRedirectUrl="/app"
+                fallbackRedirectUrl="/app"
                 appearance={getClerkAppearance(theme)}
             />
         </div>
@@ -106,6 +110,11 @@ function AppRoutes() {
                         <Onboarding />
                     </ProtectedRoute>
                 } />
+                <Route path="/app" element={
+                    <ProtectedRoute>
+                        <PostAuthRedirect />
+                    </ProtectedRoute>
+                } />
                 <Route element={
                     <ProtectedRoute>
                         <DashboardLayout />
@@ -131,7 +140,7 @@ function App() {
         <ThemeProvider>
             <ClerkThemeProvider>
                 <ToastProvider>
-                    <Router>
+                    <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
                         <ScrollToTop />
                         <SeoManager />
                         <AppRoutes />
diff --git a/frontend/src/components/DashboardLayout.jsx b/frontend/src/components/DashboardLayout.jsx
index c9ffb98..426e077 100644
--- a/frontend/src/components/DashboardLayout.jsx
+++ b/frontend/src/components/DashboardLayout.jsx
@@ -1,7 +1,14 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
 import { Menu } from 'lucide-react'
 import { getCurrentUser, getMyProfile } from '../utils/api'
+import {
+    hasCompletedProfileSetup,
+    hasPendingResumeData,
+    isMissingProfileError,
+    resolveResumeRouteGuard,
+} from '../utils/profileSetup'
+import { ErrorState, LoadingState } from './AsyncState'
 import { ICON_STROKE } from './IconTile'
 import DashboardSidebar from './DashboardSidebar'
 
@@ -30,6 +37,18 @@ export function SidebarMenuButton({ className = '' }) {
     )
 }
 
+function resolveDbUser(userData, profileData) {
+    if (userData) {
+        return userData
+    }
+
+    if (profileData?.username) {
+        return { username: profileData.username }
+    }
+
+    return null
+}
+
 function DashboardLayout() {
     const location = useLocation()
     const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -37,44 +56,137 @@ function DashboardLayout() {
     const [profile, setProfile] = useState(null)
     const [basicDetails, setBasicDetails] = useState(null)
     const [isLoading, setIsLoading] = useState(true)
-    const [loadError, setLoadError] = useState(null)
+    const [userLoadError, setUserLoadError] = useState(null)
+    const [profileLoadError, setProfileLoadError] = useState(null)
+    const [hasPendingResume, setHasPendingResume] = useState(() => hasPendingResumeData())
+    const lastKnownProfileRef = useRef({ profile: null, basicDetails: null })
+
+    const refreshPendingResume = useCallback(() => {
+        setHasPendingResume(hasPendingResumeData())
+    }, [])
 
     const refreshData = useCallback(async () => {
         setIsLoading(true)
-        setLoadError(null)
-
-        try {
-            const [userRes, profileRes] = await Promise.all([
-                getCurrentUser(),
-                getMyProfile(),
-            ])
-            setDbUser(userRes.data)
-            setProfile(profileRes.data)
-            setBasicDetails(profileRes.data?.basicDetails || null)
-        } catch (error) {
-            setLoadError(error)
-        } finally {
-            setIsLoading(false)
+        setUserLoadError(null)
+        setProfileLoadError(null)
+
+        const [userResult, profileResult] = await Promise.allSettled([
+            getCurrentUser(),
+            getMyProfile(),
+        ])
+
+        let nextUserData = null
+        let nextProfileData = null
+        let nextUserLoadError = null
+        let nextProfileLoadError = null
+
+        if (userResult.status === 'fulfilled') {
+            nextUserData = userResult.value.data
+        } else {
+            nextUserLoadError = userResult.reason
+        }
+
+        if (profileResult.status === 'fulfilled') {
+            nextProfileData = profileResult.value.data
+            lastKnownProfileRef.current = {
+                profile: nextProfileData,
+                basicDetails: nextProfileData?.basicDetails || null,
+            }
+        } else if (isMissingProfileError(profileResult.reason)) {
+            lastKnownProfileRef.current = { profile: null, basicDetails: null }
+            nextProfileData = null
+        } else {
+            nextProfileLoadError = profileResult.reason
+            if (lastKnownProfileRef.current.profile) {
+                nextProfileData = lastKnownProfileRef.current.profile
+            }
         }
+
+        setDbUser(resolveDbUser(nextUserData, nextProfileData))
+        setProfile(nextProfileData)
+        setBasicDetails(nextProfileData?.basicDetails || null)
+        setUserLoadError(nextUserLoadError)
+        setProfileLoadError(nextProfileLoadError)
+        setHasPendingResume(hasPendingResumeData())
+        setIsLoading(false)
     }, [])
 
     useEffect(() => {
         setSidebarOpen(false)
+        setHasPendingResume(hasPendingResumeData())
     }, [location.pathname])
 
     useEffect(() => {
         refreshData()
     }, [refreshData])
 
+    const needsResumeSetup = useMemo(
+        () => !isLoading && !hasCompletedProfileSetup(profile),
+        [isLoading, profile],
+    )
+
+    const loadErrors = useMemo(
+        () => ({ user: userLoadError, profile: profileLoadError }),
+        [userLoadError, profileLoadError],
+    )
+
+    const routeGuardDecision = useMemo(() => {
+        if (isLoading) {
+            return { type: 'loading' }
+        }
+
+        return resolveResumeRouteGuard(
+            location.pathname,
+            profile,
+            loadErrors,
+            hasPendingResume,
+        )
+    }, [isLoading, loadErrors, profile, location.pathname, hasPendingResume])
+
+    const isRouteReady = routeGuardDecision.type === 'allow'
+
+    const blockingLoadError = useMemo(() => {
+        if (routeGuardDecision.type !== 'error') {
+            return null
+        }
+
+        return userLoadError || profileLoadError
+    }, [routeGuardDecision.type, userLoadError, profileLoadError])
+
     const contextValue = useMemo(() => ({
         openSidebar: () => setSidebarOpen(true),
         dbUser,
         profile,
         basicDetails,
         isLoading,
-        loadError,
+        loadError: blockingLoadError,
         refreshData,
-    }), [dbUser, profile, basicDetails, isLoading, loadError, refreshData])
+        refreshPendingResume,
+        needsResumeSetup,
+        hasPendingResume,
+        isRouteReady,
+    }), [dbUser, profile, basicDetails, isLoading, blockingLoadError, refreshData, refreshPendingResume, needsResumeSetup, hasPendingResume, isRouteReady])
+
+    const mainContent = (() => {
+        if (routeGuardDecision.type === 'error') {
+            return (
+                <ErrorState
+                    message={blockingLoadError?.response?.data?.error || 'Failed to load your profile. Please try again.'}
+                    onRetry={refreshData}
+                />
+            )
+        }
+
+        if (routeGuardDecision.type === 'redirect') {
+            return <Navigate to={routeGuardDecision.to} replace />
+        }
+
+        if (routeGuardDecision.type === 'loading') {
+            return <LoadingState className="min-h-[40vh]" />
+        }
+
+        return <Outlet />
+    })()
 
     return (
         <DashboardLayoutContext.Provider value={contextValue}>
@@ -83,12 +195,16 @@ function DashboardLayout() {
                     <DashboardSidebar
                         basicDetails={basicDetails}
                         dbUser={dbUser}
+                        profile={profile}
                         currentPath={location.pathname}
+                        needsResumeSetup={needsResumeSetup}
+                        hasPendingResume={hasPendingResume}
+                        isLoading={isLoading}
                         open={sidebarOpen}
                         onClose={() => setSidebarOpen(false)}
                     />
                     <main className="flex-1 min-w-0">
-                        <Outlet />
+                        {mainContent}
                     </main>
                 </div>
             </div>
diff --git a/frontend/src/components/DashboardSidebar.jsx b/frontend/src/components/DashboardSidebar.jsx
index 6635d25..88db0ef 100644
--- a/frontend/src/components/DashboardSidebar.jsx
+++ b/frontend/src/components/DashboardSidebar.jsx
@@ -5,12 +5,14 @@ import {
     BarChart3,
     ExternalLink,
     Home,
+    Lock,
     Pencil,
     Settings,
     Star,
     Upload,
     X,
 } from 'lucide-react'
+import { isNavItemEnabled } from '../utils/profileSetup'
 import { ICON_STROKE } from './IconTile'
 
 export const dashboardNavItems = [
@@ -22,37 +24,81 @@ export const dashboardNavItems = [
     { to: '/settings', icon: Settings, label: 'Settings', desc: 'Preferences & export' },
 ]
 
-function NavLink({ item, isActive, onNavigate }) {
+function NavLink({ item, isActive, onNavigate, disabled = false }) {
     const Icon = item.icon
+    const baseClassName = `group flex items-start gap-3 px-3 py-2.5 rounded-xl transition-colors ${
+        disabled
+            ? 'text-muted/70 cursor-not-allowed'
+            : isActive
+                ? 'bg-primary-500/10 text-primary'
+                : 'text-secondary hover:text-primary hover:bg-surface-hover'
+    }`
 
-    return (
-        <Link
-            to={item.to}
-            onClick={onNavigate}
-            className={`group flex items-start gap-3 px-3 py-2.5 rounded-xl transition-colors ${
-                isActive
-                    ? 'bg-primary-500/10 text-primary'
-                    : 'text-secondary hover:text-primary hover:bg-surface-hover'
-            }`}
-        >
+    const content = (
+        <>
             <Icon
                 size={18}
                 strokeWidth={ICON_STROKE}
-                className={`flex-shrink-0 mt-0.5 ${isActive ? 'text-primary-400' : 'text-secondary group-hover:text-primary'}`}
+                className={`flex-shrink-0 mt-0.5 ${
+                    disabled
+                        ? 'text-muted/60'
+                        : isActive
+                            ? 'text-primary-400'
+                            : 'text-secondary group-hover:text-primary'
+                }`}
             />
-            <span className="min-w-0">
-                <span className="block font-medium text-sm leading-tight">{item.label}</span>
-                <span className={`block text-xs mt-0.5 leading-snug ${isActive ? 'text-primary-400/70' : 'text-muted'}`}>
-                    {item.desc}
+            <span className="min-w-0 flex-1">
+                <span className="flex items-center gap-2">
+                    <span className="block font-medium text-sm leading-tight">{item.label}</span>
+                    {disabled && <Lock size={12} strokeWidth={ICON_STROKE} className="text-muted/70 flex-shrink-0" />}
+                </span>
+                <span className={`block text-xs mt-0.5 leading-snug ${
+                    disabled ? 'text-muted/60' : isActive ? 'text-primary-400/70' : 'text-muted'
+                }`}>
+                    {disabled ? 'Upload your resume to unlock' : item.desc}
                 </span>
             </span>
+        </>
+    )
+
+    if (disabled) {
+        return (
+            <div className={baseClassName} aria-disabled="true" title="Upload and save your resume to unlock this section">
+                {content}
+            </div>
+        )
+    }
+
+    return (
+        <Link to={item.to} onClick={onNavigate} className={baseClassName}>
+            {content}
         </Link>
     )
 }
 
-function SidebarContent({ basicDetails, dbUser, currentPath, onNavigate }) {
+function SidebarContent({
+    basicDetails,
+    dbUser,
+    profile,
+    currentPath,
+    needsResumeSetup,
+    hasPendingResume,
+    isLoading = false,
+    onNavigate,
+}) {
     return (
         <>
+            {needsResumeSetup && (
+                <div className="mb-5 p-3 rounded-xl border border-primary-500/20 bg-primary-500/5">
+                    <p className="text-sm font-medium text-primary mb-1">Finish your setup</p>
+                    <p className="text-xs text-secondary leading-relaxed">
+                        {hasPendingResume
+                            ? 'Review your extracted profile in the editor, then save to unlock the dashboard.'
+                            : 'Upload your resume to unlock overview, analytics, settings, and more.'}
+                    </p>
+                </div>
+            )}
+
             <div className="flex items-center gap-3 p-3 rounded-xl bg-tertiary/60 mb-5">
                 <div className="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
                     {basicDetails?.name?.charAt(0) || dbUser?.username?.charAt(0) || 'U'}
@@ -76,11 +122,12 @@ function SidebarContent({ basicDetails, dbUser, currentPath, onNavigate }) {
                         item={item}
                         isActive={currentPath === item.to}
                         onNavigate={onNavigate}
+                        disabled={isLoading || !isNavItemEnabled(item.to, profile, hasPendingResume)}
                     />
                 ))}
             </nav>
 
-            {dbUser?.username && (
+            {dbUser?.username && !needsResumeSetup && (
                 <div className="mt-6 pt-5 border-t border-border">
                     <Link
                         to={`/${dbUser.username}`}
@@ -98,7 +145,17 @@ function SidebarContent({ basicDetails, dbUser, currentPath, onNavigate }) {
     )
 }
 
-function DashboardSidebar({ basicDetails, dbUser, currentPath, open, onClose }) {
+function DashboardSidebar({
+    basicDetails,
+    dbUser,
+    profile,
+    currentPath,
+    needsResumeSetup = false,
+    hasPendingResume = false,
+    isLoading = false,
+    open,
+    onClose,
+}) {
     const drawerRef = useRef(null)
     const closeButtonRef = useRef(null)
     const handleNavigate = () => onClose?.()
@@ -185,7 +242,11 @@ function DashboardSidebar({ basicDetails, dbUser, currentPath, open, onClose })
                     <SidebarContent
                         basicDetails={basicDetails}
                         dbUser={dbUser}
+                        profile={profile}
                         currentPath={currentPath}
+                        needsResumeSetup={needsResumeSetup}
+                        hasPendingResume={hasPendingResume}
+                        isLoading={isLoading}
                         onNavigate={handleNavigate}
                     />
                 </div>
@@ -197,7 +258,11 @@ function DashboardSidebar({ basicDetails, dbUser, currentPath, open, onClose })
                     <SidebarContent
                         basicDetails={basicDetails}
                         dbUser={dbUser}
+                        profile={profile}
                         currentPath={currentPath}
+                        needsResumeSetup={needsResumeSetup}
+                        hasPendingResume={hasPendingResume}
+                        isLoading={isLoading}
                         onNavigate={handleNavigate}
                     />
                 </div>
diff --git a/frontend/src/components/GrowthTips.jsx b/frontend/src/components/GrowthTips.jsx
new file mode 100644
index 0000000..76a33c7
--- /dev/null
+++ b/frontend/src/components/GrowthTips.jsx
@@ -0,0 +1,113 @@
+import { useMemo, useState } from 'react'
+import { useToast } from '../context/ToastContext'
+import { getPortfolioUrl } from '../utils/appUrl'
+import {
+    getResumeLinkLine,
+    getShareContent,
+    openShareWindow,
+} from '../utils/sharePosts'
+
+function GrowthTips({ username, basicDetails, profile }) {
+    const toast = useToast()
+    const [copiedTip, setCopiedTip] = useState('')
+
+    const shareData = useMemo(
+        () => ({ username, basicDetails, profile }),
+        [username, basicDetails, profile],
+    )
+
+    const linkedinShare = useMemo(
+        () => getShareContent('linkedin', shareData),
+        [shareData],
+    )
+
+    const twitterShare = useMemo(
+        () => getShareContent('twitter', shareData),
+        [shareData],
+    )
+
+    const resumeLine = username ? getResumeLinkLine(username) : ''
+
+    const handleShare = async (url) => {
+        if (openShareWindow(url)) {
+            return
+        }
+
+        const portfolioUrl = username ? getPortfolioUrl(username) : ''
+        if (portfolioUrl && navigator?.clipboard) {
+            try {
+                await navigator.clipboard.writeText(portfolioUrl)
+                toast.error('Popup blocked. Portfolio link copied to your clipboard instead.')
+                return
+            } catch {
+                // fall through to generic message
+            }
+        }
+
+        toast.error('Popup blocked. Allow popups for this site or copy your portfolio link from the dashboard.')
+    }
+
+    const copyResumeLine = async () => {
+        if (!resumeLine || !navigator?.clipboard) {
+            toast.error('Copy is not available in this browser.')
+            return
+        }
+
+        try {
+            await navigator.clipboard.writeText(resumeLine)
+            setCopiedTip('resume')
+            setTimeout(() => setCopiedTip(''), 2000)
+        } catch {
+            toast.error('Could not copy to clipboard. Please try again.')
+        }
+    }
+
+    const tips = [
+        {
+            id: 'linkedin',
+            title: 'Share on LinkedIn',
+            desc: 'Professional networks drive the most relevant traffic to portfolios.',
+            disabled: !linkedinShare,
+            onClick: () => handleShare(linkedinShare?.url),
+        },
+        {
+            id: 'twitter',
+            title: 'Share on X',
+            desc: 'Post a ready-made update and reach a wider audience in seconds.',
+            disabled: !twitterShare,
+            onClick: () => handleShare(twitterShare?.url),
+        },
+        {
+            id: 'resume',
+            title: 'Add to resume',
+            desc: 'Include your portfolio link to stand out from other applicants.',
+            disabled: !resumeLine,
+            onClick: copyResumeLine,
+        },
+    ]
+
+    return (
+        <div className="space-y-3">
+            {tips.map((tip) => (
+                <button
+                    key={tip.id}
+                    type="button"
+                    disabled={tip.disabled}
+                    onClick={tip.onClick}
+                    className="w-full p-4 bg-tertiary rounded-xl text-left transition-colors hover:bg-surface-hover disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-tertiary"
+                >
+                    <p className="text-secondary text-sm">
+                        <strong className="text-primary">{tip.title}</strong>
+                        {' '}
+                        — {tip.desc}
+                        {copiedTip === tip.id && (
+                            <span className="text-success font-medium"> Copied!</span>
+                        )}
+                    </p>
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export default GrowthTips
diff --git a/frontend/src/constants/brand.js b/frontend/src/constants/brand.js
index 638d698..25302dd 100644
--- a/frontend/src/constants/brand.js
+++ b/frontend/src/constants/brand.js
@@ -18,7 +18,7 @@ export const BRAND_KEYWORDS = [
     'job portfolio',
     'resume portfolio maker',
 ].join(', ')
-export const BRAND_LOGO_SRC = '/portlify_clean_logo.png'
+export const BRAND_LOGO_SRC = '/logo-2.png'
 export const BRAND_LOGO_ALT = 'PortlifyAi logo'
 export const BRAND_AUTHOR = 'TechyCSR'
 export const BRAND_AUTHOR_URL = 'https://techycsr.dev'
@@ -29,6 +29,9 @@ export const BRAND_SOCIAL = [
     '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
+export const DEFAULT_SITE_URL = 'https://portlifyai.app'
+export const OG_IMAGE_PATH = '/og-image.png'
+export const OG_IMAGE_VERSION = '6'
+export const HERO_IMAGE_PATH = '/hero.png'
+export const DEFAULT_OG_IMAGE = `${DEFAULT_SITE_URL}${OG_IMAGE_PATH}?v=${OG_IMAGE_VERSION}`
+export const DEFAULT_TITLE = `${BRAND_NAME_DISPLAY} - ${BRAND_TAGLINE}`
diff --git a/frontend/src/pages/Analytics.jsx b/frontend/src/pages/Analytics.jsx
index 4d51483..3b78516 100644
--- a/frontend/src/pages/Analytics.jsx
+++ b/frontend/src/pages/Analytics.jsx
@@ -3,6 +3,14 @@ import { useNavigate } from 'react-router-dom'
 import { useUser } from '@clerk/clerk-react'
 import { motion } from 'framer-motion'
 import { getAnalyticsDetailed, getAnalyticsSummary } from '../utils/api'
+import {
+    buildChartSeries,
+    formatChartLabel,
+    formatChartTooltip,
+    getChartBarHeight,
+    getChartGapClass,
+} from '../utils/analyticsChart'
+import { getReferrerCategoryLabel, getReferrerIcon } from '../utils/referrer'
 import {
     Calendar,
     Eye,
@@ -13,8 +21,10 @@ import {
     Users,
 } from 'lucide-react'
 import { IconTile, InlineIcon } from '../components/IconTile'
+import GrowthTips from '../components/GrowthTips'
 import PageHeader from '../components/PageHeader'
 import { ErrorState, LoadingState } from '../components/AsyncState'
+import { useDashboardLayout } from '../components/DashboardLayout'
 
 const analyticsStats = [
     { label: 'Total Views', key: 'totalViews', icon: Eye },
@@ -45,6 +55,7 @@ const itemVariants = {
 function Analytics() {
     const navigate = useNavigate()
     const { isLoaded, isSignedIn } = useUser()
+    const { dbUser, profile, basicDetails, isRouteReady } = useDashboardLayout()
     const [loading, setLoading] = useState(true)
     const [loadError, setLoadError] = useState('')
     const [summary, setSummary] = useState(null)
@@ -57,6 +68,7 @@ function Analytics() {
             navigate('/')
             return
         }
+        if (!isRouteReady) return
 
         const loadData = async () => {
             setLoadError('')
@@ -78,7 +90,7 @@ function Analytics() {
             }
         }
         loadData()
-    }, [isLoaded, isSignedIn, navigate])
+    }, [isLoaded, isSignedIn, isRouteReady, navigate])
 
     // Format number with commas
     const formatNumber = (num) => {
@@ -107,6 +119,19 @@ function Analytics() {
         return Math.round(((detailed?.devices?.[type] || 0) / totalDevices) * 100)
     }
 
+    const chartData = buildChartSeries(detailed?.dailyStats, period)
+    const maxViews = Math.max(1, ...chartData.map((stat) => stat.views))
+    const hasChartViews = chartData.some((stat) => stat.views > 0)
+
+    const allReferrers = detailed?.referrers || []
+    const topReferrers = allReferrers.slice(0, 8)
+    const totalReferrerViews = allReferrers.reduce((sum, ref) => sum + (ref.count || 0), 0)
+
+    const getReferrerPercent = (count) => {
+        if (!totalReferrerViews) return 0
+        return Math.round((count / totalReferrerViews) * 100)
+    }
+
     return (
         <div className="max-w-6xl mx-auto pb-6">
             <PageHeader
@@ -158,33 +183,61 @@ function Analytics() {
                             </div>
                         </div>
 
-                        {/* Simple bar chart */}
-                        <div className="h-48 flex items-end gap-2">
-                            {(detailed?.dailyStats?.slice(period === 'week' ? -7 : -30) || []).map((stat, i) => {
-                                const maxViews = Math.max(...(detailed?.dailyStats?.map(s => s.views) || [1]))
-                                const height = (stat.views / maxViews) * 100
-                                return (
-                                    <motion.div
-                                        key={i}
-                                        initial={{ height: 0 }}
-                                        animate={{ height: `${Math.max(height, 5)}%` }}
-                                        transition={{ delay: i * 0.05 }}
-                                        className="flex-1 bg-primary-500 rounded-t-lg relative group cursor-pointer min-h-[8px]"
-                                        role="img"
-                                        aria-label={`${stat.date}: ${stat.views} views`}
-                                        title={`${stat.date}: ${stat.views} views`}
-                                    >
-                                        <div className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-surface rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
-                                            {stat.views} views
+                        <div className="space-y-3">
+                            <div
+                                className={`relative h-48 flex items-end ${getChartGapClass(period)}`}
+                                role="img"
+                                aria-label={`Views over the last ${period === 'week' ? '7 days' : '30 days'}`}
+                            >
+                                {!hasChartViews && (
+                                    <div className="absolute inset-0 flex items-center justify-center text-sm text-muted pointer-events-none">
+                                        No views in this period yet
+                                    </div>
+                                )}
+                                {chartData.map((stat, i) => {
+                                    const barHeight = getChartBarHeight(stat.views, maxViews, period)
+                                    const barDelay = period === 'month' ? i * 0.015 : i * 0.04
+
+                                    return (
+                                        <div
+                                            key={`${stat.date.getTime()}-${i}`}
+                                            className="flex-1 h-full flex flex-col justify-end min-w-0"
+                                        >
+                                            <motion.div
+                                                initial={{ height: 0 }}
+                                                animate={{ height: barHeight }}
+                                                transition={{ delay: barDelay, duration: 0.35, ease: 'easeOut' }}
+                                                className={`w-full rounded-t-sm relative group ${stat.views > 0
+                                                    ? 'bg-primary-500/90 hover:bg-primary-500'
+                                                    : 'bg-surface/80'
+                                                    }`}
+                                                title={formatChartTooltip(stat.date, stat.views)}
+                                            >
+                                                {stat.views > 0 && (
+                                                    <div className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-surface border border-[var(--glass-border)] rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
+                                                        {stat.views} views
+                                                    </div>
+                                                )}
+                                            </motion.div>
                                         </div>
-                                    </motion.div>
-                                )
-                            })}
-                            {(!detailed?.dailyStats?.length) && (
-                                <div className="flex-1 flex items-center justify-center text-muted">
-                                    No data yet
-                                </div>
-                            )}
+                                    )
+                                })}
+                            </div>
+                            <div className={`flex ${getChartGapClass(period)}`}>
+                                {chartData.map((stat, i) => {
+                                    const label = formatChartLabel(stat.date, period, i, chartData.length)
+
+                                    return (
+                                        <div
+                                            key={`${stat.date.getTime()}-label-${i}`}
+                                            className="flex-1 text-center text-[10px] sm:text-xs text-muted min-w-0 leading-none"
+                                            aria-hidden={!label}
+                                        >
+                                            {label}
+                                        </div>
+                                    )
+                                })}
+                            </div>
                         </div>
                     </motion.div>
 
@@ -227,21 +280,60 @@ function Analytics() {
                         transition={{ delay: 0.5 }}
                         className="glass-card rounded-2xl p-6"
                     >
-                        <h2 className="font-bold text-primary mb-6">Top Referrers</h2>
+                        <div className="flex items-center justify-between gap-3 mb-6">
+                            <h2 className="font-bold text-primary">Top Referrers</h2>
+                            {topReferrers.length > 0 && (
+                                <span className="text-xs text-muted">
+                                    {formatNumber(totalReferrerViews)} referrer visits tracked
+                                </span>
+                            )}
+                        </div>
 
-                        {(detailed?.referrers?.length || 0) > 0 ? (
-                            <div className="space-y-3">
-                                {detailed.referrers.slice(0, 5).map((ref, i) => (
-                                    <div key={i} className="flex items-center justify-between p-3 bg-surface rounded-xl">
-                                        <span className="text-secondary truncate max-w-[200px]">{ref.source}</span>
-                                        <span className="text-primary font-medium">{ref.count}</span>
-                                    </div>
-                                ))}
+                        {topReferrers.length > 0 ? (
+                            <div className="space-y-4">
+                                {topReferrers.map((ref, i) => {
+                                    const ReferrerIcon = getReferrerIcon(ref.category)
+                                    const label = ref.label || ref.source
+                                    const percent = getReferrerPercent(ref.count)
+
+                                    return (
+                                        <div key={`${ref.id || label}-${i}`}>
+                                            <div className="flex items-center justify-between gap-3 mb-2">
+                                                <div className="flex items-center gap-3 min-w-0">
+                                                    <div className="w-9 h-9 rounded-lg bg-tertiary flex items-center justify-center flex-shrink-0">
+                                                        <ReferrerIcon size={16} className="text-secondary" />
+                                                    </div>
+                                                    <div className="min-w-0">
+                                                        <p className="text-primary font-medium truncate">{label}</p>
+                                                        <p className="text-xs text-muted truncate">
+                                                            {getReferrerCategoryLabel(ref.category)}
+                                                            {ref.domain ? ` · ${ref.domain}` : ''}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                                <div className="text-right flex-shrink-0">
+                                                    <p className="text-primary font-medium">{formatNumber(ref.count)}</p>
+                                                    <p className="text-xs text-muted">{percent}%</p>
+                                                </div>
+                                            </div>
+                                            <div className="h-2 bg-surface rounded-full overflow-hidden">
+                                                <motion.div
+                                                    initial={{ width: 0 }}
+                                                    animate={{ width: `${percent}%` }}
+                                                    transition={{ delay: 0.5 + i * 0.08, duration: 0.45 }}
+                                                    className="h-full bg-primary-500/70 rounded-full"
+                                                />
+                                            </div>
+                                        </div>
+                                    )
+                                })}
                             </div>
                         ) : (
                             <div className="text-center py-8 text-muted">
                                 <p>No referrer data yet</p>
-                                <p className="text-sm mt-1">Share your portfolio to see where visitors come from</p>
+                                <p className="text-sm mt-1 max-w-sm mx-auto">
+                                    Share your portfolio on LinkedIn, add UTM links, or send it through ChatGPT to see where visitors come from
+                                </p>
                             </div>
                         )}
                     </motion.div>
@@ -255,19 +347,11 @@ function Analytics() {
                     >
                         <h2 className="font-bold text-primary mb-6">Growth Tips</h2>
 
-                        <div className="space-y-3">
-                            {[
-                                { title: 'Share on LinkedIn', desc: 'Professional networks drive the most relevant traffic to portfolios.' },
-                                { title: 'Add to email signature', desc: 'Every email becomes an opportunity to showcase your work.' },
-                                { title: 'Add to resume', desc: 'Include your portfolio link to stand out from other applicants.' },
-                            ].map((tip) => (
-                                <div key={tip.title} className="p-4 bg-tertiary rounded-xl">
-                                    <p className="text-secondary text-sm">
-                                        <strong className="text-primary">{tip.title}</strong> — {tip.desc}
-                                    </p>
-                                </div>
-                            ))}
-                        </div>
+                        <GrowthTips
+                            username={dbUser?.username}
+                            basicDetails={basicDetails}
+                            profile={profile}
+                        />
                     </motion.div>
                 </div>
         </div>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index c9c1a9d..a6868bc 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion'
 import { getAnalyticsSummary } from '../utils/api'
 import { getAppUrl, getPortfolioUrl } from '../utils/appUrl'
 import { useDashboardLayout } from '../components/DashboardLayout'
+import { isMissingProfileError } from '../utils/profileSetup'
 import DashboardSkeleton from '../components/DashboardSkeleton'
 import {
     BarChart3,
@@ -71,7 +72,7 @@ function Dashboard() {
 
         const err = loadError
         console.error('Dashboard data fetch error:', err)
-        if (err.response?.status === 404 || err.response?.data?.needsSetup) {
+        if (isMissingProfileError(err)) {
             navigate('/upload')
         } else if (err.response?.data?.needsRegistration) {
             navigate('/username')
diff --git a/frontend/src/pages/Portfolio.jsx b/frontend/src/pages/Portfolio.jsx
index 5ba81f9..5046005 100644
--- a/frontend/src/pages/Portfolio.jsx
+++ b/frontend/src/pages/Portfolio.jsx
@@ -7,6 +7,7 @@ import PortfolioTemplate from '../portfolio/PortfolioTemplate'
 import LoadingState from '../portfolio/components/LoadingState'
 import ErrorState from '../portfolio/components/ErrorState'
 import { applySiteSeo, buildPortfolioSeo, resetSiteSeo } from '../utils/seo'
+import { getTrackingReferrer } from '../utils/referrer'
 
 function Portfolio() {
     const { username } = useParams()
@@ -36,7 +37,7 @@ function Portfolio() {
                     fetch(`${API_URL}/api/analytics/track/${encodeURIComponent(username)}`, {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ referrer: document.referrer || 'direct' }),
+                        body: JSON.stringify({ referrer: getTrackingReferrer() }),
                     }).catch(() => {})
                 }
             } catch (err) {
diff --git a/frontend/src/pages/PostAuthRedirect.jsx b/frontend/src/pages/PostAuthRedirect.jsx
new file mode 100644
index 0000000..795f9b6
--- /dev/null
+++ b/frontend/src/pages/PostAuthRedirect.jsx
@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { getCurrentUser, getMyProfile } from '../utils/api'
+import { hasCompletedProfileSetup, isMissingProfileError } from '../utils/profileSetup'
+import { ErrorState, LoadingState } from '../components/AsyncState'
+
+function PostAuthRedirect() {
+    const navigate = useNavigate()
+    const [error, setError] = useState('')
+    const [retryCount, setRetryCount] = useState(0)
+
+    const resolveDestination = useCallback(async (cancelledRef) => {
+        setError('')
+
+        try {
+            const { data: user } = await getCurrentUser()
+
+            if (!user?.username) {
+                if (!cancelledRef.current) navigate('/username', { replace: true })
+                return
+            }
+
+            if (!user.onboardingCompleted) {
+                if (!cancelledRef.current) navigate('/onboarding', { replace: true })
+                return
+            }
+
+            try {
+                const { data: profile } = await getMyProfile()
+                if (!cancelledRef.current) {
+                    navigate(hasCompletedProfileSetup(profile) ? '/dashboard' : '/upload', { replace: true })
+                }
+            } catch (err) {
+                if (cancelledRef.current) return
+                if (isMissingProfileError(err)) {
+                    navigate('/upload', { replace: true })
+                } else {
+                    setError(err.response?.data?.error || 'Failed to load your profile. Please try again.')
+                }
+            }
+        } catch (err) {
+            if (cancelledRef.current) return
+            if (err.response?.data?.needsRegistration) {
+                navigate('/username', { replace: true })
+            } else {
+                setError(err.response?.data?.error || 'Failed to load your account. Please try again.')
+            }
+        }
+    }, [navigate])
+
+    useEffect(() => {
+        const cancelledRef = { current: false }
+        resolveDestination(cancelledRef)
+
+        return () => {
+            cancelledRef.current = true
+        }
+    }, [resolveDestination, retryCount])
+
+    if (error) {
+        return (
+            <ErrorState
+                message={error}
+                onRetry={() => setRetryCount((count) => count + 1)}
+            />
+        )
+    }
+
+    return <LoadingState message="Getting things ready..." />
+}
+
+export default PostAuthRedirect
\ No newline at end of file
diff --git a/frontend/src/pages/ProfileEditor.jsx b/frontend/src/pages/ProfileEditor.jsx
index ed8cb5f..6a519f7 100644
--- a/frontend/src/pages/ProfileEditor.jsx
+++ b/frontend/src/pages/ProfileEditor.jsx
@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom'
 import { useUser } from '@clerk/clerk-react'
 import { motion } from 'framer-motion'
 import { createProfile, updateProfile, getCurrentUser, getMyProfile } from '../utils/api'
+import { hasCompletedProfileSetup, isMissingProfileError } from '../utils/profileSetup'
+import { useDashboardLayout } from '../components/DashboardLayout'
 import { useCloudinaryUpload } from '../hooks/useCloudinaryUpload'
 import { useToast } from '../context/ToastContext'
 import {
@@ -16,11 +18,12 @@ import {
 import { IconTile } from '../components/IconTile'
 import PageHeader from '../components/PageHeader'
 import MobileTabBar from '../components/MobileTabBar'
-import { LoadingState } from '../components/AsyncState'
+import { ErrorState, LoadingState } from '../components/AsyncState'
 
 function ProfileEditor() {
     const navigate = useNavigate()
     const { isLoaded, isSignedIn } = useUser()
+    const { refreshData, refreshPendingResume } = useDashboardLayout()
     const { upload: uploadPhoto, uploading: photoUploading } = useCloudinaryUpload()
     const toast = useToast()
     const [saving, setSaving] = useState(false)
@@ -29,6 +32,7 @@ function ProfileEditor() {
     const [resumeUrl, setResumeUrl] = useState('')
     const [isEditing, setIsEditing] = useState(false)
     const [loading, setLoading] = useState(true)
+    const [loadError, setLoadError] = useState('')
 
     // Form data state
     const [formData, setFormData] = useState({
@@ -80,6 +84,8 @@ function ProfileEditor() {
         }
 
         const loadProfileData = async () => {
+            setLoadError('')
+
             try {
                 // First check if user is registered
                 await getCurrentUser()
@@ -121,11 +127,12 @@ function ProfileEditor() {
                 }
             }
 
-            // Try to load from API (for editing existing profile)
+            let hasExistingProfile = false
+
             try {
                 const { data: profileData } = await getMyProfile()
-                if (profileData && profileData.basicDetails?.name) {
-                    // Only consider it a valid existing profile if it has actual data
+                if (profileData && hasCompletedProfileSetup(profileData)) {
+                    hasExistingProfile = true
                     setIsEditing(true)
                     setResumeUrl(profileData.resumeUrl || '')
                     setFormData(prev => ({
@@ -146,8 +153,19 @@ function ProfileEditor() {
                     }))
                 }
             } catch (err) {
-                // No existing profile, user will start fresh
+                if (isMissingProfileError(err)) {
+                    navigate('/upload', { replace: true })
+                    return
+                }
 
+                setLoadError(err.response?.data?.error || 'Failed to load profile. Please try again.')
+                setLoading(false)
+                return
+            }
+
+            if (!hasExistingProfile) {
+                navigate('/upload', { replace: true })
+                return
             }
 
             setLoading(false)
@@ -246,13 +264,13 @@ function ProfileEditor() {
                 await createProfile(profileData)
             }
 
-            // Clear stored data
             sessionStorage.removeItem('parsedResumeData')
+            refreshPendingResume()
+            await refreshData()
 
             toast.dismiss(loadingToast)
             toast.success('Profile saved successfully!')
 
-            // Navigate to dashboard
             setTimeout(() => navigate('/dashboard'), 500)
         } catch (err) {
             toast.dismiss(loadingToast)
@@ -284,6 +302,19 @@ function ProfileEditor() {
         return <LoadingState />
     }
 
+    if (loadError) {
+        return (
+            <ErrorState
+                message={loadError}
+                onRetry={() => {
+                    setLoading(true)
+                    setLoadError('')
+                    window.location.reload()
+                }}
+            />
+        )
+    }
+
     return (
         <div className="max-w-6xl mx-auto pb-6">
             <motion.div
diff --git a/frontend/src/pages/ResumeUpload.jsx b/frontend/src/pages/ResumeUpload.jsx
index 8739902..627bef6 100644
--- a/frontend/src/pages/ResumeUpload.jsx
+++ b/frontend/src/pages/ResumeUpload.jsx
@@ -8,23 +8,27 @@ import { useToast } from '../context/ToastContext'
 import { Check, CheckCircle, Info } from 'lucide-react'
 import { IconTile, InlineIcon, ICON_STROKE } from '../components/IconTile'
 import PageHeader from '../components/PageHeader'
+import { useDashboardLayout } from '../components/DashboardLayout'
 
 function ResumeUpload() {
     const navigate = useNavigate()
+    const { refreshPendingResume } = useDashboardLayout()
     const { upload, uploading, progress, error: uploadError } = useCloudinaryUpload()
     const toast = useToast()
     const [status, setStatus] = useState('idle') // idle, uploading, parsing, success, error
     const [error, setError] = useState('')
     const [parsingMessage, setParsingMessage] = useState('')
 
-    // Check if user has registered username
     useEffect(() => {
         const checkUser = async () => {
             try {
-                await getCurrentUser()
+                const { data } = await getCurrentUser()
+                if (!data.onboardingCompleted) {
+                    navigate('/onboarding', { replace: true })
+                }
             } catch (err) {
                 if (err.response?.data?.needsRegistration) {
-                    navigate('/username')
+                    navigate('/username', { replace: true })
                 }
             }
         }
@@ -58,6 +62,7 @@ function ResumeUpload() {
                 ...data.data,
                 resumeUrl: url
             }))
+            refreshPendingResume()
 
             setStatus('success')
             setParsingMessage('Done! Redirecting to editor...')
diff --git a/frontend/src/pages/UsernameSelection.jsx b/frontend/src/pages/UsernameSelection.jsx
index 5a405a4..cca12ef 100644
--- a/frontend/src/pages/UsernameSelection.jsx
+++ b/frontend/src/pages/UsernameSelection.jsx
@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useUser } from '@clerk/clerk-react'
 import { motion } from 'framer-motion'
-import { checkUsername, registerUser, getCurrentUser } from '../utils/api'
+import { checkUsername, registerUser, getCurrentUser, getMyProfile } from '../utils/api'
+import { hasCompletedProfileSetup } from '../utils/profileSetup'
 import { getAppUrl } from '../utils/appUrl'
 import { Check, X } from 'lucide-react'
 import { ICON_STROKE } from '../components/IconTile'
@@ -30,11 +31,16 @@ function UsernameSelection() {
             try {
                 const { data } = await getCurrentUser()
                 if (data?.username) {
-                    // If onboarding not complete, go to onboarding
                     if (!data.onboardingCompleted) {
                         navigate('/onboarding')
-                    } else {
-                        navigate('/dashboard')
+                        return
+                    }
+
+                    try {
+                        const { data: profile } = await getMyProfile()
+                        navigate(hasCompletedProfileSetup(profile) ? '/dashboard' : '/upload')
+                    } catch {
+                        navigate('/upload')
                     }
                 }
             } catch (err) {
diff --git a/frontend/src/portfolio/PortfolioTemplate.jsx b/frontend/src/portfolio/PortfolioTemplate.jsx
index 4d1e1c8..a7f1033 100644
--- a/frontend/src/portfolio/PortfolioTemplate.jsx
+++ b/frontend/src/portfolio/PortfolioTemplate.jsx
@@ -12,11 +12,13 @@ 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 } },
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0, transition: { duration: 0.25, ease: 'easeOut' } },
+    exit: { opacity: 0, y: -6, transition: { duration: 0.18 } },
 }
 
+const DESKTOP_MEDIA_QUERY = '(min-width: 1024px)'
+
 function PortfolioTemplate({ profile, username }) {
     const { theme, toggleTheme } = useTheme()
     const portfolioTheme = profile?.theme || 'modern'
@@ -25,6 +27,7 @@ function PortfolioTemplate({ profile, username }) {
     const sections = useMemo(() => buildPortfolioSections(profile), [profile])
     const [activeSection, setActiveSection] = useState(sections[0]?.id || 'about')
     const contentRef = useRef(null)
+    const contentAnchorRef = useRef(null)
 
     const activeSectionData = useMemo(
         () => sections.find((section) => section.id === activeSection) || sections[0],
@@ -47,10 +50,24 @@ function PortfolioTemplate({ profile, username }) {
     useEffect(() => {
         const previousHtmlOverflow = document.documentElement.style.overflow
         const previousBodyOverflow = document.body.style.overflow
-        document.documentElement.style.overflow = 'hidden'
-        document.body.style.overflow = 'hidden'
+        const mediaQuery = window.matchMedia(DESKTOP_MEDIA_QUERY)
+
+        const syncDocumentScroll = () => {
+            if (mediaQuery.matches) {
+                document.documentElement.style.overflow = 'hidden'
+                document.body.style.overflow = 'hidden'
+                return
+            }
+
+            document.documentElement.style.overflow = ''
+            document.body.style.overflow = ''
+        }
+
+        syncDocumentScroll()
+        mediaQuery.addEventListener('change', syncDocumentScroll)
 
         return () => {
+            mediaQuery.removeEventListener('change', syncDocumentScroll)
             document.documentElement.style.overflow = previousHtmlOverflow
             document.body.style.overflow = previousBodyOverflow
         }
@@ -59,8 +76,18 @@ function PortfolioTemplate({ profile, username }) {
     const selectSection = useCallback((sectionId) => {
         setActiveSection(sectionId)
         window.history.replaceState(null, '', `#${sectionId}`)
+
         requestAnimationFrame(() => {
-            contentRef.current?.scrollTo({ top: 0, behavior: 'auto' })
+            if (window.matchMedia(DESKTOP_MEDIA_QUERY).matches) {
+                contentRef.current?.scrollTo({ top: 0, behavior: 'auto' })
+                return
+            }
+
+            const anchor = contentAnchorRef.current
+            if (!anchor) return
+
+            const top = anchor.getBoundingClientRect().top + window.scrollY - 8
+            window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' })
         })
     }, [])
 
@@ -69,21 +96,21 @@ function PortfolioTemplate({ profile, username }) {
     return (
         <div
             id="top"
-            className="portfolio-root h-dvh flex flex-col overflow-hidden transition-colors duration-300"
+            className="portfolio-root lg:flex lg:flex-col transition-colors duration-300 lg:h-dvh lg:overflow-hidden"
             style={cssVars}
         >
             <div className="fixed inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
                 <div
-                    className="absolute top-0 right-0 w-[480px] h-[480px] rounded-full blur-3xl opacity-[0.04]"
+                    className="absolute top-0 right-0 w-[280px] h-[280px] sm:w-[480px] sm:h-[480px] rounded-full blur-3xl opacity-[0.04]"
                     style={{ background: colors.accentSoft }}
                 />
             </div>
 
             <TopBar theme={theme} onToggleTheme={toggleTheme} />
 
-            <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">
+            <div className="relative portfolio-mobile-body portfolio-desktop-shell lg:flex-1 lg:min-h-0">
+                <div className="max-w-6xl mx-auto px-4 sm:px-6 py-3 sm:py-4 lg:py-6 lg:h-full">
+                    <div className="portfolio-mobile-grid lg:h-full grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8 xl:gap-10 lg:min-h-0">
                         <ProfileAside
                             username={username}
                             basicDetails={basicDetails}
@@ -94,16 +121,21 @@ function PortfolioTemplate({ profile, username }) {
                             onNavigate={selectSection}
                         />
 
-                        <div className="min-h-0 flex flex-col overflow-hidden mt-4 lg:mt-0">
-                            <SectionNav
-                                sections={sections}
-                                activeSection={activeSection}
-                                onNavigate={selectSection}
-                            />
+                        <div className="flex flex-col portfolio-mobile-main portfolio-desktop-main mt-3 sm:mt-4 lg:mt-0 lg:min-h-0 lg:overflow-hidden">
+                            <div className="portfolio-mobile-sticky-nav">
+                                <SectionNav
+                                    sections={sections}
+                                    activeSection={activeSection}
+                                    onNavigate={selectSection}
+                                />
+                            </div>
+
+                            <div ref={contentAnchorRef} className="h-0 w-full" aria-hidden="true" />
 
                             <PortfolioScrollArea
                                 ref={contentRef}
-                                className="mt-4 lg:mt-5"
+                                className="mt-3 sm:mt-4 lg:mt-5 portfolio-mobile-scroll-area lg:flex-1 lg:min-h-0"
+                                innerClassName="portfolio-mobile-scroll-panel"
                                 aria-live="polite"
                                 role="main"
                             >
@@ -112,7 +144,7 @@ function PortfolioTemplate({ profile, username }) {
                                         <motion.section
                                             key={activeSectionData.id}
                                             id={activeSectionData.id}
-                                            className="portfolio-section-content"
+                                            className="portfolio-section-content overflow-visible"
                                             variants={sectionVariants}
                                             initial="initial"
                                             animate="animate"
diff --git a/frontend/src/portfolio/components/ErrorState.jsx b/frontend/src/portfolio/components/ErrorState.jsx
index 6097844..2f816f6 100644
--- a/frontend/src/portfolio/components/ErrorState.jsx
+++ b/frontend/src/portfolio/components/ErrorState.jsx
@@ -4,7 +4,14 @@ import { getCssVars } from '../theme'
 
 function ErrorState({ colors, message }) {
     return (
-        <div className="min-h-screen flex items-center justify-center px-4" style={{ background: colors.bg }}>
+        <div
+            className="min-h-dvh flex items-center justify-center px-4"
+            style={{
+                background: colors.bg,
+                paddingTop: 'env(safe-area-inset-top, 0px)',
+                paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+            }}
+        >
             <div
                 className="portfolio-surface rounded-2xl p-8 text-center max-w-md w-full"
                 style={getCssVars(colors)}
diff --git a/frontend/src/portfolio/components/Footer.jsx b/frontend/src/portfolio/components/Footer.jsx
index f73373a..9e435cd 100644
--- a/frontend/src/portfolio/components/Footer.jsx
+++ b/frontend/src/portfolio/components/Footer.jsx
@@ -26,7 +26,7 @@ function Footer({ profile, compact = false }) {
     const customBranding = profile?.customBranding
 
     return (
-        <footer className={`relative flex-shrink-0 ${compact ? 'py-3 mt-3' : 'py-12 px-4 mt-8'}`}>
+        <footer className={`relative flex-shrink-0 ${compact ? 'py-3 mt-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]' : '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"
@@ -63,11 +63,12 @@ function Footer({ profile, compact = false }) {
                         >
                             <button
                                 type="button"
-                                className="portfolio-btn-primary w-5 h-5 rounded-full flex items-center justify-center shadow-lg"
+                                className="portfolio-btn-primary w-8 h-8 sm:w-5 sm:h-5 rounded-full flex items-center justify-center shadow-lg portfolio-touch-target"
                                 aria-label="Premium branding information"
+                                aria-expanded={showPremiumInfo}
                                 onClick={() => setShowPremiumInfo((open) => !open)}
                             >
-                                <Info size={12} strokeWidth={3} />
+                                <Info size={14} strokeWidth={3} />
                             </button>
 
                             <AnimatePresence>
diff --git a/frontend/src/portfolio/components/LoadingState.jsx b/frontend/src/portfolio/components/LoadingState.jsx
index 4d700af..925b7c5 100644
--- a/frontend/src/portfolio/components/LoadingState.jsx
+++ b/frontend/src/portfolio/components/LoadingState.jsx
@@ -1,6 +1,13 @@
 function LoadingState({ colors }) {
     return (
-        <div className="min-h-screen flex items-center justify-center" style={{ background: colors.bg }}>
+        <div
+            className="min-h-dvh flex items-center justify-center px-4"
+            style={{
+                background: colors.bg,
+                paddingTop: 'env(safe-area-inset-top, 0px)',
+                paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+            }}
+        >
             <div className="text-center">
                 <div
                     className="w-10 h-10 rounded-full border-2 border-t-transparent animate-spin mx-auto mb-4"
diff --git a/frontend/src/portfolio/components/PortfolioScrollArea.jsx b/frontend/src/portfolio/components/PortfolioScrollArea.jsx
index 0520eb9..fb9079c 100644
--- a/frontend/src/portfolio/components/PortfolioScrollArea.jsx
+++ b/frontend/src/portfolio/components/PortfolioScrollArea.jsx
@@ -1,5 +1,7 @@
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 
+const DESKTOP_MEDIA_QUERY = '(min-width: 1024px)'
+
 const PortfolioScrollArea = forwardRef(function PortfolioScrollArea(
     { children, className = '', innerClassName = '', ...props },
     ref
@@ -7,6 +9,10 @@ const PortfolioScrollArea = forwardRef(function PortfolioScrollArea(
     const scrollRef = useRef(null)
     const [canScrollUp, setCanScrollUp] = useState(false)
     const [canScrollDown, setCanScrollDown] = useState(false)
+    const [isDesktop, setIsDesktop] = useState(() => {
+        if (typeof window === 'undefined') return true
+        return window.matchMedia(DESKTOP_MEDIA_QUERY).matches
+    })
 
     const setRefs = useCallback((node) => {
         scrollRef.current = node
@@ -17,18 +23,37 @@ const PortfolioScrollArea = forwardRef(function PortfolioScrollArea(
         }
     }, [ref])
 
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(DESKTOP_MEDIA_QUERY)
+        const syncViewport = () => setIsDesktop(mediaQuery.matches)
+
+        syncViewport()
+        mediaQuery.addEventListener('change', syncViewport)
+        return () => mediaQuery.removeEventListener('change', syncViewport)
+    }, [])
+
     const updateScrollState = useCallback(() => {
         const el = scrollRef.current
-        if (!el) return
+        if (!el || !isDesktop) {
+            setCanScrollUp(false)
+            setCanScrollDown(false)
+            return
+        }
 
         const { scrollTop, clientHeight, scrollHeight } = el
         setCanScrollUp(scrollTop > 6)
         setCanScrollDown(scrollTop + clientHeight < scrollHeight - 6)
-    }, [])
+    }, [isDesktop])
 
     useEffect(() => {
+        if (!isDesktop) {
+            setCanScrollUp(false)
+            setCanScrollDown(false)
+            return undefined
+        }
+
         const el = scrollRef.current
-        if (!el) return
+        if (!el) return undefined
 
         updateScrollState()
 
@@ -46,24 +71,24 @@ const PortfolioScrollArea = forwardRef(function PortfolioScrollArea(
             resizeObserver.disconnect()
             mutationObserver.disconnect()
         }
-    }, [updateScrollState, children])
+    }, [updateScrollState, children, isDesktop])
 
     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 className={`portfolio-scroll-area relative ${className}`}>
+            {isDesktop && canScrollUp && (
+                <div className="portfolio-scroll-fade portfolio-scroll-fade-top portfolio-mobile-scroll-fade" aria-hidden="true" />
             )}
 
             <div
                 ref={setRefs}
-                className={`portfolio-scroll portfolio-section-panel h-full overflow-y-auto ${innerClassName}`}
+                className={`portfolio-scroll portfolio-section-panel lg:h-full lg:overflow-y-auto ${innerClassName}`}
                 {...props}
             >
                 {children}
             </div>
 
-            {canScrollDown && (
-                <div className="portfolio-scroll-fade portfolio-scroll-fade-bottom" aria-hidden="true" />
+            {isDesktop && canScrollDown && (
+                <div className="portfolio-scroll-fade portfolio-scroll-fade-bottom portfolio-mobile-scroll-fade" aria-hidden="true" />
             )}
         </div>
     )
diff --git a/frontend/src/portfolio/components/ProfileAside.jsx b/frontend/src/portfolio/components/ProfileAside.jsx
index 63574bf..72c60c4 100644
--- a/frontend/src/portfolio/components/ProfileAside.jsx
+++ b/frontend/src/portfolio/components/ProfileAside.jsx
@@ -11,7 +11,7 @@ import {
 import { ICON_STROKE } from '../../components/IconTile'
 import { safeHref, safeMailto } from '../../utils/safeUrl'
 
-function SocialButton({ href, label, icon: Icon }) {
+function SocialButton({ href, label, icon: Icon, compact = false }) {
     if (!href) return null
     return (
         <a
@@ -19,13 +19,31 @@ function SocialButton({ href, label, icon: Icon }) {
             target={href.startsWith('mailto:') ? undefined : '_blank'}
             rel="noopener noreferrer"
             aria-label={label}
-            className="inline-flex items-center justify-center w-10 h-10 rounded-xl transition-colors portfolio-chip"
+            className={`inline-flex items-center justify-center rounded-xl transition-colors portfolio-chip portfolio-touch-target ${compact ? 'w-11 h-11' : 'w-10 h-10 lg:w-10 lg:h-10'}`}
         >
             <Icon size={18} strokeWidth={ICON_STROKE} className="portfolio-text" />
         </a>
     )
 }
 
+function ProfilePhoto({ basicDetails, username, className = '' }) {
+    return (
+        <div className={`portfolio-surface-raised rounded-2xl overflow-hidden flex items-center justify-center border-2 border-[var(--pf-border)] flex-shrink-0 ${className}`}>
+            {basicDetails?.profilePhoto ? (
+                <img
+                    src={basicDetails.profilePhoto}
+                    alt={basicDetails.name || username}
+                    className="w-full h-full object-cover"
+                />
+            ) : (
+                <span className="text-3xl sm:text-4xl font-bold portfolio-link">
+                    {basicDetails?.name?.charAt(0)?.toUpperCase() || username?.charAt(0)?.toUpperCase()}
+                </span>
+            )}
+        </div>
+    )
+}
+
 function ProfileAside({
     username,
     basicDetails,
@@ -39,63 +57,62 @@ function ProfileAside({
     const mailto = safeMailto(email)
     const resumeLink = safeHref(resumeUrl)
 
-    return (
-        <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 ? (
-                            <img
-                                src={basicDetails.profilePhoto}
-                                alt={basicDetails.name || username}
-                                className="w-full h-full object-cover"
-                            />
-                        ) : (
-                            <span className="text-4xl font-bold portfolio-link">
-                                {basicDetails?.name?.charAt(0)?.toUpperCase() || username?.charAt(0)?.toUpperCase()}
-                            </span>
-                        )}
-                    </div>
-
-                    <h1 className="text-2xl sm:text-3xl font-display font-bold leading-tight mb-2 portfolio-text">
-                        {basicDetails?.name || username}
-                    </h1>
-
-                    {basicDetails?.headline && (
-                        <p className="text-sm sm:text-base mb-3 portfolio-text-secondary">
-                            {basicDetails.headline}
-                        </p>
-                    )}
+    const socialButtons = (
+        <>
+            <SocialButton href={safeHref(socialLinks?.github)} label="GitHub" icon={Github} compact />
+            <SocialButton href={safeHref(socialLinks?.linkedin)} label="LinkedIn" icon={Linkedin} compact />
+            <SocialButton href={safeHref(socialLinks?.twitter)} label="Twitter" icon={Twitter} compact />
+            <SocialButton href={safeHref(socialLinks?.website)} label="Website" icon={Globe} compact />
+        </>
+    )
 
-                    {basicDetails?.location && (
-                        <div className="flex items-center gap-2 text-sm mb-4 portfolio-text-muted">
-                            <MapPin size={14} strokeWidth={ICON_STROKE} />
-                            <span>{basicDetails.location}</span>
+    return (
+        <aside className="lg:min-h-0 lg:overflow-visible">
+            <div className="portfolio-surface rounded-2xl p-4 sm:p-5 lg:p-6 lg:h-full lg:flex lg:flex-col">
+                <div className="lg:hidden">
+                    <div className="flex items-start gap-3 sm:gap-4">
+                        <ProfilePhoto
+                            basicDetails={basicDetails}
+                            username={username}
+                            className="w-16 h-16 sm:w-20 sm:h-20"
+                        />
+                        <div className="flex-1 min-w-0 pt-0.5">
+                            <h1 className="text-xl sm:text-2xl font-display font-bold leading-tight portfolio-text">
+                                {basicDetails?.name || username}
+                            </h1>
+                            {basicDetails?.headline && (
+                                <p className="text-sm sm:text-base mt-1 leading-relaxed portfolio-text-secondary portfolio-break-words">
+                                    {basicDetails.headline}
+                                </p>
+                            )}
+                            {basicDetails?.location && (
+                                <div className="flex items-start gap-1.5 text-sm mt-2 portfolio-text-muted">
+                                    <MapPin size={14} strokeWidth={ICON_STROKE} className="flex-shrink-0 mt-0.5" />
+                                    <span className="portfolio-break-words">{basicDetails.location}</span>
+                                </div>
+                            )}
                         </div>
-                    )}
+                    </div>
 
                     {(basicDetails?.phone || mailto) && (
-                        <div className="flex flex-col gap-2 w-full mb-4 text-sm portfolio-text-secondary">
+                        <div className="mt-3 flex flex-col gap-1.5 text-sm portfolio-text-secondary">
                             {basicDetails?.phone && (
-                                <div className="flex items-center justify-center lg:justify-start gap-2">
-                                    <Phone size={14} strokeWidth={ICON_STROKE} />
+                                <a href={`tel:${basicDetails.phone}`} className="inline-flex items-center gap-2 min-h-[44px]">
+                                    <Phone size={15} strokeWidth={ICON_STROKE} />
                                     <span>{basicDetails.phone}</span>
-                                </div>
+                                </a>
                             )}
                             {mailto && (
-                                <a href={mailto} className="flex items-center justify-center lg:justify-start gap-2 hover:opacity-80">
-                                    <Mail size={14} strokeWidth={ICON_STROKE} />
-                                    <span className="truncate">{email}</span>
+                                <a href={mailto} className="inline-flex items-start gap-2 min-h-[44px] hover:opacity-80">
+                                    <Mail size={15} strokeWidth={ICON_STROKE} className="flex-shrink-0 mt-0.5" />
+                                    <span className="portfolio-break-words">{email}</span>
                                 </a>
                             )}
                         </div>
                     )}
 
-                    <div className="flex flex-wrap items-center justify-center lg:justify-start gap-2 mb-5">
-                        <SocialButton href={safeHref(socialLinks?.github)} label="GitHub" icon={Github} />
-                        <SocialButton href={safeHref(socialLinks?.linkedin)} label="LinkedIn" icon={Linkedin} />
-                        <SocialButton href={safeHref(socialLinks?.twitter)} label="Twitter" icon={Twitter} />
-                        <SocialButton href={safeHref(socialLinks?.website)} label="Website" icon={Globe} />
+                    <div className="mt-3 flex items-center gap-2 overflow-x-auto hide-scrollbar pb-0.5">
+                        {socialButtons}
                     </div>
 
                     {resumeLink && (
@@ -103,7 +120,7 @@ function ProfileAside({
                             href={resumeLink}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="portfolio-btn-primary inline-flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-medium mb-5"
+                            className="portfolio-btn-primary inline-flex items-center justify-center gap-2 w-full px-4 py-3 rounded-xl text-sm font-medium mt-3 min-h-[44px]"
                         >
                             <Download size={16} strokeWidth={ICON_STROKE} />
                             Download Resume
@@ -111,30 +128,93 @@ function ProfileAside({
                     )}
                 </div>
 
-                <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>
-                    <ul className="space-y-1">
-                        {sections.map((section) => {
-                            const Icon = section.icon
-                            return (
-                                <li key={section.id}>
-                                    <button
-                                        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} />
-                                        {section.label}
-                                    </button>
-                                </li>
-                            )
-                        })}
-                    </ul>
-                </nav>
+                <div className="hidden lg:flex lg:flex-col lg:items-start lg:text-left">
+                    <div className="flex flex-col items-center text-center lg:items-start lg:text-left w-full">
+                        <ProfilePhoto
+                            basicDetails={basicDetails}
+                            username={username}
+                            className="w-24 h-24 sm:w-28 sm:h-28 mb-4"
+                        />
+
+                        <h1 className="text-2xl sm:text-3xl font-display font-bold leading-tight mb-2 portfolio-text">
+                            {basicDetails?.name || username}
+                        </h1>
+
+                        {basicDetails?.headline && (
+                            <p className="text-sm sm:text-base mb-3 portfolio-text-secondary">
+                                {basicDetails.headline}
+                            </p>
+                        )}
+
+                        {basicDetails?.location && (
+                            <div className="flex items-center gap-2 text-sm mb-4 portfolio-text-muted">
+                                <MapPin size={14} strokeWidth={ICON_STROKE} />
+                                <span>{basicDetails.location}</span>
+                            </div>
+                        )}
+
+                        {(basicDetails?.phone || mailto) && (
+                            <div className="flex flex-col gap-2 w-full mb-4 text-sm portfolio-text-secondary">
+                                {basicDetails?.phone && (
+                                    <div className="flex items-center justify-center lg:justify-start gap-2">
+                                        <Phone size={14} strokeWidth={ICON_STROKE} />
+                                        <span>{basicDetails.phone}</span>
+                                    </div>
+                                )}
+                                {mailto && (
+                                    <a href={mailto} className="flex items-center justify-center lg:justify-start gap-2 hover:opacity-80">
+                                        <Mail size={14} strokeWidth={ICON_STROKE} />
+                                        <span className="truncate">{email}</span>
+                                    </a>
+                                )}
+                            </div>
+                        )}
+
+                        <div className="flex flex-wrap items-center justify-center lg:justify-start gap-2 mb-5">
+                            <SocialButton href={safeHref(socialLinks?.github)} label="GitHub" icon={Github} />
+                            <SocialButton href={safeHref(socialLinks?.linkedin)} label="LinkedIn" icon={Linkedin} />
+                            <SocialButton href={safeHref(socialLinks?.twitter)} label="Twitter" icon={Twitter} />
+                            <SocialButton href={safeHref(socialLinks?.website)} label="Website" icon={Globe} />
+                        </div>
+
+                        {resumeLink && (
+                            <a
+                                href={resumeLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="portfolio-btn-primary inline-flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-medium mb-5"
+                            >
+                                <Download size={16} strokeWidth={ICON_STROKE} />
+                                Download Resume
+                            </a>
+                        )}
+                    </div>
+
+                    <nav className="portfolio-scroll border-t border-[var(--pf-border-subtle)] pt-4 lg:flex-1 lg:min-h-0 lg:overflow-y-auto w-full" aria-label="Section navigation">
+                        <p className="text-[10px] font-semibold uppercase tracking-[0.14em] mb-2 px-2 portfolio-text-muted">
+                            Sections
+                        </p>
+                        <ul className="space-y-1">
+                            {sections.map((section) => {
+                                const Icon = section.icon
+                                return (
+                                    <li key={section.id}>
+                                        <button
+                                            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.5 rounded-xl text-sm font-medium text-left"
+                                        >
+                                            <Icon size={15} strokeWidth={ICON_STROKE} />
+                                            {section.label}
+                                        </button>
+                                    </li>
+                                )
+                            })}
+                        </ul>
+                    </nav>
+                </div>
             </div>
         </aside>
     )
diff --git a/frontend/src/portfolio/components/SectionContent.jsx b/frontend/src/portfolio/components/SectionContent.jsx
index 7b76b1d..0ceabd6 100644
--- a/frontend/src/portfolio/components/SectionContent.jsx
+++ b/frontend/src/portfolio/components/SectionContent.jsx
@@ -38,7 +38,7 @@ function SectionTitle({ icon: Icon, children }) {
 
 function Surface({ children, className = '' }) {
     return (
-        <div className={`portfolio-surface rounded-2xl ${className}`}>
+        <div className={`portfolio-surface rounded-2xl overflow-visible ${className}`}>
             {children}
         </div>
     )
@@ -58,7 +58,7 @@ function ExperienceItem({ item, isLast }) {
             <TimelineCard>
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-3">
                     <div>
-                        <h3 className="text-base sm:text-lg font-semibold portfolio-text">
+                        <h3 className="text-base sm:text-lg font-semibold portfolio-text portfolio-break-words">
                             {item.title}
                         </h3>
                         <div className="flex items-center gap-2 mt-1 text-sm portfolio-text-secondary">
@@ -80,14 +80,14 @@ function ExperienceItem({ item, isLast }) {
                     </div>
                 )}
                 {item.description && (
-                    <p className="text-sm leading-relaxed portfolio-text-secondary">
+                    <p className="text-sm sm:text-sm leading-relaxed portfolio-text-secondary portfolio-mobile-content-copy">
                         {item.description}
                     </p>
                 )}
                 {item.achievements?.length > 0 && (
                     <ul className="mt-3 space-y-2">
                         {item.achievements.map((achievement, index) => (
-                            <li key={index} className="flex items-start gap-2 text-sm portfolio-text-secondary">
+                            <li key={index} className="flex items-start gap-2 text-sm portfolio-text-secondary portfolio-mobile-content-copy">
                                 <ChevronRight size={14} strokeWidth={ICON_STROKE} className="portfolio-link mt-0.5 flex-shrink-0" />
                                 {achievement}
                             </li>
@@ -109,7 +109,7 @@ function EducationItem({ item, isLast }) {
             <TimelineCard>
                 <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-3">
                     <div>
-                        <h3 className="text-base sm:text-lg font-semibold portfolio-text">
+                        <h3 className="text-base sm:text-lg font-semibold portfolio-text portfolio-break-words">
                             {item.degree}
                         </h3>
                         <div className="flex items-center gap-2 mt-1 text-sm portfolio-text-secondary">
@@ -137,7 +137,7 @@ function EducationItem({ item, isLast }) {
                     </div>
                 )}
                 {item.description && (
-                    <p className="text-sm leading-relaxed portfolio-text-secondary">
+                    <p className="text-sm leading-relaxed portfolio-text-secondary portfolio-mobile-content-copy">
                         {item.description}
                     </p>
                 )}
@@ -157,7 +157,7 @@ function EducationItem({ item, isLast }) {
 
 function ProjectCard({ project }) {
     return (
-        <Surface className="p-5 sm:p-6 flex flex-col">
+        <Surface className="p-5 sm:p-6 flex flex-col min-w-0 w-full">
             <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} />
@@ -169,7 +169,7 @@ function ProjectCard({ project }) {
                             target="_blank"
                             rel="noopener noreferrer"
                             aria-label="View project on GitHub"
-                            className="portfolio-chip p-2 rounded-lg"
+                            className="portfolio-chip portfolio-touch-target inline-flex items-center justify-center p-2.5 rounded-lg"
                         >
                             <Github size={18} strokeWidth={ICON_STROKE} />
                         </a>
@@ -180,23 +180,23 @@ function ProjectCard({ project }) {
                             target="_blank"
                             rel="noopener noreferrer"
                             aria-label="View live demo"
-                            className="portfolio-chip p-2 rounded-lg"
+                            className="portfolio-chip portfolio-touch-target inline-flex items-center justify-center p-2.5 rounded-lg"
                         >
                             <ExternalLink size={18} strokeWidth={ICON_STROKE} />
                         </a>
                     )}
                 </div>
             </div>
-            <h3 className="text-base sm:text-lg font-semibold mb-2 portfolio-text">
+            <h3 className="text-base sm:text-lg font-semibold mb-2 portfolio-text portfolio-break-words">
                 {project.title}
             </h3>
             {project.description && (
-                <p className="text-sm leading-relaxed mb-4 flex-1 portfolio-text-secondary">
+                <p className="text-sm leading-relaxed mb-4 flex-1 portfolio-text-secondary portfolio-mobile-content-copy portfolio-break-words">
                     {project.description}
                 </p>
             )}
             {project.techStack?.length > 0 && (
-                <div className="flex flex-wrap gap-2 mt-auto">
+                <div className="flex flex-wrap gap-2 mt-auto w-full min-w-0">
                     {project.techStack.map((tech, index) => (
                         <span key={index} className="portfolio-tag px-2.5 py-1 rounded-md text-xs font-medium">
                             {tech}
@@ -211,7 +211,7 @@ function ProjectCard({ project }) {
 function ListCard({ title, subtitle, description, date, url, urlLabel = 'View' }) {
     return (
         <Surface className="p-5 h-full">
-            <h3 className="font-semibold mb-1 portfolio-text">{title}</h3>
+            <h3 className="font-semibold mb-1 portfolio-text portfolio-break-words">{title}</h3>
             {subtitle && (
                 <p className="text-sm mb-2 font-medium portfolio-text-secondary">{subtitle}</p>
             )}
@@ -222,7 +222,7 @@ function ListCard({ title, subtitle, description, date, url, urlLabel = 'View' }
                 </div>
             )}
             {description && (
-                <p className="text-sm leading-relaxed portfolio-text-secondary">
+                <p className="text-sm leading-relaxed portfolio-text-secondary portfolio-mobile-content-copy">
                     {description}
                 </p>
             )}
@@ -231,7 +231,7 @@ function ListCard({ title, subtitle, description, date, url, urlLabel = 'View' }
                     href={safeHref(url)}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="portfolio-link inline-flex items-center gap-1 mt-3 text-sm font-medium"
+                    className="portfolio-link inline-flex items-center gap-1 mt-3 text-sm font-medium min-h-[44px]"
                 >
                     {urlLabel} <ExternalLink size={14} strokeWidth={ICON_STROKE} />
                 </a>
@@ -248,7 +248,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">
+                        <p className="leading-relaxed whitespace-pre-wrap text-base portfolio-text-secondary portfolio-mobile-content-copy">
                             {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-3 sm:gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 w-full min-w-0">
                         {section.items.map((project, index) => (
                             <ProjectCard key={index} project={project} />
                         ))}
@@ -431,7 +431,7 @@ function SectionContent({ section, basicDetails }) {
                 <>
                     <SectionTitle icon={section.icon}>{section.label}</SectionTitle>
                     <Surface className="p-5 sm:p-6">
-                        <p className="leading-relaxed whitespace-pre-wrap text-sm sm:text-base portfolio-text-secondary">
+                        <p className="leading-relaxed whitespace-pre-wrap text-base portfolio-text-secondary portfolio-mobile-content-copy">
                             {section.content}
                         </p>
                     </Surface>
diff --git a/frontend/src/portfolio/components/SectionNav.jsx b/frontend/src/portfolio/components/SectionNav.jsx
index 872f4b3..b2f15ff 100644
--- a/frontend/src/portfolio/components/SectionNav.jsx
+++ b/frontend/src/portfolio/components/SectionNav.jsx
@@ -3,26 +3,28 @@ function SectionNav({ sections, activeSection, onNavigate }) {
 
     return (
         <nav
-            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"
+            className="portfolio-no-print portfolio-surface lg:hidden flex-shrink-0 py-2 px-2.5 sm: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">
-                {sections.map((section) => {
-                    const Icon = section.icon
-                    return (
-                        <button
-                            key={section.id}
-                            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} />
-                            {section.label}
-                        </button>
-                    )
-                })}
+            <div className="portfolio-section-nav-fade">
+                <div className="flex gap-2 overflow-x-auto hide-scrollbar portfolio-section-nav-scroll py-0.5">
+                    {sections.map((section) => {
+                        const Icon = section.icon
+                        return (
+                            <button
+                                key={section.id}
+                                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.5 py-2.5 rounded-xl text-sm font-medium whitespace-nowrap flex-shrink-0"
+                            >
+                                <Icon size={15} />
+                                {section.label}
+                            </button>
+                        )
+                    })}
+                </div>
             </div>
         </nav>
     )
diff --git a/frontend/src/portfolio/components/TopBar.jsx b/frontend/src/portfolio/components/TopBar.jsx
index f344813..273823f 100644
--- a/frontend/src/portfolio/components/TopBar.jsx
+++ b/frontend/src/portfolio/components/TopBar.jsx
@@ -6,7 +6,7 @@ import { BRAND_NAME_DISPLAY } from '../../constants/brand'
 
 function TopBar({ theme, onToggleTheme }) {
     return (
-        <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="portfolio-no-print portfolio-surface portfolio-topbar sticky top-0 lg:static 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">
                 <Link
                     to="/"
@@ -22,7 +22,7 @@ function TopBar({ theme, onToggleTheme }) {
                 <button
                     type="button"
                     onClick={onToggleTheme}
-                    className="portfolio-chip inline-flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium transition-colors"
+                    className="portfolio-chip portfolio-touch-target inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl text-sm font-medium transition-colors"
                     aria-label="Toggle color mode"
                 >
                     {theme === 'dark' ? (
diff --git a/frontend/src/portfolio/portfolio.css b/frontend/src/portfolio/portfolio.css
index 8e5b76e..1976d3d 100644
--- a/frontend/src/portfolio/portfolio.css
+++ b/frontend/src/portfolio/portfolio.css
@@ -3,8 +3,11 @@
   -webkit-font-smoothing: antialiased;
   color: var(--pf-text);
   background: var(--pf-bg);
-  height: 100dvh;
-  overflow: hidden;
+  min-height: 100dvh;
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 .portfolio-section-panel {
@@ -71,10 +74,6 @@
   background: linear-gradient(to top, var(--pf-bg) 0%, transparent 100%);
 }
 
-.portfolio-aside-scroll {
-  overscroll-behavior: contain;
-}
-
 .portfolio-section-content {
   padding-bottom: 0.25rem;
 }
@@ -106,6 +105,7 @@
   color: var(--pf-text-secondary);
   border: 1px solid transparent;
   transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+  min-height: 44px;
 }
 
 .portfolio-nav-link:hover {
@@ -134,6 +134,7 @@
   background: var(--pf-surface-raised);
   border: 1px solid var(--pf-border-subtle);
   color: var(--pf-text-secondary);
+  word-break: break-word;
 }
 
 .portfolio-icon-tile {
@@ -186,6 +187,126 @@
   -webkit-text-fill-color: transparent;
 }
 
+.portfolio-topbar {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+.portfolio-touch-target {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.portfolio-mobile-sticky-nav {
+  position: sticky;
+  top: calc(3.5rem + env(safe-area-inset-top, 0px));
+  z-index: 40;
+}
+
+.portfolio-section-nav-scroll {
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.portfolio-section-nav-scroll > * {
+  scroll-snap-align: start;
+}
+
+.portfolio-section-nav-fade {
+  position: relative;
+}
+
+.portfolio-section-nav-fade::before,
+.portfolio-section-nav-fade::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1.25rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.portfolio-section-nav-fade::before {
+  left: 0;
+  background: linear-gradient(to right, var(--pf-surface) 0%, transparent 100%);
+}
+
+.portfolio-section-nav-fade::after {
+  right: 0;
+  background: linear-gradient(to left, var(--pf-surface) 0%, transparent 100%);
+}
+
+.portfolio-break-words {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+@media (max-width: 1023px) {
+  .portfolio-root {
+    display: block;
+    height: auto;
+    min-height: 100dvh;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+
+  .portfolio-mobile-body,
+  .portfolio-mobile-main,
+  .portfolio-mobile-grid,
+  .portfolio-mobile-scroll-area,
+  .portfolio-scroll-area {
+    display: block !important;
+    height: auto !important;
+    max-height: none !important;
+    min-height: 0 !important;
+    flex: none !important;
+    overflow: visible !important;
+  }
+
+  .portfolio-mobile-scroll-panel {
+    display: block !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    overscroll-behavior: auto;
+  }
+
+  .portfolio-mobile-scroll-fade {
+    display: none !important;
+  }
+
+  .portfolio-section-content {
+    padding-bottom: 1.5rem;
+    overflow: visible;
+  }
+
+  .portfolio-mobile-content-copy {
+    font-size: 0.9375rem;
+    line-height: 1.65;
+  }
+
+  .portfolio-mobile-content-meta {
+    font-size: 0.8125rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .portfolio-root {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    overflow: hidden;
+  }
+
+  .portfolio-desktop-shell {
+    overflow: hidden;
+  }
+
+  .portfolio-desktop-main {
+    overflow: hidden;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .portfolio-root *,
   .portfolio-root *::before,
diff --git a/frontend/src/utils/analyticsChart.js b/frontend/src/utils/analyticsChart.js
new file mode 100644
index 0000000..5095cf8
--- /dev/null
+++ b/frontend/src/utils/analyticsChart.js
@@ -0,0 +1,90 @@
+export const CHART_HEIGHT_PX = 192
+
+const UTC_LABEL_OPTIONS = { timeZone: 'UTC' }
+
+export function normalizeDateKey(date) {
+    const normalized = new Date(date)
+    return Date.UTC(
+        normalized.getUTCFullYear(),
+        normalized.getUTCMonth(),
+        normalized.getUTCDate(),
+    )
+}
+
+export function getUtcDayStart(date = new Date()) {
+    return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
+}
+
+export function buildChartSeries(dailyStats, period) {
+    const dayCount = period === 'week' ? 7 : 30
+    const viewsByDate = new Map(
+        (dailyStats || []).map((stat) => [normalizeDateKey(stat.date), stat.views || 0])
+    )
+
+    const todayUtc = getUtcDayStart()
+
+    const series = []
+    for (let offset = dayCount - 1; offset >= 0; offset -= 1) {
+        const dayKey = todayUtc - offset * 86400000
+        series.push({
+            date: new Date(dayKey),
+            views: viewsByDate.get(dayKey) || 0,
+        })
+    }
+
+    return series
+}
+
+export function getMonthLabelIndices(total) {
+    if (total <= 1) {
+        return new Set([0])
+    }
+
+    const step = Math.max(Math.floor(total / 6), 1)
+    const indices = new Set([0, total - 1])
+
+    for (let index = step; index < total - 1; index += step) {
+        indices.add(index)
+    }
+
+    return indices
+}
+
+export function formatChartLabel(date, period, index, total) {
+    if (period === 'week') {
+        return date.toLocaleDateString('en-US', { weekday: 'short', ...UTC_LABEL_OPTIONS })
+    }
+
+    if (!getMonthLabelIndices(total).has(index)) {
+        return ''
+    }
+
+    return date.toLocaleDateString('en-US', {
+        month: 'numeric',
+        day: 'numeric',
+        ...UTC_LABEL_OPTIONS,
+    })
+}
+
+export function formatChartTooltip(date, views) {
+    const label = date.toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        ...UTC_LABEL_OPTIONS,
+    })
+
+    return `${label}: ${views} view${views === 1 ? '' : 's'}`
+}
+
+export function getChartBarHeight(views, maxViews, period) {
+    if (views > 0) {
+        return Math.max((views / maxViews) * CHART_HEIGHT_PX, 6)
+    }
+
+    return period === 'month' ? 2 : 0
+}
+
+export function getChartGapClass(period) {
+    return period === 'month' ? 'gap-px' : 'gap-1.5 sm:gap-2'
+}
\ No newline at end of file
diff --git a/frontend/src/utils/analyticsChart.test.js b/frontend/src/utils/analyticsChart.test.js
new file mode 100644
index 0000000..c66a1b1
--- /dev/null
+++ b/frontend/src/utils/analyticsChart.test.js
@@ -0,0 +1,103 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+    buildChartSeries,
+    formatChartLabel,
+    getChartBarHeight,
+    getMonthLabelIndices,
+    getUtcDayStart,
+    normalizeDateKey,
+} from './analyticsChart'
+
+describe('normalizeDateKey', () => {
+    it('normalizes dates to UTC midnight', () => {
+        const key = normalizeDateKey('2026-06-06T10:00:00.000Z')
+
+        expect(key).toBe(Date.UTC(2026, 5, 6))
+    })
+})
+
+describe('buildChartSeries', () => {
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    it('builds 7-day and 30-day series with UTC dates', () => {
+        vi.useFakeTimers()
+        vi.setSystemTime(new Date('2026-06-06T12:00:00Z'))
+
+        const dailyStats = [
+            { date: '2026-06-06T00:00:00.000Z', views: 6 },
+            { date: '2026-06-04T00:00:00.000Z', views: 2 },
+        ]
+
+        const week = buildChartSeries(dailyStats, 'week')
+        const month = buildChartSeries(dailyStats, 'month')
+
+        expect(week).toHaveLength(7)
+        expect(month).toHaveLength(30)
+        expect(week[week.length - 1].views).toBe(6)
+        expect(week[week.length - 3].views).toBe(2)
+        expect(month[month.length - 1].views).toBe(6)
+        expect(month[month.length - 3].views).toBe(2)
+    })
+
+    it('fills missing days with zero views', () => {
+        vi.useFakeTimers()
+        vi.setSystemTime(new Date('2026-06-06T12:00:00Z'))
+
+        const month = buildChartSeries([], 'month')
+
+        expect(month).toHaveLength(30)
+        expect(month.every((entry) => entry.views === 0)).toBe(true)
+    })
+})
+
+describe('formatChartLabel', () => {
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    it('shows weekday labels for week view in UTC', () => {
+        vi.useFakeTimers()
+        vi.setSystemTime(new Date('2026-06-06T12:00:00Z'))
+
+        const week = buildChartSeries([], 'week')
+        expect(formatChartLabel(week[0].date, 'week', 0, week.length)).toMatch(/^[A-Z][a-z]{2}$/)
+    })
+
+    it('shows spaced numeric labels for month view in UTC', () => {
+        vi.useFakeTimers()
+        vi.setSystemTime(new Date('2026-06-06T12:00:00Z'))
+
+        const month = buildChartSeries([], 'month')
+        const labels = month.map((entry, index) =>
+            formatChartLabel(entry.date, 'month', index, month.length)
+        )
+
+        expect(labels[0]).toBe('5/8')
+        expect(labels[4]).toBe('')
+        expect(labels[29]).toBe('6/6')
+        expect(labels.filter(Boolean).length).toBeGreaterThanOrEqual(5)
+        expect(labels.filter(Boolean).length).toBeLessThanOrEqual(7)
+    })
+})
+
+describe('getUtcDayStart', () => {
+    it('returns the UTC day key for a given date', () => {
+        expect(getUtcDayStart(new Date('2026-06-06T23:30:00Z'))).toBe(Date.UTC(2026, 5, 6))
+    })
+})
+
+describe('getChartBarHeight', () => {
+    it('uses a subtle baseline for empty month bars', () => {
+        expect(getChartBarHeight(0, 10, 'month')).toBe(2)
+        expect(getChartBarHeight(0, 10, 'week')).toBe(0)
+        expect(getChartBarHeight(6, 6, 'month')).toBe(192)
+    })
+})
+
+describe('getMonthLabelIndices', () => {
+    it('returns evenly spaced indices for 30 days', () => {
+        expect(getMonthLabelIndices(30)).toEqual(new Set([0, 5, 10, 15, 20, 25, 29]))
+    })
+})
\ No newline at end of file
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index 8aeb2ba..742e261 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -2,8 +2,28 @@ import axios from 'axios'
 
 let apiUrlWarningShown = false
 
-const rawApiUrl = import.meta.env.VITE_API_URL || 'http://localhost:5000'
-const API_URL = rawApiUrl.replace(/\/api\/?$/, '')
+function resolveApiUrl() {
+    const rawApiUrl = import.meta.env.VITE_API_URL
+    const configured = rawApiUrl ? rawApiUrl.replace(/\/api\/?$/, '') : null
+
+    if (import.meta.env.DEV && typeof window !== 'undefined') {
+        const { hostname } = window.location
+        const isLoopback = hostname === 'localhost' || hostname === '127.0.0.1'
+
+        // LAN / network IP: always proxy through Vite (same origin) to avoid CORS.
+        if (!isLoopback) {
+            return window.location.origin
+        }
+
+        // localhost: prefer Vite proxy unless a direct API URL is configured.
+        return configured || window.location.origin
+    }
+
+    return configured || 'http://localhost:5000'
+}
+
+const rawApiUrl = import.meta.env.VITE_API_URL || ''
+const API_URL = resolveApiUrl()
 
 if (import.meta.env.DEV && rawApiUrl.match(/\/api\/?$/) && !apiUrlWarningShown) {
     console.warn(
diff --git a/frontend/src/utils/profileSetup.js b/frontend/src/utils/profileSetup.js
new file mode 100644
index 0000000..2820e22
--- /dev/null
+++ b/frontend/src/utils/profileSetup.js
@@ -0,0 +1,106 @@
+const PARSED_RESUME_STORAGE_KEY = 'parsedResumeData'
+
+export function hasPendingResumeData() {
+    try {
+        const stored = sessionStorage.getItem(PARSED_RESUME_STORAGE_KEY)
+        if (!stored) return false
+        const parsed = JSON.parse(stored)
+        return Boolean(parsed?.resumeUrl?.trim())
+    } catch {
+        return false
+    }
+}
+
+export function hasCompletedProfileSetup(profile) {
+    if (!profile) return false
+    const hasName = Boolean(profile.basicDetails?.name?.trim())
+    const hasResume = Boolean(profile.resumeUrl?.trim())
+    return hasName && hasResume
+}
+
+export function getAllowedPathsWithoutSetup(hasPendingResume = hasPendingResumeData()) {
+    return hasPendingResume ? ['/upload', '/editor'] : ['/upload']
+}
+
+export function isDashboardPathAllowed(pathname, profile, hasPendingResume = hasPendingResumeData()) {
+    if (hasCompletedProfileSetup(profile)) return true
+    return getAllowedPathsWithoutSetup(hasPendingResume).includes(pathname)
+}
+
+export function isNavItemEnabled(itemPath, profile, hasPendingResume = hasPendingResumeData()) {
+    if (hasCompletedProfileSetup(profile)) return true
+    if (itemPath === '/upload') return true
+    if (itemPath === '/editor' && hasPendingResume) return true
+    return false
+}
+
+export function isMissingProfileError(error) {
+    return error?.response?.data?.needsSetup === true
+}
+
+function normalizeLoadErrors(loadErrors) {
+    if (!loadErrors) {
+        return { user: null, profile: null }
+    }
+
+    if (loadErrors?.response || loadErrors?.message) {
+        return { user: null, profile: loadErrors }
+    }
+
+    return {
+        user: loadErrors.user ?? null,
+        profile: loadErrors.profile ?? null,
+    }
+}
+
+function hasNeedsRegistrationError(...errors) {
+    return errors.some((error) => error?.response?.data?.needsRegistration)
+}
+
+export function resolveResumeRouteGuard(pathname, profile, loadErrors = null, hasPendingResume = hasPendingResumeData()) {
+    const { user: userLoadError, profile: profileLoadError } = normalizeLoadErrors(loadErrors)
+
+    if (hasNeedsRegistrationError(userLoadError, profileLoadError)) {
+        return { type: 'redirect', to: '/username' }
+    }
+
+    if (userLoadError && !profile?.username) {
+        if (!profile) {
+            if (isDashboardPathAllowed(pathname, profile, hasPendingResume)) {
+                return { type: 'allow' }
+            }
+            return { type: 'error' }
+        }
+
+        if (!isDashboardPathAllowed(pathname, profile, hasPendingResume)) {
+            return { type: 'redirect', to: '/upload' }
+        }
+
+        return { type: 'allow' }
+    }
+
+    if (profileLoadError) {
+        if (hasCompletedProfileSetup(profile)) {
+            return { type: 'allow' }
+        }
+
+        if (!profile) {
+            if (isDashboardPathAllowed(pathname, profile, hasPendingResume)) {
+                return { type: 'allow' }
+            }
+            return { type: 'error' }
+        }
+
+        if (!isDashboardPathAllowed(pathname, profile, hasPendingResume)) {
+            return { type: 'redirect', to: '/upload' }
+        }
+
+        return { type: 'allow' }
+    }
+
+    if (!isDashboardPathAllowed(pathname, profile, hasPendingResume)) {
+        return { type: 'redirect', to: '/upload' }
+    }
+
+    return { type: 'allow' }
+}
diff --git a/frontend/src/utils/profileSetup.test.js b/frontend/src/utils/profileSetup.test.js
new file mode 100644
index 0000000..7533c73
--- /dev/null
+++ b/frontend/src/utils/profileSetup.test.js
@@ -0,0 +1,163 @@
+import { describe, expect, it, beforeEach } from 'vitest'
+import {
+    getAllowedPathsWithoutSetup,
+    hasCompletedProfileSetup,
+    hasPendingResumeData,
+    isDashboardPathAllowed,
+    isMissingProfileError,
+    isNavItemEnabled,
+    resolveResumeRouteGuard,
+} from './profileSetup'
+
+describe('profileSetup', () => {
+    beforeEach(() => {
+        sessionStorage.clear()
+    })
+
+    it('detects pending resume data in session storage', () => {
+        expect(hasPendingResumeData()).toBe(false)
+
+        sessionStorage.setItem('parsedResumeData', JSON.stringify({ resumeUrl: 'https://res.cloudinary.com/test/resume.pdf' }))
+        expect(hasPendingResumeData()).toBe(true)
+    })
+
+    it('requires both name and resume URL for completed setup', () => {
+        expect(hasCompletedProfileSetup(null)).toBe(false)
+        expect(hasCompletedProfileSetup({ basicDetails: { name: 'Ada' } })).toBe(false)
+        expect(hasCompletedProfileSetup({ resumeUrl: 'https://res.cloudinary.com/test/resume.pdf' })).toBe(false)
+        expect(hasCompletedProfileSetup({
+            basicDetails: { name: 'Ada Lovelace' },
+            resumeUrl: 'https://res.cloudinary.com/test/resume.pdf',
+        })).toBe(true)
+    })
+
+    it('limits routes until setup is complete', () => {
+        const incompleteProfile = { basicDetails: { name: '' }, resumeUrl: '' }
+
+        expect(getAllowedPathsWithoutSetup(false)).toEqual(['/upload'])
+        expect(getAllowedPathsWithoutSetup(true)).toEqual(['/upload', '/editor'])
+        expect(isDashboardPathAllowed('/dashboard', incompleteProfile)).toBe(false)
+        expect(isDashboardPathAllowed('/upload', incompleteProfile)).toBe(true)
+        expect(isDashboardPathAllowed('/editor', incompleteProfile, true)).toBe(true)
+    })
+
+    it('enables nav items based on setup progress', () => {
+        const incompleteProfile = { basicDetails: { name: '' }, resumeUrl: '' }
+        const completeProfile = {
+            basicDetails: { name: 'Ada Lovelace' },
+            resumeUrl: 'https://res.cloudinary.com/test/resume.pdf',
+        }
+
+        expect(isNavItemEnabled('/dashboard', incompleteProfile)).toBe(false)
+        expect(isNavItemEnabled('/upload', incompleteProfile)).toBe(true)
+        expect(isNavItemEnabled('/editor', incompleteProfile, true)).toBe(true)
+        expect(isNavItemEnabled('/analytics', completeProfile)).toBe(true)
+    })
+
+    it('identifies missing profile API errors', () => {
+        expect(isMissingProfileError({ response: { status: 404, data: { needsSetup: true } } })).toBe(true)
+        expect(isMissingProfileError({ response: { status: 404, data: { needsRegistration: true } } })).toBe(false)
+        expect(isMissingProfileError({ response: { status: 404, data: { error: 'Profile not found' } } })).toBe(false)
+        expect(isMissingProfileError({ response: { status: 500, data: { error: 'Server error' } } })).toBe(false)
+        expect(isMissingProfileError(null)).toBe(false)
+    })
+
+    it('redirects incomplete users away from locked dashboard routes', () => {
+        const incompleteProfile = { basicDetails: { name: '' }, resumeUrl: '' }
+
+        expect(resolveResumeRouteGuard('/premium', incompleteProfile, null)).toEqual({
+            type: 'redirect',
+            to: '/upload',
+        })
+        expect(resolveResumeRouteGuard('/upload', incompleteProfile, null)).toEqual({
+            type: 'allow',
+        })
+        expect(resolveResumeRouteGuard('/editor', incompleteProfile, null, true)).toEqual({
+            type: 'allow',
+        })
+    })
+
+    it('allows completed users during transient profile load errors', () => {
+        const completeProfile = {
+            basicDetails: { name: 'Ada Lovelace' },
+            resumeUrl: 'https://res.cloudinary.com/test/resume.pdf',
+        }
+        const loadError = { response: { status: 500, data: { error: 'Server error' } } }
+
+        expect(resolveResumeRouteGuard('/dashboard', completeProfile, loadError)).toEqual({
+            type: 'allow',
+        })
+    })
+
+    it('still gates incomplete profiles when profile data is available alongside other errors', () => {
+        const incompleteProfile = { basicDetails: { name: '' }, resumeUrl: '' }
+        const loadError = { response: { status: 500, data: { error: 'Server error' } } }
+
+        expect(resolveResumeRouteGuard('/settings', incompleteProfile, loadError)).toEqual({
+            type: 'redirect',
+            to: '/upload',
+        })
+    })
+
+    it('redirects unregistered users to username selection', () => {
+        expect(resolveResumeRouteGuard('/dashboard', null, {
+            response: { data: { needsRegistration: true } },
+        })).toEqual({
+            type: 'redirect',
+            to: '/username',
+        })
+    })
+
+    it('shows an error on locked routes when profile is null and a load error occurred', () => {
+        const loadError = { response: { status: 500, data: { error: 'Server error' } } }
+
+        expect(resolveResumeRouteGuard('/dashboard', null, loadError)).toEqual({
+            type: 'error',
+        })
+        expect(resolveResumeRouteGuard('/upload', null, loadError)).toEqual({
+            type: 'allow',
+        })
+        expect(resolveResumeRouteGuard('/editor', null, loadError, true)).toEqual({
+            type: 'allow',
+        })
+    })
+
+    it('blocks locked routes when user fetch fails without a profile username fallback', () => {
+        const userLoadError = { response: { status: 500, data: { error: 'Server error' } } }
+
+        expect(resolveResumeRouteGuard('/dashboard', null, { user: userLoadError })).toEqual({
+            type: 'error',
+        })
+        expect(resolveResumeRouteGuard('/upload', null, { user: userLoadError })).toEqual({
+            type: 'allow',
+        })
+    })
+
+    it('allows completed users when only the user fetch fails but profile has a username', () => {
+        const completeProfile = {
+            username: 'ada',
+            basicDetails: { name: 'Ada Lovelace' },
+            resumeUrl: 'https://res.cloudinary.com/test/resume.pdf',
+        }
+        const userLoadError = { response: { status: 500, data: { error: 'Server error' } } }
+
+        expect(resolveResumeRouteGuard('/analytics', completeProfile, { user: userLoadError })).toEqual({
+            type: 'allow',
+        })
+    })
+
+    it('redirects unregistered users from either user or profile fetch errors', () => {
+        expect(resolveResumeRouteGuard('/dashboard', null, {
+            user: { response: { data: { needsRegistration: true } } },
+        })).toEqual({
+            type: 'redirect',
+            to: '/username',
+        })
+        expect(resolveResumeRouteGuard('/dashboard', null, {
+            profile: { response: { data: { needsRegistration: true } } },
+        })).toEqual({
+            type: 'redirect',
+            to: '/username',
+        })
+    })
+})
diff --git a/frontend/src/utils/referrer.js b/frontend/src/utils/referrer.js
new file mode 100644
index 0000000..897be3a
--- /dev/null
+++ b/frontend/src/utils/referrer.js
@@ -0,0 +1,73 @@
+import {
+    Bot,
+    Globe,
+    Link2,
+    Mail,
+    Megaphone,
+    Search,
+    Share2,
+} from 'lucide-react'
+
+const REFERRER_ICONS = {
+    direct: Link2,
+    ai: Bot,
+    social: Share2,
+    search: Search,
+    email: Mail,
+    campaign: Megaphone,
+    website: Globe,
+    other: Globe,
+}
+
+export function getReferrerIcon(category) {
+    return REFERRER_ICONS[category] || REFERRER_ICONS.other
+}
+
+export function getReferrerCategoryLabel(category) {
+    const labels = {
+        direct: 'Direct traffic',
+        ai: 'AI assistant',
+        social: 'Social network',
+        search: 'Search engine',
+        email: 'Email client',
+        campaign: 'Campaign link',
+        website: 'Website',
+        other: 'Other source',
+    };
+
+    return labels[category] || labels.other
+}
+
+function isSameOriginReferrer(referrer) {
+    if (!referrer || typeof window === 'undefined') {
+        return false;
+    }
+
+    try {
+        return new URL(referrer).origin === window.location.origin;
+    } catch {
+        return false;
+    }
+}
+
+export function getTrackingReferrer() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const utmSource = params.get('utm_source')?.trim();
+    const utmMedium = params.get('utm_medium')?.trim();
+    const utmCampaign = params.get('utm_campaign')?.trim();
+
+    if (utmSource) {
+        return ['utm', utmSource, utmMedium || '', utmCampaign || ''].join(':');
+    }
+
+    const referrer = document.referrer || '';
+    if (isSameOriginReferrer(referrer)) {
+        return '';
+    }
+
+    return referrer;
+}
diff --git a/frontend/src/utils/referrer.test.js b/frontend/src/utils/referrer.test.js
new file mode 100644
index 0000000..1b6bb0e
--- /dev/null
+++ b/frontend/src/utils/referrer.test.js
@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+    getReferrerCategoryLabel,
+    getReferrerIcon,
+    getTrackingReferrer,
+} from './referrer'
+import {
+    Bot,
+    Globe,
+    Link2,
+    Megaphone,
+    Search,
+    Share2,
+} from 'lucide-react'
+
+function mockBrowser({ href = 'https://portlify.app/ashish', referrer = '', search = '' } = {}) {
+    vi.stubGlobal('window', {
+        location: {
+            origin: new URL(href).origin,
+            href,
+            search,
+        },
+    })
+    vi.stubGlobal('document', { referrer })
+}
+
+describe('getTrackingReferrer', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('returns empty string outside the browser', () => {
+        vi.stubGlobal('window', undefined)
+        expect(getTrackingReferrer()).toBe('')
+    })
+
+    it('prioritizes utm params over document.referrer', () => {
+        mockBrowser({
+            referrer: 'https://linkedin.com/feed',
+            search: '?utm_source=twitter&utm_medium=post&utm_campaign=spring',
+        })
+
+        expect(getTrackingReferrer()).toBe('utm:twitter:post:spring')
+    })
+
+    it('preserves campaign when medium is missing', () => {
+        mockBrowser({
+            search: '?utm_source=partner&utm_campaign=spring-drive',
+        })
+
+        expect(getTrackingReferrer()).toBe('utm:partner::spring-drive')
+    })
+
+    it('returns external document.referrer when no utm params exist', () => {
+        mockBrowser({
+            referrer: 'https://chatgpt.com/share/abc',
+        })
+
+        expect(getTrackingReferrer()).toBe('https://chatgpt.com/share/abc')
+    })
+
+    it('treats same-origin navigation as direct traffic', () => {
+        mockBrowser({
+            href: 'https://portlify.app/ashish',
+            referrer: 'https://portlify.app/dashboard',
+        })
+
+        expect(getTrackingReferrer()).toBe('')
+    })
+})
+
+describe('referrer display helpers', () => {
+    it('maps categories to icons', () => {
+        expect(getReferrerIcon('ai')).toBe(Bot)
+        expect(getReferrerIcon('social')).toBe(Share2)
+        expect(getReferrerIcon('search')).toBe(Search)
+        expect(getReferrerIcon('direct')).toBe(Link2)
+        expect(getReferrerIcon('campaign')).toBe(Megaphone)
+        expect(getReferrerIcon('unknown')).toBe(Globe)
+    })
+
+    it('maps categories to readable labels', () => {
+        expect(getReferrerCategoryLabel('ai')).toBe('AI assistant')
+        expect(getReferrerCategoryLabel('social')).toBe('Social network')
+        expect(getReferrerCategoryLabel('direct')).toBe('Direct traffic')
+        expect(getReferrerCategoryLabel('unknown')).toBe('Other source')
+    })
+})
diff --git a/frontend/src/utils/seo.js b/frontend/src/utils/seo.js
index e5100f4..5e06e4f 100644
--- a/frontend/src/utils/seo.js
+++ b/frontend/src/utils/seo.js
@@ -12,6 +12,8 @@ import {
     DEFAULT_OG_IMAGE,
     DEFAULT_SITE_URL,
     DEFAULT_TITLE,
+    OG_IMAGE_PATH,
+    OG_IMAGE_VERSION,
 } from '../constants/brand'
 import { getAppUrl, getPortfolioUrl } from './appUrl'
 import { safeHref } from './safeUrl'
@@ -38,6 +40,11 @@ function getAbsoluteAsset(path) {
     return path.startsWith('http') ? path : `${base}${path.startsWith('/') ? path : `/${path}`}`
 }
 
+function getDefaultOgImage() {
+    const base = getSiteUrl().replace(/\/$/, '')
+    return `${base}${OG_IMAGE_PATH}?v=${OG_IMAGE_VERSION}`
+}
+
 function upsertMeta(selector, attributes) {
     let element = document.querySelector(selector)
     if (!element) {
@@ -93,7 +100,7 @@ export function applySiteSeo(overrides = {}) {
     const meta = {
         ...DEFAULT_META,
         canonical: `${siteUrl}/`,
-        ogImage: getAbsoluteAsset('/og-image.png'),
+        ogImage: getDefaultOgImage(),
         ...overrides,
     }
 
@@ -140,7 +147,7 @@ export function buildPortfolioSeo(profile, username) {
     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 ogImage = profilePhoto || getDefaultOgImage()
 
     const description = aboutSnippet
         ? `${name} — ${aboutSnippet}${aboutSnippet.length >= 155 ? '…' : ''} View ${name}'s portfolio on ${BRAND_NAME_DISPLAY}.`
@@ -277,7 +284,7 @@ export function getSiteStructuredData(siteUrl = DEFAULT_SITE_URL) {
                     'Custom Branding',
                     'Portfolio Export',
                 ],
-                screenshot: `${base}/og-image.png`,
+                screenshot: `${base}${OG_IMAGE_PATH}?v=${OG_IMAGE_VERSION}`,
                 author: {
                     '@type': 'Person',
                     name: BRAND_AUTHOR,
diff --git a/frontend/src/utils/sharePosts.js b/frontend/src/utils/sharePosts.js
new file mode 100644
index 0000000..204889d
--- /dev/null
+++ b/frontend/src/utils/sharePosts.js
@@ -0,0 +1,321 @@
+import { getPortfolioUrl } from './appUrl'
+
+const TWITTER_CHAR_LIMIT = 280
+const LINKEDIN_PREFILL_CHAR_LIMIT = 280
+const LINKEDIN_SHARE_URL_LIMIT = 1800
+
+export function buildTrackedPortfolioUrl(username, platform = 'share') {
+    const url = new URL(getPortfolioUrl(username))
+    url.searchParams.set('utm_source', platform)
+    url.searchParams.set('utm_medium', 'social')
+    url.searchParams.set('utm_campaign', 'portfolio_share')
+    return url.toString()
+}
+
+function truncateText(text, maxLength) {
+    const trimmed = (text || '').trim()
+    if (!trimmed || trimmed.length <= maxLength) {
+        return trimmed
+    }
+
+    return `${trimmed.slice(0, maxLength - 1).trimEnd()}…`
+}
+
+function sanitizeHeadline(headline, maxLength = 48) {
+    if (!headline) {
+        return ''
+    }
+
+    const primary = headline.split('|')[0].trim()
+    return truncateText(primary, maxLength)
+}
+
+function formatList(items, limit = 3) {
+    const values = items.filter(Boolean).slice(0, limit)
+    if (values.length === 0) return ''
+    if (values.length === 1) return values[0]
+    if (values.length === 2) return `${values[0]} and ${values[1]}`
+    return `${values.slice(0, -1).join(', ')}, and ${values[values.length - 1]}`
+}
+
+function getTopSkills(profile, limit = 3) {
+    const skills = profile?.skills
+    if (!skills) {
+        return []
+    }
+
+    return [
+        ...(skills.programmingLanguages || []),
+        ...(skills.frameworks || []),
+        ...(skills.tools || []),
+    ].filter(Boolean).slice(0, limit)
+}
+
+function getFeaturedProject(profile) {
+    const project = profile?.projects?.find((entry) => entry?.title?.trim())
+    return truncateText(project?.title?.trim() || '', 48)
+}
+
+function buildLinkedInHashtags(headline, skills) {
+    const tags = new Set(['Portfolio', 'OpenToWork'])
+    const headlineLower = (headline || '').toLowerCase()
+
+    if (headlineLower.includes('developer') || headlineLower.includes('engineer')) {
+        tags.add('SoftwareDevelopment')
+    } else if (headlineLower.includes('design')) {
+        tags.add('Design')
+    } else if (headlineLower.includes('product')) {
+        tags.add('ProductManagement')
+    } else if (headlineLower.includes('data')) {
+        tags.add('DataScience')
+    } else if (skills[0]) {
+        tags.add(skills[0].replace(/[^a-zA-Z0-9]/g, ''))
+    }
+
+    return [...tags].slice(0, 3).map((tag) => `#${tag}`).join(' ')
+}
+
+function getShareContext({ username, basicDetails, profile, platform }) {
+    const name = basicDetails?.name?.trim() || ''
+    const headline = basicDetails?.headline?.trim() || ''
+    const role = sanitizeHeadline(headline)
+    const skills = getTopSkills(profile)
+    const skillsLabel = formatList(skills, 3)
+    const featuredProject = getFeaturedProject(profile)
+    const portfolioUrl = platform
+        ? buildTrackedPortfolioUrl(username, platform)
+        : getPortfolioUrl(username)
+
+    return {
+        name,
+        firstName: name.split(' ')[0] || '',
+        role,
+        skills,
+        skillsLabel,
+        featuredProject,
+        portfolioUrl,
+    }
+}
+
+function joinBlocks(blocks) {
+    return blocks
+        .map((block) => (Array.isArray(block) ? block.filter(Boolean).join('\n') : block))
+        .filter(Boolean)
+        .join('\n\n')
+}
+
+function buildLinkedInVariants(ctx) {
+    const hashtags = buildLinkedInHashtags(ctx.role, ctx.skills)
+
+    const variants = []
+
+    if (ctx.name && ctx.role && ctx.skillsLabel) {
+        variants.push(joinBlocks([
+            "I'm excited to share my portfolio!",
+            `I'm ${ctx.name}, a ${ctx.role}.`,
+            `Skills: ${ctx.skillsLabel}.`,
+            'Explore my projects and experience:',
+            ctx.portfolioUrl,
+            hashtags,
+        ]))
+    }
+
+    if (ctx.name && ctx.role) {
+        variants.push(joinBlocks([
+            "I'm excited to share my portfolio!",
+            `I'm ${ctx.name}, a ${ctx.role}.`,
+            'Projects, skills, and experience in one place.',
+            ctx.portfolioUrl,
+            hashtags,
+        ]))
+    }
+
+    if (ctx.name) {
+        variants.push(joinBlocks([
+            "I'm excited to share my portfolio!",
+            `I'm ${ctx.name}.`,
+            ctx.portfolioUrl,
+            hashtags,
+        ]))
+    }
+
+    variants.push(joinBlocks([
+        "I'm excited to share my portfolio!",
+        'Projects, skills, and experience in one place.',
+        ctx.portfolioUrl,
+        hashtags,
+    ]))
+
+    return variants
+}
+
+export function buildLinkedInPost({ username, basicDetails, profile }) {
+    const ctx = getShareContext({ username, basicDetails, profile, platform: 'linkedin' })
+    const variants = buildLinkedInVariants(ctx)
+
+    const fitted = variants.find((post) => post.length <= LINKEDIN_PREFILL_CHAR_LIMIT)
+    if (fitted) {
+        return fitted
+    }
+
+    const minimal = joinBlocks([
+        "I'm excited to share my portfolio!",
+        ctx.name ? `I'm ${ctx.name}.` : '',
+        ctx.portfolioUrl,
+        buildLinkedInHashtags(ctx.role, ctx.skills),
+    ])
+
+    return truncateText(minimal, LINKEDIN_PREFILL_CHAR_LIMIT)
+}
+
+export function truncateForTwitter(text, maxLength = TWITTER_CHAR_LIMIT) {
+    if (text.length <= maxLength) {
+        return text
+    }
+
+    const suffix = '…'
+    return `${text.slice(0, maxLength - suffix.length).trimEnd()}${suffix}`
+}
+
+function buildTwitterVariants(ctx) {
+    const variants = []
+
+    if (ctx.name && ctx.role) {
+        variants.push(joinBlocks([
+            'Just launched my portfolio 🚀',
+            [
+                ctx.name,
+                ctx.role,
+            ],
+            ctx.skillsLabel ? `Skills: ${ctx.skillsLabel}` : '',
+            ctx.featuredProject ? `Featured: ${ctx.featuredProject}` : '',
+            'Would love your feedback.',
+        ]))
+    }
+
+    if (ctx.name) {
+        variants.push(joinBlocks([
+            'My portfolio is live 🚀',
+            ctx.name,
+            ctx.skillsLabel ? `Skills: ${ctx.skillsLabel}` : '',
+            'Take a look — feedback welcome.',
+        ]))
+    }
+
+    variants.push(joinBlocks([
+        'My portfolio is live 🚀',
+        'Projects, skills, and experience — all in one place.',
+        'Feedback welcome.',
+    ]))
+
+    return variants
+}
+
+export function buildTwitterPost({ username, basicDetails, profile }) {
+    const ctx = getShareContext({ username, basicDetails, profile, platform: 'twitter' })
+    const variants = buildTwitterVariants(ctx)
+
+    const fitted = variants.find((post) => post.length <= TWITTER_CHAR_LIMIT)
+    if (fitted) {
+        return fitted
+    }
+
+    if (ctx.name) {
+        return truncateForTwitter(joinBlocks([
+            'My portfolio is live 🚀',
+            ctx.name,
+            'Feedback welcome.',
+        ]))
+    }
+
+    return 'My portfolio is live 🚀\n\nFeedback welcome.'
+}
+
+export function buildLinkedInShareUrl(postText) {
+    const params = new URLSearchParams({
+        shareActive: 'true',
+        text: postText,
+    })
+
+    return `https://www.linkedin.com/feed/?${params.toString()}`
+}
+
+export function buildTwitterShareUrl(postText, shareUrl) {
+    const params = new URLSearchParams({ text: postText })
+    if (shareUrl) {
+        params.set('url', shareUrl)
+    }
+    return `https://twitter.com/intent/tweet?${params.toString()}`
+}
+
+function fitLinkedInSharePayload(text) {
+    let nextText = text
+    let shareUrl = buildLinkedInShareUrl(nextText)
+
+    while (shareUrl.length > LINKEDIN_SHARE_URL_LIMIT && nextText.length > 80) {
+        nextText = truncateText(nextText, nextText.length - 40)
+        shareUrl = buildLinkedInShareUrl(nextText)
+    }
+
+    return { text: nextText, url: shareUrl }
+}
+
+export function getShareContent(platform, shareData) {
+    if (!shareData?.username) {
+        return null
+    }
+
+    const portfolioUrl = buildTrackedPortfolioUrl(shareData.username, platform)
+
+    if (platform === 'linkedin') {
+        const text = buildLinkedInPost(shareData)
+        const payload = fitLinkedInSharePayload(text)
+
+        return {
+            platform,
+            text: payload.text,
+            url: payload.url,
+        }
+    }
+
+    if (platform === 'twitter') {
+        const text = buildTwitterPost(shareData)
+        return {
+            platform,
+            text,
+            url: buildTwitterShareUrl(text, portfolioUrl),
+        }
+    }
+
+    return null
+}
+
+export function openShareWindow(url) {
+    if (typeof window === 'undefined' || !url) {
+        return false
+    }
+
+    const popup = window.open(url, '_blank', 'noopener,noreferrer,width=640,height=720')
+    return popup != null
+}
+
+export function getEmailSignatureSnippet(username, basicDetails) {
+    const name = basicDetails?.name?.trim() || 'Your Name'
+    const portfolioUrl = buildTrackedPortfolioUrl(username, 'email')
+
+    return joinBlocks([
+        name,
+        sanitizeHeadline(basicDetails?.headline?.trim()) || 'Your headline',
+        `Portfolio: ${portfolioUrl}`,
+    ])
+}
+
+export function getResumeLinkLine(username) {
+    return `View my portfolio: ${buildTrackedPortfolioUrl(username, 'resume')}`
+}
+
+export const SHARE_LIMITS = {
+    linkedinPrefill: LINKEDIN_PREFILL_CHAR_LIMIT,
+    linkedinShareUrl: LINKEDIN_SHARE_URL_LIMIT,
+    twitter: TWITTER_CHAR_LIMIT,
+}
diff --git a/frontend/src/utils/sharePosts.test.js b/frontend/src/utils/sharePosts.test.js
new file mode 100644
index 0000000..a552a3b
--- /dev/null
+++ b/frontend/src/utils/sharePosts.test.js
@@ -0,0 +1,207 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+    buildLinkedInPost,
+    buildLinkedInShareUrl,
+    buildTrackedPortfolioUrl,
+    buildTwitterPost,
+    buildTwitterShareUrl,
+    getEmailSignatureSnippet,
+    getResumeLinkLine,
+    getShareContent,
+    SHARE_LIMITS,
+    truncateForTwitter,
+} from './sharePosts'
+
+const richProfile = {
+    username: 'ashish',
+    basicDetails: {
+        name: 'Prajapati Ashish',
+        headline: 'Full Stack Developer',
+        location: 'Bengaluru, India',
+        about: 'I build reliable products end to end. Passionate about clean code and thoughtful UX.',
+    },
+    profile: {
+        skills: {
+            programmingLanguages: ['TypeScript', 'JavaScript', 'Python'],
+            frameworks: ['React', 'Node.js'],
+            tools: ['Docker'],
+        },
+        projects: [
+            { title: 'Orbit (Vexelity AI) - Cursor-Style AI Editor (Open Source)' },
+            { title: 'Analytics Platform' },
+        ],
+        experience: [
+            { title: 'Senior Engineer', company: 'Acme Corp' },
+        ],
+    },
+}
+
+describe('buildTrackedPortfolioUrl', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('returns a portfolio url with platform-specific utm params', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        expect(buildTrackedPortfolioUrl('ashish')).toBe(
+            'https://portlify.app/ashish?utm_source=share&utm_medium=social&utm_campaign=portfolio_share'
+        )
+        expect(buildTrackedPortfolioUrl('ashish', 'linkedin')).toContain('utm_source=linkedin')
+    })
+})
+
+describe('buildLinkedInPost', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('creates a compact linkedin post that fits prefill limits', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const post = buildLinkedInPost(richProfile)
+
+        expect(post.length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinPrefill)
+        expect(post).toContain("I'm excited to share my portfolio!")
+        expect(post).toContain('Prajapati Ashish')
+        expect(post).toContain('Full Stack Developer')
+        expect(post).toContain('https://portlify.app/ashish?utm_source=linkedin')
+        expect(post).toContain('#Portfolio')
+        expect(post).not.toContain("Here's what you'll find")
+    })
+
+    it('sanitizes pipe-separated headlines so linkedin does not truncate mid-line', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const post = buildLinkedInPost({
+            username: 'ashish',
+            basicDetails: {
+                name: 'Prajapati Ashish',
+                headline: 'Full-Stack Developer | React | Node.js | TypeScript | Python',
+            },
+            profile: richProfile.profile,
+        })
+
+        expect(post.length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinPrefill)
+        expect(post).toContain('Full-Stack Developer')
+        expect(post).not.toContain('| React')
+        expect(post).toContain('https://portlify.app/ashish?utm_source=linkedin')
+        expect(buildLinkedInShareUrl(post).length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinShareUrl)
+    })
+
+    it('falls back gracefully when profile details are sparse', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const post = buildLinkedInPost({
+            username: 'ashish',
+            basicDetails: {},
+            profile: {},
+        })
+
+        expect(post).toContain('https://portlify.app/ashish?utm_source=linkedin')
+        expect(post.length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinPrefill)
+    })
+})
+
+describe('buildTwitterPost', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('creates a clean formatted tweet without embedding the url in text', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const post = buildTwitterPost(richProfile)
+
+        expect(post.length).toBeLessThanOrEqual(280)
+        expect(post).toContain('Just launched my portfolio 🚀')
+        expect(post).toContain('Prajapati Ashish')
+        expect(post).toContain('Full Stack Developer')
+        expect(post).toContain('Skills: TypeScript, JavaScript, and Python')
+        expect(post).not.toContain('http')
+        expect(post).not.toContain('utm_')
+        expect(post).toMatch(/Prajapati Ashish\nFull Stack Developer/)
+    })
+
+    it('truncates long headlines safely for twitter', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const post = buildTwitterPost({
+            username: 'ashish',
+            basicDetails: {
+                name: 'Prajapati Ashish',
+                headline: 'A'.repeat(200),
+            },
+            profile: richProfile.profile,
+        })
+
+        expect(post.length).toBeLessThanOrEqual(280)
+        expect(post).not.toContain('http')
+    })
+})
+
+describe('share url builders', () => {
+    it('builds encoded linkedin and twitter share urls', () => {
+        const text = 'Hello world'
+        const shareUrl = 'https://portlify.app/ashish'
+
+        expect(buildLinkedInShareUrl(text)).toBe(
+            'https://www.linkedin.com/feed/?shareActive=true&text=Hello+world'
+        )
+        expect(buildTwitterShareUrl(text, shareUrl)).toBe(
+            'https://twitter.com/intent/tweet?text=Hello+world&url=https%3A%2F%2Fportlify.app%2Fashish'
+        )
+    })
+})
+
+describe('getShareContent', () => {
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('returns null when username is missing', () => {
+        expect(getShareContent('linkedin', { username: '' })).toBeNull()
+    })
+
+    it('returns a complete linkedin share payload within url limits', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const content = getShareContent('linkedin', {
+            username: 'ashish',
+            basicDetails: {
+                name: 'Prajapati Ashish',
+                headline: 'Full-Stack Developer | React | Node.js | TypeScript',
+            },
+            profile: richProfile.profile,
+        })
+
+        expect(content.platform).toBe('linkedin')
+        expect(content.text.length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinPrefill)
+        expect(content.text).toContain('Prajapati Ashish')
+        expect(content.text).toContain('https://portlify.app/ashish?utm_source=linkedin')
+        expect(content.url.length).toBeLessThanOrEqual(SHARE_LIMITS.linkedinShareUrl)
+        expect(content.url).toContain('linkedin.com/feed/')
+    })
+
+    it('returns twitter share payload with url passed separately', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+        const content = getShareContent('twitter', richProfile)
+
+        expect(content.platform).toBe('twitter')
+        expect(content.text).toContain('Prajapati Ashish')
+        expect(content.text).not.toContain('http')
+        expect(content.url).toContain('twitter.com/intent/tweet')
+        expect(content.url).toContain(encodeURIComponent('utm_source=twitter'))
+    })
+})
+
+describe('supporting snippets', () => {
+    it('builds clean resume and signature snippets', () => {
+        import.meta.env.VITE_APP_URL = 'https://portlify.app'
+
+        expect(getEmailSignatureSnippet('ashish', {
+            name: 'Ashish Kumar',
+            headline: 'Engineer | React',
+        })).toContain('Portfolio: https://portlify.app/ashish?utm_source=email')
+
+        expect(getResumeLinkLine('ashish')).toContain('utm_source=resume')
+    })
+
+    it('truncates twitter text with an ellipsis', () => {
+        expect(truncateForTwitter('a'.repeat(300))).toHaveLength(280)
+        expect(truncateForTwitter('a'.repeat(300)).endsWith('…')).toBe(true)
+    })
+})
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 7b0132d..0b1099a 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,18 +1,29 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 
-export default defineConfig({
-    plugins: [react()],
-    server: {
-        port: 5173,
-        host: true
-    },
-    build: {
-        outDir: 'dist',
-        sourcemap: false
-    },
-    test: {
-        environment: 'jsdom',
-        globals: true
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '')
+    const apiTarget = (env.VITE_API_URL || 'http://localhost:5001').replace(/\/api\/?$/, '')
+
+    return {
+        plugins: [react()],
+        server: {
+            port: 5173,
+            host: true,
+            proxy: {
+                '/api': {
+                    target: apiTarget,
+                    changeOrigin: true,
+                },
+            },
+        },
+        build: {
+            outDir: 'dist',
+            sourcemap: false
+        },
+        test: {
+            environment: 'jsdom',
+            globals: true
+        },
     }
 })