From ef04df83165992968f90a46f69f30ecc282f8599 Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Tue, 28 Apr 2026 11:52:58 -0400
Subject: [PATCH 1/8] Improve mobile UX and harden auth flows

---
 .gitignore                         |    1 +
 .vscode/mcp.json                   |    8 +
 .vscode/settings.json              |    8 +
 api/ai/generate.ts                 |    2 +-
 api/auth/index.ts                  |  292 ++++++++
 api/user/[id].js                   |   76 +++
 api/userdata/index.ts              |   22 +-
 src/App.tsx                        |  158 ++++-
 src/components/AgreementGuard.tsx  |   48 +-
 src/components/BlogListPage.tsx    |   60 ++
 src/components/BlogPage.css        |    3 +
 src/components/Footer.css          |    6 +
 src/components/GeminiChatPage.css  |   32 +-
 src/components/GeminiChatPage.tsx  |  104 ++-
 src/components/Header.css          |  559 +++++++++++++++
 src/components/Header.tsx          |  202 ++++--
 src/components/HelpCenter.css      | 1012 +++++++++++++++++++++++++---
 src/components/HelpCenter.tsx      |  921 +++++++++++++++++++++----
 src/components/HomeIntroStorm.css  |  561 +++++++++++++++
 src/components/HomeIntroStorm.tsx  |  110 +++
 src/components/IntroBubbles.css    |   10 +
 src/components/IntroBubbles.tsx    |   55 +-
 src/components/LoadingPage.css     |   97 ++-
 src/components/LoadingPage.tsx     |  102 ++-
 src/components/NewIntroPage.css    |  720 ++++++++++++++++++++
 src/components/NewIntroPage.tsx    |  233 +++++++
 src/components/Questionnaire.tsx   |   54 ++
 src/components/SettingsPage.tsx    |   14 +-
 src/components/ShopPage.tsx        |   46 +-
 src/components/SignInPage.css      |   90 ++-
 src/components/SignInPage.tsx      |   10 +-
 src/components/SignUpPage.tsx      |   11 +-
 src/components/WelcomePage.css     |   67 +-
 src/components/WelcomePage.tsx     |   27 +-
 src/components/WorkoutCalendar.css |  215 ++++++
 src/components/WorkoutCalendar.tsx |  140 +---
 src/components/WorkoutModal.css    |    2 +-
 src/components/WorkoutModal.tsx    |    7 +-
 src/components/WorkoutsPage.css    |  129 ++++
 src/components/WorkoutsPage.tsx    |   57 +-
 src/index.css                      |   53 +-
 src/server/adminRoutes.js          |    2 +-
 src/server/authServer.cjs          |    3 +-
 src/server/authServer.js           |  198 ++++--
 src/services/aiService.ts          |   22 +-
 src/services/authService.ts        |  135 +++-
 src/services/cloudBackupService.ts |    2 -
 src/services/localStorage.ts       |   39 +-
 48 files changed, 5990 insertions(+), 735 deletions(-)
 create mode 100644 .vscode/mcp.json
 create mode 100644 .vscode/settings.json
 create mode 100644 src/components/BlogListPage.tsx
 create mode 100644 src/components/HomeIntroStorm.css
 create mode 100644 src/components/HomeIntroStorm.tsx
 create mode 100644 src/components/NewIntroPage.css
 create mode 100644 src/components/NewIntroPage.tsx

diff --git a/.gitignore b/.gitignore
index abd5be7f..16fb670b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .vercel
 .env
+.local-test-credentials.json
 node_modules
 migrated_auth_users.json
 Run_Dev_Server_Command.txt
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
new file mode 100644
index 00000000..1623e350
--- /dev/null
+++ b/.vscode/mcp.json
@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "supabase": {
+      "type": "http",
+      "url": "https://mcp.supabase.com/mcp?project_ref=hkvkomtaffybchjdjfws"
+    }
+  }
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6e96da65
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+    "chat.tools.terminal.autoApprove": {
+        "git fetch": true,
+        "220..420": true,
+        "260..520": true,
+        "git remote": true
+    }
+}
\ No newline at end of file
diff --git a/api/ai/generate.ts b/api/ai/generate.ts
index b391ae7b..37f881b2 100644
--- a/api/ai/generate.ts
+++ b/api/ai/generate.ts
@@ -19,7 +19,7 @@ const GEMINI_API_KEY = (process.env.GEMINI_API_KEY ||
   process.env.VITE_GEMINI_API_KEY ||
   process.env.NEXT_PUBLIC_GEMINI_API_KEY) as string | undefined;
 const GEMINI_URL = GEMINI_API_KEY
-  ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`
+  ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${GEMINI_API_KEY}`
   : null;
 
 // Lightweight CORS helper so static builds and alternate origins can call this function
diff --git a/api/auth/index.ts b/api/auth/index.ts
index 128f003f..e3edd2db 100644
--- a/api/auth/index.ts
+++ b/api/auth/index.ts
@@ -1,6 +1,7 @@
 import { createClient } from '@supabase/supabase-js';
 import { v4 as uuidv4 } from 'uuid';
 import jwt from 'jsonwebtoken';
+import crypto from 'crypto';
 
 const SUPABASE_URL = process.env.SUPABASE_URL as string | undefined;
 const SUPABASE_KEY = process.env.SUPABASE_KEY as string | undefined;
@@ -11,6 +12,149 @@ if (!SUPABASE_URL || !SUPABASE_KEY) {
 
 const supabase = createClient(SUPABASE_URL || '', SUPABASE_KEY || '');
 
+const ENC_ALGO = 'aes-256-gcm';
+
+const parseEncKeys = () => {
+  const out: { id: string; key: Buffer }[] = [];
+  const multi = (process.env.REFRESH_TOKEN_ENC_KEYS || '').toString().trim();
+  if (multi) {
+    for (const part of multi.split(',').map(item => item.trim()).filter(Boolean)) {
+      const [id, ...rest] = part.split('=');
+      const raw = rest.join('=').trim();
+      if (!id || !raw) continue;
+      out.push({ id: id.trim(), key: crypto.createHash('sha256').update(raw).digest() });
+    }
+  } else {
+    const single = (process.env.REFRESH_TOKEN_ENC_KEY || process.env.REFRESH_TOKEN_KEY || '').toString().trim();
+    if (single) {
+      const id = (process.env.REFRESH_TOKEN_ENC_KEY_ID || 'k1').toString().trim() || 'k1';
+      out.push({ id, key: crypto.createHash('sha256').update(single).digest() });
+    }
+  }
+  return out;
+};
+
+const ENC_KEYS = parseEncKeys();
+if (!ENC_KEYS.length) {
+  throw new Error('[api/auth/index] REFRESH_TOKEN_ENC_KEY(S) is not set. Set REFRESH_TOKEN_ENC_KEYS or REFRESH_TOKEN_ENC_KEY to enable secure refresh token encryption.');
+}
+
+const CURRENT_KEY_ID = ENC_KEYS[0].id;
+const CURRENT_KEY = ENC_KEYS[0].key;
+const COOKIE_NAME = 'fitbuddyai_sid';
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
+
+type RefreshTokenRow = {
+  session_id: string;
+  user_id: string;
+  refresh_token: string;
+  created_at: string;
+  last_used?: string | null;
+  revoked?: boolean | null;
+  expires_at?: string | null;
+};
+
+function encryptToken(plain: string): string {
+  const iv = crypto.randomBytes(12);
+  const cipher = crypto.createCipheriv(ENC_ALGO, CURRENT_KEY, iv);
+  const encrypted = Buffer.concat([cipher.update(String(plain), 'utf8'), cipher.final()]);
+  const tag = cipher.getAuthTag();
+  return `${CURRENT_KEY_ID}:${Buffer.concat([iv, tag, encrypted]).toString('base64')}`;
+}
+
+function decryptToken(blobWithOptionalPrefix: string): { value: string; keyId: string } {
+  let keyId: string | null = null;
+  let blobB64 = blobWithOptionalPrefix;
+  const match = String(blobWithOptionalPrefix || '').match(/^([A-Za-z0-9_-]+):(.+)$/);
+  if (match) {
+    keyId = match[1];
+    blobB64 = match[2];
+  }
+
+  const buf = Buffer.from(blobB64, 'base64');
+  if (buf.length < 28) throw new Error('Invalid encrypted blob');
+  const iv = buf.slice(0, 12);
+  const tag = buf.slice(12, 28);
+  const ciphertext = buf.slice(28);
+
+  const tryKeys = (keys: { id: string; key: Buffer }[]) => {
+    for (const item of keys) {
+      try {
+        const decipher = crypto.createDecipheriv(ENC_ALGO, item.key, iv);
+        decipher.setAuthTag(tag);
+        const decrypted = Buffer.concat([decipher.update(ciphertext), decipher.final()]);
+        return { value: decrypted.toString('utf8'), keyId: item.id };
+      } catch {
+        // try next key
+      }
+    }
+    return null;
+  };
+
+  if (keyId) {
+    const found = ENC_KEYS.find(item => item.id === keyId);
+    if (found) {
+      const out = tryKeys([found]);
+      if (out) return out;
+      throw new Error('Failed to decrypt with specified key id');
+    }
+  }
+
+  const out = tryKeys(ENC_KEYS);
+  if (!out) throw new Error('Failed to decrypt refresh token with any known key');
+  return out;
+}
+
+function parseCookies(cookieHeader: string | undefined): Record<string, string> {
+  const out: Record<string, string> = {};
+  if (!cookieHeader) return out;
+  for (const part of cookieHeader.split(';')) {
+    const [rawKey, ...rest] = part.split('=');
+    const key = rawKey?.trim();
+    if (!key) continue;
+    const rawValue = (rest || []).join('=');
+    if (!rawValue) {
+      out[key] = '';
+      continue;
+    }
+    try {
+      out[key] = decodeURIComponent(rawValue.trim());
+    } catch {
+      out[key] = rawValue.trim();
+    }
+  }
+  return out;
+}
+
+function makeSessionId() {
+  return uuidv4();
+}
+
+interface AdminJwtPayload {
+  role: string;
+  [key: string]: unknown;
+}
+
+export async function requireAdmin(req: any): Promise<AdminJwtPayload | null> {
+  const jwtSecret = process.env.JWT_SECRET;
+  if (!jwtSecret) {
+    console.error('[api/auth/index] Missing JWT_SECRET in environment; admin actions are disabled');
+    return null;
+  }
+  const authHeader = String(req.headers['authorization'] || req.headers['Authorization'] || '');
+  const match = authHeader.match(/^Bearer\s+(.+)$/i);
+  if (!match) return null;
+  try {
+    const decoded = jwt.verify(match[1], jwtSecret) as string | AdminJwtPayload;
+    if (typeof decoded === 'object' && decoded && (decoded.role === 'service' || decoded.role === 'admin')) {
+      return decoded;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
 const normalizeEmail = (value: string | undefined | null): string => {
   if (!value) return '';
   return String(value).trim().toLowerCase();
@@ -57,6 +201,154 @@ export default async function handler(req: any, res: any) {
       return res.json({ user: safeUser, token });
     }
 
+    if (action === 'store_refresh') {
+      const { userId, refresh_token } = req.body as { userId?: string; refresh_token?: string };
+      if (!userId || !refresh_token) return res.status(400).json({ message: 'userId and refresh_token required.' });
+
+      try {
+        await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('user_id', userId).neq('revoked', true);
+      } catch (e) {
+        console.warn('[api/auth/store_refresh] error revoking existing sessions', e);
+      }
+
+      const enc = encryptToken(String(refresh_token));
+      let sid: string | undefined;
+      let inserted = false;
+      let insertErr: unknown = null;
+      for (let attempt = 0; attempt < 3; attempt += 1) {
+        sid = makeSessionId();
+        const { error } = await supabase.from('fitbuddyai_refresh_tokens').insert([{ session_id: sid, user_id: userId, refresh_token: enc, created_at: new Date().toISOString(), last_used: new Date().toISOString(), revoked: false }]);
+        if (!error) {
+          inserted = true;
+          break;
+        }
+        if (error.code === '23505' || (error.message && error.message.includes('duplicate key value'))) {
+          continue;
+        }
+        insertErr = error;
+        break;
+      }
+
+      if (insertErr || !inserted || !sid) {
+        console.error('[api/auth/store_refresh] failed to persist refresh token', insertErr || 'insert retries exhausted');
+        return res.status(500).json({ message: 'Failed to persist refresh token' });
+      }
+
+      const secureFlag = process.env.NODE_ENV === 'production' ? '; Secure' : '';
+      res.setHeader('Set-Cookie', `${COOKIE_NAME}=${sid}; HttpOnly; Path=/; SameSite=Lax; Max-Age=${COOKIE_MAX_AGE_SECONDS}${secureFlag}`);
+      return res.json({ ok: true, session_id: sid });
+    }
+
+    if (action === 'refresh') {
+      try {
+        const cookies = parseCookies(req.headers?.cookie as string | undefined);
+        const sid = cookies[COOKIE_NAME];
+        if (!sid) return res.status(401).json({ message: 'No session cookie present' });
+
+        const { data: entry, error: selectErr } = await supabase.from('fitbuddyai_refresh_tokens').select('*').eq('session_id', sid).limit(1).maybeSingle();
+        if (selectErr) {
+          console.error('[api/auth/refresh] db select error', selectErr);
+          return res.status(500).json({ message: 'Failed to lookup session' });
+        }
+        const session = entry as RefreshTokenRow | null;
+        if (!session || session.revoked) return res.status(401).json({ message: 'Session not found or revoked' });
+        if (session.expires_at && new Date(session.expires_at) < new Date()) {
+          return res.status(401).json({ message: 'Session expired' });
+        }
+
+        let decryptedRefresh = '';
+        try {
+          const decrypted = decryptToken(String(session.refresh_token));
+          decryptedRefresh = decrypted.value;
+          if (decrypted.keyId !== CURRENT_KEY_ID) {
+            try {
+              await supabase.from('fitbuddyai_refresh_tokens').update({ refresh_token: encryptToken(decryptedRefresh), last_used: new Date().toISOString() }).eq('session_id', sid);
+            } catch (e) {
+              console.warn('[api/auth/refresh] failed to rotate refresh token to new key', e);
+            }
+          }
+        } catch (e) {
+          console.error('[api/auth/refresh] failed to decrypt refresh token', e);
+          try { await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('session_id', sid); } catch {}
+          return res.status(401).json({ message: 'Invalid session' });
+        }
+
+        const tokenUrl = `${SUPABASE_URL}/auth/v1/token?grant_type=refresh_token`;
+        const resp = await fetch(tokenUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            apikey: SUPABASE_KEY || '',
+            Authorization: `Bearer ${SUPABASE_KEY || ''}`
+          },
+          body: JSON.stringify({ refresh_token: decryptedRefresh })
+        });
+        const body = await resp.json();
+        if (!resp.ok) {
+          console.warn('[api/auth/refresh] supabase token refresh failed', body);
+          try { await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('session_id', sid); } catch {}
+          return res.status(401).json({ message: 'Failed to refresh token' });
+        }
+
+        try {
+          const updates: { last_used: string; refresh_token?: string } = { last_used: new Date().toISOString() };
+          if (body.refresh_token) updates.refresh_token = encryptToken(body.refresh_token);
+          await supabase.from('fitbuddyai_refresh_tokens').update(updates).eq('session_id', sid);
+        } catch (e) {
+          console.warn('[api/auth/refresh] failed to update refresh token record', e);
+        }
+
+        return res.json({ access_token: body.access_token, expires_at: body.expires_at ?? body.expires_in });
+      } catch (e) {
+        console.error('[api/auth/refresh] error', e);
+        return res.status(500).json({ message: 'Refresh failed' });
+      }
+    }
+
+    if (action === 'clear_refresh') {
+      try {
+        const cookies = parseCookies(req.headers?.cookie as string | undefined);
+        const sid = cookies[COOKIE_NAME];
+        if (sid) {
+          await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('session_id', sid);
+        }
+        res.setHeader('Set-Cookie', `${COOKIE_NAME}=; HttpOnly; Path=/; Max-Age=0; SameSite=Lax`);
+        return res.json({ ok: true });
+      } catch {
+        return res.status(500).json({ message: 'Failed to clear refresh session' });
+      }
+    }
+
+    if (action === 'revoke_session') {
+      const admin = await requireAdmin(req);
+      if (!admin) return res.status(403).json({ message: 'Forbidden' });
+      const { session_id } = req.body as { session_id?: string };
+      if (!session_id) return res.status(400).json({ message: 'session_id required' });
+      const { error } = await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('session_id', session_id);
+      if (error) return res.status(500).json({ message: 'Failed to revoke session' });
+      return res.json({ ok: true });
+    }
+
+    if (action === 'revoke_user_sessions') {
+      const admin = await requireAdmin(req);
+      if (!admin) return res.status(403).json({ message: 'Forbidden' });
+      const { userId } = req.body as { userId?: string };
+      if (!userId) return res.status(400).json({ message: 'userId required' });
+      const { error } = await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('user_id', userId);
+      if (error) return res.status(500).json({ message: 'Failed to revoke sessions for user' });
+      return res.json({ ok: true });
+    }
+
+    if (action === 'cleanup_refresh_tokens') {
+      const admin = await requireAdmin(req);
+      if (!admin) return res.status(403).json({ message: 'Forbidden' });
+      const days = Number(req.body?.days || 30);
+      const threshold = new Date(Date.now() - days * 24 * 60 * 60 * 1000).toISOString();
+      const { error } = await supabase.from('fitbuddyai_refresh_tokens').delete().lt('created_at', threshold);
+      if (error) return res.status(500).json({ message: 'Cleanup failed' });
+      return res.json({ ok: true });
+    }
+
     if (action === 'signup') {
       const { email, username, password } = req.body as { email: string; username: string; password: string };
       if (!email || !username || !password) return res.status(400).json({ message: 'All fields are required.' });
diff --git a/api/user/[id].js b/api/user/[id].js
index bd8d6a6a..1287f038 100644
--- a/api/user/[id].js
+++ b/api/user/[id].js
@@ -34,6 +34,82 @@ export default async function handler(req, res) {
       if (action === 'assessment') {
         return res.status(404).json({ message: 'No assessment found.' });
       }
+      if (action === 'buy') {
+        const body = req.body || {};
+        const item = body.item || null;
+        if (!item || typeof item !== 'object') {
+          return res.status(400).json({ message: 'Item required.' });
+        }
+
+        const price = Number(item.price || 0);
+        if (isNaN(price) || price < 0) {
+          return res.status(400).json({ message: 'Invalid item price.' });
+        }
+
+        const authHeader = String(req.headers.authorization || req.headers.Authorization || '');
+        const token = authHeader && authHeader.toLowerCase().startsWith('bearer ') ? authHeader.slice(7) : null;
+        if (!token) {
+          return res.status(401).json({ message: 'Missing Authorization token.' });
+        }
+
+        try {
+          const { data: authData, error: authErr } = await supabase.auth.getUser(token);
+          if (authErr || !authData || !authData.user) {
+            return res.status(401).json({ message: 'Invalid or expired token.' });
+          }
+          if (authData.user.id !== id) {
+            return res.status(403).json({ message: 'Token does not match user.' });
+          }
+        } catch (err) {
+          return res.status(401).json({ message: 'Invalid or expired token.' });
+        }
+
+        const { data: userData, error: fetchErr } = await supabase
+          .from('fitbuddyai_userdata')
+          .select('*')
+          .eq('user_id', id)
+          .limit(1)
+          .maybeSingle();
+        if (fetchErr) {
+          console.error('Supabase error fetching user for purchase:', fetchErr);
+          return res.status(500).json({ message: 'Supabase error.' });
+        }
+        if (!userData) {
+          return res.status(404).json({ message: 'User not found.' });
+        }
+
+        const currentEnergy = Number(userData.energy || 0);
+        if (currentEnergy < price) {
+          return res.status(409).json({ message: 'Insufficient energy to purchase item.' });
+        }
+
+        const existingInventory = Array.isArray(userData.inventory) ? userData.inventory : [];
+        const purchasedItem = {
+          ...item,
+          price,
+          quantity: Number.isFinite(Number(item.quantity)) ? Number(item.quantity) : item.quantity,
+          purchased_at: new Date().toISOString()
+        };
+        const newInventory = [...existingInventory, purchasedItem];
+        const newEnergy = currentEnergy - price;
+
+        const { data: updated, error: updateErr } = await supabase
+          .from('fitbuddyai_userdata')
+          .update({ inventory: newInventory, energy: newEnergy })
+          .eq('user_id', id)
+          .select()
+          .maybeSingle();
+        if (updateErr) {
+          console.error('Supabase error updating purchase:', updateErr);
+          return res.status(500).json({ message: 'Supabase error.' });
+        }
+        if (!updated) {
+          return res.status(500).json({ message: 'Failed to update user.' });
+        }
+
+        const { password: _password, ...userSafe } = updated;
+        return res.status(200).json({ user: userSafe });
+      }
       // Fallback: unsupported POST
       return res.status(400).json({ message: 'Bad request' });
     }
diff --git a/api/userdata/index.ts b/api/userdata/index.ts
index 3eb50a90..ac89b84c 100644
--- a/api/userdata/index.ts
+++ b/api/userdata/index.ts
@@ -119,18 +119,34 @@ export default async function handler(req: any, res: any) {
           ? (userPayload.data || userPayload)
           : null;
         const usernameFromPayload = (payloadToWrite && payloadToWrite.username) || (maybeUser && (maybeUser.username || maybeUser.name)) || null;
-        const avatarFromPayload = (payloadToWrite && payloadToWrite.avatar) || (maybeUser && (maybeUser.avatar || maybeUser.avatar_url || maybeUser.photoUrl)) || null;
+        const avatarFromPayload = (payloadToWrite && (payloadToWrite.avatar_url || payloadToWrite.avatar)) || (maybeUser && (maybeUser.avatar_url || maybeUser.avatar || maybeUser.photoUrl)) || null;
+        const energyFromPayload = (payloadToWrite && Object.prototype.hasOwnProperty.call(payloadToWrite, 'energy')) ? payloadToWrite.energy : (maybeUser && Object.prototype.hasOwnProperty.call(maybeUser, 'energy') ? maybeUser.energy : null);
+        const inventoryFromPayload = (payloadToWrite && Object.prototype.hasOwnProperty.call(payloadToWrite, 'inventory')) ? payloadToWrite.inventory : (maybeUser && Object.prototype.hasOwnProperty.call(maybeUser, 'inventory') ? maybeUser.inventory : null);
+        const streakFromPayload = (payloadToWrite && Object.prototype.hasOwnProperty.call(payloadToWrite, 'streak')) ? payloadToWrite.streak : (maybeUser && Object.prototype.hasOwnProperty.call(maybeUser, 'streak') ? maybeUser.streak : null);
         if (usernameFromPayload) {
           upsertRow.username = usernameFromPayload;
           delete payloadToWrite.username;
         }
         if (avatarFromPayload) {
-          upsertRow.avatar = avatarFromPayload;
+          upsertRow.avatar_url = avatarFromPayload;
+          delete payloadToWrite.avatar_url;
           delete payloadToWrite.avatar;
         }
+        if (Object.prototype.hasOwnProperty.call(payloadToWrite, 'energy') || (maybeUser && Object.prototype.hasOwnProperty.call(maybeUser, 'energy'))) {
+          upsertRow.energy = energyFromPayload;
+          delete payloadToWrite.energy;
+        }
+        if (Array.isArray(inventoryFromPayload)) {
+          upsertRow.inventory = inventoryFromPayload;
+          delete payloadToWrite.inventory;
+        }
+        if (Object.prototype.hasOwnProperty.call(payloadToWrite, 'streak') || (maybeUser && Object.prototype.hasOwnProperty.call(maybeUser, 'streak'))) {
+          upsertRow.streak = streakFromPayload;
+          delete payloadToWrite.streak;
+        }
         // Do not attempt to write an 'assessment_data' column (not present in current schema)
         // Warn if there are other arbitrary payload keys (we are intentionally not storing them)
-        const allowedKeys = new Set(['questionnaire_progress','workout_plan','accepted_terms','accepted_privacy','chat_history','username','avatar','fitbuddyai_user_data','user','user_data']);
+        const allowedKeys = new Set(['questionnaire_progress','workout_plan','accepted_terms','accepted_privacy','chat_history','username','avatar','avatar_url','energy','inventory','streak','fitbuddyai_user_data','user','user_data']);
         const extraKeys = Object.keys(payloadToWrite || {}).filter(k => !allowedKeys.has(k));
         if (extraKeys.length) console.warn('[api/userdata] ignoring extra payload keys (not stored to DB):', extraKeys);
         console.log('[api/userdata] upsertRow keys:', Object.keys(upsertRow));
diff --git a/src/App.tsx b/src/App.tsx
index 745bb9af..a3f5c2a1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import Questionnaire from './components/Questionnaire';
 import { useNavigate, Navigate } from 'react-router-dom';
 import WorkoutCalendar from './components/WorkoutCalendar';
 import AgreementGuard from './components/AgreementGuard';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
@@ -19,7 +19,7 @@ import EmailVerifyPage from './components/EmailVerifyPage';
 
 
 import { WorkoutPlan, DayWorkout, Exercise } from './types';
-import { loadUserData, loadWorkoutPlan, saveUserData, saveWorkoutPlan, clearUserData, getAuthToken, loadSupabaseSession, saveSupabaseSession, clearSupabaseSession, saveAuthToken } from './services/localStorage';
+import { loadUserData, loadWorkoutPlan, saveUserData, saveWorkoutPlan, clearUserData, getAuthToken, saveAuthToken } from './services/localStorage';
 import { fetchUserById } from './services/authService';
 import { format } from 'date-fns';
 import { getPrimaryType, isWorkoutCompleteForStreak, resolveWorkoutTypes } from './utils/streakUtils';
@@ -33,6 +33,7 @@ import AdminPage from './components/AdminAuditPage';
 import { useCloudBackup } from './hooks/useCloudBackup';
 import RickrollPage from './components/RickrollPage';
 import BlogPage from './components/BlogPage';
+import BlogListPage from './components/BlogListPage';
 import AgreementBanner from './components/AgreementBanner';
 import TermsPage from './components/TermsPage';
 import PrivacyPage from './components/PrivacyPage';
@@ -42,7 +43,9 @@ import WorkoutsPage from './components/WorkoutsPage';
 import MyPlanPage from './components/MyPlanPage';
 import PersonalLibraryPage from './components/PersonalLibraryPage';
 import SuggestWorkout from './components/SuggestWorkout';
+import NewIntroPage from './components/NewIntroPage';
 import { autoSaveWorkoutsFromAssessment } from './services/assessmentWorkouts';
+import { loadHomeIntroEnabled, saveHomeIntroEnabled } from './services/localStorage';
 
 function App() {
   const [userData, setUserData] = useState<any | null>(null);
@@ -51,6 +54,9 @@ function App() {
   const navigate = useNavigate();
   const [profileVersion, setProfileVersion] = useState(0);
   const [isHydratingUser, setIsHydratingUser] = useState(true);
+  const lastServerUserSyncRef = useRef(0);
+  const lastSavedUserSnapshotRef = useRef('');
+  const [homeIntroEnabled, setHomeIntroEnabled] = useState(() => loadHomeIntroEnabled());
   const useSupabase = Boolean(import.meta.env.VITE_LOCAL_USE_SUPABASE || import.meta.env.VITE_SUPABASE_URL);
   // themeMode: 'auto' | 'light' | 'dark'
   const [themeMode, setThemeMode] = useState<'auto' | 'light' | 'dark'>(() => {
@@ -67,16 +73,44 @@ function App() {
   // Cloud backup/restore integration
   useCloudBackup();
 
+  const getStoredUserTimestamp = () => {
+    if (typeof window === 'undefined') return 0;
+    const raw = sessionStorage.getItem('fitbuddyai_user_data') || localStorage.getItem('fitbuddyai_user_data_persisted');
+    if (!raw) return 0;
+    try {
+      const parsed = JSON.parse(raw);
+      return Number(parsed?.timestamp || 0) || 0;
+    } catch (_err) {
+      return 0;
+    }
+  };
+
+  const hasLocalUserOverride = () => {
+    if (typeof window === 'undefined') return false;
+    try {
+      return Boolean(sessionStorage.getItem('fitbuddyai_local_user_override') || localStorage.getItem('fitbuddyai_local_user_override'));
+    } catch (_err) {
+      return false;
+    }
+  };
+
   useEffect(() => {
     if (!useSupabase) return;
     const { data: authListener } = supabase.auth.onAuthStateChange((_, session) => {
       if (session) {
-        try { saveSupabaseSession(session); } catch {}
+        try {
+          fetch('/api/auth?action=store_refresh', {
+            method: 'POST',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ userId: session.user?.id, refresh_token: session.refresh_token })
+          }).catch(() => {});
+        } catch (_e) {}
         if (session.access_token) {
           try { saveAuthToken(session.access_token); } catch {}
         }
       } else {
-        try { clearSupabaseSession(); } catch {}
+        try { fetch('/api/auth?action=clear_refresh', { method: 'POST', credentials: 'include' }).catch(() => {}); } catch {}
       }
     });
     return () => {
@@ -154,17 +188,31 @@ function App() {
     setThemeModeHandler(themeMode === 'dark' ? 'light' : 'dark');
   };
 
+  const toggleHomeIntro = () => {
+    const next = !homeIntroEnabled;
+    setHomeIntroEnabled(next);
+    saveHomeIntroEnabled(next);
+  };
+
   // Poll user from server periodically if logged in. Throttle to reduce load and
   // avoid polling when the page is hidden (background tab).
   useEffect(() => {
     if (!userData?.id) return;
+    if (hasLocalUserOverride()) return;
+    lastServerUserSyncRef.current = Math.max(lastServerUserSyncRef.current, getStoredUserTimestamp());
     let stopped = false;
     const fetchAndUpdate = async () => {
       if (stopped) return;
       // Don't poll while page is hidden to avoid unnecessary background traffic
       if (typeof document !== 'undefined' && document.hidden) return;
       const fresh = await fetchUserById(userData.id);
-      if (fresh) setUserData(fresh);
+      if (!fresh) return;
+      const localTimestamp = getStoredUserTimestamp();
+      if (localTimestamp > lastServerUserSyncRef.current) {
+        return;
+      }
+      lastServerUserSyncRef.current = Date.now();
+      setUserData(fresh);
     };
     // Run an initial check quickly, then throttle to a longer interval
     fetchAndUpdate();
@@ -182,6 +230,18 @@ function App() {
     return () => window.removeEventListener('fitbuddyai-logout', handleLogout);
   }, []);
 
+  useEffect(() => {
+    const handleHomeIntroChanged = () => {
+      setHomeIntroEnabled(loadHomeIntroEnabled());
+    };
+    window.addEventListener('fitbuddyai-home-intro-changed', handleHomeIntroChanged as EventListener);
+    window.addEventListener('storage', handleHomeIntroChanged);
+    return () => {
+      window.removeEventListener('fitbuddyai-home-intro-changed', handleHomeIntroChanged as EventListener);
+      window.removeEventListener('storage', handleHomeIntroChanged);
+    };
+  }, []);
+
   // Listen for login event (dispatched after sign-in/restore) and sync saved data into state
   useEffect(() => {
     const handleLogin = () => {
@@ -260,19 +320,18 @@ function App() {
     (async () => {
       if (useSupabase) {
         try {
-          const storedSession = loadSupabaseSession();
-          if (storedSession?.access_token && storedSession?.refresh_token) {
-            await supabase.auth.setSession({
-              access_token: storedSession.access_token,
-              refresh_token: storedSession.refresh_token
-            });
-            if (storedSession.access_token) {
-              try { saveAuthToken(storedSession.access_token); } catch {}
+          const resp = await fetch('/api/auth?action=refresh', {
+            method: 'POST',
+            credentials: 'include'
+          });
+          if (resp.ok) {
+            const data = await resp.json();
+            if (data?.access_token) {
+              try { saveAuthToken(data.access_token); } catch {}
             }
           }
         } catch (err) {
-          console.warn('[App] Supabase session restore failed', err);
-          try { clearSupabaseSession(); } catch {}
+          console.warn('[App] Supabase server-side refresh failed', err);
         }
       }
       const savedUserData = loadUserData();
@@ -280,11 +339,24 @@ function App() {
       console.log('App startup - loadUserData ->', savedUserData);
       console.log('App startup - loadWorkoutPlan ->', savedWorkoutPlan);
       if (!cancelled && savedUserData) {
+        lastServerUserSyncRef.current = Math.max(lastServerUserSyncRef.current, getStoredUserTimestamp());
+        try { lastSavedUserSnapshotRef.current = JSON.stringify(savedUserData); } catch { lastSavedUserSnapshotRef.current = ''; }
         setUserData(savedUserData);
         if (savedUserData.id) {
+          if (hasLocalUserOverride()) {
+            setIsHydratingUser(false);
+            return;
+          }
           try {
             const freshUser = await fetchUserById(savedUserData.id);
-            if (!cancelled && freshUser) setUserData(freshUser);
+            if (!cancelled && freshUser) {
+              const localTimestamp = getStoredUserTimestamp();
+              if (localTimestamp <= lastServerUserSyncRef.current) {
+                lastServerUserSyncRef.current = Date.now();
+                try { lastSavedUserSnapshotRef.current = JSON.stringify(freshUser); } catch { lastSavedUserSnapshotRef.current = ''; }
+                setUserData(freshUser);
+              }
+            }
           } catch (e) {
             // ignore fetch failure, keep saved data
           }
@@ -304,6 +376,10 @@ function App() {
     // Avoid clearing persisted session while we are still hydrating from storage
     if (isHydratingUser) return;
     if (userData) {
+      let snapshot = '';
+      try { snapshot = JSON.stringify(userData); } catch { snapshot = ''; }
+      if (snapshot && snapshot === lastSavedUserSnapshotRef.current) return;
+      lastSavedUserSnapshotRef.current = snapshot;
       // Save local userData without triggering the cloud backup scheduler.
       // Cloud backups for chat are triggered explicitly from appendChatMessage to avoid
       // frequent empty saves while the app polls for user updates.
@@ -311,6 +387,7 @@ function App() {
     } else {
       // If userData is null, clear user data from storage
       // (defensive, in case logout event missed)
+      lastSavedUserSnapshotRef.current = '';
       clearUserData();
     }
   }, [userData, isHydratingUser]);
@@ -329,9 +406,44 @@ function App() {
     // Deduct energy and add item to user inventory (simplified)
     setUserData((prev: any) => {
       if (!prev) return prev;
-      const newEnergy = (prev.energy || 0) - item.price;
-      const inventory = Array.isArray(prev.inventory) ? prev.inventory : [];
-      return { ...prev, energy: newEnergy, inventory: [...inventory, item] };
+      const itemPrice = Number(item?.price ?? 0);
+      const newEnergy = Math.max(0, (prev.energy ?? 0) - itemPrice);
+      const inventory = Array.isArray(prev.inventory) ? [...prev.inventory] : [];
+      const itemId = String(item?.id || '');
+      let nextInventory = [...inventory];
+      if (itemId.startsWith('streak-saver')) {
+        const quantity = Number(item?.quantity ?? item?.count ?? 1);
+        const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : 1;
+        const existingIndex = nextInventory.findIndex((entry: any) => String(entry?.id || '').startsWith('streak-saver'));
+        const purchasedItem = {
+          ...item,
+          quantity: normalizedQuantity,
+          purchased_at: new Date().toISOString()
+        };
+        if (existingIndex >= 0) {
+          const existing = nextInventory[existingIndex];
+          const existingQty = Number(existing.quantity ?? existing.count ?? 1);
+          nextInventory[existingIndex] = {
+            ...existing,
+            ...purchasedItem,
+            quantity: (Number.isFinite(existingQty) ? existingQty : 1) + normalizedQuantity
+          };
+        } else {
+          nextInventory.push(purchasedItem);
+        }
+      } else {
+        nextInventory.push(item);
+      }
+      const nextUser = { ...prev, energy: newEnergy, inventory: nextInventory };
+      try {
+        saveUserData({ data: nextUser }, { skipBackup: true });
+          sessionStorage.setItem('fitbuddyai_local_user_override', '1');
+          localStorage.setItem('fitbuddyai_local_user_override', '1');
+        window.dispatchEvent(new Event('storage'));
+      } catch (error) {
+        console.warn('[App] Failed to persist local shop purchase:', error);
+      }
+      return nextUser;
     });
     // Optionally: show a toast or animation
   };
@@ -483,7 +595,7 @@ function App() {
       <AgreementBanner userData={userData} />
       <main className="app-main">
         <Routes>
-        <Route path="/" element={<WelcomePage />} />
+        <Route path="/" element={<WelcomePage homeIntroEnabled={homeIntroEnabled} />} />
         <Route path="/workouts" element={<WorkoutsPage />} />
         <Route path="/library" element={<PersonalLibraryPage />} />
         <Route path="/profile" element={<ProfilePage userData={userData} onProfileUpdate={(user) => {
@@ -499,7 +611,7 @@ function App() {
           setProfileVersion(v => v + 1);
         }} profileVersion={profileVersion} />} />
         <Route path="/profile/achievements" element={<AchievementsPage />} />
-        <Route path="/profile/settings" element={<SettingsPage theme={effectiveThemeClass} onToggleTheme={toggleTheme} />} />
+        <Route path="/profile/settings" element={<SettingsPage theme={effectiveThemeClass} onToggleTheme={toggleTheme} homeIntroEnabled={homeIntroEnabled} onToggleHomeIntro={toggleHomeIntro} />} />
         <Route path="/loading" element={<LoadingPage />} />
         <Route 
           path="/questionnaire" 
@@ -557,7 +669,9 @@ function App() {
           } 
         />
         <Route path="/my-plan" element={<MyPlanPage />} />
-  <Route path="/blog" element={<BlogPage />} />
+        <Route path="/new_intro" element={<NewIntroPage />} />
+    <Route path="/blog" element={<BlogListPage />} />
+    <Route path="/blog/:slug" element={<BlogPage />} />
   <Route path="/chat" element={<AgreementGuard userData={userData}><GeminiChatPage userData={userData} /></AgreementGuard>} />
   <Route path="/admin" element={<AdminPage />} />
   <Route path="/help" element={<HelpCenter />} />
diff --git a/src/components/AgreementGuard.tsx b/src/components/AgreementGuard.tsx
index 8c669f1a..4293203a 100644
--- a/src/components/AgreementGuard.tsx
+++ b/src/components/AgreementGuard.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { hasAcceptedAll, hasAcceptedTos, hasAcceptedPrivacy, acceptTos, acceptPrivacy } from '../services/tosService';
+import { setAcceptanceFlags } from '../services/localStorage';
+import { hasAcceptedAll, hasAcceptedTos, hasAcceptedPrivacy, acceptTos, acceptPrivacy, migrateAnonToUser } from '../services/tosService';
 import './AgreementGuard.css';
 
 type Props = { userData?: any; children: React.ReactNode };
@@ -12,17 +13,57 @@ export default function AgreementGuard({ userData, children }: Props) {
   const [privacyAccepted, setPrivacyAccepted] = useState(false);
 
   useEffect(() => {
-    const check = () => {
+    if (userData?.id) {
+      try { migrateAnonToUser(userData.id); } catch (_e) { /* noop */ }
+    }
+
+    let cancelled = false;
+
+    const check = async () => {
+      const localAccepted = hasAcceptedAll(userData?.id);
       setTosAccepted(hasAcceptedTos(userData?.id));
       setPrivacyAccepted(hasAcceptedPrivacy(userData?.id));
-      setVisible(!hasAcceptedAll(userData?.id));
+
+      if (localAccepted) {
+        if (!cancelled) setVisible(false);
+        return;
+      }
+
+      const uid = userData?.id;
+      if (!uid) {
+        if (!cancelled) setVisible(true);
+        return;
+      }
+
+      try {
+        const init = await import('../services/apiAuth').then(m => m.attachAuthHeaders({ method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId: uid }) }));
+        const res = await fetch('/api/userdata/load', init);
+        if (!res.ok) {
+          if (!cancelled) setVisible(true);
+          return;
+        }
+
+        const text = await res.text();
+        let parsed: any = null;
+        try { parsed = text ? JSON.parse(text) : null; } catch (_e) { parsed = null; }
+        const payload = parsed?.stored ?? parsed?.payload ?? parsed ?? {};
+        const serverAccepted = Boolean(payload && payload.accepted_terms && payload.accepted_privacy);
+        if (serverAccepted) {
+          try { setAcceptanceFlags({ accepted_terms: true, accepted_privacy: true }); } catch (_e) { /* noop */ }
+        }
+        if (!cancelled) setVisible(!serverAccepted);
+      } catch (_e) {
+        if (!cancelled) setVisible(!localAccepted);
+      }
     };
+
     check();
     const onTos = () => { setTosAccepted(true); setVisible(!hasAcceptedAll(userData?.id)); };
     const onPrivacy = () => { setPrivacyAccepted(true); setVisible(!hasAcceptedAll(userData?.id)); };
     window.addEventListener('fitbuddyai-tos-accepted', onTos);
     window.addEventListener('fitbuddyai-privacy-accepted', onPrivacy);
     return () => {
+      cancelled = true;
       window.removeEventListener('fitbuddyai-tos-accepted', onTos);
       window.removeEventListener('fitbuddyai-privacy-accepted', onPrivacy);
     };
@@ -34,6 +75,7 @@ export default function AgreementGuard({ userData, children }: Props) {
     // Mark both as accepted locally (migrated to user if signed in by tosService)
     try { acceptTos(userData?.id); } catch (_e) { /* noop */ }
     try { acceptPrivacy(userData?.id); } catch (_e) { /* noop */ }
+    try { setAcceptanceFlags({ accepted_terms: true, accepted_privacy: true }); } catch (_e) { /* noop */ }
     // If user is signed in, persist acceptance to the server as well
     if (userData?.id) {
       try {
diff --git a/src/components/BlogListPage.tsx b/src/components/BlogListPage.tsx
new file mode 100644
index 00000000..ea1c14bd
--- /dev/null
+++ b/src/components/BlogListPage.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './BlogPage.css';
+
+const posts = [
+  {
+    slug: 'fitbuddy-times',
+    title: 'The FitBuddy Times',
+    summary: 'A light-hearted dispatch about the team building FitBuddyAI and the fitness habits behind it.'
+  },
+  {
+    slug: 'training-consistency',
+    title: 'Why Consistency Beats Perfect Plans',
+    summary: 'Small, repeatable sessions usually create better progress than waiting for the perfect routine.'
+  },
+  {
+    slug: 'recovery-basics',
+    title: 'Recovery Basics for Busy Weeks',
+    summary: 'Simple recovery habits that make it easier to stay on track when your schedule gets crowded.'
+  }
+];
+
+const BlogListPage: React.FC = () => {
+  return (
+    <div className="fb-news-root">
+      <header className="fb-masthead" role="banner">
+        <div className="masthead-left" aria-hidden>
+          <div className="newspaper-logo">🏋️‍♂️</div>
+        </div>
+        <div className="masthead-right">
+          <h1 className="paper-title">FitBuddy Blog</h1>
+          <div className="paper-sub">Stories, updates, and fitness notes from the team</div>
+        </div>
+      </header>
+
+      <main className="fb-paper card" role="main">
+        <section className="lead">
+          <div className="lead-text">
+            <h2 className="lead-title">Latest posts</h2>
+            <p className="lead-dek">A small reading desk for updates, training ideas, and the occasional behind-the-scenes story.</p>
+          </div>
+        </section>
+
+        <div className="story story-list">
+          {posts.map((post) => (
+            <article key={post.slug} className="encouragement story-card">
+              <strong>{post.title}</strong>
+              <p className="story-summary">{post.summary}</p>
+              <div className="story-actions">
+                <Link className="cta" to={`/blog/${post.slug}`}>Read post</Link>
+              </div>
+            </article>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default BlogListPage;
diff --git a/src/components/BlogPage.css b/src/components/BlogPage.css
index cac4109e..44a5a4c8 100644
--- a/src/components/BlogPage.css
+++ b/src/components/BlogPage.css
@@ -32,7 +32,10 @@
 .lead-dek{color:var(--text-medium);margin:0}
 .lead-text{max-width:760px}
 .story{column-count:2;column-gap:32px;font-size:15px;line-height:1.7;color:var(--text-dark)}
+.story-list{display:grid;gap:1rem}
+.story-card{display:grid;gap:0.5rem}
 .story p{margin:0 0 14px}
+.story-summary{margin:0}
 .encouragement{break-inside:avoid-column;margin-top:14px;padding:14px;background:linear-gradient(90deg, rgba(30,203,123,0.06), rgba(30,144,203,0.03));border-radius:10px;border:1px solid var(--border-light)}
 .encouragement p{margin:8px 0 0}
 .story-foot{column-span:all;margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
diff --git a/src/components/Footer.css b/src/components/Footer.css
index a581d47a..44016b7c 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -50,6 +50,12 @@
   .fb-bottom{flex-direction:column;gap:8px}
 }
 
+@media (max-width: 768px) {
+  .fitbuddy-footer {
+    padding-bottom: calc(124px + env(safe-area-inset-bottom));
+  }
+}
+
 /* Dark mode */
 .theme-dark .fitbuddy-footer,
 body.theme-dark .fitbuddy-footer {
diff --git a/src/components/GeminiChatPage.css b/src/components/GeminiChatPage.css
index c3533d31..0d324ad0 100644
--- a/src/components/GeminiChatPage.css
+++ b/src/components/GeminiChatPage.css
@@ -99,6 +99,17 @@
 }
 .msg-text{white-space:pre-wrap;font-size:15px;line-height:1.5}
 
+.msg-link{
+  color:#1e90cb;
+  font-weight:700;
+  text-decoration:underline;
+  text-underline-offset:2px;
+}
+
+.msg-link:hover{
+  filter:brightness(0.92);
+}
+
 .msg-user{
   align-self:flex-end;
   background:linear-gradient(90deg,var(--color-primary),#16b967);
@@ -239,7 +250,6 @@ body.theme-dark .gemini-header{
 }
 body.theme-dark .gemini-sub{ color: var(--text-medium); }
 body.theme-dark .gemini-chat{
-  scrollbar-color: rgba(255,255,255,0.18) transparent;
   background:
     radial-gradient(circle, rgba(255,255,255,0.28) 1px, rgba(255,255,255,0) 1px),
     linear-gradient(180deg,#111a27,#0f1624) !important;
@@ -247,6 +257,23 @@ body.theme-dark .gemini-chat{
   background-position: 0 0, 0 0;
   background-repeat: repeat, repeat;
 }
+body.theme-dark .gemini-chat::-webkit-scrollbar {
+  width: 10px;
+}
+body.theme-dark .gemini-chat::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.theme-dark .gemini-chat::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.18);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+body.theme-dark .gemini-chat::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.28);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
 body.theme-dark .msg{
   box-shadow: 0 10px 30px rgba(0,0,0,0.45);
 }
@@ -268,6 +295,9 @@ body.theme-dark .msg-user .logo .initials{ color: #9fd6ff; }
 body.theme-dark .msg-assistant .logo{
   background: linear-gradient(135deg, #0fb77a, #1b9fe0);
 }
+body.theme-dark .msg-link{
+  color:#8fd0ff;
+}
 body.theme-dark .gemini-input{
   background: linear-gradient(90deg, rgba(8,14,24,0.92), rgba(12,18,30,0.92));
   border-top: 1px solid rgba(255,255,255,0.06);
diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index 43858cec..0209ac69 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -1,13 +1,89 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
 import './GeminiChatPage.css';
 import { getAITextResponse } from '../services/aiService';
 import BackgroundDots from './BackgroundDots';
 // ActionConfirmModal removed: actions are applied automatically
 
 const ASSISTANT_GREETING = 'Hi! I am AI Coach — your AI Fitness assistant powered by Google Gemini. I can answer questions about your workouts, goals, and progress.';
-const MAX_PLAN_SNIPPET_CHARS = 500; // keep prompt small to return responses faster
+const normalizeChatText = (text: string) => {
+  if (/currently under development/i.test(String(text))) {
+    return 'AI Coach is running in demo mode right now. Configure GEMINI_API_KEY for full production responses, or ask for workout ideas, recovery tips, or a beginner-friendly routine.';
+  }
+  return text;
+};
+const MAX_PLAN_SNIPPET_CHARS = 10000; // allow richer workoutPlan context for chat personalization
 const MAX_HISTORY_MESSAGES = 12; // limit context length to speed up LLM responses
 
+const isInternalChatLink = (href: string) => href.startsWith('/') && !href.startsWith('//');
+
+const trimTrailingPunctuation = (value: string) => {
+  let end = value.length;
+  while (end > 0 && '.,!?;:)]}'.includes(value[end - 1])) {
+    end -= 1;
+  }
+  return value.slice(0, end);
+};
+
+const renderChatText = (text: string) => {
+  const output: Array<React.ReactNode> = [];
+  const source = String(text || '');
+  const tokenRegex = /(\[([^\]]+)\]\(([^)]+)\))|(https?:\/\/[^\s<>()]+|\/(?!\/)[^\s<>()]+)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = tokenRegex.exec(source)) !== null) {
+    if (match.index > lastIndex) {
+      output.push(source.slice(lastIndex, match.index));
+    }
+
+    const markdownLabel = match[2];
+    const markdownHref = match[3];
+    const rawHref = match[4];
+    const href = trimTrailingPunctuation(markdownHref || rawHref || '');
+    const trailing = (markdownHref || rawHref || '').slice(href.length);
+    const key = `chat-link-${output.length}`;
+
+    if (markdownLabel && markdownHref) {
+      output.push(
+        isInternalChatLink(href) ? (
+          <Link key={key} to={href} className="msg-link">
+            {markdownLabel}
+          </Link>
+        ) : (
+          <a key={key} href={href} target="_blank" rel="noreferrer" className="msg-link">
+            {markdownLabel}
+          </a>
+        )
+      );
+    } else if (href) {
+      output.push(
+        isInternalChatLink(href) ? (
+          <Link key={key} to={href} className="msg-link">
+            {href}
+          </Link>
+        ) : (
+          <a key={key} href={href} target="_blank" rel="noreferrer" className="msg-link">
+            {href}
+          </a>
+        )
+      );
+    }
+
+    if (trailing) {
+      output.push(trailing);
+    }
+
+    lastIndex = tokenRegex.lastIndex;
+  }
+
+  if (lastIndex < source.length) {
+    output.push(source.slice(lastIndex));
+  }
+
+  return output.length ? output : source;
+};
+
 // Static example prompt to avoid re-allocating large strings on every send
 const EXAMPLE_PROMPT = (() => {
   const examplesLines = [
@@ -220,6 +296,14 @@ const GeminiChatPage: React.FC<GeminiChatPageProps> = ({ userData }) => {
   const isRestoringRef = useRef(false);
 
   useEffect(() => {
+    setMessages(current => {
+      const normalized = current.map(message => {
+        const text = normalizeChatText(message.text);
+        return text === message.text ? message : { ...message, text };
+      });
+      const changed = normalized.some((message, index) => message !== current[index]);
+      return changed ? normalized : current;
+    });
     // Scroll to bottom when messages change
     if (listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
@@ -235,7 +319,7 @@ const GeminiChatPage: React.FC<GeminiChatPageProps> = ({ userData }) => {
           const raw = sessionStorage.getItem(`fitbuddyai_chat_${uid}`);
         if (!raw) return;
         const parsed = JSON.parse(raw);
-        if (Array.isArray(parsed) && parsed.length) setMessages(parsed);
+          if (Array.isArray(parsed) && parsed.length) setMessages(parsed.map((message: any) => ({ ...message, text: normalizeChatText(message.text) })));
       } catch (err) {
         // ignore
       }
@@ -392,15 +476,11 @@ const GeminiChatPage: React.FC<GeminiChatPageProps> = ({ userData }) => {
   const summarizeUser = (u: any) => {
     if (!u) return 'No user data available.';
     try {
-      const safe = {
-        id: u.id,
-        username: u.username,
-        age: u.age,
-        goals: u.goals || u.preferences || [],
-        fitnessLevel: u.fitnessLevel || u.fitness_level || 'unknown',
-        energy: u.energy ?? null,
-        streak: u.streak ?? null
-      };
+      const sensitiveKey = /(token|access_token|refresh_token|jwt|password|secret|authorization|cookie)/i;
+      const safe = JSON.parse(JSON.stringify(u, (key, value) => {
+        if (sensitiveKey.test(String(key))) return undefined;
+        return value;
+      }));
       return JSON.stringify(safe);
     } catch {
       return 'User data present but could not be summarized.';
@@ -692,7 +772,7 @@ const GeminiChatPage: React.FC<GeminiChatPageProps> = ({ userData }) => {
                     )}
                   </div>
                 )}
-                <div className="msg-text">{m.text}</div>
+                <div className="msg-text">{renderChatText(m.text)}</div>
               </div>
             );
           })}
diff --git a/src/components/Header.css b/src/components/Header.css
index e6da69e8..44999759 100644
--- a/src/components/Header.css
+++ b/src/components/Header.css
@@ -532,6 +532,380 @@ body.theme-dark .explore-footer {
   border-top: 1px solid #1f2a36;
 }
 
+/* Explore drawer refresh */
+.explore-drawer {
+  top: 12px;
+  left: 12px;
+  width: min(420px, calc(100vw - 24px));
+  height: calc(100dvh - 24px);
+  max-height: calc(100dvh - 24px);
+  padding: 16px;
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 247, 0.96));
+  border-right: 1px solid rgba(30, 203, 123, 0.16);
+  box-shadow: 0 28px 80px rgba(20, 66, 52, 0.18);
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.explore-drawer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at top left, rgba(30, 203, 123, 0.14), transparent 30%),
+    radial-gradient(circle at bottom right, rgba(30, 144, 203, 0.12), transparent 28%);
+}
+
+.explore-drawer-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-bottom: 10px;
+}
+
+.explore-drawer-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 4px 4px;
+}
+
+.explore-drawer-eyebrow {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-primary, #1ecb7b);
+}
+
+.explore-drawer-title {
+  font-size: 1.45rem;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+  color: var(--text-dark, #222);
+}
+
+.explore-drawer-subtitle {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--text-medium, #555);
+}
+
+.explore-profile {
+  display: grid;
+  grid-template-columns: 74px 1fr;
+  gap: 14px;
+  align-items: center;
+  padding: 16px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+.explore-profile-image {
+  width: 74px;
+  height: 74px;
+  border-radius: 24px;
+  border: 2px solid rgba(15, 23, 42, 0.08);
+  object-fit: cover;
+  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
+}
+
+.explore-profile-text {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.explore-profile-name {
+  font-weight: 900;
+  font-size: 1.02rem;
+  line-height: 1.2;
+  color: var(--text-dark, #222);
+}
+
+.explore-profile-subtitle {
+  font-size: 0.92rem;
+  line-height: 1.4;
+  color: var(--text-medium, #555);
+}
+
+.explore-profile-counters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.explore-profile .header-counter {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 999px;
+  box-shadow: none;
+  padding: 7px 10px;
+  min-width: 0;
+}
+
+.explore-profile .header-counter.streak {
+  border-color: rgba(255, 179, 71, 0.42);
+  background: rgba(255, 179, 71, 0.12);
+}
+
+.explore-profile .header-counter.energy {
+  border-color: rgba(30, 144, 203, 0.42);
+  background: rgba(30, 144, 203, 0.10);
+}
+
+.explore-profile .counter-value {
+  font-size: 0.95rem;
+  font-weight: 800;
+}
+
+.explore-profile-actions {
+  margin-top: 2px;
+}
+
+.explore-profile-actions .explore-profile-action-primary {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 0;
+  color: #fff;
+  background: linear-gradient(135deg, #1ecb7b, #12b46d);
+  box-shadow: 0 16px 34px rgba(18, 180, 109, 0.28);
+}
+
+.explore-profile-actions .explore-profile-action-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 36px rgba(18, 180, 109, 0.34);
+}
+
+.explore-profile-actions .explore-profile-action-primary:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.82);
+}
+
+.explore-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.explore-section-label {
+  padding: 0 6px;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(85, 85, 85, 0.82);
+}
+
+.explore-drawer-links {
+  display: grid;
+  gap: 10px;
+}
+
+.explore-drawer .explore-nav-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 15px;
+  text-align: left;
+  border-radius: 18px;
+  border: 1px solid rgba(15, 23, 42, 0.09);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 249, 0.96));
+  color: var(--text-dark, #222);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+}
+
+.explore-drawer .explore-nav-item:hover {
+  transform: translateX(3px);
+  border-color: rgba(30, 203, 123, 0.38);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 248, 243, 0.98));
+  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
+}
+
+.explore-drawer .explore-nav-item:active {
+  transform: translateX(1px) scale(0.99);
+}
+
+.explore-drawer .explore-nav-item:focus-visible {
+  outline: 2px solid rgba(30, 203, 123, 0.45);
+  outline-offset: 3px;
+}
+
+.explore-nav-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.explore-nav-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(30, 203, 123, 0.12), rgba(30, 144, 203, 0.10));
+  color: var(--color-primary, #1ecb7b);
+}
+
+.explore-nav-label {
+  min-width: 0;
+  font-size: 0.96rem;
+  font-weight: 800;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.explore-nav-badge.badge-circle {
+  min-width: 30px;
+  height: 30px;
+  font-size: 11px;
+  box-shadow: none;
+}
+
+.explore-account-section {
+  padding-top: 6px;
+}
+
+body.theme-dark .explore-drawer {
+  background: linear-gradient(180deg, rgba(14, 20, 33, 0.98), rgba(11, 18, 30, 0.96));
+  border-right-color: rgba(107, 196, 245, 0.18);
+  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
+}
+
+body.theme-dark .explore-drawer::after {
+  background:
+    radial-gradient(circle at top left, rgba(96, 165, 255, 0.16), transparent 30%),
+    radial-gradient(circle at bottom right, rgba(74, 222, 128, 0.12), transparent 28%);
+}
+
+body.theme-dark .explore-drawer-title,
+body.theme-dark .explore-profile-name,
+body.theme-dark .explore-nav-label {
+  color: #f4f7fb;
+}
+
+body.theme-dark .explore-drawer-subtitle,
+body.theme-dark .explore-profile-subtitle,
+body.theme-dark .explore-section-label {
+  color: rgba(233, 238, 245, 0.72);
+}
+
+body.theme-dark .explore-profile {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
+}
+
+body.theme-dark .explore-profile-image {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+body.theme-dark .explore-profile .header-counter {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+body.theme-dark .explore-profile .counter-value {
+  color: #f4f7fb;
+}
+
+body.theme-dark .explore-profile-action-primary {
+  box-shadow: 0 16px 34px rgba(17, 197, 143, 0.24);
+}
+
+body.theme-dark .explore-drawer .explore-nav-item {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
+  border-color: rgba(255, 255, 255, 0.08);
+  color: #e9eef5;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
+}
+
+body.theme-dark .explore-drawer .explore-nav-item:hover {
+  background: linear-gradient(180deg, rgba(96, 165, 255, 0.22), rgba(74, 222, 128, 0.14));
+  border-color: rgba(107, 196, 245, 0.28);
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36);
+}
+
+body.theme-dark .explore-nav-icon {
+  color: #69d6a2;
+  background: linear-gradient(135deg, rgba(96, 165, 255, 0.20), rgba(74, 222, 128, 0.14));
+}
+
+body.theme-dark .explore-drawer .explore-nav-item:focus-visible,
+body.theme-dark .explore-profile-actions .explore-profile-action-primary:focus-visible {
+  outline-color: rgba(255, 255, 255, 0.78);
+}
+
+@media (max-width: 760px) {
+  .explore-drawer {
+    top: 8px;
+    left: 8px;
+    width: min(92vw, 360px);
+    height: calc(100dvh - 16px);
+    max-height: calc(100dvh - 16px);
+    padding: 14px;
+    border-radius: 24px;
+  }
+
+  .explore-profile {
+    grid-template-columns: 64px 1fr;
+    padding: 14px;
+  }
+
+  .explore-profile-image {
+    width: 64px;
+    height: 64px;
+    border-radius: 20px;
+  }
+
+  .explore-drawer-title {
+    font-size: 1.25rem;
+  }
+
+  .explore-drawer .explore-nav-item {
+    padding: 13px 14px;
+  }
+}
+
+@media (max-width: 420px) {
+  .explore-drawer {
+    width: calc(100vw - 12px);
+  }
+
+  .explore-profile-counters {
+    gap: 6px;
+  }
+
+  .explore-drawer .explore-nav-item {
+    gap: 10px;
+  }
+}
+
 /* Brand Section */
 /* Page Title Section */
 /* Page title sits to the left in the header (new layout) */
@@ -969,3 +1343,188 @@ body.theme-dark .profile-section {
   border: none !important;
   box-shadow: none;
 }
+
+.mobile-nav-dock {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    position: relative;
+    top: auto;
+    z-index: 2400;
+    min-height: 0;
+    background: transparent;
+    border-bottom: 0;
+    box-shadow: none;
+  }
+
+  .header-container {
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    gap: 0;
+    overflow: visible;
+  }
+
+  .header-left {
+    width: 0;
+    min-width: 0;
+    height: 0;
+    gap: 0;
+    overflow: visible;
+  }
+
+  .page-title,
+  .header-counters,
+  .header-nav {
+    display: none;
+  }
+
+  .profile-section {
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
+
+  .profile-image {
+    width: 40px;
+    height: 40px;
+  }
+
+  .dropdown-button {
+    display: none;
+  }
+
+  .explore-button {
+    display: none;
+  }
+
+  .mobile-nav-dock {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 6px;
+    position: fixed;
+    left: 10px;
+    right: 10px;
+    bottom: calc(10px + env(safe-area-inset-bottom));
+    padding: 8px;
+    border-radius: 22px;
+    background: rgba(255, 255, 255, 0.94);
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    z-index: 2300;
+  }
+
+  .mobile-nav-button {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 10px 4px 9px;
+    border: 0;
+    border-radius: 16px;
+    background: transparent;
+    color: var(--text-medium, #555);
+    cursor: pointer;
+    min-width: 0;
+    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+  }
+
+  .mobile-nav-button:hover,
+  .mobile-nav-button:focus-visible {
+    transform: translateY(-1px);
+    background: rgba(30, 203, 123, 0.08);
+    color: var(--text-dark, #222);
+    box-shadow: inset 0 0 0 1px rgba(30, 203, 123, 0.12);
+  }
+
+  .mobile-nav-button.active {
+    color: #fff;
+    background: linear-gradient(135deg, rgba(30, 203, 123, 0.96), rgba(30, 144, 203, 0.92));
+    box-shadow: 0 14px 26px rgba(30, 203, 123, 0.22);
+  }
+
+  .mobile-nav-icon {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+  }
+
+  .mobile-nav-badge {
+    position: absolute;
+    top: -8px;
+    right: -12px;
+    min-width: 18px;
+    height: 18px;
+    font-size: 10px;
+    border-color: rgba(255, 255, 255, 0.35);
+    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
+  }
+
+  .mobile-nav-label {
+    font-size: 10px;
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: 0.02em;
+    text-transform: none;
+  }
+
+  body.theme-dark .mobile-nav-dock {
+    background: rgba(11, 18, 30, 0.92);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.48);
+  }
+
+  body.theme-dark .mobile-nav-button {
+    color: rgba(233, 238, 245, 0.76);
+  }
+
+  body.theme-dark .mobile-nav-button:hover,
+  body.theme-dark .mobile-nav-button:focus-visible {
+    background: rgba(255, 255, 255, 0.05);
+    color: #f4f7fb;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+
+  body.theme-dark .mobile-nav-button.active {
+    color: #0b172a;
+    background: linear-gradient(135deg, rgba(107, 214, 162, 0.96), rgba(107, 196, 245, 0.94));
+  }
+
+  .explore-drawer {
+    top: 8px;
+    left: 8px;
+    width: calc(100vw - 16px);
+    height: calc(100dvh - 16px);
+    max-height: calc(100dvh - 16px);
+    padding: 72px 14px 20px;
+    border-radius: 24px;
+  }
+
+  .explore-drawer-content {
+    width: 100%;
+  }
+
+  .explore-drawer button,
+  .explore-profile-actions button {
+    min-height: 48px;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-container {
+    padding: 8px 10px;
+  }
+
+  .explore-drawer {
+    padding-inline: 12px;
+  }
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0604c8e6..d3f4e17b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Flame, Sparkles } from 'lucide-react';
+import { Flame, Sparkles, Home, Dumbbell, BookOpen, ClipboardList, Calendar, Trophy, MessageCircle, Newspaper, ShoppingBag, Settings, LogIn, User, Menu, type LucideIcon } from 'lucide-react';
 import { loadQuestionnaireProgress, clearUserData, clearQuestionnaireProgress, loadAssessmentData, loadWorkoutPlan } from '../services/localStorage';
 import './Header.css';
 import { backupAndDeleteSensitive } from '../services/cloudBackupService';
@@ -40,6 +40,16 @@ const getUpcomingWorkoutCount = (plan: any | null): number => {
   }, 0);
 };
 
+type DrawerNavItem = {
+  key: string;
+  label: string;
+  Icon: LucideIcon;
+  onClick: () => void;
+  badge?: string | number;
+  className?: string;
+  ariaLabel?: string;
+};
+
 const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -56,9 +66,19 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
   const toggleExploreDrawer = React.useCallback(() => {
     setDrawerState((prev) => (prev === 'open' ? 'closing' : 'open'));
   }, []);
+  const openExploreDrawer = React.useCallback(() => {
+    setDrawerState('open');
+  }, []);
   const closeExploreDrawer = React.useCallback(() => {
     setDrawerState((prev) => (prev === 'open' ? 'closing' : prev));
   }, []);
+  const handleMobileMenuButton = React.useCallback(() => {
+    if (isDrawerVisible) {
+      setDrawerState('closed');
+      return;
+    }
+    openExploreDrawer();
+  }, [isDrawerVisible, openExploreDrawer]);
   const handleDrawerTransitionEnd = React.useCallback((event: React.TransitionEvent<HTMLDivElement>) => {
     if (event.propertyName !== 'transform') return;
     setDrawerState((prev) => (prev === 'closing' ? 'closed' : prev));
@@ -369,6 +389,62 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
 
   const isActive = (path: string) => location.pathname === path;
 
+  const drawerPrimaryItems: DrawerNavItem[] = [
+    { key: 'home', label: 'Home', Icon: Home, onClick: () => { closeExploreDrawer(); navigate('/?intro=0'); } },
+    { key: 'workouts', label: 'Workout Library', Icon: Dumbbell, onClick: () => { closeExploreDrawer(); navigate('/workouts'); } },
+    {
+      key: 'saved-workouts',
+      label: 'Saved Workouts',
+      Icon: BookOpen,
+      badge: savedWorkoutCount,
+      className: 'saved-workouts-link',
+      ariaLabel: `Saved Workouts (${savedWorkoutCount} saved)`,
+      onClick: () => { closeExploreDrawer(); navigate('/library'); }
+    },
+    { key: 'assessment', label: 'Assessment', Icon: ClipboardList, onClick: () => { closeExploreDrawer(); navigate('/questionnaire'); } },
+    {
+      key: 'calendar',
+      label: 'Calendar',
+      Icon: Calendar,
+      badge: upcomingWorkoutCount,
+      className: 'calendar-link',
+      ariaLabel: `Calendar (${upcomingWorkoutCount} upcoming workouts)`,
+      onClick: () => { closeExploreDrawer(); navigate('/calendar'); }
+    },
+    ...(isSignedIn ? [{ key: 'achievements', label: 'Achievements', Icon: Trophy, onClick: () => { closeExploreDrawer(); navigate('/profile/achievements'); } }] : []),
+    {
+      key: 'chat',
+      label: 'Chat',
+      Icon: MessageCircle,
+      onClick: () => {
+        try { window.dispatchEvent(new CustomEvent('fitbuddyai-open-chat')); } catch {}
+        closeExploreDrawer();
+        navigate('/chat');
+      }
+    },
+    { key: 'blog', label: 'Blog', Icon: Newspaper, onClick: () => { closeExploreDrawer(); navigate('/blog'); } },
+    { key: 'shop', label: 'Shop', Icon: ShoppingBag, className: 'dropdown-shop', onClick: () => { closeExploreDrawer(); navigate('/shop'); } }
+  ];
+
+  const drawerAccountItems: DrawerNavItem[] = isSignedIn
+    ? [{ key: 'settings', label: 'Settings', Icon: Settings, onClick: () => { closeExploreDrawer(); navigate('/profile/settings'); } }]
+    : [];
+
+  const mobileNavItems = [
+    { key: 'home', label: 'Home', Icon: Home, onClick: () => navigate('/?intro=0'), active: location.pathname === '/' },
+    { key: 'workouts', label: 'Workouts', Icon: Dumbbell, onClick: () => navigate('/workouts'), active: location.pathname === '/workouts' },
+    {
+      key: 'calendar',
+      label: 'Calendar',
+      Icon: Calendar,
+      badge: upcomingWorkoutCount > 0 ? upcomingWorkoutCount : undefined,
+      onClick: () => navigate('/calendar'),
+      active: location.pathname === '/calendar'
+    },
+    { key: 'chat', label: 'Chat', Icon: MessageCircle, onClick: () => navigate('/chat'), active: location.pathname === '/chat' },
+    { key: 'more', label: 'Menu', Icon: Menu, onClick: handleMobileMenuButton, active: drawerState === 'open' }
+  ];
+
   return (
     <header className="app-header">
       <div className="header-container">
@@ -394,6 +470,11 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
               onTransitionEnd={handleDrawerTransitionEnd}
             >
               <div className="explore-drawer-content">
+                <div className="explore-drawer-header">
+                  <div className="explore-drawer-eyebrow">Explore</div>
+                  <div className="explore-drawer-title">Quick access</div>
+                  <p className="explore-drawer-subtitle">Move through the app without leaving the header.</p>
+                </div>
                 <div className="explore-profile">
                   <img
                     src={tryOnAvatar || (currentUser && currentUser.avatar && currentUser.avatar.trim() ? currentUser.avatar : "/images/fitbuddy_head.png")}
@@ -405,6 +486,9 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
                     <div className="explore-profile-name">
                       {isSignedIn ? (((currentUser?.username && currentUser.username.trim()) || 'User')) : 'Sign in to personalize'}
                     </div>
+                    <div className="explore-profile-subtitle">
+                      {isSignedIn ? 'Your profile and counters' : 'Sign in to sync your progress'}
+                    </div>
                     {isSignedIn && (
                       <div className="explore-profile-counters">
                         <div className="header-counter streak">
@@ -418,60 +502,55 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
                       </div>
                     )}
                     <div className="explore-profile-actions">
-                      <button onClick={() => { closeExploreDrawer(); navigate(isSignedIn ? '/profile' : '/signin'); }}>
-                        {isSignedIn ? 'View Profile' : 'Sign In'}
+                      <button className="explore-profile-action-primary" onClick={() => { closeExploreDrawer(); navigate(isSignedIn ? '/profile' : '/signin'); }}>
+                        {isSignedIn ? <><User size={16} /> View Profile</> : <><LogIn size={16} /> Sign In</>}
                       </button>
                     </div>
                   </div>
                 </div>
-                <div className="explore-drawer-links">
-                  <button onClick={() => { closeExploreDrawer(); navigate('/?intro=0'); }}>Home</button>
-                  <button onClick={() => { closeExploreDrawer(); navigate('/workouts'); }}>Workout Library</button>
-                  <button
-                    className="saved-workouts-link"
-                    aria-label={`Saved Workouts (${savedWorkoutCount} saved)`}
-                    onClick={() => { closeExploreDrawer(); navigate('/library'); }}
-                  >
-                    <span>Saved Workouts</span>
-                    <span className="saved-workouts-badge badge-circle" aria-hidden="true">
-                      {savedWorkoutCount}
-                    </span>
-                  </button>
-                  <button onClick={() => { closeExploreDrawer(); navigate('/questionnaire'); }}>Assessment</button>
-                  <button
-                    className="calendar-link"
-                    aria-label={`Calendar (${upcomingWorkoutCount} upcoming workouts)`}
-                    onClick={() => { closeExploreDrawer(); navigate('/calendar'); }}
-                  >
-                    <span>Calendar</span>
-                    <span className="badge-circle" aria-hidden="true">
-                      {upcomingWorkoutCount}
-                    </span>
-                  </button>
-                  {isSignedIn && (
-                    <button onClick={() => { closeExploreDrawer(); navigate('/profile/achievements'); }}>Achievements</button>
-                  )}
-                  <button
-                    onClick={() => {
-                      try { window.dispatchEvent(new CustomEvent('fitbuddyai-open-chat')); } catch {}
-                      closeExploreDrawer();
-                      navigate('/chat');
-                    }}
-                  >
-                    Chat
-                  </button>
-                  <button onClick={() => { closeExploreDrawer(); navigate('/blog'); }}>Blog</button>
-                  {/* Pricing temporarily removed from the drawer; keep code for quick reinstatement. */}
-                  {false && (
-                    <button onClick={() => { closeExploreDrawer(); navigate('/pricing'); }}>Pricing</button>
-                  )}
-                  <button onClick={() => { closeExploreDrawer(); navigate('/shop'); }} >Shop</button>
-                  {isSignedIn && (
-                    <div className="explore-footer">
-                      <button onClick={() => { closeExploreDrawer(); navigate('/profile/settings'); }}>Settings</button>
-                    </div>
-                  )}
+                <div className="explore-section">
+                  <div className="explore-section-label">Navigate</div>
+                  <div className="explore-drawer-links">
+                    {drawerPrimaryItems.map(({ key, label, Icon, onClick, badge, className, ariaLabel }) => (
+                      <button
+                        key={key}
+                        className={className ? `explore-nav-item ${className}` : 'explore-nav-item'}
+                        aria-label={ariaLabel || label}
+                        onClick={onClick}
+                      >
+                        <span className="explore-nav-main">
+                          <span className="explore-nav-icon"><Icon size={16} /></span>
+                          <span className="explore-nav-label">{label}</span>
+                        </span>
+                        {badge !== undefined && (
+                          <span className="badge-circle explore-nav-badge" aria-hidden="true">
+                            {badge}
+                          </span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 </div>
+                {isSignedIn && drawerAccountItems.length > 0 && (
+                  <div className="explore-section explore-account-section">
+                    <div className="explore-section-label">Account</div>
+                    <div className="explore-drawer-links">
+                      {drawerAccountItems.map(({ key, label, Icon, onClick, ariaLabel }) => (
+                        <button
+                          key={key}
+                          className="explore-nav-item"
+                          aria-label={ariaLabel || label}
+                          onClick={onClick}
+                        >
+                          <span className="explore-nav-main">
+                            <span className="explore-nav-icon"><Icon size={16} /></span>
+                            <span className="explore-nav-label">{label}</span>
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -568,6 +647,29 @@ const Header: React.FC<HeaderProps> = ({ profileVersion, userData }) => {
             </div>
         </nav>
       </div>
+
+      <nav className="mobile-nav-dock" aria-label="Mobile navigation">
+        {mobileNavItems.map(({ key, label, Icon, onClick, badge, active }) => (
+          <button
+            key={key}
+            type="button"
+            className={`mobile-nav-button${active ? ' active' : ''}`}
+            aria-label={label}
+            aria-pressed={active}
+            onClick={onClick}
+          >
+            <span className="mobile-nav-icon" aria-hidden="true">
+              <Icon size={18} />
+              {badge !== undefined && (
+                <span className="badge-circle mobile-nav-badge" aria-hidden="true">
+                  {badge}
+                </span>
+              )}
+            </span>
+            <span className="mobile-nav-label">{label}</span>
+          </button>
+        ))}
+      </nav>
     </header>
   );
 };
diff --git a/src/components/HelpCenter.css b/src/components/HelpCenter.css
index cc9dfab1..caf7389b 100644
--- a/src/components/HelpCenter.css
+++ b/src/components/HelpCenter.css
@@ -1,98 +1,916 @@
-/* Modern Help Center styles — glassy, responsive, theme-aware */
-
-:root {
-  --hc-gap: 20px;
-  --hc-card-radius: 14px;
-}
-
-.hc-page { padding: 28px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: var(--text-dark); }
-
-/* HERO */
-.hc-hero { margin-bottom: 18px; }
-.hc-hero-inner { display:flex; gap: 20px; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
-.hc-brand { display:flex; gap: 12px; align-items:center; }
-.hc-brand-text h1 { font-size: 28px; margin: 0; }
-.hc-brand-text p { margin: 0; color: var(--text-medium); }
-
-.hc-search { width: 420px; max-width: 40%; }
-.hc-search-input { display:flex; gap:10px; align-items:center; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75)); box-shadow: 0 8px 28px var(--shadow-light); border: 1px solid var(--border-light); }
-.hc-search-input svg { color: var(--text-medium); }
-.hc-search-input input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: var(--text-dark); }
-.hc-search-hint { font-size: 12px; color: var(--text-medium); margin-top: 8px; }
-
-/* Grid layout: left | main | right */
-.hc-grid { display: grid; grid-template-columns: 260px 1fr 320px; gap: var(--hc-gap); max-width: 1200px; margin: 0 auto; }
-
-.hc-left, .hc-right { display:flex; flex-direction:column; gap: 16px; }
-.hc-main { display:flex; flex-direction:column; gap: 18px; }
-
-.hc-card { background: var(--background-white); border-radius: var(--hc-card-radius); padding: 16px; box-shadow: 0 10px 30px var(--shadow-light); border: 1px solid var(--border-light); }
-.hc-card.compact { padding: 12px; }
-.hc-card.spotlight { background: linear-gradient(135deg, rgba(30,203,123,0.06), rgba(30,144,203,0.04)); border: none; }
-
-.hc-popular { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:12px; }
-.hc-popular li { display:flex; flex-direction:column; }
-.hc-popular .link-like { background:none; border:0; padding:0; color:var(--primary-green); font-weight:700; cursor:pointer; text-align:left; }
-.hc-popular .muted { margin:4px 0 0 0; color:var(--text-medium); font-size:13px; }
-
-/* categories */
-.hc-cats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
-.hc-category { display:flex; gap:12px; align-items:center; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85)); padding: 14px; border-radius: 12px; transition: transform 180ms ease, box-shadow 180ms ease; border:1px solid var(--border-light); }
-.hc-category:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(16,24,32,0.12); }
-.hc-cat-icon { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--gradient-primary); color:#fff; flex:0 0 56px; }
-.hc-category h4 { margin:0 0 4px 0; }
-.hc-category .muted { margin: 0; color: var(--text-medium); font-size:13px; }
-
-/* FAQ */
-.hc-faq h2 { margin: 0 0 12px 0; }
-.accordion { display:flex; flex-direction:column; gap:10px; }
-.accordion-item { overflow: hidden; border-radius: 12px; border: 1px solid var(--border-light); background: var(--background-white); }
-.accordion-button { width: 100%; text-align: left; padding: 14px 16px; background: transparent; border: 0; display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
-.accordion-button:focus { outline: none; box-shadow: 0 0 0 3px rgba(30,203,123,0.15); border-radius: 8px; }
-.accordion-button .chev { margin-left: auto; transition: transform 220ms cubic-bezier(.2,.9,.25,1), color 160ms ease; color: var(--text-medium); }
-.accordion-item .accordion-panel { padding: 0 16px; color: var(--text-medium); font-size: 14px; line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height 260ms ease, opacity 200ms ease, padding 200ms ease; opacity: 0; }
-.accordion-item.open .accordion-button .chev { transform: rotate(-180deg); }
-.accordion-item.open .accordion-panel { max-height: 420px; padding: 12px 16px 14px 16px; opacity: 1; }
-
-/* Ensure chevron rotates smoothly and is visually prominent when open */
-.accordion-item .chev { transform-origin: center; }
-
-.guide-actions { display:flex; gap:8px; margin-top:12px; }
-.hc-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
-.hc-links a { color:var(--primary-green); font-weight:600; }
-
-/* Modal */
-.hc-modal-backdrop { position:fixed; inset:0; background: rgba(6,10,15,0.45); display:flex; align-items:center; justify-content:center; z-index:1200; padding:20px; }
-.hc-modal { background: var(--background-white); width:100%; max-width:860px; border-radius:12px; box-shadow: 0 40px 120px rgba(10,20,30,0.28); overflow:hidden; }
-.hc-modal.wide { padding-bottom: 12px; }
-.hc-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-light); }
-.hc-close { background:transparent; border:0; font-size:20px; cursor:pointer; }
-.hc-form { padding:18px 22px; display:flex; flex-direction:column; gap:12px; }
-.hc-form.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
-.hc-form .full { grid-column: 1 / -1; }
-.hc-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--text-dark); }
-.hc-form input, .hc-form textarea { padding:10px 12px; border-radius:8px; border:1px solid var(--border-light); font-size:14px; background: transparent; color: var(--text-dark); }
-.hc-actions { display:flex; gap:10px; justify-content:flex-end; padding-top:6px; }
-.hc-modal .btn { padding:10px 16px; border-radius:10px; }
-
-/* Small screens */
-@media (max-width: 992px) {
-  .hc-grid { grid-template-columns: 200px 1fr; grid-auto-rows: minmax(120px, auto); }
-  .hc-search { max-width: 46%; }
-}
-
-@media (max-width: 720px) {
-  .hc-hero-inner { flex-direction: column; align-items: stretch; gap:12px; }
-  .hc-grid { grid-template-columns: 1fr; }
-  .hc-search { width: 100%; }
-  .hc-cats { grid-template-columns: 1fr; }
-  .hc-form.grid { grid-template-columns: 1fr; }
-}
-
-/* Dark theme tweaks */
-body.theme-dark .hc-search-input { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-color: #1f2a36; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
-body.theme-dark .hc-card { background: var(--background-white); border-color: var(--border-light); box-shadow: 0 10px 36px var(--shadow-medium); }
-body.theme-dark .hc-category { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-color: #1f2a36; }
-body.theme-dark .hc-page { color: var(--text-dark); }
-body.theme-dark .hc-modal { background: var(--background-white); border-color: var(--border-light); }
+/* Help Center redesign: responsive, production-ready, theme-aware */
 
+.hc-page {
+  position: relative;
+  overflow: hidden;
+  padding: 28px;
+  color: var(--text-dark);
+  background:
+    radial-gradient(circle at top left, rgba(30, 203, 123, 0.12), transparent 26%),
+    radial-gradient(circle at top right, rgba(30, 144, 203, 0.12), transparent 28%),
+    linear-gradient(135deg, #f7f7f7 0%, #eef7ef 100%);
+  isolation: isolate;
+}
+
+.hc-page::before,
+.hc-page::after {
+  content: '';
+  position: absolute;
+  inset: auto;
+  border-radius: 999px;
+  pointer-events: none;
+  filter: blur(80px);
+  opacity: 0.55;
+  z-index: -1;
+}
+
+.hc-page::before {
+  top: -40px;
+  right: -100px;
+  width: 240px;
+  height: 240px;
+  background: rgba(255, 179, 71, 0.18);
+}
+
+.hc-page::after {
+  bottom: 40px;
+  left: -120px;
+  width: 280px;
+  height: 280px;
+  background: rgba(30, 203, 123, 0.16);
+}
+
+.hc-page .muted {
+  color: var(--text-medium);
+}
+
+.hc-hero,
+.hc-grid {
+  max-width: 1320px;
+  margin: 0 auto;
+}
+
+.hc-hero {
+  margin-bottom: 22px;
+}
+
+.hc-hero-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.95fr);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.hc-hero-copy,
+.hc-search-panel,
+.hc-card,
+.hc-article-card,
+.hc-category-card,
+.hc-modal {
+  background: var(--hc-surface);
+  border: 1px solid var(--hc-border);
+  box-shadow: var(--hc-shadow);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+}
+
+.hc-hero-copy {
+  padding: 28px;
+  border-radius: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.hc-brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.hc-brand-mark {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary, #1ecb7b), #1e90cb);
+  box-shadow: 0 18px 30px rgba(30, 203, 123, 0.25);
+}
+
+.hc-eyebrow {
+  margin: 0 0 4px;
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-primary, #1ecb7b);
+  font-weight: 800;
+}
+
+.hc-brand h1,
+.hc-section h2,
+.hc-feature-card h2,
+.hc-card h2,
+.hc-modal h3 {
+  margin: 0;
+  color: var(--text-dark);
+}
+
+.hc-brand h1 {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1.04;
+  letter-spacing: -0.03em;
+  max-width: 11ch;
+}
+
+.hc-subtitle {
+  margin: 0;
+  max-width: 60ch;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--text-medium);
+}
+
+.hc-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.hc-page .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 16px;
+  padding: 0.9rem 1.2rem;
+  font-weight: 700;
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+
+.hc-page .btn:hover {
+  transform: translateY(-2px);
+}
+
+.hc-page .btn-primary {
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary, #1ecb7b), #19b56d);
+  box-shadow: 0 16px 28px rgba(30, 203, 123, 0.2);
+}
+
+.hc-page .btn-secondary {
+  color: var(--text-dark);
+  background: rgba(255, 255, 255, 0.72);
+  border-color: var(--hc-border);
+}
+
+.hc-page .btn-accent {
+  color: #fff;
+  background: linear-gradient(135deg, #1e90cb, #1477ac);
+  box-shadow: 0 16px 28px rgba(30, 144, 203, 0.18);
+}
+
+.hc-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.hc-stat {
+  border-radius: 20px;
+  padding: 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78));
+  border: 1px solid var(--hc-border);
+}
+
+.hc-stat span {
+  display: inline-block;
+  margin-bottom: 6px;
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: var(--text-dark);
+}
+
+.hc-stat p {
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  color: var(--text-medium);
+}
+
+.hc-search-panel {
+  padding: 22px;
+  border-radius: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+}
+
+.hc-search-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: var(--hc-surface-strong);
+  border: 1px solid var(--hc-border);
+}
+
+.hc-search-box svg {
+  color: var(--text-medium);
+  flex-shrink: 0;
+}
+
+.hc-search-box input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--text-dark);
+  font-size: 0.98rem;
+}
+
+.hc-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.hc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;
+  border: 1px solid var(--hc-border);
+  background: var(--hc-chip-bg);
+  color: var(--text-medium);
+  padding: 0.6rem 0.9rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.hc-chip.active {
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary, #1ecb7b), #1e90cb);
+  box-shadow: 0 12px 24px rgba(30, 203, 123, 0.22);
+}
+
+.hc-search-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--text-medium);
+  font-size: 0.92rem;
+}
+
+.hc-reset,
+.hc-inline-action,
+.hc-close,
+.hc-popular-item {
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.hc-reset {
+  padding: 0;
+  color: var(--color-primary, #1ecb7b);
+  font-weight: 700;
+}
+
+.hc-search-tip {
+  color: var(--text-medium);
+}
+
+.hc-grid {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr) 320px;
+  gap: 18px;
+}
+
+.hc-sidebar,
+.hc-main {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.hc-card {
+  border-radius: 24px;
+  padding: 20px;
+}
+
+.hc-card-soft,
+.hc-feature-card,
+.hc-resource-card {
+  background: var(--hc-surface);
+}
+
+.hc-card-head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.hc-card-head h2 {
+  font-size: 1.18rem;
+}
+
+.hc-card-head p {
+  margin: 0;
+}
+
+.hc-popular-list,
+.hc-support-stack,
+.hc-resource-list,
+.hc-feature-list,
+.hc-article-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hc-popular-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 0;
+  color: var(--text-dark);
+  text-align: left;
+  border-bottom: 1px solid rgba(128, 144, 160, 0.14);
+}
+
+.hc-popular-item:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.hc-support-link,
+.hc-resource-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-dark);
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.hc-support-link-large {
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--hc-border);
+  justify-content: center;
+}
+
+.hc-support-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-medium);
+  font-size: 0.92rem;
+}
+
+.hc-main {
+  min-width: 0;
+}
+
+.hc-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.hc-section-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: end;
+  flex-wrap: wrap;
+}
+
+.hc-section-kicker {
+  margin: 0 0 6px;
+  color: var(--color-primary, #1ecb7b);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 800;
+  font-size: 0.78rem;
+}
+
+.hc-section h2 {
+  font-size: clamp(1.3rem, 2vw, 1.7rem);
+}
+
+.hc-category-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.hc-category-card {
+  width: 100%;
+  padding: 16px;
+  border-radius: 22px;
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  text-align: left;
+  color: var(--text-dark);
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+}
+
+.hc-category-card:hover,
+.hc-category-card.active {
+  transform: translateY(-4px);
+  border-color: rgba(30, 203, 123, 0.35);
+  box-shadow: 0 22px 44px rgba(16, 24, 32, 0.14);
+}
+
+.hc-category-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary, #1ecb7b), #1e90cb);
+}
+
+.hc-category-copy h3,
+.hc-article-card h3,
+.hc-feature-card h2,
+.hc-modal h3 {
+  margin: 0;
+}
+
+.hc-category-copy p,
+.hc-article-card p,
+.hc-feature-card p,
+.hc-modal p {
+  margin: 0;
+}
+
+.hc-card-arrow {
+  color: var(--text-medium);
+}
+
+.hc-article-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.hc-article-card {
+  position: relative;
+  overflow: hidden;
+  padding: 20px;
+  border-radius: 24px;
+}
+
+.hc-article-card::before {
+  content: '';
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 4px;
+  background: var(--hc-accent);
+}
+
+.hc-article-card.accent-green { --hc-accent: linear-gradient(90deg, var(--color-primary, #1ecb7b), #75df9e); }
+.hc-article-card.accent-blue { --hc-accent: linear-gradient(90deg, #1e90cb, #77c6f3); }
+.hc-article-card.accent-orange { --hc-accent: linear-gradient(90deg, #ffb347, #ffce8b); }
+
+.hc-article-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.hc-article-tag {
+  margin-bottom: 4px;
+  color: var(--color-primary, #1ecb7b);
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 800;
+}
+
+.hc-article-index {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(30, 203, 123, 0.1);
+  color: var(--color-primary, #1ecb7b);
+  font-weight: 800;
+  font-size: 0.78rem;
+  white-space: nowrap;
+}
+
+.hc-article-list {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--text-medium);
+  line-height: 1.6;
+}
+
+.hc-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.hc-card-actions-stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.hc-empty-state {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 24px;
+  background: var(--hc-surface);
+  border: 1px dashed var(--hc-border);
+}
+
+.hc-feature-list {
+  padding-left: 18px;
+  margin: 14px 0 0;
+  color: var(--text-medium);
+  line-height: 1.6;
+}
+
+.hc-resource-list {
+  gap: 10px;
+}
+
+.hc-resource-link {
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.66);
+  border: 1px solid var(--hc-border);
+  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.hc-resource-link:hover,
+.hc-support-link-large:hover {
+  transform: translateY(-2px);
+  border-color: rgba(30, 203, 123, 0.34);
+  box-shadow: 0 16px 28px rgba(16, 24, 32, 0.12);
+}
+
+.hc-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgba(4, 9, 15, 0.55);
+}
+
+.hc-modal {
+  width: min(760px, 100%);
+  border-radius: 28px;
+  overflow: hidden;
+  background: var(--hc-surface-strong);
+}
+
+.hc-modal-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 22px 24px 16px;
+  border-bottom: 1px solid var(--hc-border);
+}
+
+.hc-close {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  color: var(--text-medium);
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.hc-modal-body,
+.hc-form {
+  padding: 22px 24px 24px;
+}
+
+.hc-success-state {
+  display: grid;
+  gap: 16px;
+}
+
+.hc-success-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: linear-gradient(135deg, var(--color-primary, #1ecb7b), #1e90cb);
+}
+
+.hc-support-actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.hc-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.hc-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.hc-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--text-dark);
+  font-weight: 700;
+}
+
+.hc-form input,
+.hc-form textarea {
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid var(--hc-border);
+  background: var(--hc-surface);
+  color: var(--text-dark);
+  padding: 0.95rem 1rem;
+  font: inherit;
+  resize: vertical;
+}
+
+.hc-form input:focus,
+.hc-form textarea:focus,
+.hc-search-box input:focus {
+  outline: none;
+  border-color: rgba(30, 203, 123, 0.45);
+  box-shadow: 0 0 0 4px rgba(30, 203, 123, 0.12);
+}
+
+.hc-status {
+  padding: 12px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--hc-border);
+  color: var(--text-medium);
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.hc-status.submitting {
+  border-color: rgba(30, 144, 203, 0.26);
+  color: #1e90cb;
+}
+
+.hc-status.success {
+  border-color: rgba(30, 203, 123, 0.28);
+  color: var(--color-primary, #1ecb7b);
+}
+
+.hc-status.error {
+  border-color: rgba(255, 94, 94, 0.3);
+  color: #d14a4a;
+}
+
+.hc-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 2px;
+}
+
+.hc-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hc-accordion-item {
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid var(--hc-border);
+  background: var(--hc-surface);
+}
+
+.hc-accordion-button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+  text-align: left;
+  padding: 18px 20px;
+  color: var(--text-dark);
+  font-weight: 800;
+}
+
+.hc-accordion-icon {
+  color: var(--text-medium);
+  transition: transform 180ms ease;
+}
+
+.hc-accordion-item.open .hc-accordion-icon {
+  transform: rotate(180deg);
+}
+
+.hc-accordion-panel {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  padding: 0 20px;
+  color: var(--text-medium);
+  line-height: 1.7;
+  transition: max-height 220ms ease, opacity 180ms ease, padding 180ms ease;
+}
+
+.hc-accordion-item.open .hc-accordion-panel {
+  max-height: 240px;
+  opacity: 1;
+  padding: 0 20px 18px;
+}
+
+.hc-inline-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 0;
+  color: var(--color-primary, #1ecb7b);
+  font-weight: 800;
+}
+
+@media (max-width: 1180px) {
+  .hc-hero-shell,
+  .hc-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hc-sidebar {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .hc-sidebar-right {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .hc-page {
+    padding: 16px;
+  }
+
+  .hc-hero-copy,
+  .hc-search-panel,
+  .hc-card,
+  .hc-article-card,
+  .hc-category-card,
+  .hc-modal {
+    border-radius: 22px;
+  }
+
+  .hc-stats,
+  .hc-form-grid,
+  .hc-category-grid,
+  .hc-article-grid,
+  .hc-sidebar,
+  .hc-sidebar-right {
+    grid-template-columns: 1fr;
+  }
+
+  .hc-hero-actions,
+  .hc-card-actions,
+  .hc-support-actions-row,
+  .hc-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hc-category-card {
+    grid-template-columns: 56px minmax(0, 1fr);
+  }
+
+  .hc-card-arrow {
+    display: none;
+  }
+
+  .hc-section-head,
+  .hc-search-meta,
+  .hc-article-head {
+    align-items: start;
+    flex-direction: column;
+  }
+}
+
+body.theme-dark .hc-page {
+  color: #e9f2fb;
+  background:
+    radial-gradient(circle at top left, rgba(30, 203, 123, 0.18), transparent 26%),
+    radial-gradient(circle at top right, rgba(30, 144, 203, 0.18), transparent 30%),
+    linear-gradient(180deg, #06101a 0%, #08131f 54%, #050b12 100%);
+  --hc-surface: rgba(10, 18, 29, 0.82);
+  --hc-surface-strong: rgba(9, 16, 27, 0.96);
+  --hc-border: rgba(148, 163, 184, 0.18);
+  --hc-chip-bg: rgba(15, 24, 38, 0.86);
+  --hc-shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
+}
+
+body.theme-dark .hc-page::before {
+  background: rgba(30, 144, 203, 0.18);
+}
+
+body.theme-dark .hc-page::after {
+  background: rgba(30, 203, 123, 0.14);
+}
+
+body.theme-dark .hc-page .btn-secondary,
+body.theme-dark .hc-page .btn {
+  color: #e9f2fb;
+}
+
+body.theme-dark .hc-page .btn-secondary {
+  background: rgba(12, 20, 33, 0.8);
+}
+
+body.theme-dark .hc-stat,
+body.theme-dark .hc-search-box,
+body.theme-dark .hc-support-link-large,
+body.theme-dark .hc-resource-link,
+body.theme-dark .hc-status {
+  background: rgba(11, 19, 30, 0.78);
+}
+
+body.theme-dark .hc-page .muted,
+body.theme-dark .hc-stat p,
+body.theme-dark .hc-search-tip,
+body.theme-dark .hc-support-note,
+body.theme-dark .hc-accordion-panel,
+body.theme-dark .hc-resource-link {
+  color: #9fb0c2;
+}
+
+body.theme-dark .hc-brand h1,
+body.theme-dark .hc-section h2,
+body.theme-dark .hc-feature-card h2,
+body.theme-dark .hc-card h2,
+body.theme-dark .hc-modal h3,
+body.theme-dark .hc-category-copy h3,
+body.theme-dark .hc-article-card h3,
+body.theme-dark .hc-form label,
+body.theme-dark .hc-accordion-button,
+body.theme-dark .hc-support-link,
+body.theme-dark .hc-popular-item {
+  color: #ecf5ff;
+}
+
+body.theme-dark .hc-search-box input,
+body.theme-dark .hc-form input,
+body.theme-dark .hc-form textarea {
+  color: #ecf5ff;
+}
+
+body.theme-dark .hc-chip.active,
+body.theme-dark .hc-article-index,
+body.theme-dark .hc-success-icon,
+body.theme-dark .hc-brand-mark,
+body.theme-dark .hc-category-icon {
+  box-shadow: 0 18px 30px rgba(30, 203, 123, 0.18);
+}
+
+body.theme-dark .hc-popular-item {
+  border-bottom-color: rgba(148, 163, 184, 0.14);
+}
+
+body.theme-dark .hc-category-card:hover,
+body.theme-dark .hc-category-card.active,
+body.theme-dark .hc-resource-link:hover,
+body.theme-dark .hc-support-link-large:hover {
+  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.32);
+}
diff --git a/src/components/HelpCenter.tsx b/src/components/HelpCenter.tsx
index 453da4ee..bc0dd1da 100644
--- a/src/components/HelpCenter.tsx
+++ b/src/components/HelpCenter.tsx
@@ -1,124 +1,614 @@
-import { Dumbbell, Search } from 'lucide-react';
-import './HelpCenter.css';
-import { useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
 import { Link } from 'react-router-dom';
+import {
+  ArrowRight,
+  BookOpen,
+  CheckCircle2,
+  ChevronDown,
+  Clock3,
+  Copy,
+  Dumbbell,
+  ExternalLink,
+  Filter,
+  Mail,
+  MessageSquare,
+  Search,
+  Send,
+  ShieldCheck,
+  Sparkles,
+  Target,
+  WandSparkles,
+  type LucideIcon,
+} from 'lucide-react';
+import './HelpCenter.css';
+
+const SUPPORT_EMAIL = 'fitbuddyaig@gmail.com';
+const SUPPORT_WEBHOOK_URL = 'https://corsproxy.io/?key=7cf03de1&url=https://script.google.com/macros/s/AKfycbwFDdT0QVaP2jY8t4N0048PfQW_rYxB4noFaG-nExO9MZ5h3DCuNLUPNg3-qntT01tg/exec?gid=0';
+
+type Category = {
+  id: string;
+  title: string;
+  summary: string;
+  icon: LucideIcon;
+  keywords: string[];
+};
+
+type Article = {
+  id: string;
+  categoryId: string;
+  title: string;
+  summary: string;
+  bullets: string[];
+  keywords: string[];
+  routeLabel?: string;
+  routeTo?: string;
+  supportSubject: string;
+  supportMessage: string;
+  accent: 'green' | 'blue' | 'orange';
+};
+
+type Faq = {
+  id: string;
+  categoryId: string;
+  question: string;
+  answer: string;
+  keywords: string[];
+  supportSubject: string;
+  supportMessage: string;
+};
+
+const categories: Category[] = [
+  {
+    id: 'getting-started',
+    title: 'Getting Started',
+    summary: 'Create a plan, set goals, and launch your first week fast.',
+    icon: Sparkles,
+    keywords: ['start', 'setup', 'questionnaire', 'plan', 'onboarding'],
+  },
+  {
+    id: 'account',
+    title: 'Account & Sign-in',
+    summary: 'Restore access, verify email, and manage profile data safely.',
+    icon: ShieldCheck,
+    keywords: ['account', 'login', 'sign in', 'verify', 'restore', 'backup'],
+  },
+  {
+    id: 'workouts',
+    title: 'Workouts & Plans',
+    summary: 'Swap workouts, regenerate blocks, and keep your calendar moving.',
+    icon: Target,
+    keywords: ['workout', 'calendar', 'regenerate', 'swap', 'routine', 'plan'],
+  },
+  {
+    id: 'ai',
+    title: 'AI Assistant',
+    summary: 'Get better answers when the assistant needs more context.',
+    icon: WandSparkles,
+    keywords: ['ai', 'chat', 'assistant', 'gemini', 'prompt', 'response'],
+  },
+  {
+    id: 'privacy',
+    title: 'Privacy & Data',
+    summary: 'See how data is stored, backed up, and deleted when needed.',
+    icon: BookOpen,
+    keywords: ['privacy', 'data', 'delete', 'security', 'terms', 'policy'],
+  },
+];
+
+const articles: Article[] = [
+  {
+    id: 'first-plan',
+    categoryId: 'getting-started',
+    title: 'Build your first workout plan',
+    summary: 'Answer the setup questions, confirm your goals, and launch a plan that fits your schedule.',
+    bullets: [
+      'Go to the questionnaire and choose your training level, equipment, and weekly availability.',
+      'Review the generated plan before saving it to your calendar.',
+      'Return anytime to regenerate the plan when your goals change.',
+    ],
+    keywords: ['questionnaire', 'plan', 'setup', 'start', 'launch'],
+    routeLabel: 'Open questionnaire',
+    routeTo: '/questionnaire',
+    supportSubject: 'Help getting started with my first plan',
+    supportMessage: 'I need help creating my first workout plan. My goals and setup are below:\n\n',
+    accent: 'green',
+  },
+  {
+    id: 'restore-account',
+    categoryId: 'account',
+    title: 'Restore your account or backup',
+    summary: 'Sign back in, rehydrate your data, or ask support to help recover your plan.',
+    bullets: [
+      'Use your original sign-in method first so cloud-backed data can sync back automatically.',
+      'If you used local storage, check the restore options in settings before reaching out.',
+      'If recovery still fails, send support the email used for the account and the approximate creation date.',
+    ],
+    keywords: ['restore', 'recover', 'backup', 'sign in', 'account', 'sync'],
+    supportSubject: 'Help restoring my account or backup',
+    supportMessage: 'I cannot restore my account or backup. Please help me recover my data.\n\nEmail used:\n',
+    accent: 'blue',
+  },
+  {
+    id: 'calendar',
+    categoryId: 'workouts',
+    title: 'Edit your workout calendar',
+    summary: 'Update workout days, swap sessions, and keep the schedule realistic for your week.',
+    bullets: [
+      'Open the calendar and tap the workout you want to change.',
+      'Choose a swap or regeneration option that matches your available time.',
+      'Save the change and verify the updated week before leaving the page.',
+    ],
+    keywords: ['calendar', 'schedule', 'swap', 'edit', 'workout', 'week'],
+    routeLabel: 'Open chat for help',
+    routeTo: '/chat',
+    supportSubject: 'Help editing my workout calendar',
+    supportMessage: 'I need help editing my workout calendar. The issue is:\n\n',
+    accent: 'orange',
+  },
+  {
+    id: 'regenerate',
+    categoryId: 'workouts',
+    title: 'Regenerate or replace a workout',
+    summary: 'Swap a single session without rebuilding the whole plan.',
+    bullets: [
+      'Open the workout menu and select regenerate or replace.',
+      'Keep the training focus and duration similar so the week stays balanced.',
+      'Confirm the replacement before navigating away.',
+    ],
+    keywords: ['regenerate', 'replace', 'swap', 'session', 'workout', 'plan'],
+    supportSubject: 'Help regenerating a workout',
+    supportMessage: 'I want help regenerating a workout. Please review the session details below:\n\n',
+    accent: 'green',
+  },
+  {
+    id: 'ai-help',
+    categoryId: 'ai',
+    title: 'Get better answers from the AI assistant',
+    summary: 'Ask with more context when a response needs more detail or a clearer goal.',
+    bullets: [
+      'Mention your goal, available equipment, and any injuries or limitations.',
+      'Keep the prompt short and direct when asking for a workout adjustment.',
+      'If a reply looks off, ask a follow-up instead of restarting the conversation.',
+    ],
+    keywords: ['ai', 'chat', 'assistant', 'prompt', 'gemini', 'response'],
+    routeLabel: 'Open chat',
+    routeTo: '/chat',
+    supportSubject: 'AI assistant gave me an unclear answer',
+    supportMessage: 'The AI assistant needs a better answer for this question:\n\n',
+    accent: 'blue',
+  },
+  {
+    id: 'privacy',
+    categoryId: 'privacy',
+    title: 'Understand data, privacy, and deletion',
+    summary: 'Review where your information lives and how to request changes or removal.',
+    bullets: [
+      'Open the privacy policy for the current storage and retention details.',
+      'Check the terms page if you need the current service rules or user rights.',
+      'Contact support with the data request you want handled and the email on file.',
+    ],
+    keywords: ['privacy', 'policy', 'data', 'delete', 'terms', 'rights'],
+    routeLabel: 'Open privacy policy',
+    routeTo: '/privacy',
+    supportSubject: 'Privacy or data request',
+    supportMessage: 'I need help with privacy or data handling. Please review the request below:\n\n',
+    accent: 'orange',
+  },
+];
+
+const faqs: Faq[] = [
+  {
+    id: 'faq-plan',
+    categoryId: 'getting-started',
+    question: 'How do I get my personalized workout plan?',
+    answer: 'Open the questionnaire, answer the setup questions, and submit the form. The plan is generated from your goals, equipment, and availability.',
+    keywords: ['plan', 'questionnaire', 'start', 'generate'],
+    supportSubject: 'Question about generating my workout plan',
+    supportMessage: 'I need help generating a personalized workout plan.\n\n',
+  },
+  {
+    id: 'faq-workout',
+    categoryId: 'workouts',
+    question: 'Can I change workouts or difficulty?',
+    answer: 'Yes. Open the calendar, choose the workout, and pick a swap or regeneration option that matches your recovery and schedule.',
+    keywords: ['workout', 'difficulty', 'calendar', 'swap', 'regenerate'],
+    supportSubject: 'Question about changing a workout',
+    supportMessage: 'I need help changing a workout or difficulty level.\n\n',
+  },
+  {
+    id: 'faq-restore',
+    categoryId: 'account',
+    question: 'How do I restore my account or backups?',
+    answer: 'Sign in with the same account you used before, then check the restore flow in settings. If the plan still does not appear, contact support with the email on file.',
+    keywords: ['restore', 'backup', 'account', 'sign in', 'recovery'],
+    supportSubject: 'Question about restoring my account',
+    supportMessage: 'I need help restoring my account or backup.\n\n',
+  },
+  {
+    id: 'faq-privacy',
+    categoryId: 'privacy',
+    question: 'How is my data stored and protected?',
+    answer: 'Your plan data follows the app’s privacy policy. Review the privacy page for the current storage, backup, and deletion details.',
+    keywords: ['privacy', 'stored', 'protected', 'data', 'security'],
+    supportSubject: 'Question about privacy and stored data',
+    supportMessage: 'I need help understanding how my data is stored or protected.\n\n',
+  },
+];
+
+const quickFilters = [
+  { label: 'All', value: 'all' },
+  ...categories.map((category) => ({ label: category.title, value: category.id })),
+];
+
+function supportSummary(name: string, email: string, subject: string, message: string) {
+  return [
+    'FitBuddyAI support request',
+    '',
+    `Name: ${name}`,
+    `Email: ${email}`,
+    `Subject: ${subject}`,
+    '',
+    message,
+  ].join('\n');
+}
+
+function normalize(value: string) {
+  return value.trim().toLowerCase();
+}
+
+function matchesText(parts: string[], query: string) {
+  if (!query) {
+    return true;
+  }
+
+  return parts.some((part) => normalize(part).includes(query));
+}
 
 export default function HelpCenter() {
   const [query, setQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState('all');
   const [modalOpen, setModalOpen] = useState(false);
+  const [prefillSubject, setPrefillSubject] = useState('');
+  const [prefillMessage, setPrefillMessage] = useState('');
+  const resultsRef = useRef<HTMLElement | null>(null);
 
-  const [prefillSubject, setPrefillSubject] = useState<string | undefined>(undefined);
-  const [prefillMessage, setPrefillMessage] = useState<string | undefined>(undefined);
+  const searchTerm = normalize(query);
 
-  const openModal = (subject?: string, message?: string) => {
+  const filteredArticles = useMemo(() => {
+    return articles.filter((article) => {
+      const categoryMatches = activeCategory === 'all' || article.categoryId === activeCategory;
+      const textMatches = matchesText([article.title, article.summary, ...article.bullets, ...article.keywords], searchTerm);
+      return categoryMatches && textMatches;
+    });
+  }, [activeCategory, searchTerm]);
+
+  const filteredFaqs = useMemo(() => {
+    return faqs.filter((faq) => {
+      const categoryMatches = activeCategory === 'all' || faq.categoryId === activeCategory;
+      const textMatches = matchesText([faq.question, faq.answer, ...faq.keywords], searchTerm);
+      return categoryMatches && textMatches;
+    });
+  }, [activeCategory, searchTerm]);
+
+  const resultsCount = filteredArticles.length + filteredFaqs.length;
+
+  const openModal = (subject = 'Help request', message = '') => {
     setPrefillSubject(subject);
     setPrefillMessage(message);
     setModalOpen(true);
   };
 
-  const openModalWithSubject = (subject: string) => openModal(subject);
+  const openCategory = (categoryId: string) => {
+    setActiveCategory(categoryId);
+    if (categoryId === 'all') {
+      setQuery('');
+    } else {
+      const category = categories.find((item) => item.id === categoryId);
+      if (category) {
+        setQuery(category.title);
+      }
+    }
+
+    window.requestAnimationFrame(() => {
+      resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  };
+
+  const openSupportForArticle = (article: Article) => {
+    openModal(article.supportSubject, `${article.supportMessage}${article.title}\n\n`);
+  };
 
-  const categories = [
-    { id: 'start', title: 'Getting Started', desc: 'Create your profile and generate a plan.', icon: (<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v4l3 3"></path></svg>) },
-    { id: 'account', title: 'Account & Sign-in', desc: 'Manage sign-ins, backups and recovery.', icon: (<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>) },
-    { id: 'plans', title: 'Workouts & Plans', desc: 'Edit your calendar, swap workouts, and track progress.', icon: (<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"></rect><path d="M16 3v4"></path><path d="M8 3v4"></path></svg>) },
-    { id: 'privacy', title: 'Privacy & Data', desc: 'How your data is stored and secured.', icon: (<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h18"></path><path d="M3 6h18"></path><path d="M3 18h18"></path></svg>) }
-  ];
+  const openSupportForFaq = (faq: Faq) => {
+    openModal(faq.supportSubject, `${faq.supportMessage}${faq.question}\n\n`);
+  };
 
-  const faqs = [
-    { q: 'How do I get my personalized workout plan?', a: 'Complete the questionnaire accessible from the Get Started button. The AI will generate a plan based on your answers.' },
-    { q: 'Can I change workouts or difficulty?', a: 'Yes. On the calendar, tap a workout to see options for regenerating, swapping, or adjusting difficulty.' },
-    { q: 'How do I restore my account or backups?', a: 'If you signed up with an account, use Sign In to restore. If you used local storage, use the restore options in settings.' },
-    { q: 'How is my data stored and protected?', a: 'We store plans locally and optionally in cloud backups if enabled. See Privacy Policy for details.' }
-  ];
+  const resetFilters = () => {
+    setQuery('');
+    setActiveCategory('all');
+  };
 
-  const popular = [
-    { title: 'Restore Backups', desc: 'How to restore from your cloud backups or local exports.' },
-    { title: 'Regenerate a Workout', desc: 'Steps to regenerate a single workout in your plan.' },
-    { title: 'Cancel Subscription', desc: 'How to manage and cancel billing.' }
-  ];
+  const featuredArticle = articles[0];
 
   return (
     <div className="hc-page">
       <header className="hc-hero">
-        <div className="hc-hero-inner">
-          <div className="hc-brand">
-            <Dumbbell size={36} />
-            <div className="hc-brand-text">
-              <h1>Help Center</h1>
-              <p>Fast answers and guides to get the most from FitBuddyAI.</p>
+        <div className="hc-hero-shell">
+          <div className="hc-hero-copy">
+            <div className="hc-brand">
+              <div className="hc-brand-mark" aria-hidden="true">
+                <Dumbbell size={24} />
+              </div>
+              <div>
+                <p className="hc-eyebrow">Help Center</p>
+                <h1>Answers that move as fast as your training does.</h1>
+              </div>
+            </div>
+            <p className="hc-subtitle">
+              Search guides, open the right tool, or send support the exact context they need.
+            </p>
+            <div className="hc-hero-actions">
+              <Link to="/questionnaire" className="btn btn-primary">Start plan</Link>
+              <Link to="/chat" className="btn btn-secondary">Open chat</Link>
+              <button type="button" className="btn btn-accent" onClick={() => openModal('Contact support', 'I need help with FitBuddyAI.\n\n')}>
+                Contact support
+              </button>
+            </div>
+            <div className="hc-stats">
+              <div className="hc-stat">
+                <span>24h</span>
+                <p>Typical support response</p>
+              </div>
+              <div className="hc-stat">
+                <span>5</span>
+                <p>Core help categories</p>
+              </div>
+              <div className="hc-stat">
+                <span>Live</span>
+                <p>Search and support flows</p>
+              </div>
             </div>
           </div>
 
-          <div className="hc-search">
-            <div className="hc-search-input">
+          <div className="hc-search-panel">
+            <div className="hc-search-box">
               <Search size={18} />
-              <input placeholder="Search help articles, e.g. 'backup'" value={query} onChange={(e) => setQuery(e.target.value)} />
+              <input
+                aria-label="Search help center"
+                placeholder="Search articles, FAQs, and support topics"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
+            <div className="hc-chip-row" role="toolbar" aria-label="Help center filters">
+              {quickFilters.map((filter) => (
+                <button
+                  key={filter.value}
+                  type="button"
+                  className={`hc-chip ${activeCategory === filter.value ? 'active' : ''}`}
+                  onClick={() => openCategory(filter.value)}
+                >
+                  {filter.value === 'all' ? <Filter size={14} /> : null}
+                  <span>{filter.label}</span>
+                </button>
+              ))}
+            </div>
+            <div className="hc-search-meta">
+              <span>{resultsCount} result{resultsCount === 1 ? '' : 's'}</span>
+              {(query || activeCategory !== 'all') ? (
+                <button type="button" className="hc-reset" onClick={resetFilters}>Reset filters</button>
+              ) : (
+                <span className="hc-search-tip">Try: backup, calendar, privacy, chat</span>
+              )}
             </div>
-            <div className="hc-search-hint">Try: "restore", "calendar", "account"</div>
           </div>
         </div>
       </header>
 
       <main className="hc-grid">
-        <aside className="hc-left">
-          <div className="hc-card compact">
-            <h3>Popular Articles</h3>
-            <ul className="hc-popular">
-              {popular.map((p, i) => (
-                <li key={i}>
-                  <button className="link-like" onClick={() => openModalWithSubject(p.title)}>{p.title}</button>
-                  <p className="muted">{p.desc}</p>
-                </li>
+        <aside className="hc-sidebar">
+          <section className="hc-card hc-card-soft">
+            <div className="hc-card-head">
+              <h2>Popular articles</h2>
+              <p className="muted">The fastest paths to the most common tasks.</p>
+            </div>
+            <div className="hc-popular-list">
+              {articles.slice(0, 3).map((article) => (
+                <button
+                  key={article.id}
+                  type="button"
+                  className="hc-popular-item"
+                  onClick={() => {
+                    setActiveCategory(article.categoryId);
+                    setQuery(article.title);
+                    window.requestAnimationFrame(() => {
+                      resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    });
+                  }}
+                >
+                  <span>{article.title}</span>
+                  <ArrowRight size={16} />
+                </button>
               ))}
-            </ul>
-          </div>
+            </div>
+          </section>
 
-          <div className="hc-card compact">
-            <h3>Contact</h3>
-            <p className="muted">Need help from a human? Our support responds within 24 hours.</p>
-            <button className="btn btn-primary" onClick={() => openModal()}>Contact Support</button>
-          </div>
+          <section className="hc-card hc-card-soft">
+            <div className="hc-card-head">
+              <h2>Support</h2>
+              <p className="muted">If the answer needs a human, send the details in one shot.</p>
+            </div>
+            <div className="hc-support-stack">
+              <a className="hc-support-link" href={`mailto:${SUPPORT_EMAIL}`}>
+                <Mail size={16} />
+                <span>{SUPPORT_EMAIL}</span>
+              </a>
+              <div className="hc-support-note">
+                <Clock3 size={16} />
+                <span>Typical response within 24 hours.</span>
+              </div>
+              <button type="button" className="btn btn-primary" onClick={() => openModal('Contact support', 'Please help me with:\n\n')}>
+                Contact support
+              </button>
+            </div>
+          </section>
         </aside>
 
-        <section className="hc-main">
-          <div className="hc-cats">
-            {categories.map((c) => (
-              <article key={c.id} className="hc-category">
-                <div className="hc-cat-icon" aria-hidden>{c.icon}</div>
+        <section className="hc-main" ref={resultsRef}>
+          <section className="hc-section">
+            <div className="hc-section-head">
+              <div>
+                <p className="hc-section-kicker">Browse topics</p>
+                <h2>Explore by category</h2>
+              </div>
+              <p className="muted">The cards below stay searchable and filter with the top bar.</p>
+            </div>
+            <div className="hc-category-grid">
+              {categories.map((category) => {
+                const Icon = category.icon;
+                return (
+                  <button
+                    key={category.id}
+                    type="button"
+                    className={`hc-category-card ${activeCategory === category.id ? 'active' : ''}`}
+                    onClick={() => openCategory(category.id)}
+                  >
+                    <div className="hc-category-icon" aria-hidden="true"><Icon size={20} /></div>
+                    <div className="hc-category-copy">
+                      <h3>{category.title}</h3>
+                      <p className="muted">{category.summary}</p>
+                    </div>
+                    <ArrowRight size={16} className="hc-card-arrow" />
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+
+          <section className="hc-section">
+            <div className="hc-section-head">
+              <div>
+                <p className="hc-section-kicker">Search results</p>
+                <h2>Articles and tasks</h2>
+              </div>
+              <p className="muted">Filtered by your search and selected category.</p>
+            </div>
+
+            {filteredArticles.length > 0 ? (
+              <div className="hc-article-grid">
+                {filteredArticles.map((article) => (
+                  <article key={article.id} className={`hc-article-card accent-${article.accent}`}>
+                    <div className="hc-article-head">
+                      <div>
+                        <p className="hc-article-tag">{categories.find((category) => category.id === article.categoryId)?.title}</p>
+                        <h3>{article.title}</h3>
+                      </div>
+                      <span className="hc-article-index">{article.bullets.length} steps</span>
+                    </div>
+                    <p className="muted">{article.summary}</p>
+                    <ul className="hc-article-list">
+                      {article.bullets.map((bullet) => (
+                        <li key={bullet}>{bullet}</li>
+                      ))}
+                    </ul>
+                    <div className="hc-card-actions">
+                      {article.routeLabel && article.routeTo ? (
+                        <Link to={article.routeTo} className="btn btn-secondary">
+                          {article.routeLabel}
+                          <ExternalLink size={16} />
+                        </Link>
+                      ) : null}
+                      <button type="button" className="btn btn-accent" onClick={() => openSupportForArticle(article)}>
+                        Ask support
+                        <Send size={16} />
+                      </button>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            ) : (
+              <div className="hc-empty-state">
+                <WandSparkles size={24} />
                 <div>
-                  <h4>{c.title}</h4>
-                  <p className="muted">{c.desc}</p>
+                  <h3>No articles matched that search.</h3>
+                  <p className="muted">Try a broader term or open support and send the exact issue.</p>
                 </div>
-              </article>
-            ))}
-          </div>
+                <button type="button" className="btn btn-primary" onClick={() => openModal('Search did not find an answer', `Search query: ${query}\n\nI need help with:`)}>
+                  Ask support
+                </button>
+              </div>
+            )}
+          </section>
 
-          <div className="hc-faq">
-            <h2>Frequently Asked Questions</h2>
-            <Accordion items={faqs} />
-          </div>
+          <section className="hc-section">
+            <div className="hc-section-head">
+              <div>
+                <p className="hc-section-kicker">Frequently asked questions</p>
+                <h2>Common questions</h2>
+              </div>
+              <p className="muted">Answers stay visible and searchable as you filter the page.</p>
+            </div>
+            <Accordion items={filteredFaqs} onAskSupport={openSupportForFaq} />
+          </section>
         </section>
 
-        <aside className="hc-right">
-          <div className="hc-card spotlight">
-            <h3>Featured Guide</h3>
-            <h4>Optimize Your 30-Day Plan</h4>
-            <p className="muted">Tips on balancing strength, cardio, and recovery to hit your goals.</p>
-            <div className="guide-actions">
-              <button className="btn btn-secondary" onClick={() => openModalWithSubject('Guide: Optimize Your 30-Day Plan')}>Read Guide</button>
-              <button className="btn btn-accent" onClick={() => openModalWithSubject('Question about Optimize Your 30-Day Plan')}>Ask Support</button>
+        <aside className="hc-sidebar hc-sidebar-right">
+          <section className="hc-card hc-feature-card">
+            <p className="hc-section-kicker">Featured guide</p>
+            <h2>{featuredArticle.title}</h2>
+            <p className="muted">{featuredArticle.summary}</p>
+            <ul className="hc-feature-list">
+              {featuredArticle.bullets.map((bullet) => (
+                <li key={bullet}>{bullet}</li>
+              ))}
+            </ul>
+            <div className="hc-card-actions hc-card-actions-stacked">
+              {featuredArticle.routeLabel && featuredArticle.routeTo ? (
+                <Link to={featuredArticle.routeTo} className="btn btn-secondary">
+                  {featuredArticle.routeLabel}
+                  <ExternalLink size={16} />
+                </Link>
+              ) : null}
+              <button type="button" className="btn btn-primary" onClick={() => openSupportForArticle(featuredArticle)}>
+                Ask support
+              </button>
             </div>
-          </div>
+          </section>
 
-          <div className="hc-card">
-            <h3>Resources</h3>
-            <ul className="hc-links">
-              <li><Link to="/privacy">Privacy Policy</Link></li>
-              <li><button className="link-like" onClick={() => openModalWithSubject('Request: Changelog')}>Changelog</button></li>
-              <li><button className="link-like" onClick={() => openModalWithSubject('Request: Developer API documentation')}>Developer API</button></li>
-            </ul>
-          </div>
+          <section className="hc-card hc-resource-card">
+            <div className="hc-card-head">
+              <h2>Resources</h2>
+              <p className="muted">Open the official pages that back the support flow.</p>
+            </div>
+            <div className="hc-resource-list">
+              <Link to="/questionnaire" className="hc-resource-link">
+                <Sparkles size={16} />
+                <span>Start questionnaire</span>
+              </Link>
+              <Link to="/chat" className="hc-resource-link">
+                <MessageSquare size={16} />
+                <span>Open AI chat</span>
+              </Link>
+              <Link to="/privacy" className="hc-resource-link">
+                <ShieldCheck size={16} />
+                <span>Privacy policy</span>
+              </Link>
+              <Link to="/terms" className="hc-resource-link">
+                <BookOpen size={16} />
+                <span>Terms of service</span>
+              </Link>
+            </div>
+          </section>
+
+          <section className="hc-card hc-resource-card">
+            <div className="hc-card-head">
+              <h2>Direct support</h2>
+              <p className="muted">Use the same details to contact support by email.</p>
+            </div>
+            <a className="hc-support-link hc-support-link-large" href={`mailto:${SUPPORT_EMAIL}`}>
+              <Mail size={16} />
+              <span>{SUPPORT_EMAIL}</span>
+            </a>
+          </section>
         </aside>
       </main>
 
@@ -126,100 +616,237 @@ export default function HelpCenter() {
         open={modalOpen}
         initialSubject={prefillSubject}
         initialMessage={prefillMessage}
-        onClose={() => { setModalOpen(false); setPrefillSubject(undefined); setPrefillMessage(undefined); }}
-        onSubmitted={() => { setModalOpen(false); setPrefillSubject(undefined); setPrefillMessage(undefined); console.log('support form submitted'); }}
+        onClose={() => {
+          setModalOpen(false);
+          setPrefillSubject('');
+          setPrefillMessage('');
+        }}
       />
     </div>
   );
 }
 
-// Modal component inside the same file for simplicity
-function SupportModal({ open, onClose, onSubmitted, initialSubject, initialMessage }: { open: boolean; onClose: () => void; onSubmitted?: () => void; initialSubject?: string; initialMessage?: string }) {
+function SupportModal({
+  open,
+  onClose,
+  initialSubject,
+  initialMessage,
+}: {
+  open: boolean;
+  onClose: () => void;
+  initialSubject: string;
+  initialMessage: string;
+}) {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-  const [subject, setSubject] = useState(initialSubject || '');
-  const [message, setMessage] = useState(initialMessage || '');
+  const [subject, setSubject] = useState(initialSubject);
+  const [message, setMessage] = useState(initialMessage);
+  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
+  const [statusText, setStatusText] = useState('');
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    setName('');
+    setEmail('');
+    setSubject(initialSubject);
+    setMessage(initialMessage);
+    setStatus('idle');
+    setStatusText('');
+  }, [open, initialSubject, initialMessage]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!open) {
+    return null;
+  }
+
+  const mailtoHref = `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(subject || 'FitBuddyAI support request')}&body=${encodeURIComponent(supportSummary(name || 'Your name', email || 'your email', subject || 'FitBuddyAI support request', message || ''))}`;
 
-  // Keep initial values in sync when modal opens with new prefill
-  // (use effect is omitted to keep code simple; update when open changes)
-  if (!open) return null;
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmedName = name.trim();
+    const trimmedEmail = email.trim();
+    const trimmedSubject = subject.trim();
+    const trimmedMessage = message.trim();
 
-  // If a new initial subject/message was passed, ensure the fields reflect it
-  if (initialSubject && subject !== initialSubject) setSubject(initialSubject);
-  if (initialMessage && message !== initialMessage) setMessage(initialMessage);
+    if (!trimmedName || !trimmedEmail || !trimmedSubject || !trimmedMessage) {
+      setStatus('error');
+      setStatusText('Fill in every field before sending the request.');
+      return;
+    }
+
+    setStatus('submitting');
+    setStatusText('Sending your request to support...');
+
+    const payload = {
+      timestamp: new Date().toISOString(),
+      source: 'help-center',
+      name: trimmedName,
+      email: trimmedEmail,
+      subject: trimmedSubject,
+      message: trimmedMessage,
+      page: typeof window !== 'undefined' ? window.location.pathname : '/help',
+    };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Simulate submit
     try {
-      // Here you'd normally send to your API; we'll just call onSubmitted
-      onSubmitted?.();
-    } catch (err) {
-      // noop
+      const response = await fetch(SUPPORT_WEBHOOK_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Support request failed with status ${response.status}`);
+      }
+
+      setStatus('success');
+      setStatusText('Your request was sent and logged for follow-up.');
+    } catch (error) {
+      console.error('Help center support request failed:', error);
+      setStatus('error');
+      setStatusText('We could not reach the support queue. Use the email fallback below to send the same details.');
     }
   };
 
-  const onBackdropClick = (e: React.MouseEvent) => {
-    // close when clicking the backdrop (but not when clicking inside the modal)
-    if ((e.target as HTMLElement).classList.contains('hc-modal-backdrop')) onClose();
+  const copySummary = async () => {
+    const summary = supportSummary(name, email, subject, message);
+    try {
+      await navigator.clipboard.writeText(summary);
+      setStatusText('Support summary copied to your clipboard.');
+    } catch {
+      setStatusText('Copy is not available in this browser, but the summary is ready to send by email.');
+    }
   };
 
   return (
-    <div className="hc-modal-backdrop" role="dialog" aria-modal="true" onClick={onBackdropClick}>
-      <div className="hc-modal" onClick={(e) => e.stopPropagation()}>
+    <div className="hc-modal-backdrop" role="presentation" onClick={onClose}>
+      <div className="hc-modal" role="dialog" aria-modal="true" aria-labelledby="support-title" onClick={(event) => event.stopPropagation()}>
         <header className="hc-modal-header">
-          <h3>Contact Support</h3>
-          <button className="hc-close" onClick={onClose} aria-label="Close">×</button>
+          <div>
+            <p className="hc-section-kicker">Contact support</p>
+            <h3 id="support-title">Send a production-ready support request</h3>
+          </div>
+          <button className="hc-close" type="button" onClick={onClose} aria-label="Close support form">×</button>
         </header>
-        <form className="hc-form" onSubmit={handleSubmit}>
-          <label>
-            Name
-            <input value={name} onChange={(e) => setName(e.target.value)} required />
-          </label>
-          <label>
-            Email
-            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
-          </label>
-          <label>
-            Subject
-            <input value={subject} onChange={(e) => setSubject(e.target.value)} />
-          </label>
-          <label>
-            Message
-            <textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={6} required />
-          </label>
-          <div className="hc-actions">
-            <button type="button" className="btn" onClick={onClose}>Cancel</button>
-            <button type="submit" className="btn btn-primary">Send</button>
+
+        {status === 'success' ? (
+          <div className="hc-modal-body hc-success-state">
+            <div className="hc-success-icon" aria-hidden="true">
+              <CheckCircle2 size={24} />
+            </div>
+            <div>
+              <h4>Your request was sent.</h4>
+              <p className="muted">Support has the request now. You can copy the summary or open your email app with the same details.</p>
+            </div>
+            <div className="hc-support-actions-row">
+              <button type="button" className="btn btn-secondary" onClick={copySummary}>
+                Copy summary
+                <Copy size={16} />
+              </button>
+              <a className="btn btn-primary" href={mailtoHref}>
+                Open email app
+                <Mail size={16} />
+              </a>
+              <button type="button" className="btn btn-accent" onClick={onClose}>
+                Done
+              </button>
+            </div>
           </div>
-        </form>
+        ) : (
+          <form className="hc-form" onSubmit={handleSubmit}>
+            <div className="hc-form-grid">
+              <label>
+                <span>Name</span>
+                <input value={name} onChange={(event) => setName(event.target.value)} autoComplete="name" required />
+              </label>
+              <label>
+                <span>Email</span>
+                <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} autoComplete="email" required />
+              </label>
+            </div>
+
+            <label>
+              <span>Subject</span>
+              <input value={subject} onChange={(event) => setSubject(event.target.value)} required />
+            </label>
+
+            <label>
+              <span>Message</span>
+              <textarea value={message} onChange={(event) => setMessage(event.target.value)} rows={7} required />
+            </label>
+
+            <div className={`hc-status ${status}`} aria-live="polite">{statusText || 'Typical response time is under 24 hours.'}</div>
+
+            <div className="hc-actions">
+              <button type="button" className="btn btn-secondary" onClick={onClose}>Cancel</button>
+              <a className="btn btn-secondary" href={mailtoHref}>
+                Open email app
+                <Mail size={16} />
+              </a>
+              <button type="submit" className="btn btn-primary" disabled={status === 'submitting'}>
+                {status === 'submitting' ? 'Sending...' : 'Send request'}
+                <Send size={16} />
+              </button>
+            </div>
+          </form>
+        )}
       </div>
     </div>
   );
 }
 
+function Accordion({ items, onAskSupport }: { items: Faq[]; onAskSupport: (item: Faq) => void }) {
+  const [openId, setOpenId] = useState<string | null>(items[0]?.id ?? null);
 
-function Accordion({ items }: { items: { q: string; a: string }[] }) {
-  const [openIndex, setOpenIndex] = useState<number | null>(0);
-  const toggle = (i: number) => setOpenIndex(openIndex === i ? null : i);
+  useEffect(() => {
+    setOpenId(items[0]?.id ?? null);
+  }, [items]);
 
   return (
-    <div className="accordion" role="region" aria-label="Help center FAQ">
-      {items.map((it, i) => (
-        <div className={`accordion-item ${openIndex === i ? 'open' : ''}`} key={i}>
-          <button
-            className="accordion-button"
-            aria-expanded={openIndex === i}
-            onClick={() => toggle(i)}
-          >
-            <span>{it.q}</span>
-            <svg className="chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </button>
-          <div className="accordion-panel">
-            <p>{it.a}</p>
-          </div>
-        </div>
-      ))}
+    <div className="hc-accordion" role="region" aria-label="Help center frequently asked questions">
+      {items.map((item) => {
+        const isOpen = openId === item.id;
+
+        return (
+          <article key={item.id} className={`hc-accordion-item ${isOpen ? 'open' : ''}`}>
+            <button type="button" className="hc-accordion-button" aria-expanded={isOpen} onClick={() => setOpenId(isOpen ? null : item.id)}>
+              <span>{item.question}</span>
+              <ChevronDown size={18} className="hc-accordion-icon" />
+            </button>
+            <div className="hc-accordion-panel">
+              <p>{item.answer}</p>
+              <button type="button" className="hc-inline-action" onClick={() => onAskSupport(item)}>
+                Ask support about this
+                <ArrowRight size={14} />
+              </button>
+            </div>
+          </article>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/HomeIntroStorm.css b/src/components/HomeIntroStorm.css
new file mode 100644
index 00000000..8f3493af
--- /dev/null
+++ b/src/components/HomeIntroStorm.css
@@ -0,0 +1,561 @@
+.home-intro-storm {
+  --storm-surface: rgba(255, 255, 255, 0.78);
+  --storm-surface-strong: rgba(255, 255, 255, 0.9);
+  --storm-border: rgba(31, 42, 54, 0.08);
+  --storm-muted: var(--text-medium);
+  --storm-shadow: 0 24px 60px rgba(31, 42, 54, 0.14);
+  --storm-kicker: rgba(30, 203, 123, 0.12);
+  --storm-kicker-border: rgba(30, 203, 123, 0.18);
+  --storm-accent: rgba(28, 176, 246, 0.14);
+  --storm-accent-border: rgba(28, 176, 246, 0.18);
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(246, 250, 246, 0.92) 24%, rgba(232, 244, 239, 0.84) 44%, rgba(217, 237, 244, 0.7) 64%, rgba(18, 31, 26, 0.12) 100%),
+    linear-gradient(135deg, rgba(30, 203, 123, 0.16), rgba(28, 176, 246, 0.15));
+  color: var(--text-dark);
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+body.theme-dark .home-intro-storm {
+  --storm-surface: rgba(9, 16, 27, 0.78);
+  --storm-surface-strong: rgba(12, 19, 31, 0.92);
+  --storm-border: rgba(255, 255, 255, 0.08);
+  --storm-muted: #a8b3c2;
+  --storm-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
+  --storm-kicker: rgba(30, 203, 123, 0.12);
+  --storm-kicker-border: rgba(30, 203, 123, 0.16);
+  --storm-accent: rgba(28, 176, 246, 0.12);
+  --storm-accent-border: rgba(28, 176, 246, 0.16);
+  background:
+    radial-gradient(circle at 50% 38%, rgba(11, 17, 28, 0.96), rgba(11, 18, 31, 0.94) 28%, rgba(13, 22, 36, 0.9) 48%, rgba(8, 14, 24, 0.96) 100%),
+    linear-gradient(135deg, rgba(15, 183, 122, 0.16), rgba(27, 159, 224, 0.14));
+  color: var(--text-dark);
+}
+
+.home-intro-storm.phase-fade {
+  opacity: 0;
+  transform: scale(1.02);
+}
+
+.home-intro-storm__sky,
+.home-intro-storm__rings,
+.home-intro-storm__particles,
+.home-intro-storm__orbits,
+.home-intro-storm__center {
+  position: absolute;
+  inset: 0;
+}
+
+.home-intro-storm__center {
+  position: relative;
+}
+
+.sky-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.028) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px);
+  background-size: 48px 48px;
+  opacity: 0.75;
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 84%);
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 84%);
+}
+
+body.theme-dark .sky-grid {
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  opacity: 0.55;
+}
+
+.sky-orb {
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(12px);
+  opacity: 0.78;
+  animation: skyFloat 14s ease-in-out infinite;
+}
+
+.sky-orb-a {
+  width: 28rem;
+  height: 28rem;
+  top: -8rem;
+  left: -10rem;
+  background: radial-gradient(circle, rgba(88, 204, 2, 0.33), transparent 70%);
+}
+
+.sky-orb-b {
+  width: 24rem;
+  height: 24rem;
+  top: 6rem;
+  right: -8rem;
+  background: radial-gradient(circle, rgba(28, 176, 246, 0.3), transparent 68%);
+  animation-delay: -3s;
+}
+
+.sky-orb-c {
+  width: 18rem;
+  height: 18rem;
+  bottom: 2rem;
+  left: 36%;
+  background: radial-gradient(circle, rgba(255, 150, 0, 0.26), transparent 68%);
+  animation-delay: -6s;
+}
+
+.sky-orb-d {
+  width: 14rem;
+  height: 14rem;
+  bottom: 8rem;
+  right: 20%;
+  background: radial-gradient(circle, rgba(255, 75, 75, 0.16), transparent 70%);
+  animation-delay: -2.5s;
+}
+
+.ring {
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  border-radius: 999px;
+  border: 1px solid rgba(30, 203, 123, 0.16);
+  transform: translate(-50%, -50%);
+  mix-blend-mode: multiply;
+  opacity: 0.8;
+}
+
+.ring-1 {
+  width: 16rem;
+  height: 16rem;
+  animation: ringSpin 12s linear infinite;
+}
+
+.ring-2 {
+  width: 24rem;
+  height: 24rem;
+  border-color: rgba(28, 176, 246, 0.22);
+  animation: ringSpinReverse 16s linear infinite;
+}
+
+.ring-3 {
+  width: 34rem;
+  height: 34rem;
+  border-color: rgba(255, 150, 0, 0.14);
+  animation: ringSpin 22s linear infinite;
+}
+
+.ring-4 {
+  width: 44rem;
+  height: 44rem;
+  border-color: rgba(255, 75, 75, 0.08);
+  animation: ringSpinReverse 30s linear infinite;
+}
+
+.particle {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  opacity: 0.65;
+  box-shadow: 0 0 14px currentColor;
+  mix-blend-mode: screen;
+  will-change: transform, opacity;
+}
+
+.particle::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: inherit;
+  background: radial-gradient(circle, currentColor 0%, transparent 70%);
+  opacity: 0.24;
+  filter: blur(1.5px);
+}
+
+.particle-0 { color: #1ecb7b; animation-name: driftA; }
+.particle-1 { color: #1e90cb; animation-name: driftB; }
+.particle-2 { color: #ffb347; animation-name: driftC; }
+.particle-3 { color: #60a5fa; animation-name: driftD; }
+.particle-4 { color: #58cc02; animation-name: driftE; }
+.particle-5 { color: #f97316; animation-name: driftF; }
+
+.particle-0,
+.particle-1,
+.particle-2,
+.particle-3,
+.particle-4,
+.particle-5 {
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+.home-intro-storm__particles .particle:nth-child(1) { top: 10%; left: 12%; animation-delay: -0.2s; animation-duration: 11s; }
+.home-intro-storm__particles .particle:nth-child(2) { top: 18%; left: 24%; animation-delay: -2.2s; animation-duration: 13s; }
+.home-intro-storm__particles .particle:nth-child(3) { top: 14%; left: 62%; animation-delay: -1.1s; animation-duration: 12s; }
+.home-intro-storm__particles .particle:nth-child(4) { top: 22%; left: 78%; animation-delay: -3.1s; animation-duration: 14s; }
+.home-intro-storm__particles .particle:nth-child(5) { top: 34%; left: 8%; animation-delay: -4s; animation-duration: 12.5s; }
+.home-intro-storm__particles .particle:nth-child(6) { top: 44%; left: 18%; animation-delay: -0.9s; animation-duration: 10.5s; }
+.home-intro-storm__particles .particle:nth-child(7) { top: 52%; left: 32%; animation-delay: -2.7s; animation-duration: 13.2s; }
+.home-intro-storm__particles .particle:nth-child(8) { top: 30%; left: 48%; animation-delay: -4.6s; animation-duration: 11.8s; }
+.home-intro-storm__particles .particle:nth-child(9) { top: 20%; left: 52%; animation-delay: -1.8s; animation-duration: 12.8s; }
+.home-intro-storm__particles .particle:nth-child(10) { top: 40%; left: 68%; animation-delay: -3.8s; animation-duration: 11.6s; }
+.home-intro-storm__particles .particle:nth-child(11) { top: 58%; left: 86%; animation-delay: -0.6s; animation-duration: 14.2s; }
+.home-intro-storm__particles .particle:nth-child(12) { top: 64%; left: 16%; animation-delay: -2.4s; animation-duration: 12.4s; }
+.home-intro-storm__particles .particle:nth-child(13) { top: 76%; left: 30%; animation-delay: -4.3s; animation-duration: 13.6s; }
+.home-intro-storm__particles .particle:nth-child(14) { top: 74%; left: 54%; animation-delay: -1.4s; animation-duration: 10.8s; }
+.home-intro-storm__particles .particle:nth-child(15) { top: 68%; left: 74%; animation-delay: -3.3s; animation-duration: 12.2s; }
+.home-intro-storm__particles .particle:nth-child(16) { top: 84%; left: 48%; animation-delay: -0.8s; animation-duration: 11.3s; }
+.home-intro-storm__particles .particle:nth-child(17) { top: 8%; left: 44%; animation-delay: -2.8s; animation-duration: 14.5s; }
+.home-intro-storm__particles .particle:nth-child(18) { top: 6%; left: 86%; animation-delay: -4.4s; animation-duration: 13.8s; }
+.home-intro-storm__particles .particle:nth-child(19) { top: 90%; left: 82%; animation-delay: -1.6s; animation-duration: 12.9s; }
+.home-intro-storm__particles .particle:nth-child(20) { top: 88%; left: 8%; animation-delay: -3.5s; animation-duration: 10.9s; }
+.home-intro-storm__particles .particle:nth-child(21) { top: 48%; left: 50%; animation-delay: -0.4s; animation-duration: 9.8s; }
+.home-intro-storm__particles .particle:nth-child(22) { top: 58%; left: 58%; animation-delay: -2s; animation-duration: 12.1s; }
+.home-intro-storm__particles .particle:nth-child(23) { top: 72%; left: 60%; animation-delay: -4.1s; animation-duration: 13.4s; }
+.home-intro-storm__particles .particle:nth-child(24) { top: 26%; left: 36%; animation-delay: -1.3s; animation-duration: 11.9s; }
+
+.home-intro-storm__orbits {
+  position: absolute;
+  inset: 0;
+}
+
+.orbit-card {
+  position: absolute;
+  display: grid;
+  gap: 6px;
+  align-items: center;
+  justify-items: start;
+  width: 152px;
+  padding: 14px 16px;
+  border-radius: 22px;
+  background: var(--storm-surface);
+  border: 1px solid var(--storm-border);
+  box-shadow: var(--storm-shadow);
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  animation: orbitFloat 10s ease-in-out infinite;
+}
+
+.orbit-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  color: #fff;
+  background: var(--gradient-primary);
+}
+
+.orbit-card strong {
+  font-size: 0.98rem;
+}
+
+.orbit-card span {
+  font-size: 0.82rem;
+  color: var(--storm-muted);
+  line-height: 1.35;
+}
+
+body.theme-dark .orbit-card {
+  background: rgba(10, 16, 27, 0.84);
+}
+
+body.theme-dark .orbit-card__icon {
+  color: #e9f2fb;
+}
+
+.orbit-card-1 { top: 18%; left: 9%; animation-delay: -1s; }
+.orbit-card-2 { top: 14%; right: 11%; animation-delay: -3s; }
+.orbit-card-3 { top: 50%; left: 4%; animation-delay: -4s; }
+.orbit-card-4 { top: 52%; right: 8%; animation-delay: -2s; }
+.orbit-card-5 { bottom: 15%; left: 20%; animation-delay: -5s; }
+.orbit-card-6 { bottom: 12%; right: 20%; animation-delay: -6s; }
+
+.home-intro-storm__center {
+  display: grid;
+  place-items: center;
+  text-align: center;
+  padding: 5rem 1.5rem 3rem;
+}
+
+.center-panel-bg {
+  position: absolute;
+  width: min(46rem, 88vw);
+  height: min(46rem, 88vw);
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.22) 40%, transparent 70%);
+  filter: blur(12px);
+  opacity: 0.88;
+}
+
+body.theme-dark .center-panel-bg {
+  background: radial-gradient(circle, rgba(19, 27, 42, 0.82), rgba(13, 20, 34, 0.28) 42%, transparent 72%);
+}
+
+.center-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 104px;
+  height: 104px;
+  border-radius: 28px;
+  color: #fff;
+  background: var(--gradient-primary);
+  box-shadow: 0 24px 70px rgba(30, 203, 123, 0.28);
+  animation: corePulse 1.8s ease-in-out infinite;
+  position: relative;
+  z-index: 1;
+}
+
+.center-copy {
+  max-width: 760px;
+  margin-top: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.center-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--storm-kicker);
+  border: 1px solid var(--storm-kicker-border);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.center-copy h2 {
+  margin: 18px auto 14px;
+  font-size: clamp(2.3rem, 5.6vw, 5.4rem);
+  line-height: 0.96;
+  letter-spacing: -0.05em;
+  max-width: 11ch;
+}
+
+.center-copy p {
+  max-width: 58ch;
+  margin: 0 auto;
+  font-size: 1.08rem;
+  line-height: 1.8;
+  color: var(--storm-muted);
+}
+
+.center-trail {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.trail-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 16px;
+  border-radius: 999px;
+  background: var(--storm-surface);
+  border: 1px solid var(--storm-border);
+  box-shadow: 0 14px 30px rgba(31, 42, 54, 0.08);
+  font-weight: 700;
+  color: var(--text-dark);
+}
+
+body.theme-dark .trail-chip {
+  color: #e9f2fb;
+}
+
+.trail-chip-1 { animation: chipLift 2.8s ease-in-out infinite; }
+.trail-chip-2 { animation: chipLift 2.8s ease-in-out infinite 0.35s; }
+.trail-chip-3 { animation: chipLift 2.8s ease-in-out infinite 0.7s; }
+.trail-chip-4 { animation: chipLift 2.8s ease-in-out infinite 1.05s; }
+
+.phase-storm .center-logo {
+  animation: corePulse 1.1s ease-in-out infinite;
+}
+
+.phase-surge .center-logo {
+  animation: corePulse 0.82s ease-in-out infinite, coreBurst 1.8s ease-in-out infinite;
+}
+
+.phase-surge .orbit-card {
+  animation-duration: 7s;
+}
+
+.phase-surge .center-panel-bg {
+  animation: glowPulse 2.2s ease-in-out infinite;
+}
+
+.phase-fade .orbit-card,
+.phase-fade .trail-chip,
+.phase-fade .particle,
+.phase-fade .ring,
+.phase-fade .sky-orb {
+  animation-play-state: paused;
+}
+
+.center-metrics {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  width: min(680px, calc(100vw - 32px));
+  margin-top: 26px;
+}
+
+.center-metrics div {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: var(--storm-surface);
+  border: 1px solid var(--storm-border);
+  box-shadow: 0 14px 28px rgba(31, 42, 54, 0.08);
+}
+
+.center-metrics strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 0.92rem;
+}
+
+.center-metrics span {
+  display: block;
+  color: var(--storm-muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+}
+
+body.theme-dark .center-metrics div {
+  background: rgba(11, 18, 30, 0.84);
+}
+
+body.theme-dark .center-metrics strong,
+body.theme-dark .center-metrics span {
+  color: #e9f2fb;
+}
+
+@keyframes skyFloat {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(0, 16px, 0) scale(1.05); }
+}
+
+@keyframes ringSpin {
+  from { transform: translate(-50%, -50%) rotate(0deg); }
+  to { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+@keyframes ringSpinReverse {
+  from { transform: translate(-50%, -50%) rotate(360deg); }
+  to { transform: translate(-50%, -50%) rotate(0deg); }
+}
+
+@keyframes corePulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 24px 70px rgba(30, 203, 123, 0.3); }
+  50% { transform: scale(1.08); box-shadow: 0 28px 90px rgba(28, 176, 246, 0.36); }
+}
+
+@keyframes coreBurst {
+  0%, 100% { filter: saturate(1); }
+  50% { filter: saturate(1.4) brightness(1.08); }
+}
+
+@keyframes glowPulse {
+  0%, 100% { transform: scale(1); opacity: 0.78; }
+  50% { transform: scale(1.03); opacity: 0.92; }
+}
+
+@keyframes orbitFloat {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(1deg); }
+}
+
+@keyframes chipLift {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+
+@keyframes driftA { 0% { transform: translate3d(-28vw, -18vh, 0) scale(0.8); } 25% { transform: translate3d(-8vw, 8vh, 0) scale(1); } 50% { transform: translate3d(14vw, -10vh, 0) scale(1.1); } 75% { transform: translate3d(30vw, 20vh, 0) scale(0.9); } 100% { transform: translate3d(-28vw, -18vh, 0) scale(0.8); } }
+@keyframes driftB { 0% { transform: translate3d(-10vw, 20vh, 0) scale(1.05); } 25% { transform: translate3d(18vw, -10vh, 0) scale(0.75); } 50% { transform: translate3d(-24vw, -20vh, 0) scale(1.1); } 75% { transform: translate3d(6vw, 16vh, 0) scale(0.85); } 100% { transform: translate3d(-10vw, 20vh, 0) scale(1.05); } }
+@keyframes driftC { 0% { transform: translate3d(8vw, -24vh, 0) scale(0.7); } 25% { transform: translate3d(30vw, 8vh, 0) scale(1.15); } 50% { transform: translate3d(-8vw, 22vh, 0) scale(0.8); } 75% { transform: translate3d(-26vw, -14vh, 0) scale(1.02); } 100% { transform: translate3d(8vw, -24vh, 0) scale(0.7); } }
+@keyframes driftD { 0% { transform: translate3d(24vw, 12vh, 0) scale(1.1); } 25% { transform: translate3d(-12vw, -18vh, 0) scale(0.8); } 50% { transform: translate3d(16vw, 20vh, 0) scale(1.02); } 75% { transform: translate3d(-28vw, 4vh, 0) scale(0.9); } 100% { transform: translate3d(24vw, 12vh, 0) scale(1.1); } }
+@keyframes driftE { 0% { transform: translate3d(-34vw, 24vh, 0) scale(0.75); } 25% { transform: translate3d(-10vw, -12vh, 0) scale(1.05); } 50% { transform: translate3d(28vw, 16vh, 0) scale(0.8); } 75% { transform: translate3d(8vw, -26vh, 0) scale(1.15); } 100% { transform: translate3d(-34vw, 24vh, 0) scale(0.75); } }
+@keyframes driftF { 0% { transform: translate3d(32vw, -12vh, 0) scale(0.9); } 25% { transform: translate3d(6vw, 26vh, 0) scale(1.2); } 50% { transform: translate3d(-22vw, -6vh, 0) scale(0.85); } 75% { transform: translate3d(18vw, -22vh, 0) scale(1); } 100% { transform: translate3d(32vw, -12vh, 0) scale(0.9); } }
+@keyframes driftG { 0% { transform: translate3d(-6vw, -30vh, 0) scale(0.65); } 25% { transform: translate3d(24vw, 14vh, 0) scale(1.05); } 50% { transform: translate3d(-16vw, 30vh, 0) scale(0.75); } 75% { transform: translate3d(30vw, -8vh, 0) scale(0.9); } 100% { transform: translate3d(-6vw, -30vh, 0) scale(0.65); } }
+@keyframes driftH { 0% { transform: translate3d(20vw, 28vh, 0) scale(1.15); } 25% { transform: translate3d(-20vw, -14vh, 0) scale(0.8); } 50% { transform: translate3d(12vw, -26vh, 0) scale(1); } 75% { transform: translate3d(-30vw, 10vh, 0) scale(0.9); } 100% { transform: translate3d(20vw, 28vh, 0) scale(1.15); } }
+@keyframes driftI { 0% { transform: translate3d(-20vw, 4vh, 0) scale(0.95); } 25% { transform: translate3d(18vw, -24vh, 0) scale(0.75); } 50% { transform: translate3d(30vw, 18vh, 0) scale(1.05); } 75% { transform: translate3d(-8vw, 24vh, 0) scale(0.85); } 100% { transform: translate3d(-20vw, 4vh, 0) scale(0.95); } }
+@keyframes driftJ { 0% { transform: translate3d(28vw, -26vh, 0) scale(0.8); } 25% { transform: translate3d(-4vw, 16vh, 0) scale(1.1); } 50% { transform: translate3d(-30vw, -8vh, 0) scale(0.85); } 75% { transform: translate3d(10vw, -20vh, 0) scale(1); } 100% { transform: translate3d(28vw, -26vh, 0) scale(0.8); } }
+@keyframes driftK { 0% { transform: translate3d(-30vw, 14vh, 0) scale(1.05); } 25% { transform: translate3d(12vw, -16vh, 0) scale(0.7); } 50% { transform: translate3d(26vw, 6vh, 0) scale(1); } 75% { transform: translate3d(-18vw, 26vh, 0) scale(0.9); } 100% { transform: translate3d(-30vw, 14vh, 0) scale(1.05); } }
+@keyframes driftL { 0% { transform: translate3d(10vw, -8vh, 0) scale(0.85); } 25% { transform: translate3d(-22vw, 22vh, 0) scale(1.15); } 50% { transform: translate3d(30vw, -18vh, 0) scale(0.85); } 75% { transform: translate3d(-6vw, -28vh, 0) scale(1.05); } 100% { transform: translate3d(10vw, -8vh, 0) scale(0.85); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .home-intro-storm,
+  .sky-orb,
+  .ring,
+  .particle,
+  .orbit-card,
+  .center-logo,
+  .trail-chip,
+  .center-panel-bg {
+    animation: none !important;
+  }
+
+  .home-intro-storm.phase-fade {
+    transform: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .orbit-card-1,
+  .orbit-card-2,
+  .orbit-card-3,
+  .orbit-card-4,
+  .orbit-card-5,
+  .orbit-card-6 {
+    width: 132px;
+  }
+
+  .orbit-card-1 { top: 10%; left: 6%; }
+  .orbit-card-2 { top: 10%; right: 6%; }
+  .orbit-card-3 { top: 26%; left: 2%; }
+  .orbit-card-4 { top: 26%; right: 2%; }
+  .orbit-card-5 { bottom: 18%; left: 7%; }
+  .orbit-card-6 { bottom: 18%; right: 7%; }
+}
+
+@media (max-width: 640px) {
+  .home-intro-storm__center {
+    padding-inline: 1rem;
+  }
+
+  .center-metrics {
+    grid-template-columns: 1fr;
+    width: min(100%, 520px);
+  }
+
+  .center-copy h2 {
+    max-width: none;
+    font-size: clamp(2.1rem, 12vw, 3.4rem);
+  }
+
+  .orbit-card {
+    display: none;
+  }
+
+  .ring-3,
+  .ring-4 {
+    opacity: 0.45;
+  }
+
+  .particle {
+    width: 5px;
+    height: 5px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/HomeIntroStorm.tsx b/src/components/HomeIntroStorm.tsx
new file mode 100644
index 00000000..82ae95ea
--- /dev/null
+++ b/src/components/HomeIntroStorm.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Brain, ChevronRight, Dumbbell, Flame, ShieldCheck, Sparkles, Target, TrendingUp, Zap } from 'lucide-react';
+import './HomeIntroStorm.css';
+
+const particleVariants = Array.from({ length: 24 }, (_, index) => index);
+
+const orbitCards = [
+  { label: 'Assess', icon: Target, note: 'questions shape the plan' },
+  { label: 'Adapt', icon: Brain, note: 'plans respond to progress' },
+  { label: 'Recover', icon: ShieldCheck, note: 'recovery remains visible' },
+  { label: 'Advance', icon: TrendingUp, note: 'each week moves forward' },
+];
+
+const trailLabels = ['Launch', 'Focus', 'Momentum'];
+
+const HomeIntroStorm: React.FC<{ onFinish: () => void }> = ({ onFinish }) => {
+  const [phase, setPhase] = useState<'ignite' | 'storm' | 'surge' | 'fade'>('ignite');
+  const onFinishRef = useRef(onFinish);
+
+  useEffect(() => {
+    onFinishRef.current = onFinish;
+  }, [onFinish]);
+
+  useEffect(() => {
+    const timers = [
+      window.setTimeout(() => setPhase('storm'), 900),
+      window.setTimeout(() => setPhase('surge'), 2600),
+      window.setTimeout(() => setPhase('fade'), 5400),
+      window.setTimeout(() => onFinishRef.current(), 6400),
+    ];
+
+    return () => timers.forEach(clearTimeout);
+  }, []);
+
+  return (
+    <div className={`home-intro-storm phase-${phase}`} role="presentation" aria-hidden="true">
+      <div className="home-intro-storm__sky">
+        <span className="sky-orb sky-orb-a" />
+        <span className="sky-orb sky-orb-b" />
+        <span className="sky-orb sky-orb-c" />
+        <span className="sky-orb sky-orb-d" />
+        <span className="sky-grid" />
+      </div>
+
+      <div className="home-intro-storm__rings">
+        <span className="ring ring-1" />
+        <span className="ring ring-2" />
+        <span className="ring ring-3" />
+        <span className="ring ring-4" />
+      </div>
+
+      <div className="home-intro-storm__particles">
+        {particleVariants.map((index) => (
+          <span key={index} className={`particle particle-${index % 6} particle-slot-${index}`} />
+        ))}
+      </div>
+
+      <div className="home-intro-storm__orbits">
+        {orbitCards.map((card, index) => {
+          const Icon = card.icon;
+          return (
+            <div key={card.label} className={`orbit-card orbit-card-${index + 1}`}>
+              <span className="orbit-card__icon"><Icon size={16} /></span>
+              <strong>{card.label}</strong>
+              <span>{card.note}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="home-intro-storm__center">
+        <div className="center-panel-bg" />
+        <div className="center-logo">
+          <Dumbbell size={48} />
+        </div>
+        <div className="center-copy">
+          <span className="center-kicker"><Sparkles size={16} /> Welcome to FitBuddyAI</span>
+          <h2>Training starts with a calmer, sharper launch.</h2>
+          <p>
+            A refined particle field, guided motion, and clear rhythm turn the home screen into a professional launch sequence.
+          </p>
+        </div>
+        <div className="center-trail" aria-hidden="true">
+          {trailLabels.map((label, index) => (
+            <span key={label} className={`trail-chip trail-chip-${index + 1}`}>
+              {label}
+              <ChevronRight size={14} />
+            </span>
+          ))}
+        </div>
+        <div className="center-metrics">
+          <div>
+            <strong>Adaptive</strong>
+            <span>progressive weekly plan</span>
+          </div>
+          <div>
+            <strong>Focused</strong>
+            <span>one clear call to action</span>
+          </div>
+          <div>
+            <strong>Premium</strong>
+            <span>cinematic but restrained motion</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeIntroStorm;
\ No newline at end of file
diff --git a/src/components/IntroBubbles.css b/src/components/IntroBubbles.css
index cd3bcc40..e7ef6436 100644
--- a/src/components/IntroBubbles.css
+++ b/src/components/IntroBubbles.css
@@ -122,6 +122,16 @@
   left: 50%;
   transform-origin: center center;
 }
+
+/* Per-bubble motion variables (replaces inline style vars in TSX). */
+.bubble-index-0 { --offscreen-x: 40px; --offscreen-y: -120px; --angle: 0deg; --distance: 210px; }
+.bubble-index-1 { --offscreen-x: 115px; --offscreen-y: 80px; --angle: 51deg; --distance: 210px; }
+.bubble-index-2 { --offscreen-x: 20px; --offscreen-y: 120px; --angle: 102deg; --distance: 210px; }
+.bubble-index-3 { --offscreen-x: -120px; --offscreen-y: 40px; --angle: 154deg; --distance: 210px; }
+.bubble-index-4 { --offscreen-x: -130px; --offscreen-y: -30px; --angle: 205deg; --distance: 210px; }
+.bubble-index-5 { --offscreen-x: -35px; --offscreen-y: -122px; --angle: 257deg; --distance: 210px; }
+.bubble-index-6 { --offscreen-x: 122px; --offscreen-y: -20px; --angle: 309deg; --distance: 210px; }
+
 @keyframes bubbleFlyIn {
   0% {
     opacity: 0;
diff --git a/src/components/IntroBubbles.tsx b/src/components/IntroBubbles.tsx
index 1ea01757..33d83235 100644
--- a/src/components/IntroBubbles.tsx
+++ b/src/components/IntroBubbles.tsx
@@ -46,23 +46,6 @@ const IntroBubbles: React.FC<{ onFinish: () => void }> = ({ onFinish }) => {
     console.log('[IntroBubbles] useEffect: shouldShowIntro() =', show);
     setShouldShow(show);
   }, []);
-  // Store random seeds in a ref so they persist across renders but are not global
-  const randomSeeds = useRef<{ angle: number[]; dist: number[]; edge: number[]; edgePos: number[] }>();
-  if (!randomSeeds.current) {
-    randomSeeds.current = {
-      angle: Array.from({ length: bubblesData.length }, () => Math.random() * 30 - 15), // -15 to +15 deg
-      dist: Array.from({ length: bubblesData.length }, () => Math.random() * 30 - 15), // -15 to +15 px
-      edge: Array.from({ length: bubblesData.length }, () => Math.floor(Math.random() * 4)), // 0=top,1=right,2=bottom,3=left
-      edgePos: Array.from({ length: bubblesData.length }, () => Math.random() * 100), // 0-100vw/vh
-    };
-    try {
-      const small = JSON.stringify(randomSeeds.current).slice(0, 400);
-      console.log('[IntroBubbles] Random seeds generated:', small);
-    } catch {
-      console.log('[IntroBubbles] Random seeds generated');
-    }
-  }
-
   // Use a ref for onFinish to avoid effect restarts
   const onFinishRef = useRef(onFinish);
   useEffect(() => { onFinishRef.current = onFinish; }, [onFinish]);
@@ -121,52 +104,22 @@ const IntroBubbles: React.FC<{ onFinish: () => void }> = ({ onFinish }) => {
           <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-dumbbell"><path d="m6.5 6.5 11 11"></path><path d="m21 21-1-1"></path><path d="m3 3 1 1"></path><path d="m18 22 4-4"></path><path d="m2 6 4-4"></path><path d="m3 10 7-7"></path><path d="m14 21 7-7"></path></svg>
         </div>
         <div className={phase === 'orbit' ? 'bubbles-rotate' : ''}>
-          {/* Add randomness to angle and distance for each bubble */}
+          {/* Bubble motion is class-based to keep styles in CSS. */}
           {bubblesData.map((bubble, i) => {
             // Only show visible bubbles
             if (i >= visibleBubbles) return null;
-            // Calculate offscreen position for each bubble
-            const edge = randomSeeds.current!.edge[i];
-            const edgePos = randomSeeds.current!.edgePos[i];
-            let offX = 0, offY = 0;
-            if (edge === 0) { // top
-              offX = edgePos;
-              offY = -10;
-            } else if (edge === 1) { // right
-              offX = 110;
-              offY = edgePos;
-            } else if (edge === 2) { // bottom
-              offX = edgePos;
-              offY = 110;
-            } else { // left
-              offX = -10;
-              offY = edgePos;
-            }
-            const angle = (360 / bubblesData.length) * i;
-            const distance = 210;
-            let bubbleClass = `bubble bubble-color-${bubble.color}`;
+            let bubbleClass = `bubble bubble-color-${bubble.color} bubble-index-${i}`;
             if (phase === 'flyin') bubbleClass += ' bubble-fly-in';
             if (phase === 'orbit') bubbleClass += ' bubble-orbit';
             if (phase === 'meet') bubbleClass += ' bubble-meet';
             try {
-              const summary = JSON.stringify({ i, phase, bubbleClass, offX, offY, angle, distance }).slice(0, 300);
+              const summary = JSON.stringify({ i, phase, bubbleClass }).slice(0, 300);
               console.log(`[IntroBubbles] Rendering bubble ${i}:`, summary);
             } catch {
               console.log(`[IntroBubbles] Rendering bubble ${i}`);
             }
             return (
-              <div
-                key={i}
-                className={bubbleClass}
-                style={
-                  {
-                    '--offscreen-x': `${offX}px`,
-                    '--offscreen-y': `${offY}px`,
-                    '--angle': `${angle}deg`,
-                    '--distance': `${distance}px`,
-                  } as React.CSSProperties
-                }
-              >
+              <div key={i} className={bubbleClass}>
                 <span className="bubble-icon">{bubble.icon}</span>
                 {bubble.text}
               </div>
diff --git a/src/components/LoadingPage.css b/src/components/LoadingPage.css
index 1e531ed4..016623e8 100644
--- a/src/components/LoadingPage.css
+++ b/src/components/LoadingPage.css
@@ -15,6 +15,11 @@
   padding: 48px 32px 40px 32px;
   text-align: center;
   max-width: 350px;
+  width: min(350px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
   animation: fadeInBounce 0.8s cubic-bezier(.68,-0.55,.27,1.55);
 }
 
@@ -68,7 +73,70 @@
 .loading-desc {
   color: var(--text-medium, #555);
   font-size: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 0;
+}
+
+.loading-progress {
+  width: 100%;
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.loading-progress-track {
+  width: 100%;
+  height: 12px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: rgba(30, 203, 123, 0.12);
+  border: 1px solid rgba(30, 144, 203, 0.12);
+}
+
+.loading-progress-fill {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+.loading-progress-fill::-webkit-progress-bar {
+  background: transparent;
+}
+
+.loading-progress-fill::-webkit-progress-value {
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--primary-green, #1ecb7b), var(--secondary-blue, #1e90cb));
+  transition: width 240ms ease;
+}
+
+.loading-progress-fill::-moz-progress-bar {
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--primary-green, #1ecb7b), var(--secondary-blue, #1e90cb));
+}
+
+.loading-progress-active .loading-progress-fill::-webkit-progress-value {
+  animation: loadingProgressPulse 1.35s ease-in-out infinite;
+}
+
+.loading-progress-active .loading-progress-fill::-moz-progress-bar {
+  animation: loadingProgressPulse 1.35s ease-in-out infinite;
+}
+
+.loading-progress-active .loading-progress-track {
+  box-shadow: 0 0 0 0 rgba(30, 203, 123, 0.22);
+  animation: loadingTrackGlow 1.35s ease-in-out infinite;
+}
+
+.loading-progress-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-medium, #555);
 }
 
 .ai-disclaimer {
@@ -105,6 +173,15 @@ body.theme-dark .loading-desc {
   color: #c0c7d4;
 }
 
+body.theme-dark .loading-progress-track {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+body.theme-dark .loading-progress-meta {
+  color: #c0c7d4;
+}
+
 body.theme-dark .ai-disclaimer {
   color: #8892a2;
 }
@@ -123,3 +200,21 @@ body.theme-dark .ai-disclaimer {
     transform: translateY(0) scale(1);
   }
 }
+
+@keyframes loadingProgressPulse {
+  0% {
+    filter: saturate(0.95) brightness(0.98);
+  }
+  100% {
+    filter: saturate(1.1) brightness(1.05);
+  }
+}
+
+@keyframes loadingTrackGlow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(30, 203, 123, 0.14);
+  }
+  100% {
+    box-shadow: 0 0 0 6px rgba(30, 203, 123, 0.04);
+  }
+}
diff --git a/src/components/LoadingPage.tsx b/src/components/LoadingPage.tsx
index ebd07b43..94276784 100644
--- a/src/components/LoadingPage.tsx
+++ b/src/components/LoadingPage.tsx
@@ -1,36 +1,86 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './LoadingPage.css';
 import { Dumbbell, Target, Calendar, Zap } from 'lucide-react';
 
-const LoadingPage: React.FC = () => (
-  <div className="loading-screen">
-    <div className="loading-container fade-in-bounce">
-      <div className="loading-dumbbell">
-        <Dumbbell size={40} color="#fff" />
-      </div>
-      <div className="loading-icons">
-        <div className="loading-icon-pill">
-          <Target size={18} />
-          <span>Goals</span>
-        </div>
-        <div className="loading-icon-pill">
-          <Calendar size={18} />
-          <span>Schedule</span>
+const LOADING_PROGRESS_KEY = 'fitbuddyai_loading_progress';
+
+type LoadingProgressState = {
+  progress: number;
+  stage: string;
+  currentStep: number;
+  totalSteps: number;
+  updatedAt: number;
+};
+
+const readLoadingProgress = (): LoadingProgressState | null => {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = sessionStorage.getItem(LOADING_PROGRESS_KEY) || localStorage.getItem(LOADING_PROGRESS_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch (_error) {
+    return null;
+  }
+};
+
+const LoadingPage: React.FC = () => {
+  const [progressState, setProgressState] = useState<LoadingProgressState | null>(() => readLoadingProgress());
+
+  useEffect(() => {
+    const sync = () => setProgressState(readLoadingProgress());
+    sync();
+    window.addEventListener('fitbuddyai-loading-progress', sync as EventListener);
+    window.addEventListener('storage', sync);
+    return () => {
+      window.removeEventListener('fitbuddyai-loading-progress', sync as EventListener);
+      window.removeEventListener('storage', sync);
+    };
+  }, []);
+
+  const progress = Math.max(0, Math.min(100, Math.round(progressState?.progress ?? 0)));
+  const stage = progressState?.stage || 'Your personalized plan is on its way...';
+  const detail = progressState?.totalSteps
+    ? `Step ${Math.min(progressState.currentStep || 0, progressState.totalSteps)} of ${progressState.totalSteps}`
+    : 'Working through your plan';
+
+  return (
+    <div className="loading-screen">
+      <div className="loading-container fade-in-bounce">
+        <div className="loading-dumbbell">
+          <Dumbbell size={40} color="#fff" />
         </div>
-        <div className="loading-icon-pill">
-          <Zap size={18} />
-          <span>Energy</span>
+        <div className="loading-icons">
+          <div className="loading-icon-pill">
+            <Target size={18} />
+            <span>Goals</span>
+          </div>
+          <div className="loading-icon-pill">
+            <Calendar size={18} />
+            <span>Schedule</span>
+          </div>
+          <div className="loading-icon-pill">
+            <Zap size={18} />
+            <span>Energy</span>
+          </div>
+          <div className="loading-icon-pill">
+            <Dumbbell size={18} />
+            <span>Strength</span>
+          </div>
         </div>
-        <div className="loading-icon-pill">
-          <Dumbbell size={18} />
-          <span>Strength</span>
+        <h2 className="loading-title">Hang tight!</h2>
+        <p className="loading-desc">{stage}</p>
+        <div className={`loading-progress ${progress < 100 ? 'loading-progress-active' : 'loading-progress-complete'}`} aria-label={`Plan generation progress ${progress}%`}>
+          <div className="loading-progress-track">
+            <progress className="loading-progress-fill" value={progress} max={100} />
+          </div>
+          <div className="loading-progress-meta">
+            <span>{detail}</span>
+            <span>{progress}%</span>
+          </div>
         </div>
+        <p className="ai-disclaimer">Disclaimer: This plan is AI-generated and may not be perfect for everyone. Check important info.</p>
       </div>
-      <h2 className="loading-title">Hang tight!</h2>
-      <p className="loading-desc">Your personalized plan is on its way...</p>
-      <p className="ai-disclaimer">Disclaimer: This plan is AI-generated and may not be perfect for everyone. Check important info.</p>
     </div>
-  </div>
-);
+  );
+};
 
 export default LoadingPage;
diff --git a/src/components/NewIntroPage.css b/src/components/NewIntroPage.css
new file mode 100644
index 00000000..9f25bd02
--- /dev/null
+++ b/src/components/NewIntroPage.css
@@ -0,0 +1,720 @@
+.new-intro-page {
+  --intro-bg: linear-gradient(135deg, #f7fbf4 0%, #eef7f2 45%, #f6fbff 100%);
+  --intro-surface: rgba(255, 255, 255, 0.82);
+  --intro-surface-strong: rgba(255, 255, 255, 0.92);
+  --intro-border: rgba(31, 42, 54, 0.08);
+  --intro-muted: var(--text-medium);
+  --intro-shadow: 0 24px 60px rgba(31, 42, 54, 0.1);
+  --intro-soft-shadow: 0 14px 28px rgba(31, 42, 54, 0.08);
+  --intro-kicker-bg: rgba(88, 204, 2, 0.12);
+  --intro-kicker-border: rgba(88, 204, 2, 0.18);
+  --intro-kicker-text: #0f5132;
+  --intro-accent-bg: rgba(30, 176, 246, 0.14);
+  --intro-accent-text: #125f87;
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  color: var(--text-dark);
+  background:
+    radial-gradient(circle at top left, rgba(88, 204, 2, 0.16), transparent 28%),
+    radial-gradient(circle at top right, rgba(28, 176, 246, 0.16), transparent 24%),
+    radial-gradient(circle at bottom left, rgba(255, 150, 0, 0.12), transparent 22%),
+    var(--intro-bg);
+}
+
+body.theme-dark .new-intro-page {
+  --intro-bg: linear-gradient(135deg, #0b111b 0%, #0d1724 44%, #10192a 100%);
+  --intro-surface: rgba(12, 18, 28, 0.82);
+  --intro-surface-strong: rgba(13, 20, 32, 0.94);
+  --intro-border: rgba(255, 255, 255, 0.06);
+  --intro-muted: #aab4c4;
+  --intro-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
+  --intro-soft-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
+  --intro-kicker-bg: rgba(30, 203, 123, 0.1);
+  --intro-kicker-border: rgba(30, 203, 123, 0.14);
+  --intro-kicker-text: #c9f7df;
+  --intro-accent-bg: rgba(27, 159, 224, 0.14);
+  --intro-accent-text: #9fd6ff;
+  color: var(--text-dark);
+}
+
+.new-intro-backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.intro-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
+  background-size: 44px 44px;
+  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 82%);
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 82%);
+}
+
+body.theme-dark .intro-grid {
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+
+.intro-orb {
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(12px);
+  opacity: 0.72;
+  animation: orbFloat 14s ease-in-out infinite;
+}
+
+.orb-a {
+  width: 28rem;
+  height: 28rem;
+  top: -10rem;
+  left: -8rem;
+  background: radial-gradient(circle, rgba(88, 204, 2, 0.28), transparent 68%);
+}
+
+.orb-b {
+  width: 22rem;
+  height: 22rem;
+  top: 5rem;
+  right: -7rem;
+  background: radial-gradient(circle, rgba(28, 176, 246, 0.22), transparent 68%);
+  animation-delay: -4s;
+}
+
+.orb-c {
+  width: 18rem;
+  height: 18rem;
+  bottom: 2rem;
+  left: 40%;
+  background: radial-gradient(circle, rgba(255, 150, 0, 0.2), transparent 72%);
+  animation-delay: -8s;
+}
+
+.new-intro-topbar,
+.new-intro-shell {
+  position: relative;
+  z-index: 1;
+}
+
+.new-intro-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 20px 24px 0;
+  position: sticky;
+  top: 0;
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+}
+
+.new-intro-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+.new-intro-brand-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 16px;
+  color: #fff;
+  background: var(--gradient-primary);
+  box-shadow: 0 16px 30px rgba(30, 203, 123, 0.2);
+  flex-shrink: 0;
+}
+
+.new-intro-brand-copy {
+  display: grid;
+  min-width: 0;
+}
+
+.new-intro-brand strong,
+.new-intro-brand span {
+  display: block;
+}
+
+.new-intro-brand strong {
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+}
+
+.new-intro-brand-copy span {
+  color: var(--intro-muted);
+  font-size: 0.9rem;
+}
+
+.new-intro-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.new-intro-nav-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  text-decoration: none;
+  color: var(--text-dark);
+  background: var(--intro-surface);
+  border: 1px solid var(--intro-border);
+  box-shadow: var(--intro-soft-shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.new-intro-nav-link:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 18px 30px rgba(31, 42, 54, 0.12);
+}
+
+.new-intro-nav-link.accent {
+  background: var(--gradient-primary);
+  color: #fff;
+  border-color: transparent;
+}
+
+body.theme-dark .new-intro-nav-link {
+  background: rgba(12, 18, 28, 0.9);
+  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
+}
+
+body.theme-dark .new-intro-nav-link:hover {
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
+}
+
+.new-intro-shell {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 32px 24px 56px;
+}
+
+.new-intro-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
+  gap: 32px;
+  align-items: stretch;
+  padding-top: 24px;
+}
+
+.new-intro-copy,
+.new-intro-panel,
+.detail-card,
+.new-intro-banner {
+  animation: riseIn 0.7s ease both;
+}
+
+.new-intro-copy {
+  padding: 16px 4px 0 0;
+}
+
+.new-intro-kicker,
+.banner-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  font-size: 0.86rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--intro-kicker-text);
+  background: var(--intro-kicker-bg);
+  border: 1px solid var(--intro-kicker-border);
+}
+
+.new-intro-copy h1 {
+  margin: 18px 0 18px;
+  font-size: clamp(3rem, 5.4vw, 5.7rem);
+  line-height: 0.94;
+  letter-spacing: -0.06em;
+  max-width: 11ch;
+}
+
+.new-intro-lead {
+  max-width: 66ch;
+  font-size: 1.08rem;
+  line-height: 1.8;
+  color: var(--intro-muted);
+}
+
+.new-intro-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.new-intro-actions .btn {
+  min-width: min(100%, 250px);
+  gap: 10px;
+}
+
+.new-intro-page .btn-secondary {
+  background: var(--intro-surface-strong);
+  color: var(--text-dark);
+  border-color: var(--intro-border);
+  border-bottom-color: var(--intro-border);
+}
+
+body.theme-dark .new-intro-page .btn-secondary {
+  color: var(--text-dark);
+}
+
+.new-intro-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+.new-intro-pill {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: var(--intro-surface);
+  border: 1px solid var(--intro-border);
+  box-shadow: var(--intro-soft-shadow);
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.new-intro-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.metric-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-height: 118px;
+  padding: 18px;
+  border-radius: 22px;
+  background: var(--intro-surface);
+  border: 1px solid var(--intro-border);
+  box-shadow: var(--intro-soft-shadow);
+}
+
+.metric-card strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 0.98rem;
+}
+
+.metric-card span {
+  color: var(--intro-muted);
+  font-size: 0.92rem;
+}
+
+.metric-card-primary {
+  flex-direction: column;
+  justify-content: space-between;
+  background: linear-gradient(145deg, rgba(30, 203, 123, 0.18), rgba(28, 176, 246, 0.14));
+}
+
+body.theme-dark .metric-card-primary {
+  background: linear-gradient(145deg, rgba(30, 203, 123, 0.15), rgba(28, 176, 246, 0.11));
+}
+
+.metric-value {
+  font-size: 2.6rem;
+  font-weight: 800;
+  line-height: 1;
+  color: var(--primary-green-dark);
+}
+
+.metric-value-inline {
+  font-size: 2rem;
+}
+
+.new-intro-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.panel-card {
+  padding: 24px;
+  border-radius: 28px;
+  background: var(--intro-surface);
+  border: 1px solid var(--intro-border);
+  box-shadow: var(--intro-shadow);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+}
+
+.panel-card-hero {
+  display: grid;
+  gap: 18px;
+  min-height: 100%;
+}
+
+.panel-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: var(--intro-accent-bg);
+  color: var(--intro-accent-text);
+  font-weight: 700;
+  font-size: 0.86rem;
+}
+
+.panel-card-hero h2,
+.new-intro-banner h2 {
+  font-size: clamp(1.85rem, 3vw, 2.6rem);
+  line-height: 1.05;
+}
+
+.panel-card-hero p,
+.new-intro-banner p {
+  color: var(--intro-muted);
+  line-height: 1.75;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 0.92fr 1.08fr;
+  gap: 14px;
+}
+
+.dashboard-summary,
+.dashboard-week,
+.panel-stats div,
+.weekly-row,
+.detail-card {
+  border-radius: 18px;
+  border: 1px solid var(--intro-border);
+  background: var(--intro-surface-strong);
+}
+
+.dashboard-summary {
+  padding: 18px;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+
+.dashboard-label {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--primary-green-dark);
+  background: rgba(88, 204, 2, 0.12);
+}
+
+body.theme-dark .dashboard-label {
+  color: #c9f7df;
+  background: rgba(30, 203, 123, 0.12);
+}
+
+.dashboard-summary strong,
+.weekly-row strong,
+.detail-card h3,
+.panel-stats strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.dashboard-summary p,
+.weekly-row span,
+.detail-card p,
+.panel-stats span {
+  color: var(--intro-muted);
+}
+
+.progress-stack {
+  display: grid;
+  gap: 12px;
+}
+
+.progress-stack span {
+  display: block;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(88, 204, 2, 0.95), rgba(28, 176, 246, 0.8));
+  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.24);
+}
+
+.progress-bar-86 {
+  width: 86%;
+}
+
+.progress-bar-64 {
+  width: 64%;
+}
+
+.progress-bar-78 {
+  width: 78%;
+}
+
+.dashboard-week {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+}
+
+.panel-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.panel-stats div {
+  padding: 14px;
+}
+
+.panel-week-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--intro-muted);
+  font-size: 0.92rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.weekly-stack {
+  display: grid;
+  gap: 10px;
+}
+
+.weekly-row {
+  display: grid;
+  grid-template-columns: 3rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.weekly-row:hover {
+  transform: translateX(4px);
+  box-shadow: 0 14px 26px rgba(31, 42, 54, 0.1);
+}
+
+.weekly-row-green {
+  border-left: 4px solid var(--primary-green);
+}
+
+.weekly-row-blue {
+  border-left: 4px solid var(--secondary-blue);
+}
+
+.weekly-row-orange {
+  border-left: 4px solid var(--accent-orange);
+}
+
+.new-intro-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+
+.detail-card {
+  padding: 22px;
+  min-height: 100%;
+}
+
+.detail-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 16px;
+  border-radius: 14px;
+  background: rgba(88, 204, 2, 0.14);
+  color: var(--primary-green-dark);
+}
+
+body.theme-dark .detail-icon {
+  background: rgba(30, 203, 123, 0.12);
+  color: #c9f7df;
+}
+
+.detail-card h3 {
+  font-size: 1.08rem;
+}
+
+.detail-card p {
+  line-height: 1.7;
+}
+
+.new-intro-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 18px;
+  padding: 24px 28px;
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(30, 203, 123, 0.18), rgba(28, 176, 246, 0.14));
+  border: 1px solid var(--intro-border);
+  box-shadow: var(--intro-shadow);
+}
+
+body.theme-dark .new-intro-banner {
+  background: linear-gradient(135deg, rgba(15, 183, 122, 0.12), rgba(27, 159, 224, 0.1));
+}
+
+.new-intro-banner > div {
+  max-width: 68ch;
+}
+
+.banner-kicker {
+  margin-bottom: 14px;
+}
+
+.banner-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-radius: 18px;
+  text-decoration: none;
+  font-weight: 800;
+  color: #fff;
+  background: var(--gradient-primary);
+  box-shadow: 0 18px 30px rgba(30, 203, 123, 0.22);
+  flex-shrink: 0;
+}
+
+.banner-cta:hover {
+  transform: translateY(-1px);
+}
+
+@keyframes riseIn {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes orbFloat {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(0, 12px, 0) scale(1.04);
+  }
+}
+
+@media (max-width: 1100px) {
+  .new-intro-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .new-intro-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .new-intro-metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 820px) {
+  .new-intro-topbar,
+  .new-intro-banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .new-intro-topbar {
+    padding-top: 16px;
+  }
+
+  .new-intro-nav {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .dashboard-grid,
+  .new-intro-metrics,
+  .panel-stats,
+  .new-intro-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .new-intro-copy h1 {
+    max-width: none;
+  }
+
+  .panel-week-header,
+  .weekly-row {
+    grid-template-columns: 1fr;
+    justify-items: start;
+  }
+
+  .weekly-row svg {
+    display: none;
+  }
+}
+
+@media (max-width: 560px) {
+  .new-intro-shell {
+    padding-inline: 16px;
+    padding-bottom: 40px;
+  }
+
+  .new-intro-topbar {
+    padding-inline: 16px;
+  }
+
+  .new-intro-copy h1 {
+    font-size: clamp(2.5rem, 11vw, 3.8rem);
+  }
+
+  .new-intro-actions .btn {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .panel-card,
+  .detail-card,
+  .new-intro-banner {
+    padding: 20px;
+  }
+
+  .new-intro-brand-copy span {
+    font-size: 0.82rem;
+  }
+
+  .panel-week-header {
+    font-size: 0.78rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/NewIntroPage.tsx b/src/components/NewIntroPage.tsx
new file mode 100644
index 00000000..125250f4
--- /dev/null
+++ b/src/components/NewIntroPage.tsx
@@ -0,0 +1,233 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, Brain, CalendarDays, ChevronRight, Dumbbell, Flame, Layers3, ShieldCheck, Sparkles, Target, TrendingUp } from 'lucide-react';
+import './NewIntroPage.css';
+import { loadUserData } from '../services/localStorage';
+
+const heroStats = [
+  {
+    value: '01',
+    label: 'guided intake',
+    detail: 'one flow turns context into a usable plan',
+  },
+  {
+    value: '24/7',
+    label: 'calendar access',
+    detail: 'your plan stays readable across devices',
+  },
+  {
+    value: 'Auto',
+    label: 'adaptive updates',
+    detail: 'progress reshapes the next training week',
+  },
+];
+
+const workflowCards = [
+  {
+    title: 'Guided intake',
+    text: 'A focused questionnaire captures goals, schedule, and training constraints without making onboarding feel heavy.',
+    Icon: Target,
+  },
+  {
+    title: 'Adaptive planning',
+    text: 'The generator returns a balanced week that combines effort, recovery, and progression in a format you can follow.',
+    Icon: Brain,
+  },
+  {
+    title: 'Visible progress',
+    text: 'Calendar views, saved workouts, and rewards keep each session tied to a larger training story.',
+    Icon: CalendarDays,
+  },
+  {
+    title: 'Recovery-aware cadence',
+    text: 'The system eases off when the week calls for it, so the plan stays realistic instead of rigid.',
+    Icon: ShieldCheck,
+  },
+];
+
+const weeklyBlocks = [
+  { label: 'Mon', title: 'Upper Push', tone: 'green' },
+  { label: 'Tue', title: 'Conditioning', tone: 'blue' },
+  { label: 'Wed', title: 'Mobility + Core', tone: 'orange' },
+  { label: 'Thu', title: 'Lower Strength', tone: 'green' },
+  { label: 'Fri', title: 'Recovery', tone: 'blue' },
+];
+
+const featurePills = [
+  'Clear weekly structure',
+  'Recovery-aware guidance',
+  'Saved workouts and rewards',
+  'Progress that compounds',
+];
+
+const NewIntroPage: React.FC = () => {
+  const currentUser = loadUserData();
+  const hasUser = Boolean(currentUser?.id || currentUser?.data?.id);
+  const startHref = hasUser ? '/calendar' : '/questionnaire';
+
+  return (
+    <div className="new-intro-page">
+      <div className="new-intro-backdrop" aria-hidden="true">
+        <span className="intro-orb orb-a" />
+        <span className="intro-orb orb-b" />
+        <span className="intro-orb orb-c" />
+        <span className="intro-grid" />
+      </div>
+
+      <header className="new-intro-topbar">
+        <Link to="/" className="new-intro-brand">
+          <span className="new-intro-brand-mark">
+            <Dumbbell size={18} />
+          </span>
+          <span className="new-intro-brand-copy">
+            <strong>FitBuddyAI</strong>
+            <span>fitness planning, designed like a product</span>
+          </span>
+        </Link>
+
+        <nav className="new-intro-nav" aria-label="Intro navigation">
+          <Link to="/workouts" className="new-intro-nav-link">Library</Link>
+          <Link to="/calendar" className="new-intro-nav-link">Calendar</Link>
+          <Link to={startHref} className="new-intro-nav-link accent">Start</Link>
+        </nav>
+      </header>
+
+      <main className="new-intro-shell">
+        <section className="new-intro-hero">
+          <div className="new-intro-copy">
+            <span className="new-intro-kicker">
+              <Sparkles size={16} />
+              Modern intro, clearer product story
+            </span>
+            <h1>Fitness planning that feels polished, personal, and easy to trust.</h1>
+            <p className="new-intro-lead">
+              FitBuddyAI turns onboarding into a guided product experience: a focused intake, a living weekly plan,
+              and a progress system that adapts as you train instead of sending you into a random routine.
+            </p>
+
+            <div className="new-intro-actions">
+              <Link to={startHref} className="btn btn-primary btn-large">
+                {hasUser ? 'Open your calendar' : 'Build my plan'}
+                <ArrowRight size={18} />
+              </Link>
+              <Link to="/workouts" className="btn btn-secondary btn-large">
+                Browse the workout library
+              </Link>
+            </div>
+
+            <div className="new-intro-pills" aria-label="Key product highlights">
+              {featurePills.map((pill) => (
+                <span key={pill} className="new-intro-pill">{pill}</span>
+              ))}
+            </div>
+
+            <div className="new-intro-metrics">
+              {heroStats.map((stat) => (
+                <article key={stat.label} className={stat.value === '01' ? 'metric-card metric-card-primary' : 'metric-card'}>
+                  <span className={stat.value === '01' ? 'metric-value' : 'metric-value metric-value-inline'}>{stat.value}</span>
+                  <div>
+                    <strong>{stat.label}</strong>
+                    <span>{stat.detail}</span>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </div>
+
+          <aside className="new-intro-panel">
+            <div className="panel-card panel-card-hero">
+              <div className="panel-badge">
+                <Layers3 size={16} />
+                <span>Live preview</span>
+              </div>
+              <h2>Your week, visualized like a modern dashboard.</h2>
+              <p>
+                The intro frames the core product loop: one assessment creates a structured plan, the calendar keeps
+                it visible, and progress updates keep the next week honest.
+              </p>
+
+              <div className="dashboard-grid">
+                <div className="dashboard-summary">
+                  <span className="dashboard-label">Today</span>
+                  <strong>Upper push + core</strong>
+                  <p>40 min · moderate effort · recovery-aware</p>
+                  <div className="progress-stack" aria-hidden="true">
+                    <span className="progress-bar progress-bar-86" />
+                    <span className="progress-bar progress-bar-64" />
+                    <span className="progress-bar progress-bar-78" />
+                  </div>
+                </div>
+
+                <div className="dashboard-week">
+                  <div className="panel-week-header">
+                    <span>Example week</span>
+                    <span>balanced progression</span>
+                  </div>
+                  <div className="weekly-stack">
+                    {weeklyBlocks.map((block) => (
+                      <div key={block.label} className={`weekly-row weekly-row-${block.tone}`}>
+                        <span>{block.label}</span>
+                        <strong>{block.title}</strong>
+                        <ChevronRight size={16} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="panel-stats">
+                <div>
+                  <strong>Adaptive</strong>
+                  <span>weekly load</span>
+                </div>
+                <div>
+                  <strong>Fast</strong>
+                  <span>saved-workout sync</span>
+                </div>
+                <div>
+                  <strong>Clear</strong>
+                  <span>journey visibility</span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </section>
+
+        <section className="new-intro-grid" id="workflow">
+          {workflowCards.map((card) => {
+            const Icon = card.Icon;
+            return (
+              <article key={card.title} className="detail-card">
+                <div className="detail-icon">
+                  <Icon size={20} />
+                </div>
+                <h3>{card.title}</h3>
+                <p>{card.text}</p>
+              </article>
+            );
+          })}
+        </section>
+
+        <section className="new-intro-banner">
+          <div>
+            <span className="banner-kicker">
+              <Target size={16} />
+              Built to move you forward
+            </span>
+            <h2>Less wandering, more momentum.</h2>
+            <p>
+              The intro explains the product loop in a way a professional landing page should: what it does, how it
+              works, and why the next step matters.
+            </p>
+          </div>
+          <Link to={startHref} className="banner-cta">
+            <span>{hasUser ? 'Continue into the calendar' : 'Start the guided flow'}</span>
+            <ArrowRight size={18} />
+          </Link>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default NewIntroPage;
\ No newline at end of file
diff --git a/src/components/Questionnaire.tsx b/src/components/Questionnaire.tsx
index 54e6f331..7fac965a 100644
--- a/src/components/Questionnaire.tsx
+++ b/src/components/Questionnaire.tsx
@@ -19,6 +19,38 @@ import BackgroundDots from './BackgroundDots';
 
 // Webhook URL for Google Sheets integration
 const SHEET_WEBHOOK_URL = 'https://corsproxy.io/?key=7cf03de1&url=https://script.google.com/macros/s/AKfycbwFDdT0QVaP2jY8t4N0048PfQW_rYxB4noFaG-nExO9MZ5h3DCuNLUPNg3-qntT01tg/exec?gid=0';
+const LOADING_PROGRESS_KEY = 'fitbuddyai_loading_progress';
+
+type LoadingProgressState = {
+  progress: number;
+  stage: string;
+  currentStep: number;
+  totalSteps: number;
+  updatedAt: number;
+};
+
+const clampProgress = (value: number) => Math.max(0, Math.min(100, Math.round(value)));
+
+const writeLoadingProgress = (progress: number, stage: string, currentStep = 0, totalSteps = 0) => {
+  const payload: LoadingProgressState = {
+    progress: clampProgress(progress),
+    stage,
+    currentStep,
+    totalSteps,
+    updatedAt: Date.now(),
+  };
+
+  try { sessionStorage.setItem(LOADING_PROGRESS_KEY, JSON.stringify(payload)); } catch (_error) {}
+  try { localStorage.setItem(LOADING_PROGRESS_KEY, JSON.stringify(payload)); } catch (_error) {}
+  try { window.dispatchEvent(new CustomEvent('fitbuddyai-loading-progress', { detail: payload })); } catch (_error) {}
+  return payload;
+};
+
+const clearLoadingProgress = () => {
+  try { sessionStorage.removeItem(LOADING_PROGRESS_KEY); } catch (_error) {}
+  try { localStorage.removeItem(LOADING_PROGRESS_KEY); } catch (_error) {}
+  try { window.dispatchEvent(new CustomEvent('fitbuddyai-loading-progress', { detail: null })); } catch (_error) {}
+};
 
 interface QuestionnaireProps {
   onComplete: (userData: UserData, workoutPlan: WorkoutPlan) => void;
@@ -851,6 +883,7 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
         return;
       }
       setIsPlanGenerating(true);
+      writeLoadingProgress(5, 'Preparing your workout plan...', 0, 0);
       safeNavigateToLoading(true);
   setError(null);
   // Use the global loading route instead of the component-local LoadingScreen
@@ -867,6 +900,7 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
         // We don't await this because webhook failures should not block plan generation.
         // sendToSheet already logs errors internally.
         sendToSheet(answers, allQuestions);
+      writeLoadingProgress(12, 'Preparing your answers for generation...', 0, 0);
          // Process answers to include custom inputs for "Other" options
          const processedAnswers = { ...answers };
         
@@ -932,18 +966,23 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
 
             const weeks = parseWeeks(durationLabel);
             if (weeks <= 1) {
+              writeLoadingProgress(25, 'Generating your plan...', 1, 1);
               workoutPlan = await generateWorkoutPlan(userData, processedAnswers, allQuestions);
+              writeLoadingProgress(90, 'Finalizing your plan...', 1, 1);
             } else {
               // Generate week-by-week and concatenate dailyWorkouts
               const start = processedAnswers.startDate || new Date().toISOString().split('T')[0];
               const allWeeks: any[] = [];
               const currentStart = new Date(start);
+              writeLoadingProgress(20, `Generating week 1 of ${weeks}...`, 0, weeks);
               for (let w = 0; w < weeks; w++) {
                 const answersForWeek = { ...processedAnswers, startDate: currentStart.toISOString().split('T')[0], planDuration: '1 week (part)' };
                 try {
+                  writeLoadingProgress(20 + ((w / Math.max(1, weeks)) * 70), `Generating week ${w + 1} of ${weeks}...`, w + 1, weeks);
                   const weekPlan = await generateWorkoutPlan(userData, answersForWeek, allQuestions);
                   // Normalize weekPlan.dailyWorkouts dates if needed to ensure continuity
                   allWeeks.push(weekPlan);
+                  writeLoadingProgress(20 + (((w + 1) / Math.max(1, weeks)) * 70), `Completed week ${w + 1} of ${weeks}.`, w + 1, weeks);
                   // advance by 7 days
                   currentStart.setDate(currentStart.getDate() + 7);
                 } catch (err) {
@@ -952,6 +991,7 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
                 }
               }
               // Merge weekly plans into one plan
+              writeLoadingProgress(92, 'Merging weekly plans...', weeks, weeks);
               const mergedDaily: any[] = [];
               let finalName = '';
               let finalDesc = '';
@@ -978,11 +1018,14 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
               } as any;
             }
             console.log(`[PLAN] Workout plan generated on attempt ${attempt}`);
+            writeLoadingProgress(100, 'Your plan is ready.', weeks, weeks);
+            window.setTimeout(() => clearLoadingProgress(), 1500);
             break;
           } catch (err) {
             console.error(`[PLAN] Attempt ${attempt} failed:`, err);
             if (attempt === maxRetries + 1) {
               setError('Failed to generate workout plan. Please try again.');
+              clearLoadingProgress();
             }
           }
         }
@@ -1028,6 +1071,7 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
     } catch (err) {
       console.error('[PLAN] Error generating plan:', err);
       setError('Failed to generate workout plan. Please try again.');
+      clearLoadingProgress();
     } finally {
       console.log('[PLAN] Done loading plan.');
       setIsPlanGenerating(false);
@@ -1437,6 +1481,7 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
   console.log('Regenerate Plan clicked with userData:', currentUser);
   setError(null);
     try {
+  writeLoadingProgress(10, 'Preparing your updated plan...', 0, 0);
   safeNavigateToLoading();
       // When regenerating from MenuScreen we should also support week-by-week generation for long durations
       const durationLabel2 = (currentAnswers.planDuration || '').toString().toLowerCase();
@@ -1452,17 +1497,23 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
       const weeks2 = parseWeeks2(durationLabel2);
       let newPlan: any;
       if (weeks2 <= 1) {
+        writeLoadingProgress(25, 'Regenerating your plan...', 1, 1);
         newPlan = await generateWorkoutPlan(currentUser as UserData, currentAnswers, currentQs);
+        writeLoadingProgress(90, 'Finalizing your updated plan...', 1, 1);
       } else {
         const start2 = currentAnswers.startDate || new Date().toISOString().split('T')[0];
         const chunks: any[] = [];
         const cs = new Date(start2);
+        writeLoadingProgress(20, `Regenerating week 1 of ${weeks2}...`, 0, weeks2);
         for (let w = 0; w < weeks2; w++) {
           const answersForWeek = { ...currentAnswers, startDate: cs.toISOString().split('T')[0], planDuration: '1 week (part)'};
+          writeLoadingProgress(20 + ((w / Math.max(1, weeks2)) * 70), `Regenerating week ${w + 1} of ${weeks2}...`, w + 1, weeks2);
           const weekPlan = await generateWorkoutPlan(currentUser as UserData, answersForWeek, currentQs);
           chunks.push(weekPlan);
+          writeLoadingProgress(20 + (((w + 1) / Math.max(1, weeks2)) * 70), `Completed week ${w + 1} of ${weeks2}.`, w + 1, weeks2);
           cs.setDate(cs.getDate() + 7);
         }
+        writeLoadingProgress(92, 'Merging your updated plan...', weeks2, weeks2);
         const merged: any[] = [];
         chunks.forEach(c => { if (Array.isArray(c.dailyWorkouts)) merged.push(...c.dailyWorkouts); });
         newPlan = { id: `merged-plan-${Date.now()}`, name: chunks[0]?.name || 'Merged Plan', description: chunks[0]?.description || '', startDate: chunks[0]?.startDate || start2, endDate: chunks[chunks.length - 1]?.endDate || merged[merged.length - 1]?.date || start2, totalDays: merged.length, weeklyStructure: chunks[0]?.weeklyStructure || [], dailyWorkouts: merged };
@@ -1502,10 +1553,13 @@ const Questionnaire: React.FC<QuestionnaireProps> = ({ onComplete }) => {
             const { id: _id, token: _token, access_token: _access_token, jwt: _jwt, sub: _sub, ...sanitized } = (currentUser as any) || {};
             onComplete(sanitized as UserData, mergedPlan);
           }
+          writeLoadingProgress(100, 'Your updated plan is ready.', weeks2, weeks2);
+          window.setTimeout(() => clearLoadingProgress(), 1500);
       navigate('/calendar');
     } catch (err) {
       console.error('Error regenerating plan:', err);
       setError('Failed to generate a new plan. Please try again.');
+          clearLoadingProgress();
     } finally {
       // no local loading state to clear; global /loading route handles UI
     }
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
index 6bcf343a..0f95ab4a 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -6,9 +6,11 @@ type Theme = 'theme-light' | 'theme-dark';
 interface SettingsPageProps {
   theme: Theme;
   onToggleTheme: () => void;
+  homeIntroEnabled: boolean;
+  onToggleHomeIntro: () => void;
 }
 
-const SettingsPage: React.FC<SettingsPageProps> = ({ theme, onToggleTheme }) => {
+const SettingsPage: React.FC<SettingsPageProps> = ({ theme, onToggleTheme, homeIntroEnabled, onToggleHomeIntro }) => {
   const isDark = theme === 'theme-dark';
   return (
     <div className="settings-page">
@@ -28,6 +30,16 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ theme, onToggleTheme }) =>
               {isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
             </button>
           </div>
+
+          <div className="settings-row">
+            <div>
+              <h3>Home intro animation</h3>
+              <p className="setting-help">Play the new particle-heavy intro when you open the home page.</p>
+            </div>
+            <button className="toggle-btn" onClick={onToggleHomeIntro}>
+              {homeIntroEnabled ? 'Disable Intro' : 'Enable Intro'}
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/ShopPage.tsx b/src/components/ShopPage.tsx
index 65b07a53..2a8087a0 100644
--- a/src/components/ShopPage.tsx
+++ b/src/components/ShopPage.tsx
@@ -28,8 +28,6 @@ const STREAK_SAVER_OPTIONS = [
   { id: 'streak-saver-5', name: 'Streak Saver 5x', quantity: 5, price: 3000 }
 ];
 
-const DEFAULT_ENERGY = 10000;
-
 const POWERUPS = [
   { id: 'spinpfp', name: 'Spinning Profile Picture', icon: <RefreshCw size={32} color="#1e90cb" />, price: 300, type: 'powerup', description: 'Make your profile picture spin for 7 days!' },
   { id: 'sparkle', name: 'Sparkle Effect', icon: <Sparkles size={32} color="#ffb347" />, price: 150, type: 'powerup', description: 'Add a sparkle effect to your avatar.' },
@@ -61,12 +59,23 @@ const ShopPage: React.FC<ShopPageProps> = ({ user, onPurchase, onRedeemStreakSav
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const tabsRef = useRef<HTMLDivElement | null>(null);
   const indicatorRef = useRef<HTMLDivElement | null>(null);
+
+  const hasLocalUserOverride = () => {
+    if (typeof window === 'undefined') return false;
+    try {
+      return Boolean(sessionStorage.getItem('fitbuddyai_local_user_override') || localStorage.getItem('fitbuddyai_local_user_override'));
+    } catch (_error) {
+      return false;
+    }
+  };
   
 
   // Poll user from server every 1s if logged in
   useEffect(() => {
     if (!user?.id) return;
+    if (hasLocalUserOverride()) return;
     const fetchAndUpdate = async () => {
+      if (hasLocalUserOverride()) return;
       const fresh = await fetchUserById(user.id);
       if (fresh) {
         // Update localStorage and force rerender via onPurchase (hacky, but works for now)
@@ -130,37 +139,6 @@ const ShopPage: React.FC<ShopPageProps> = ({ user, onPurchase, onRedeemStreakSav
       return;
     }
     setPurchasing(item.id);
-
-    const isStreakSaver = String(item.id || '').startsWith('streak-saver');
-
-    // Handle streak saver client-side to avoid server rejection of custom ids
-    if (isStreakSaver) {
-      try {
-        const qty = Number((item as any).quantity ?? 1);
-        const nextInventory = Array.isArray(user.inventory) ? [...user.inventory] : [];
-        const idx = nextInventory.findIndex((it: any) => String(it?.id || '').startsWith('streak-saver'));
-        if (idx >= 0) {
-          const existing = nextInventory[idx];
-          const existingQty = Number(existing.quantity ?? existing.count ?? 1);
-          nextInventory[idx] = { ...existing, quantity: (Number.isFinite(existingQty) ? existingQty : 1) + qty };
-        } else {
-          nextInventory.push({ id: 'streak-saver', quantity: qty, type: 'powerup' });
-        }
-        const nextEnergy = Math.max(0, (user.energy ?? DEFAULT_ENERGY) - item.price);
-        const nextUser = { ...user, energy: nextEnergy, inventory: nextInventory };
-        saveUserData({ data: nextUser });
-        onPurchase(item);
-        window.dispatchEvent(new Event('storage'));
-      } catch (e) {
-        console.warn('Failed to process streak saver purchase:', e);
-        window.showFitBuddyNotification?.({ title: 'Purchase Failed', message: 'Purchase failed.', variant: 'error' });
-      } finally {
-        setPurchasing(null);
-      }
-      return;
-    }
-
-    // Default flow for server-backed items
     const updated = await buyShopItem(user.id, item);
     setPurchasing(null);
     if (updated) {
@@ -169,10 +147,10 @@ const ShopPage: React.FC<ShopPageProps> = ({ user, onPurchase, onRedeemStreakSav
         const nextEnergy = Math.max(0, (updated.energy ?? user.energy) - item.price);
         const nextUser = { ...user, ...updated, energy: nextEnergy, inventory: nextInventory };
         saveUserData({ data: nextUser });
+        onPurchase(item);
       } catch (e) {
         console.warn('Failed to save user after purchase:', e);
       }
-      onPurchase(item);
       window.dispatchEvent(new Event('storage'));
     } else {
       window.showFitBuddyNotification?.({ title: 'Purchase Failed', message: 'Purchase failed.', variant: 'error' });
diff --git a/src/components/SignInPage.css b/src/components/SignInPage.css
index cd7825b3..58bb7477 100644
--- a/src/components/SignInPage.css
+++ b/src/components/SignInPage.css
@@ -6,19 +6,22 @@
   background: transparent;
   position: relative;
   z-index: 1;
+  padding: 20px 14px 18px;
+  box-sizing: border-box;
 }
 
 .signin-form {
   background: var(--background-white);
-  border-radius: 1.5rem;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
-  padding: 2.5rem 2rem;
+  border-radius: 20px;
+  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
+  padding: 1.95rem 1.7rem 1.55rem;
   width: 100%;
-  max-width: 350px;
+  max-width: 460px;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   animation: fadeIn 0.7s;
+  box-sizing: border-box;
 }
 
 .signin-form h1 {
@@ -116,6 +119,7 @@
   font-size: 1rem;
   margin-top: 0.5rem;
   cursor: pointer;
+  line-height: 1.35;
 }
 
 .signup-link span {
@@ -168,3 +172,81 @@
   margin-top: 8px;
   color: var(--color-text, #333);
 }
+
+@media (max-width: 768px) {
+  .signin-page {
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px 8px 6px;
+  }
+
+  .signin-form {
+    max-width: 100%;
+    border-radius: 17px;
+    padding: 0.72rem 0.75rem 0.66rem;
+    gap: 0.48rem;
+  }
+
+  .signin-form h1 {
+    font-size: clamp(1.34rem, 5.8vw, 1.7rem);
+    margin-bottom: -0.05rem;
+    line-height: 1.05;
+  }
+
+  .signin-form label {
+    gap: 0.22rem;
+    font-size: 0.9rem;
+  }
+
+  .signin-form input {
+    min-height: 42px;
+    border-radius: 12px;
+    padding: 0.54rem 0.76rem;
+    font-size: 0.95rem;
+  }
+
+  .signin-form .btn {
+    min-height: 40px;
+    border-radius: 14px;
+    font-size: 0.96rem;
+    letter-spacing: 0.02em;
+  }
+
+  .oauth-divider {
+    margin: -0.1rem 0;
+  }
+
+  .btn-google {
+    min-height: 38px;
+    border-radius: 10px;
+    font-size: 12.5px;
+  }
+
+  .signup-link {
+    margin-top: 0;
+    font-size: 0.82rem;
+  }
+
+  body.signin-page-screen .fitbuddy-footer {
+    display: none !important;
+  }
+}
+
+@media (max-width: 420px) {
+  .signin-page {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .signin-form {
+    padding: 0.68rem 0.66rem 0.62rem;
+  }
+
+  .signin-form h1 {
+    font-size: clamp(1.24rem, 5.5vw, 1.52rem);
+  }
+
+  .signin-form label {
+    font-size: 0.86rem;
+  }
+}
diff --git a/src/components/SignInPage.tsx b/src/components/SignInPage.tsx
index 8e7a79c8..84687c59 100644
--- a/src/components/SignInPage.tsx
+++ b/src/components/SignInPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { saveAssessmentData, saveWorkoutPlan, saveUserData } from '../services/localStorage';
 import { signIn } from '../services/authService';
 import GoogleIdentityButton from './GoogleIdentityButton';
@@ -16,6 +16,13 @@ const SignInPage: React.FC = () => {
   const [resendModalOpen, setResendModalOpen] = useState(false);
   const [resendEmail, setResendEmail] = useState('');
 
+  useEffect(() => {
+    document.body.classList.add('signin-page-screen');
+    return () => {
+      document.body.classList.remove('signin-page-screen');
+    };
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -46,7 +53,6 @@ const SignInPage: React.FC = () => {
           return null;
         };
         await waitForToken(3000);
-        try { sessionStorage.setItem('fitbuddyaiUsername', data.user.username); } catch {}
         // Attempt to restore any server-stored questionnaire/workout/assessment data
         try {
           await restoreUserDataFromServer(data.user.id);
diff --git a/src/components/SignUpPage.tsx b/src/components/SignUpPage.tsx
index fa1d4afb..195e75dd 100644
--- a/src/components/SignUpPage.tsx
+++ b/src/components/SignUpPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './SignUpPage.css';
-import { signUp } from '../services/authService';
+import { getPasswordPolicyError, signUp } from '../services/authService';
 import GoogleIdentityButton from './GoogleIdentityButton';
 
 const SignUpPage: React.FC = () => {
@@ -16,16 +16,23 @@ const SignUpPage: React.FC = () => {
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
+    const useSupabase = Boolean(import.meta.env.VITE_LOCAL_USE_SUPABASE || import.meta.env.VITE_SUPABASE_URL);
     if (password !== confirmPassword) {
       setError('Passwords do not match');
       return;
     }
+    if (useSupabase) {
+      const passwordPolicyError = getPasswordPolicyError(password);
+      if (passwordPolicyError) {
+        setError(passwordPolicyError);
+        return;
+      }
+    }
     setLoading(true);
     try {
       const normalizedEmail = String(email).trim().toLowerCase();
       const dataUser = await signUp(normalizedEmail, username, password);
       if (dataUser && (dataUser as any).id) {
-        try { sessionStorage.setItem('fitbuddyaiUsername', (dataUser as any).username); } catch {}
         // Post-signup redirect to profile; additional restore/backup logic lives elsewhere
         navigate('/profile');
       } else {
diff --git a/src/components/WelcomePage.css b/src/components/WelcomePage.css
index 9868f59f..ecbe1238 100644
--- a/src/components/WelcomePage.css
+++ b/src/components/WelcomePage.css
@@ -4,7 +4,8 @@
   flex-direction: column;
   background: transparent;
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
   z-index: 1;
 }
 
@@ -353,6 +354,45 @@
 
 /* Responsive Design */
 @media (max-width: 768px) {
+  .hero-section .logo.logo-centered {
+    display: inline-flex !important;
+    visibility: visible;
+    opacity: 1;
+    width: 96px;
+    height: 96px;
+    padding: 18px;
+    border-radius: 28px;
+    box-shadow: 0 14px 34px rgba(11, 183, 122, 0.3);
+  }
+
+  .hero-section .logo.logo-centered svg {
+    width: 52px;
+    height: 52px;
+  }
+
+  .hero-section {
+    min-height: max(560px, calc(100svh - 96px));
+    padding: 34px 14px 28px;
+    align-items: flex-start;
+  }
+
+  .hero-content {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+    max-width: 100%;
+    padding: 14px 8px;
+    margin: 0 auto;
+  }
+
+  .hero-content.centered-absolute {
+    position: relative;
+    top: auto;
+    left: auto;
+    transform: none;
+  }
+
   .app-title {
     font-size: 36px;
   }
@@ -390,4 +430,29 @@
   .final-cta-content h3 {
     font-size: 28px;
   }
+
+  .cta-section .btn-large {
+    width: 100%;
+  }
+
+  .features-section,
+  .how-it-works-section,
+  .final-cta-section {
+    padding-left: 14px;
+    padding-right: 14px;
+  }
+}
+
+@media (max-width: 420px) {
+  .hero-section .logo.logo-centered {
+    width: 88px;
+    height: 88px;
+    padding: 16px;
+    border-radius: 24px;
+  }
+
+  .hero-section .logo.logo-centered svg {
+    width: 48px;
+    height: 48px;
+  }
 }
diff --git a/src/components/WelcomePage.tsx b/src/components/WelcomePage.tsx
index 9fcaf6d3..f0673031 100644
--- a/src/components/WelcomePage.tsx
+++ b/src/components/WelcomePage.tsx
@@ -4,8 +4,8 @@ import { Target, Calendar, Zap, Dumbbell } from 'lucide-react';
 import './WelcomePage.css';
 import { loadUserData } from '../services/localStorage';
 // Footer is now rendered site-wide in `App.tsx`
-import IntroBubbles from './IntroBubbles';
 import BackgroundDots from './BackgroundDots';
+import HomeIntroStorm from './HomeIntroStorm';
 
 
 // Only generate random features once per page load
@@ -18,18 +18,22 @@ while (random.length < 3) {
   }
 }
 
-const WelcomePage: React.FC = () => {
+interface WelcomePageProps {
+  homeIntroEnabled: boolean;
+}
+
+const WelcomePage: React.FC<WelcomePageProps> = ({ homeIntroEnabled }) => {
   const location = useLocation();
   const navigate = useNavigate();
   // Parse query param
   const params = new URLSearchParams(location.search);
   const introParam = params.get('intro');
-  const shouldShowIntro = introParam === null || introParam === '1';
+  const shouldShowIntro = homeIntroEnabled && (introParam === null || introParam === '1');
   const [showIntro, setShowIntro] = useState(shouldShowIntro);
   const [mainVisible, setMainVisible] = useState(!shouldShowIntro);
   const [currentUser, setCurrentUser] = useState<any>(() => loadUserData());
   // When intro=0 we still render the main content but avoid entrance animations
-  const shouldAnimateLogo = introParam !== '0';
+  const shouldAnimateLogo = homeIntroEnabled && introParam !== '0';
   const hideIntroTimer = useRef<number | null>(null);
   const failSafeTimer = useRef<number | null>(null);
 
@@ -44,6 +48,19 @@ const WelcomePage: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!homeIntroEnabled && showIntro) {
+      setMainVisible(true);
+      setShowIntro(false);
+      if (hideIntroTimer.current) {
+        clearTimeout(hideIntroTimer.current);
+      }
+      if (failSafeTimer.current) {
+        clearTimeout(failSafeTimer.current);
+      }
+    }
+  }, [homeIntroEnabled, showIntro]);
+
   // Keep user state in sync with storage (cross-tab or sign-in changes)
   useEffect(() => {
     const handleStorage = () => setCurrentUser(loadUserData());
@@ -77,7 +94,7 @@ const WelcomePage: React.FC = () => {
   }, [showIntro]);
   return (
     <div className="welcome-page">
-      {showIntro && <IntroBubbles onFinish={handleIntroFinish} />}
+      {showIntro && <HomeIntroStorm onFinish={handleIntroFinish} />}
       <div className={`welcome-main ${mainVisible ? 'is-visible' : ''}`}>
         {/* Hero Section */}
         <div className="hero-section">
diff --git a/src/components/WorkoutCalendar.css b/src/components/WorkoutCalendar.css
index 5dd0f687..fe7075e6 100644
--- a/src/components/WorkoutCalendar.css
+++ b/src/components/WorkoutCalendar.css
@@ -463,6 +463,17 @@ body:not(.theme-dark) .calendar-nav .nav-button:hover svg {
   letter-spacing: 0.5px;
 }
 
+.day-header-full,
+.day-header-short {
+  display: inline-block;
+  line-height: 1.1;
+  max-width: 100%;
+}
+
+.day-header-short {
+  display: none;
+}
+
 .calendar-day {
   background: white;
   min-height: var(--calendar-day-height);
@@ -1225,6 +1236,7 @@ body.theme-dark .hero-card {
   border: 1px solid rgba(15, 23, 42, 0.12);
   background: rgba(255, 255, 255, 0.92);
   box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
+  -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
 }
 
@@ -2201,3 +2213,206 @@ body.theme-dark .legend-item {
     font-size: 10px;
   }
 }
+
+@media (max-width: 768px) {
+  .calendar-page {
+    padding: 12px 10px 18px;
+  }
+
+  .calendar-container {
+    padding: 0;
+  }
+
+  .calendar-header {
+    margin-bottom: 18px;
+    gap: 14px;
+  }
+
+  .calendar-header .user-info {
+    width: 100%;
+  }
+
+  .user-info h1 {
+    font-size: clamp(1.5rem, 5vw, 2rem);
+    line-height: 1.1;
+  }
+
+  .user-info p {
+    max-width: none;
+    font-size: 0.95rem;
+  }
+
+  .hero-card {
+    padding: 14px 16px;
+  }
+
+  .progress-stats {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    width: 100%;
+  }
+
+  .stat-card {
+    width: 100%;
+    padding: 14px;
+    gap: 10px;
+  }
+
+  .stat-number {
+    font-size: 20px;
+  }
+
+  .progress-circle {
+    width: 56px;
+    height: 56px;
+  }
+
+  .calendar-nav {
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  .month-year {
+    min-width: 0;
+    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
+  }
+
+  .calendar-layout {
+    grid-template-columns: 1fr !important;
+    gap: 14px;
+  }
+
+  .calendar-main,
+  .calendar-legend {
+    width: 100%;
+  }
+
+  .calendar-legend {
+    position: static;
+    top: auto;
+    margin-top: 12px;
+    padding: 18px;
+  }
+
+  .legend-items {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .legend-item {
+    width: 100%;
+    white-space: normal;
+  }
+
+  .calendar-grid {
+    gap: 1px;
+    padding: 12px 10px;
+    border-radius: 24px;
+  }
+
+  .day-header {
+    padding: 8px 4px;
+    min-height: 44px;
+    font-size: 11px;
+    letter-spacing: 0.3px;
+  }
+
+  .calendar-day {
+    min-height: 68px;
+    padding: 6px;
+    border-radius: 16px;
+  }
+
+  .day-number {
+    font-size: 12px;
+    margin-bottom: 4px;
+  }
+
+  .workout-content {
+    min-height: 0;
+    padding: 0;
+  }
+
+  .workout-indicator {
+    padding: 8px 6px;
+    font-size: 10px;
+  }
+
+  .workout-duration {
+    font-size: 10px;
+  }
+
+  .edit-fab {
+    bottom: 14px;
+    right: 14px;
+    width: 48px;
+    height: 48px;
+  }
+
+  .edit-menu {
+    width: 100vw;
+    right: -100vw;
+  }
+
+  .edit-menu.open {
+    right: 0;
+  }
+
+  .edit-menu-header,
+  .edit-menu-content {
+    padding: 18px 16px;
+  }
+
+  .edit-actions,
+  .delete-action-row,
+  .move-group-actions,
+  .date-picker-actions,
+  .batch-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .edit-action-btn,
+  .move-btn,
+  .add-workout-btn,
+  .cancel-btn,
+  .save-btn,
+  .date-picker-actions button,
+  .batch-add-panel .save-btn,
+  .edit-menu .clear-calendar-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .workout-edit-form select,
+  .batch-add-panel textarea,
+  .date-input {
+    width: 100%;
+  }
+
+  .edit-menu-popup-root .workout-popup {
+    position: static;
+    right: auto;
+    top: auto;
+    width: 100%;
+  }
+
+  .calendar-day.drag-over::after,
+  .calendar-day.has-workout.drag-over::after,
+  .calendar-day:not(.has-workout).drag-over::after {
+    max-width: calc(100% - 12px);
+    font-size: 0.62rem;
+    white-space: normal;
+    text-align: center;
+  }
+
+  .day-header-full {
+    display: none;
+  }
+
+  .day-header-short {
+    display: inline-block;
+  }
+}
diff --git a/src/components/WorkoutCalendar.tsx b/src/components/WorkoutCalendar.tsx
index 74784283..c1f299a5 100644
--- a/src/components/WorkoutCalendar.tsx
+++ b/src/components/WorkoutCalendar.tsx
@@ -86,7 +86,6 @@ const WorkoutCalendar: React.FC<WorkoutCalendarProps> = ({ workoutPlan, userData
     if (!dates.length) return;
     setManualRestOverrides(prev => prev.filter(date => !dates.includes(date)));
   };
-  const previewPlanSeededRef = useRef(false);
   const lastPlanIdRef = useRef<string | null>(initialStoredPlanId);
   const guestUserData: UserData = {
     username: 'Guest',
@@ -100,7 +99,17 @@ const WorkoutCalendar: React.FC<WorkoutCalendarProps> = ({ workoutPlan, userData
     daysPerWeek: '3'
   };
   const effectiveUserData: UserData = userData || guestUserData;
-  const isGuestUser = !userData;
+  const emptyCalendarPlan = useMemo<WorkoutPlan>(() => ({
+    id: 'calendar-empty',
+    name: 'Calendar',
+    description: 'Blank calendar view',
+    startDate: format(currentDate, 'yyyy-MM-dd'),
+    endDate: format(addDays(currentDate, 6), 'yyyy-MM-dd'),
+    totalDays: 0,
+    weeklyStructure: [],
+    dailyWorkouts: []
+  }), [currentDate]);
+  const activeWorkoutPlan = workoutPlan || emptyCalendarPlan;
 
   const parseDaysPerWeekValue = (input?: string | number | null): number | null => {
     if (typeof input === 'number' && !Number.isNaN(input)) {
@@ -128,79 +137,13 @@ const WorkoutCalendar: React.FC<WorkoutCalendarProps> = ({ workoutPlan, userData
   const workoutDaysPerWeekGoal = useMemo(() => {
     const fromSurvey = parseDaysPerWeekValue(effectiveUserData.daysPerWeek);
     if (fromSurvey && fromSurvey >= 1 && fromSurvey <= 7) return fromSurvey;
-    const fromPlan = deriveDaysPerWeekFromStructure(workoutPlan?.weeklyStructure || []);
+    const fromPlan = deriveDaysPerWeekFromStructure(activeWorkoutPlan.weeklyStructure || []);
     if (fromPlan && fromPlan >= 1 && fromPlan <= 7) return fromPlan;
     return 3;
-  }, [effectiveUserData.daysPerWeek, workoutPlan?.weeklyStructure]);
+  }, [effectiveUserData.daysPerWeek, activeWorkoutPlan.weeklyStructure]);
 
   const allowedRestDaysPerWeek = Math.max(0, 7 - workoutDaysPerWeekGoal);
 
-  useEffect(() => {
-    if (workoutPlan || previewPlanSeededRef.current) return;
-    // If a saved plan exists (or the user is signed in), do NOT seed the preview
-    try {
-      const storedPlan = loadWorkoutPlan();
-      if (storedPlan && Array.isArray(storedPlan.dailyWorkouts) && storedPlan.dailyWorkouts.length > 0) {
-        onUpdatePlan(storedPlan);
-        return;
-      }
-      const storedUser = loadUserData();
-      if (storedUser?.id) return;
-    } catch (err) {
-      console.warn('Preview seed guard failed to read storage:', err);
-    }
-    const today = new Date();
-    const start = format(today, 'yyyy-MM-dd');
-    const endDateObj = new Date(today.getTime() + 6 * 24 * 60 * 60 * 1000);
-    const end = format(endDateObj, 'yyyy-MM-dd');
-    const previewDays: DayWorkout[] = Array.from({ length: 7 }).map((_, idx) => {
-      const date = new Date(today.getTime() + idx * 24 * 60 * 60 * 1000);
-      const dateStr = format(date, 'yyyy-MM-dd');
-      const type = idx % 3 === 0 ? 'strength' : idx % 3 === 1 ? 'cardio' : 'rest';
-      const isRest = type === 'rest';
-      return {
-        date: dateStr,
-        type: type as DayWorkout['type'],
-        completed: false,
-        totalTime: isRest ? '0 min' : '30 min',
-        workouts: isRest
-          ? [{
-              name: 'Rest Day',
-              description: 'Take a breather before your next session.',
-              difficulty: 'beginner',
-              duration: '0 min',
-              reps: '',
-              muscleGroups: [],
-              equipment: []
-            }]
-          : [{
-              name: idx % 3 === 0 ? 'Bodyweight Circuit' : 'Tempo Walk',
-              description: idx % 3 === 0
-                ? 'Squats, pushups, and lunges to warm up your whole body.'
-                : 'Light cardio to keep you moving.',
-              difficulty: 'beginner',
-              duration: '30 minutes',
-              reps: idx % 3 === 0 ? '3 rounds' : '20 min',
-              muscleGroups: idx % 3 === 0 ? ['full body'] : ['cardio'],
-              equipment: idx % 3 === 0 ? [] : ['sneakers']
-            }],
-        alternativeWorkouts: []
-      };
-    });
-    const previewPlan: WorkoutPlan = {
-      id: 'preview-plan',
-      name: 'Preview Plan',
-      description: 'Preview the schedule builder. Complete the questionnaire to personalize your plan.',
-      startDate: start,
-      endDate: end,
-      totalDays: previewDays.length,
-      weeklyStructure: ['Strength', 'Cardio', 'Rest', 'Strength', 'Cardio', 'Rest', 'Mixed'],
-      dailyWorkouts: previewDays
-    };
-    previewPlanSeededRef.current = true;
-    onUpdatePlan(previewPlan);
-  }, [workoutPlan, onUpdatePlan]);
-
   useEffect(() => {
     if (!workoutPlan || workoutPlan.dailyWorkouts.length === 0) return;
     const planId = workoutPlan.id || 'plan';
@@ -375,7 +318,7 @@ const WorkoutCalendar: React.FC<WorkoutCalendarProps> = ({ workoutPlan, userData
         const pattern = Array.isArray(workoutPlan.weeklyStructure) ? workoutPlan.weeklyStructure : [];
         const totalDays = typeof workoutPlan.totalDays === 'number' && workoutPlan.totalDays > 0
           ? workoutPlan.totalDays
-          : (workoutPlan.dailyWorkouts ? workoutPlan.dailyWorkouts.length : 0);
+          : (workoutPlan?.dailyWorkouts ? workoutPlan.dailyWorkouts.length : 0);
 
         if (workoutPlan.startDate && totalDays > 0 && pattern.length === 7) {
           const startParts = workoutPlan.startDate.split('-').map(Number);
@@ -448,24 +391,6 @@ updatedWorkouts = updatedWorkouts.map(workout => {
 
   const displayName = (userData?.username?.trim()) || effectiveUserData.username || effectiveUserData.name || 'Guest';
 
-  if (!workoutPlan) {
-    return (
-      <div className="calendar-page">
-        <BackgroundDots />
-        <div className="calendar-container">
-          <div className="calendar-preview-callout fade-in-bounce">
-            <div className="calendar-no-plan-icon-bg">
-              <Dumbbell size={48} color="#fff" />
-            </div>
-            <h2 className="calendar-no-plan-message">Building a preview schedule...</h2>
-            <p className="calendar-no-plan-desc">Hang tight — a starter calendar will load so you can explore the schedule builder before filling the questionnaire.</p>
-            <a className="calendar-no-plan-btn" href="/questionnaire">Start questionnaire</a>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   const monthStart = startOfMonth(currentDate);
   const monthEnd = endOfMonth(currentDate);
   const monthDays = eachDayOfInterval({ start: monthStart, end: monthEnd });
@@ -581,7 +506,7 @@ updatedWorkouts = updatedWorkouts.map(workout => {
 
   const getWorkoutForDate = (date: Date): DayWorkout | null => {
   const dateString = formatDate(date.toISOString());
-  const workout = workoutPlan.dailyWorkouts.find(workout => workout.date === dateString) || null;
+  const workout = activeWorkoutPlan.dailyWorkouts.find(workout => workout.date === dateString) || null;
   return workout;
   };  const handleDayClick = (date: Date) => {
      const dateString = format(date, 'yyyy-MM-dd');
@@ -640,7 +565,7 @@ updatedWorkouts = updatedWorkouts.map(workout => {
       window.showFitBuddyNotification?.({ title: 'Only Today', message: "You can only complete or undo today's workout.", variant: 'warning' });
       return;
     }
-    const updatedWorkouts = workoutPlan.dailyWorkouts.map(workout => {
+    const updatedWorkouts = activeWorkoutPlan.dailyWorkouts.map(workout => {
       if (workout.date !== workoutDate) return workout;
 
       const types = resolveWorkoutTypes(workout);
@@ -670,7 +595,7 @@ updatedWorkouts = updatedWorkouts.map(workout => {
       };
     });
 
-    const updatedPlan = { ...workoutPlan, dailyWorkouts: updatedWorkouts };
+    const updatedPlan: WorkoutPlan = { ...activeWorkoutPlan, dailyWorkouts: updatedWorkouts };
     onUpdatePlan(updatedPlan);
     try { console.debug('[WorkoutCalendar] updated plan prepared, invoking onUpdatePlan and updateStreakCounter', { updatedPlanCount: updatedPlan.dailyWorkouts.length }); } catch {}
     // Persist plan immediately to localStorage to ensure JSON reflects the change
@@ -780,8 +705,8 @@ updatedWorkouts = updatedWorkouts.map(workout => {
     return formatSingle(types[0]);
   };
 
-  const completedWorkouts = workoutPlan.dailyWorkouts.filter(w => w.completed && getPrimaryType(w) !== 'rest').length;
-  const totalWorkouts = workoutPlan.dailyWorkouts.filter(w => getPrimaryType(w) !== 'rest').length;
+  const completedWorkouts = activeWorkoutPlan.dailyWorkouts.filter(w => w.completed && getPrimaryType(w) !== 'rest').length;
+  const totalWorkouts = activeWorkoutPlan.dailyWorkouts.filter(w => getPrimaryType(w) !== 'rest').length;
   const progressPercentage = totalWorkouts > 0 ? (completedWorkouts / totalWorkouts) * 100 : 0;
 
   // Calculate total workout time by summing individual workout durations
@@ -2009,14 +1934,6 @@ updatedWorkouts = updatedWorkouts.map(workout => {
     <div className="calendar-page">
       <BackgroundDots />
       <div className="calendar-container">
-        {isGuestUser && (
-          <div className="calendar-preview-banner">
-            <div className="banner-text">
-              <strong>Preview mode:</strong> Explore the scheduler now. Complete the questionnaire to let the AI personalize your plan.
-            </div>
-            <a className="calendar-no-plan-btn" href="/questionnaire">Complete questionnaire</a>
-          </div>
-        )}
         {/* Header */}
           <div className="calendar-header">
             <div className="user-info">
@@ -2125,9 +2042,18 @@ updatedWorkouts = updatedWorkouts.map(workout => {
         {/* Calendar Grid */}
         <div className="calendar-grid">
           {/* Day headers */}
-          {['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].map(day => (
-            <div key={day} className="day-header">
-              {day}
+          {[
+            { full: 'Sunday', short: 'Sun' },
+            { full: 'Monday', short: 'Mon' },
+            { full: 'Tuesday', short: 'Tue' },
+            { full: 'Wednesday', short: 'Wed' },
+            { full: 'Thursday', short: 'Thu' },
+            { full: 'Friday', short: 'Fri' },
+            { full: 'Saturday', short: 'Sat' }
+          ].map(day => (
+            <div key={day.full} className="day-header" aria-label={day.full}>
+              <span className="day-header-full">{day.full}</span>
+              <span className="day-header-short" aria-hidden="true">{day.short}</span>
             </div>
           ))}
           {/* Calendar days (first day is positioned via start-N class, no placeholder cells needed) */}
@@ -2156,7 +2082,7 @@ updatedWorkouts = updatedWorkouts.map(workout => {
             const multiGradient = isMultiType && typeList.length > 1
               ? buildMultiTypeGradient(typeList as WorkoutType[])
               : undefined;
-            const cellStreak = isStreakCompleteDay ? computeStreak(workoutPlan.dailyWorkouts, date) : 0;
+            const cellStreak = isStreakCompleteDay ? computeStreak(activeWorkoutPlan.dailyWorkouts, date) : 0;
             
             const firstStartClass = idx === 0 ? ` start-${monthStartIndex + 1}` : '';
 
@@ -2495,7 +2421,7 @@ updatedWorkouts = updatedWorkouts.map(workout => {
                     Cancel
                   </button>
                 </div>
-                {selectedWorkoutDate && workoutPlan?.dailyWorkouts.find(w => w.date === selectedWorkoutDate) && (
+                {selectedWorkoutDate && activeWorkoutPlan.dailyWorkouts.find(w => w.date === selectedWorkoutDate) && (
                   <div className="error-message">
                     This date already has a workout. Please select a different date.
                   </div>
diff --git a/src/components/WorkoutModal.css b/src/components/WorkoutModal.css
index d2e38080..1aa7481b 100644
--- a/src/components/WorkoutModal.css
+++ b/src/components/WorkoutModal.css
@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 2000;
+  z-index: 4000;
   padding: 20px;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
diff --git a/src/components/WorkoutModal.tsx b/src/components/WorkoutModal.tsx
index 315cd6ee..d298538c 100644
--- a/src/components/WorkoutModal.tsx
+++ b/src/components/WorkoutModal.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { X, Check, RotateCcw, Clock, Zap, Edit3, Trash2, ArrowRight, ArrowLeft, Save, Dumbbell } from 'lucide-react';
 import { DayWorkout, WorkoutType, Exercise } from '../types';
 import './WorkoutModal.css';
@@ -398,7 +399,7 @@ const WorkoutModal: React.FC<WorkoutModalProps> = ({
     });
   }, [primaryType, pickSuggestedExercises, workout]);
 
-  return (
+  const modal = (
     <div className="modal-overlay" onClick={onClose}>
       <div className="workout-modal" onClick={(e) => e.stopPropagation()}>
         {/* Header */}
@@ -692,6 +693,10 @@ const WorkoutModal: React.FC<WorkoutModalProps> = ({
       </div>
     </div>
   );
+
+  if (typeof document === 'undefined') return modal;
+
+  return createPortal(modal, document.body);
 };
 
 export default WorkoutModal;
diff --git a/src/components/WorkoutsPage.css b/src/components/WorkoutsPage.css
index 5740e213..6cd7f71a 100644
--- a/src/components/WorkoutsPage.css
+++ b/src/components/WorkoutsPage.css
@@ -105,6 +105,7 @@
   border: 1px solid var(--border-light); 
   color: var(--text-medium); 
   cursor: pointer; 
+  white-space: nowrap;
 }
 
 .filter-btn.active { 
@@ -1039,6 +1040,134 @@ body.theme-dark .saved-count-pill {
   .modal-body { grid-template-columns: 1fr; }
 }
 
+@media (max-width: 768px) {
+  .workouts-page {
+    padding: 20px 14px;
+    margin-bottom: 24px;
+  }
+
+  .workouts-hero {
+    width: 100%;
+    gap: 14px;
+    margin-bottom: 14px;
+  }
+
+  .workouts-hero h1 {
+    font-size: clamp(2rem, 6vw, 2.4rem);
+    line-height: 1.05;
+  }
+
+  .search-wrap,
+  .search-input {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .hero-sub {
+    max-width: 100%;
+    padding: 8px 0 14px;
+    font-size: 0.95rem;
+    line-height: 1.45;
+  }
+
+  .hero-right {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 12px;
+  }
+
+  .ai-save-row {
+    width: 100%;
+    max-width: 100%;
+    gap: 8px;
+    margin-top: 0;
+  }
+
+  .ai-save-btn {
+    width: 100%;
+    min-height: 52px;
+    font-size: 1.02rem;
+    line-height: 1.2;
+  }
+
+  .saved-count-pill {
+    display: inline-flex;
+    width: fit-content;
+  }
+
+  .filters-row {
+    width: 100%;
+    justify-content: stretch;
+    gap: 10px;
+  }
+
+  .filters {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .filter-btn {
+    width: 100%;
+    min-height: 48px;
+    padding: 10px 12px;
+    font-size: 0.98rem;
+    line-height: 1.1;
+  }
+
+  .sort-control {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 6px;
+    padding: 10px 12px;
+  }
+
+  .sort-control label {
+    font-size: 0.96rem;
+    line-height: 1.2;
+  }
+
+  .sort-control select {
+    width: 100%;
+    min-height: 40px;
+    font-size: 1.05rem;
+  }
+
+  .workouts-grid-footer {
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 8px;
+    padding-bottom: 6px;
+  }
+}
+
+@media (max-width: 420px) {
+  .workouts-page {
+    padding: 18px 10px;
+  }
+
+  .workouts-hero h1 {
+    font-size: clamp(1.8rem, 9.5vw, 2.15rem);
+  }
+
+  .hero-sub {
+    font-size: 0.92rem;
+  }
+
+  .search-input {
+    font-size: 1.06rem;
+    padding: 12px;
+  }
+
+  .filter-btn {
+    font-size: 0.94rem;
+  }
+}
+
 /* Dark-mode tweaks */
 body.theme-dark .workouts-page { color: var(--calendar-text); }
 body.theme-dark .search-input, body.theme-dark .filter-btn { 
diff --git a/src/components/WorkoutsPage.tsx b/src/components/WorkoutsPage.tsx
index a7acdfcb..52afee7d 100644
--- a/src/components/WorkoutsPage.tsx
+++ b/src/components/WorkoutsPage.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import './WorkoutsPage.css';
 import BackgroundDots from './BackgroundDots';
 // savedLibrary types unused here; using saved-names storage for saved list
-import { loadSavedNames, addSavedName, subscribeSavedNames, persistSavedNames, removeSavedName } from '../utils/savedNames';
+import { loadSavedNames, subscribeSavedNames, persistSavedNames } from '../utils/savedNames';
 import { loadAssessmentData } from '../services/localStorage';
 import { Workout, getAllWorkouts, getCategoryOptions, getCategoryBuckets } from '../services/workoutLibrary';
 import { pickWorkoutsFromAssessment } from '../services/assessmentWorkouts';
@@ -26,15 +26,14 @@ const WorkoutsPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
 
   const removeFromPlan = (item: Workout & { title: string }) => {
-    setMySavedNames(prev => {
-      if (!prev.includes(item.title)) {
-        showFitBuddyNotification({ message: 'That workout is not in your saved list.', variant: 'error' });
-        return prev;
-      }
-      const next = removeSavedName(item.title);
-      showFitBuddyNotification({ message: item.title + ' removed from your workouts.' });
-      return next;
-    });
+    if (!mySavedNames.includes(item.title)) {
+      showFitBuddyNotification({ message: 'That workout is not in your saved list.', variant: 'error' });
+      return;
+    }
+    const next = mySavedNames.filter(title => title !== item.title);
+    setMySavedNames(next);
+    persistSavedNames(next);
+    showFitBuddyNotification({ message: item.title + ' removed from your workouts.' });
   };
 
   const filtered = useMemo(() => {
@@ -61,16 +60,16 @@ const WorkoutsPage: React.FC = () => {
   }, []);
 
   const addToPlan = (item: Workout & { title: string }) => {
-    // Add only the workout name to the new saved-names list (no confetti)
-    setMySavedNames(prev => {
-      if (prev.includes(item.title)) {
-        showFitBuddyNotification({ message: 'Already saved to your workouts.' });
-        return prev;
-      }
-      const next = addSavedName(item.title);
-      showFitBuddyNotification({ message: item.title + ' saved to your workouts!' });
-      return next;
-    });
+    const alreadySaved = mySavedNames.includes(item.title);
+    if (alreadySaved) {
+      showFitBuddyNotification({ message: 'Already saved to your workouts.' });
+      return;
+    }
+
+    const next = [...mySavedNames, item.title];
+    setMySavedNames(next);
+    persistSavedNames(next);
+    showFitBuddyNotification({ message: item.title + ' saved to your workouts!' });
   };
 
   
@@ -92,17 +91,15 @@ const WorkoutsPage: React.FC = () => {
         const picks = pickWorkoutsFromAssessment(assessment);
         let added = 0;
         // Persist only names using the new saved-names approach
-        setMySavedNames(prev => {
-          const next = [...prev];
-          picks.forEach(p => {
-            if (!next.includes(p.title)) {
-              next.push(p.title);
-              added += 1;
-            }
-          });
-          try { persistSavedNames(next); } catch (_e) {}
-          return next;
+        const next = [...mySavedNames];
+        picks.forEach(p => {
+          if (!next.includes(p.title)) {
+            next.push(p.title);
+            added += 1;
+          }
         });
+        setMySavedNames(next);
+        try { persistSavedNames(next); } catch (_e) {}
         showFitBuddyNotification(
           added > 0
             ? { message: `Saved ${added} workouts from your assessment.` }
diff --git a/src/index.css b/src/index.css
index 7ee2bf72..974df8f9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,6 +4,13 @@
   box-sizing: border-box;
 }
 
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100%;
+}
+
 :root {
   /* Fitbuddy color palette */
   --primary-green: #58cc02;
@@ -140,6 +147,7 @@ body {
   background-color: var(--background-light);
   color: var(--text-dark);
   line-height: 1.6;
+  overflow-x: hidden;
 }
 
 #root {
@@ -152,11 +160,35 @@ body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  min-width: 0;
 }
 .app-main {
   flex: 1;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  min-width: 0;
+}
+
+img,
+svg,
+video,
+canvas {
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+li,
+button,
+a {
+  overflow-wrap: anywhere;
 }
 
 /* Button styles inspired by Duolingo */
@@ -324,14 +356,27 @@ input, textarea, select {
 
 /* Responsive design */
 @media (max-width: 768px) {
+  .App,
+  .app-main {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .app-main {
+    padding-bottom: calc(104px + env(safe-area-inset-bottom));
+  }
+
   .btn {
-    padding: 14px 20px;
+    width: 100%;
+    max-width: 100%;
+    padding: 12px 18px;
     font-size: 14px;
     min-height: 48px;
+    line-height: 1.2;
   }
   
   .card {
-    padding: 20px;
+    padding: 18px;
     border-radius: 16px;
   }
   
@@ -339,6 +384,10 @@ input, textarea, select {
     padding: 14px 16px;
     font-size: 16px;
   }
+
+  body {
+    font-size: 15px;
+  }
 }
 
 /* Utility classes */
diff --git a/src/server/adminRoutes.js b/src/server/adminRoutes.js
index ad7afafc..60265e9e 100644
--- a/src/server/adminRoutes.js
+++ b/src/server/adminRoutes.js
@@ -29,7 +29,7 @@ function getSupabaseAdmin() {
   }
 }
 
-router.use(express.json());
+router.use(express.json({ limit: '20mb' }));
 
 router.all('/api/admin/users', async (req, res) => {
   if (!requireAdmin(req)) return res.status(403).json({ message: 'Forbidden' });
diff --git a/src/server/authServer.cjs b/src/server/authServer.cjs
index d1e49020..501524ba 100644
--- a/src/server/authServer.cjs
+++ b/src/server/authServer.cjs
@@ -37,7 +37,8 @@ function isUsernameBanned(username) {
 
 const app = express();
 app.use(cors());
-app.use(bodyParser.json());
+// Large AI-generated workout plans can exceed the default JSON body limit.
+app.use(bodyParser.json({ limit: '20mb' }));
 
 // Path to users.json file
 const _usersFile = path.join(__dirname, 'users.json');
diff --git a/src/server/authServer.js b/src/server/authServer.js
index 946be0b1..7b13886a 100644
--- a/src/server/authServer.js
+++ b/src/server/authServer.js
@@ -142,6 +142,24 @@ const userUpdateLimiter = rateLimit({
   message: { error: 'Too many user updates, please try again later.' }
 });
 
+// Rate limiter for rickroll audit logging - protects the file-system write path from abuse
+const rickrollLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 20, // limit each IP to 20 audit writes per windowMs
+  message: { error: 'Too many rickroll events, please try again later.' },
+  standardHeaders: 'draft-7',
+  legacyHeaders: false
+});
+
+// Rate limiter for local AI generation - protects the external AI call and audit logging
+const aiGenerateLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 30, // limit each IP to 30 AI requests per windowMs
+  message: { error: 'Too many AI requests, please try again later.' },
+  standardHeaders: 'draft-7',
+  legacyHeaders: false
+});
+
 // Rate limiter for user purchases - protects /api/user/buy endpoint for shop item purchases and energy transactions
 /**
  * Rate limiter for user purchases and shop transactions.
@@ -189,7 +207,8 @@ const userBuyLimiter = rateLimit({
 
 const app = express();
 app.use(cors());
-app.use(bodyParser.json());
+// Large AI-generated workout plans can exceed the default JSON body limit.
+app.use(bodyParser.json({ limit: '20mb' }));
 // Simple request logger to help debug routing issues in dev
 app.use((req, res, next) => {
   try {
@@ -406,23 +425,83 @@ app.get('/api/user/:id', async (req, res) => {
   }
 });
 
-app.post('/api/user/buy', userBuyLimiter, (req, res) => {
+app.post('/api/user/buy', userBuyLimiter, async (req, res) => {
   try {
-    const { id, item } = req.body;
+    const { id, item } = req.body || {};
     if (!id || !item) return res.status(400).json({ message: 'User ID and item required.' });
-    const users = readUsers();
-    const user = users.find(u => u.id === id);
+    if (!supabase) return res.status(500).json({ message: 'Supabase not configured.' });
+
+    const itemPrice = Number(item.price);
+    if (!Number.isFinite(itemPrice) || itemPrice < 0) {
+      return res.status(400).json({ message: 'Invalid item price.' });
+    }
+
+    const { data: user, error: fetchError } = await supabase
+      .from('fitbuddyai_userdata')
+      .select('*')
+      .eq('user_id', id)
+      .maybeSingle();
+
+    if (fetchError) {
+      console.error('[authServer] /api/user/buy fetch error', fetchError);
+      return res.status(500).json({ message: 'Failed to load user.' });
+    }
     if (!user) return res.status(404).json({ message: 'User not found.' });
-    if (typeof user.energy !== 'number' || user.energy < item.price) {
+
+    const currentEnergy = Number.isFinite(Number(user.energy)) ? Number(user.energy) : 0;
+    if (currentEnergy < itemPrice) {
       return res.status(400).json({ message: 'Not enough energy.' });
     }
-    user.energy -= item.price;
-    if (!Array.isArray(user.inventory)) user.inventory = [];
-    user.inventory.push(item);
-    writeUsers(users);
-    const { password: _password, ...userSafe } = user;
-    res.json({ user: userSafe });
+
+    const nextInventory = Array.isArray(user.inventory) ? [...user.inventory] : [];
+    const itemId = String(item.id || '');
+    const purchasedItem = {
+      ...item,
+      price: itemPrice,
+      purchased_at: new Date().toISOString()
+    };
+
+    if (itemId.startsWith('streak-saver')) {
+      const quantity = Number(item.quantity ?? item.count ?? 1);
+      const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : 1;
+      const existingIndex = nextInventory.findIndex((entry) => String(entry?.id || '').startsWith('streak-saver'));
+      if (existingIndex >= 0) {
+        const existing = nextInventory[existingIndex];
+        const existingQty = Number(existing?.quantity ?? existing?.count ?? 1);
+        nextInventory[existingIndex] = {
+          ...existing,
+          ...purchasedItem,
+          quantity: (Number.isFinite(existingQty) ? existingQty : 1) + normalizedQuantity
+        };
+      } else {
+        nextInventory.push({ ...purchasedItem, quantity: normalizedQuantity });
+      }
+    } else {
+      nextInventory.push(purchasedItem);
+    }
+
+    const updates = {
+      energy: currentEnergy - itemPrice,
+      inventory: nextInventory,
+      updated_at: new Date().toISOString()
+    };
+
+    const { data: updatedUser, error: updateError } = await supabase
+      .from('fitbuddyai_userdata')
+      .update(updates)
+      .eq('user_id', id)
+      .select('*')
+      .maybeSingle();
+
+    if (updateError) {
+      console.error('[authServer] /api/user/buy update error', updateError);
+      return res.status(500).json({ message: 'Failed to save purchase.' });
+    }
+
+    const { password: _password, ...userSafe } = updatedUser || { ...user, ...updates };
+    return res.json({ user: userSafe });
   } catch (err) {
+    console.error('[authServer] /api/user/buy unexpected', err);
     res.status(500).json({ message: 'Server error.' });
   }
 });
@@ -449,7 +528,17 @@ app.post('/api/user/update', userUpdateLimiter, async (req, res) => {
         console.error('[authServer] update error', error);
         return res.status(500).json({ message: 'Failed to update user.' });
       }
-      if (!data) return res.status(404).json({ message: 'User not found.' });
+      if (!data) {
+        const seedRow = { user_id: id, ...updates };
+        const { data: upserted, error: upsertError } = await supabase.from('fitbuddyai_userdata').upsert(seedRow, { onConflict: 'user_id', returning: 'representation' }).select().limit(1).maybeSingle();
+        if (upsertError) {
+          console.error('[authServer] update fallback upsert error', upsertError);
+          return res.status(500).json({ message: 'Failed to update user.' });
+        }
+        if (!upserted) return res.status(404).json({ message: 'User not found.' });
+        const { password: _password, ...safeUpserted } = upserted || {};
+        return res.json({ user: safeUpserted });
+      }
 
       const { password: _password, ...safe } = data || {};
 
@@ -631,7 +720,7 @@ app.post('/api/dev/apply-action', (req, res) => {
 });
 
 // Track rickroll events: client posts when a user is redirected to the rickroll.
-app.post('/api/rickroll', async (req, res) => {
+app.post('/api/rickroll', rickrollLimiter, async (req, res) => {
   try {
     const auth = String(req.headers.authorization || '');
     const token = auth.startsWith('Bearer ') ? auth.slice(7) : null;
@@ -681,7 +770,7 @@ app.post('/api/rickroll', async (req, res) => {
 });
 
 // Local AI generation endpoint for dev server
-app.post('/api/ai/generate', async (req, res) => {
+app.post('/api/ai/generate', aiGenerateLimiter, async (req, res) => {
   try {
     // Be forgiving about incoming body shapes (prompt, contents, inputs, messages)
     let body = req.body || {};
@@ -741,7 +830,7 @@ app.post('/api/ai/generate', async (req, res) => {
     // Accept multiple env var names so deployments that used VITE_/NEXT_PUBLIC_ still work
     const GEMINI_API_KEY = process.env.GEMINI_API_KEY || process.env.VITE_GEMINI_API_KEY || process.env.NEXT_PUBLIC_GEMINI_API_KEY;
     const GEMINI_URL = GEMINI_API_KEY
-      ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`
+      ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${GEMINI_API_KEY}`
       : null;
 
     let generatedText = '';
@@ -749,66 +838,37 @@ app.post('/api/ai/generate', async (req, res) => {
       const allowMock = process.env.LOCAL_AI_MOCK === '1' || process.env.NODE_ENV !== 'production';
       if (!allowMock) return res.status(500).json({ message: 'AI provider not configured', diagnostic: { env_GEMINI_API_KEY_present: false } });
       console.warn('[authServer] GEMINI_API_KEY missing — returning local mock response (development)');
-      const today = new Date().toISOString().split('T')[0];
-      const _mockPlan = {
-        id: `mock-${Date.now()}`,
-        name: 'Local Mock Plan',
-        startDate: today,
-        endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
-        totalDays: 7,
-        totalTime: '30 minutes',
-        weeklyStructure: ['Monday','Wednesday','Friday'],
-        dailyWorkouts: [
-          {
-            date: today,
-            type: 'strength',
-            completed: false,
-            totalTime: '30 minutes',
-            workouts: [
-              { name: 'Bodyweight Squats', difficulty: 'beginner', duration: '10 minutes', reps: 12, muscleGroups: ['legs'], equipment: [], description: 'Simple squats.' }
-            ],
-            alternativeWorkouts: []
-          }
-        ]
-      };
-      // For local dev, return a human-facing message indicating the
-      // feature is under development rather than a fabricated JSON plan.
-      generatedText = 'Sorry, this feature is currently under development.';
+      const lowerPrompt = String(prompt || '').toLowerCase();
+      if (lowerPrompt.includes('workout') || lowerPrompt.includes('plan') || lowerPrompt.includes('exercise')) {
+        generatedText = 'I can help you refine your workout plan in local demo mode. Connect GEMINI_API_KEY for full AI responses, or try asking for a warmup, a beginner-friendly routine, or a recovery suggestion.';
+      } else {
+        generatedText = 'I am running in local demo mode right now. Connect GEMINI_API_KEY for full AI responses, or ask me for workout ideas, recovery tips, or goal-based coaching.';
+      }
     } else {
       const response = await fetch(GEMINI_URL, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })
       });
-      const data = await response.json();
-      generatedText = data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
-    }
-
-    // If the AI returned an empty string unexpectedly, return a small
-    // deterministic fallback so clients (chat/planner) have valid JSON
-    // to parse and we fail more loudly in dev rather than returning silently
-    // empty text which is confusing in the UI.
-    try {
-      if (!generatedText || String(generatedText).trim().length === 0) {
-        console.warn('[authServer] generatedText empty — returning deterministic fallback plan');
-        const today2 = new Date().toISOString().split('T')[0];
-        const _fallbackPlan = {
-          id: `fallback-${Date.now()}`,
-          name: 'Fallback Plan (empty AI response)',
-          description: 'Returned because the AI returned an empty result. Configure GEMINI_API_KEY or inspect server logs.',
-          startDate: today2,
-          endDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
-          totalDays: 1,
-          totalTime: '0 minutes',
-          weeklyStructure: [],
-          dailyWorkouts: [
-            { date: today2, type: 'rest', completed: false, totalTime: '0 minutes', workouts: [], alternativeWorkouts: [] }
-          ]
-        };
-                generatedText = 'Sorry, this feature is currently under development.';
+      const responseText = await response.text();
+      let data = null;
+      try {
+        data = responseText ? JSON.parse(responseText) : null;
+      } catch (_e) {
+        data = null;
+      }
+      if (!response.ok) {
+        const message = data?.error?.message || data?.message || `Gemini request failed with status ${response.status}`;
+        console.warn('[authServer] Gemini request failed', { status: response.status, message, body: responseText.slice(0, 500) });
+        generatedText = `AI Coach could not reach Gemini: ${message}`;
+      } else {
+        generatedText = data?.candidates?.[0]?.content?.parts?.[0]?.text || '';
+        if (!generatedText || String(generatedText).trim().length === 0) {
+          const message = data?.promptFeedback?.blockReason ? `Blocked by Gemini safety filters (${data.promptFeedback.blockReason})` : 'Gemini returned an empty response';
+          console.warn('[authServer] Gemini response empty', { body: responseText.slice(0, 500) });
+          generatedText = `AI Coach could not produce a reply right now: ${message}`;
+        }
       }
-    } catch (e) {
-      console.warn('[authServer] fallback generation failed', e);
     }
 
     // Audit-log if supabase is configured
diff --git a/src/services/aiService.ts b/src/services/aiService.ts
index e2bce2b4..716b08c7 100644
--- a/src/services/aiService.ts
+++ b/src/services/aiService.ts
@@ -20,7 +20,7 @@ const GEMINI_API_KEY =
 // If an API key is not available in the environment, route requests to the
 // local server endpoint which should handle calling the Gemini API.
 const GEMINI_URL = GEMINI_API_KEY
-  ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${encodeURIComponent(GEMINI_API_KEY)}`
+  ? `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite:generateContent?key=${encodeURIComponent(GEMINI_API_KEY)}`
   : '/api/ai/generate';
   
 // Helper: extract a JSON block from AI text. Handles fenced ```json``` blocks,
@@ -749,16 +749,19 @@ export async function getAIResponse(payload: any): Promise<any> {
  * should continue to use getAIResponse for structured JSON responses.
  */
 export async function getAITextResponse(payload: { prompt: string; workoutPlan?: any; localStorageContext?: { questionnaire?: any; userData?: any; workoutPlan?: any } }): Promise<{ text: string; raw: string }> {
-  // Append truncated localStorage context (if provided) so the chat AI has accurate context.
+  // Append localStorage context (with generous caps) so the chat AI has full user context.
+  const MAX_QUESTIONNAIRE_CONTEXT_CHARS = 12000;
+  const MAX_USER_CONTEXT_CHARS = 12000;
+  const MAX_WORKOUT_PLAN_CONTEXT_CHARS = 20000;
   const parts: string[] = [payload.prompt];
   const ctx = payload.localStorageContext;
   if (ctx) {
-    if (ctx.questionnaire) parts.push(`\n\nLocal: fitbuddyai_questionnaire_progress: ${JSON.stringify(ctx.questionnaire).slice(0,1200)}`);
-    if (ctx.userData) parts.push(`\n\nLocal: fitbuddyai_user_data: ${JSON.stringify(ctx.userData).slice(0,1200)}`);
-    if (ctx.workoutPlan) parts.push(`\n\nLocal: fitbuddyai_workout_plan: ${JSON.stringify(ctx.workoutPlan).slice(0,2000)}`);
+    if (ctx.questionnaire) parts.push(`\n\nLocal: fitbuddyai_questionnaire_progress: ${JSON.stringify(ctx.questionnaire).slice(0, MAX_QUESTIONNAIRE_CONTEXT_CHARS)}`);
+    if (ctx.userData) parts.push(`\n\nLocal: fitbuddyai_user_data: ${JSON.stringify(ctx.userData).slice(0, MAX_USER_CONTEXT_CHARS)}`);
+    if (ctx.workoutPlan) parts.push(`\n\nLocal: fitbuddyai_workout_plan: ${JSON.stringify(ctx.workoutPlan).slice(0, MAX_WORKOUT_PLAN_CONTEXT_CHARS)}`);
   } else if (payload.workoutPlan) {
     // Backwards-compatible: support single workoutPlan param
-    parts.push(`\n\nUser workoutPlan (truncated): ${JSON.stringify(payload.workoutPlan).slice(0,2000)}`);
+    parts.push(`\n\nUser workoutPlan: ${JSON.stringify(payload.workoutPlan).slice(0, MAX_WORKOUT_PLAN_CONTEXT_CHARS)}`);
   }
   const promptWithContext = parts.join('\n');
   console.log('Requesting AI text response with prompt (trim):', promptWithContext.slice(0, 300));
@@ -814,11 +817,14 @@ export async function getAITextResponse(payload: { prompt: string; workoutPlan?:
   const emptyServerHint = 'AI returned an empty response from the server. Check the backend logs or set GEMINI_API_KEY / enable LOCAL_AI_MOCK for local dev.';
   let finalText = cleaned && cleaned.length > 0 ? cleaned : (rawText && rawText.length > 0 ? rawText : (data && (data.message || data.error) ? String(data.message || data.error) : emptyServerHint));
   // If the server returned a JSON-shaped workout plan (legacy fallback),
-  // prefer the simple developer-facing sentence so the chat shows a clear status.
+  // prefer a short non-JSON assistant message so the chat stays usable.
   try {
     const looksLikePlan = String(finalText || '').trim().startsWith('{') && /"dailyWorkouts"|"workoutPlan"/.test(String(finalText));
     if (looksLikePlan) {
-      finalText = 'Sorry, this feature is currently under development.';
+      finalText = 'AI Coach returned a structured workout payload instead of a chat reply. Try again, or configure GEMINI_API_KEY for full production responses.';
+    }
+    if (/currently under development/i.test(String(finalText))) {
+      finalText = 'AI Coach is running in demo mode right now. Configure GEMINI_API_KEY for full production responses, or ask for workout ideas, recovery tips, or a beginner-friendly routine.';
     }
   } catch (e) { /* ignore */ }
   return { text: finalText || defaultFallback, raw: rawText || defaultFallback };
diff --git a/src/services/authService.ts b/src/services/authService.ts
index 1877a948..37eaa5a8 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -1,10 +1,21 @@
 // Buy a shop item and update user on server and localStorage
 import attachAuthHeaders from './apiAuth';
 import { supabase } from './supabaseClient';
-import { saveUserData, saveAuthToken, clearAuthToken, loadUserData, saveSupabaseSession, clearSupabaseSession } from './localStorage';
+import { saveUserData, saveAuthToken, clearAuthToken, loadUserData, clearUserData } from './localStorage';
 import { ensureUserId } from '../utils/userHelpers';
 
 const DEFAULT_ENERGY = 10000;
+const PASSWORD_SPECIAL_CHARACTERS = "!@#$%^&*()_+-=[]{};':\"|<>?,./`~";
+const PASSWORD_POLICY_ERROR = 'Password should contain at least one character of each: abcdefghijklmnopqrstuvwxyz, ABCDEFGHIJKLMNOPQRSTUVWXYZ, 0123456789, !@#$%^&*()_+-=[]{};\':"|<>?,./`~.';
+
+export function getPasswordPolicyError(password: string): string | null {
+  const value = String(password || '');
+  if (!/[a-z]/.test(value)) return PASSWORD_POLICY_ERROR;
+  if (!/[A-Z]/.test(value)) return PASSWORD_POLICY_ERROR;
+  if (!/[0-9]/.test(value)) return PASSWORD_POLICY_ERROR;
+  if (!Array.from(value).some((char) => PASSWORD_SPECIAL_CHARACTERS.includes(char))) return PASSWORD_POLICY_ERROR;
+  return null;
+}
 
 export async function buyShopItem(id: string, item: any): Promise<User | null> {
   try {
@@ -14,6 +25,7 @@ export async function buyShopItem(id: string, item: any): Promise<User | null> {
       name: item.name,
       price: item.price,
       type: item.type,
+      quantity: item.quantity ?? null,
       image: item.image || null,
       description: item.description || ''
     };
@@ -23,7 +35,7 @@ export async function buyShopItem(id: string, item: any): Promise<User | null> {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id, item: safeItem })
     });
-    const res = await fetch('/api/user?action=buy', reqInit);
+    const res = await fetch('/api/user/buy', reqInit);
     if (!res.ok) {
       // Attempt to read structured error code from server
       try {
@@ -47,6 +59,15 @@ export async function buyShopItem(id: string, item: any): Promise<User | null> {
 // Fetch user from server by ID and update localStorage
 export async function fetchUserById(id: string): Promise<User | null> {
   try {
+    const res = await fetch(`/api/user/${id}`);
+    if (res.ok) {
+      const data = await res.json();
+      if (data.user) {
+        const normalized = ensureUserId(data.user);
+        try { saveUserData({ data: normalized }); } catch {}
+        return normalized as User;
+      }
+    }
     const useSupabase = Boolean(import.meta.env.VITE_LOCAL_USE_SUPABASE || import.meta.env.VITE_SUPABASE_URL);
     if (useSupabase) {
       try {
@@ -59,15 +80,6 @@ export async function fetchUserById(id: string): Promise<User | null> {
         return null;
       }
     }
-    const res = await fetch(`/api/user/${id}`);
-    if (!res.ok) return null;
-    const data = await res.json();
-    if (data.user) {
-      const nextEnergy = data.user.energy ?? DEFAULT_ENERGY;
-      const next = { ...data.user, energy: nextEnergy };
-      try { saveUserData({ data: next }); } catch {}
-      return next;
-    }
     return null;
   } catch {
     return null;
@@ -110,18 +122,28 @@ export async function signIn(email: string, password: string): Promise<User> {
     const user = result.data.user as any;
     // Determine username: prefer user_metadata.username, else fallback to email temporarily
     let usernameVal = (user.user_metadata && user.user_metadata.username) || null;
-    if (!usernameVal) {
-      // try to read from app_users table if present
+    let avatarVal = (user.user_metadata && (user.user_metadata.avatar || user.user_metadata.avatar_url)) || null;
+    let energyVal = (user.user_metadata && user.user_metadata.energy) ?? DEFAULT_ENERGY;
     try {
-        const { data: profile } = await supabase.from('fitbuddyai_userdata').select('username').eq('user_id', user.id).limit(1).maybeSingle();
-        if (profile && profile.username) usernameVal = profile.username;
-      } catch (e) {
-        // ignore; we'll fallback to email
-      }
+      // Rehydrate the persisted profile row so avatar/energy survive logout and login.
+      const profile = await fetchUserById(user.id);
+      if (profile && profile.username) usernameVal = profile.username;
+      if (profile && (profile.avatar || (profile as any).avatar_url)) avatarVal = profile.avatar || (profile as any).avatar_url;
+      if (profile && typeof profile.energy === 'number') energyVal = profile.energy;
+    } catch (e) {
+      // ignore; we'll fallback to auth metadata
+    }
+    try {
+      await fetch('/api/auth?action=store_refresh', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ userId: user.id, refresh_token: session?.refresh_token })
+      });
+    } catch (e) {
+      console.warn('[authService] failed to store refresh token server-side', e);
     }
-    try { saveSupabaseSession(session); } catch {}
-  const fallbackEnergy = (user.user_metadata && user.user_metadata.energy) ?? DEFAULT_ENERGY;
-  const toSave = { data: { id: user.id, email: user.email, username: usernameVal || user.email, energy: fallbackEnergy } };
+    const toSave = { data: { id: user.id, email: user.email, username: usernameVal || user.email, avatar: avatarVal || '/images/fitbuddy_head.png', energy: energyVal } };
   // Clear any cross-tab 'no auto restore' guard set during sign-out so sign-in can persist data
   try { sessionStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
   try { localStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
@@ -134,7 +156,7 @@ export async function signIn(email: string, password: string): Promise<User> {
       if (displayName) {
         // Update the authenticated user's metadata with display name and username
         // supabase.auth.updateUser sets user metadata for the current session
-        await supabase.auth.updateUser({ data: { display_name: displayName, username: displayName } });
+        await supabase.auth.updateUser({ data: { display_name: displayName, username: displayName, avatar: toSave.data.avatar } });
       }
     } catch (e: any) {
       // Non-fatal: just log and continue
@@ -167,6 +189,10 @@ export async function signUp(email: string, username: string, password: string):
   const normalizedEmail = String(email).trim().toLowerCase();
   const useSupabase = Boolean(import.meta.env.VITE_LOCAL_USE_SUPABASE || import.meta.env.VITE_SUPABASE_URL);
   if (useSupabase) {
+    const passwordPolicyError = getPasswordPolicyError(password);
+    if (passwordPolicyError) {
+      throw new Error(passwordPolicyError);
+    }
     const result = await supabase.auth.signUp({ email: normalizedEmail, password, options: { data: { username, energy: DEFAULT_ENERGY } } });
     if (result.error) throw new Error(result.error.message || 'Sign up failed');
     // Supabase may not return a session depending on config; if a session exists save token
@@ -177,7 +203,18 @@ export async function signUp(email: string, username: string, password: string):
   // Only persist client-side if we actually received a session/token. For email-verify flows
   // Supabase may require the user to confirm via email before signing in; do not mark them
   // as signed-in (or persist their profile) until a token exists.
-    try { saveSupabaseSession(session); } catch {}
+    try {
+      if (user && session?.refresh_token) {
+        await fetch('/api/auth?action=store_refresh', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({ userId: user.id, refresh_token: session.refresh_token })
+        });
+      }
+    } catch (e) {
+      console.warn('[authService] failed to store refresh token server-side', e);
+    }
   if (token && toSave) {
     try { sessionStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
     try { localStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
@@ -186,11 +223,15 @@ export async function signUp(email: string, username: string, password: string):
     // Ensure server-side app_users and user_data rows exist for this new Supabase user (best-effort).
     try {
       if (user && user.id) {
-        await fetch('/api/auth?action=create_profile', {
+        await fetch('/api/auth?action=create_profile', await attachAuthHeaders({
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ id: user.id, email: user.email, username })
-        });
+          body: JSON.stringify({
+            id: user.id,
+            email: user.email,
+            username
+          })
+        }));
       }
     } catch (e) {
       console.warn('[authService] create_profile call failed', e);
@@ -288,17 +329,47 @@ export function getCurrentUser(): User | null {
   }
 }
 
-export function signOut() {
+export async function signOutAndRevoke(timeoutMs = 2000): Promise<void> {
+  try {
+    const revokeUrl = '/api/auth?action=clear_refresh';
+    let revoked = false;
+    try {
+      if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
+        const blob = new Blob([JSON.stringify({})], { type: 'application/json' });
+        try { revoked = navigator.sendBeacon(revokeUrl, blob); } catch { revoked = false; }
+      }
+    } catch {
+      revoked = false;
+    }
+
+    if (!revoked) {
+      try {
+        await Promise.race([
+          fetch(revokeUrl, { method: 'POST', credentials: 'include' }),
+          new Promise((_, reject) => setTimeout(() => reject(new Error('revoke_timeout')), timeoutMs))
+        ]);
+      } catch (e) {
+        console.warn('[authService] signOut: clear_refresh request failed or timed out', e);
+      }
+    }
+  } catch (e) {
+    console.warn('[authService] signOut: revoke attempt failed', e);
+  }
+
   try { clearAuthToken(); } catch {}
-  try { clearSupabaseSession(); } catch {}
   try { sessionStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
   try { localStorage.removeItem('fitbuddyai_no_auto_restore'); } catch {}
-  try { const { clearUserData } = require('./localStorage'); clearUserData(); } catch {}
+  try { clearUserData(); } catch {}
   try { sessionStorage.removeItem('fitbuddyaiUsername'); } catch {}
-  // If using Supabase client, call signOut to clear its internal session
   try {
     if (supabase && typeof supabase.auth?.signOut === 'function') {
-      supabase.auth.signOut().catch(() => {});
+      await supabase.auth.signOut().catch(() => {});
     }
-  } catch (_e) {}
+  } catch {
+    // ignore
+  }
+}
+
+export function signOut(): void {
+  void signOutAndRevoke().catch((e) => console.warn('[authService] signOut error', e));
 }
diff --git a/src/services/cloudBackupService.ts b/src/services/cloudBackupService.ts
index 9539cbe0..02d4f3a6 100644
--- a/src/services/cloudBackupService.ts
+++ b/src/services/cloudBackupService.ts
@@ -7,7 +7,6 @@ export async function backupUserDataToServer(userId: string) {
   const fitbuddyai_workout_plan = localStorage.getItem('fitbuddyai_workout_plan');
   const fitbuddyai_assessment_data = localStorage.getItem('fitbuddyai_assessment_data');
   const fitbuddyai_chat = sessionStorage.getItem(`fitbuddyai_chat_${userId}`) || localStorage.getItem(`fitbuddyai_chat_${userId}`);
-  const fitbuddyai_user_data = sessionStorage.getItem('fitbuddyai_user_data') || localStorage.getItem('fitbuddyai_user_data');
   if (!userId) return;
   try {
     // Only include keys that actually exist to avoid overwriting server data with nulls
@@ -17,7 +16,6 @@ export async function backupUserDataToServer(userId: string) {
   if (fitbuddyai_assessment_data != null) payload.fitbuddyai_assessment_data = fitbuddyai_assessment_data;
   // include chat history and user data if present so server can persist chat_history into payload
   if (fitbuddyai_chat != null) payload.chat_history = fitbuddyai_chat;
-  if (fitbuddyai_user_data != null) payload.fitbuddyai_user_data = fitbuddyai_user_data;
 
     // Attach local fitbuddyai_user_data so server can cross-check client identity when needed
     try {
diff --git a/src/services/localStorage.ts b/src/services/localStorage.ts
index 8102b236..0f52b1cf 100644
--- a/src/services/localStorage.ts
+++ b/src/services/localStorage.ts
@@ -16,11 +16,11 @@ const STORAGE_KEYS = {
   USER_DATA_PERSISTED: 'fitbuddyai_user_data_persisted',
   ASSESSMENT_DATA: 'fitbuddyai_assessment_data',
   WORKOUT_PLAN: 'fitbuddyai_workout_plan',
+  HOME_INTRO_ENABLED: 'fitbuddyai_home_intro_enabled',
   SUPABASE_SESSION: 'fitbuddyai_supabase_session'
 };
 const AUTH_KEYS = {
   TOKEN: 'fitbuddyai_token',
-  TOKEN_PERSISTED: 'fitbuddyai_token_persisted'
 };
 // Auto-backup: import cloud backup helper and provide a debounced scheduler
 import { backupUserDataToServer } from './cloudBackupService';
@@ -241,7 +241,6 @@ export const clearUserData = (): void => {
     try { sessionStorage.removeItem(STORAGE_KEYS.USER_DATA); } catch {}
     try { localStorage.removeItem(STORAGE_KEYS.USER_DATA_PERSISTED); } catch {}
     try { sessionStorage.removeItem(AUTH_KEYS.TOKEN); } catch {}
-    try { localStorage.removeItem(AUTH_KEYS.TOKEN_PERSISTED); } catch {}
     // No user -> nothing to back up, but clear any pending timer
     if (backupTimeout) {
       clearTimeout(backupTimeout);
@@ -254,13 +253,30 @@ export const clearUserData = (): void => {
   }
 };
 
+export const loadHomeIntroEnabled = (): boolean => {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEYS.HOME_INTRO_ENABLED);
+    if (saved === null) return false;
+    return saved !== '0';
+  } catch (_error) {
+    return false;
+  }
+};
+
+export const saveHomeIntroEnabled = (enabled: boolean): void => {
+  try {
+    localStorage.setItem(STORAGE_KEYS.HOME_INTRO_ENABLED, enabled ? '1' : '0');
+    window.dispatchEvent(new CustomEvent('fitbuddyai-home-intro-changed', { detail: { enabled } }));
+  } catch (_error) {
+    console.warn('Failed to save home intro preference');
+  }
+};
+
 // Auth token helpers (sessionStorage first, with a time-limited persisted fallback)
 export const saveAuthToken = (token: string | null) => {
   try {
     if (!token) return;
     sessionStorage.setItem(AUTH_KEYS.TOKEN, String(token));
-    // Persist token with timestamp for reload recovery (expire alongside user profile)
-    localStorage.setItem(AUTH_KEYS.TOKEN_PERSISTED, JSON.stringify({ token, timestamp: Date.now() }));
   } catch (e) {
     // ignore
   }
@@ -270,17 +286,6 @@ export const getAuthToken = (): string | null => {
   try {
     const t = sessionStorage.getItem(AUTH_KEYS.TOKEN);
     if (t) return t;
-    // Fallback to persisted token if still fresh (<= 7 days)
-    const persisted = localStorage.getItem(AUTH_KEYS.TOKEN_PERSISTED);
-    if (persisted) {
-      const parsed = safeParseStored<{ token: string; timestamp: number }>(persisted);
-      if (parsed?.token && parsed.timestamp && (Date.now() - parsed.timestamp) <= 7 * 24 * 60 * 60 * 1000) {
-        try { sessionStorage.setItem(AUTH_KEYS.TOKEN, parsed.token); } catch {}
-        return parsed.token;
-      }
-      // expired persisted token should be cleared
-      try { localStorage.removeItem(AUTH_KEYS.TOKEN_PERSISTED); } catch {}
-    }
     return null;
   } catch (e) {
     return null;
@@ -298,8 +303,6 @@ export const saveSupabaseSession = (session: any | null) => {
       return;
     }
     const payload: any = {
-      access_token: session.access_token,
-      refresh_token: session.refresh_token,
       expires_at: session.expires_at ?? (session.expires_in ? Math.round(Date.now() / 1000) + Number(session.expires_in || 0) : undefined)
     };
     localStorage.setItem(STORAGE_KEYS.SUPABASE_SESSION, JSON.stringify(payload));
@@ -308,7 +311,7 @@ export const saveSupabaseSession = (session: any | null) => {
   }
 };
 
-export const loadSupabaseSession = (): { access_token?: string; refresh_token?: string; expires_at?: number } | null => {
+export const loadSupabaseSession = (): { expires_at?: number } | null => {
   try {
     const raw = localStorage.getItem(STORAGE_KEYS.SUPABASE_SESSION);
     if (!raw) return null;

From 2a5975df7af9507530ec8853db7354f991f53b0b Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Tue, 28 Apr 2026 12:13:16 -0400
Subject: [PATCH 2/8] Fix intro component build imports

---
 src/components/HomeIntroStorm.tsx | 2 +-
 src/components/NewIntroPage.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HomeIntroStorm.tsx b/src/components/HomeIntroStorm.tsx
index 82ae95ea..05f7ebab 100644
--- a/src/components/HomeIntroStorm.tsx
+++ b/src/components/HomeIntroStorm.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Brain, ChevronRight, Dumbbell, Flame, ShieldCheck, Sparkles, Target, TrendingUp, Zap } from 'lucide-react';
+import { Brain, ChevronRight, Dumbbell, ShieldCheck, Sparkles, Target, TrendingUp } from 'lucide-react';
 import './HomeIntroStorm.css';
 
 const particleVariants = Array.from({ length: 24 }, (_, index) => index);
diff --git a/src/components/NewIntroPage.tsx b/src/components/NewIntroPage.tsx
index 125250f4..8c656e14 100644
--- a/src/components/NewIntroPage.tsx
+++ b/src/components/NewIntroPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { ArrowRight, Brain, CalendarDays, ChevronRight, Dumbbell, Flame, Layers3, ShieldCheck, Sparkles, Target, TrendingUp } from 'lucide-react';
+import { ArrowRight, Brain, CalendarDays, ChevronRight, Dumbbell, Layers3, ShieldCheck, Sparkles, Target } from 'lucide-react';
 import './NewIntroPage.css';
 import { loadUserData } from '../services/localStorage';
 

From f911b8acd6cbd76fcd3631fce38a70fe79cab8cd Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Tue, 28 Apr 2026 15:02:32 -0400
Subject: [PATCH 3/8] refactor: streamline user purchase flow and enhance token
 validation

---
 .vscode/mcp.json                            |  8 --
 .vscode/settings.json                       |  8 --
 api/auth/index.ts                           | 25 +++++-
 sql/migrations/003_atomic_shop_purchase.sql | 77 +++++++++++++++++++
 src/App.tsx                                 | 46 +----------
 src/components/GeminiChatPage.tsx           | 31 +++++---
 src/components/ShopPage.tsx                 |  4 +-
 src/components/WorkoutsPage.tsx             | 65 ++++++++--------
 src/server/adminRoutes.js                   |  2 +-
 src/server/authServer.cjs                   |  4 +-
 src/server/authServer.js                    | 85 ++++++---------------
 src/services/authService.ts                 |  2 +-
 src/services/cloudBackupService.ts          |  2 +-
 13 files changed, 184 insertions(+), 175 deletions(-)
 delete mode 100644 .vscode/mcp.json
 delete mode 100644 .vscode/settings.json
 create mode 100644 sql/migrations/003_atomic_shop_purchase.sql

diff --git a/.vscode/mcp.json b/.vscode/mcp.json
deleted file mode 100644
index 1623e350..00000000
--- a/.vscode/mcp.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "servers": {
-    "supabase": {
-      "type": "http",
-      "url": "https://mcp.supabase.com/mcp?project_ref=hkvkomtaffybchjdjfws"
-    }
-  }
-}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6e96da65..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "chat.tools.terminal.autoApprove": {
-        "git fetch": true,
-        "220..420": true,
-        "260..520": true,
-        "git remote": true
-    }
-}
\ No newline at end of file
diff --git a/api/auth/index.ts b/api/auth/index.ts
index e3edd2db..8125d110 100644
--- a/api/auth/index.ts
+++ b/api/auth/index.ts
@@ -130,6 +130,24 @@ function makeSessionId() {
   return uuidv4();
 }
 
+function getBearerToken(req: any): string | null {
+  const authHeader = String(req.headers['authorization'] || req.headers['Authorization'] || '');
+  const match = authHeader.match(/^Bearer\s+(.+)$/i);
+  return match ? match[1].trim() : null;
+}
+
+async function requireMatchingUser(req: any, expectedUserId: string): Promise<boolean> {
+  const token = getBearerToken(req);
+  if (!token) return false;
+  try {
+    const { data: authData, error } = await supabase.auth.getUser(token);
+    if (error || !authData?.user?.id) return false;
+    return authData.user.id === expectedUserId;
+  } catch {
+    return false;
+  }
+}
+
 interface AdminJwtPayload {
   role: string;
   [key: string]: unknown;
@@ -205,10 +223,9 @@ export default async function handler(req: any, res: any) {
       const { userId, refresh_token } = req.body as { userId?: string; refresh_token?: string };
       if (!userId || !refresh_token) return res.status(400).json({ message: 'userId and refresh_token required.' });
 
-      try {
-        await supabase.from('fitbuddyai_refresh_tokens').update({ revoked: true }).eq('user_id', userId).neq('revoked', true);
-      } catch (e) {
-        console.warn('[api/auth/store_refresh] error revoking existing sessions', e);
+      const callerMatches = await requireMatchingUser(req, userId);
+      if (!callerMatches) {
+        return res.status(401).json({ message: 'Invalid or expired token.' });
       }
 
       const enc = encryptToken(String(refresh_token));
diff --git a/sql/migrations/003_atomic_shop_purchase.sql b/sql/migrations/003_atomic_shop_purchase.sql
new file mode 100644
index 00000000..7954af64
--- /dev/null
+++ b/sql/migrations/003_atomic_shop_purchase.sql
@@ -0,0 +1,77 @@
+-- Atomic shop purchase helper used by the server-side buy route.
+
+begin;
+
+create or replace function public.buy_shop_item_atomic(p_user_id uuid, p_item jsonb)
+returns public.fitbuddyai_userdata
+language plpgsql
+as $$
+declare
+  user_row public.fitbuddyai_userdata%rowtype;
+  item_price integer;
+  item_id text;
+  item_quantity integer;
+  inventory_items jsonb;
+  merged_inventory jsonb := '[]'::jsonb;
+  item_payload jsonb;
+  existing_item jsonb;
+  found_streak_saver boolean := false;
+  existing_quantity integer;
+begin
+  item_price := greatest(coalesce(nullif(p_item->>'price', '')::integer, 0), 0);
+  item_id := coalesce(p_item->>'id', '');
+  item_quantity := greatest(coalesce(nullif(p_item->>'quantity', '')::integer, nullif(p_item->>'count', '')::integer, 1), 1);
+
+  select *
+    into user_row
+    from public.fitbuddyai_userdata
+   where user_id = p_user_id
+   for update;
+
+  if not found then
+    raise exception 'User not found';
+  end if;
+
+  if coalesce(user_row.energy, 0) < item_price then
+    raise exception 'Insufficient energy';
+  end if;
+
+  inventory_items := coalesce(user_row.inventory, '[]'::jsonb);
+  item_payload := p_item || jsonb_build_object('price', item_price, 'purchased_at', now()::text);
+
+  if item_id like 'streak-saver%' then
+    for existing_item in select value from jsonb_array_elements(inventory_items) as value loop
+      if not found_streak_saver and coalesce(existing_item->>'id', '') like 'streak-saver%' then
+        existing_quantity := greatest(coalesce(nullif(existing_item->>'quantity', '')::integer, nullif(existing_item->>'count', '')::integer, 1), 1);
+        merged_inventory := merged_inventory || jsonb_build_array(
+          existing_item || jsonb_build_object(
+            'quantity', existing_quantity + item_quantity,
+            'price', item_price,
+            'purchased_at', now()::text
+          )
+        );
+        found_streak_saver := true;
+      else
+        merged_inventory := merged_inventory || jsonb_build_array(existing_item);
+      end if;
+    end loop;
+
+    if not found_streak_saver then
+      merged_inventory := merged_inventory || jsonb_build_array(item_payload || jsonb_build_object('quantity', item_quantity));
+    end if;
+  else
+    merged_inventory := inventory_items || jsonb_build_array(item_payload);
+  end if;
+
+  update public.fitbuddyai_userdata
+     set energy = user_row.energy - item_price,
+         inventory = merged_inventory,
+         updated_at = now()
+   where user_id = p_user_id
+   returning * into user_row;
+
+  return user_row;
+end;
+$$;
+
+commit;
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index a3f5c2a1..36521770 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -402,50 +402,8 @@ function App() {
   useEffect(() => {
     console.log('App: workoutPlan updated (version:', planVersion, '):', workoutPlan);
   }, [workoutPlan, planVersion]);
-  const handleShopPurchase = (item: any) => {
-    // Deduct energy and add item to user inventory (simplified)
-    setUserData((prev: any) => {
-      if (!prev) return prev;
-      const itemPrice = Number(item?.price ?? 0);
-      const newEnergy = Math.max(0, (prev.energy ?? 0) - itemPrice);
-      const inventory = Array.isArray(prev.inventory) ? [...prev.inventory] : [];
-      const itemId = String(item?.id || '');
-      let nextInventory = [...inventory];
-      if (itemId.startsWith('streak-saver')) {
-        const quantity = Number(item?.quantity ?? item?.count ?? 1);
-        const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : 1;
-        const existingIndex = nextInventory.findIndex((entry: any) => String(entry?.id || '').startsWith('streak-saver'));
-        const purchasedItem = {
-          ...item,
-          quantity: normalizedQuantity,
-          purchased_at: new Date().toISOString()
-        };
-        if (existingIndex >= 0) {
-          const existing = nextInventory[existingIndex];
-          const existingQty = Number(existing.quantity ?? existing.count ?? 1);
-          nextInventory[existingIndex] = {
-            ...existing,
-            ...purchasedItem,
-            quantity: (Number.isFinite(existingQty) ? existingQty : 1) + normalizedQuantity
-          };
-        } else {
-          nextInventory.push(purchasedItem);
-        }
-      } else {
-        nextInventory.push(item);
-      }
-      const nextUser = { ...prev, energy: newEnergy, inventory: nextInventory };
-      try {
-        saveUserData({ data: nextUser }, { skipBackup: true });
-          sessionStorage.setItem('fitbuddyai_local_user_override', '1');
-          localStorage.setItem('fitbuddyai_local_user_override', '1');
-        window.dispatchEvent(new Event('storage'));
-      } catch (error) {
-        console.warn('[App] Failed to persist local shop purchase:', error);
-      }
-      return nextUser;
-    });
-    // Optionally: show a toast or animation
+  const handleShopPurchase = (_item: any) => {
+    // ShopPage already persists the server response and emits a storage refresh.
   };
 
   const handleRedeemStreakSaver = (): string | null => {
diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index 0209ac69..9e6df1f2 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -17,6 +17,8 @@ const MAX_HISTORY_MESSAGES = 12; // limit context length to speed up LLM respons
 
 const isInternalChatLink = (href: string) => href.startsWith('/') && !href.startsWith('//');
 
+const isSafeChatHref = (href: string) => isInternalChatLink(href) || /^https?:\/\//i.test(href);
+
 const trimTrailingPunctuation = (value: string) => {
   let end = value.length;
   while (end > 0 && '.,!?;:)]}'.includes(value[end - 1])) {
@@ -37,6 +39,7 @@ const renderChatText = (text: string) => {
       output.push(source.slice(lastIndex, match.index));
     }
 
+    const markdownToken = match[1];
     const markdownLabel = match[2];
     const markdownHref = match[3];
     const rawHref = match[4];
@@ -45,17 +48,21 @@ const renderChatText = (text: string) => {
     const key = `chat-link-${output.length}`;
 
     if (markdownLabel && markdownHref) {
-      output.push(
-        isInternalChatLink(href) ? (
-          <Link key={key} to={href} className="msg-link">
-            {markdownLabel}
-          </Link>
-        ) : (
-          <a key={key} href={href} target="_blank" rel="noreferrer" className="msg-link">
-            {markdownLabel}
-          </a>
-        )
-      );
+      if (!isSafeChatHref(href)) {
+        output.push(markdownToken);
+      } else {
+        output.push(
+          isInternalChatLink(href) ? (
+            <Link key={key} to={href} className="msg-link">
+              {markdownLabel}
+            </Link>
+          ) : (
+            <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="msg-link">
+              {markdownLabel}
+            </a>
+          )
+        );
+      }
     } else if (href) {
       output.push(
         isInternalChatLink(href) ? (
@@ -63,7 +70,7 @@ const renderChatText = (text: string) => {
             {href}
           </Link>
         ) : (
-          <a key={key} href={href} target="_blank" rel="noreferrer" className="msg-link">
+          <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="msg-link">
             {href}
           </a>
         )
diff --git a/src/components/ShopPage.tsx b/src/components/ShopPage.tsx
index 2a8087a0..53b7317c 100644
--- a/src/components/ShopPage.tsx
+++ b/src/components/ShopPage.tsx
@@ -143,9 +143,7 @@ const ShopPage: React.FC<ShopPageProps> = ({ user, onPurchase, onRedeemStreakSav
     setPurchasing(null);
     if (updated) {
       try {
-        const nextInventory = Array.isArray(updated.inventory) ? [...updated.inventory] : (Array.isArray(user.inventory) ? [...user.inventory] : []);
-        const nextEnergy = Math.max(0, (updated.energy ?? user.energy) - item.price);
-        const nextUser = { ...user, ...updated, energy: nextEnergy, inventory: nextInventory };
+        const nextUser = { ...user, ...updated, energy: updated.energy ?? user.energy, inventory: Array.isArray(updated.inventory) ? updated.inventory : (Array.isArray(user.inventory) ? user.inventory : []) };
         saveUserData({ data: nextUser });
         onPurchase(item);
       } catch (e) {
diff --git a/src/components/WorkoutsPage.tsx b/src/components/WorkoutsPage.tsx
index 52afee7d..ebb6815a 100644
--- a/src/components/WorkoutsPage.tsx
+++ b/src/components/WorkoutsPage.tsx
@@ -26,14 +26,16 @@ const WorkoutsPage: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
 
   const removeFromPlan = (item: Workout & { title: string }) => {
-    if (!mySavedNames.includes(item.title)) {
-      showFitBuddyNotification({ message: 'That workout is not in your saved list.', variant: 'error' });
-      return;
-    }
-    const next = mySavedNames.filter(title => title !== item.title);
-    setMySavedNames(next);
-    persistSavedNames(next);
-    showFitBuddyNotification({ message: item.title + ' removed from your workouts.' });
+    setMySavedNames((prev) => {
+      if (!prev.includes(item.title)) {
+        showFitBuddyNotification({ message: 'That workout is not in your saved list.', variant: 'error' });
+        return prev;
+      }
+      const next = prev.filter(title => title !== item.title);
+      persistSavedNames(next);
+      showFitBuddyNotification({ message: item.title + ' removed from your workouts.' });
+      return next;
+    });
   };
 
   const filtered = useMemo(() => {
@@ -60,16 +62,17 @@ const WorkoutsPage: React.FC = () => {
   }, []);
 
   const addToPlan = (item: Workout & { title: string }) => {
-    const alreadySaved = mySavedNames.includes(item.title);
-    if (alreadySaved) {
-      showFitBuddyNotification({ message: 'Already saved to your workouts.' });
-      return;
-    }
+    setMySavedNames((prev) => {
+      if (prev.includes(item.title)) {
+        showFitBuddyNotification({ message: 'Already saved to your workouts.' });
+        return prev;
+      }
 
-    const next = [...mySavedNames, item.title];
-    setMySavedNames(next);
-    persistSavedNames(next);
-    showFitBuddyNotification({ message: item.title + ' saved to your workouts!' });
+      const next = [...prev, item.title];
+      persistSavedNames(next);
+      showFitBuddyNotification({ message: item.title + ' saved to your workouts!' });
+      return next;
+    });
   };
 
   
@@ -91,20 +94,22 @@ const WorkoutsPage: React.FC = () => {
         const picks = pickWorkoutsFromAssessment(assessment);
         let added = 0;
         // Persist only names using the new saved-names approach
-        const next = [...mySavedNames];
-        picks.forEach(p => {
-          if (!next.includes(p.title)) {
-            next.push(p.title);
-            added += 1;
-          }
+        setMySavedNames((prev) => {
+          const next = [...prev];
+          picks.forEach(p => {
+            if (!next.includes(p.title)) {
+              next.push(p.title);
+              added += 1;
+            }
+          });
+          try { persistSavedNames(next); } catch (_e) {}
+          showFitBuddyNotification(
+            added > 0
+              ? { message: `Saved ${added} workouts from your assessment.` }
+              : { message: 'Those workouts are already saved.', variant: 'warning' }
+          );
+          return next;
         });
-        setMySavedNames(next);
-        try { persistSavedNames(next); } catch (_e) {}
-        showFitBuddyNotification(
-          added > 0
-            ? { message: `Saved ${added} workouts from your assessment.` }
-            : { message: 'Those workouts are already saved.', variant: 'warning' }
-        );
         setAiSaving(false);
       }, 120);
     } catch (err) {
diff --git a/src/server/adminRoutes.js b/src/server/adminRoutes.js
index 60265e9e..a5f74b90 100644
--- a/src/server/adminRoutes.js
+++ b/src/server/adminRoutes.js
@@ -29,7 +29,7 @@ function getSupabaseAdmin() {
   }
 }
 
-router.use(express.json({ limit: '20mb' }));
+router.use(express.json({ limit: '1mb' }));
 
 router.all('/api/admin/users', async (req, res) => {
   if (!requireAdmin(req)) return res.status(403).json({ message: 'Forbidden' });
diff --git a/src/server/authServer.cjs b/src/server/authServer.cjs
index 501524ba..29c658ef 100644
--- a/src/server/authServer.cjs
+++ b/src/server/authServer.cjs
@@ -37,8 +37,8 @@ function isUsernameBanned(username) {
 
 const app = express();
 app.use(cors());
-// Large AI-generated workout plans can exceed the default JSON body limit.
-app.use(bodyParser.json({ limit: '20mb' }));
+app.use(bodyParser.json({ limit: '1mb' }));
+app.use('/api/ai', bodyParser.json({ limit: '20mb' }));
 
 // Path to users.json file
 const _usersFile = path.join(__dirname, 'users.json');
diff --git a/src/server/authServer.js b/src/server/authServer.js
index 7b13886a..1e5c2af1 100644
--- a/src/server/authServer.js
+++ b/src/server/authServer.js
@@ -207,8 +207,8 @@ const userBuyLimiter = rateLimit({
 
 const app = express();
 app.use(cors());
-// Large AI-generated workout plans can exceed the default JSON body limit.
-app.use(bodyParser.json({ limit: '20mb' }));
+app.use(bodyParser.json({ limit: '1mb' }));
+app.use('/api/ai', bodyParser.json({ limit: '20mb' }));
 // Simple request logger to help debug routing issues in dev
 app.use((req, res, next) => {
   try {
@@ -229,6 +229,12 @@ function isAdminRequest(req) {
   return auth === `Bearer ${adminToken}`;
 }
 
+function getBearerToken(req) {
+  const auth = String(req.headers.authorization || req.headers.Authorization || '');
+  const match = auth.match(/^Bearer\s+(.+)$/i);
+  return match ? match[1].trim() : null;
+}
+
 app.get('/api/admin/users', adminUsersLimiter, async (req, res) => {
   try {
     console.log('[authServer] /api/ai/generate request headers:', {
@@ -431,74 +437,31 @@ app.post('/api/user/buy', userBuyLimiter, async (req, res) => {
     if (!id || !item) return res.status(400).json({ message: 'User ID and item required.' });
     if (!supabase) return res.status(500).json({ message: 'Supabase not configured.' });
 
-    const itemPrice = Number(item.price);
-    if (!Number.isFinite(itemPrice) || itemPrice < 0) {
-      return res.status(400).json({ message: 'Invalid item price.' });
-    }
-
-    const { data: user, error: fetchError } = await supabase
-      .from('fitbuddyai_userdata')
-      .select('*')
-      .eq('user_id', id)
-      .maybeSingle();
+    const token = getBearerToken(req);
+    if (!token) return res.status(401).json({ message: 'Missing Authorization token.' });
 
-    if (fetchError) {
-      console.error('[authServer] /api/user/buy fetch error', fetchError);
-      return res.status(500).json({ message: 'Failed to load user.' });
+    const { data: authData, error: authError } = await supabase.auth.getUser(token);
+    if (authError || !authData?.user?.id) {
+      return res.status(401).json({ message: 'Invalid or expired token.' });
     }
-    if (!user) return res.status(404).json({ message: 'User not found.' });
-
-    const currentEnergy = Number.isFinite(Number(user.energy)) ? Number(user.energy) : 0;
-    if (currentEnergy < itemPrice) {
-      return res.status(400).json({ message: 'Not enough energy.' });
+    if (authData.user.id !== id) {
+      return res.status(403).json({ message: 'Token does not match user.' });
     }
 
-    const nextInventory = Array.isArray(user.inventory) ? [...user.inventory] : [];
-    const itemId = String(item.id || '');
-    const purchasedItem = {
-      ...item,
-      price: itemPrice,
-      purchased_at: new Date().toISOString()
-    };
+    const { data: updatedUser, error: purchaseError } = await supabase.rpc('buy_shop_item_atomic', {
+      p_user_id: id,
+      p_item: item
+    });
 
-    if (itemId.startsWith('streak-saver')) {
-      const quantity = Number(item.quantity ?? item.count ?? 1);
-      const normalizedQuantity = Number.isFinite(quantity) && quantity > 0 ? quantity : 1;
-      const existingIndex = nextInventory.findIndex((entry) => String(entry?.id || '').startsWith('streak-saver'));
-      if (existingIndex >= 0) {
-        const existing = nextInventory[existingIndex];
-        const existingQty = Number(existing?.quantity ?? existing?.count ?? 1);
-        nextInventory[existingIndex] = {
-          ...existing,
-          ...purchasedItem,
-          quantity: (Number.isFinite(existingQty) ? existingQty : 1) + normalizedQuantity
-        };
-      } else {
-        nextInventory.push({ ...purchasedItem, quantity: normalizedQuantity });
+    if (purchaseError) {
+      console.error('[authServer] /api/user/buy rpc error', purchaseError);
+      if (String(purchaseError.message || '').toLowerCase().includes('insufficient energy')) {
+        return res.status(400).json({ message: 'Not enough energy.' });
       }
-    } else {
-      nextInventory.push(purchasedItem);
-    }
-
-    const updates = {
-      energy: currentEnergy - itemPrice,
-      inventory: nextInventory,
-      updated_at: new Date().toISOString()
-    };
-
-    const { data: updatedUser, error: updateError } = await supabase
-      .from('fitbuddyai_userdata')
-      .update(updates)
-      .eq('user_id', id)
-      .select('*')
-      .maybeSingle();
-
-    if (updateError) {
-      console.error('[authServer] /api/user/buy update error', updateError);
       return res.status(500).json({ message: 'Failed to save purchase.' });
     }
 
-    const { password: _password, ...userSafe } = updatedUser || { ...user, ...updates };
+    const { password: _password, ...userSafe } = updatedUser || {};
     return res.json({ user: userSafe });
   } catch (err) {
     console.error('[authServer] /api/user/buy unexpected', err);
diff --git a/src/services/authService.ts b/src/services/authService.ts
index 37eaa5a8..b085df12 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -35,7 +35,7 @@ export async function buyShopItem(id: string, item: any): Promise<User | null> {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ id, item: safeItem })
     });
-    const res = await fetch('/api/user/buy', reqInit);
+    const res = await fetch(`/api/user/${encodeURIComponent(id)}?action=buy`, reqInit);
     if (!res.ok) {
       // Attempt to read structured error code from server
       try {
diff --git a/src/services/cloudBackupService.ts b/src/services/cloudBackupService.ts
index 02d4f3a6..621f2040 100644
--- a/src/services/cloudBackupService.ts
+++ b/src/services/cloudBackupService.ts
@@ -14,7 +14,7 @@ export async function backupUserDataToServer(userId: string) {
   if (fitbuddyai_questionnaire_progress != null) payload.fitbuddyai_questionnaire_progress = fitbuddyai_questionnaire_progress;
   if (fitbuddyai_workout_plan != null) payload.fitbuddyai_workout_plan = fitbuddyai_workout_plan;
   if (fitbuddyai_assessment_data != null) payload.fitbuddyai_assessment_data = fitbuddyai_assessment_data;
-  // include chat history and user data if present so server can persist chat_history into payload
+  // include chat history and the user snapshot if present so the server can associate the backup correctly
   if (fitbuddyai_chat != null) payload.chat_history = fitbuddyai_chat;
 
     // Attach local fitbuddyai_user_data so server can cross-check client identity when needed

From 64cbf77b58594d8753a44516bfd095b9b61a5807 Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Wed, 6 May 2026 10:58:31 -0400
Subject: [PATCH 4/8] refactor: enhance bearer token extraction and improve
 safety checks in auth functions

---
 api/auth/index.ts                 | 13 ++++++----
 src/components/GeminiChatPage.tsx | 40 +++++++++++++++----------------
 src/server/adminRoutes.js         |  2 +-
 src/server/authServer.js          |  6 +++--
 4 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/api/auth/index.ts b/api/auth/index.ts
index 8125d110..4faddbe8 100644
--- a/api/auth/index.ts
+++ b/api/auth/index.ts
@@ -132,8 +132,10 @@ function makeSessionId() {
 
 function getBearerToken(req: any): string | null {
   const authHeader = String(req.headers['authorization'] || req.headers['Authorization'] || '');
-  const match = authHeader.match(/^Bearer\s+(.+)$/i);
-  return match ? match[1].trim() : null;
+  if (!authHeader) return null;
+  if (!authHeader.toLowerCase().startsWith('bearer ')) return null;
+  const token = authHeader.slice(7).trim();
+  return token || null;
 }
 
 async function requireMatchingUser(req: any, expectedUserId: string): Promise<boolean> {
@@ -160,10 +162,11 @@ export async function requireAdmin(req: any): Promise<AdminJwtPayload | null> {
     return null;
   }
   const authHeader = String(req.headers['authorization'] || req.headers['Authorization'] || '');
-  const match = authHeader.match(/^Bearer\s+(.+)$/i);
-  if (!match) return null;
+  if (!authHeader || !authHeader.toLowerCase().startsWith('bearer ')) return null;
+  const token = authHeader.slice(7).trim();
+  if (!token) return null;
   try {
-    const decoded = jwt.verify(match[1], jwtSecret) as string | AdminJwtPayload;
+    const decoded = jwt.verify(token, jwtSecret) as string | AdminJwtPayload;
     if (typeof decoded === 'object' && decoded && (decoded.role === 'service' || decoded.role === 'admin')) {
       return decoded;
     }
diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index 9e6df1f2..f202f96a 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -15,9 +15,18 @@ const normalizeChatText = (text: string) => {
 const MAX_PLAN_SNIPPET_CHARS = 10000; // allow richer workoutPlan context for chat personalization
 const MAX_HISTORY_MESSAGES = 12; // limit context length to speed up LLM responses
 
-const isInternalChatLink = (href: string) => href.startsWith('/') && !href.startsWith('//');
+const isInternalChatLink = (href: string) => href.startsWith('/') && !href.startsWith('//') && !href.includes('\\');
+
+const isSafeExternalChatHref = (href: string) => {
+  try {
+    const parsed = new URL(href);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
 
-const isSafeChatHref = (href: string) => isInternalChatLink(href) || /^https?:\/\//i.test(href);
+const isSafeChatHref = (href: string) => isInternalChatLink(href) || isSafeExternalChatHref(href);
 
 const trimTrailingPunctuation = (value: string) => {
   let end = value.length;
@@ -40,30 +49,19 @@ const renderChatText = (text: string) => {
     }
 
     const markdownToken = match[1];
-    const markdownLabel = match[2];
     const markdownHref = match[3];
     const rawHref = match[4];
+    if (markdownToken) {
+      output.push(markdownToken);
+      lastIndex = tokenRegex.lastIndex;
+      continue;
+    }
+
     const href = trimTrailingPunctuation(markdownHref || rawHref || '');
     const trailing = (markdownHref || rawHref || '').slice(href.length);
     const key = `chat-link-${output.length}`;
 
-    if (markdownLabel && markdownHref) {
-      if (!isSafeChatHref(href)) {
-        output.push(markdownToken);
-      } else {
-        output.push(
-          isInternalChatLink(href) ? (
-            <Link key={key} to={href} className="msg-link">
-              {markdownLabel}
-            </Link>
-          ) : (
-            <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="msg-link">
-              {markdownLabel}
-            </a>
-          )
-        );
-      }
-    } else if (href) {
+    if (href && isSafeChatHref(href)) {
       output.push(
         isInternalChatLink(href) ? (
           <Link key={key} to={href} className="msg-link">
@@ -75,6 +73,8 @@ const renderChatText = (text: string) => {
           </a>
         )
       );
+    } else if (href) {
+      output.push(href);
     }
 
     if (trailing) {
diff --git a/src/server/adminRoutes.js b/src/server/adminRoutes.js
index a5f74b90..ad7afafc 100644
--- a/src/server/adminRoutes.js
+++ b/src/server/adminRoutes.js
@@ -29,7 +29,7 @@ function getSupabaseAdmin() {
   }
 }
 
-router.use(express.json({ limit: '1mb' }));
+router.use(express.json());
 
 router.all('/api/admin/users', async (req, res) => {
   if (!requireAdmin(req)) return res.status(403).json({ message: 'Forbidden' });
diff --git a/src/server/authServer.js b/src/server/authServer.js
index 1e5c2af1..dcd822f9 100644
--- a/src/server/authServer.js
+++ b/src/server/authServer.js
@@ -231,8 +231,10 @@ function isAdminRequest(req) {
 
 function getBearerToken(req) {
   const auth = String(req.headers.authorization || req.headers.Authorization || '');
-  const match = auth.match(/^Bearer\s+(.+)$/i);
-  return match ? match[1].trim() : null;
+  if (!auth) return null;
+  if (!auth.toLowerCase().startsWith('bearer ')) return null;
+  const token = auth.slice(7).trim();
+  return token || null;
 }
 
 app.get('/api/admin/users', adminUsersLimiter, async (req, res) => {

From b95862979233e609e0d3293428803166deb3d6d0 Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Wed, 6 May 2026 11:15:04 -0400
Subject: [PATCH 5/8] refactor: enhance HTML escaping and link rendering in
 chat text

Co-authored-by: Copilot <copilot@github.com>
---
 src/components/GeminiChatPage.tsx | 64 ++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index f202f96a..69a84073 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -36,6 +36,26 @@ const trimTrailingPunctuation = (value: string) => {
   return value.slice(0, end);
 };
 
+const escapeHtml = (value: string) =>
+  value.replace(/[&<>"']/g, character => {
+    switch (character) {
+      case '&':
+        return '&amp;';
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      case '"':
+        return '&quot;';
+      case "'":
+        return '&#39;';
+      default:
+        return character;
+    }
+  });
+
+const renderEscapedText = (value: string, key: string) => <span key={key} dangerouslySetInnerHTML={{ __html: escapeHtml(value) }} />;
+
 const renderChatText = (text: string) => {
   const output: Array<React.ReactNode> = [];
   const source = String(text || '');
@@ -45,47 +65,63 @@ const renderChatText = (text: string) => {
 
   while ((match = tokenRegex.exec(source)) !== null) {
     if (match.index > lastIndex) {
-      output.push(source.slice(lastIndex, match.index));
+      output.push(renderEscapedText(source.slice(lastIndex, match.index), `chat-text-${output.length}`));
     }
 
-    const markdownToken = match[1];
+    // match[1]: full markdown link [text](href)
+    // match[2]: link text (inside [...])
+    // match[3]: link href (inside (...))
+    // match[4]: plain URL (http://... or /...)
+    const markdownText = match[2];
     const markdownHref = match[3];
     const rawHref = match[4];
-    if (markdownToken) {
-      output.push(markdownToken);
-      lastIndex = tokenRegex.lastIndex;
-      continue;
+
+    let href = '';
+    let displayText = '';
+
+    if (markdownHref) {
+      // Markdown link: [text](href) — validate href before creating link
+      href = markdownHref;
+      displayText = markdownText;
+    } else if (rawHref) {
+      // Plain URL: http://... or /... — strip trailing punctuation
+      href = trimTrailingPunctuation(rawHref);
+      displayText = href;
     }
 
-    const href = trimTrailingPunctuation(markdownHref || rawHref || '');
-    const trailing = (markdownHref || rawHref || '').slice(href.length);
     const key = `chat-link-${output.length}`;
 
     if (href && isSafeChatHref(href)) {
+      // Safe href: create a clickable link
       output.push(
         isInternalChatLink(href) ? (
           <Link key={key} to={href} className="msg-link">
-            {href}
+            {renderEscapedText(displayText, `${key}-text`)}
           </Link>
         ) : (
           <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="msg-link">
-            {href}
+            {renderEscapedText(displayText, `${key}-text`)}
           </a>
         )
       );
     } else if (href) {
-      output.push(href);
+      // Unsafe href: output link text only (don't make it clickable)
+      output.push(renderEscapedText(displayText, `${key}-text`));
     }
 
-    if (trailing) {
-      output.push(trailing);
+    // Handle trailing punctuation for plain URLs only
+    if (rawHref && displayText !== rawHref) {
+      const trailing = rawHref.slice(displayText.length);
+      if (trailing) {
+        output.push(renderEscapedText(trailing, `${key}-trailing`));
+      }
     }
 
     lastIndex = tokenRegex.lastIndex;
   }
 
   if (lastIndex < source.length) {
-    output.push(source.slice(lastIndex));
+    output.push(renderEscapedText(source.slice(lastIndex), `chat-text-${output.length}`));
   }
 
   return output.length ? output : source;

From 650a32b408e38659c95c96dc44a1e86cc6ea01f1 Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Wed, 6 May 2026 11:24:14 -0400
Subject: [PATCH 6/8] refactor: replace HTML escaping with safer text rendering
 in chat component

Co-authored-by: Copilot <copilot@github.com>
---
 src/components/GeminiChatPage.tsx | 32 +++++++------------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index 69a84073..8bd0695f 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -36,25 +36,7 @@ const trimTrailingPunctuation = (value: string) => {
   return value.slice(0, end);
 };
 
-const escapeHtml = (value: string) =>
-  value.replace(/[&<>"']/g, character => {
-    switch (character) {
-      case '&':
-        return '&amp;';
-      case '<':
-        return '&lt;';
-      case '>':
-        return '&gt;';
-      case '"':
-        return '&quot;';
-      case "'":
-        return '&#39;';
-      default:
-        return character;
-    }
-  });
-
-const renderEscapedText = (value: string, key: string) => <span key={key} dangerouslySetInnerHTML={{ __html: escapeHtml(value) }} />;
+const renderTextFragment = (value: string, key: string) => <span key={key}>{value}</span>;
 
 const renderChatText = (text: string) => {
   const output: Array<React.ReactNode> = [];
@@ -65,7 +47,7 @@ const renderChatText = (text: string) => {
 
   while ((match = tokenRegex.exec(source)) !== null) {
     if (match.index > lastIndex) {
-      output.push(renderEscapedText(source.slice(lastIndex, match.index), `chat-text-${output.length}`));
+      output.push(renderTextFragment(source.slice(lastIndex, match.index), `chat-text-${output.length}`));
     }
 
     // match[1]: full markdown link [text](href)
@@ -96,24 +78,24 @@ const renderChatText = (text: string) => {
       output.push(
         isInternalChatLink(href) ? (
           <Link key={key} to={href} className="msg-link">
-            {renderEscapedText(displayText, `${key}-text`)}
+            {displayText}
           </Link>
         ) : (
           <a key={key} href={href} target="_blank" rel="noopener noreferrer" className="msg-link">
-            {renderEscapedText(displayText, `${key}-text`)}
+            {displayText}
           </a>
         )
       );
     } else if (href) {
       // Unsafe href: output link text only (don't make it clickable)
-      output.push(renderEscapedText(displayText, `${key}-text`));
+      output.push(renderTextFragment(displayText, `${key}-text`));
     }
 
     // Handle trailing punctuation for plain URLs only
     if (rawHref && displayText !== rawHref) {
       const trailing = rawHref.slice(displayText.length);
       if (trailing) {
-        output.push(renderEscapedText(trailing, `${key}-trailing`));
+        output.push(renderTextFragment(trailing, `${key}-trailing`));
       }
     }
 
@@ -121,7 +103,7 @@ const renderChatText = (text: string) => {
   }
 
   if (lastIndex < source.length) {
-    output.push(renderEscapedText(source.slice(lastIndex), `chat-text-${output.length}`));
+    output.push(renderTextFragment(source.slice(lastIndex), `chat-text-${output.length}`));
   }
 
   return output.length ? output : source;

From 0f896faccdecaa2f8fc9da1f9d47709360bc33cb Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Wed, 6 May 2026 11:49:05 -0400
Subject: [PATCH 7/8] refactor: sanitize chat fragments before rendering in
 GeminiChatPage

Co-authored-by: Copilot <copilot@github.com>
---
 .github/workflows/codeql-analysis.yml | 33 +++++++++++++++++++++++++++
 src/components/GeminiChatPage.tsx     |  4 +++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/codeql-analysis.yml

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
new file mode 100644
index 00000000..6a6d034f
--- /dev/null
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,33 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          # CodeQL language for JS/TS projects
+          languages: javascript
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
diff --git a/src/components/GeminiChatPage.tsx b/src/components/GeminiChatPage.tsx
index 8bd0695f..e00c9ea4 100644
--- a/src/components/GeminiChatPage.tsx
+++ b/src/components/GeminiChatPage.tsx
@@ -36,7 +36,9 @@ const trimTrailingPunctuation = (value: string) => {
   return value.slice(0, end);
 };
 
-const renderTextFragment = (value: string, key: string) => <span key={key}>{value}</span>;
+const sanitizeChatFragment = (value: string) => String(value).replace(/[<>]/g, '');
+
+const renderTextFragment = (value: string, key: string) => <span key={key}>{sanitizeChatFragment(value)}</span>;
 
 const renderChatText = (text: string) => {
   const output: Array<React.ReactNode> = [];

From e960934669839825464501015861a1d4c248c397 Mon Sep 17 00:00:00 2001
From: we09532 <williamjaye1@outlook.com>
Date: Wed, 6 May 2026 11:53:47 -0400
Subject: [PATCH 8/8] refactor: remove CodeQL analysis workflow file

---
 .github/workflows/codeql-analysis.yml | 33 ---------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 .github/workflows/codeql-analysis.yml

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
deleted file mode 100644
index 6a6d034f..00000000
--- a/.github/workflows/codeql-analysis.yml
+++ /dev/null
@@ -1,33 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    steps:
-      - name: Check out repository
-        uses: actions/checkout@v4
-
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          # CodeQL language for JS/TS projects
-          languages: javascript
-
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2