From 85e5cfa074cd8dbcc165712d99605ec0d2e0540d Mon Sep 17 00:00:00 2001
From: Ghanshyam Singh <ghanshyam2005singh@gmail.com>
Date: Wed, 25 Mar 2026 17:51:15 +0530
Subject: [PATCH 1/5] feat: update pages according to old website color scheme
 and design

---
 public/dashboard.html      | 330 ++++++++++----
 public/images/logo-osl.svg | 162 +++++++
 public/index.html          | 859 ++++++++++++++++++++++++++++++-------
 public/profile.html        | 588 +++++++++++++++++++++++++
 public/teach.html          | 483 +++++++++++++++------
 5 files changed, 2062 insertions(+), 360 deletions(-)
 create mode 100644 public/images/logo-osl.svg
 create mode 100644 public/profile.html

diff --git a/public/dashboard.html b/public/dashboard.html
index 47f2903..6dfed88 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -5,62 +5,229 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Dashboard - Alpha One Labs</title>
   <link rel="icon" type="image/png" href="/images/logo.png" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>tailwind.config = { theme: { extend: { colors: { brand: { DEFAULT:'#4F46E5', dark:'#3730A3' } } } } };</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style>
-    .hidden { display: none !important; }
-    .gradient-hero { background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#2563EB 100%); }
-    .badge { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
-    .card-hover { transition:transform .2s,box-shadow .2s; }
-    .card-hover:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+    :root{
+      --ink:#0D0D14;
+      --paper:#FFFFFF;
+      --teal:#0D9488;
+      --teal-dark:#0F766E;
+      --teal-light:#14B8A6;
+      --teal-dim:#CCFBF1;
+      --accent:#F97316;
+      --jade:#00B27A;
+      --muted:rgba(13,13,20,.48);
+      --border:#E2E8F0;
+    }
+    html{scroll-behavior:smooth;}
+    body{font-family:'DM Sans',sans-serif;background:#FAFBFC;color:var(--ink);overflow-x:hidden;}
+    h1,h2,h3,h4{font-family:'Syne',sans-serif;}
+    .hidden{display:none!important;}
+    a{text-decoration:none;color:inherit;}
+
+    /* ─── NAVBAR ─── */
+    #navbar{
+      position:sticky;top:0;z-index:200;
+      background:rgba(13,148,136,.96);
+      backdrop-filter:blur(18px) saturate(180%);
+      border-bottom:1px solid rgba(255,255,255,.18);
+      box-shadow:0 2px 12px rgba(0,0,0,.12);
+      transition:box-shadow .3s,background .3s;
+    }
+    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    .nav-logo{display:flex;align-items:center;gap:10px;}
+    .nav-logo img{width:38px;height:38px;border-radius:10px;}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-links{display:flex;align-items:center;gap:2px;}
+    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
+    .nav-link.active{color:#fff;background:rgba(255,255,255,.18);}
+    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+
+    /* ─── HERO ─── */
+    .hero{
+      background:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);
+      position:relative;overflow:hidden;padding:3rem 1.5rem;
+    }
+    .hero-mesh{
+      position:absolute;inset:0;
+      background:
+        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,255,255,.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(20,184,166,.2) 0%, transparent 50%);
+      pointer-events:none;
+    }
+    .hero-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;}
+    .hero-content h1{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.035em;}
+    .hero-content p{color:rgba(255,255,255,.62);font-size:.95rem;margin-top:.5rem;}
+    .hero-content .hero-meta{color:rgba(255,255,255,.5);font-size:.85rem;margin-top:.25rem;}
+
+    /* ─── CARDS ─── */
+    .card{
+      background:#fff;
+      border-radius:20px;
+      border:1px solid var(--border);
+      overflow:hidden;
+      transition:transform .2s,box-shadow .2s;
+    }
+    .card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
+    .card-header{padding:1.5rem;border-bottom:1px solid rgba(13,13,20,.05);display:flex;align-items:center;justify-content:space-between;}
+    .card-header h3{font-weight:700;font-size:.9rem;}
+
+    /* ─── STAT CARDS ─── */
+    .stat-card{
+      background:#fff;border-radius:16px;border:1px solid var(--border);
+      padding:1.5rem;text-align:center;transition:transform .2s,box-shadow .2s;
+    }
+    .stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
+    .stat-value{font-family:'Syne',sans-serif;font-size:1.75rem;font-weight:800;margin-bottom:.5rem;}
+    .stat-label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
+
+    /* ─── BUTTONS ─── */
+    .btn{
+      display:inline-flex;align-items:center;gap:8px;
+      padding:10px 18px;border-radius:10px;font-family:'Syne',sans-serif;
+      font-weight:700;font-size:.82rem;
+      border:none;cursor:pointer;text-decoration:none;
+      transition:all .18s;
+    }
+    .btn-primary{background:var(--teal);color:#fff;}
+    .btn-primary:hover{background:var(--teal-dark);}
+    .btn-primary:disabled{background:rgba(13,148,136,.5);cursor:not-allowed;}
+    .btn-secondary{background:#fff;color:var(--teal);border:1.5px solid var(--border);}
+    .btn-secondary:hover{background:var(--teal-dim);}
+    .btn-small{padding:6px 12px;font-size:.75rem;}
+
+    /* ─── TYPE BADGE ─── */
+    .badge{
+      display:inline-flex;align-items:center;gap:4px;
+      font-family:'Syne',sans-serif;font-size:.65rem;font-weight:700;
+      padding:4px 10px;border-radius:8px;text-transform:uppercase;
+    }
+
+    /* ─── ACTIVITY GRID ─── */
+    .activity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;margin-bottom:3rem;}
+    @media(max-width:768px){.activity-grid{grid-template-columns:1fr;}}
+    .activity-card{
+      background:#fff;border-radius:16px;border:1px solid var(--border);
+      padding:1.5rem;display:flex;flex-direction:column;gap:1rem;
+      transition:transform .2s,box-shadow .2s;
+    }
+    .activity-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
+    .activity-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);}
+    .activity-meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.75rem;color:var(--muted);}
+    .activity-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
+    .activity-actions{display:flex;gap:.75rem;margin-top:auto;}
+    .activity-actions a{flex:1;text-align:center;font-size:.75rem;}
+
+    /* ─── QUICK ACTIONS ─── */
+    .quick-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:2rem 0;}
+    .quick-actions a{
+      display:inline-flex;align-items:center;gap:6px;
+      padding:10px 18px;border-radius:10px;font-family:'Syne',sans-serif;
+      font-weight:700;font-size:.82rem;text-decoration:none;transition:all .18s;
+    }
+
+    /* ─── SECTION ─── */
+    .section{max-width:1200px;margin:0 auto;padding:0 1.5rem;}
+    .section-label{font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem;display:flex;align-items:center;gap:8px;}
+    .section-label::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px;}
+    .section-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.5rem;margin:2rem 0 1.5rem;}
+
+    /* ─── EMPTY STATE ─── */
+    .empty-state{text-align:center;padding:3rem 1.5rem;color:var(--muted);}
+    .empty-state-icon{font-size:3rem;margin-bottom:1rem;}
+    .empty-state-text{font-size:.95rem;margin-bottom:.5rem;}
+    .empty-state-link{color:var(--teal);font-weight:700;text-decoration:none;}
+    .empty-state-link:hover{text-decoration:underline;}
+
+    /* ─── FOOTER ─── */
+    footer{background:#0F172A;color:rgba(255,255,255,.45);padding:2rem 1.5rem;text-align:center;font-size:.75rem;}
+
+    /* ─── GRID ─── */
+    .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem;}
+    @media(max-width:640px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
   </style>
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans">
+<body>
 
-<nav class="bg-white shadow-sm sticky top-0 z-50">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
-    <a href="/" class="flex items-center gap-2">
-      <img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
-      <span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
+<!-- ─── NAVBAR ─── -->
+<nav id="navbar">
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">
+      <img src="./images/logo.png" alt="Alpha One Labs"
+           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
+      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+      </div>
+      <span class="nav-logo-text">Alpha One Labs</span>
     </a>
-    <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
-      <a href="/" class="hover:text-brand">Activities</a>
-      <a href="/dashboard.html" class="text-brand hover:text-brand-dark">Dashboard</a>
-      <a href="/teach.html" class="hover:text-brand" id="host-link">Host</a>
+    <div class="nav-links">
+      <a href="/" class="nav-link">Activities</a>
+      <a href="/dashboard.html" class="nav-link active">Dashboard</a>
+      <a href="/teach.html" class="nav-link" id="host-link">Host</a>
     </div>
-    <div class="flex items-center gap-3">
-      <span class="text-slate-600 text-sm hidden sm:block" id="nav-user"></span>
-      <button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500 transition">Logout</button>
+    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
+      <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
+      <button onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
     </div>
   </div>
 </nav>
 
-<div class="gradient-hero text-white py-12 px-4">
-  <div class="max-w-7xl mx-auto">
-    <p class="text-indigo-200 text-sm font-medium mb-1" id="header-role-label">Dashboard</p>
-    <h1 class="text-3xl font-extrabold" id="header-welcome">Welcome!</h1>
-    <p class="text-indigo-200 mt-1 text-sm" id="header-sub"></p>
+<!-- ─── HERO ─── -->
+<div class="hero">
+  <div class="hero-mesh"></div>
+  <div class="hero-content">
+    <h1 id="header-welcome">Welcome!</h1>
+    <p id="header-sub">Manage your hosted activities and track your participation.</p>
+    <p class="hero-meta" id="header-role-label">Dashboard</p>
   </div>
 </div>
 
-<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
-  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-10" id="stat-cards"></div>
-  <div id="quick-actions" class="mb-8"></div>
-  <h2 class="text-xl font-bold text-slate-800 mb-5" id="section-title">My Activities</h2>
-  <div id="activities-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-    <div class="bg-white rounded-2xl p-6 animate-pulse h-40"></div>
-    <div class="bg-white rounded-2xl p-6 animate-pulse h-40"></div>
-  </div>
-  <div id="empty-state" class="hidden text-center py-20 text-slate-400">
-    <p class="text-5xl mb-4">&#128459;</p>
-    <p class="text-lg font-medium" id="empty-msg">Nothing here yet.</p>
-    <a id="empty-action-link" href="/" class="mt-4 inline-block text-brand font-semibold hover:underline" id="empty-action-text">Browse activities</a>
+<!-- ─── MAIN CONTENT ─── -->
+<main style="padding:3rem 0;">
+
+  <div class="section">
+    <!-- STAT CARDS -->
+    <div class="stat-grid" id="stat-cards"></div>
+
+    <!-- QUICK ACTIONS -->
+    <div id="quick-actions"></div>
   </div>
+
+  <!-- HOSTED ACTIVITIES SECTION -->
+  <section class="section" style="margin-bottom:3rem;">
+    <div class="section-label">My Activities</div>
+    <h2 class="section-title" id="section-title">Hosted Activities</h2>
+    
+    <div class="activity-grid" id="activities-list">
+      <div class="activity-card">
+        <div style="width:100%;height:120px;background:linear-gradient(135deg,rgba(13,148,136,.1) 0%,rgba(20,184,166,.05) 100%);border-radius:12px;animation:pulse 2s ease-in-out infinite;"></div>
+      </div>
+      <div class="activity-card">
+        <div style="width:100%;height:120px;background:linear-gradient(135deg,rgba(13,148,136,.1) 0%,rgba(20,184,166,.05) 100%);border-radius:12px;animation:pulse 2s ease-in-out infinite;"></div>
+      </div>
+    </div>
+
+    <div id="empty-state" class="hidden empty-state">
+      <p class="empty-state-icon">🎓</p>
+      <p class="empty-state-text" id="empty-msg">No hosted activities yet.</p>
+      <a id="empty-action-link" href="/teach.html" class="empty-state-link" id="empty-action-text">Create your first activity →</a>
+    </div>
+  </section>
+
+  <!-- JOINED ACTIVITIES SECTION -->
   <div id="joined-section"></div>
+
 </main>
 
-<footer class="bg-slate-800 text-slate-400 py-6 text-center text-sm mt-10">
-  <p>&copy; 2024&ndash;2026 Alpha One Labs &middot; All user data encrypted at rest</p>
+<!-- ─── FOOTER ─── -->
+<footer>
+  <p>&copy; 2024–2026 Alpha One Labs · All user data encrypted at rest</p>
 </footer>
 
 <script>
@@ -84,94 +251,91 @@ <h2 class="text-xl font-bold text-slate-800 mb-5" id="section-title">My Activiti
     renderDashboard(data);
   }
 
-  function statCard(value, label, color) {
-    return '<div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100 text-center"><p class="text-3xl font-extrabold ' + color + '">' + value + '</p><p class="text-slate-500 text-sm mt-1">' + label + '</p></div>';
+  function statCard(value, label) {
+    return '<div class="stat-card"><p class="stat-value" style="color:var(--teal);">' + value + '</p><p class="stat-label">' + label + '</p></div>';
   }
 
   function renderDashboard(data) {
     const hosted = data.hosted_activities || [];
     const joined = data.joined_activities || [];
 
-    document.getElementById('header-role-label').textContent = 'Dashboard';
     document.getElementById('header-welcome').textContent    = 'Hello, ' + user.username + '!';
     document.getElementById('header-sub').textContent        = 'Manage your hosted activities and track your participation.';
     document.getElementById('section-title').textContent     = 'Hosted Activities';
 
     const totalParts = hosted.reduce((s,a) => s + (a.participant_count||0), 0);
     document.getElementById('stat-cards').innerHTML =
-      statCard(hosted.length,  'Hosted',       'text-brand') +
-      statCard(totalParts,     'Participants', 'text-purple-600') +
-      statCard(joined.length,  'Joined',       'text-emerald-600') +
-      statCard('🔒',           'Encrypted',    'text-amber-500');
+      statCard(hosted.length,  'Hosted Activities') +
+      statCard(totalParts,     'Total Participants') +
+      statCard(joined.length,  'Activities Joined') +
+      statCard('🔒',           'Data Encrypted');
 
     document.getElementById('quick-actions').innerHTML =
-      '<div class="flex flex-wrap gap-3">' +
-      '<a href="/teach.html" class="inline-flex items-center gap-2 bg-brand text-white font-semibold px-5 py-2.5 rounded-xl hover:bg-brand-dark transition text-sm">+ New Activity</a>' +
-      '<a href="/" class="inline-flex items-center gap-2 bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-xl hover:bg-slate-50 transition text-sm">Browse All</a>' +
+      '<div class="quick-actions">' +
+      '<a href="/teach.html" class="btn btn-primary">+ New Activity</a>' +
+      '<a href="/" class="btn btn-secondary">Browse All Activities</a>' +
       '</div>';
 
     if (!hosted.length) {
-      document.getElementById('activities-list').innerHTML =
-        '<p class="col-span-3 text-slate-400 text-sm text-center py-8">You haven\'t hosted any activities yet. <a href="/teach.html" class="text-brand font-semibold hover:underline">Create your first activity \u2192</a></p>';
+      document.getElementById('activities-list').classList.add('hidden');
+      document.getElementById('empty-state').classList.remove('hidden');
     } else {
+      document.getElementById('activities-list').classList.remove('hidden');
+      document.getElementById('empty-state').classList.add('hidden');
       document.getElementById('activities-list').innerHTML = hosted.map(a => {
         const tc   = typeColor[a.type] || 'bg-slate-100 text-slate-600';
         const ic   = typeIcon[a.type]  || '✨';
-        const tags = (a.tags||[]).slice(0,3).map(t => '<span class="badge bg-slate-100 text-slate-500">' + esc(t) + '</span>').join('');
-        return '<article class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5 card-hover flex flex-col gap-3">' +
-          '<div class="flex items-start justify-between gap-2">' +
-            '<h3 class="font-bold text-slate-800 text-sm">' + ic + ' ' + esc(a.title) + '</h3>' +
-            '<span class="badge ' + tc + ' shrink-0">' + esc(a.type) + '</span>' +
+        const tags = (a.tags||[]).slice(0,3).map(t => '<span class="badge" style="background:#F0FDFA;color:#0D9488;">' + esc(t) + '</span>').join('');
+        return '<article class="activity-card">' +
+          '<div>' +
+            '<p class="activity-title">' + ic + ' ' + esc(a.title) + '</p>' +
+            '<span class="badge" style="background:#F0FDFA;color:#0D9488;">' + esc(a.type) + '</span>' +
           '</div>' +
-          '<div class="flex gap-3 text-xs text-slate-500">' +
-            '<span>👥 ' + a.participant_count + '</span>' +
+          '<div class="activity-meta">' +
+            '<span>👥 ' + a.participant_count + ' participants</span>' +
             '<span>🗓 ' + a.session_count + ' sessions</span>' +
             '<span>' + (fmtLabel[a.format]||a.format) + '</span>' +
           '</div>' +
-          '<div class="flex flex-wrap gap-1">' + tags + '</div>' +
-          '<div class="mt-auto flex gap-2">' +
-            '<a href="/course.html?id=' + esc(a.id) + '" class="flex-1 text-center text-sm font-semibold text-brand border border-brand/30 rounded-lg py-1.5 hover:bg-indigo-50">View</a>' +
-            '<a href="/teach.html?activity_id=' + esc(a.id) + '" class="flex-1 text-center text-sm font-semibold text-slate-600 border border-slate-200 rounded-lg py-1.5 hover:bg-slate-50">Manage</a>' +
+          '<div class="activity-tags">' + tags + '</div>' +
+          '<div class="activity-actions">' +
+            '<a href="/course.html?id=' + esc(a.id) + '" class="btn btn-secondary btn-small">View</a>' +
+            '<a href="/teach.html?activity_id=' + esc(a.id) + '" class="btn btn-secondary btn-small">Manage</a>' +
           '</div>' +
           '</article>';
       }).join('');
     }
 
-    const roleColor   = { participant:'bg-slate-100 text-slate-600', instructor:'bg-purple-100 text-purple-700', organizer:'bg-amber-100 text-amber-700' };
-    const statusColor = { active:'bg-emerald-100 text-emerald-700', cancelled:'bg-red-100 text-red-700', completed:'bg-blue-100 text-blue-700' };
-
-    let joinedHtml = '<h2 class="text-xl font-bold text-slate-800 mb-5 mt-10">Joined Activities</h2>';
+    let joinedHtml = '<section class="section" style="margin-bottom:3rem;"><div class="section-label">Participation</div><h2 class="section-title">Joined Activities</h2>';
     if (!joined.length) {
-      joinedHtml += '<p class="text-slate-400 text-sm text-center py-8">You haven\'t joined any activities yet. <a href="/" class="text-brand font-semibold hover:underline">Browse activities \u2192</a></p>';
+      joinedHtml += '<div class="empty-state"><p class="empty-state-icon">📚</p><p class="empty-state-text">No activities joined yet.</p><a href="/" class="empty-state-link">Browse activities →</a></div>';
     } else {
-      joinedHtml += '<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">' + joined.map(a => {
+      joinedHtml += '<div class="activity-grid">' + joined.map(a => {
         const tc  = typeColor[a.type] || 'bg-slate-100 text-slate-600';
         const ic  = typeIcon[a.type]  || '✨';
-        const rc  = roleColor[a.enr_role]     || 'bg-slate-100 text-slate-600';
-        const sc  = statusColor[a.enr_status] || 'bg-slate-100 text-slate-600';
-        const tags = (a.tags||[]).slice(0,3).map(t => '<span class="badge bg-slate-100 text-slate-500">' + esc(t) + '</span>').join('');
-        return '<article class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5 card-hover flex flex-col gap-3">' +
-          '<div class="flex items-start justify-between gap-2">' +
-            '<h3 class="font-bold text-slate-800 text-sm">' + ic + ' ' + esc(a.title) + '</h3>' +
-            '<span class="badge ' + tc + ' shrink-0">' + esc(a.type) + '</span>' +
+        const tags = (a.tags||[]).slice(0,3).map(t => '<span class="badge" style="background:#F0FDFA;color:#0D9488;">' + esc(t) + '</span>').join('');
+        return '<article class="activity-card">' +
+          '<div>' +
+            '<p class="activity-title">' + ic + ' ' + esc(a.title) + '</p>' +
+            '<p style="font-size:.75rem;color:var(--muted);margin-top:.25rem;">by ' + esc(a.host_name) + '</p>' +
+            '<span class="badge" style="background:#F0FDFA;color:#0D9488;margin-top:.5rem;">' + esc(a.type) + '</span>' +
           '</div>' +
-          '<p class="text-xs text-slate-400">by ' + esc(a.host_name) + '</p>' +
-          '<div class="flex flex-wrap gap-1.5">' +
-            '<span class="badge ' + rc + '">' + esc(a.enr_role) + '</span>' +
-            '<span class="badge ' + sc + '">' + esc(a.enr_status) + '</span>' +
-            '<span class="text-xs text-slate-400">' + (fmtLabel[a.format]||a.format) + '</span>' +
+          '<div class="activity-meta">' +
+            '<span>📍 ' + esc(a.enr_role) + '</span>' +
+            '<span>✓ ' + esc(a.enr_status) + '</span>' +
+            '<span>' + (fmtLabel[a.format]||a.format) + '</span>' +
           '</div>' +
-          '<div class="flex flex-wrap gap-1">' + tags + '</div>' +
-          '<a href="/course.html?id=' + esc(a.id) + '" class="mt-auto block text-center text-sm font-semibold text-brand border border-brand/30 rounded-lg py-1.5 hover:bg-indigo-50">View Activity</a>' +
+          '<div class="activity-tags">' + tags + '</div>' +
+          '<a href="/course.html?id=' + esc(a.id) + '" class="btn btn-secondary btn-small" style="width:100%;text-align:center;">View Activity</a>' +
           '</article>';
       }).join('') + '</div>';
     }
+    joinedHtml += '</section>';
     document.getElementById('joined-section').innerHTML = joinedHtml;
   }
 
   loadDashboard().catch(e => {
     document.getElementById('activities-list').innerHTML =
-      '<p class="col-span-3 text-red-400 text-sm">Failed to load dashboard: ' + e.message + '</p>';
+      '<p style="color:#EF4444;font-size:.9rem;text-align:center;padding:2rem;">Failed to load dashboard: ' + e.message + '</p>';
   });
 </script>
 </body>
diff --git a/public/images/logo-osl.svg b/public/images/logo-osl.svg
new file mode 100644
index 0000000..1d9ed32
--- /dev/null
+++ b/public/images/logo-osl.svg
@@ -0,0 +1,162 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="79.660782mm"
+   height="40.000004mm"
+   viewBox="0 0 79.660782 40.000004"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (0a00cf5, 2022-02-04)"
+   sodipodi:docname="logo-osl.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="2.5620932"
+     inkscape:cx="147.73077"
+     inkscape:cy="111.43233"
+     inkscape:window-width="1846"
+     inkscape:window-height="1016"
+     inkscape:window-x="74"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath838">
+      <path
+         d="M 0,300 H 600 V 0 H 0 Z"
+         id="path836" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g3014"
+       transform="matrix(0.01569046,0,0,-0.01569046,0,40)">
+      <path
+         d="m 1305.58,1673.19 v -131.64 c 0,-22.72 -18.43,-41.15 -41.15,-41.15 -22.73,0 -41.15,18.43 -41.15,41.15 v 131.64 c -39.08,16.17 -66.58,54.63 -66.58,99.55 0,59.49 48.23,107.72 107.73,107.72 59.5,0 107.73,-48.23 107.73,-107.72 0,-44.92 -27.51,-83.38 -66.58,-99.55 z m -45.84,469.1 c -250.37,0 -453.338,-202.97 -453.338,-453.34 0,-250.37 202.968,-453.34 453.338,-453.34 250.37,0 453.34,202.97 453.34,453.34 0,250.37 -202.97,453.34 -453.34,453.34"
+         style="fill:#8fd23d;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3016" />
+      <path
+         d="m 1291.54,2548.64 v 0.68 h -26.89 c 9.02,-0.01 17.94,-0.41 26.89,-0.68"
+         style="fill:#6ec62e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3018" />
+      <path
+         d="m 405.543,1690.44 c 0,474.27 384.414,858.76 858.657,858.88 H 202.77 C 90.7852,2549.32 0,2458.53 0,2346.55 V 1034.33 C 0,922.34 90.7852,831.559 202.77,831.559 H 1264.2 C 789.957,831.68 405.543,1216.16 405.543,1690.44"
+         style="fill:#6ec62e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3020" />
+      <path
+         d="m 1264.65,831.559 h 26.89 v 0.679 c -8.95,-0.277 -17.87,-0.679 -26.89,-0.679"
+         style="fill:#6ec62e;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3022" />
+      <path
+         d="m 4498.59,1898.49 c -50.46,0 -91.52,-41.05 -91.52,-91.52 0,-50.45 41.06,-91.5 91.52,-91.5 h 91.52 v 91.5 c 0,50.47 -41.06,91.52 -91.52,91.52"
+         style="fill:#f9dd06;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3024" />
+      <path
+         d="m 4734.16,1665.4 h -93.99 v -487.82 c 21.2,-1.5 42.51,-2.53 64.08,-2.53 h 29.91 v 490.35"
+         style="fill:#f9dd06;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3026" />
+      <path
+         d="m 4967.26,1806.97 c 0,50.47 -41.05,91.52 -91.51,91.52 -50.47,0 -91.52,-41.05 -91.52,-91.52 v -91.5 h 91.52 c 50.46,0 91.51,41.05 91.51,91.5"
+         style="fill:#f9dd06;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3028" />
+      <path
+         d="M 4874.25,2549.32 H 3801.5 V 2077.8 c 0,-459.09 344.55,-838.97 788.61,-895.28 v 482.88 h -91.52 c -78.07,0 -141.58,63.51 -141.58,141.57 0,78.08 63.51,141.58 141.58,141.58 78.07,0 141.58,-63.5 141.58,-141.58 v -91.5 h 93.99 v 91.5 c 0,78.08 63.51,141.58 141.59,141.58 78.07,0 141.58,-63.5 141.58,-141.58 0,-78.06 -63.51,-141.57 -141.58,-141.57 h -91.52 v -490.35 h 292.79 v 1171.5 c 0,111.99 -90.78,202.77 -202.77,202.77"
+         style="fill:#f9dd06;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3030" />
+      <path
+         d="M 4319.82,831.559 C 3787.79,996.012 3400.16,1492.48 3400.16,2077.8 v 471.52 h -779.52 c -119.32,-53.86 -202.61,-173.89 -202.61,-313.08 0,-189.33 154.03,-343.36 343.37,-343.36 412.59,0 748.25,-335.67 748.25,-748.25 0,-111.75 -24.79,-217.751 -68.9,-313.071 h 879.07"
+         style="fill:#49a8e2;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3032" />
+      <path
+         d="m 2029.58,2080.43 c -10.69,50.29 -16.43,102.39 -16.43,155.81 0,111.75 24.8,217.76 68.9,313.08 h -817.4 c 333.78,-0.09 622.85,-190.7 764.93,-468.89"
+         style="fill:#3e91c9;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3034" />
+      <path
+         d="m 3104.77,1144.63 c 0,189.33 -154.04,343.36 -343.37,343.36 -285.78,0 -534.56,161.11 -660.54,397.22 14.52,-62.61 22.45,-127.75 22.45,-194.77 0,-465.26 -370.01,-843.858 -831.78,-858.202 l 0.01,-0.687 h 1610.6 c 119.33,53.859 202.63,173.879 202.63,313.079"
+         style="fill:#3e91c9;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3036" />
+      <path
+         d="m 47.2383,362.461 c 0,-131.582 60.0707,-194.34 163.3397,-194.34 103.274,0 163.344,62.758 163.344,194.34 0,132.34 -60.07,195.109 -163.344,195.109 -103.269,0 -163.3397,-62.769 -163.3397,-195.109 z M 0,362.461 c 0,159.988 79.6367,236.93 210.578,236.93 130.945,0 210.61,-76.942 210.61,-236.93 0,-158.621 -79.665,-236.223 -210.61,-236.223 C 79.6367,126.238 0,203.84 0,362.461"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3038" />
+      <path
+         d="m 630.008,166.09 c 62.105,0 97.195,39.129 97.195,123.492 0,84.367 -36.437,122.84 -98.543,122.84 -49.957,0 -91.808,-35.07 -91.808,-122.84 0,-87.062 40.503,-123.492 93.156,-123.492 z M 538.223,425.941 V 404.34 c 12.808,22.969 46.55,47.262 91.785,47.262 87.742,0 141.082,-51.332 141.082,-162.02 0,-110.691 -53.34,-162.684 -141.082,-162.684 -45.235,0 -77.633,24.293 -91.785,47.274 V 21.6016 C 538.223,10.1602 528.086,0 516.625,0 505.137,0 495.023,10.1602 495.023,21.6016 V 425.941 c 0,12.141 10.114,21.598 21.602,21.598 11.461,0 21.598,-9.457 21.598,-21.598"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3040" />
+      <path
+         d="m 957.57,412.422 c -58.726,0 -91.125,-37.762 -95.191,-97.832 h 181.591 c 0,48.582 -16.88,97.832 -86.4,97.832 z m 0,39.18 c 108,0 128.91,-85.731 128.91,-131.633 0,-19.559 0,-43.188 -27.01,-43.188 H 862.379 c 0,-66.84 38.473,-110.031 101.922,-110.031 39.159,0 62.109,14.84 81.009,29.012 4.04,2.699 6.74,4.07 12.15,4.07 10.8,0 19.57,-8.793 19.57,-19.562 0,-7.481 -3.38,-11.489 -7.42,-15.559 -10.14,-10.109 -45.24,-37.813 -105.309,-37.813 -89.778,0 -145.781,49.301 -145.781,162.684 0,103.93 51.277,162.02 139.05,162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3042" />
+      <path
+         d="M 1410.63,332.121 V 151.91 c 0,-12.148 -9.45,-21.601 -21.6,-21.601 -12.14,0 -21.6,9.453 -21.6,21.601 v 171.422 c 0,53.309 -15.52,89.797 -81.01,89.797 -66.8,0 -89.75,-40.5 -89.75,-94.527 V 151.91 c 0,-12.148 -9.45,-21.601 -21.6,-21.601 -12.17,0 -21.6,9.453 -21.6,21.601 v 274.031 c 0,12.141 9.43,21.598 21.6,21.598 12.15,0 21.6,-9.457 21.6,-21.598 V 404.34 c 12.81,25.66 45.9,47.262 89.75,47.262 103.96,0 124.21,-62.102 124.21,-119.481"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3044" />
+      <path
+         d="m 1798.32,557.57 c -70.87,0 -97.86,-35.121 -97.86,-73.59 0,-112.07 255.13,-64.14 255.13,-226.769 0,-84.422 -58.04,-130.973 -162,-130.973 -76.94,0 -134.32,39.133 -157.26,83.043 -2.7,5.391 -3.38,8.078 -3.38,12.149 0,12.152 9.45,21.601 21.6,21.601 8.1,0 14.86,-4.07 18.9,-10.832 21.6,-35.058 60.76,-64.078 120.14,-64.078 74.26,0 116.11,29.68 116.11,89.09 0,126.187 -255.15,66.777 -255.15,226.769 0,62.102 45.23,115.411 143.77,115.411 64.11,0 116.1,-26.981 144.44,-69.52 2.72,-4.012 4.06,-8.082 4.06,-12.812 0,-12.137 -9.45,-21.598 -21.6,-21.598 -6.07,0 -12.14,2.039 -17.56,8.801 -20.25,24.949 -52.65,53.308 -109.34,53.308"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3046" />
+      <path
+         d="m 2148.17,451.602 c 60.07,0 93.13,-31.762 103.93,-46.602 3.38,-4.73 4.73,-8.078 4.73,-12.809 0,-11.48 -8.77,-19.562 -19.57,-19.562 -6.76,0 -11.49,2.691 -16.21,8.082 -10.12,11.48 -28.34,31.711 -72.88,31.711 -62.11,0 -95.19,-39.793 -95.19,-122.84 0,-84.363 33.08,-123.492 95.19,-123.492 39.13,0 62.76,17.531 78.29,29.019 4.73,3.352 8.11,4.723 12.83,4.723 10.78,0 19.57,-8.793 19.57,-19.562 0,-6.098 -2.03,-10.829 -8.79,-16.879 -14.84,-12.2 -47.24,-36.493 -101.9,-36.493 -87.08,0 -139.05,51.993 -139.05,162.684 0,110.688 51.97,162.02 139.05,162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3048" />
+      <path
+         d="m 2369.71,151.91 c 0,-12.148 -9.45,-21.601 -21.6,-21.601 -12.14,0 -21.59,9.453 -21.59,21.601 v 274.031 c 0,12.141 9.45,21.598 21.59,21.598 12.15,0 21.6,-9.457 21.6,-21.598 z m -47.23,384.719 c 0,19.562 9.42,26.98 25.63,26.98 16.22,0 25.64,-7.418 25.64,-26.98 0,-16.219 -9.42,-25.668 -25.64,-25.668 -16.21,0 -25.63,9.449 -25.63,25.668"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3050" />
+      <path
+         d="m 2576.34,412.422 c -58.73,0 -91.13,-37.762 -95.19,-97.832 h 181.58 c 0,48.582 -16.9,97.832 -86.39,97.832 z m 0,39.18 c 107.99,0 128.91,-85.731 128.91,-131.633 0,-19.559 0,-43.188 -26.99,-43.188 h -197.11 c 0,-66.84 38.47,-110.031 101.92,-110.031 39.16,0 62.1,14.84 81.01,29.012 4.04,2.699 6.73,4.07 12.15,4.07 10.8,0 19.56,-8.793 19.56,-19.562 0,-7.481 -3.38,-11.489 -7.42,-15.559 -10.11,-10.109 -45.23,-37.813 -105.3,-37.813 -89.78,0 -145.78,49.301 -145.78,162.684 0,103.93 51.28,162.02 139.05,162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3052" />
+      <path
+         d="M 3029.4,332.121 V 151.91 c 0,-12.148 -9.45,-21.601 -21.6,-21.601 -12.15,0 -21.6,9.453 -21.6,21.601 v 171.422 c 0,53.309 -15.52,89.797 -81.01,89.797 -66.8,0 -89.75,-40.5 -89.75,-94.527 V 151.91 c 0,-12.148 -9.45,-21.601 -21.6,-21.601 -12.17,0 -21.6,9.453 -21.6,21.601 v 274.031 c 0,12.141 9.43,21.598 21.6,21.598 12.15,0 21.6,-9.457 21.6,-21.598 V 404.34 c 12.81,25.66 45.89,47.262 89.75,47.262 103.96,0 124.21,-62.102 124.21,-119.481"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3054" />
+      <path
+         d="m 3229.37,451.602 c 60.07,0 93.13,-31.762 103.93,-46.602 3.38,-4.73 4.73,-8.078 4.73,-12.809 0,-11.48 -8.77,-19.562 -19.57,-19.562 -6.76,0 -11.48,2.691 -16.21,8.082 -10.11,11.48 -28.33,31.711 -72.88,31.711 -62.1,0 -95.19,-39.793 -95.19,-122.84 0,-84.363 33.09,-123.492 95.19,-123.492 39.13,0 62.77,17.531 78.29,29.019 4.73,3.352 8.11,4.723 12.81,4.723 10.83,0 19.59,-8.793 19.59,-19.562 0,-6.098 -2.03,-10.829 -8.76,-16.879 -14.87,-12.2 -47.27,-36.493 -101.93,-36.493 -87.08,0 -139.05,51.993 -139.05,162.684 0,110.688 51.97,162.02 139.05,162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3056" />
+      <path
+         d="m 3527.2,412.422 c -58.72,0 -91.12,-37.762 -95.19,-97.832 h 181.59 c 0,48.582 -16.9,97.832 -86.4,97.832 z m 0,39.18 c 108,0 128.91,-85.731 128.91,-131.633 0,-19.559 0,-43.188 -26.99,-43.188 h -197.11 c 0,-66.84 38.47,-110.031 101.92,-110.031 39.16,0 62.11,14.84 81.01,29.012 4.04,2.699 6.74,4.07 12.15,4.07 10.8,0 19.57,-8.793 19.57,-19.562 0,-7.481 -3.38,-11.489 -7.42,-15.559 -10.12,-10.109 -45.24,-37.813 -105.31,-37.813 -89.77,0 -145.78,49.301 -145.78,162.684 0,103.93 51.28,162.02 139.05,162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3058" />
+      <path
+         d="m 4402.39,252.48 v 28.309 h -95.17 c -43.88,0 -74.25,-18.187 -74.25,-57.328 0,-35.109 24.29,-57.371 76.94,-57.371 47.24,0 92.48,29.019 92.48,86.39 z m -157.96,124.161 c -6.73,-7.422 -11.46,-9.45 -17.53,-9.45 -10.8,0 -19.6,8.789 -19.6,19.618 0,4.722 1.35,8.082 3.38,11.429 18.91,29.731 55.35,53.364 112.04,53.364 78.32,0 121.52,-45.942 121.52,-114.75 V 151.191 c 0,-11.429 -9.46,-20.882 -20.94,-20.882 -11.46,0 -20.91,9.453 -20.91,20.882 v 24.348 c -16.88,-31.769 -56.04,-48.641 -96.54,-48.641 -71.53,0 -116.76,34.461 -116.76,96.563 0,59.359 45.23,95.141 118.13,95.141 h 95.17 v 18.25 c 0,45.886 -30.37,74.25 -79.67,74.25 -35.75,0 -57.35,-10.832 -78.29,-34.461"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3060" />
+      <path
+         d="m 4568.61,259.898 c 0,-64.136 37.1,-93.808 89.09,-93.808 62.11,0 95.17,39.129 95.17,123.492 0,83.047 -33.75,122.84 -95.17,122.84 -63.45,0 -89.09,-59.363 -89.09,-59.363 z m 227.45,29.684 c 0,-110.691 -51.3,-162.684 -138.36,-162.684 -76.94,0 -132.29,43.911 -132.29,133 v 334.774 c 0,12.137 9.43,21.59 21.6,21.59 12.15,0 21.6,-9.453 21.6,-21.59 V 407.691 c 15.5,21.598 48.59,43.911 91.79,43.911 87.08,0 135.66,-51.332 135.66,-162.02"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3062" />
+      <path
+         d="m 4899.5,369.219 c 0,-70.84 177.52,-44.52 177.52,-152.52 0,-61.437 -50.62,-89.09 -114.73,-89.09 -55.34,0 -97.88,26.332 -115.41,48.59 -3.39,4.731 -4.73,8.082 -4.73,12.801 0,10.832 8.76,19.57 19.56,19.57 4.04,0 9.46,-1.32 14.84,-6.699 20.94,-20.941 47.93,-33.09 85.74,-33.09 38.47,0 71.53,12.809 71.53,47.918 0,69.531 -177.52,41.832 -177.52,152.52 0,56.062 45.92,81.672 103.27,81.672 45.92,0 81.7,-15.5 102.61,-43.2 2.03,-2.691 4.73,-6.699 4.73,-12.8 0,-10.782 -8.77,-19.571 -19.57,-19.571 -3.38,0 -8.79,0.66 -14.18,6.039 -18.22,17.59 -38.47,28.36 -73.59,28.36 -30.36,0 -60.07,-9.449 -60.07,-40.5"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3064" />
+      <path
+         d="m 4128.53,133.109 h -115.72 c -89.65,0 -113.32,74.11 -113.32,113.321 v 330.871 c 0,12.5 10.13,22.679 22.67,22.679 12.5,0 22.63,-10.179 22.63,-22.679 V 246.43 c 0.14,-11.239 4.01,-67.969 68.02,-67.969 h 115.72 c 12.49,0 22.67,-10.18 22.67,-22.68 0,-12.543 -10.18,-22.672 -22.67,-22.672"
+         style="fill:#2e2f36;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path3066" />
+    </g>
+  </g>
+</svg>
diff --git a/public/index.html b/public/index.html
index 2ab457f..da08227 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,202 +5,765 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Alpha One Labs – Discover Activities</title>
   <link rel="icon" type="image/png" href="/images/logo.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <script src="https://cdn.tailwindcss.com"></script>
   <script>
     tailwind.config = {
       theme: {
         extend: {
+          fontFamily: {
+            display: ['Syne', 'sans-serif'],
+            body: ['DM Sans', 'sans-serif'],
+          },
           colors: {
-            brand: { DEFAULT: '#4F46E5', dark: '#3730A3', light: '#818CF8' },
+            ink: '#0D0D14',
+            paper: '#F7F6F3',
+            brand: { DEFAULT: '#3B48E0', light: '#6470F3', dim: '#E8EAFF' },
+            accent: '#FF5C3A',
+            jade: '#00B27A',
           },
         },
       },
     };
   </script>
   <style>
+    :root {
+      --teal: #0D9488;
+      --teal-dark: #0F766E;
+      --teal-darker: #115E59;
+      --teal-light: #14B8A6;
+      --teal-dim: #CCFBF1;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    body { font-family: 'DM Sans', sans-serif; background: #FFFFFF; color: #0D0D14; }
+    h1, h2, h3, h4, .font-display { font-family: 'Syne', sans-serif; }
     .hidden { display: none !important; }
-    .gradient-hero { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #2563EB 100%); }
-    .card-hover { transition: transform .2s, box-shadow .2s; }
-    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
-    .badge { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
-    .tag-pill { cursor: pointer; transition: background .15s; }
-    .tag-pill.active { background: #4F46E5; color: #fff; }
+
+    /* ── Navbar — Teal ── */
+    #navbar {
+      position: sticky; top: 0; z-index: 200;
+      background: #0D9488;
+      border-bottom: 1px solid rgba(0,0,0,.1);
+      box-shadow: 0 2px 12px rgba(0,0,0,.12);
+      transition: background .3s;
+    }
+    #navbar.scrolled { background: #0F766E; box-shadow: 0 4px 20px rgba(0,0,0,.18); }
+
+    /* ── Profile dropdown ── */
+    #profile-dropdown {
+      position: absolute; right: 0; top: calc(100% + 10px);
+      background: #fff;
+      border: 1px solid rgba(13,13,20,.09);
+      border-radius: 16px;
+      box-shadow: 0 20px 60px rgba(13,13,20,.14);
+      min-width: 220px;
+      overflow: hidden;
+      opacity: 0; transform: translateY(-8px) scale(.97);
+      transition: opacity .18s ease, transform .18s ease;
+      pointer-events: none;
+    }
+    #profile-dropdown.open {
+      opacity: 1; transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    /* ── Hero — full-width teal gradient ── */
+    .hero-wrap {
+      position: relative; overflow: hidden;
+      background: linear-gradient(135deg, #0F766E 0%, #0D9488 55%, #14B8A6 100%);
+    }
+    .hero-mesh {
+      position: absolute; inset: 0; z-index: 0; pointer-events: none;
+      background:
+        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,255,255,.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(20,184,166,.2) 0%, transparent 50%),
+        radial-gradient(ellipse 45% 40% at 60% 85%, rgba(249,115,22,.12) 0%, transparent 50%);
+    }
+    .hero-grid-bg {
+      position: absolute; inset: 0; z-index: 1; pointer-events: none;
+      background-image:
+        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
+      background-size: 48px 48px;
+      mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, black 20%, transparent 75%);
+    }
+    .orb { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; animation: orbFloat 9s ease-in-out infinite; }
+    .orb-1 { width: 280px; height: 280px; background: rgba(255,255,255,.08); top: 8%; left: 2%; animation-delay: 0s; }
+    .orb-2 { width: 200px; height: 200px; background: rgba(0,178,122,.12); top: 55%; right: 5%; animation-delay: -3.5s; }
+    .orb-3 { width: 160px; height: 160px; background: rgba(249,115,22,.1); bottom: 10%; left: 40%; animation-delay: -7s; }
+    @keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.05)} }
+
+    .hero-content {
+      position: relative; z-index: 10;
+      max-width: 1200px; margin: 0 auto;
+      padding: 5rem 1.5rem 4rem;
+      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
+    }
+    @media (max-width: 900px) { .hero-content { grid-template-columns: 1fr; } }
+
+    .hero-pill {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: rgba(255,255,255,.1); color: rgba(255,255,255,.88);
+      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
+      letter-spacing: .1em; text-transform: uppercase;
+      padding: 7px 16px; border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px);
+    }
+    .pill-dot { width: 6px; height: 6px; background: #00B27A; border-radius: 50%; box-shadow: 0 0 6px #00B27A; animation: blink 2s ease infinite; }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
+
+    .hero-title {
+      font-family: 'Syne', sans-serif;
+      font-size: clamp(2.7rem, 5vw, 4.4rem);
+      font-weight: 800;
+      line-height: 1.04;
+      letter-spacing: -.04em;
+      color: #fff;
+    }
+    .hero-title .gt { background: linear-gradient(135deg, #fff 0%, #CCFBF1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
+    .hero-title span.line2 { display: block; }
+
+    .btn-primary {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: #fff; color: var(--teal-dark);
+      font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem;
+      padding: 14px 26px; border-radius: 12px;
+      transition: background .18s, transform .14s, box-shadow .18s;
+      border: none; cursor: pointer;
+    }
+    .btn-primary:hover { background: #F0FDFA; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
+
+    .btn-outline {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
+      font-family: 'Syne', sans-serif; font-weight: 600; font-size: .9rem;
+      padding: 13px 26px; border-radius: 12px;
+      border: 1.5px solid rgba(255,255,255,.2);
+      transition: background .18s, border-color .18s;
+      cursor: pointer;
+    }
+    .btn-outline:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
+
+    /* ── Hero visual card ── */
+    .hero-visual {
+      position: relative;
+    }
+    .hero-card {
+      background: rgba(255,255,255,.08);
+      border-radius: 24px;
+      border: 1px solid rgba(255,255,255,.15);
+      box-shadow: 0 40px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
+      padding: 2rem;
+      position: relative;
+      overflow: hidden;
+      backdrop-filter: blur(16px);
+    }
+    .hero-card::before {
+      content: '';
+      position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      background: linear-gradient(90deg, #fff 0%, #14B8A6 50%, #F97316 100%);
+      opacity: .6;
+    }
+    .enc-badge {
+      display: inline-flex; align-items: center; gap: 6px;
+      background: rgba(0,178,122,.2); color: #4ade80;
+      font-size: .75rem; font-weight: 600; font-family: 'Syne', sans-serif;
+      padding: 4px 12px; border-radius: 999px;
+      border: 1px solid rgba(0,178,122,.3);
+    }
+    .mini-activity {
+      display: flex; align-items: center; gap: 12px;
+      padding: 11px 13px; border-radius: 12px;
+      background: rgba(255,255,255,.06); margin-top: 9px;
+      border: 1px solid rgba(255,255,255,.06);
+      transition: background .15s;
+    }
+    .mini-activity:hover { background: rgba(255,255,255,.1); }
+    .mini-dot { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
+
+    /* ── Stat strip ── */
+    .stat-strip {
+      display: grid; grid-template-columns: repeat(3, 1fr);
+      background: #0F172A; color: #fff;
+      border-radius: 20px; overflow: hidden;
+    }
+    .stat-item { padding: 2rem; border-right: 1px solid rgba(255,255,255,.07); }
+    .stat-item:last-child { border-right: none; }
+    .stat-num { font-family: 'Syne', sans-serif; font-size: 2.4rem; font-weight: 800; }
+    .stat-label { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 2px; }
+
+    /* ── Section label ── */
+    .section-label {
+      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
+      letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
+      margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
+    }
+    .section-label::before { content: ''; width: 18px; height: 2px; background: var(--teal); border-radius: 1px; }
+
+    /* ── Activity Cards ── */
+    .act-card {
+      background: #fff;
+      border-radius: 20px;
+      border: 1px solid #E2E8F0;
+      padding: 1.5rem;
+      display: flex; flex-direction: column; gap: 1rem;
+      transition: transform .2s, box-shadow .2s, border-color .2s;
+      position: relative; overflow: hidden;
+    }
+    .act-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 20px 50px rgba(13,13,20,.1);
+      border-color: rgba(13,148,136,.25);
+    }
+    .act-card::after {
+      content: ''; position: absolute; inset: 0;
+      border-radius: 20px;
+      opacity: 0; transition: opacity .2s;
+      background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(13,148,136,.05) 0%, transparent 60%);
+      pointer-events: none;
+    }
+    .act-card:hover::after { opacity: 1; }
+
+    .type-badge {
+      display: inline-flex; align-items: center; gap: 4px;
+      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
+      padding: 4px 10px; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase;
+    }
+    .fmt-badge {
+      display: inline-flex; align-items: center;
+      font-size: .72rem; font-weight: 500;
+      padding: 3px 10px; border-radius: 999px;
+    }
+    .tag-chip {
+      font-size: .7rem; font-weight: 500;
+      padding: 3px 10px; border-radius: 999px;
+      background: #F1F5F9; color: #64748B;
+      border: 1px solid #E2E8F0;
+    }
+
+    /* ── Tag cloud ── */
+    .tag-pill {
+      cursor: pointer;
+      font-family: 'Syne', sans-serif; font-size: .72rem; font-weight: 600;
+      padding: 6px 14px; border-radius: 999px;
+      border: 1.5px solid #E2E8F0;
+      background: #fff; color: #64748B;
+      transition: all .15s;
+    }
+    .tag-pill:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }
+    .tag-pill.active { background: var(--teal); color: #fff; border-color: var(--teal); }
+
+    /* ── Filters ── */
+    .filter-input {
+      background: #fff; border: 1.5px solid #E2E8F0;
+      border-radius: 12px; padding: 10px 16px;
+      font-family: 'DM Sans', sans-serif; font-size: .875rem; color: #0D0D14;
+      outline: none; transition: border-color .15s;
+    }
+    .filter-input:focus { border-color: var(--teal); }
+
+    /* ── Features section ── */
+    .feat-card {
+      background: #fff; border-radius: 20px;
+      border: 1px solid rgba(13,13,20,.07);
+      padding: 2rem;
+    }
+    .feat-icon {
+      width: 48px; height: 48px; border-radius: 14px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.4rem; margin-bottom: 1rem;
+    }
+
+    /* ── CTA band ── */
+    .cta-band {
+      background: #0F172A; border-radius: 24px;
+      padding: 3.5rem; color: #fff;
+      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
+      flex-wrap: wrap;
+    }
+
+    /* ── Footer ── */
+    footer { background: #0F172A; color: rgba(255,255,255,.45); }
+    .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
+    @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
+    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
+    .fc-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }
+    .fc-link { display: block; font-size: .82rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: .55rem; transition: color .15s; }
+    .fc-link:hover { color: rgba(255,255,255,.8); }
+    .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
+    .f-social { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
+    .f-social:hover { background: var(--teal-dim); color: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
+    .f-social svg, .f-social i { font-size: 1rem; }
+
+    /* ── Skeleton pulse ── */
+    @keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
+    .skel { background: rgba(13,13,20,.06); border-radius: 12px; animation: pulse 1.4s ease infinite; }
+
+    /* ── Page fade-in ── */
+    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
+    .fade-up { animation: fadeUp .55s ease both; }
+    .fade-up-2 { animation: fadeUp .55s .12s ease both; }
+    .fade-up-3 { animation: fadeUp .55s .22s ease both; }
   </style>
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans">
-
-<!-- ── Navbar ─────────────────────────────────────────────────────────── -->
-<nav class="bg-white shadow-sm sticky top-0 z-50">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
-    <a href="/" class="flex items-center gap-2">
-      <img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
-      <span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
+<body>
+
+<!-- ════════════════════════════════════ NAVBAR ══ -->
+<nav id="navbar">
+  <div style="max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;">
+
+    <!-- Logo -->
+    <a href="/" style="display:flex;align-items:center;gap:10px;text-decoration:none;">
+      <img src="./images/logo.png" alt="Alpha One Labs" style="width:38px;height:38px;border-radius:8px;"
+           onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
+      <div style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+      </div>
+      <span style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;">Alpha One Labs</span>
     </a>
-    <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
-      <a href="/" class="text-brand hover:text-brand-dark">Activities</a>
-      <a href="/dashboard.html" class="hover:text-brand">Dashboard</a>
-      <a href="/teach.html" class="hover:text-brand">Host</a>
+
+    <!-- Center nav -->
+    <div style="display:flex;align-items:center;gap:2px;">
+      <a href="/" style="font-size:.84rem;font-weight:600;color:#fff;padding:6px 14px;border-radius:8px;text-decoration:none;background:rgba(255,255,255,.18);">Activities</a>
+      <a href="/dashboard.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;text-decoration:none;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Dashboard</a>
+      <a href="/teach.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;text-decoration:none;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Host</a>
     </div>
-    <div id="nav-auth" class="flex items-center gap-3"></div>
+
+    <!-- Auth area -->
+    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;"></div>
   </div>
 </nav>
 
-<!-- ── Hero ───────────────────────────────────────────────────────────── -->
-<header class="gradient-hero text-white py-20 px-4">
-  <div class="max-w-4xl mx-auto text-center">
-    <p class="text-indigo-200 text-sm font-semibold tracking-widest uppercase mb-3">🔒 Fully Encrypted · Privacy-First</p>
-    <h1 class="text-4xl sm:text-5xl font-extrabold leading-tight mb-4">
-      Learn Together.<br/>Grow Together.
-    </h1>
-    <p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
-      Discover courses, meetups, workshops, and study groups — all on a platform where every piece of user data is encrypted at rest.
-    </p>
-    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-      <a href="/login.html?tab=register" class="bg-white text-brand font-bold px-8 py-3 rounded-xl shadow hover:bg-indigo-50 transition">Join Free</a>
-      <a href="#activities" class="border border-white/50 text-white font-semibold px-8 py-3 rounded-xl hover:bg-white/10 transition">Browse Activities</a>
+<!-- ════════════════════════════════════ HERO ══ -->
+<section class="hero-wrap">
+  <div class="hero-mesh"></div>
+  <div class="hero-grid-bg"></div>
+  <div class="orb orb-1"></div>
+  <div class="orb orb-2"></div>
+  <div class="orb orb-3"></div>
+
+  <div class="hero-content">
+    <!-- Left copy -->
+    <div class="fade-up">
+      <div style="margin-bottom:1.5rem;">
+        <span class="hero-pill"><span class="pill-dot"></span>Open Source · Encrypted · Community-Driven</span>
+      </div>
+      <h1 class="hero-title">
+        Where Curiosity<span class="line2"><span class="gt">Meets Knowledge</span></span>
+      </h1>
+      <p style="font-size:1.05rem;color:rgba(255,255,255,.62);line-height:1.7;margin:1.5rem 0 2rem;max-width:460px;">
+        Discover courses, meetups, and workshops on a platform where every user record is encrypted — your data is yours, always.
+      </p>
+      <div style="display:flex;gap:12px;flex-wrap:wrap;">
+        <a href="/login.html?tab=register" class="btn-primary">Start Learning Free <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="#0D9488" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+        <a href="#activities" class="btn-outline">Browse Activities</a>
+      </div>
+      <div style="display:flex;align-items:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
+          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+          100% Data Encrypted
+        </div>
+        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
+          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+          No ads · No tracking
+        </div>
+        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
+          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+          GSoC 2026 Participant
+        </div>
+      </div>
+    </div>
+
+    <!-- Right visual -->
+    <div class="hero-visual fade-up-2">
+      <div class="hero-card">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;">
+          <div>
+            <p style="font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;color:#fff;">Live Activities</p>
+            <p style="font-size:.74rem;color:rgba(255,255,255,.38);margin-top:2px;">Updated in real-time</p>
+          </div>
+          <span class="enc-badge">
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><rect x="2" y="4" width="6" height="5.5" rx="1" stroke="#4ade80" stroke-width="1.2"/><path d="M3 4V3a2 2 0 0 1 4 0v1" stroke="#4ade80" stroke-width="1.2"/></svg>
+            Encrypted
+          </span>
+        </div>
+        <div class="mini-activity">
+          <div class="mini-dot" style="background:rgba(59,72,224,.2);">📚</div>
+          <div style="flex:1;min-width:0;">
+            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">Python for Beginners</p>
+            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Alice Chen · 4 enrolled</p>
+          </div>
+          <span style="font-size:.65rem;background:rgba(59,72,224,.25);color:#a5b4fc;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Course</span>
+        </div>
+        <div class="mini-activity">
+          <div class="mini-dot" style="background:rgba(249,115,22,.18);">🤝</div>
+          <div style="flex:1;min-width:0;">
+            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">JS Developers Meetup</p>
+            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Bob Martinez · Monthly</p>
+          </div>
+          <span style="font-size:.65rem;background:rgba(249,115,22,.2);color:#fb923c;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Meetup</span>
+        </div>
+        <div class="mini-activity">
+          <div class="mini-dot" style="background:rgba(0,178,122,.18);">🔧</div>
+          <div style="flex:1;min-width:0;">
+            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">Data Science Workshop</p>
+            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Alice Chen · 3 sessions</p>
+          </div>
+          <span style="font-size:.65rem;background:rgba(0,178,122,.2);color:#34d399;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Workshop</span>
+        </div>
+        <!-- footer strip -->
+        <div style="margin-top:10px;padding:10px 13px;border-radius:10px;background:rgba(0,178,122,.08);display:flex;align-items:center;gap:8px;border:1px solid rgba(0,178,122,.15);">
+          <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="2.5" y="6" width="9" height="7" rx="1.5" stroke="#00B27A" stroke-width="1.3"/><path d="M4 6V4.5a3 3 0 1 1 6 0V6" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round"/></svg>
+          <span style="font-family:'Syne',sans-serif;font-size:.66rem;font-weight:600;color:#4ade80;">All PII encrypted at rest — PBKDF2 · HMAC · AES-GCM</span>
+        </div>
+        <!-- floating badge -->
+        <div style="position:absolute;top:-14px;right:24px;background:#F97316;color:#fff;font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;padding:5px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(249,115,22,.4);">
+          🔥 Open Source
+        </div>
+      </div>
     </div>
   </div>
-</header>
-
-<!-- ── Stats bar ──────────────────────────────────────────────────────── -->
-<div class="bg-white border-b border-slate-100">
-  <div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-3 divide-x divide-slate-100">
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-brand" id="stat-activities">—</p>
-      <p class="text-slate-500 text-sm mt-1">Activities</p>
+
+  <!-- Wave transition to white body -->
+  <div style="position:relative;z-index:10;margin-top:auto;">
+    <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;">
+      <path d="M0 60V28C360 2 720 58 1080 28C1260 14 1380 20 1440 14V60H0Z" fill="#FFFFFF"/>
+    </svg>
+  </div>
+</section>
+
+<!-- ════════════════════════════════════ STATS ══ -->
+<section style="max-width:1200px;margin:3rem auto 0;padding:0 1.5rem;">
+  <div class="stat-strip fade-up-3">
+    <div class="stat-item">
+      <p class="stat-num" id="stat-activities">—</p>
+      <p class="stat-label">Active Activities</p>
     </div>
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-purple-600" id="stat-members">—</p>
-      <p class="text-slate-500 text-sm mt-1">Participants</p>
+    <div class="stat-item">
+      <p class="stat-num" id="stat-members">—</p>
+      <p class="stat-label">Total Participants</p>
     </div>
-    <div class="text-center px-4">
-      <p class="text-3xl font-extrabold text-emerald-600">🔒</p>
-      <p class="text-slate-500 text-sm mt-1">Encrypted at Rest</p>
+    <div class="stat-item">
+      <div style="display:flex;align-items:center;gap:8px;">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="4" y="9" width="12" height="10" rx="2" stroke="#00B27A" stroke-width="1.8"/><path d="M7 9V6a3 3 0 0 1 6 0v3" stroke="#00B27A" stroke-width="1.8" stroke-linecap="round"/></svg>
+        <p class="stat-num" style="color:#00B27A;">100%</p>
+      </div>
+      <p class="stat-label">Data Encrypted at Rest</p>
     </div>
   </div>
-</div>
+</section>
 
-<!-- ── Activity Browser ───────────────────────────────────────────────── -->
-<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" id="activities">
-
-  <!-- Search + Filters -->
-  <div class="flex flex-col sm:flex-row gap-3 mb-4">
-    <input id="search" type="text" placeholder="🔍  Search activities…"
-      class="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" />
-    <select id="filter-type"
-      class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
-      <option value="">All Types</option>
-      <option value="course">📚 Course</option>
-      <option value="meetup">🤝 Meetup</option>
-      <option value="workshop">🔧 Workshop</option>
-      <option value="seminar">🎤 Seminar</option>
-      <option value="other">✨ Other</option>
-    </select>
-    <select id="filter-format"
-      class="px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand/40">
-      <option value="">All Formats</option>
-      <option value="live">🎥 Live</option>
-      <option value="self_paced">⏱ Self-paced</option>
-      <option value="hybrid">🔀 Hybrid</option>
-    </select>
+<!-- ════════════════════════════════════ ACTIVITY BROWSER ══ -->
+<section style="max-width:1200px;margin:5rem auto;padding:0 1.5rem;" id="activities">
+
+  <div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;">
+    <div>
+      <p class="section-label">Browse</p>
+      <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;">All Activities</h2>
+    </div>
+    <div style="display:flex;gap:10px;flex-wrap:wrap;">
+      <input id="search" type="text" placeholder="Search activities…" class="filter-input" style="min-width:220px;" />
+      <select id="filter-type" class="filter-input">
+        <option value="">All Types</option>
+        <option value="course">📚 Course</option>
+        <option value="meetup">🤝 Meetup</option>
+        <option value="workshop">🔧 Workshop</option>
+        <option value="seminar">🎤 Seminar</option>
+        <option value="other">✨ Other</option>
+      </select>
+      <select id="filter-format" class="filter-input">
+        <option value="">All Formats</option>
+        <option value="live">🎥 Live</option>
+        <option value="self_paced">⏱ Self-paced</option>
+        <option value="hybrid">🔀 Hybrid</option>
+      </select>
+    </div>
   </div>
 
   <!-- Tag cloud -->
-  <div id="tag-cloud" class="flex flex-wrap gap-2 mb-8"></div>
+  <div id="tag-cloud" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem;"></div>
 
-  <!-- Activity grid -->
-  <div id="activity-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
-    <div class="bg-white rounded-2xl shadow-sm p-6 animate-pulse h-52"></div>
+  <!-- Grid -->
+  <div id="activity-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;">
+    <div class="skel" style="height:220px;"></div>
+    <div class="skel" style="height:220px;"></div>
+    <div class="skel" style="height:220px;"></div>
   </div>
 
-  <p id="no-results" class="hidden text-center text-slate-400 py-16 text-lg">No activities found matching your filters.</p>
-</main>
+  <p id="no-results" class="hidden" style="text-align:center;color:rgba(13,13,20,.35);padding:5rem 0;font-size:1.05rem;">
+    No activities match your filters.
+  </p>
+</section>
+
+<!-- ════════════════════════════════════ FEATURES ══ -->
+<section style="background:#0D0D14;padding:5rem 1.5rem;">
+  <div style="max-width:1200px;margin:0 auto;">
+    <p class="section-label" style="color:rgba(255,255,255,.3);">Platform</p>
+    <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;color:#fff;margin-bottom:2.5rem;">Why Alpha One Labs?</h2>
+    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;">
+
+      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+        <div class="feat-icon" style="background:rgba(59,72,224,.2);">🔐</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Zero Plaintext PII</h3>
+        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Every user field is encrypted. HMAC blind indexes enable fast lookups with zero plaintext stored in indexed columns.</p>
+      </div>
+
+      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+        <div class="feat-icon" style="background:rgba(255,92,58,.15);">⚡</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Edge-Native</h3>
+        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Cloudflare Python Workers + D1 — globally distributed, sub-10ms cold starts, entirely serverless.</p>
+      </div>
+
+      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+        <div class="feat-icon" style="background:rgba(0,178,122,.15);">🗓️</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Flexible Activities</h3>
+        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Courses, meetups, workshops — with sessions, attendance tracking, enrollment roles, and flexible tags.</p>
+      </div>
+
+      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+        <div class="feat-icon" style="background:rgba(255,255,255,.08);">🌍</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Open Source</h3>
+        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Fully open source and community-driven. Fork it, self-host it, contribute — your platform, your rules.</p>
+      </div>
 
-<!-- ── Features strip ─────────────────────────────────────────────────── -->
-<section class="bg-white py-16 border-t border-slate-100">
-  <div class="max-w-5xl mx-auto px-4 text-center mb-10">
-    <h2 class="text-2xl font-bold text-slate-800">Why Alpha One Labs?</h2>
-  </div>
-  <div class="max-w-5xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8">
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">🔐</div>
-      <h3 class="font-bold text-slate-700 mb-2">Zero Plaintext PII</h3>
-      <p class="text-slate-500 text-sm">Every user field — name, email, username, role — is encrypted. HMAC blind indexes enable fast lookups without ever storing plaintext.</p>
     </div>
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">⚡</div>
-      <h3 class="font-bold text-slate-700 mb-2">Edge-Native</h3>
-      <p class="text-slate-500 text-sm">Runs on Cloudflare Python Workers + D1 — globally distributed, fast, and serverless.</p>
+  </div>
+</section>
+
+<!-- ════════════════════════════════════ CTA ══ -->
+<section style="max-width:1200px;margin:5rem auto;padding:0 1.5rem;">
+  <div class="cta-band">
+    <div>
+      <p style="font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.5rem;">Get Started</p>
+      <h2 style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.025em;">Ready to start learning?</h2>
+      <p style="color:rgba(255,255,255,.5);font-size:.9rem;margin-top:.5rem;">Join the community. Your data stays private.</p>
     </div>
-    <div class="text-center p-6">
-      <div class="text-4xl mb-4">🗓️</div>
-      <h3 class="font-bold text-slate-700 mb-2">Flexible Activities</h3>
-      <p class="text-slate-500 text-sm">Courses, meetups, workshops — with optional scheduled sessions, attendance tracking, and flexible tags.</p>
+    <div style="display:flex;gap:12px;flex-wrap:wrap;">
+      <a href="/login.html?tab=register" style="display:inline-flex;align-items:center;gap:8px;background:#0D9488;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;padding:14px 26px;border-radius:12px;text-decoration:none;transition:background .18s;" onmouseover="this.style.background='#0F766E'" onmouseout="this.style.background='#0D9488'">Create Free Account</a>
+      <a href="#activities" style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;padding:14px 26px;border-radius:12px;text-decoration:none;border:1px solid rgba(255,255,255,.15);transition:background .18s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='rgba(255,255,255,.08)'">Browse Activities</a>
     </div>
   </div>
 </section>
 
-<!-- ── Footer ─────────────────────────────────────────────────────────── -->
-<footer class="bg-slate-800 text-slate-400 py-8 text-center text-sm">
-  <p>© 2024–2026 Alpha One Labs · Cloudflare Python Workers + D1 · All user data encrypted at rest</p>
+<!-- ════════════════════════════════════ FOOTER ══ -->
+<footer>
+  <div class="footer-grid">
+    <!-- Brand column -->
+    <div>
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
+        <img src="https://alphaonelabs.com/static/images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
+        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
+      </div>
+      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
+      <!-- OSL logo -->
+      <div style="margin-bottom:1.25rem;">
+        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
+        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
+      </div>
+      <!-- Social icons -->
+      <div style="display:flex;flex-wrap:wrap;gap:8px;">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
+          <img src="https://alphaonelabs.com/static/images/x-logo.svg" alt="X" style="width:14px;height:14px;filter:invert(1);opacity:.55;" onerror="this.parentElement.innerHTML='<svg width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'currentColor\'><path d=\'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z\'/></svg>'">
+        </a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
+          <i class="fab fa-discord" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
+          <i class="fab fa-instagram" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
+          <i class="fab fa-facebook" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
+          <i class="fab fa-youtube" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
+          <i class="fab fa-github" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
+          <i class="fab fa-slack" style="font-size:.95rem;"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Learning column -->
+    <div>
+      <p class="fc-title">Learning</p>
+      <a href="#activities" class="fc-link">Activities</a>
+      <a href="/dashboard.html" class="fc-link">Dashboard</a>
+      <a href="/teach.html" class="fc-link">Host an Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
+    </div>
+
+    <!-- Community column -->
+    <div>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
+    </div>
+
+    <!-- About column -->
+    <div>
+      <p class="fc-title">About</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
+    </div>
+  </div>
+
+  <!-- Bottom bar -->
+  <div class="footer-bottom">
+    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
+    <div style="display:flex;gap:1.25rem;">
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    </div>
+  </div>
 </footer>
 
+<!-- ════════════════════════════════════ PROFILE DROPDOWN ══ -->
+<div id="profile-dropdown">
+  <div id="dropdown-header" style="padding:16px 18px;border-bottom:1px solid rgba(13,13,20,.07);">
+    <div style="display:flex;align-items:center;gap:12px;">
+      <div id="dropdown-avatar" style="width:38px;height:38px;background:#E8EAFF;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.9rem;color:#3B48E0;"></div>
+      <div>
+        <p id="dropdown-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;color:#0D0D14;"></p>
+        <p id="dropdown-role" style="font-size:.72rem;color:rgba(13,13,20,.4);margin-top:1px;"></p>
+      </div>
+    </div>
+  </div>
+  <div style="padding:8px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0D0D14;font-size:.85rem;font-weight:500;transition:background .15s;" onmouseover="this.style.background='#F7F6F3'" onmouseout="this.style.background='transparent'">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="#0D0D14" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="#0D0D14" stroke-width="1.4" stroke-linecap="round"/></svg>
+      View Profile
+    </a>
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0D0D14;font-size:.85rem;font-weight:500;transition:background .15s;" onmouseover="this.style.background='#F7F6F3'" onmouseout="this.style.background='transparent'">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/></svg>
+      Dashboard
+    </a>
+  </div>
+  <div style="padding:8px;border-top:1px solid rgba(13,13,20,.07);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.85rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round"/><path d="M10 11l3-3-3-3M13 8H6" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      Sign Out
+    </button>
+  </div>
+</div>
+
 <script>
   const API = '';
 
-  // ── Auth nav
+  // Navbar scroll shadow
+  window.addEventListener('scroll', () => {
+    document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 8);
+  });
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+  function esc(s) {
+    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  // ── Auth nav ─────────────────────────────────────────────────────────────
   function updateNav() {
     const token = localStorage.getItem('edu_token');
     const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
     const nav   = document.getElementById('nav-auth');
+    const dd    = document.getElementById('profile-dropdown');
+
     if (token && user) {
+      const initials = (user.name || user.username || '?').slice(0,2).toUpperCase();
       nav.innerHTML = `
-        <span class="text-slate-600 text-sm hidden sm:block">👋 ${esc(user.username)}</span>
-        <a href="/dashboard.html" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Dashboard</a>
-        <button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500 transition">Logout</button>`;
+        <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='transparent'">Dashboard</a>
+        <button id="profile-btn" onclick="toggleDropdown(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(initials)}</button>`;
+
+      // populate dropdown
+      document.getElementById('dropdown-avatar').textContent = initials;
+      document.getElementById('dropdown-name').textContent   = user.name || user.username;
+      document.getElementById('dropdown-role').textContent   = user.role || 'member';
+
+      // re-attach dropdown to nav
+      nav.appendChild(dd);
     } else {
       nav.innerHTML = `
-        <a href="/login.html" class="text-slate-600 text-sm font-medium hover:text-brand">Login</a>
-        <a href="/login.html?tab=register" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Register</a>`;
+        <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Login</a>
+        <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
     }
   }
-  function logout() { localStorage.removeItem('edu_token'); localStorage.removeItem('edu_user'); updateNav(); }
-  function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 
-  // ── Colours
+  let dropdownOpen = false;
+  function toggleDropdown(e) {
+    e.stopPropagation();
+    dropdownOpen = !dropdownOpen;
+    document.getElementById('profile-dropdown').classList.toggle('open', dropdownOpen);
+  }
+  document.addEventListener('click', () => {
+    if (dropdownOpen) {
+      dropdownOpen = false;
+      const dd = document.getElementById('profile-dropdown');
+      if (dd) dd.classList.remove('open');
+    }
+  });
+
+  function logout() {
+    localStorage.removeItem('edu_token');
+    localStorage.removeItem('edu_user');
+    updateNav();
+    window.location.reload();
+  }
+
+  // ── Colours ───────────────────────────────────────────────────────────────
   const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
-  const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
-  const fmtColor  = { live:'bg-red-100 text-red-700', self_paced:'bg-emerald-100 text-emerald-700', hybrid:'bg-purple-100 text-purple-700' };
+  const typeBg    = { course:'#E8EAFF', meetup:'#FFF0ED', workshop:'#F0FDF4', seminar:'#F0FDFC', other:'#F7F6F3' };
+  const typeClr   = { course:'#3B48E0', meetup:'#FF5C3A', workshop:'#00B27A', seminar:'#0D9488', other:'#6b7280' };
+  const fmtBg     = { live:'#FFF0ED', self_paced:'#F0FDF4', hybrid:'#FAF0FF' };
+  const fmtClr    = { live:'#FF5C3A', self_paced:'#00B27A', hybrid:'#9333ea' };
   const fmtLabel  = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
-  const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
+  const schedLabel= { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
 
   function actCard(a) {
-    const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600';
-    const fc = fmtColor[a.format]  || 'bg-slate-100 text-slate-600';
-    const ic = typeIcon[a.type] || '✨';
-    const desc = a.description.length > 110 ? a.description.slice(0, 110) + '…' : a.description;
-    const tags = (a.tags || []).slice(0, 3).map(t =>
-      `<span class="badge bg-slate-100 text-slate-500">${esc(t)}</span>`).join('');
+    const bg  = typeBg[a.type]  || '#F7F6F3';
+    const clr = typeClr[a.type] || '#6b7280';
+    const ic  = typeIcon[a.type] || '✨';
+    const fb  = fmtBg[a.format]  || '#F7F6F3';
+    const fc  = fmtClr[a.format] || '#6b7280';
+    const desc= (a.description || '').length > 100
+              ? a.description.slice(0,100) + '…'
+              : (a.description || '');
+    const tags = (a.tags || []).slice(0, 3)
+      .map(t => `<span class="tag-chip">${esc(t)}</span>`).join('');
+
     return `
-      <article class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 card-hover flex flex-col gap-3">
-        <div class="flex items-start justify-between gap-2">
-          <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)}</h3>
-          <span class="badge ${tc} shrink-0">${esc(a.type)}</span>
+      <article class="act-card" onmousemove="this.style.setProperty('--mx',event.offsetX/this.offsetWidth*100+'%');this.style.setProperty('--my',event.offsetY/this.offsetHeight*100+'%')">
+        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;">
+          <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;line-height:1.3;color:#0D0D14;">
+            ${ic} ${esc(a.title)}
+          </h3>
+          <span class="type-badge" style="background:${bg};color:${clr};white-space:nowrap;">${esc(a.type)}</span>
         </div>
-        <p class="text-slate-500 text-sm leading-relaxed flex-1">${esc(desc)}</p>
-        <div class="flex flex-wrap gap-1.5">${tags}</div>
-        <div class="flex items-center justify-between mt-auto pt-2 border-t border-slate-50 text-xs text-slate-400">
-          <div class="flex gap-2 flex-wrap">
-            <span class="badge ${fc}">${fmtLabel[a.format] || a.format}</span>
-            <span>${schedLabel[a.schedule_type] || a.schedule_type}</span>
-            <span>👥 ${a.participant_count}</span>
-            ${a.session_count ? `<span>🗓 ${a.session_count} sessions</span>` : ''}
+        <p style="font-size:.82rem;color:rgba(13,13,20,.5);line-height:1.55;flex:1;">${esc(desc)}</p>
+        <div style="display:flex;flex-wrap:wrap;gap:6px;">${tags}</div>
+        <div style="border-top:1px solid rgba(13,13,20,.06);padding-top:.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;">
+          <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
+            <span class="fmt-badge" style="background:${fb};color:${fc};">${fmtLabel[a.format] || a.format}</span>
+            <span style="font-size:.72rem;color:rgba(13,13,20,.4);">${schedLabel[a.schedule_type] || a.schedule_type}</span>
+            <span style="font-size:.72rem;color:rgba(13,13,20,.4);">👥 ${a.participant_count}</span>
+            ${a.session_count ? `<span style="font-size:.72rem;color:rgba(13,13,20,.4);">🗓 ${a.session_count}</span>` : ''}
           </div>
-          <a href="/course.html?id=${esc(a.id)}" class="text-brand font-semibold hover:underline">View →</a>
+          <a href="/course.html?id=${esc(a.id)}" style="font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;color:#0D9488;text-decoration:none;">View →</a>
         </div>
-        <p class="text-xs text-slate-400">by <span class="font-medium text-slate-500">${esc(a.host_name)}</span></p>
+        <p style="font-size:.72rem;color:rgba(13,13,20,.35);">by <span style="color:rgba(13,13,20,.55);font-weight:500;">${esc(a.host_name)}</span></p>
       </article>`;
   }
 
@@ -216,7 +779,7 @@ <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)
       if (type && a.type !== type) return false;
       if (fmt  && a.format !== fmt) return false;
       if (activeTag && !(a.tags || []).includes(activeTag)) return false;
-      if (q && !a.title.toLowerCase().includes(q) && !a.description.toLowerCase().includes(q)) return false;
+      if (q && !a.title.toLowerCase().includes(q) && !(a.description || '').toLowerCase().includes(q)) return false;
       return true;
     });
 
@@ -230,21 +793,16 @@ <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)
     const freq = {};
     activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
     const sorted = Object.entries(freq).sort((a,b) => b[1]-a[1]);
-    const cloud = document.getElementById('tag-cloud');
-    cloud.innerHTML = sorted.map(([name, cnt]) => `
-      <button onclick="toggleTag('${esc(name)}')" id="tag-${esc(name)}"
-        class="tag-pill badge bg-slate-100 text-slate-600 hover:bg-indigo-50 hover:text-brand">
-        ${esc(name)} <span class="opacity-60">${cnt}</span>
-      </button>`).join('');
+    document.getElementById('tag-cloud').innerHTML = sorted.map(([name, cnt]) =>
+      `<button onclick="toggleTag('${esc(name)}')" id="tag-${esc(name)}" class="tag-pill">
+        ${esc(name)} <span style="opacity:.5;font-size:.65rem;">${cnt}</span>
+       </button>`).join('');
   }
 
   function toggleTag(name) {
-    if (activeTag === name) {
-      activeTag = null;
-      document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
-    } else {
-      activeTag = name;
-      document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
+    activeTag = activeTag === name ? null : name;
+    document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
+    if (activeTag) {
       const el = document.getElementById(`tag-${name}`);
       if (el) el.classList.add('active');
     }
@@ -263,17 +821,20 @@ <h3 class="font-bold text-slate-800 text-base leading-snug">${ic} ${esc(a.title)
 
       buildTagCloud(allActivities);
       renderGrid();
-    } catch (e) {
+    } catch {
       document.getElementById('activity-grid').innerHTML =
-        `<p class="col-span-3 text-center text-red-400 py-16">Failed to load activities.<br>Seed sample data via <code>POST /api/seed</code>.</p>`;
+        `<p style="grid-column:1/-1;text-align:center;color:rgba(13,13,20,.35);padding:5rem 0;">
+          Failed to load activities. Seed data via <code>POST /api/seed</code>.
+        </p>`;
     }
   }
 
   ['search','filter-type','filter-format'].forEach(id =>
-    document.getElementById(id).addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
+    document.getElementById(id)
+      .addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
 
   updateNav();
   loadActivities();
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/profile.html b/public/profile.html
new file mode 100644
index 0000000..eefb27d
--- /dev/null
+++ b/public/profile.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Profile – Alpha One Labs</title>
+  <link rel="icon" type="image/png" href="https://alphaonelabs.com/static/images/logo.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <style>
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+    :root{
+      --ink:#0D0D14;
+      --paper:#FFFFFF;
+      --teal:#0D9488;
+      --teal-dark:#0F766E;
+      --teal-light:#14B8A6;
+      --teal-dim:#CCFBF1;
+      --accent:#F97316;
+      --jade:#00B27A;
+      --muted:rgba(13,13,20,.48);
+      --border:#E2E8F0;
+    }
+    html{scroll-behavior:smooth;}
+    body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;}
+    h1,h2,h3,h4{font-family:'Syne',sans-serif;}
+    .hidden{display:none!important;}
+    a{text-decoration:none;color:inherit;}
+
+    /* ─── NAVBAR (Teal) ─── */
+    #navbar{
+      position:sticky;top:0;z-index:200;
+      background:rgba(13,148,136,.96);
+      backdrop-filter:blur(18px) saturate(180%);
+      border-bottom:1px solid rgba(255,255,255,.18);
+      box-shadow:0 2px 12px rgba(0,0,0,.12);
+      transition:box-shadow .3s,background .3s;
+    }
+    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    .nav-logo{display:flex;align-items:center;gap:10px;}
+    .nav-logo img{width:38px;height:38px;border-radius:10px;}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-links{display:flex;align-items:center;gap:2px;}
+    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
+    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+
+    /* ─── PROFILE DROPDOWN ─── */
+    #profile-dropdown{
+      position:absolute;right:0;top:calc(100% + 10px);
+      background:#fff;
+      border:1px solid rgba(13,13,20,.09);
+      border-radius:16px;
+      box-shadow:0 20px 60px rgba(13,13,20,.14);
+      min-width:220px;
+      overflow:hidden;
+      opacity:0;transform:translateY(-8px) scale(.97);
+      transition:opacity .18s,transform .18s;
+      pointer-events:none;
+    }
+    #profile-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
+
+    /* ─── HERO ─── */
+    .profile-hero{
+      background:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);
+      position:relative;overflow:hidden;padding:4rem 1.5rem 0;
+    }
+    .hero-mesh{
+      position:absolute;inset:0;
+      background:
+        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,255,255,.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(20,184,166,.2) 0%, transparent 50%),
+        radial-gradient(ellipse 45% 40% at 60% 85%, rgba(249,115,22,.12) 0%, transparent 50%);
+      pointer-events:none;
+    }
+    .hero-grid-bg{
+      position:absolute;inset:0;
+      background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
+      background-size:48px 48px;
+      mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 75%);
+      pointer-events:none;
+    }
+    .hero-wave{display:block;width:100%;overflow:hidden;line-height:0;}
+    .hero-wave svg{display:block;width:100%;}
+
+    /* ─── AVATAR ─── */
+    .avatar{
+      width:88px;height:88px;
+      background:linear-gradient(135deg,var(--teal) 0%,var(--teal-light) 100%);
+      border-radius:22px;
+      display:flex;align-items:center;justify-content:center;
+      box-shadow:0 8px 32px rgba(13,148,136,.32);
+      flex-shrink:0;
+    }
+    .avatar-txt{font-family:'Syne',sans-serif;font-weight:800;font-size:1.9rem;color:#fff;}
+
+    /* ─── CARDS ─── */
+    .card{background:#fff;border-radius:20px;border:1px solid var(--border);overflow:hidden;}
+    .card-header{padding:1.1rem 1.5rem;border-bottom:1px solid rgba(13,13,20,.05);display:flex;align-items:center;justify-content:space-between;}
+    .card-header h3{font-weight:700;font-size:.87rem;}
+    .info-row{display:flex;align-items:center;padding:.95rem 1.5rem;border-bottom:1px solid rgba(13,13,20,.04);gap:.9rem;}
+    .info-row:last-child{border-bottom:none;}
+    .i-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem;}
+    .i-label{font-size:.7rem;color:rgba(13,13,20,.38);font-weight:500;}
+    .i-val{font-size:.86rem;font-weight:500;color:var(--ink);margin-top:1px;}
+
+    /* ─── STAT CARDS ─── */
+    .stat-card{
+      background:#fff;
+      border-radius:16px;
+      border:1px solid var(--border);
+      padding:1.2rem 1.5rem;
+      text-align:center;
+      transition:transform .2s,box-shadow .2s;
+    }
+    .stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
+    .s-num{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;}
+    .s-label{font-size:.74rem;color:var(--muted);margin-top:3px;}
+
+    /* ─── ACTIVITY ROW ─── */
+    .act-row{
+      display:flex;align-items:center;gap:11px;
+      padding:.95rem 1.5rem;border-bottom:1px solid rgba(13,13,20,.04);
+      transition:background .15s;
+    }
+    .act-row:last-child{border-bottom:none;}
+    .act-row:hover{background:#FAFAFA;}
+    .act-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;}
+
+    /* ─── PRIVACY CARD ─── */
+    .priv-card{
+      background:var(--ink);
+      border-radius:20px;
+      padding:1.5rem;
+    }
+    .priv-item{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
+    .priv-item:last-child{margin-bottom:0;}
+    .priv-dot{width:5px;height:5px;background:var(--jade);border-radius:50%;flex-shrink:0;}
+    .priv-item span{font-size:.74rem;color:rgba(255,255,255,.44);}
+
+    /* ─── ROLE BADGE ─── */
+    .role-badge{
+      display:inline-flex;align-items:center;gap:6px;
+      font-family:'Syne',sans-serif;
+      font-size:.7rem;font-weight:700;
+      letter-spacing:.08em;
+      text-transform:uppercase;
+      padding:5px 13px;border-radius:999px;
+    }
+
+    /* ─── ENC STRIP ─── */
+    .enc-strip{
+      display:flex;align-items:center;gap:11px;
+      background:rgba(0,178,122,.08);
+      border:1px solid rgba(0,178,122,.22);
+      border-radius:14px;
+      padding:.9rem 1.2rem;
+    }
+
+    /* ─── SKELETON ─── */
+    @keyframes shimmer{0%{background-position:-800px 0}100%{background-position:800px 0}}
+    .skel{
+      background:linear-gradient(90deg,rgba(13,13,20,.06) 25%,rgba(13,13,20,.1) 50%,rgba(13,13,20,.06) 75%);
+      background-size:800px 100%;
+      animation:shimmer 1.6s ease infinite;
+      border-radius:10px;
+    }
+
+    /* ─── REVEAL ANIMATION ─── */
+    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+    .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
+    .reveal.in{opacity:1;transform:translateY(0);}
+    .reveal.d1{transition-delay:.08s;}
+    .reveal.d2{transition-delay:.16s;}
+    .ha1{animation:fadeUp .6s .1s ease both;}
+    .ha2{animation:fadeUp .6s .2s ease both;}
+    .ha3{animation:fadeUp .6s .3s ease both;}
+
+    /* ─── SECTION LABEL ─── */
+    .s-label{
+      display:inline-flex;align-items:center;gap:8px;
+      font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;
+      letter-spacing:.12em;text-transform:uppercase;
+      color:var(--teal);margin-bottom:.5rem;
+    }
+    .s-label::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px;}
+
+    /* ─── FOOTER ─── */
+    footer { background: #0F172A; color: rgba(255,255,255,.45); }
+    .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
+    @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
+    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
+    .fc-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }
+    .fc-link { display: block; font-size: .82rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: .55rem; transition: color .15s; }
+    .fc-link:hover { color: rgba(255,255,255,.8); }
+    .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
+    .f-social { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
+    .f-social:hover { background: var(--teal-dim); color: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
+    .f-social svg, .f-social i { font-size: 1rem; }
+
+    @media(max-width:780px){.pg{grid-template-columns:1fr!important;}}
+  </style>
+</head>
+<body>
+
+<!-- ─── NAVBAR ─── -->
+<nav id="navbar">
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">
+      <img src="https://alphaonelabs.com/static/images/logo.png" alt="Alpha One Labs"
+           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
+      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+      </div>
+      <span class="nav-logo-text">Alpha One Labs</span>
+    </a>
+    <div class="nav-links">
+      <a href="/" class="nav-link">Activities</a>
+      <a href="/dashboard.html" class="nav-link">Dashboard</a>
+      <a href="/teach.html" class="nav-link">Host</a>
+    </div>
+    <div id="nav-auth"></div>
+  </div>
+</nav>
+
+<!-- ─── PROFILE DROPDOWN ─── -->
+<div id="profile-dropdown">
+  <div style="padding:15px 17px;border-bottom:1px solid rgba(13,13,20,.07);">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
+      <div><p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p><p id="dd-role" style="font-size:.7rem;color:rgba(13,13,20,.4);margin-top:1px;"></p></div>
+    </div>
+  </div>
+  <div style="padding:7px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--teal);font-size:.83rem;font-weight:600;background:var(--teal-dim);">
+      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg> View Profile
+    </a>
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink);font-size:.83rem;font-weight:500;transition:background .15s;margin-top:2px;" onmouseover="this.style.background='#F0FDFA'" onmouseout="this.style.background='transparent'">
+      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/></svg> Dashboard
+    </a>
+  </div>
+  <div style="padding:7px;border-top:1px solid rgba(13,13,20,.07);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.83rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
+      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round"/><path d="M10 11l3-3-3-3M13 8H6" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Sign Out
+    </button>
+  </div>
+</div>
+
+<!-- ─── NOT LOGGED IN ─── -->
+<div id="not-logged-in" class="hidden" style="max-width:460px;margin:8rem auto;padding:0 1.5rem;text-align:center;">
+  <div style="width:68px;height:68px;background:var(--teal-dim);border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;font-size:1.8rem;">🔐</div>
+  <h2 style="font-weight:800;font-size:1.45rem;margin-bottom:.7rem;">Sign in to view your profile</h2>
+  <p style="color:var(--muted);font-size:.88rem;margin-bottom:1.75rem;line-height:1.65;">Your profile shows your activities, enrollment history, and account details. All data is encrypted at rest.</p>
+  <a href="/login.html" style="display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;padding:12px 24px;border-radius:11px;transition:background .18s;" onmouseover="this.style.background='var(--teal-dark)'" onmouseout="this.style.background='var(--teal)'">Go to Login</a>
+</div>
+
+<!-- ─── PROFILE CONTENT ─── -->
+<div id="profile-content" class="hidden">
+
+  <!-- HERO -->
+  <div class="profile-hero">
+    <div class="hero-mesh"></div>
+    <div class="hero-grid-bg"></div>
+    <div style="max-width:1200px;margin:0 auto;position:relative;z-index:1;">
+      <div style="display:flex;align-items:flex-end;gap:1.75rem;padding-bottom:2.75rem;flex-wrap:wrap;">
+        <div class="avatar ha1">
+          <span id="prof-initials" class="avatar-txt"></span>
+        </div>
+        <div class="ha2" style="flex:1;min-width:0;">
+          <p class="s-label" style="color:rgba(255,255,255,.7);">Your Profile</p>
+          <h1 id="prof-name" style="font-family:'Syne',sans-serif;font-weight:800;font-size:2rem;color:#fff;letter-spacing:-.035em;"></h1>
+          <div id="prof-role-badge" style="margin-top:.6rem;"></div>
+        </div>
+        <div class="ha3 enc-strip">
+          <div style="width:34px;height:34px;background:rgba(0,178,122,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="8" rx="2" stroke="#00B27A" stroke-width="1.4"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="#00B27A" stroke-width="1.4" stroke-linecap="round"/></svg>
+          </div>
+          <div>
+            <p style="font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;color:#00B27A;">Data Encrypted</p>
+            <p style="font-size:.66rem;color:rgba(255,255,255,.38);margin-top:1px;">All PII encrypted at rest</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="hero-wave">
+      <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 60V28C360 2 720 58 1080 28C1260 14 1380 20 1440 14V60H0Z" fill="#FFFFFF"/>
+      </svg>
+    </div>
+  </div>
+
+  <!-- MAIN GRID -->
+  <div style="max-width:1200px;margin:2.5rem auto;padding:0 1.5rem;display:grid;grid-template-columns:320px 1fr;gap:1.5rem;align-items:start;" class="pg">
+
+    <!-- LEFT COLUMN -->
+    <div style="display:flex;flex-direction:column;gap:1.2rem;">
+
+      <div class="card reveal">
+        <div class="card-header">
+          <h3>Account Details</h3>
+        </div>
+        <div class="info-row">
+          <div class="i-icon" style="background:var(--teal-dim);">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="var(--teal)" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="var(--teal)" stroke-width="1.4" stroke-linecap="round"/></svg>
+          </div>
+          <div><p class="i-label">Username</p><p id="prof-username" class="i-val"></p></div>
+        </div>
+        <div class="info-row">
+          <div class="i-icon" style="background:#FFF0ED;">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M2 4h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4Z" stroke="#FF5C3A" stroke-width="1.4"/><path d="M2 4l6 5 6-5" stroke="#FF5C3A" stroke-width="1.4" stroke-linecap="round"/></svg>
+          </div>
+          <div><p class="i-label">Email</p><p id="prof-email" class="i-val"></p></div>
+        </div>
+        <div class="info-row">
+          <div class="i-icon" style="background:#F0FDF4;">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M8 2l1.5 3 3.5.5-2.5 2.4.6 3.5L8 9.75 4.9 11.4l.6-3.5L3 5.5 6.5 5Z" stroke="#00B27A" stroke-width="1.4" stroke-linejoin="round"/></svg>
+          </div>
+          <div><p class="i-label">Role</p><p id="prof-role-text" class="i-val" style="text-transform:capitalize;"></p></div>
+        </div>
+        <div class="info-row">
+          <div class="i-icon" style="background:#F1F5F9;">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="#6b7280" stroke-width="1.4"/><path d="M5 2v2M11 2v2M2 7h12" stroke="#6b7280" stroke-width="1.4" stroke-linecap="round"/></svg>
+          </div>
+          <div><p class="i-label">Member Since</p><p id="prof-joined" class="i-val"></p></div>
+        </div>
+        <div class="info-row">
+          <div class="i-icon" style="background:#F1F5F9;">
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="3" y="6" width="10" height="8" rx="2" stroke="#6b7280" stroke-width="1.4"/><path d="M5 6V4a3 3 0 0 1 6 0v2" stroke="#6b7280" stroke-width="1.4" stroke-linecap="round"/></svg>
+          </div>
+          <div><p class="i-label">User ID</p><p id="prof-id" class="i-val" style="font-size:.72rem;font-family:monospace;color:rgba(13,13,20,.38);word-break:break-all;"></p></div>
+        </div>
+      </div>
+
+      <div class="priv-card reveal d1">
+        <div style="display:flex;align-items:center;gap:10px;margin-bottom:1rem;">
+          <div style="width:32px;height:32px;background:rgba(0,178,122,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2.5" y="6" width="9" height="7" rx="1.5" stroke="#00B27A" stroke-width="1.3"/><path d="M4 6V4.5a3 3 0 1 1 6 0V6" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round"/></svg>
+          </div>
+          <p style="font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;color:#fff;">Privacy & Encryption</p>
+        </div>
+        <div class="priv-item"><div class="priv-dot"></div><span>Username & email encrypted at rest</span></div>
+        <div class="priv-item"><div class="priv-dot"></div><span>Password: PBKDF2-SHA256 hashed</span></div>
+        <div class="priv-item"><div class="priv-dot"></div><span>Auth tokens: HMAC-SHA256 signed</span></div>
+        <div class="priv-item"><div class="priv-dot"></div><span>HMAC blind indexes for lookups</span></div>
+      </div>
+
+    </div>
+
+    <!-- RIGHT COLUMN -->
+    <div style="display:flex;flex-direction:column;gap:1.2rem;">
+
+      <!-- STATS -->
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="reveal">
+        <div class="stat-card">
+          <p class="s-num" id="stat-hosted" style="color:var(--teal);">0</p>
+          <p class="s-label">Hosted</p>
+        </div>
+        <div class="stat-card">
+          <p class="s-num" id="stat-joined" style="color:var(--accent);">0</p>
+          <p class="s-label">Joined</p>
+        </div>
+        <div class="stat-card">
+          <p class="s-num" id="stat-total" style="color:var(--jade);">0</p>
+          <p class="s-label">Total</p>
+        </div>
+      </div>
+
+      <!-- HOSTED ACTIVITIES -->
+      <div class="card reveal d1">
+        <div class="card-header">
+          <h3>Hosted Activities</h3>
+          <a href="/teach.html" style="font-size:.73rem;font-weight:600;color:var(--teal);font-family:'Syne',sans-serif;">+ New</a>
+        </div>
+        <div id="hosted-list">
+          <div style="padding:1.4rem;"><div class="skel" style="height:13px;width:60%;margin:0 auto .65rem;"></div><div class="skel" style="height:13px;width:40%;margin:0 auto;"></div></div>
+        </div>
+      </div>
+
+      <!-- JOINED ACTIVITIES -->
+      <div class="card reveal d2">
+        <div class="card-header">
+          <h3>Joined Activities</h3>
+        </div>
+        <div id="joined-list">
+          <div style="padding:1.4rem;"><div class="skel" style="height:13px;width:60%;margin:0 auto .65rem;"></div><div class="skel" style="height:13px;width:40%;margin:0 auto;"></div></div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- ─── FOOTER ─── -->
+<footer>
+  <div class="footer-grid">
+    <!-- Brand column -->
+    <div>
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
+        <img src="./images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
+        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
+      </div>
+      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
+      <!-- OSL logo -->
+      <div style="margin-bottom:1.25rem;">
+        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
+        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
+      </div>
+      <!-- Social icons -->
+      <div style="display:flex;flex-wrap:wrap;gap:8px;">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
+          <img src="https://alphaonelabs.com/static/images/x-logo.svg" alt="X" style="width:14px;height:14px;filter:invert(1);opacity:.55;" onerror="this.parentElement.innerHTML='<svg width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'currentColor\'><path d=\'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z\'/></svg>'">
+        </a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
+          <i class="fab fa-discord" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
+          <i class="fab fa-instagram" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
+          <i class="fab fa-facebook" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
+          <i class="fab fa-youtube" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
+          <i class="fab fa-github" style="font-size:.95rem;"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
+          <i class="fab fa-slack" style="font-size:.95rem;"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Learning column -->
+    <div>
+      <p class="fc-title">Learning</p>
+      <a href="/" class="fc-link">Activities</a>
+      <a href="/dashboard.html" class="fc-link">Dashboard</a>
+      <a href="/teach.html" class="fc-link">Host an Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
+    </div>
+
+    <!-- Community column -->
+    <div>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
+    </div>
+
+    <!-- About column -->
+    <div>
+      <p class="fc-title">About</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
+    </div>
+  </div>
+
+  <!-- Bottom bar -->
+  <div class="footer-bottom">
+    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
+    <div style="display:flex;gap:1.25rem;">
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    </div>
+  </div>
+</footer>
+
+<script>
+const API='';
+function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+
+// Navbar scroll
+window.addEventListener('scroll',()=>{document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>8);});
+
+// Reveal animations
+const ro=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');}});},{threshold:.1,rootMargin:'0px 0px -40px 0px'});
+document.querySelectorAll('.reveal').forEach(el=>ro.observe(el));
+
+// Update navbar with auth state
+function updateNav(){
+  const token=localStorage.getItem('edu_token');
+  const user=JSON.parse(localStorage.getItem('edu_user')||'null');
+  const nav=document.getElementById('nav-auth');
+  const dd=document.getElementById('profile-dropdown');
+  if(token&&user){
+    const ini=(user.name||user.username||'?').slice(0,2).toUpperCase();
+    nav.innerHTML=`
+      <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.8)'">Dashboard</a>
+      <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(ini)}</button>`;
+    document.getElementById('dd-avatar').textContent=ini;
+    document.getElementById('dd-name').textContent=user.name||user.username;
+    document.getElementById('dd-role').textContent=user.role||'member';
+    nav.appendChild(dd);
+  } else {
+    nav.innerHTML=`
+      <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.8)'">Login</a>
+      <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
+  }
+}
+
+let ddOpen=false;
+function toggleDD(e){e.stopPropagation();ddOpen=!ddOpen;document.getElementById('profile-dropdown').classList.toggle('open',ddOpen);}
+document.addEventListener('click',()=>{if(ddOpen){ddOpen=false;document.getElementById('profile-dropdown').classList.remove('open');}});
+function logout(){localStorage.removeItem('edu_token');localStorage.removeItem('edu_user');window.location.href='/login.html';}
+
+// Type mappings
+const typeIcon={course:'📚',meetup:'🤝',workshop:'🔧',seminar:'🎤',other:'✨'};
+const typeBg={course:'#E8EAFF',meetup:'#FFF0ED',workshop:'#F0FDF4',seminar:'#F0FDFC',other:'#F1F5F9'};
+const typeClr={course:'#3B48E0',meetup:'#FF5C3A',workshop:'#00B27A',seminar:'#0D9488',other:'#6b7280'};
+
+function actRow(a,showHost){
+  const bg=typeBg[a.type]||'#F1F5F9',clr=typeClr[a.type]||'#6b7280',ic=typeIcon[a.type]||'✨';
+  const sub=showHost?`by ${esc(a.host_name||'')} · ${a.enr_role||'participant'}`:`${a.participant_count??0} participants`;
+  return `
+    <div class="act-row">
+      <div class="act-icon" style="background:${bg};">${ic}</div>
+      <div style="flex:1;min-width:0;">
+        <p style="font-family:'Syne',sans-serif;font-size:.81rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${esc(a.title)}</p>
+        <p style="font-size:.7rem;color:rgba(13,13,20,.38);margin-top:1px;">${sub}</p>
+      </div>
+      <span style="font-size:.65rem;background:${bg};color:${clr};padding:3px 9px;border-radius:6px;font-weight:600;font-family:'Syne',sans-serif;flex-shrink:0;">${esc(a.type)}</span>
+      <a href="/course.html?id=${esc(a.id)}" style="font-size:.73rem;font-weight:700;color:var(--teal);font-family:'Syne',sans-serif;flex-shrink:0;margin-left:4px;">→</a>
+    </div>`;
+}
+
+function empty(msg){return`<div style="padding:2rem;text-align:center;color:rgba(13,13,20,.3);font-size:.83rem;">${msg}</div>`;}
+function fmtDate(s){if(!s)return'—';return new Date(s).toLocaleDateString('en-US',{year:'numeric',month:'short',day:'numeric'});}
+
+async function loadProfile(){
+  const token=localStorage.getItem('edu_token');
+  const user=JSON.parse(localStorage.getItem('edu_user')||'null');
+  if(!token||!user){document.getElementById('not-logged-in').classList.remove('hidden');return;}
+  document.getElementById('profile-content').classList.remove('hidden');
+
+  const ini=(user.name||user.username||'??').slice(0,2).toUpperCase();
+  document.getElementById('prof-initials').textContent=ini;
+  document.getElementById('prof-name').textContent=user.name||user.username;
+  document.getElementById('prof-username').textContent='@'+(user.username||'');
+  document.getElementById('prof-role-text').textContent=user.role||'member';
+  document.getElementById('prof-id').textContent=user.id||'—';
+  document.getElementById('prof-email').textContent=user.email||'(encrypted)';
+
+  const isHost=user.role==='host';
+  document.getElementById('prof-role-badge').innerHTML=`
+    <span class="role-badge" style="background:${isHost?'var(--teal-dim)':'#F0FDF4'};color:${isHost?'var(--teal)':'#00B27A'};">
+      ${isHost?'🎓 Host':'👤 Member'}
+    </span>`;
+
+  try{
+    const res=await fetch(`${API}/api/dashboard`,{headers:{Authorization:`Bearer ${token}`}});
+    const data=await res.json();
+    if(!res.ok){if(res.status===401){logout();return;}throw new Error(data.error);}
+
+    const all=[...(data.hosted_activities||[]),...(data.joined_activities||[])];
+    const earliest=all.reduce((m,a)=>{const d=a.created_at||a.joined_at;return(!m||d<m)?d:m;},null);
+    document.getElementById('prof-joined').textContent=fmtDate(earliest)||'Recently';
+
+    const hosted=data.hosted_activities||[],joined=data.joined_activities||[];
+    document.getElementById('stat-hosted').textContent=hosted.length;
+    document.getElementById('stat-joined').textContent=joined.length;
+    document.getElementById('stat-total').textContent=hosted.length+joined.length;
+    document.getElementById('hosted-list').innerHTML=hosted.length?hosted.map(a=>actRow(a,false)).join(''):empty("You haven't hosted any activities yet.");
+    document.getElementById('joined-list').innerHTML=joined.length?joined.map(a=>actRow(a,true)).join(''):empty("You haven't joined any activities yet.");
+  }catch(e){
+    document.getElementById('hosted-list').innerHTML=empty('Could not load activities.');
+    document.getElementById('joined-list').innerHTML=empty('Could not load activities.');
+    document.getElementById('prof-joined').textContent='—';
+  }
+}
+
+updateNav();
+loadProfile();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/teach.html b/public/teach.html
index 8c00bff..a95cd9e 100644
--- a/public/teach.html
+++ b/public/teach.html
@@ -3,71 +3,227 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Host Hub - Alpha One Labs</title>
+  <title>Host Hub – Alpha One Labs</title>
   <link rel="icon" type="image/png" href="/images/logo.png" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>tailwind.config = { theme: { extend: { colors: { brand:{ DEFAULT:'#4F46E5', dark:'#3730A3' } } } } };</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <style>
-    .hidden { display: none !important; }
-    .gradient-hero { background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#2563EB 100%); }
-    .badge { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+    :root{
+      --ink:#0D0D14;
+      --paper:#FFFFFF;
+      --teal:#0D9488;
+      --teal-dark:#0F766E;
+      --teal-light:#14B8A6;
+      --teal-dim:#CCFBF1;
+      --accent:#F97316;
+      --jade:#00B27A;
+      --muted:rgba(13,13,20,.48);
+      --border:#E2E8F0;
+    }
+    html{scroll-behavior:smooth;}
+    body{font-family:'DM Sans',sans-serif;background:#FAFBFC;color:var(--ink);overflow-x:hidden;}
+    h1,h2,h3,h4{font-family:'Syne',sans-serif;}
+    .hidden{display:none!important;}
+    a{text-decoration:none;color:inherit;}
+
+    /* ─── NAVBAR ─── */
+    #navbar{
+      position:sticky;top:0;z-index:200;
+      background:rgba(13,148,136,.96);
+      backdrop-filter:blur(18px) saturate(180%);
+      border-bottom:1px solid rgba(255,255,255,.18);
+      box-shadow:0 2px 12px rgba(0,0,0,.12);
+      transition:box-shadow .3s,background .3s;
+    }
+    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    .nav-logo{display:flex;align-items:center;gap:10px;}
+    .nav-logo img{width:38px;height:38px;border-radius:10px;}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-links{display:flex;align-items:center;gap:2px;}
+    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
+    .nav-link.active{color:#fff;background:rgba(255,255,255,.18);}
+    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+
+    /* ─── HERO ─── */
+    .hero{
+      background:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);
+      position:relative;overflow:hidden;padding:3rem 1.5rem;
+    }
+    .hero-mesh{
+      position:absolute;inset:0;
+      background:
+        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,255,255,.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(20,184,166,.2) 0%, transparent 50%);
+      pointer-events:none;
+    }
+    .hero-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;}
+    .hero-content h1{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.035em;}
+    .hero-content p{color:rgba(255,255,255,.62);font-size:.95rem;margin-top:.5rem;}
+
+    /* ─── CARDS ─── */
+    .card{
+      background:#fff;
+      border-radius:20px;
+      border:1px solid var(--border);
+      overflow:hidden;
+      transition:transform .2s,box-shadow .2s;
+    }
+    .card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
+    .card-header{padding:1.5rem;border-bottom:1px solid rgba(13,13,20,.05);display:flex;align-items:center;justify-content:space-between;}
+    .card-header h3{font-weight:700;font-size:.9rem;}
+
+    /* ─── FORM ─── */
+    .form-group{margin-bottom:1rem;}
+    .form-label{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;}
+    .form-input,.form-select,.form-textarea{
+      width:100%;
+      padding:.75rem 1rem;
+      border:1px solid var(--border);
+      border-radius:12px;
+      font-family:'DM Sans',sans-serif;
+      font-size:.85rem;
+      color:var(--ink);
+      transition:border-color .15s,box-shadow .15s;
+    }
+    .form-input:focus,.form-select:focus,.form-textarea:focus{
+      outline:none;
+      border-color:var(--teal);
+      box-shadow:0 0 0 3px rgba(13,148,136,.1);
+    }
+    .form-textarea{resize:vertical;min-height:100px;}
+
+    /* ─── BUTTONS ─── */
+    .btn{
+      display:inline-flex;align-items:center;gap:8px;
+      padding:10px 20px;border-radius:10px;font-family:'Syne',sans-serif;
+      font-weight:700;font-size:.85rem;
+      border:none;cursor:pointer;text-decoration:none;
+      transition:all .18s;
+    }
+    .btn-primary{background:var(--teal);color:#fff;}
+    .btn-primary:hover{background:var(--teal-dark);}
+    .btn-primary:disabled{background:rgba(13,148,136,.5);cursor:not-allowed;}
+    .btn-secondary{background:#fff;color:var(--teal);border:1.5px solid var(--border);}
+    .btn-secondary:hover{background:var(--teal-dim);}
+    .btn-full{width:100%;}
+
+    /* ─── ALERTS ─── */
+    .alert{padding:1rem;border-radius:12px;font-size:.85rem;margin-top:1rem;display:none;}
+    .alert.show{display:block;}
+    .alert-success{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7;}
+    .alert-error{background:#FEE2E2;color:#7F1D1D;border:1px solid #FCA5A5;}
+
+    /* ─── TYPE BADGE ─── */
+    .badge{
+      display:inline-flex;align-items:center;gap:4px;
+      font-family:'Syne',sans-serif;font-size:.65rem;font-weight:700;
+      padding:4px 10px;border-radius:8px;text-transform:uppercase;
+    }
+
+    /* ─── ACTIVITY ROW ─── */
+    .activity-row{
+      padding:1.5rem;
+      border-bottom:1px solid rgba(13,13,20,.04);
+      display:flex;align-items:center;justify-content:space-between;gap:1rem;
+      transition:background .15s;
+    }
+    .activity-row:last-child{border-bottom:none;}
+    .activity-row:hover{background:#FAFBFC;}
+    .activity-info{flex:1;min-width:0;}
+    .activity-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;margin-bottom:.5rem;}
+    .activity-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.75rem;color:var(--muted);}
+    .activity-actions{display:flex;gap:8px;flex-shrink:0;}
+
+    /* ─── FOOTER ─── */
+    footer{background:#0F172A;color:rgba(255,255,255,.45);}
+    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 2.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
+    @media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
+    @media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
+    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1.1rem;}
+    .fc-link{display:block;font-size:.82rem;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:.55rem;transition:color .15s;}
+    .fc-link:hover{color:rgba(255,255,255,.8);}
+    .footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:1.5rem;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
+    .f-social{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,.08);transition:all .2s;}
+    .f-social:hover{background:var(--teal-dim);color:var(--teal);border-color:var(--teal);transform:translateY(-2px);}
+    .f-social svg,.f-social i{font-size:1rem;}
+
+    /* ─── GRID ─── */
+    .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
+    @media(max-width:768px){.grid-2{grid-template-columns:1fr;}}
+
+    /* ─── SECTION ─── */
+    .section{max-width:1200px;margin:0 auto;padding:0 1.5rem;}
+    .section-label{font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem;display:flex;align-items:center;gap:8px;}
+    .section-label::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px;}
+    .section-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.5rem;margin:2rem 0 1.5rem;}
   </style>
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans">
+<body>
 
-<nav class="bg-white shadow-sm sticky top-0 z-50">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
-    <a href="/" class="flex items-center gap-2">
-      <img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
-      <span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
+<!-- ─── NAVBAR ─── -->
+<nav id="navbar">
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">
+      <img src="./images/logo.png" alt="Alpha One Labs"
+           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
+      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+      </div>
+      <span class="nav-logo-text">Alpha One Labs</span>
     </a>
-    <div class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-600">
-      <a href="/" class="hover:text-brand">Activities</a>
-      <a href="/dashboard.html" class="hover:text-brand">Dashboard</a>
-      <a href="/teach.html" class="text-brand font-semibold">Host Hub</a>
+    <div class="nav-links">
+      <a href="/" class="nav-link">Activities</a>
+      <a href="/dashboard.html" class="nav-link">Dashboard</a>
+      <a href="/teach.html" class="nav-link active">Host</a>
     </div>
-    <div class="flex items-center gap-3">
-      <span class="text-slate-600 text-sm hidden sm:block" id="nav-user"></span>
-      <button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500">Logout</button>
+    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
+      <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
+      <button onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
     </div>
   </div>
 </nav>
 
-<!-- Main content -->
-<div id="host-content" class="hidden">
-
-  <div class="gradient-hero text-white py-12 px-4">
-    <div class="max-w-7xl mx-auto">
-      <h1 class="text-3xl font-extrabold mb-1">Host Hub</h1>
-      <p class="text-indigo-200">Create and manage your activities and sessions.</p>
-    </div>
+<!-- ─── HERO ─── -->
+<div class="hero">
+  <div class="hero-mesh"></div>
+  <div class="hero-content">
+    <h1>Host Hub</h1>
+    <p>Create and manage your activities and sessions. All descriptions encrypted at rest.</p>
   </div>
+</div>
 
-  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+<!-- ─── MAIN CONTENT ─── -->
+<main id="host-content" style="padding:3rem 0;display:none;">
 
-      <!-- Create Activity -->
-      <section class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-indigo-50 to-purple-50">
-          <h2 class="font-bold text-slate-800">&#127775; Create New Activity</h2>
-          <p class="text-slate-500 text-xs mt-0.5">Descriptions are encrypted at rest in D1.</p>
+  <section class="section" style="margin-bottom:3rem;">
+    <div class="grid-2">
+
+      <!-- CREATE ACTIVITY -->
+      <div class="card">
+        <div class="card-header" style="background:linear-gradient(135deg,var(--teal-dim) 0%,rgba(20,184,166,.1) 100%);">
+          <h3>🎓 Create Activity</h3>
         </div>
-        <div class="p-6">
-          <form id="form-activity" class="space-y-4" novalidate>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Title *</label>
-              <input id="a-title" type="text" required
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="e.g. Python for Beginners" />
+        <div style="padding:1.5rem;">
+          <form id="form-activity" novalidate>
+            <div class="form-group">
+              <label class="form-label">Title *</label>
+              <input id="a-title" type="text" required class="form-input" placeholder="e.g. Python Basics" />
             </div>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Description</label>
-              <textarea id="a-desc" rows="3"
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm resize-none" placeholder="What will participants gain?"></textarea>
+
+            <div class="form-group">
+              <label class="form-label">Description</label>
+              <textarea id="a-desc" class="form-textarea" placeholder="What will participants gain?"></textarea>
             </div>
-            <div class="grid grid-cols-3 gap-3">
-              <div>
-                <label class="block text-sm font-medium text-slate-700 mb-1">Type</label>
-                <select id="a-type" class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm">
+
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;">
+              <div class="form-group" style="margin-bottom:0;">
+                <label class="form-label">Type</label>
+                <select id="a-type" class="form-select">
                   <option value="course">📚 Course</option>
                   <option value="meetup">🤝 Meetup</option>
                   <option value="workshop">🔧 Workshop</option>
@@ -75,17 +231,17 @@ <h2 class="font-bold text-slate-800">&#127775; Create New Activity</h2>
                   <option value="other">✨ Other</option>
                 </select>
               </div>
-              <div>
-                <label class="block text-sm font-medium text-slate-700 mb-1">Format</label>
-                <select id="a-format" class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm">
+              <div class="form-group" style="margin-bottom:0;">
+                <label class="form-label">Format</label>
+                <select id="a-format" class="form-select">
                   <option value="self_paced">Self-paced</option>
                   <option value="live">Live</option>
                   <option value="hybrid">Hybrid</option>
                 </select>
               </div>
-              <div>
-                <label class="block text-sm font-medium text-slate-700 mb-1">Schedule</label>
-                <select id="a-schedule" class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm">
+              <div class="form-group" style="margin-bottom:0;">
+                <label class="form-label">Schedule</label>
+                <select id="a-schedule" class="form-select">
                   <option value="ongoing">Ongoing</option>
                   <option value="one_time">One-time</option>
                   <option value="multi_session">Multi-session</option>
@@ -93,85 +249,156 @@ <h2 class="font-bold text-slate-800">&#127775; Create New Activity</h2>
                 </select>
               </div>
             </div>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Tags (comma-separated)</label>
-              <input id="a-tags" type="text"
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="Python, Beginners, Data Science" />
+
+            <div class="form-group">
+              <label class="form-label">Tags (comma-separated)</label>
+              <input id="a-tags" type="text" class="form-input" placeholder="Python, Beginners, Data Science" />
             </div>
-            <p id="act-err" class="text-red-500 text-sm hidden"></p>
-            <p id="act-ok" class="text-emerald-600 text-sm hidden"></p>
-            <button type="submit" class="w-full bg-brand text-white font-semibold py-2.5 rounded-xl hover:bg-brand-dark transition text-sm">Create Activity</button>
+
+            <p id="act-err" class="alert alert-error"></p>
+            <p id="act-ok" class="alert alert-success"></p>
+            <button type="submit" class="btn btn-primary btn-full">Create Activity</button>
           </form>
         </div>
-      </section>
+      </div>
 
-      <!-- Create Session -->
-      <section class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-        <div class="px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-emerald-50 to-teal-50">
-          <h2 class="font-bold text-slate-800">&#128197; Add Session</h2>
-          <p class="text-slate-500 text-xs mt-0.5">Location and description are encrypted at rest.</p>
+      <!-- ADD SESSION -->
+      <div class="card">
+        <div class="card-header" style="background:linear-gradient(135deg,rgba(0,178,122,.1) 0%,rgba(0,178,122,.05) 100%);">
+          <h3>📅 Add Session</h3>
         </div>
-        <div class="p-6">
-          <form id="form-session" class="space-y-4" novalidate>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Activity *</label>
-              <select id="s-activity" class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm">
-                <option value="">Select one of your activities...</option>
+        <div style="padding:1.5rem;">
+          <form id="form-session" novalidate>
+            <div class="form-group">
+              <label class="form-label">Activity *</label>
+              <select id="s-activity" class="form-select">
+                <option value="">Select an activity...</option>
               </select>
             </div>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Session Title *</label>
-              <input id="s-title" type="text" required
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="e.g. Week 1 - Introduction" />
+
+            <div class="form-group">
+              <label class="form-label">Session Title *</label>
+              <input id="s-title" type="text" required class="form-input" placeholder="e.g. Week 1 - Introduction" />
             </div>
-            <div class="grid grid-cols-2 gap-3">
-              <div>
-                <label class="block text-sm font-medium text-slate-700 mb-1">Start Time</label>
-                <input id="s-start" type="datetime-local"
-                  class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" />
+
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
+              <div class="form-group" style="margin-bottom:0;">
+                <label class="form-label">Start Time</label>
+                <input id="s-start" type="datetime-local" class="form-input" />
               </div>
-              <div>
-                <label class="block text-sm font-medium text-slate-700 mb-1">End Time</label>
-                <input id="s-end" type="datetime-local"
-                  class="w-full px-3 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" />
+              <div class="form-group" style="margin-bottom:0;">
+                <label class="form-label">End Time</label>
+                <input id="s-end" type="datetime-local" class="form-input" />
               </div>
             </div>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Location (encrypted)</label>
-              <input id="s-location" type="text"
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm" placeholder="e.g. Room 101 or Zoom link" />
+
+            <div class="form-group">
+              <label class="form-label">Location (encrypted)</label>
+              <input id="s-location" type="text" class="form-input" placeholder="e.g. Room 101 or Zoom link" />
             </div>
-            <div>
-              <label class="block text-sm font-medium text-slate-700 mb-1">Description (encrypted)</label>
-              <textarea id="s-desc" rows="2"
-                class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand/40 text-sm resize-none" placeholder="What will be covered in this session?"></textarea>
+
+            <div class="form-group">
+              <label class="form-label">Description (encrypted)</label>
+              <textarea id="s-desc" class="form-textarea" placeholder="What will be covered?"></textarea>
             </div>
-            <p id="ses-err" class="text-red-500 text-sm hidden"></p>
-            <p id="ses-ok" class="text-emerald-600 text-sm hidden"></p>
-            <button type="submit" class="w-full bg-emerald-600 text-white font-semibold py-2.5 rounded-xl hover:bg-emerald-700 transition text-sm">Add Session</button>
+
+            <p id="ses-err" class="alert alert-error"></p>
+            <p id="ses-ok" class="alert alert-success"></p>
+            <button type="submit" class="btn btn-primary btn-full" style="background:var(--jade);">Add Session</button>
           </form>
         </div>
-      </section>
+      </div>
 
     </div>
+  </section>
 
-    <!-- My Activities list -->
-    <section class="mt-8 bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
-      <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
-        <h2 class="font-bold text-slate-800">My Hosted Activities</h2>
-        <span id="hosted-count" class="text-xs text-slate-400"></span>
+  <!-- MY ACTIVITIES -->
+  <section class="section">
+    <div class="section-label">My Activities</div>
+    <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-size:.6em;color:var(--muted);">(0)</span></h2>
+    
+    <div class="card">
+      <div id="hosted-list" style="min-height:200px;display:flex;align-items:center;justify-content:center;">
+        <p style="color:var(--muted);font-size:.9rem;">Loading...</p>
       </div>
-      <div id="hosted-list" class="divide-y divide-slate-50">
-        <p class="px-6 py-4 text-sm text-slate-400 animate-pulse">Loading...</p>
-      </div>
-    </section>
-  </main>
+    </div>
+  </section>
 
-  <footer class="bg-slate-800 text-slate-400 py-6 text-center text-sm mt-8">
-    <p>&copy; 2024&ndash;2026 Alpha One Labs &middot; Activity descriptions and session details encrypted at rest</p>
-  </footer>
+</main>
 
-</div><!-- /#host-content -->
+<!-- ─── FOOTER ─── -->
+<footer>
+  <div class="footer-grid">
+    <div>
+      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
+        <img src="./images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
+        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
+      </div>
+      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
+      <div style="margin-bottom:1.25rem;">
+        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
+        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
+      </div>
+      <div style="display:flex;flex-wrap:wrap;gap:8px;">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
+          <i class="fab fa-x-twitter"></i>
+        </a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
+          <i class="fab fa-github"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
+          <i class="fab fa-slack"></i>
+        </a>
+      </div>
+    </div>
+    <div>
+      <p class="fc-title">Learning</p>
+      <a href="/" class="fc-link">Activities</a>
+      <a href="/dashboard.html" class="fc-link">Dashboard</a>
+      <a href="/teach.html" class="fc-link">Host an Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
+    </div>
+    <div>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
+    </div>
+    <div>
+      <p class="fc-title">About</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
+    </div>
+  </div>
+  <div class="footer-bottom">
+    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
+    <div style="display:flex;gap:1.25rem;">
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    </div>
+  </div>
+</footer>
 
 <script>
   const API   = '';
@@ -184,7 +411,7 @@ <h2 class="font-bold text-slate-800">My Hosted Activities</h2>
     window.location.href = '/login.html';
   } else {
     document.getElementById('nav-user').textContent = 'Hi, ' + user.username;
-    document.getElementById('host-content').classList.remove('hidden');
+    document.getElementById('host-content').style.display = 'block';
     init();
   }
 
@@ -219,27 +446,27 @@ <h2 class="font-bold text-slate-800">My Hosted Activities</h2>
 
     const list = document.getElementById('hosted-list');
     if (!hostedActivities.length) {
-      list.innerHTML = '<p class="px-6 py-8 text-sm text-slate-400 text-center">No activities yet. Create one above!</p>';
+      list.innerHTML = '<p style="text-align:center;padding:2rem;color:var(--muted);">No activities yet. Create one above!</p>';
       return;
     }
     list.innerHTML = hostedActivities.map(a => {
       const tc  = typeColor[a.type] || 'bg-slate-100 text-slate-600';
       const ic  = typeIcon[a.type]  || '✨';
       const tags = (a.tags||[]).slice(0,4).map(t =>
-        '<span class="badge bg-slate-100 text-slate-500">' + esc(t) + '</span>').join('');
-      return '<div class="px-6 py-4 flex items-center justify-between gap-4 hover:bg-slate-50 transition">' +
-        '<div class="flex-1 min-w-0">' +
-          '<p class="font-semibold text-slate-800 text-sm truncate">' + ic + ' ' + esc(a.title) + '</p>' +
-          '<div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-slate-400">' +
-            '<span class="badge ' + tc + '">' + esc(a.type) + '</span>' +
+        '<span class="badge" style="background:#F1F5F9;color:#64748B;">' + esc(t) + '</span>').join('');
+      return '<div class="activity-row">' +
+        '<div class="activity-info">' +
+          '<p class="activity-title">' + ic + ' ' + esc(a.title) + '</p>' +
+          '<div class="activity-meta">' +
+            '<span class="badge" style="background:#F0FDFA;color:#0D9488;">' + esc(a.type) + '</span>' +
             '<span>' + (fmtLabel[a.format]||a.format) + '</span>' +
             '<span>👥 ' + a.participant_count + '</span>' +
             '<span>🗓 ' + a.session_count + ' sessions</span>' +
             tags +
           '</div>' +
         '</div>' +
-        '<div class="flex gap-2 shrink-0">' +
-          '<a href="/course.html?id=' + esc(a.id) + '" class="text-xs text-brand font-semibold border border-brand/30 px-3 py-1.5 rounded-lg hover:bg-indigo-50">View</a>' +
+        '<div class="activity-actions">' +
+          '<a href="/course.html?id=' + esc(a.id) + '" class="btn btn-secondary" style="font-size:.75rem;padding:6px 12px;">View</a>' +
         '</div>' +
       '</div>';
     }).join('');
@@ -248,14 +475,14 @@ <h2 class="font-bold text-slate-800">My Hosted Activities</h2>
   function showMsg(id, msg, isErr) {
     const el = document.getElementById(id);
     el.textContent = msg;
-    el.classList.remove('hidden');
-    setTimeout(() => el.classList.add('hidden'), 4000);
+    el.classList.add('show');
+    setTimeout(() => el.classList.remove('show'), 4000);
   }
 
   document.getElementById('form-activity').addEventListener('submit', async e => {
     e.preventDefault();
-    document.getElementById('act-err').classList.add('hidden');
-    document.getElementById('act-ok').classList.add('hidden');
+    document.getElementById('act-err').classList.remove('show');
+    document.getElementById('act-ok').classList.remove('show');
     const btn = e.target.querySelector('button[type=submit]');
     btn.textContent = 'Creating...'; btn.disabled = true;
     const rawTags = document.getElementById('a-tags').value;
@@ -283,8 +510,8 @@ <h2 class="font-bold text-slate-800">My Hosted Activities</h2>
 
   document.getElementById('form-session').addEventListener('submit', async e => {
     e.preventDefault();
-    document.getElementById('ses-err').classList.add('hidden');
-    document.getElementById('ses-ok').classList.add('hidden');
+    document.getElementById('ses-err').classList.remove('show');
+    document.getElementById('ses-ok').classList.remove('show');
     const btn = e.target.querySelector('button[type=submit]');
     const actId = document.getElementById('s-activity').value;
     if (!actId) { showMsg('ses-err', 'Please select an activity', true); return; }

From 4f49ff49ea3e844f6845af33d98be6fb3ac53d0c Mon Sep 17 00:00:00 2001
From: Ghanshyam Singh <ghanshyam2005singh@gmail.com>
Date: Wed, 25 Mar 2026 18:31:50 +0530
Subject: [PATCH 2/5] fix: prevent XSS vulnerability in tag cloud event bindin

---
 public/index.html | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index da08227..41fb278 100644
--- a/public/index.html
+++ b/public/index.html
@@ -790,14 +790,20 @@ <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;line-h
   }
 
   function buildTagCloud(activities) {
-    const freq = {};
-    activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
-    const sorted = Object.entries(freq).sort((a,b) => b[1]-a[1]);
-    document.getElementById('tag-cloud').innerHTML = sorted.map(([name, cnt]) =>
-      `<button onclick="toggleTag('${esc(name)}')" id="tag-${esc(name)}" class="tag-pill">
-        ${esc(name)} <span style="opacity:.5;font-size:.65rem;">${cnt}</span>
-       </button>`).join('');
-  }
+  const freq = {};
+  activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
+  const sorted = Object.entries(freq).sort((a,b) => b[1]-a[1]);
+  
+  const cloud = document.getElementById('tag-cloud');
+  cloud.innerHTML = sorted.map(([name, cnt]) => `
+    <button class="tag-pill" data-tag-name="${esc(name)}" id="tag-${esc(name)}">
+      ${esc(name)} <span style="opacity:.5;font-size:.65rem;">${cnt}</span>
+    </button>`).join('');
+  
+  cloud.querySelectorAll('.tag-pill').forEach(btn => {
+    btn.addEventListener('click', () => toggleTag(btn.dataset.tagName));
+  });
+}
 
   function toggleTag(name) {
     activeTag = activeTag === name ? null : name;

From f6c8e9ab8a5731ea8faa76f6fa0b9f9417488b48 Mon Sep 17 00:00:00 2001
From: Ghanshyam Singh <ghanshyam2005singh@gmail.com>
Date: Wed, 25 Mar 2026 18:46:06 +0530
Subject: [PATCH 3/5] fix: accessibility and code quality issues from
 CodeRabbit review

---
 public/dashboard.html |   8 +--
 public/index.html     | 136 +++++++++++++++++++++++++-----------------
 public/profile.html   |  19 +++++-
 public/teach.html     |  19 +++---
 4 files changed, 109 insertions(+), 73 deletions(-)

diff --git a/public/dashboard.html b/public/dashboard.html
index 6dfed88..2563656 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -214,10 +214,10 @@ <h2 class="section-title" id="section-title">Hosted Activities</h2>
     </div>
 
     <div id="empty-state" class="hidden empty-state">
-      <p class="empty-state-icon">🎓</p>
-      <p class="empty-state-text" id="empty-msg">No hosted activities yet.</p>
-      <a id="empty-action-link" href="/teach.html" class="empty-state-link" id="empty-action-text">Create your first activity →</a>
-    </div>
+  <p class="empty-state-icon">🎓</p>
+  <p class="empty-state-text" id="empty-msg">No hosted activities yet.</p>
+  <a id="empty-action-link" href="/teach.html" class="empty-state-link">Create your first activity →</a>
+</div>
   </section>
 
   <!-- JOINED ACTIVITIES SECTION -->
diff --git a/public/index.html b/public/index.html
index 41fb278..b7fedf4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -53,7 +53,7 @@
     #navbar.scrolled { background: #0F766E; box-shadow: 0 4px 20px rgba(0,0,0,.18); }
 
     /* ── Profile dropdown ── */
-    #profile-dropdown {
+     #profile-dropdown {
       position: absolute; right: 0; top: calc(100% + 10px);
       background: #fff;
       border: 1px solid rgba(13,13,20,.09);
@@ -64,10 +64,12 @@
       opacity: 0; transform: translateY(-8px) scale(.97);
       transition: opacity .18s ease, transform .18s ease;
       pointer-events: none;
+      visibility: hidden;
     }
     #profile-dropdown.open {
       opacity: 1; transform: translateY(0) scale(1);
       pointer-events: auto;
+      visibility: visible;
     }
 
     /* ── Hero — full-width teal gradient ── */
@@ -464,24 +466,37 @@ <h1 class="hero-title">
       <p class="section-label">Browse</p>
       <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;">All Activities</h2>
     </div>
-    <div style="display:flex;gap:10px;flex-wrap:wrap;">
-      <input id="search" type="text" placeholder="Search activities…" class="filter-input" style="min-width:220px;" />
-      <select id="filter-type" class="filter-input">
-        <option value="">All Types</option>
-        <option value="course">📚 Course</option>
-        <option value="meetup">🤝 Meetup</option>
-        <option value="workshop">🔧 Workshop</option>
-        <option value="seminar">🎤 Seminar</option>
-        <option value="other">✨ Other</option>
-      </select>
-      <select id="filter-format" class="filter-input">
-        <option value="">All Formats</option>
-        <option value="live">🎥 Live</option>
-        <option value="self_paced">⏱ Self-paced</option>
-        <option value="hybrid">🔀 Hybrid</option>
-      </select>
+       <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
+      <!-- ✅ NEW: Wrap input with label -->
+      <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;">
+        <label for="search" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Search activities</label>
+        <input id="search" type="text" placeholder="e.g. Python, Web Development…" class="filter-input" style="min-width:220px;" />
+      </div>
+      
+      <!-- ✅ NEW: Wrap select with label -->
+      <div style="display:flex;flex-direction:column;gap:4px;">
+        <label for="filter-type" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Activity Type</label>
+        <select id="filter-type" class="filter-input">
+          <option value="">All Types</option>
+          <option value="course">📚 Course</option>
+          <option value="meetup">🤝 Meetup</option>
+          <option value="workshop">🔧 Workshop</option>
+          <option value="seminar">🎤 Seminar</option>
+          <option value="other">✨ Other</option>
+        </select>
+      </div>
+      
+      <!-- ✅ NEW: Wrap select with label -->
+      <div style="display:flex;flex-direction:column;gap:4px;">
+        <label for="filter-format" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Format</label>
+        <select id="filter-format" class="filter-input">
+          <option value="">All Formats</option>
+          <option value="live">🎥 Live</option>
+          <option value="self_paced">⏱ Self-paced</option>
+          <option value="hybrid">🔀 Hybrid</option>
+        </select>
+      </div>
     </div>
-  </div>
 
   <!-- Tag cloud -->
   <div id="tag-cloud" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem;"></div>
@@ -675,46 +690,57 @@ <h2 style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;letter-s
     return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
   }
 
-  // ── Auth nav ─────────────────────────────────────────────────────────────
-  function updateNav() {
-    const token = localStorage.getItem('edu_token');
-    const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
-    const nav   = document.getElementById('nav-auth');
-    const dd    = document.getElementById('profile-dropdown');
-
-    if (token && user) {
-      const initials = (user.name || user.username || '?').slice(0,2).toUpperCase();
-      nav.innerHTML = `
-        <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='transparent'">Dashboard</a>
-        <button id="profile-btn" onclick="toggleDropdown(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(initials)}</button>`;
-
-      // populate dropdown
-      document.getElementById('dropdown-avatar').textContent = initials;
-      document.getElementById('dropdown-name').textContent   = user.name || user.username;
-      document.getElementById('dropdown-role').textContent   = user.role || 'member';
-
-      // re-attach dropdown to nav
-      nav.appendChild(dd);
-    } else {
-      nav.innerHTML = `
-        <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Login</a>
-        <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
-    }
+// ── Auth nav ─────────────────────────────────────────────────────────────
+function updateNav() {
+  const token = localStorage.getItem('edu_token');
+  const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
+  const nav   = document.getElementById('nav-auth');
+  const dd    = document.getElementById('profile-dropdown');
+
+  if (token && user) {
+    const initials = (user.name || user.username || '?').slice(0,2).toUpperCase();
+    nav.innerHTML = `
+      <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='transparent'">Dashboard</a>
+      <button id="profile-btn" onclick="toggleDropdown(event)" 
+        aria-expanded="false" 
+        aria-controls="profile-dropdown"
+        style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(initials)}</button>`;
+
+    // populate dropdown
+    document.getElementById('dropdown-avatar').textContent = initials;
+    document.getElementById('dropdown-name').textContent   = user.name || user.username;
+    document.getElementById('dropdown-role').textContent   = user.role || 'member';
+
+    // re-attach dropdown to nav
+    nav.appendChild(dd);
+  } else {
+    nav.innerHTML = `
+      <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Login</a>
+      <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
   }
+}
 
-  let dropdownOpen = false;
-  function toggleDropdown(e) {
-    e.stopPropagation();
-    dropdownOpen = !dropdownOpen;
-    document.getElementById('profile-dropdown').classList.toggle('open', dropdownOpen);
+let dropdownOpen = false;
+function toggleDropdown(e) {
+  e.stopPropagation();
+  dropdownOpen = !dropdownOpen;
+  const btn = document.getElementById('profile-btn');
+  const dd = document.getElementById('profile-dropdown');
+  
+  // ✅ Update aria-expanded for screen readers
+  btn.setAttribute('aria-expanded', dropdownOpen);
+  dd.classList.toggle('open', dropdownOpen);
+}
+
+document.addEventListener('click', () => {
+  if (dropdownOpen) {
+    dropdownOpen = false;
+    const btn = document.getElementById('profile-btn');
+    const dd = document.getElementById('profile-dropdown');
+    if (btn) btn.setAttribute('aria-expanded', 'false');
+    if (dd) dd.classList.remove('open');
   }
-  document.addEventListener('click', () => {
-    if (dropdownOpen) {
-      dropdownOpen = false;
-      const dd = document.getElementById('profile-dropdown');
-      if (dd) dd.classList.remove('open');
-    }
-  });
+});
 
   function logout() {
     localStorage.removeItem('edu_token');
diff --git a/public/profile.html b/public/profile.html
index eefb27d..7864e6b 100644
--- a/public/profile.html
+++ b/public/profile.html
@@ -60,8 +60,9 @@
       opacity:0;transform:translateY(-8px) scale(.97);
       transition:opacity .18s,transform .18s;
       pointer-events:none;
+      visibility:hidden;
     }
-    #profile-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
+    #profile-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto; visibility:visible;}
 
     /* ─── HERO ─── */
     .profile-hero{
@@ -118,7 +119,16 @@
     }
     .stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
     .s-num{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;}
-    .s-label{font-size:.74rem;color:var(--muted);margin-top:3px;}
+    . /* ── Stats section labels ── */
+    .stat-label { font-size:.74rem; color:rgba(13,13,20,.4); margin-top:2px; }
+    
+    /* ── Section label (decorative) ── */
+    .section-label {
+      font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
+      letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
+      margin-bottom:1rem;display:flex;align-items:center;gap:8px;
+    }
+    .section-label::before { content:'';width:18px;height:2px;background:var(--teal);border-radius:1px; }
 
     /* ─── ACTIVITY ROW ─── */
     .act-row{
@@ -324,7 +334,10 @@ <h3>Account Details</h3>
           <div class="i-icon" style="background:#F1F5F9;">
             <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="#6b7280" stroke-width="1.4"/><path d="M5 2v2M11 2v2M2 7h12" stroke="#6b7280" stroke-width="1.4" stroke-linecap="round"/></svg>
           </div>
-          <div><p class="i-label">Member Since</p><p id="prof-joined" class="i-val"></p></div>
+         <div>
+            <p class="i-label">First Activity</p>
+            <p id="prof-joined" class="i-val"></p>
+          </div>
         </div>
         <div class="info-row">
           <div class="i-icon" style="background:#F1F5F9;">
diff --git a/public/teach.html b/public/teach.html
index a95cd9e..0330fd6 100644
--- a/public/teach.html
+++ b/public/teach.html
@@ -210,19 +210,17 @@ <h3>🎓 Create Activity</h3>
         </div>
         <div style="padding:1.5rem;">
           <form id="form-activity" novalidate>
-            <div class="form-group">
-              <label class="form-label">Title *</label>
+                        <div class="form-group">
+              <label for="a-title" class="form-label">Title *</label>
               <input id="a-title" type="text" required class="form-input" placeholder="e.g. Python Basics" />
             </div>
-
             <div class="form-group">
-              <label class="form-label">Description</label>
+              <label for="a-desc" class="form-label">Description</label>
               <textarea id="a-desc" class="form-textarea" placeholder="What will participants gain?"></textarea>
             </div>
-
             <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;">
               <div class="form-group" style="margin-bottom:0;">
-                <label class="form-label">Type</label>
+                <label for="a-type" class="form-label">Type</label>
                 <select id="a-type" class="form-select">
                   <option value="course">📚 Course</option>
                   <option value="meetup">🤝 Meetup</option>
@@ -232,7 +230,7 @@ <h3>🎓 Create Activity</h3>
                 </select>
               </div>
               <div class="form-group" style="margin-bottom:0;">
-                <label class="form-label">Format</label>
+                <label for="a-format" class="form-label">Format</label>
                 <select id="a-format" class="form-select">
                   <option value="self_paced">Self-paced</option>
                   <option value="live">Live</option>
@@ -240,7 +238,7 @@ <h3>🎓 Create Activity</h3>
                 </select>
               </div>
               <div class="form-group" style="margin-bottom:0;">
-                <label class="form-label">Schedule</label>
+                <label for="a-schedule" class="form-label">Schedule</label>
                 <select id="a-schedule" class="form-select">
                   <option value="ongoing">Ongoing</option>
                   <option value="one_time">One-time</option>
@@ -249,12 +247,11 @@ <h3>🎓 Create Activity</h3>
                 </select>
               </div>
             </div>
-
             <div class="form-group">
-              <label class="form-label">Tags (comma-separated)</label>
+              <label for="a-tags" class="form-label">Tags (comma-separated)</label>
               <input id="a-tags" type="text" class="form-input" placeholder="Python, Beginners, Data Science" />
             </div>
-
+            
             <p id="act-err" class="alert alert-error"></p>
             <p id="act-ok" class="alert alert-success"></p>
             <button type="submit" class="btn btn-primary btn-full">Create Activity</button>

From 9360bf57121fa0b968b3adaf3ef37c56f3dcfb43 Mon Sep 17 00:00:00 2001
From: Ghanshyam Singh <ghanshyam2005singh@gmail.com>
Date: Wed, 25 Mar 2026 19:25:38 +0530
Subject: [PATCH 4/5] fix: add type='button' to logout button in profile
 dropdown

---
 public/dashboard.html | 2 +-
 public/index.html     | 7 ++++---
 public/profile.html   | 2 +-
 public/teach.html     | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/dashboard.html b/public/dashboard.html
index 2563656..a8d29b7 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -173,7 +173,7 @@
     </div>
     <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
       <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
-      <button onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
+      <button type="button" onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
     </div>
   </div>
 </nav>
diff --git a/public/index.html b/public/index.html
index b7fedf4..4dda298 100644
--- a/public/index.html
+++ b/public/index.html
@@ -467,13 +467,13 @@ <h1 class="hero-title">
       <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;">All Activities</h2>
     </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
-      <!-- ✅ NEW: Wrap input with label -->
+      <!-- Wrap input with label -->
       <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;">
         <label for="search" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Search activities</label>
         <input id="search" type="text" placeholder="e.g. Python, Web Development…" class="filter-input" style="min-width:220px;" />
       </div>
       
-      <!-- ✅ NEW: Wrap select with label -->
+      <!-- Wrap select with label -->
       <div style="display:flex;flex-direction:column;gap:4px;">
         <label for="filter-type" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Activity Type</label>
         <select id="filter-type" class="filter-input">
@@ -486,7 +486,7 @@ <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter
         </select>
       </div>
       
-      <!-- ✅ NEW: Wrap select with label -->
+      <!-- Wrap select with label -->
       <div style="display:flex;flex-direction:column;gap:4px;">
         <label for="filter-format" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Format</label>
         <select id="filter-format" class="filter-input">
@@ -496,6 +496,7 @@ <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter
           <option value="hybrid">🔀 Hybrid</option>
         </select>
       </div>
+      </div>
     </div>
 
   <!-- Tag cloud -->
diff --git a/public/profile.html b/public/profile.html
index 7864e6b..e83769c 100644
--- a/public/profile.html
+++ b/public/profile.html
@@ -253,7 +253,7 @@
     </a>
   </div>
   <div style="padding:7px;border-top:1px solid rgba(13,13,20,.07);">
-    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.83rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
+    <button type="button" onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.83rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
       <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round"/><path d="M10 11l3-3-3-3M13 8H6" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Sign Out
     </button>
   </div>
diff --git a/public/teach.html b/public/teach.html
index 0330fd6..fc8decf 100644
--- a/public/teach.html
+++ b/public/teach.html
@@ -183,7 +183,7 @@
     </div>
     <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
       <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
-      <button onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
+      <button type="button" onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
     </div>
   </div>
 </nav>
@@ -251,7 +251,7 @@ <h3>🎓 Create Activity</h3>
               <label for="a-tags" class="form-label">Tags (comma-separated)</label>
               <input id="a-tags" type="text" class="form-input" placeholder="Python, Beginners, Data Science" />
             </div>
-            
+
             <p id="act-err" class="alert alert-error"></p>
             <p id="act-ok" class="alert alert-success"></p>
             <button type="submit" class="btn btn-primary btn-full">Create Activity</button>

From 1c3dfc209cd97d10d225b56925cc70f0a99c4f7b Mon Sep 17 00:00:00 2001
From: Ghanshyam Singh <ghanshyam2005singh@gmail.com>
Date: Thu, 26 Mar 2026 00:27:38 +0530
Subject: [PATCH 5/5] refactor ui matching with old website

---
 public/dashboard.html |  303 +++++++-
 public/index.html     | 1685 ++++++++++++++++++++++++-----------------
 public/profile.html   |  349 +++++----
 public/teach.html     |  339 ++++++---
 4 files changed, 1719 insertions(+), 957 deletions(-)

diff --git a/public/dashboard.html b/public/dashboard.html
index a8d29b7..2294969 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -18,10 +18,12 @@
       --teal-dark:#0F766E;
       --teal-light:#14B8A6;
       --teal-dim:#CCFBF1;
-      --accent:#F97316;
-      --jade:#00B27A;
+      --teal-dd:#115E59;
+      --orange:#F97316;
+      --orange-d:#EA6C0A;
       --muted:rgba(13,13,20,.48);
       --border:#E2E8F0;
+      --white:#ffffff;
     }
     html{scroll-behavior:smooth;}
     body{font-family:'DM Sans',sans-serif;background:#FAFBFC;color:var(--ink);overflow-x:hidden;}
@@ -32,24 +34,56 @@
     /* ─── NAVBAR ─── */
     #navbar{
       position:sticky;top:0;z-index:200;
-      background:rgba(13,148,136,.96);
-      backdrop-filter:blur(18px) saturate(180%);
-      border-bottom:1px solid rgba(255,255,255,.18);
-      box-shadow:0 2px 12px rgba(0,0,0,.12);
-      transition:box-shadow .3s,background .3s;
+      background:var(--teal);
+      box-shadow:0 2px 16px rgba(0,0,0,.15);
     }
-    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
-    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    #navbar.scrolled{background:var(--teal-dark);box-shadow:0 4px 24px rgba(0,0,0,.2);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:68px;}
+    @media(max-width:768px){.nav-inner{height:60px;padding:0 1rem;}}
     .nav-logo{display:flex;align-items:center;gap:10px;}
-    .nav-logo img{width:38px;height:38px;border-radius:10px;}
-    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-logo img{width:50px;height:50px;border-radius:8px;}
+    @media(max-width:768px){.nav-logo img{width:40px;height:40px;}}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;}
+    @media(max-width:768px){.nav-logo-text{font-size:.95rem;}}
     .nav-links{display:flex;align-items:center;gap:2px;}
-    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
-    .nav-link.active{color:#fff;background:rgba(255,255,255,.18);}
-    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    .nav-link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.85);padding:6px 14px;border-radius:8px;}
+    .nav-link:hover{background:rgba(255,255,255,.15);color:#fff;}
+    .nav-link.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
     #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+    .nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
 
-    /* ─── HERO ─── */
+    @media(max-width:768px){
+      .nav-links{display:none;}
+      .nav-toggle{display:block;}
+    }
+
+    /* Mobile Menu */
+    #mobile-menu{
+      position:fixed;top:60px;left:0;right:0;bottom:0;
+      background:#fff;z-index:190;
+      overflow-y:auto;max-height:calc(100vh - 60px);
+      box-shadow:0 4px 12px rgba(0,0,0,.1);
+    }
+    #mobile-menu.hidden{display:none;}
+    .mobile-menu-item{padding:16px 16px;border-bottom:1px solid var(--border);}
+    .mobile-menu-item a{
+      font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;
+      display:flex;align-items:center;gap:10px;
+    }
+    .mobile-menu-item i{color:var(--teal);width:18px;}
+
+    /* Profile dropdown */
+    #profile-dropdown{
+      position:absolute;right:0;top:calc(100% + 10px);
+      background:#fff;border:1px solid var(--border);
+      border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.14);
+      min-width:220px;overflow:hidden;
+      opacity:0;transform:translateY(-8px) scale(.97);
+      pointer-events:none;
+    }
+    #profile-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
+
+    /* ─── MAIN CONTENT ─── */
     .hero{
       background:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);
       position:relative;overflow:hidden;padding:3rem 1.5rem;
@@ -146,7 +180,51 @@
     .empty-state-link:hover{text-decoration:underline;}
 
     /* ─── FOOTER ─── */
-    footer{background:#0F172A;color:rgba(255,255,255,.45);padding:2rem 1.5rem;text-align:center;font-size:.75rem;}
+    footer{background:#ffffff;color:rgba(0,0,0,.6);padding:4rem 1.5rem 2rem;}
+    @media(max-width:768px){footer{padding:3rem 1.25rem 1.5rem;}}
+    @media(max-width:640px){footer{padding:2.5rem 1rem 1.5rem;}}
+    
+    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:3.5rem;}
+    @media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:3rem;}}
+    @media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;padding:2.5rem 1.25rem;}}
+    @media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem;}}
+
+    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1.5rem;}
+    @media(max-width:640px){.fc-title{font-size:.8rem;margin-bottom:1.25rem;}}
+    
+    .fc-link{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(0,0,0,.55);margin-bottom:1rem;text-decoration:none;line-height:1.6;}
+    @media(max-width:768px){.fc-link{font-size:.9rem;margin-bottom:.85rem;}}
+    @media(max-width:640px){.fc-link{font-size:.85rem;margin-bottom:.75rem;}}
+
+    .fc-link i{color:var(--teal);width:18px;flex-shrink:0;}
+    .fc-link:hover{color:var(--teal);transform:translateX(4px);transition:all .3s ease;}
+
+    .footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.75rem;}
+    @media(max-width:640px){.footer-social{justify-content:flex-start;gap:10px;margin-top:1.5rem;}}
+
+    .footer-social-btn{
+      width:44px;height:44px;border-radius:50%;
+      background:var(--teal-dim);color:var(--teal);
+      display:flex;align-items:center;justify-content:center;
+      border:2px solid var(--teal);font-size:1rem;text-decoration:none;
+      transition:all .3s ease;
+    }
+    @media(max-width:640px){.footer-social-btn{width:40px;height:40px;font-size:.9rem;}}
+
+    .footer-social-btn:hover{background:var(--teal);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(13,148,136,.25);}
+
+    .footer-bottom{border-top:2px solid var(--border);max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:rgba(0,0,0,.6);}
+    @media(max-width:768px){.footer-bottom{padding:1.25rem 1.25rem;flex-direction:column;text-align:center;gap:1rem;}}
+    @media(max-width:640px){.footer-bottom{padding:1rem 1rem;font-size:.8rem;gap:1rem;}}
+
+    .footer-links{display:flex;gap:2rem;text-decoration:none;}
+    @media(max-width:768px){.footer-links{flex-direction:column;gap:1rem;}}
+    @media(max-width:640px){.footer-links{gap:.75rem;}}
+
+    .footer-links a{color:rgba(0,0,0,.55);text-decoration:none;font-size:.9rem;transition:all .3s ease;}
+    @media(max-width:640px){.footer-links a{font-size:.8rem;}}
+    
+    .footer-links a:hover{color:var(--teal);font-weight:600;}
 
     /* ─── GRID ─── */
     .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem;}
@@ -160,24 +238,35 @@
   <div class="nav-inner">
     <a href="/" class="nav-logo">
       <img src="./images/logo.png" alt="Alpha One Labs"
-           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
-      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+           onerror="this.style.display='none';document.getElementById('logo-fb').style.display='flex'">
+      <div id="logo-fb" style="display:none;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
+        <i class="fas fa-graduation-cap" style="color:#fff;font-size:1.2rem;"></i>
       </div>
       <span class="nav-logo-text">Alpha One Labs</span>
     </a>
     <div class="nav-links">
       <a href="/" class="nav-link">Activities</a>
       <a href="/dashboard.html" class="nav-link active">Dashboard</a>
-      <a href="/teach.html" class="nav-link" id="host-link">Host</a>
-    </div>
-    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
-      <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
-      <button type="button" onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
+      <a href="/teach.html" class="nav-link">Host</a>
     </div>
+    <div id="nav-auth"></div>
+    <button class="nav-toggle" onclick="toggleMobileMenu()"><i class="fas fa-bars"></i></button>
   </div>
 </nav>
 
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="hidden">
+  <div class="mobile-menu-item">
+    <a href="/"><i class="fas fa-home"></i>Activities</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/dashboard.html"><i class="fas fa-gauge"></i>Dashboard</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/teach.html"><i class="fas fa-chalkboard-user"></i>Host</a>
+  </div>
+</div>
+
 <!-- ─── HERO ─── -->
 <div class="hero">
   <div class="hero-mesh"></div>
@@ -214,10 +303,10 @@ <h2 class="section-title" id="section-title">Hosted Activities</h2>
     </div>
 
     <div id="empty-state" class="hidden empty-state">
-  <p class="empty-state-icon">🎓</p>
-  <p class="empty-state-text" id="empty-msg">No hosted activities yet.</p>
-  <a id="empty-action-link" href="/teach.html" class="empty-state-link">Create your first activity →</a>
-</div>
+      <p class="empty-state-icon">🎓</p>
+      <p class="empty-state-text" id="empty-msg">No hosted activities yet.</p>
+      <a id="empty-action-link" href="/teach.html" class="empty-state-link">Create your first activity →</a>
+    </div>
   </section>
 
   <!-- JOINED ACTIVITIES SECTION -->
@@ -225,32 +314,163 @@ <h2 class="section-title" id="section-title">Hosted Activities</h2>
 
 </main>
 
+<!-- ─── PROFILE DROPDOWN ─── -->
+<div id="profile-dropdown">
+  <div style="padding:14px 16px;border-bottom:1px solid var(--border);">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
+      <div>
+        <p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p>
+        <p id="dd-role" style="font-size:.7rem;color:var(--muted);margin-top:1px;"></p>
+      </div>
+    </div>
+  </div>
+  <div style="padding:6px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-user-circle" style="color:var(--teal);width:16px;"></i> View Profile
+    </a>
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-gauge" style="color:var(--teal);width:16px;"></i> Dashboard
+    </a>
+  </div>
+  <div style="padding:6px;border-top:1px solid var(--border);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:#dc2626;font-size:.83rem;font-weight:500;width:100%;text-align:left;">
+      <i class="fas fa-sign-out-alt" style="width:16px;"></i> Sign Out
+    </button>
+  </div>
+</div>
+
 <!-- ─── FOOTER ─── -->
 <footer>
-  <p>&copy; 2024–2026 Alpha One Labs · All user data encrypted at rest</p>
+  <div class="footer-grid">
+    <!-- LEARNING -->
+    <div>
+      <p class="fc-title">Learning</p>
+      <a href="/" class="fc-link"><i class="fas fa-compass"></i>Activities</a>
+      <a href="/dashboard.html" class="fc-link"><i class="fas fa-gauge"></i>Dashboard</a>
+      <a href="/teach.html" class="fc-link"><i class="fas fa-chalkboard"></i>Host Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link"><i class="fas fa-book-open"></i>All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link"><i class="fas fa-list-check"></i>Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link"><i class="fas fa-users"></i>Study Groups</a>
+    </div>
+
+    <!-- COMMUNITY -->
+    <div>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link"><i class="fas fa-comments"></i>Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link"><i class="fas fa-blog"></i>Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link"><i class="fas fa-star"></i>Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link"><i class="fas fa-door-open"></i>Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link"><i class="fas fa-code"></i>GSoC '26</a>
+    </div>
+
+    <!-- RESOURCES & INFO -->
+    <div>
+      <p class="fc-title">Resources</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link"><i class="fas fa-circle-info"></i>About Us</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link"><i class="fas fa-github"></i>GitHub</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link"><i class="fas fa-chart-line"></i>Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link"><i class="fas fa-comment-dots"></i>Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link"><i class="fas fa-shield-halved"></i>Privacy</a>
+    </div>
+
+    <!-- CONNECT -->
+    <div>
+      <p class="fc-title">Connect</p>
+      <div class="footer-social">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="X/Twitter">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:var(--teal);">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+        </a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="footer-social-btn" title="Discord">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="footer-social-btn" title="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="Facebook">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="footer-social-btn" title="GitHub">
+          <i class="fab fa-github"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="footer-social-btn" title="Slack">
+          <i class="fab fa-slack"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footer Bottom -->
+  <div class="footer-bottom">
+    <p>© 2024–2026 Alpha One Labs. All rights reserved. · Cloudflare Workers + D1</p>
+    <div class="footer-links">
+      <a href="https://alphaonelabs.com/en/about/">About Us</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms">Terms & Conditions</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies">Cookie Policy</a>
+    </div>
+  </div>
 </footer>
 
 <script>
   const API = '';
   function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  
+  // Scroll effect for navbar
+  window.addEventListener('scroll',()=>{document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>8);});
+
+  // Mobile menu toggle
+  function toggleMobileMenu(){
+    const menu=document.getElementById('mobile-menu');
+    menu.classList.toggle('hidden');
+    document.body.classList.toggle('overflow-hidden');
+  }
+  document.addEventListener('click',function(e){
+    const menu=document.getElementById('mobile-menu');
+    const btn=e.target.closest('[onclick="toggleMobileMenu()"]');
+    if(!menu.classList.contains('hidden')&&!btn&&!e.target.closest('#mobile-menu')){
+      toggleMobileMenu();
+    }
+  });
+
+  // Auth
   const token = localStorage.getItem('edu_token');
   const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
   if (!token || !user) window.location.href = '/login.html';
-  function logout() { localStorage.clear(); window.location.href = '/login.html'; }
+  
+  function logout() { localStorage.removeItem('edu_token'); localStorage.removeItem('edu_user'); window.location.href = '/login.html'; }
+
+  // Update navbar with user info
+  function updateNav(){
+    const nav=document.getElementById('nav-auth');
+    const dd=document.getElementById('profile-dropdown');
+    if(token&&user){
+      const ini=(user.name||user.username||'?').slice(0,2).toUpperCase();
+      nav.innerHTML=`
+        <a href="/dashboard.html" class="nav-link">Dashboard</a>
+        <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;">${esc(ini)}</button>`;
+      document.getElementById('dd-avatar').textContent=ini;
+      document.getElementById('dd-name').textContent=user.name||user.username;
+      document.getElementById('dd-role').textContent=user.role||'member';
+      nav.appendChild(dd);
+    }
+  }
 
+  let ddOpen=false;
+  function toggleDD(e){e.stopPropagation();ddOpen=!ddOpen;document.getElementById('profile-dropdown').classList.toggle('open',ddOpen);}
+  document.addEventListener('click',()=>{if(ddOpen){ddOpen=false;document.getElementById('profile-dropdown').classList.remove('open');}});
+
+  // Dashboard logic
   const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
   const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
   const fmtLabel  = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
   const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
 
-  document.getElementById('nav-user').textContent = 'Hi, ' + user.username;
-
-  async function loadDashboard() {
-    const res  = await fetch('/api/dashboard', { headers:{ Authorization: 'Bearer ' + token } });
-    const data = await res.json();
-    renderDashboard(data);
-  }
-
   function statCard(value, label) {
     return '<div class="stat-card"><p class="stat-value" style="color:var(--teal);">' + value + '</p><p class="stat-label">' + label + '</p></div>';
   }
@@ -333,6 +553,13 @@ <h2 class="section-title" id="section-title">Hosted Activities</h2>
     document.getElementById('joined-section').innerHTML = joinedHtml;
   }
 
+  async function loadDashboard() {
+    const res  = await fetch('/api/dashboard', { headers:{ Authorization: 'Bearer ' + token } });
+    const data = await res.json();
+    renderDashboard(data);
+  }
+
+  updateNav();
   loadDashboard().catch(e => {
     document.getElementById('activities-list').innerHTML =
       '<p style="color:#EF4444;font-size:.9rem;text-align:center;padding:2rem;">Failed to load dashboard: ' + e.message + '</p>';
diff --git a/public/index.html b/public/index.html
index 4dda298..92ced2d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,481 +1,740 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Alpha One Labs – Discover Activities</title>
-  <link rel="icon" type="image/png" href="/images/logo.png" />
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Alpha One Labs – Where Curiosity Meets Knowledge</title>
+  <link rel="icon" type="image/png" href="https://alphaonelabs.com/static/images/logo.png"/>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          fontFamily: {
-            display: ['Syne', 'sans-serif'],
-            body: ['DM Sans', 'sans-serif'],
-          },
-          colors: {
-            ink: '#0D0D14',
-            paper: '#F7F6F3',
-            brand: { DEFAULT: '#3B48E0', light: '#6470F3', dim: '#E8EAFF' },
-            accent: '#FF5C3A',
-            jade: '#00B27A',
-          },
-        },
-      },
-    };
-  </script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous"/>
   <style>
-    :root {
-      --teal: #0D9488;
-      --teal-dark: #0F766E;
-      --teal-darker: #115E59;
-      --teal-light: #14B8A6;
-      --teal-dim: #CCFBF1;
+    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+    :root{
+      --teal:#0D9488; --teal-d:#0F766E; --teal-dd:#115E59;
+      --teal-l:#14B8A6; --teal-ll:#99F6E4; --teal-dim:#F0FDFA;
+      --orange:#F97316; --orange-d:#EA6C0A;
+      --ink:#1e293b; --muted:#64748b; --border:#E2E8F0;
+      --white:#ffffff; --paper:#F8FAFC;
     }
-    *, *::before, *::after { box-sizing: border-box; }
-    body { font-family: 'DM Sans', sans-serif; background: #FFFFFF; color: #0D0D14; }
-    h1, h2, h3, h4, .font-display { font-family: 'Syne', sans-serif; }
-    .hidden { display: none !important; }
-
-    /* ── Navbar — Teal ── */
-    #navbar {
-      position: sticky; top: 0; z-index: 200;
-      background: #0D9488;
-      border-bottom: 1px solid rgba(0,0,0,.1);
-      box-shadow: 0 2px 12px rgba(0,0,0,.12);
-      transition: background .3s;
+    html{scroll-behavior:smooth;}
+    body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink);overflow-x:hidden;}
+    h1,h2,h3,h4{font-family:'Syne',sans-serif;}
+    .hidden{display:none!important;}
+    a{text-decoration:none;color:inherit;}
+
+    /* ── NAVBAR ── */
+    #navbar{
+      position:sticky;top:0;z-index:200;
+      background:var(--teal);
+      box-shadow:0 2px 16px rgba(0,0,0,.15);
     }
-    #navbar.scrolled { background: #0F766E; box-shadow: 0 4px 20px rgba(0,0,0,.18); }
-
-    /* ── Profile dropdown ── */
-     #profile-dropdown {
-      position: absolute; right: 0; top: calc(100% + 10px);
-      background: #fff;
-      border: 1px solid rgba(13,13,20,.09);
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(13,13,20,.14);
-      min-width: 220px;
-      overflow: hidden;
-      opacity: 0; transform: translateY(-8px) scale(.97);
-      transition: opacity .18s ease, transform .18s ease;
-      pointer-events: none;
-      visibility: hidden;
-    }
-    #profile-dropdown.open {
-      opacity: 1; transform: translateY(0) scale(1);
-      pointer-events: auto;
-      visibility: visible;
+    #navbar.scrolled{background:var(--teal-d);box-shadow:0 4px 24px rgba(0,0,0,.2);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:68px;}
+    @media(max-width:768px){.nav-inner{height:60px;padding:0 1rem;}}
+    .nav-logo{display:flex;align-items:center;gap:10px;}
+    .nav-logo img{width:50px;height:50px;border-radius:8px;}
+    @media(max-width:768px){.nav-logo img{width:40px;height:40px;}}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;}
+    @media(max-width:768px){.nav-logo-text{font-size:.95rem;}}
+    .nav-links{display:flex;align-items:center;gap:2px;}
+    .nav-link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.85);padding:6px 14px;border-radius:8px;}
+    .nav-link:hover{background:rgba(255,255,255,.15);color:#fff;}
+    .nav-link.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
+    #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+    .nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
+
+    @media(max-width:768px){
+      .nav-links{display:none;}
+      .nav-toggle{display:block;}
     }
 
-    /* ── Hero — full-width teal gradient ── */
-    .hero-wrap {
-      position: relative; overflow: hidden;
-      background: linear-gradient(135deg, #0F766E 0%, #0D9488 55%, #14B8A6 100%);
+    /* Mobile Menu */
+    #mobile-menu{
+      position:fixed;top:60px;left:0;right:0;bottom:0;
+      background:#fff;z-index:190;
+      overflow-y:auto;max-height:calc(100vh - 60px);
+      box-shadow:0 4px 12px rgba(0,0,0,.1);
     }
-    .hero-mesh {
-      position: absolute; inset: 0; z-index: 0; pointer-events: none;
-      background:
-        radial-gradient(ellipse 80% 60% at 15% 40%, rgba(255,255,255,.12) 0%, transparent 55%),
-        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(20,184,166,.2) 0%, transparent 50%),
-        radial-gradient(ellipse 45% 40% at 60% 85%, rgba(249,115,22,.12) 0%, transparent 50%);
+    #mobile-menu.hidden{display:none;}
+    .mobile-menu-item{padding:16px 16px;border-bottom:1px solid var(--border);}
+    .mobile-menu-item a{
+      font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;
+      display:flex;align-items:center;gap:10px;
     }
-    .hero-grid-bg {
-      position: absolute; inset: 0; z-index: 1; pointer-events: none;
-      background-image:
-        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
-      background-size: 48px 48px;
-      mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, black 20%, transparent 75%);
+    .mobile-menu-item i{color:var(--teal);width:18px;}
+    .accordion-btn{
+      width:100%;padding:12px 16px;border:none;background:none;
+      font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);
+      display:flex;align-items:center;justify-content:space-between;
+      cursor:pointer;font-size:.95rem;
     }
-    .orb { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; animation: orbFloat 9s ease-in-out infinite; }
-    .orb-1 { width: 280px; height: 280px; background: rgba(255,255,255,.08); top: 8%; left: 2%; animation-delay: 0s; }
-    .orb-2 { width: 200px; height: 200px; background: rgba(0,178,122,.12); top: 55%; right: 5%; animation-delay: -3.5s; }
-    .orb-3 { width: 160px; height: 160px; background: rgba(249,115,22,.1); bottom: 10%; left: 40%; animation-delay: -7s; }
-    @keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.05)} }
-
-    .hero-content {
-      position: relative; z-index: 10;
-      max-width: 1200px; margin: 0 auto;
-      padding: 5rem 1.5rem 4rem;
-      display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
+    .accordion-btn i{color:var(--teal);}
+    .accordion-content{display:flex;flex-direction:column;background:var(--paper);}
+    .accordion-content.hidden{display:none;}
+    .accordion-content a{
+      padding:10px 16px 10px 40px;font-size:.85rem;color:var(--muted);
+      display:flex;align-items:center;gap:8px;
     }
-    @media (max-width: 900px) { .hero-content { grid-template-columns: 1fr; } }
-
-    .hero-pill {
-      display: inline-flex; align-items: center; gap: 8px;
-      background: rgba(255,255,255,.1); color: rgba(255,255,255,.88);
-      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
-      letter-spacing: .1em; text-transform: uppercase;
-      padding: 7px 16px; border-radius: 999px;
-      border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(8px);
+    .accordion-content a i{font-size:.7rem;}
+
+    /* Profile dropdown */
+    #profile-dropdown{
+      position:absolute;right:0;top:calc(100% + 10px);
+      background:#fff;border:1px solid var(--border);
+      border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.14);
+      min-width:220px;overflow:hidden;
+      opacity:0;transform:translateY(-8px) scale(.97);
+      pointer-events:none;
     }
-    .pill-dot { width: 6px; height: 6px; background: #00B27A; border-radius: 50%; box-shadow: 0 0 6px #00B27A; animation: blink 2s ease infinite; }
-    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
-
-    .hero-title {
-      font-family: 'Syne', sans-serif;
-      font-size: clamp(2.7rem, 5vw, 4.4rem);
-      font-weight: 800;
-      line-height: 1.04;
-      letter-spacing: -.04em;
-      color: #fff;
+    #profile-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
+     
+    /* ── HERO ── */
+    @keyframes iconJump {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-25px); }
+}
+  
+  .hero-icon {
+    animation: iconJump 3.5s ease-in-out infinite;
+  }
+  
+  /* Stagger each icon for wave effect */
+  .hi1 { animation-delay: 0s; }
+  .hi2 { animation-delay: 0.2s; }
+  .hi3 { animation-delay: 0.4s; }
+  .hi4 { animation-delay: 0.6s; }
+  .hi5 { animation-delay: 0.8s; }
+  .hi6 { animation-delay: 1s; }
+  .hi7 { animation-delay: 1.2s; }
+    .hero-wrap{
+      position:relative;overflow:hidden;
+      background:linear-gradient(135deg,var(--teal-dd) 0%,var(--teal) 55%,var(--teal-l) 100%);
+      min-height:88vh;display:flex;flex-direction:column;
     }
-    .hero-title .gt { background: linear-gradient(135deg, #fff 0%, #CCFBF1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
-    .hero-title span.line2 { display: block; }
-
-    .btn-primary {
-      display: inline-flex; align-items: center; gap: 8px;
-      background: #fff; color: var(--teal-dark);
-      font-family: 'Syne', sans-serif; font-weight: 700; font-size: .9rem;
-      padding: 14px 26px; border-radius: 12px;
-      transition: background .18s, transform .14s, box-shadow .18s;
-      border: none; cursor: pointer;
+    @media(max-width:768px){.hero-wrap{min-height:75vh;}}
+    @media(max-width:640px){.hero-wrap{min-height:65vh;}}
+
+    .hero-icons-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
+    .hero-icon{position:absolute;color:rgba(255,255,255,.1);font-size:4rem;}
+    .hi1{top:8%;left:6%;}
+    .hi2{top:18%;right:10%;font-size:5rem;}
+    .hi3{bottom:18%;left:14%;font-size:3.5rem;}
+    .hi4{bottom:22%;right:7%;font-size:4.5rem;}
+    .hi5{top:48%;left:48%;font-size:5.5rem;}
+    .hi6{top:4%;left:44%;font-size:3rem;}
+    .hi7{bottom:6%;left:58%;font-size:4rem;}
+    @media(max-width:768px){
+      .hero-icon{font-size:2.5rem;}
+      .hi2{font-size:3rem;}
+      .hi5{font-size:3.5rem;}
     }
-    .btn-primary:hover { background: #F0FDFA; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
-
-    .btn-outline {
-      display: inline-flex; align-items: center; gap: 8px;
-      background: rgba(255,255,255,.1); color: rgba(255,255,255,.9);
-      font-family: 'Syne', sans-serif; font-weight: 600; font-size: .9rem;
-      padding: 13px 26px; border-radius: 12px;
-      border: 1.5px solid rgba(255,255,255,.2);
-      transition: background .18s, border-color .18s;
-      cursor: pointer;
+
+    .hero-grid-bg{
+      position:absolute;inset:0;
+      background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
+      background-size:48px 48px;
+      mask-image:radial-gradient(ellipse 85% 70% at 50% 50%,black 20%,transparent 75%);
+      pointer-events:none;
     }
-    .btn-outline:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
 
-    /* ── Hero visual card ── */
-    .hero-visual {
-      position: relative;
+    .hero-content{
+      position:relative;z-index:10;
+      max-width:1200px;margin:0 auto;
+      padding:5rem 1.5rem 4rem;
+      display:grid;grid-template-columns:3fr 2fr;gap:3.5rem;align-items:center;
+      flex:1;width:100%;
     }
-    .hero-card {
-      background: rgba(255,255,255,.08);
-      border-radius: 24px;
-      border: 1px solid rgba(255,255,255,.15);
-      box-shadow: 0 40px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
-      padding: 2rem;
-      position: relative;
-      overflow: hidden;
-      backdrop-filter: blur(16px);
+    @media(max-width:900px){.hero-content{grid-template-columns:1fr;gap:2rem;padding:3rem 1.5rem 2rem;}}
+    @media(max-width:640px){.hero-content{padding:2rem 1rem 1.5rem;}}
+
+    .hero-open-badge{
+      display:inline-flex;align-items:center;gap:8px;
+      background:rgba(255,255,255,.18);color:#fff;
+      font-family:'Syne',sans-serif;font-size:.72rem;font-weight:700;
+      letter-spacing:.1em;text-transform:uppercase;
+      padding:7px 16px;border-radius:999px;
+      border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);
+      margin-bottom:1.5rem;
     }
-    .hero-card::before {
-      content: '';
-      position: absolute; top: 0; left: 0; right: 0; height: 3px;
-      background: linear-gradient(90deg, #fff 0%, #14B8A6 50%, #F97316 100%);
-      opacity: .6;
+    @media(max-width:640px){.hero-open-badge{font-size:.65rem;padding:6px 12px;}}
+    .badge-dot{width:7px;height:7px;background:#34d399;border-radius:50%;box-shadow:0 0 7px #34d399;}
+
+    .hero-title{
+      font-family:'Syne',sans-serif;
+      font-size:clamp(2.8rem,5vw,4.5rem);
+      font-weight:800;line-height:1.04;letter-spacing:-.04em;color:#fff;
+      margin-bottom:1.25rem;
     }
-    .enc-badge {
-      display: inline-flex; align-items: center; gap: 6px;
-      background: rgba(0,178,122,.2); color: #4ade80;
-      font-size: .75rem; font-weight: 600; font-family: 'Syne', sans-serif;
-      padding: 4px 12px; border-radius: 999px;
-      border: 1px solid rgba(0,178,122,.3);
+    .hero-title .yellow-grad{background:linear-gradient(90deg,#fde68a,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent;}
+    .hero-title .cyan-grad{background:linear-gradient(90deg,#a5f3fc,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent;}
+
+    .hero-sub{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.72;margin-bottom:2.25rem;max-width:520px;}
+    @media(max-width:640px){.hero-sub{font-size:.95rem;line-height:1.65;margin-bottom:1.5rem;}}
+
+    .btn-hero-w{
+      display:inline-flex;align-items:center;gap:8px;
+      background:#fff;color:var(--teal-d);
+      font-family:'Syne',sans-serif;font-weight:700;font-size:.92rem;
+      padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
+      box-shadow:0 4px 18px rgba(0,0,0,.15);
     }
-    .mini-activity {
-      display: flex; align-items: center; gap: 12px;
-      padding: 11px 13px; border-radius: 12px;
-      background: rgba(255,255,255,.06); margin-top: 9px;
-      border: 1px solid rgba(255,255,255,.06);
-      transition: background .15s;
+    .btn-hero-w:hover{background:#F0FDFA;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.2);}
+    .btn-hero-w i{font-size:1.1rem;}
+    @media(max-width:640px){.btn-hero-w{font-size:.85rem;padding:11px 20px;}}
+
+    .btn-hero-outline{
+      display:inline-flex;align-items:center;gap:8px;
+      background:transparent;color:#fff;
+      font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;
+      padding:13px 26px;border-radius:12px;
+      border:2px solid rgba(255,255,255,.3);cursor:pointer;
     }
-    .mini-activity:hover { background: rgba(255,255,255,.1); }
-    .mini-dot { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
-
-    /* ── Stat strip ── */
-    .stat-strip {
-      display: grid; grid-template-columns: repeat(3, 1fr);
-      background: #0F172A; color: #fff;
-      border-radius: 20px; overflow: hidden;
+    .btn-hero-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);transform:translateY(-1px);}
+    @media(max-width:640px){.btn-hero-outline{font-size:.8rem;padding:10px 20px;}}
+
+    .hero-glass{
+      background:rgba(255,255,255,.1);
+      border:1px solid rgba(255,255,255,.2);
+      border-radius:22px;overflow:hidden;
+      backdrop-filter:blur(14px);
+      box-shadow:0 32px 64px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
     }
-    .stat-item { padding: 2rem; border-right: 1px solid rgba(255,255,255,.07); }
-    .stat-item:last-child { border-right: none; }
-    .stat-num { font-family: 'Syne', sans-serif; font-size: 2.4rem; font-weight: 800; }
-    .stat-label { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 2px; }
-
-    /* ── Section label ── */
-    .section-label {
-      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
-      letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
-      margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
+    @media(max-width:900px){.hero-glass{padding:1rem;}}
+
+    .glass-header{
+      padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.1);
+      display:flex;align-items:center;justify-content:space-between;
+      background:rgba(255,255,255,.05);
     }
-    .section-label::before { content: ''; width: 18px; height: 2px; background: var(--teal); border-radius: 1px; }
-
-    /* ── Activity Cards ── */
-    .act-card {
-      background: #fff;
-      border-radius: 20px;
-      border: 1px solid #E2E8F0;
-      padding: 1.5rem;
-      display: flex; flex-direction: column; gap: 1rem;
-      transition: transform .2s, box-shadow .2s, border-color .2s;
-      position: relative; overflow: hidden;
+    @media(max-width:640px){.glass-header{padding:.75rem 1rem;}}
+
+    .mac-dots{display:flex;gap:6px;}
+    .mac-dots span{width:10px;height:10px;border-radius:50%;}
+    .live-indicator{display:flex;align-items:center;gap:6px;font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.06em;}
+    @media(max-width:640px){.live-indicator{font-size:.6rem;}}
+
+    .live-dot{width:7px;height:7px;background:#34d399;border-radius:50%;box-shadow:0 0 7px #34d399;}
+    .glass-row{
+      display:flex;align-items:center;gap:12px;padding:12px 16px;
+      border-bottom:1px solid rgba(255,255,255,.06);
     }
-    .act-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 20px 50px rgba(13,13,20,.1);
-      border-color: rgba(13,148,136,.25);
+    @media(max-width:640px){.glass-row{padding:10px 12px;gap:8px;}}
+
+    .glass-row:last-of-type{border-bottom:none;}
+    .g-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;}
+    @media(max-width:640px){.g-icon{width:32px;height:32px;font-size:.85rem;}}
+
+    .g-bar{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:5px;overflow:hidden;}
+    .g-fill{height:100%;border-radius:2px;}
+    .glass-footer{padding:10px 16px;background:rgba(0,178,122,.08);border-top:1px solid rgba(0,178,122,.15);display:flex;align-items:center;gap:8px;}
+    @media(max-width:640px){.glass-footer{padding:8px 12px;gap:6px;font-size:.65rem;}}
+
+    .hero-wave{position:relative;z-index:10;}
+    .hero-wave svg{display:block;width:100%;}
+
+    /* ── STATS ROW ── */
+    .stats-row{background:var(--white);border-bottom:1px solid var(--border);}
+    .stats-grid{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);}
+    @media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
+    @media(max-width:640px){.stats-grid{grid-template-columns:1fr;padding:0 1rem;}}
+    
+    .stat-cell{
+      padding:2rem 1.5rem;border-right:1px solid var(--border);
+      position:relative;overflow:hidden;cursor:default;
     }
-    .act-card::after {
-      content: ''; position: absolute; inset: 0;
-      border-radius: 20px;
-      opacity: 0; transition: opacity .2s;
-      background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(13,148,136,.05) 0%, transparent 60%);
-      pointer-events: none;
+    @media(max-width:900px){.stat-cell{padding:1.5rem 1.25rem;}}
+    @media(max-width:640px){
+      .stat-cell{padding:1.25rem 1rem;border-right:none;border-bottom:1px solid var(--border);}
+      .stat-cell:last-child{border-bottom:none;}
     }
-    .act-card:hover::after { opacity: 1; }
 
-    .type-badge {
-      display: inline-flex; align-items: center; gap: 4px;
-      font-family: 'Syne', sans-serif; font-size: .7rem; font-weight: 700;
-      padding: 4px 10px; border-radius: 8px; letter-spacing: .04em; text-transform: uppercase;
+    .stat-cell:last-child{border-right:none;}
+    .stat-cell:hover{background:var(--teal-dim);}
+    .stat-num{font-family:'Syne',sans-serif;font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.04em;}
+    @media(max-width:640px){.stat-num{font-size:1.8rem;}}
+    .stat-lbl{font-size:.8rem;color:var(--muted);margin-top:5px;}
+    @media(max-width:640px){.stat-lbl{font-size:.75rem;}}
+
+    /* ── SECTION DIVIDERS ── */
+    .sec-divider{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap;}
+    @media(max-width:768px){.sec-divider{margin-bottom:1.75rem;gap:.75rem;}}
+    @media(max-width:640px){.sec-divider{gap:.5rem;}}
+
+    .sec-divider-line{flex:1;height:2px;background:linear-gradient(90deg,var(--teal-ll),var(--border));min-width:30px;}
+    .sec-divider-line.right{background:linear-gradient(270deg,var(--teal-ll),var(--border));}
+    .sec-divider-icon{
+      width:42px;height:42px;border-radius:12px;flex-shrink:0;
+      background:linear-gradient(135deg,var(--teal),var(--teal-l));
+      display:flex;align-items:center;justify-content:center;
+      box-shadow:0 4px 12px rgba(13,148,136,.3);
     }
-    .fmt-badge {
-      display: inline-flex; align-items: center;
-      font-size: .72rem; font-weight: 500;
-      padding: 3px 10px; border-radius: 999px;
+    @media(max-width:640px){.sec-divider-icon{width:36px;height:36px;}}
+
+    .sec-divider-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.025em;background:linear-gradient(90deg,var(--teal-d),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
+    @media(max-width:768px){.sec-divider-title{font-size:1.25rem;}}
+    @media(max-width:640px){.sec-divider-title{font-size:1.1rem;}}
+
+    /* ── ACTIVITY BROWSER ── */
+    .acts-wrap{max-width:1200px;margin:5rem auto;padding:0 1.5rem;}
+    @media(max-width:768px){.acts-wrap{margin:3rem auto;padding:0 1.25rem;}}
+    @media(max-width:640px){.acts-wrap{margin:2rem auto;padding:0 1rem;}}
+
+    .filter-bar{display:flex;gap:10px;flex-wrap:wrap;}
+    @media(max-width:768px){.filter-bar{gap:8px;}}
+    @media(max-width:640px){.filter-bar{flex-direction:column;}}
+
+    .filter-group{display:flex;flex-direction:column;gap:5px;}
+    @media(max-width:640px){.filter-group{width:100%;}}
+
+    .filter-label{font-size:.73rem;font-weight:600;color:var(--muted);}
+    .filter-input{
+      background:#fff;border:1.5px solid var(--border);border-radius:10px;
+      padding:9px 14px;font-family:'DM Sans',sans-serif;font-size:.86rem;color:var(--ink);
+      outline:none;
     }
-    .tag-chip {
-      font-size: .7rem; font-weight: 500;
-      padding: 3px 10px; border-radius: 999px;
-      background: #F1F5F9; color: #64748B;
-      border: 1px solid #E2E8F0;
+    @media(max-width:640px){.filter-input{width:100%;font-size:.8rem;padding:8px 12px;}}
+
+    .filter-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.12);}
+    .tag-pill{
+      cursor:pointer;font-family:'Syne',sans-serif;font-size:.71rem;font-weight:600;
+      padding:5px 14px;border-radius:999px;border:1.5px solid var(--border);
+      background:#fff;color:var(--muted);
     }
+    @media(max-width:640px){.tag-pill{font-size:.68rem;padding:4px 12px;}}
+
+    .tag-pill:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim);}
+    .tag-pill.active{background:var(--teal);color:#fff;border-color:var(--teal);}
 
-    /* ── Tag cloud ── */
-    .tag-pill {
-      cursor: pointer;
-      font-family: 'Syne', sans-serif; font-size: .72rem; font-weight: 600;
-      padding: 6px 14px; border-radius: 999px;
-      border: 1.5px solid #E2E8F0;
-      background: #fff; color: #64748B;
-      transition: all .15s;
+    #activity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.5rem;}
+    @media(max-width:768px){#activity-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;}}
+    @media(max-width:640px){#activity-grid{grid-template-columns:1fr;gap:1rem;}}
+
+    .act-card{
+      background:#fff;border-radius:18px;border:1px solid var(--border);padding:1.5rem;
+      display:flex;flex-direction:column;gap:.9rem;
+      position:relative;overflow:hidden;
+    }
+    @media(max-width:640px){.act-card{padding:1.25rem;}}
+
+    .act-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;}
+    .act-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.1);border-color:rgba(13,148,136,.25);}
+    .act-card:hover::before{opacity:1;}
+    .act-card.tc::before{background:linear-gradient(90deg,#3B48E0,#6470F3);}
+    .act-card.tm::before{background:linear-gradient(90deg,#F97316,#fb923c);}
+    .act-card.tw::before{background:linear-gradient(90deg,#00B27A,#4ade80);}
+    .act-card.ts::before{background:linear-gradient(90deg,#0D9488,#14b8a6);}
+    .act-card.to::before{background:linear-gradient(90deg,#9333ea,#c084fc);}
+    .act-card::after{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(13,148,136,.05) 0%,transparent 55%);opacity:0;pointer-events:none;}
+    .act-card:hover::after{opacity:1;}
+    .type-badge{display:inline-flex;align-items:center;font-family:'Syne',sans-serif;font-size:.67rem;font-weight:700;padding:4px 10px;border-radius:7px;letter-spacing:.04em;text-transform:uppercase;}
+    .fmt-badge{display:inline-flex;align-items:center;font-size:.7rem;font-weight:500;padding:3px 10px;border-radius:999px;}
+    .tag-chip{font-size:.68rem;font-weight:500;padding:3px 10px;border-radius:999px;background:#F1F5F9;color:#64748b;border:1px solid var(--border);}
+
+    /* ── WHAT WOULD YOU LIKE TO DO ── */
+    .do-section{max-width:1200px;margin:5rem auto;padding:0 1.5rem;}
+    @media(max-width:768px){.do-section{margin:3rem auto;padding:0 1.25rem;}}
+    @media(max-width:640px){.do-section{margin:2rem auto;padding:0 1rem;}}
+
+    .do-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
+    @media(max-width:640px){.do-grid{grid-template-columns:1fr;gap:1rem;}}
+
+    .do-card{
+      display:flex;flex-direction:column;align-items:center;justify-content:center;
+      padding:3.5rem 2rem;border-radius:20px;text-align:center;cursor:pointer;
+      box-shadow:0 4px 20px rgba(0,0,0,.08);
     }
-    .tag-pill:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }
-    .tag-pill.active { background: var(--teal); color: #fff; border-color: var(--teal); }
-
-    /* ── Filters ── */
-    .filter-input {
-      background: #fff; border: 1.5px solid #E2E8F0;
-      border-radius: 12px; padding: 10px 16px;
-      font-family: 'DM Sans', sans-serif; font-size: .875rem; color: #0D0D14;
-      outline: none; transition: border-color .15s;
+    @media(max-width:768px){.do-card{padding:2.5rem 1.5rem;}}
+    @media(max-width:640px){.do-card{padding:2rem 1.5rem;}}
+
+    .do-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.15);}
+    .do-card .do-icon{font-size:3rem;margin-bottom:1rem;}
+    @media(max-width:640px){.do-card .do-icon{font-size:2.5rem;margin-bottom:.75rem;}}
+
+    .do-card:hover .do-icon{transform:scale(1.12);}
+    .do-card .do-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.3rem;margin-bottom:.5rem;}
+    @media(max-width:640px){.do-card .do-title{font-size:1.1rem;}}
+
+    .do-card .do-sub{font-size:.86rem;opacity:.85;line-height:1.5;}
+    @media(max-width:640px){.do-card .do-sub{font-size:.8rem;}}
+
+    /* ── HOW IT WORKS ── */
+    .how-section{background:var(--paper);padding:5rem 1.5rem;}
+    @media(max-width:768px){.how-section{padding:3rem 1.25rem;}}
+    @media(max-width:640px){.how-section{padding:2rem 1rem;}}
+
+    .how-inner{max-width:1200px;margin:0 auto;}
+    .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;position:relative;}
+    @media(max-width:900px){.steps-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem;}}
+    @media(max-width:640px){.steps-grid{grid-template-columns:1fr;gap:1.25rem;}}
+
+    .steps-grid::before{content:'';position:absolute;top:28px;left:calc(16.66% + 28px);right:calc(16.66% + 28px);height:2px;background:linear-gradient(90deg,var(--teal),var(--teal-l));opacity:.3;}
+    @media(max-width:900px){.steps-grid::before{left:50%;transform:translateX(-50%);right:auto;height:auto;width:2px;top:0;bottom:-2rem;}}
+    @media(max-width:640px){.steps-grid::before{display:none;}}
+
+    .step{text-align:center;}
+    .step-num{
+      width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
+      font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;
+      margin:0 auto 1.25rem;border:2px solid;
     }
-    .filter-input:focus { border-color: var(--teal); }
+    @media(max-width:640px){.step-num{width:48px;height:48px;font-size:1rem;margin:0 auto 1rem;}}
+
+    .step:hover .step-num{transform:scale(1.1);}
+    .step-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:.5rem;}
+    @media(max-width:640px){.step-title{font-size:.85rem;}}
+
+    .step-desc{font-size:.83rem;color:var(--muted);line-height:1.65;}
+    @media(max-width:640px){.step-desc{font-size:.78rem;}}
+
+    /* ── FEATURES (dark) ── */
+    .feats-section{background:#0F172A;padding:6rem 1.5rem;position:relative;overflow:hidden;}
+    @media(max-width:768px){.feats-section{padding:4rem 1.25rem;}}
+    @media(max-width:640px){.feats-section{padding:3rem 1rem;}}
 
-    /* ── Features section ── */
-    .feat-card {
-      background: #fff; border-radius: 20px;
-      border: 1px solid rgba(13,13,20,.07);
-      padding: 2rem;
+    .feats-bg{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 25% 50%,rgba(13,148,136,.14) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 25%,rgba(249,115,22,.08) 0%,transparent 55%);pointer-events:none;}
+    .feats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;}
+    @media(max-width:768px){.feats-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;}}
+    @media(max-width:640px){.feats-grid{grid-template-columns:1fr;gap:1rem;}}
+
+    .feat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:2rem;}
+    @media(max-width:640px){.feat-card{padding:1.5rem;}}
+
+    .feat-card:hover{background:rgba(255,255,255,.07);border-color:rgba(13,148,136,.35);transform:translateY(-3px);}
+    .feat-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem;}
+    @media(max-width:640px){.feat-icon{width:40px;height:40px;font-size:1.1rem;}}
+
+    /* ── FOR LEARNERS / TEACHERS ── */
+    .for-section{max-width:1200px;margin:5rem auto;padding:0 1.5rem;}
+    @media(max-width:768px){.for-section{margin:3rem auto;padding:0 1.25rem;}}
+    @media(max-width:640px){.for-section{margin:2rem auto;padding:0 1rem;}}
+
+    .for-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
+    @media(max-width:640px){.for-grid{grid-template-columns:1fr;gap:1rem;}}
+
+    .for-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:1.75rem;box-shadow:0 2px 12px rgba(0,0,0,.05);}
+    @media(max-width:640px){.for-card{padding:1.5rem;}}
+
+    .for-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1);}
+    .for-item{display:flex;align-items:center;gap:12px;padding:.6rem 0;}
+    @media(max-width:640px){.for-item{gap:10px;}}
+
+    .for-item-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
+    @media(max-width:640px){.for-item-icon{width:30px;height:30px;}}
+
+    /* ── OSL AFFILIATION ── */
+    .osl-section{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:3rem 1.5rem;}
+    @media(max-width:768px){.osl-section{padding:2rem 1.25rem;}}
+    @media(max-width:640px){.osl-section{padding:1.5rem 1rem;}}
+
+    .osl-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;}
+    @media(max-width:768px){.osl-inner{gap:2rem;}}
+    @media(max-width:640px){.osl-inner{flex-direction:column;gap:1.5rem;}}
+
+    .osl-inner img{height:120px;}
+    @media(max-width:640px){.osl-inner img{height:100px;}}
+
+    /* ── CTA BAND ── */
+    .cta-section{max-width:1200px;margin:5rem auto;padding:0 1.5rem;}
+    @media(max-width:768px){.cta-section{margin:3rem auto;padding:0 1.25rem;}}
+    @media(max-width:640px){.cta-section{margin:2rem auto;padding:0 1rem;}}
+
+    .cta-inner{
+      background:linear-gradient(135deg,var(--teal-dd),var(--teal));
+      border-radius:24px;padding:3.5rem;color:#fff;
+      display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
+      position:relative;overflow:hidden;
     }
-    .feat-icon {
-      width: 48px; height: 48px; border-radius: 14px;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 1.4rem; margin-bottom: 1rem;
+    @media(max-width:768px){.cta-inner{padding:2.5rem;gap:1.5rem;border-radius:18px;}}
+    @media(max-width:640px){.cta-inner{padding:2rem 1.5rem;gap:1rem;flex-direction:column;text-align:center;}}
+
+    .cta-inner::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(255,255,255,.07);border-radius:50%;}
+    .cta-inner::after{content:'';position:absolute;bottom:-60px;left:-30px;width:240px;height:240px;background:rgba(255,255,255,.05);border-radius:50%;}
+    .btn-cta-orange{
+      display:inline-flex;align-items:center;gap:8px;
+      background:var(--orange);color:#fff;
+      font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;
+      padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
+      position:relative;z-index:1;
     }
-
-    /* ── CTA band ── */
-    .cta-band {
-      background: #0F172A; border-radius: 24px;
-      padding: 3.5rem; color: #fff;
-      display: flex; align-items: center; justify-content: space-between; gap: 2rem;
-      flex-wrap: wrap;
+    @media(max-width:640px){.btn-cta-orange{font-size:.8rem;padding:11px 20px;}}
+
+    .btn-cta-orange:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(249,115,22,.4);}
+    .btn-cta-ghost{
+      display:inline-flex;align-items:center;gap:8px;
+      background:rgba(255,255,255,.15);color:#fff;
+      font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;
+      padding:13px 26px;border-radius:12px;
+      border:1px solid rgba(255,255,255,.25);cursor:pointer;
+      position:relative;z-index:1;
+    }
+    @media(max-width:640px){.btn-cta-ghost{font-size:.8rem;padding:10px 20px;}}
+
+    .btn-cta-ghost:hover{background:rgba(255,255,255,.25);}
+ /* ── FOOTER ── */
+    footer{background:#ffffff;color:rgba(0,0,0,.6);padding:4rem 1.5rem 2rem;}
+    @media(max-width:768px){footer{padding:3rem 1.25rem 1.5rem;}}
+    @media(max-width:640px){footer{padding:2.5rem 1rem 1.5rem;}}
+    
+    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:3.5rem;}
+    @media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:3rem;}}
+    @media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;padding:2.5rem 1.25rem;}}
+    @media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem;}}
+
+    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1.5rem;}
+    @media(max-width:640px){.fc-title{font-size:.8rem;margin-bottom:1.25rem;}}
+    
+    .fc-link{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(0,0,0,.55);margin-bottom:1rem;text-decoration:none;line-height:1.6;}
+    @media(max-width:768px){.fc-link{font-size:.9rem;margin-bottom:.85rem;}}
+    @media(max-width:640px){.fc-link{font-size:.85rem;margin-bottom:.75rem;}}
+
+    .fc-link i{color:var(--teal);width:18px;flex-shrink:0;}
+    .fc-link:hover{color:var(--teal);transform:translateX(4px);transition:all .3s ease;}
+
+    .footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.75rem;}
+    @media(max-width:640px){.footer-social{justify-content:flex-start;gap:10px;margin-top:1.5rem;}}
+
+    .footer-social-btn{
+      width:44px;height:44px;border-radius:50%;
+      background:var(--teal-dim);color:var(--teal);
+      display:flex;align-items:center;justify-content:center;
+      border:2px solid var(--teal);font-size:1rem;text-decoration:none;
+      transition:all .3s ease;
     }
+    @media(max-width:640px){.footer-social-btn{width:40px;height:40px;font-size:.9rem;}}
+
+    .footer-social-btn:hover{background:var(--teal);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(13,148,136,.25);}
+
+    .footer-bottom{border-top:2px solid var(--border);max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:rgba(0,0,0,.6);}
+    @media(max-width:768px){.footer-bottom{padding:1.25rem 1.25rem;flex-direction:column;text-align:center;gap:1rem;}}
+    @media(max-width:640px){.footer-bottom{padding:1rem 1rem;font-size:.8rem;gap:1rem;}}
 
-    /* ── Footer ── */
-    footer { background: #0F172A; color: rgba(255,255,255,.45); }
-    .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
-    @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
-    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
-    .fc-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }
-    .fc-link { display: block; font-size: .82rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: .55rem; transition: color .15s; }
-    .fc-link:hover { color: rgba(255,255,255,.8); }
-    .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
-    .f-social { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
-    .f-social:hover { background: var(--teal-dim); color: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
-    .f-social svg, .f-social i { font-size: 1rem; }
-
-    /* ── Skeleton pulse ── */
-    @keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
-    .skel { background: rgba(13,13,20,.06); border-radius: 12px; animation: pulse 1.4s ease infinite; }
-
-    /* ── Page fade-in ── */
-    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
-    .fade-up { animation: fadeUp .55s ease both; }
-    .fade-up-2 { animation: fadeUp .55s .12s ease both; }
-    .fade-up-3 { animation: fadeUp .55s .22s ease both; }
+    .footer-links{display:flex;gap:2rem;text-decoration:none;}
+    @media(max-width:768px){.footer-links{flex-direction:column;gap:1rem;}}
+    @media(max-width:640px){.footer-links{gap:.75rem;}}
+
+    .footer-links a{color:rgba(0,0,0,.55);text-decoration:none;font-size:.9rem;transition:all .3s ease;}
+    @media(max-width:640px){.footer-links a{font-size:.8rem;}}
+    
+    .footer-links a:hover{color:var(--teal);font-weight:600;}
+
+    .skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.09) 50%,rgba(0,0,0,.05) 75%);background-size:800px 100%;border-radius:12px;}
+
+    #no-results{text-align:center;color:var(--muted);padding:5rem 0;}
+    @media(max-width:640px){#no-results{padding:3rem 0;}}
   </style>
 </head>
 <body>
 
-<!-- ════════════════════════════════════ NAVBAR ══ -->
+<!-- NAVBAR -->
 <nav id="navbar">
-  <div style="max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;">
-
-    <!-- Logo -->
-    <a href="/" style="display:flex;align-items:center;gap:10px;text-decoration:none;">
-      <img src="./images/logo.png" alt="Alpha One Labs" style="width:38px;height:38px;border-radius:8px;"
-           onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
-      <div style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+  <div class="nav-inner">
+    <a href="/" class="nav-logo">
+      <img src="https://alphaonelabs.com/static/images/logo.png" alt="Alpha One Labs"
+           onerror="this.style.display='none';document.getElementById('logo-fb').style.display='flex'">
+      <div id="logo-fb" style="display:none;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
+        <i class="fas fa-graduation-cap" style="color:#fff;font-size:1.2rem;"></i>
       </div>
-      <span style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;">Alpha One Labs</span>
+      <span class="nav-logo-text">Alpha One Labs</span>
     </a>
-
-    <!-- Center nav -->
-    <div style="display:flex;align-items:center;gap:2px;">
-      <a href="/" style="font-size:.84rem;font-weight:600;color:#fff;padding:6px 14px;border-radius:8px;text-decoration:none;background:rgba(255,255,255,.18);">Activities</a>
-      <a href="/dashboard.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;text-decoration:none;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Dashboard</a>
-      <a href="/teach.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;text-decoration:none;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Host</a>
+    <div class="nav-links">
+      <a href="/" class="nav-link active">Activities</a>
+      <a href="/dashboard.html" class="nav-link">Dashboard</a>
+      <a href="/teach.html" class="nav-link">Host</a>
     </div>
-
-    <!-- Auth area -->
-    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;"></div>
+    <div id="nav-auth"></div>
+    <button class="nav-toggle" onclick="toggleMobileMenu()"><i class="fas fa-bars"></i></button>
   </div>
 </nav>
 
-<!-- ════════════════════════════════════ HERO ══ -->
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="hidden">
+  <div class="mobile-menu-item">
+    <a href="/"><i class="fas fa-home"></i>Activities</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/dashboard.html"><i class="fas fa-gauge"></i>Dashboard</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/teach.html"><i class="fas fa-chalkboard-user"></i>Host</a>
+  </div>
+  <div class="mobile-menu-item">
+    <button class="accordion-btn" onclick="toggleAccordion('auth-accordion')">
+      <span><i class="fas fa-user"></i>Auth</span>
+      <i class="fas fa-chevron-down" id="auth-accordion-icon"></i>
+    </button>
+    <div class="accordion-content hidden" id="auth-accordion">
+      <a href="/login.html"><i class="fas fa-sign-in-alt"></i>Login</a>
+      <a href="/login.html?tab=register"><i class="fas fa-user-plus"></i>Signup</a>
+    </div>
+  </div>
+</div>
+
+<!-- HERO -->
 <section class="hero-wrap">
-  <div class="hero-mesh"></div>
+  <div class="hero-icons-bg">
+    <div class="hero-icon hi1"><i class="fas fa-atom"></i></div>
+    <div class="hero-icon hi2"><i class="fas fa-book-open"></i></div>
+    <div class="hero-icon hi3"><i class="fas fa-flask"></i></div>
+    <div class="hero-icon hi4"><i class="fas fa-graduation-cap"></i></div>
+    <div class="hero-icon hi5"><i class="fas fa-brain"></i></div>
+    <div class="hero-icon hi6"><i class="fas fa-lightbulb"></i></div>
+    <div class="hero-icon hi7"><i class="fas fa-rocket"></i></div>
+  </div>
   <div class="hero-grid-bg"></div>
-  <div class="orb orb-1"></div>
-  <div class="orb orb-2"></div>
-  <div class="orb orb-3"></div>
 
   <div class="hero-content">
-    <!-- Left copy -->
-    <div class="fade-up">
-      <div style="margin-bottom:1.5rem;">
-        <span class="hero-pill"><span class="pill-dot"></span>Open Source · Encrypted · Community-Driven</span>
+    <div>
+      <div>
+        <span class="hero-open-badge"><span class="badge-dot"></span>🚀 Open Source Education Platform</span>
       </div>
       <h1 class="hero-title">
-        Where Curiosity<span class="line2"><span class="gt">Meets Knowledge</span></span>
+        Where <span class="yellow-grad">Curiosity</span><br>
+        Meets <span class="cyan-grad">Knowledge</span>
       </h1>
-      <p style="font-size:1.05rem;color:rgba(255,255,255,.62);line-height:1.7;margin:1.5rem 0 2rem;max-width:460px;">
-        Discover courses, meetups, and workshops on a platform where every user record is encrypted — your data is yours, always.
+      <p class="hero-sub">
+        Alpha One Labs connects passionate teachers with curious learners. Discover courses, meetups, and workshops on a platform where every user record is encrypted — your data is yours, always.
       </p>
       <div style="display:flex;gap:12px;flex-wrap:wrap;">
-        <a href="/login.html?tab=register" class="btn-primary">Start Learning Free <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="#0D9488" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
-        <a href="#activities" class="btn-outline">Browse Activities</a>
+        <a href="/login.html?tab=register" class="btn-hero-w">
+          <i class="fas fa-graduation-cap"></i> Start Learning
+        </a>
+        <a href="/teach.html" class="btn-hero-outline">
+          <i class="fas fa-chalkboard-user"></i> Start Teaching
+        </a>
       </div>
-      <div style="display:flex;align-items:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap;">
-        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
-          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
-          100% Data Encrypted
+      <div style="display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem;">
+        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.5);">
+          <div style="width:14px;height:14px;background:rgba(52,211,153,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;">
+            <i class="fas fa-check" style="font-size:.45rem;color:#34d399;"></i>
+          </div>100% Data Encrypted
         </div>
-        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
-          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
-          No ads · No tracking
-        </div>
-        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.38);">
-          <div style="width:14px;height:14px;background:rgba(0,178,122,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;"><svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1.5 4l2 2 3-3" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
-          GSoC 2026 Participant
+        <div style="display:flex;align-items:center;gap:6px;font-size:.76rem;color:rgba(255,255,255,.5);">
+          <div style="width:14px;height:14px;background:rgba(52,211,153,.2);border-radius:4px;display:flex;align-items:center;justify-content:center;">
+            <i class="fas fa-check" style="font-size:.45rem;color:#34d399;"></i>
+          </div>No ads · No tracking
         </div>
       </div>
     </div>
 
-    <!-- Right visual -->
-    <div class="hero-visual fade-up-2">
-      <div class="hero-card">
-        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;">
-          <div>
-            <p style="font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;color:#fff;">Live Activities</p>
-            <p style="font-size:.74rem;color:rgba(255,255,255,.38);margin-top:2px;">Updated in real-time</p>
+    <div>
+      <div class="hero-glass">
+        <div class="glass-header">
+          <div class="mac-dots">
+            <span style="background:#ff5f57;"></span>
+            <span style="background:#febc2e;"></span>
+            <span style="background:#28c840;"></span>
           </div>
-          <span class="enc-badge">
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><rect x="2" y="4" width="6" height="5.5" rx="1" stroke="#4ade80" stroke-width="1.2"/><path d="M3 4V3a2 2 0 0 1 4 0v1" stroke="#4ade80" stroke-width="1.2"/></svg>
-            Encrypted
-          </span>
-        </div>
-        <div class="mini-activity">
-          <div class="mini-dot" style="background:rgba(59,72,224,.2);">📚</div>
-          <div style="flex:1;min-width:0;">
-            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">Python for Beginners</p>
-            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Alice Chen · 4 enrolled</p>
+          <div class="live-indicator">
+            <span class="live-dot"></span>LIVE ACTIVITIES
           </div>
-          <span style="font-size:.65rem;background:rgba(59,72,224,.25);color:#a5b4fc;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Course</span>
         </div>
-        <div class="mini-activity">
-          <div class="mini-dot" style="background:rgba(249,115,22,.18);">🤝</div>
-          <div style="flex:1;min-width:0;">
-            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">JS Developers Meetup</p>
-            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Bob Martinez · Monthly</p>
+        <div>
+          <div class="glass-row">
+            <div class="g-icon" style="background:rgba(59,72,224,.2);">📚</div>
+            <div style="flex:1;min-width:0;">
+              <p style="font-family:'Syne',sans-serif;font-size:.81rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Python for Beginners</p>
+              <p style="font-size:.7rem;color:rgba(255,255,255,.4);margin-top:1px;">Alice Chen · 4 enrolled</p>
+              <div class="g-bar"><div class="g-fill" style="width:35%;background:linear-gradient(90deg,#3B48E0,#6470F3);"></div></div>
+            </div>
+            <span style="font-size:.63rem;background:rgba(59,72,224,.25);color:#a5b4fc;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Course</span>
           </div>
-          <span style="font-size:.65rem;background:rgba(249,115,22,.2);color:#fb923c;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Meetup</span>
-        </div>
-        <div class="mini-activity">
-          <div class="mini-dot" style="background:rgba(0,178,122,.18);">🔧</div>
-          <div style="flex:1;min-width:0;">
-            <p style="font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;">Data Science Workshop</p>
-            <p style="font-size:.72rem;color:rgba(255,255,255,.38);margin-top:1px;">by Alice Chen · 3 sessions</p>
+          <div class="glass-row">
+            <div class="g-icon" style="background:rgba(249,115,22,.18);">🤝</div>
+            <div style="flex:1;min-width:0;">
+              <p style="font-family:'Syne',sans-serif;font-size:.81rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">JS Developers Meetup</p>
+              <p style="font-size:.7rem;color:rgba(255,255,255,.4);margin-top:1px;">Bob Martinez · Monthly</p>
+              <div class="g-bar"><div class="g-fill" style="width:68%;background:linear-gradient(90deg,#F97316,#fb923c);"></div></div>
+            </div>
+            <span style="font-size:.63rem;background:rgba(249,115,22,.2);color:#fb923c;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Meetup</span>
+          </div>
+          <div class="glass-row">
+            <div class="g-icon" style="background:rgba(0,178,122,.15);">🔧</div>
+            <div style="flex:1;min-width:0;">
+              <p style="font-family:'Syne',sans-serif;font-size:.81rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Data Science Workshop</p>
+              <p style="font-size:.7rem;color:rgba(255,255,255,.4);margin-top:1px;">Alice Chen · 3 sessions</p>
+              <div class="g-bar"><div class="g-fill" style="width:52%;background:linear-gradient(90deg,#00B27A,#4ade80);"></div></div>
+            </div>
+            <span style="font-size:.63rem;background:rgba(0,178,122,.15);color:#34d399;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Workshop</span>
           </div>
-          <span style="font-size:.65rem;background:rgba(0,178,122,.2);color:#34d399;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0;">Workshop</span>
-        </div>
-        <!-- footer strip -->
-        <div style="margin-top:10px;padding:10px 13px;border-radius:10px;background:rgba(0,178,122,.08);display:flex;align-items:center;gap:8px;border:1px solid rgba(0,178,122,.15);">
-          <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="2.5" y="6" width="9" height="7" rx="1.5" stroke="#00B27A" stroke-width="1.3"/><path d="M4 6V4.5a3 3 0 1 1 6 0V6" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round"/></svg>
-          <span style="font-family:'Syne',sans-serif;font-size:.66rem;font-weight:600;color:#4ade80;">All PII encrypted at rest — PBKDF2 · HMAC · AES-GCM</span>
         </div>
-        <!-- floating badge -->
-        <div style="position:absolute;top:-14px;right:24px;background:#F97316;color:#fff;font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;padding:5px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(249,115,22,.4);">
-          🔥 Open Source
+        <div class="glass-footer">
+          <i class="fas fa-lock" style="color:#34d399;font-size:.75rem;flex-shrink:0;"></i>
+          <span style="font-family:'Syne',sans-serif;font-size:.66rem;font-weight:600;color:#34d399;">All PII encrypted at rest — PBKDF2 · HMAC · AES-GCM</span>
         </div>
       </div>
     </div>
   </div>
 
-  <!-- Wave transition to white body -->
-  <div style="position:relative;z-index:10;margin-top:auto;">
-    <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block;width:100%;">
-      <path d="M0 60V28C360 2 720 58 1080 28C1260 14 1380 20 1440 14V60H0Z" fill="#FFFFFF"/>
+  <div class="hero-wave">
+    <svg viewBox="0 0 1440 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 64V30C360 2 720 62 1080 30C1260 15 1380 20 1440 14V64H0Z" fill="#F8FAFC"/>
     </svg>
   </div>
 </section>
 
-<!-- ════════════════════════════════════ STATS ══ -->
-<section style="max-width:1200px;margin:3rem auto 0;padding:0 1.5rem;">
-  <div class="stat-strip fade-up-3">
-    <div class="stat-item">
-      <p class="stat-num" id="stat-activities">—</p>
-      <p class="stat-label">Active Activities</p>
+<!-- STATS -->
+<div class="stats-row">
+  <div class="stats-grid">
+    <div class="stat-cell">
+      <p class="stat-num" id="stat-activities" style="color:var(--teal);">—</p>
+      <p class="stat-lbl">Active Activities</p>
     </div>
-    <div class="stat-item">
-      <p class="stat-num" id="stat-members">—</p>
-      <p class="stat-label">Total Participants</p>
+    <div class="stat-cell">
+      <p class="stat-num" id="stat-members" style="color:var(--orange);">—</p>
+      <p class="stat-lbl">Total Participants</p>
     </div>
-    <div class="stat-item">
-      <div style="display:flex;align-items:center;gap:8px;">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="4" y="9" width="12" height="10" rx="2" stroke="#00B27A" stroke-width="1.8"/><path d="M7 9V6a3 3 0 0 1 6 0v3" stroke="#00B27A" stroke-width="1.8" stroke-linecap="round"/></svg>
-        <p class="stat-num" style="color:#00B27A;">100%</p>
-      </div>
-      <p class="stat-label">Data Encrypted at Rest</p>
+    <div class="stat-cell">
+      <p class="stat-num" style="color:#00B27A;">100%</p>
+      <p class="stat-lbl">Data Encrypted at Rest</p>
+    </div>
+    <div class="stat-cell">
+      <p class="stat-num" style="color:#9333ea;">Open</p>
+      <p class="stat-lbl">Source & Free Forever</p>
     </div>
   </div>
-</section>
+</div>
 
-<!-- ════════════════════════════════════ ACTIVITY BROWSER ══ -->
-<section style="max-width:1200px;margin:5rem auto;padding:0 1.5rem;" id="activities">
+<!-- WHAT WOULD YOU LIKE TO DO -->
+<section class="do-section">
+  <div class="sec-divider">
+    <div class="sec-divider-line"></div>
+    <div class="sec-divider-icon"><i class="fas fa-question-circle" style="color:#fff;font-size:1rem;"></i></div>
+    <h2 class="sec-divider-title" style="margin:0 .75rem;">What Would You Like To Do?</h2>
+    <div class="sec-divider-line right"></div>
+  </div>
+  <div class="do-grid">
+    <a href="/login.html?tab=register" class="do-card" style="background:linear-gradient(135deg,#3B82F6,#4F46E5);color:#fff;">
+      <div class="do-icon"><i class="fas fa-graduation-cap"></i></div>
+      <p class="do-title">I Want to Learn</p>
+      <p class="do-sub">Discover new skills and expand your knowledge</p>
+    </a>
+    <a href="/teach.html" class="do-card" style="background:linear-gradient(135deg,var(--orange),#ef4444);color:#fff;">
+      <div class="do-icon"><i class="fas fa-chalkboard-user"></i></div>
+      <p class="do-title">I Want to Teach</p>
+      <p class="do-sub">Share your knowledge with others</p>
+    </a>
+  </div>
+</section>
 
+<!-- ACTIVITY BROWSER -->
+<section class="acts-wrap" id="activities">
   <div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;">
     <div>
-      <p class="section-label">Browse</p>
-      <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;">All Activities</h2>
+      <div class="sec-divider" style="margin-bottom:.5rem;">
+        <div class="sec-divider-icon" style="width:36px;height:36px;"><i class="fas fa-compass" style="color:#fff;font-size:.9rem;"></i></div>
+        <h2 class="sec-divider-title" style="margin:0 .75rem;font-size:1.5rem;">Browse All Activities</h2>
+        <div class="sec-divider-line right" style="flex:none;width:60px;"></div>
+      </div>
     </div>
-       <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
-      <!-- Wrap input with label -->
-      <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px;">
-        <label for="search" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Search activities</label>
-        <input id="search" type="text" placeholder="e.g. Python, Web Development…" class="filter-input" style="min-width:220px;" />
-      </div>
-      
-      <!-- Wrap select with label -->
-      <div style="display:flex;flex-direction:column;gap:4px;">
-        <label for="filter-type" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Activity Type</label>
+    <div class="filter-bar">
+      <div class="filter-group">
+        <label class="filter-label" for="search">Search</label>
+        <input id="search" type="text" placeholder="Course, topic…" class="filter-input" style="min-width:200px;"/>
+      </div>
+      <div class="filter-group">
+        <label class="filter-label" for="filter-type">Type</label>
         <select id="filter-type" class="filter-input">
           <option value="">All Types</option>
           <option value="course">📚 Course</option>
@@ -485,10 +744,8 @@ <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter
           <option value="other">✨ Other</option>
         </select>
       </div>
-      
-      <!-- Wrap select with label -->
-      <div style="display:flex;flex-direction:column;gap:4px;">
-        <label for="filter-format" style="font-size:.75rem;font-weight:600;color:rgba(13,13,20,.6);">Format</label>
+      <div class="filter-group">
+        <label class="filter-label" for="filter-format">Format</label>
         <select id="filter-format" class="filter-input">
           <option value="">All Formats</option>
           <option value="live">🎥 Live</option>
@@ -496,378 +753,432 @@ <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter
           <option value="hybrid">🔀 Hybrid</option>
         </select>
       </div>
-      </div>
     </div>
-
-  <!-- Tag cloud -->
-  <div id="tag-cloud" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem;"></div>
-
-  <!-- Grid -->
-  <div id="activity-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;">
+  </div>
+  <div id="tag-cloud" style="display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1.75rem;"></div>
+  <div id="activity-grid">
     <div class="skel" style="height:220px;"></div>
     <div class="skel" style="height:220px;"></div>
     <div class="skel" style="height:220px;"></div>
   </div>
-
-  <p id="no-results" class="hidden" style="text-align:center;color:rgba(13,13,20,.35);padding:5rem 0;font-size:1.05rem;">
-    No activities match your filters.
-  </p>
+  <p id="no-results" class="hidden">No activities match your filters.</p>
 </section>
 
-<!-- ════════════════════════════════════ FEATURES ══ -->
-<section style="background:#0D0D14;padding:5rem 1.5rem;">
-  <div style="max-width:1200px;margin:0 auto;">
-    <p class="section-label" style="color:rgba(255,255,255,.3);">Platform</p>
-    <h2 style="font-family:'Syne',sans-serif;font-weight:800;font-size:1.8rem;letter-spacing:-.025em;color:#fff;margin-bottom:2.5rem;">Why Alpha One Labs?</h2>
-    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;">
-
-      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
-        <div class="feat-icon" style="background:rgba(59,72,224,.2);">🔐</div>
-        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Zero Plaintext PII</h3>
-        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Every user field is encrypted. HMAC blind indexes enable fast lookups with zero plaintext stored in indexed columns.</p>
+<!-- HOW IT WORKS -->
+<div class="how-section">
+  <div class="how-inner">
+    <div class="sec-divider">
+      <div class="sec-divider-line"></div>
+      <div class="sec-divider-icon"><i class="fas fa-route" style="color:#fff;font-size:1rem;"></i></div>
+      <h2 class="sec-divider-title" style="margin:0 .75rem;">How It Works</h2>
+      <div class="sec-divider-line right"></div>
+    </div>
+    <div class="steps-grid">
+      <div class="step">
+        <div class="step-num" style="background:var(--teal-dim);color:var(--teal);border-color:rgba(13,148,136,.25);">01</div>
+        <h3 class="step-title">Browse Activities</h3>
+        <p class="step-desc">Explore courses, workshops, meetups, and seminars across every topic imaginable.</p>
+      </div>
+      <div class="step">
+        <div class="step-num" style="background:#FFF7ED;color:var(--orange);border-color:rgba(249,115,22,.25);">02</div>
+        <h3 class="step-title">Join & Connect</h3>
+        <p class="step-desc">Enroll in sessions, join live meetups, and connect with a global community of learners.</p>
       </div>
+      <div class="step">
+        <div class="step-num" style="background:#F0FDF4;color:#00B27A;border-color:rgba(0,178,122,.25);">03</div>
+        <h3 class="step-title">Grow Together</h3>
+        <p class="step-desc">Track progress, earn recognition, and contribute back to the open source community.</p>
+      </div>
+    </div>
+  </div>
+</div>
 
-      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
-        <div class="feat-icon" style="background:rgba(255,92,58,.15);">⚡</div>
-        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Edge-Native</h3>
-        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Cloudflare Python Workers + D1 — globally distributed, sub-10ms cold starts, entirely serverless.</p>
+<!-- FOR LEARNERS / TEACHERS -->
+<section class="for-section">
+  <div class="sec-divider">
+    <div class="sec-divider-line"></div>
+    <div class="sec-divider-icon"><i class="fas fa-users" style="color:#fff;font-size:1rem;"></i></div>
+    <h2 class="sec-divider-title" style="margin:0 .75rem;">Built For Everyone</h2>
+    <div class="sec-divider-line right"></div>
+  </div>
+  <div class="for-grid">
+    <div class="for-card" style="border-top:4px solid #3B82F6;">
+      <div style="display:flex;align-items:center;gap:12px;margin-bottom:1.25rem;">
+        <div style="width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#3B82F6,#4F46E5);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(59,130,246,.3);">
+          <i class="fas fa-user-graduate" style="color:#fff;font-size:1.1rem;"></i>
+        </div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;">For Learners</h3>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#EFF6FF;"><i class="fas fa-robot" style="color:#3B82F6;font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">AI-powered course recommendations</span>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#EFF6FF;"><i class="fas fa-calendar-check" style="color:#3B82F6;font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Flexible scheduling & calendar</span>
       </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#EFF6FF;"><i class="fas fa-trophy" style="color:#3B82F6;font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Progress tracking & achievements</span>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#EFF6FF;"><i class="fas fa-users" style="color:#3B82F6;font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Study groups & peer connections</span>
+      </div>
+      <div class="for-item">
+        <div class="for-item-icon" style="background:#EFF6FF;"><i class="fas fa-chalkboard-teacher" style="color:#3B82F6;font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Virtual & in-person classes</span>
+      </div>
+    </div>
+    <div class="for-card" style="border-top:4px solid var(--orange);">
+      <div style="display:flex;align-items:center;gap:12px;margin-bottom:1.25rem;">
+        <div style="width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--orange),#ef4444);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(249,115,22,.3);">
+          <i class="fas fa-chalkboard-user" style="color:#fff;font-size:1.1rem;"></i>
+        </div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;">For Teachers</h3>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#FFF7ED;"><i class="fas fa-clipboard-list" style="color:var(--orange);font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Course management tools</span>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#FFF7ED;"><i class="fas fa-chart-line" style="color:var(--orange);font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Analytics & progress tracking</span>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#FFF7ED;"><i class="fas fa-credit-card" style="color:var(--orange);font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Secure payments & earnings</span>
+      </div>
+      <div class="for-item" style="border-bottom:1px solid var(--border);">
+        <div class="for-item-icon" style="background:#FFF7ED;"><i class="fas fa-bullhorn" style="color:var(--orange);font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Marketing tools for courses</span>
+      </div>
+      <div class="for-item">
+        <div class="for-item-icon" style="background:#FFF7ED;"><i class="fas fa-comments" style="color:var(--orange);font-size:.85rem;"></i></div>
+        <span style="font-size:.85rem;color:var(--ink);">Direct student communication</span>
+      </div>
+    </div>
+  </div>
+</section>
 
-      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+<!-- FEATURES (dark) -->
+<div class="feats-section">
+  <div class="feats-bg"></div>
+  <div style="max-width:1200px;margin:0 auto;position:relative;z-index:1;">
+    <div style="margin-bottom:2.5rem;">
+      <div class="sec-divider" style="margin-bottom:.75rem;">
+        <div class="sec-divider-line" style="background:linear-gradient(90deg,rgba(20,184,166,.4),rgba(255,255,255,.05));"></div>
+        <div class="sec-divider-icon"><i class="fas fa-shield-halved" style="color:#fff;font-size:1rem;"></i></div>
+        <h2 class="sec-divider-title" style="margin:0 .75rem;color:#fff;background:none;-webkit-background-clip:unset;background-clip:unset;">Built Different</h2>
+        <div class="sec-divider-line right" style="background:linear-gradient(270deg,rgba(20,184,166,.4),rgba(255,255,255,.05));"></div>
+      </div>
+      <p style="color:rgba(255,255,255,.45);font-size:.93rem;margin-top:.5rem;max-width:480px;line-height:1.68;">Privacy isn't a feature we added. It's how we designed everything from the ground up.</p>
+    </div>
+    <div class="feats-grid">
+      <div class="feat-card">
+        <div class="feat-icon" style="background:rgba(59,72,224,.2);">🔐</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.45rem;">Zero Plaintext PII</h3>
+        <p style="font-size:.83rem;color:rgba(255,255,255,.42);line-height:1.65;">Every user field encrypted. HMAC blind indexes enable fast lookups with zero plaintext stored.</p>
+      </div>
+      <div class="feat-card">
+        <div class="feat-icon" style="background:rgba(249,115,22,.15);">⚡</div>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.45rem;">Edge-Native Speed</h3>
+        <p style="font-size:.83rem;color:rgba(255,255,255,.42);line-height:1.65;">Cloudflare Python Workers + D1 — globally distributed, sub-10ms cold starts, serverless.</p>
+      </div>
+      <div class="feat-card">
         <div class="feat-icon" style="background:rgba(0,178,122,.15);">🗓️</div>
-        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Flexible Activities</h3>
-        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Courses, meetups, workshops — with sessions, attendance tracking, enrollment roles, and flexible tags.</p>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.45rem;">Flexible Activities</h3>
+        <p style="font-size:.83rem;color:rgba(255,255,255,.42);line-height:1.65;">Courses, meetups, workshops — with sessions, attendance tracking, and flexible tags.</p>
       </div>
-
-      <div class="feat-card" style="background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);">
+      <div class="feat-card">
         <div class="feat-icon" style="background:rgba(255,255,255,.08);">🌍</div>
-        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.5rem;">Open Source</h3>
-        <p style="font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.6;">Fully open source and community-driven. Fork it, self-host it, contribute — your platform, your rules.</p>
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;color:#fff;margin-bottom:.45rem;">Fully Open Source</h3>
+        <p style="font-size:.83rem;color:rgba(255,255,255,.42);line-height:1.65;">Community-driven. Fork it, self-host it, contribute — your platform, your rules.</p>
       </div>
+    </div>
+  </div>
+</div>
 
+<!-- OSL AFFILIATION -->
+<div class="osl-section">
+  <div class="osl-inner" style="flex-direction:column;gap:2rem;">
+    <div style="align-self:flex-start;">
+      <h2 style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.5rem;display:flex;align-items:center;gap:8px;">
+        <i class="fas fa-handshake" style="color:var(--teal);"></i> Our Affiliations
+      </h2>
+    </div>
+    <div style="display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;">
+      <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:125px; opacity: 90%;" onerror="this.style.display='none'">
+      <p style="font-size:.87rem;color:var(--muted);line-height:1.7;text-align:center;max-width:1000px;">Alpha One Labs is proudly affiliated with open source initiatives that advance education technology worldwide.</p>
     </div>
   </div>
-</section>
+</div>
 
-<!-- ════════════════════════════════════ CTA ══ -->
-<section style="max-width:1200px;margin:5rem auto;padding:0 1.5rem;">
-  <div class="cta-band">
-    <div>
-      <p style="font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.5rem;">Get Started</p>
-      <h2 style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.025em;">Ready to start learning?</h2>
-      <p style="color:rgba(255,255,255,.5);font-size:.9rem;margin-top:.5rem;">Join the community. Your data stays private.</p>
+<!-- CTA -->
+<section class="cta-section">
+  <div class="cta-inner">
+    <div style="position:relative;z-index:1;">
+      <p style="font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.5rem;">Get Started Today</p>
+      <h2 style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;">Ready to start learning?</h2>
+      <p style="color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.5rem;max-width:360px;line-height:1.65;">Join the community. Your data stays private. Education stays free.</p>
     </div>
     <div style="display:flex;gap:12px;flex-wrap:wrap;">
-      <a href="/login.html?tab=register" style="display:inline-flex;align-items:center;gap:8px;background:#0D9488;color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;padding:14px 26px;border-radius:12px;text-decoration:none;transition:background .18s;" onmouseover="this.style.background='#0F766E'" onmouseout="this.style.background='#0D9488'">Create Free Account</a>
-      <a href="#activities" style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#fff;font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;padding:14px 26px;border-radius:12px;text-decoration:none;border:1px solid rgba(255,255,255,.15);transition:background .18s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='rgba(255,255,255,.08)'">Browse Activities</a>
+      <a href="/login.html?tab=register" class="btn-cta-orange">
+        <i class="fas fa-user-plus"></i> Create Free Account
+      </a>
+      <a href="#activities" class="btn-cta-ghost">
+        <i class="fas fa-compass"></i> Browse Activities
+      </a>
     </div>
   </div>
 </section>
 
-<!-- ════════════════════════════════════ FOOTER ══ -->
+<!-- FOOTER -->
 <footer>
   <div class="footer-grid">
-    <!-- Brand column -->
+    <!-- LEARNING -->
     <div>
-      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
-        <img src="https://alphaonelabs.com/static/images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
-        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
-      </div>
-      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
-      <!-- OSL logo -->
-      <div style="margin-bottom:1.25rem;">
-        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
-        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
-      </div>
-      <!-- Social icons -->
-      <div style="display:flex;flex-wrap:wrap;gap:8px;">
-        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
-          <img src="https://alphaonelabs.com/static/images/x-logo.svg" alt="X" style="width:14px;height:14px;filter:invert(1);opacity:.55;" onerror="this.parentElement.innerHTML='<svg width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'currentColor\'><path d=\'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z\'/></svg>'">
-        </a>
-        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
-          <i class="fab fa-discord" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
-          <i class="fab fa-instagram" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
-          <i class="fab fa-facebook" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
-          <i class="fab fa-youtube" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
-          <i class="fab fa-github" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
-          <i class="fab fa-slack" style="font-size:.95rem;"></i>
-        </a>
-      </div>
+      <p class="fc-title">Learning</p>
+      <a href="#activities" class="fc-link"><i class="fas fa-compass"></i>Activities</a>
+      <a href="/dashboard.html" class="fc-link"><i class="fas fa-gauge"></i>Dashboard</a>
+      <a href="/teach.html" class="fc-link"><i class="fas fa-chalkboard"></i>Host Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link"><i class="fas fa-book-open"></i>All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link"><i class="fas fa-list-check"></i>Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link"><i class="fas fa-users"></i>Study Groups</a>
     </div>
 
-    <!-- Learning column -->
+    <!-- COMMUNITY -->
     <div>
-      <p class="fc-title">Learning</p>
-      <a href="#activities" class="fc-link">Activities</a>
-      <a href="/dashboard.html" class="fc-link">Dashboard</a>
-      <a href="/teach.html" class="fc-link">Host an Activity</a>
-      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
-      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
-      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link"><i class="fas fa-comments"></i>Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link"><i class="fas fa-blog"></i>Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link"><i class="fas fa-star"></i>Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link"><i class="fas fa-door-open"></i>Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link"><i class="fas fa-code"></i>GSoC '26</a>
     </div>
 
-    <!-- Community column -->
+    <!-- RESOURCES & INFO -->
     <div>
-      <p class="fc-title">Community</p>
-      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
-      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
-      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
-      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
-      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
+      <p class="fc-title">Resources</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link"><i class="fas fa-circle-info"></i>About Us</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link"><i class="fas fa-github"></i>GitHub</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link"><i class="fas fa-chart-line"></i>Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link"><i class="fas fa-comment-dots"></i>Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link"><i class="fas fa-shield-halved"></i>Privacy</a>
     </div>
 
-    <!-- About column -->
+    <!-- CONNECT -->
     <div>
-      <p class="fc-title">About</p>
-      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
-      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
-      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
-      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
+      <p class="fc-title">Connect</p>
+      <div class="footer-social">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="X/Twitter">
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:var(--teal);">
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+  </svg>
+</a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="footer-social-btn" title="Discord">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="footer-social-btn" title="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="Facebook">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="footer-social-btn" title="GitHub">
+          <i class="fab fa-github"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="footer-social-btn" title="Slack">
+          <i class="fab fa-slack"></i>
+        </a>
+      </div>
     </div>
   </div>
 
-  <!-- Bottom bar -->
+  <!-- Footer Bottom -->
   <div class="footer-bottom">
-    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
-    <div style="display:flex;gap:1.25rem;">
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
-      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    <p>© 2024–2026 Alpha One Labs. All rights reserved. · Cloudflare Workers + D1</p>
+    <div class="footer-links">
+      <a href="https://alphaonelabs.com/en/about/">About Us</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms">Terms & Conditions</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies">Cookie Policy</a>
     </div>
   </div>
 </footer>
 
-<!-- ════════════════════════════════════ PROFILE DROPDOWN ══ -->
+<!-- PROFILE DROPDOWN -->
 <div id="profile-dropdown">
-  <div id="dropdown-header" style="padding:16px 18px;border-bottom:1px solid rgba(13,13,20,.07);">
-    <div style="display:flex;align-items:center;gap:12px;">
-      <div id="dropdown-avatar" style="width:38px;height:38px;background:#E8EAFF;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.9rem;color:#3B48E0;"></div>
+  <div style="padding:14px 16px;border-bottom:1px solid var(--border);">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
       <div>
-        <p id="dropdown-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;color:#0D0D14;"></p>
-        <p id="dropdown-role" style="font-size:.72rem;color:rgba(13,13,20,.4);margin-top:1px;"></p>
+        <p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p>
+        <p id="dd-role" style="font-size:.7rem;color:var(--muted);margin-top:1px;"></p>
       </div>
     </div>
   </div>
-  <div style="padding:8px;">
-    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0D0D14;font-size:.85rem;font-weight:500;transition:background .15s;" onmouseover="this.style.background='#F7F6F3'" onmouseout="this.style.background='transparent'">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="#0D0D14" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="#0D0D14" stroke-width="1.4" stroke-linecap="round"/></svg>
-      View Profile
+  <div style="padding:6px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-user-circle" style="color:var(--teal);width:16px;"></i> View Profile
     </a>
-    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#0D0D14;font-size:.85rem;font-weight:500;transition:background .15s;" onmouseover="this.style.background='#F7F6F3'" onmouseout="this.style.background='transparent'">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/></svg>
-      Dashboard
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-gauge" style="color:var(--teal);width:16px;"></i> Dashboard
     </a>
   </div>
-  <div style="padding:8px;border-top:1px solid rgba(13,13,20,.07);">
-    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.85rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round"/><path d="M10 11l3-3-3-3M13 8H6" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
-      Sign Out
+  <div style="padding:6px;border-top:1px solid var(--border);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:#dc2626;font-size:.83rem;font-weight:500;width:100%;text-align:left;">
+      <i class="fas fa-sign-out-alt" style="width:16px;"></i> Sign Out
     </button>
   </div>
 </div>
 
 <script>
-  const API = '';
+const API='';
+function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
 
-  // Navbar scroll shadow
-  window.addEventListener('scroll', () => {
-    document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 8);
-  });
+window.addEventListener('scroll',()=>{document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>8);});
 
-  // ── Helpers ──────────────────────────────────────────────────────────────
-  function esc(s) {
-    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+function toggleMobileMenu(){
+  const menu=document.getElementById('mobile-menu');
+  menu.classList.toggle('hidden');
+  document.body.classList.toggle('overflow-hidden');
+}
+document.addEventListener('click',function(e){
+  const menu=document.getElementById('mobile-menu');
+  const btn=e.target.closest('[onclick="toggleMobileMenu()"]');
+  if(!menu.classList.contains('hidden')&&!btn&&!e.target.closest('#mobile-menu')){
+    toggleMobileMenu();
   }
+});
 
-// ── Auth nav ─────────────────────────────────────────────────────────────
-function updateNav() {
-  const token = localStorage.getItem('edu_token');
-  const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
-  const nav   = document.getElementById('nav-auth');
-  const dd    = document.getElementById('profile-dropdown');
-
-  if (token && user) {
-    const initials = (user.name || user.username || '?').slice(0,2).toUpperCase();
-    nav.innerHTML = `
-      <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.14)'" onmouseout="this.style.background='transparent'">Dashboard</a>
-      <button id="profile-btn" onclick="toggleDropdown(event)" 
-        aria-expanded="false" 
-        aria-controls="profile-dropdown"
-        style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(initials)}</button>`;
-
-    // populate dropdown
-    document.getElementById('dropdown-avatar').textContent = initials;
-    document.getElementById('dropdown-name').textContent   = user.name || user.username;
-    document.getElementById('dropdown-role').textContent   = user.role || 'member';
-
-    // re-attach dropdown to nav
+function toggleAccordion(id){
+  const acc=document.getElementById(id);
+  const ico=document.getElementById(id+'-icon');
+  acc.classList.toggle('hidden');
+  ico.classList.toggle('rotate-180');
+  ['auth-accordion'].forEach(aid=>{if(aid!==id){const a=document.getElementById(aid),i=document.getElementById(aid+'-icon');if(a&&!a.classList.contains('hidden')){a.classList.add('hidden');i.classList.remove('rotate-180');}}});
+}
+
+function updateNav(){
+  const token=localStorage.getItem('edu_token');
+  const user=JSON.parse(localStorage.getItem('edu_user')||'null');
+  const nav=document.getElementById('nav-auth');
+  const dd=document.getElementById('profile-dropdown');
+  if(token&&user){
+    const ini=(user.name||user.username||'?').slice(0,2).toUpperCase();
+    nav.innerHTML=`
+      <a href="/dashboard.html" class="nav-link">Dashboard</a>
+      <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;">${esc(ini)}</button>`;
+    document.getElementById('dd-avatar').textContent=ini;
+    document.getElementById('dd-name').textContent=user.name||user.username;
+    document.getElementById('dd-role').textContent=user.role||'member';
     nav.appendChild(dd);
-  } else {
-    nav.innerHTML = `
-      <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='transparent'">Login</a>
-      <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
+  }else{
+    nav.innerHTML=`
+      <a href="/login.html" class="nav-link" style="display:flex;align-items:center;gap:6px;"><i class="fas fa-right-to-bracket"></i> Login</a>
+      <a href="/login.html?tab=register" style="display:inline-flex;align-items:center;gap:7px;background:var(--orange);color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.84rem;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;">
+        <i class="fas fa-user-plus"></i> Signup
+      </a>`;
   }
 }
-
-let dropdownOpen = false;
-function toggleDropdown(e) {
-  e.stopPropagation();
-  dropdownOpen = !dropdownOpen;
-  const btn = document.getElementById('profile-btn');
-  const dd = document.getElementById('profile-dropdown');
-  
-  // ✅ Update aria-expanded for screen readers
-  btn.setAttribute('aria-expanded', dropdownOpen);
-  dd.classList.toggle('open', dropdownOpen);
+let ddOpen=false;
+function toggleDD(e){e.stopPropagation();ddOpen=!ddOpen;document.getElementById('profile-dropdown').classList.toggle('open',ddOpen);}
+document.addEventListener('click',()=>{if(ddOpen){ddOpen=false;document.getElementById('profile-dropdown').classList.remove('open');}});
+function logout(){localStorage.removeItem('edu_token');localStorage.removeItem('edu_user');updateNav();window.location.reload();}
+
+const typeIcon={course:'📚',meetup:'🤝',workshop:'🔧',seminar:'🎤',other:'✨'};
+const typeBg={course:'#E8EAFF',meetup:'#FFF7ED',workshop:'#F0FDF4',seminar:'#F0FDFC',other:'#F1F5F9'};
+const typeClr={course:'#3B48E0',meetup:'#F97316',workshop:'#00B27A',seminar:'#0D9488',other:'#64748b'};
+const fmtBg={live:'#FFF7ED',self_paced:'#F0FDF4',hybrid:'#FAF5FF'};
+const fmtClr={live:'#F97316',self_paced:'#00B27A',hybrid:'#9333ea'};
+const fmtLabel={live:'Live',self_paced:'Self-paced',hybrid:'Hybrid'};
+const schedLbl={one_time:'One-time',multi_session:'Multi-session',recurring:'Recurring',ongoing:'Ongoing'};
+const typeClass={course:'tc',meetup:'tm',workshop:'tw',seminar:'ts',other:'to'};
+
+function actCard(a){
+  const bg=typeBg[a.type]||'#F1F5F9',clr=typeClr[a.type]||'#64748b',ic=typeIcon[a.type]||'✨';
+  const fb=fmtBg[a.format]||'#F1F5F9',fc=fmtClr[a.format]||'#64748b';
+  const tc=typeClass[a.type]||'to';
+  const desc=(a.description||'').length>100?a.description.slice(0,100)+'…':(a.description||'');
+  const tags=(a.tags||[]).slice(0,3).map(t=>`<span class="tag-chip">${esc(t)}</span>`).join('');
+  return`
+    <article class="act-card ${tc}" onmousemove="this.style.setProperty('--mx',event.offsetX/this.offsetWidth*100+'%');this.style.setProperty('--my',event.offsetY/this.offsetHeight*100+'%')">
+      <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;">
+        <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:.93rem;line-height:1.3;color:var(--ink);">${ic} ${esc(a.title)}</h3>
+        <span class="type-badge" style="background:${bg};color:${clr};white-space:nowrap;">${esc(a.type)}</span>
+      </div>
+      <p style="font-size:.81rem;color:var(--muted);line-height:1.6;flex:1;">${esc(desc)}</p>
+      <div style="display:flex;flex-wrap:wrap;gap:5px;">${tags}</div>
+      <div style="border-top:1px solid var(--border);padding-top:.7rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;">
+        <div style="display:flex;gap:5px;align-items:center;flex-wrap:wrap;">
+          <span class="fmt-badge" style="background:${fb};color:${fc};">${fmtLabel[a.format]||a.format}</span>
+          <span style="font-size:.7rem;color:var(--muted);">${schedLbl[a.schedule_type]||''}</span>
+          <span style="font-size:.7rem;color:var(--muted);"><i class="fas fa-users" style="font-size:.6rem;"></i> ${a.participant_count}</span>
+          ${a.session_count?`<span style="font-size:.7rem;color:var(--muted);"><i class="fas fa-calendar" style="font-size:.6rem;"></i> ${a.session_count}</span>`:''}
+        </div>
+        <a href="/course.html?id=${esc(a.id)}" style="font-family:'Syne',sans-serif;font-size:.76rem;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:4px;">View <i class="fas fa-arrow-right" style="font-size:.6rem;"></i></a>
+      </div>
+      <p style="font-size:.7rem;color:rgba(100,116,139,.6);">by <span style="color:var(--muted);font-weight:500;">${esc(a.host_name)}</span></p>
+    </article>`;
 }
 
-document.addEventListener('click', () => {
-  if (dropdownOpen) {
-    dropdownOpen = false;
-    const btn = document.getElementById('profile-btn');
-    const dd = document.getElementById('profile-dropdown');
-    if (btn) btn.setAttribute('aria-expanded', 'false');
-    if (dd) dd.classList.remove('open');
-  }
-});
-
-  function logout() {
-    localStorage.removeItem('edu_token');
-    localStorage.removeItem('edu_user');
-    updateNav();
-    window.location.reload();
-  }
-
-  // ── Colours ───────────────────────────────────────────────────────────────
-  const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
-  const typeBg    = { course:'#E8EAFF', meetup:'#FFF0ED', workshop:'#F0FDF4', seminar:'#F0FDFC', other:'#F7F6F3' };
-  const typeClr   = { course:'#3B48E0', meetup:'#FF5C3A', workshop:'#00B27A', seminar:'#0D9488', other:'#6b7280' };
-  const fmtBg     = { live:'#FFF0ED', self_paced:'#F0FDF4', hybrid:'#FAF0FF' };
-  const fmtClr    = { live:'#FF5C3A', self_paced:'#00B27A', hybrid:'#9333ea' };
-  const fmtLabel  = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
-  const schedLabel= { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
-
-  function actCard(a) {
-    const bg  = typeBg[a.type]  || '#F7F6F3';
-    const clr = typeClr[a.type] || '#6b7280';
-    const ic  = typeIcon[a.type] || '✨';
-    const fb  = fmtBg[a.format]  || '#F7F6F3';
-    const fc  = fmtClr[a.format] || '#6b7280';
-    const desc= (a.description || '').length > 100
-              ? a.description.slice(0,100) + '…'
-              : (a.description || '');
-    const tags = (a.tags || []).slice(0, 3)
-      .map(t => `<span class="tag-chip">${esc(t)}</span>`).join('');
-
-    return `
-      <article class="act-card" onmousemove="this.style.setProperty('--mx',event.offsetX/this.offsetWidth*100+'%');this.style.setProperty('--my',event.offsetY/this.offsetHeight*100+'%')">
-        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:8px;">
-          <h3 style="font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;line-height:1.3;color:#0D0D14;">
-            ${ic} ${esc(a.title)}
-          </h3>
-          <span class="type-badge" style="background:${bg};color:${clr};white-space:nowrap;">${esc(a.type)}</span>
-        </div>
-        <p style="font-size:.82rem;color:rgba(13,13,20,.5);line-height:1.55;flex:1;">${esc(desc)}</p>
-        <div style="display:flex;flex-wrap:wrap;gap:6px;">${tags}</div>
-        <div style="border-top:1px solid rgba(13,13,20,.06);padding-top:.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;">
-          <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
-            <span class="fmt-badge" style="background:${fb};color:${fc};">${fmtLabel[a.format] || a.format}</span>
-            <span style="font-size:.72rem;color:rgba(13,13,20,.4);">${schedLabel[a.schedule_type] || a.schedule_type}</span>
-            <span style="font-size:.72rem;color:rgba(13,13,20,.4);">👥 ${a.participant_count}</span>
-            ${a.session_count ? `<span style="font-size:.72rem;color:rgba(13,13,20,.4);">🗓 ${a.session_count}</span>` : ''}
-          </div>
-          <a href="/course.html?id=${esc(a.id)}" style="font-family:'Syne',sans-serif;font-size:.78rem;font-weight:700;color:#0D9488;text-decoration:none;">View →</a>
-        </div>
-        <p style="font-size:.72rem;color:rgba(13,13,20,.35);">by <span style="color:rgba(13,13,20,.55);font-weight:500;">${esc(a.host_name)}</span></p>
-      </article>`;
-  }
+let allActivities=[],activeTag=null;
+function renderGrid(){
+  const q=document.getElementById('search').value.toLowerCase();
+  const type=document.getElementById('filter-type').value;
+  const fmt=document.getElementById('filter-format').value;
+  const filtered=allActivities.filter(a=>{
+    if(type&&a.type!==type)return false;
+    if(fmt&&a.format!==fmt)return false;
+    if(activeTag&&!(a.tags||[]).includes(activeTag))return false;
+    if(q&&!a.title.toLowerCase().includes(q)&&!(a.description||'').toLowerCase().includes(q))return false;
+    return true;
+  });
+  const grid=document.getElementById('activity-grid'),none=document.getElementById('no-results');
+  if(!filtered.length){grid.innerHTML='';none.classList.remove('hidden');}
+  else{none.classList.add('hidden');grid.innerHTML=filtered.map(actCard).join('');}
+}
 
-  let allActivities = [];
-  let activeTag     = null;
-
-  function renderGrid() {
-    const q    = document.getElementById('search').value.toLowerCase();
-    const type = document.getElementById('filter-type').value;
-    const fmt  = document.getElementById('filter-format').value;
-
-    const filtered = allActivities.filter(a => {
-      if (type && a.type !== type) return false;
-      if (fmt  && a.format !== fmt) return false;
-      if (activeTag && !(a.tags || []).includes(activeTag)) return false;
-      if (q && !a.title.toLowerCase().includes(q) && !(a.description || '').toLowerCase().includes(q)) return false;
-      return true;
-    });
-
-    const grid = document.getElementById('activity-grid');
-    const none = document.getElementById('no-results');
-    if (!filtered.length) { grid.innerHTML = ''; none.classList.remove('hidden'); }
-    else { none.classList.add('hidden'); grid.innerHTML = filtered.map(actCard).join(''); }
-  }
+function buildTagCloud(acts){
+  const freq={};
+  acts.forEach(a=>(a.tags||[]).forEach(t=>freq[t]=(freq[t]||0)+1));
+  const cloud=document.getElementById('tag-cloud');
+  cloud.innerHTML=Object.entries(freq).sort((a,b)=>b[1]-a[1]).map(([n,c])=>
+    `<button class="tag-pill" data-tag="${esc(n)}" id="tag-${esc(n)}">${esc(n)} <span style="opacity:.4;font-size:.62rem;">${c}</span></button>`
+  ).join('');
+  cloud.querySelectorAll('.tag-pill').forEach(btn=>btn.addEventListener('click',()=>toggleTag(btn.dataset.tag)));
+}
 
-  function buildTagCloud(activities) {
-  const freq = {};
-  activities.forEach(a => (a.tags || []).forEach(t => freq[t] = (freq[t] || 0) + 1));
-  const sorted = Object.entries(freq).sort((a,b) => b[1]-a[1]);
-  
-  const cloud = document.getElementById('tag-cloud');
-  cloud.innerHTML = sorted.map(([name, cnt]) => `
-    <button class="tag-pill" data-tag-name="${esc(name)}" id="tag-${esc(name)}">
-      ${esc(name)} <span style="opacity:.5;font-size:.65rem;">${cnt}</span>
-    </button>`).join('');
-  
-  cloud.querySelectorAll('.tag-pill').forEach(btn => {
-    btn.addEventListener('click', () => toggleTag(btn.dataset.tagName));
-  });
+function toggleTag(name){
+  activeTag=activeTag===name?null:name;
+  document.querySelectorAll('.tag-pill').forEach(el=>el.classList.remove('active'));
+  if(activeTag){const el=document.getElementById(`tag-${name}`);if(el)el.classList.add('active');}
+  renderGrid();
 }
 
-  function toggleTag(name) {
-    activeTag = activeTag === name ? null : name;
-    document.querySelectorAll('.tag-pill').forEach(el => el.classList.remove('active'));
-    if (activeTag) {
-      const el = document.getElementById(`tag-${name}`);
-      if (el) el.classList.add('active');
-    }
+async function loadActivities(){
+  try{
+    const res=await fetch(`${API}/api/activities`);
+    const data=await res.json();
+    allActivities=data.activities||[];
+    document.getElementById('stat-activities').textContent=allActivities.length;
+    document.getElementById('stat-members').textContent=allActivities.reduce((s,a)=>s+(a.participant_count||0),0);
+    buildTagCloud(allActivities);
     renderGrid();
+  }catch{
+    document.getElementById('activity-grid').innerHTML=`<p style="grid-column:1/-1;text-align:center;color:var(--muted);padding:5rem 0;">Failed to load activities. Seed via <code>POST /api/seed</code>.</p>`;
   }
+}
 
-  async function loadActivities() {
-    try {
-      const res  = await fetch(`${API}/api/activities`);
-      const data = await res.json();
-      allActivities = data.activities || [];
-
-      document.getElementById('stat-activities').textContent = allActivities.length;
-      document.getElementById('stat-members').textContent =
-        allActivities.reduce((s, a) => s + (a.participant_count || 0), 0);
-
-      buildTagCloud(allActivities);
-      renderGrid();
-    } catch {
-      document.getElementById('activity-grid').innerHTML =
-        `<p style="grid-column:1/-1;text-align:center;color:rgba(13,13,20,.35);padding:5rem 0;">
-          Failed to load activities. Seed data via <code>POST /api/seed</code>.
-        </p>`;
-    }
-  }
-
-  ['search','filter-type','filter-format'].forEach(id =>
-    document.getElementById(id)
-      .addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
+['search','filter-type','filter-format'].forEach(id=>
+  document.getElementById(id).addEventListener(id==='search'?'input':'change',renderGrid));
 
-  updateNav();
-  loadActivities();
+updateNav();
+loadActivities();
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/profile.html b/public/profile.html
index e83769c..4e64818 100644
--- a/public/profile.html
+++ b/public/profile.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Profile – Alpha One Labs</title>
-  <link rel="icon" type="image/png" href="https://alphaonelabs.com/static/images/logo.png" />
+  <link rel="icon" type="image/png" href="/images/logo.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet">
@@ -29,42 +29,59 @@
     .hidden{display:none!important;}
     a{text-decoration:none;color:inherit;}
 
-    /* ─── NAVBAR (Teal) ─── */
+    /* ─── NAVBAR ─── */
     #navbar{
       position:sticky;top:0;z-index:200;
-      background:rgba(13,148,136,.96);
-      backdrop-filter:blur(18px) saturate(180%);
-      border-bottom:1px solid rgba(255,255,255,.18);
-      box-shadow:0 2px 12px rgba(0,0,0,.12);
-      transition:box-shadow .3s,background .3s;
+      background:var(--teal);
+      box-shadow:0 2px 16px rgba(0,0,0,.15);
     }
-    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
-    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    #navbar.scrolled{background:var(--teal-dark);box-shadow:0 4px 24px rgba(0,0,0,.2);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:68px;}
+    @media(max-width:768px){.nav-inner{height:60px;padding:0 1rem;}}
     .nav-logo{display:flex;align-items:center;gap:10px;}
-    .nav-logo img{width:38px;height:38px;border-radius:10px;}
-    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-logo img{width:50px;height:50px;border-radius:8px;}
+    @media(max-width:768px){.nav-logo img{width:40px;height:40px;}}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;}
+    @media(max-width:768px){.nav-logo-text{font-size:.95rem;}}
     .nav-links{display:flex;align-items:center;gap:2px;}
-    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
-    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    .nav-link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.85);padding:6px 14px;border-radius:8px;}
+    .nav-link:hover{background:rgba(255,255,255,.15);color:#fff;}
+    .nav-link.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
     #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+    .nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
 
-    /* ─── PROFILE DROPDOWN ─── */
+    @media(max-width:768px){
+      .nav-links{display:none;}
+      .nav-toggle{display:block;}
+    }
+
+    /* Mobile Menu */
+    #mobile-menu{
+      position:fixed;top:60px;left:0;right:0;bottom:0;
+      background:#fff;z-index:190;
+      overflow-y:auto;max-height:calc(100vh - 60px);
+      box-shadow:0 4px 12px rgba(0,0,0,.1);
+    }
+    #mobile-menu.hidden{display:none;}
+    .mobile-menu-item{padding:16px 16px;border-bottom:1px solid var(--border);}
+    .mobile-menu-item a{
+      font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;
+      display:flex;align-items:center;gap:10px;
+    }
+    .mobile-menu-item i{color:var(--teal);width:18px;}
+
+    /* Profile dropdown */
     #profile-dropdown{
       position:absolute;right:0;top:calc(100% + 10px);
-      background:#fff;
-      border:1px solid rgba(13,13,20,.09);
-      border-radius:16px;
-      box-shadow:0 20px 60px rgba(13,13,20,.14);
-      min-width:220px;
-      overflow:hidden;
+      background:#fff;border:1px solid var(--border);
+      border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.14);
+      min-width:220px;overflow:hidden;
       opacity:0;transform:translateY(-8px) scale(.97);
-      transition:opacity .18s,transform .18s;
       pointer-events:none;
-      visibility:hidden;
     }
-    #profile-dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto; visibility:visible;}
+    #profile-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
 
-    /* ─── HERO ─── */
+    /* ─── PROFILE HERO ─── */
     .profile-hero{
       background:linear-gradient(135deg,#0F766E 0%,#0D9488 50%,#14B8A6 100%);
       position:relative;overflow:hidden;padding:4rem 1.5rem 0;
@@ -119,16 +136,15 @@
     }
     .stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(13,13,20,.08);}
     .s-num{font-family:'Syne',sans-serif;font-size:1.8rem;font-weight:800;}
-    . /* ── Stats section labels ── */
-    .stat-label { font-size:.74rem; color:rgba(13,13,20,.4); margin-top:2px; }
-    
-    /* ── Section label (decorative) ── */
-    .section-label {
+    .stat-label{font-size:.74rem;color:rgba(13,13,20,.4);margin-top:2px;}
+
+    /* ─── SECTION LABEL ─── */
+    .section-label{
       font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
       letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
       margin-bottom:1rem;display:flex;align-items:center;gap:8px;
     }
-    .section-label::before { content:'';width:18px;height:2px;background:var(--teal);border-radius:1px; }
+    .section-label::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px;}
 
     /* ─── ACTIVITY ROW ─── */
     .act-row{
@@ -189,7 +205,7 @@
     .ha2{animation:fadeUp .6s .2s ease both;}
     .ha3{animation:fadeUp .6s .3s ease both;}
 
-    /* ─── SECTION LABEL ─── */
+    /* ─── S LABEL ─── */
     .s-label{
       display:inline-flex;align-items:center;gap:8px;
       font-family:'Syne',sans-serif;font-size:.68rem;font-weight:700;
@@ -199,17 +215,51 @@
     .s-label::before{content:'';width:18px;height:2px;background:var(--teal);border-radius:1px;}
 
     /* ─── FOOTER ─── */
-    footer { background: #0F172A; color: rgba(255,255,255,.45); }
-    .footer-grid { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
-    @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
-    @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
-    .fc-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }
-    .fc-link { display: block; font-size: .82rem; color: rgba(255,255,255,.38); text-decoration: none; margin-bottom: .55rem; transition: color .15s; }
-    .fc-link:hover { color: rgba(255,255,255,.8); }
-    .footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
-    .f-social { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: all .2s; }
-    .f-social:hover { background: var(--teal-dim); color: var(--teal); border-color: var(--teal); transform: translateY(-2px); }
-    .f-social svg, .f-social i { font-size: 1rem; }
+    footer{background:#ffffff;color:rgba(0,0,0,.6);padding:4rem 1.5rem 2rem;}
+    @media(max-width:768px){footer{padding:3rem 1.25rem 1.5rem;}}
+    @media(max-width:640px){footer{padding:2.5rem 1rem 1.5rem;}}
+    
+    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:3.5rem;}
+    @media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:3rem;}}
+    @media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;padding:2.5rem 1.25rem;}}
+    @media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem;}}
+
+    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1.5rem;}
+    @media(max-width:640px){.fc-title{font-size:.8rem;margin-bottom:1.25rem;}}
+    
+    .fc-link{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(0,0,0,.55);margin-bottom:1rem;text-decoration:none;line-height:1.6;}
+    @media(max-width:768px){.fc-link{font-size:.9rem;margin-bottom:.85rem;}}
+    @media(max-width:640px){.fc-link{font-size:.85rem;margin-bottom:.75rem;}}
+
+    .fc-link i{color:var(--teal);width:18px;flex-shrink:0;}
+    .fc-link:hover{color:var(--teal);transform:translateX(4px);transition:all .3s ease;}
+
+    .footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.75rem;}
+    @media(max-width:640px){.footer-social{justify-content:flex-start;gap:10px;margin-top:1.5rem;}}
+
+    .footer-social-btn{
+      width:44px;height:44px;border-radius:50%;
+      background:var(--teal-dim);color:var(--teal);
+      display:flex;align-items:center;justify-content:center;
+      border:2px solid var(--teal);font-size:1rem;text-decoration:none;
+      transition:all .3s ease;
+    }
+    @media(max-width:640px){.footer-social-btn{width:40px;height:40px;font-size:.9rem;}}
+
+    .footer-social-btn:hover{background:var(--teal);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(13,148,136,.25);}
+
+    .footer-bottom{border-top:2px solid var(--border);max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:rgba(0,0,0,.6);}
+    @media(max-width:768px){.footer-bottom{padding:1.25rem 1.25rem;flex-direction:column;text-align:center;gap:1rem;}}
+    @media(max-width:640px){.footer-bottom{padding:1rem 1rem;font-size:.8rem;gap:1rem;}}
+
+    .footer-links{display:flex;gap:2rem;text-decoration:none;}
+    @media(max-width:768px){.footer-links{flex-direction:column;gap:1rem;}}
+    @media(max-width:640px){.footer-links{gap:.75rem;}}
+
+    .footer-links a{color:rgba(0,0,0,.55);text-decoration:none;font-size:.9rem;transition:all .3s ease;}
+    @media(max-width:640px){.footer-links a{font-size:.8rem;}}
+    
+    .footer-links a:hover{color:var(--teal);font-weight:600;}
 
     @media(max-width:780px){.pg{grid-template-columns:1fr!important;}}
   </style>
@@ -220,10 +270,10 @@
 <nav id="navbar">
   <div class="nav-inner">
     <a href="/" class="nav-logo">
-      <img src="https://alphaonelabs.com/static/images/logo.png" alt="Alpha One Labs"
-           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
-      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+      <img src="./images/logo.png" alt="Alpha One Labs"
+           onerror="this.style.display='none';document.getElementById('logo-fb').style.display='flex'">
+      <div id="logo-fb" style="display:none;width:40px;height:40px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
+        <i class="fas fa-graduation-cap" style="color:#fff;font-size:1.2rem;"></i>
       </div>
       <span class="nav-logo-text">Alpha One Labs</span>
     </a>
@@ -233,29 +283,20 @@
       <a href="/teach.html" class="nav-link">Host</a>
     </div>
     <div id="nav-auth"></div>
+    <button class="nav-toggle" onclick="toggleMobileMenu()"><i class="fas fa-bars"></i></button>
   </div>
 </nav>
 
-<!-- ─── PROFILE DROPDOWN ─── -->
-<div id="profile-dropdown">
-  <div style="padding:15px 17px;border-bottom:1px solid rgba(13,13,20,.07);">
-    <div style="display:flex;align-items:center;gap:11px;">
-      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
-      <div><p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p><p id="dd-role" style="font-size:.7rem;color:rgba(13,13,20,.4);margin-top:1px;"></p></div>
-    </div>
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="hidden">
+  <div class="mobile-menu-item">
+    <a href="/"><i class="fas fa-home"></i>Activities</a>
   </div>
-  <div style="padding:7px;">
-    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--teal);font-size:.83rem;font-weight:600;background:var(--teal-dim);">
-      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.4"/><path d="M2 14c0-3.314 2.686-5 6-5s6 1.686 6 5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg> View Profile
-    </a>
-    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink);font-size:.83rem;font-weight:500;transition:background .15s;margin-top:2px;" onmouseover="this.style.background='#F0FDFA'" onmouseout="this.style.background='transparent'">
-      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="2" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="2" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/><rect x="9" y="9" width="5" height="5" rx="1.5" stroke="#0D0D14" stroke-width="1.4"/></svg> Dashboard
-    </a>
+  <div class="mobile-menu-item">
+    <a href="/dashboard.html"><i class="fas fa-gauge"></i>Dashboard</a>
   </div>
-  <div style="padding:7px;border-top:1px solid rgba(13,13,20,.07);">
-    <button type="button" onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:transparent;border:none;cursor:pointer;color:#e53e3e;font-size:.83rem;font-weight:500;width:100%;text-align:left;transition:background .15s;" onmouseover="this.style.background='#fff5f5'" onmouseout="this.style.background='transparent'">
-      <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M6 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round"/><path d="M10 11l3-3-3-3M13 8H6" stroke="#e53e3e" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Sign Out
-    </button>
+  <div class="mobile-menu-item">
+    <a href="/teach.html"><i class="fas fa-chalkboard-user"></i>Host</a>
   </div>
 </div>
 
@@ -286,7 +327,7 @@ <h1 id="prof-name" style="font-family:'Syne',sans-serif;font-weight:800;font-siz
         </div>
         <div class="ha3 enc-strip">
           <div style="width:34px;height:34px;background:rgba(0,178,122,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
-            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="3" y="7" width="10" height="8" rx="2" stroke="#00B27A" stroke-width="1.4"/><path d="M5 7V5a3 3 0 0 1 6 0v2" stroke="#00B27A" stroke-width="1.4" stroke-linecap="round"/></svg>
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="6" width="9" height="8" rx="1.5" stroke="#00B27A" stroke-width="1.3"/><path d="M4 6V4.5a3 3 0 1 1 6 0V6" stroke="#00B27A" stroke-width="1.3" stroke-linecap="round"/></svg>
           </div>
           <div>
             <p style="font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;color:#00B27A;">Data Encrypted</p>
@@ -334,7 +375,7 @@ <h3>Account Details</h3>
           <div class="i-icon" style="background:#F1F5F9;">
             <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="2" y="3" width="12" height="11" rx="2" stroke="#6b7280" stroke-width="1.4"/><path d="M5 2v2M11 2v2M2 7h12" stroke="#6b7280" stroke-width="1.4" stroke-linecap="round"/></svg>
           </div>
-         <div>
+          <div>
             <p class="i-label">First Activity</p>
             <p id="prof-joined" class="i-val"></p>
           </div>
@@ -369,15 +410,15 @@ <h3>Account Details</h3>
       <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" class="reveal">
         <div class="stat-card">
           <p class="s-num" id="stat-hosted" style="color:var(--teal);">0</p>
-          <p class="s-label">Hosted</p>
+          <p class="stat-label">Hosted</p>
         </div>
         <div class="stat-card">
           <p class="s-num" id="stat-joined" style="color:var(--accent);">0</p>
-          <p class="s-label">Joined</p>
+          <p class="stat-label">Joined</p>
         </div>
         <div class="stat-card">
           <p class="s-num" id="stat-total" style="color:var(--jade);">0</p>
-          <p class="s-label">Total</p>
+          <p class="stat-label">Total</p>
         </div>
       </div>
 
@@ -409,88 +450,106 @@ <h3>Joined Activities</h3>
 <!-- ─── FOOTER ─── -->
 <footer>
   <div class="footer-grid">
-    <!-- Brand column -->
+    <!-- LEARNING -->
     <div>
-      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
-        <img src="./images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
-        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
-      </div>
-      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
-      <!-- OSL logo -->
-      <div style="margin-bottom:1.25rem;">
-        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
-        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
-      </div>
-      <!-- Social icons -->
-      <div style="display:flex;flex-wrap:wrap;gap:8px;">
-        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
-          <img src="https://alphaonelabs.com/static/images/x-logo.svg" alt="X" style="width:14px;height:14px;filter:invert(1);opacity:.55;" onerror="this.parentElement.innerHTML='<svg width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' fill=\'currentColor\'><path d=\'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z\'/></svg>'">
-        </a>
-        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
-          <i class="fab fa-discord" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
-          <i class="fab fa-instagram" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
-          <i class="fab fa-facebook" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
-          <i class="fab fa-youtube" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
-          <i class="fab fa-github" style="font-size:.95rem;"></i>
-        </a>
-        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
-          <i class="fab fa-slack" style="font-size:.95rem;"></i>
-        </a>
-      </div>
+      <p class="fc-title">Learning</p>
+      <a href="/" class="fc-link"><i class="fas fa-compass"></i>Activities</a>
+      <a href="/dashboard.html" class="fc-link"><i class="fas fa-gauge"></i>Dashboard</a>
+      <a href="/teach.html" class="fc-link"><i class="fas fa-chalkboard"></i>Host Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link"><i class="fas fa-book-open"></i>All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link"><i class="fas fa-list-check"></i>Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link"><i class="fas fa-users"></i>Study Groups</a>
     </div>
 
-    <!-- Learning column -->
+    <!-- COMMUNITY -->
     <div>
-      <p class="fc-title">Learning</p>
-      <a href="/" class="fc-link">Activities</a>
-      <a href="/dashboard.html" class="fc-link">Dashboard</a>
-      <a href="/teach.html" class="fc-link">Host an Activity</a>
-      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
-      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
-      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link"><i class="fas fa-comments"></i>Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link"><i class="fas fa-blog"></i>Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link"><i class="fas fa-star"></i>Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link"><i class="fas fa-door-open"></i>Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link"><i class="fas fa-code"></i>GSoC '26</a>
     </div>
 
-    <!-- Community column -->
+    <!-- RESOURCES & INFO -->
     <div>
-      <p class="fc-title">Community</p>
-      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
-      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
-      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
-      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
-      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
+      <p class="fc-title">Resources</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link"><i class="fas fa-circle-info"></i>About Us</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link"><i class="fas fa-github"></i>GitHub</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link"><i class="fas fa-chart-line"></i>Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link"><i class="fas fa-comment-dots"></i>Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link"><i class="fas fa-shield-halved"></i>Privacy</a>
     </div>
 
-    <!-- About column -->
+    <!-- CONNECT -->
     <div>
-      <p class="fc-title">About</p>
-      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
-      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
-      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
-      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
+      <p class="fc-title">Connect</p>
+      <div class="footer-social">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="X/Twitter">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:var(--teal);">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
+        </a>
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="footer-social-btn" title="Discord">
+          <i class="fab fa-discord"></i>
+        </a>
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="footer-social-btn" title="Instagram">
+          <i class="fab fa-instagram"></i>
+        </a>
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="Facebook">
+          <i class="fab fa-facebook"></i>
+        </a>
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="YouTube">
+          <i class="fab fa-youtube"></i>
+        </a>
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="footer-social-btn" title="GitHub">
+          <i class="fab fa-github"></i>
+        </a>
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="footer-social-btn" title="Slack">
+          <i class="fab fa-slack"></i>
+        </a>
+      </div>
     </div>
   </div>
 
-  <!-- Bottom bar -->
+  <!-- Footer Bottom -->
   <div class="footer-bottom">
-    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
-    <div style="display:flex;gap:1.25rem;">
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
-      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    <p>© 2024–2026 Alpha One Labs. All rights reserved. · Cloudflare Workers + D1</p>
+    <div class="footer-links">
+      <a href="https://alphaonelabs.com/en/about/">About Us</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms">Terms & Conditions</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies">Cookie Policy</a>
     </div>
   </div>
 </footer>
 
+<!-- ─── PROFILE DROPDOWN ─── -->
+<div id="profile-dropdown">
+  <div style="padding:14px 16px;border-bottom:1px solid var(--border);">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
+      <div>
+        <p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p>
+        <p id="dd-role" style="font-size:.7rem;color:var(--muted);margin-top:1px;"></p>
+      </div>
+    </div>
+  </div>
+  <div style="padding:6px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-user-circle" style="color:var(--teal);width:16px;"></i> View Profile
+    </a>
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-gauge" style="color:var(--teal);width:16px;"></i> Dashboard
+    </a>
+  </div>
+  <div style="padding:6px;border-top:1px solid var(--border);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:#dc2626;font-size:.83rem;font-weight:500;width:100%;text-align:left;">
+      <i class="fas fa-sign-out-alt" style="width:16px;"></i> Sign Out
+    </button>
+  </div>
+</div>
+
 <script>
 const API='';
 function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
@@ -498,6 +557,20 @@ <h3>Joined Activities</h3>
 // Navbar scroll
 window.addEventListener('scroll',()=>{document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>8);});
 
+// Mobile menu toggle
+function toggleMobileMenu(){
+  const menu=document.getElementById('mobile-menu');
+  menu.classList.toggle('hidden');
+  document.body.classList.toggle('overflow-hidden');
+}
+document.addEventListener('click',function(e){
+  const menu=document.getElementById('mobile-menu');
+  const btn=e.target.closest('[onclick="toggleMobileMenu()"]');
+  if(!menu.classList.contains('hidden')&&!btn&&!e.target.closest('#mobile-menu')){
+    toggleMobileMenu();
+  }
+});
+
 // Reveal animations
 const ro=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');}});},{threshold:.1,rootMargin:'0px 0px -40px 0px'});
 document.querySelectorAll('.reveal').forEach(el=>ro.observe(el));
@@ -511,16 +584,18 @@ <h3>Joined Activities</h3>
   if(token&&user){
     const ini=(user.name||user.username||'?').slice(0,2).toUpperCase();
     nav.innerHTML=`
-      <a href="/dashboard.html" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.8)'">Dashboard</a>
-      <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.2)'">${esc(ini)}</button>`;
+      <a href="/dashboard.html" class="nav-link">Dashboard</a>
+      <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;">${esc(ini)}</button>`;
     document.getElementById('dd-avatar').textContent=ini;
     document.getElementById('dd-name').textContent=user.name||user.username;
     document.getElementById('dd-role').textContent=user.role||'member';
     nav.appendChild(dd);
   } else {
     nav.innerHTML=`
-      <a href="/login.html" style="font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.8)'">Login</a>
-      <a href="/login.html?tab=register" style="font-size:.84rem;font-weight:700;background:#F97316;color:#fff;text-decoration:none;padding:8px 18px;border-radius:10px;font-family:'Syne',sans-serif;transition:background .18s;" onmouseover="this.style.background='#ea6c0a'" onmouseout="this.style.background='#F97316'">Sign Up Free</a>`;
+      <a href="/login.html" class="nav-link" style="display:flex;align-items:center;gap:6px;"><i class="fas fa-right-to-bracket"></i> Login</a>
+      <a href="/login.html?tab=register" style="display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.84rem;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;">
+        <i class="fas fa-user-plus"></i> Signup
+      </a>`;
   }
 }
 
diff --git a/public/teach.html b/public/teach.html
index fc8decf..947eb8d 100644
--- a/public/teach.html
+++ b/public/teach.html
@@ -32,22 +32,54 @@
     /* ─── NAVBAR ─── */
     #navbar{
       position:sticky;top:0;z-index:200;
-      background:rgba(13,148,136,.96);
-      backdrop-filter:blur(18px) saturate(180%);
-      border-bottom:1px solid rgba(255,255,255,.18);
-      box-shadow:0 2px 12px rgba(0,0,0,.12);
-      transition:box-shadow .3s,background .3s;
+      background:var(--teal);
+      box-shadow:0 2px 16px rgba(0,0,0,.15);
     }
-    #navbar.scrolled{background:rgba(15,118,110,.98);box-shadow:0 4px 20px rgba(0,0,0,.18);}
-    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:66px;}
+    #navbar.scrolled{background:var(--teal-dark);box-shadow:0 4px 24px rgba(0,0,0,.2);}
+    .nav-inner{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:68px;}
+    @media(max-width:768px){.nav-inner{height:60px;padding:0 1rem;}}
     .nav-logo{display:flex;align-items:center;gap:10px;}
-    .nav-logo img{width:38px;height:38px;border-radius:10px;}
-    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
+    .nav-logo img{width:50px;height:50px;border-radius:8px;}
+    @media(max-width:768px){.nav-logo img{width:40px;height:40px;}}
+    .nav-logo-text{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;}
+    @media(max-width:768px){.nav-logo-text{font-size:.95rem;}}
     .nav-links{display:flex;align-items:center;gap:2px;}
-    .nav-link{font-size:.84rem;font-weight:500;color:rgba(255,255,255,.8);padding:6px 14px;border-radius:8px;transition:color .15s,background .15s;}
-    .nav-link.active{color:#fff;background:rgba(255,255,255,.18);}
-    .nav-link:hover{color:#fff;background:rgba(255,255,255,.12);}
+    .nav-link{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.85);padding:6px 14px;border-radius:8px;}
+    .nav-link:hover{background:rgba(255,255,255,.15);color:#fff;}
+    .nav-link.active{background:rgba(255,255,255,.2);color:#fff;font-weight:600;}
     #nav-auth{display:flex;align-items:center;gap:10px;position:relative;}
+    .nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.3rem;cursor:pointer;}
+
+    @media(max-width:768px){
+      .nav-links{display:none;}
+      .nav-toggle{display:block;}
+    }
+
+    /* Mobile Menu */
+    #mobile-menu{
+      position:fixed;top:60px;left:0;right:0;bottom:0;
+      background:#fff;z-index:190;
+      overflow-y:auto;max-height:calc(100vh - 60px);
+      box-shadow:0 4px 12px rgba(0,0,0,.1);
+    }
+    #mobile-menu.hidden{display:none;}
+    .mobile-menu-item{padding:16px 16px;border-bottom:1px solid var(--border);}
+    .mobile-menu-item a{
+      font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;
+      display:flex;align-items:center;gap:10px;
+    }
+    .mobile-menu-item i{color:var(--teal);width:18px;}
+
+    /* Profile dropdown */
+    #profile-dropdown{
+      position:absolute;right:0;top:calc(100% + 10px);
+      background:#fff;border:1px solid var(--border);
+      border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.14);
+      min-width:220px;overflow:hidden;
+      opacity:0;transform:translateY(-8px) scale(.97);
+      pointer-events:none;
+    }
+    #profile-dropdown.open{opacity:1;transform:none;pointer-events:auto;}
 
     /* ─── HERO ─── */
     .hero{
@@ -140,17 +172,51 @@
     .activity-actions{display:flex;gap:8px;flex-shrink:0;}
 
     /* ─── FOOTER ─── */
-    footer{background:#0F172A;color:rgba(255,255,255,.45);}
-    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 2.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
-    @media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;}}
-    @media(max-width:480px){.footer-grid{grid-template-columns:1fr;}}
-    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:1.1rem;}
-    .fc-link{display:block;font-size:.82rem;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:.55rem;transition:color .15s;}
-    .fc-link:hover{color:rgba(255,255,255,.8);}
-    .footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:1.5rem;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
-    .f-social{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,.08);transition:all .2s;}
-    .f-social:hover{background:var(--teal-dim);color:var(--teal);border-color:var(--teal);transform:translateY(-2px);}
-    .f-social svg,.f-social i{font-size:1rem;}
+    footer{background:#ffffff;color:rgba(0,0,0,.6);padding:4rem 1.5rem 2rem;}
+    @media(max-width:768px){footer{padding:3rem 1.25rem 1.5rem;}}
+    @media(max-width:640px){footer{padding:2.5rem 1rem 1.5rem;}}
+    
+    .footer-grid{max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:3.5rem;}
+    @media(max-width:1024px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:3rem;}}
+    @media(max-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem;padding:2.5rem 1.25rem;}}
+    @media(max-width:640px){.footer-grid{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem;}}
+
+    .fc-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:1.5rem;}
+    @media(max-width:640px){.fc-title{font-size:.8rem;margin-bottom:1.25rem;}}
+    
+    .fc-link{display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(0,0,0,.55);margin-bottom:1rem;text-decoration:none;line-height:1.6;}
+    @media(max-width:768px){.fc-link{font-size:.9rem;margin-bottom:.85rem;}}
+    @media(max-width:640px){.fc-link{font-size:.85rem;margin-bottom:.75rem;}}
+
+    .fc-link i{color:var(--teal);width:18px;flex-shrink:0;}
+    .fc-link:hover{color:var(--teal);transform:translateX(4px);transition:all .3s ease;}
+
+    .footer-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.75rem;}
+    @media(max-width:640px){.footer-social{justify-content:flex-start;gap:10px;margin-top:1.5rem;}}
+
+    .footer-social-btn{
+      width:44px;height:44px;border-radius:50%;
+      background:var(--teal-dim);color:var(--teal);
+      display:flex;align-items:center;justify-content:center;
+      border:2px solid var(--teal);font-size:1rem;text-decoration:none;
+      transition:all .3s ease;
+    }
+    @media(max-width:640px){.footer-social-btn{width:40px;height:40px;font-size:.9rem;}}
+
+    .footer-social-btn:hover{background:var(--teal);color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(13,148,136,.25);}
+
+    .footer-bottom{border-top:2px solid var(--border);max-width:1200px;margin:0 auto;padding:1.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;color:rgba(0,0,0,.6);}
+    @media(max-width:768px){.footer-bottom{padding:1.25rem 1.25rem;flex-direction:column;text-align:center;gap:1rem;}}
+    @media(max-width:640px){.footer-bottom{padding:1rem 1rem;font-size:.8rem;gap:1rem;}}
+
+    .footer-links{display:flex;gap:2rem;text-decoration:none;}
+    @media(max-width:768px){.footer-links{flex-direction:column;gap:1rem;}}
+    @media(max-width:640px){.footer-links{gap:.75rem;}}
+
+    .footer-links a{color:rgba(0,0,0,.55);text-decoration:none;font-size:.9rem;transition:all .3s ease;}
+    @media(max-width:640px){.footer-links a{font-size:.8rem;}}
+    
+    .footer-links a:hover{color:var(--teal);font-weight:600;}
 
     /* ─── GRID ─── */
     .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
@@ -170,9 +236,9 @@
   <div class="nav-inner">
     <a href="/" class="nav-logo">
       <img src="./images/logo.png" alt="Alpha One Labs"
-           onerror="this.style.display='none';document.getElementById('lf2').style.display='flex'">
-      <div id="lf2" style="display:none;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:10px;align-items:center;justify-content:center;">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 14L9 4L15 14H3Z" fill="white"/></svg>
+           onerror="this.style.display='none';document.getElementById('logo-fb').style.display='flex'">
+      <div id="logo-fb" style="display:none;width:50px;height:50px;background:rgba(255,255,255,.2);border-radius:8px;align-items:center;justify-content:center;">
+        <i class="fas fa-graduation-cap" style="color:#fff;font-size:1.2rem;"></i>
       </div>
       <span class="nav-logo-text">Alpha One Labs</span>
     </a>
@@ -181,13 +247,24 @@
       <a href="/dashboard.html" class="nav-link">Dashboard</a>
       <a href="/teach.html" class="nav-link active">Host</a>
     </div>
-    <div id="nav-auth" style="display:flex;align-items:center;gap:10px;position:relative;">
-      <span class="nav-user" style="font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;" id="nav-user"></span>
-      <button type="button" onclick="logout()" style="font-size:.82rem;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;padding:6px 13px;border-radius:8px;transition:color .15s;background:transparent;border:none;cursor:pointer;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.7)'">Logout</button>
-    </div>
+    <div id="nav-auth"></div>
+    <button class="nav-toggle" onclick="toggleMobileMenu()"><i class="fas fa-bars"></i></button>
   </div>
 </nav>
 
+<!-- Mobile Menu -->
+<div id="mobile-menu" class="hidden">
+  <div class="mobile-menu-item">
+    <a href="/"><i class="fas fa-home"></i>Activities</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/dashboard.html"><i class="fas fa-gauge"></i>Dashboard</a>
+  </div>
+  <div class="mobile-menu-item">
+    <a href="/teach.html"><i class="fas fa-chalkboard-user"></i>Host</a>
+  </div>
+</div>
+
 <!-- ─── HERO ─── -->
 <div class="hero">
   <div class="hero-mesh"></div>
@@ -210,7 +287,7 @@ <h3>🎓 Create Activity</h3>
         </div>
         <div style="padding:1.5rem;">
           <form id="form-activity" novalidate>
-                        <div class="form-group">
+            <div class="form-group">
               <label for="a-title" class="form-label">Title *</label>
               <input id="a-title" type="text" required class="form-input" placeholder="e.g. Python Basics" />
             </div>
@@ -326,91 +403,158 @@ <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-
 <!-- ─── FOOTER ─── -->
 <footer>
   <div class="footer-grid">
+    <!-- LEARNING -->
     <div>
-      <div style="display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;">
-        <img src="./images/logo.png" alt="Alpha One Labs" style="width:34px;height:34px;border-radius:8px;" onerror="this.style.display='none'">
-        <span style="font-family:'Syne',sans-serif;font-weight:700;color:rgba(255,255,255,.82);font-size:.95rem;">Alpha One Labs</span>
-      </div>
-      <p style="font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.75;max-width:230px;margin-bottom:1.25rem;">Open Source Education Platform. All user data encrypted at rest. GSoC 2026 participant.</p>
-      <div style="margin-bottom:1.25rem;">
-        <p style="font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.6rem;">Affiliated with</p>
-        <img src="./images/logo-osl.svg" alt="Open Science Labs" style="height:28px;opacity:.75;transition:opacity .2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='.75'" onerror="this.style.display='none'">
-      </div>
-      <div style="display:flex;flex-wrap:wrap;gap:8px;">
-        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="X / Twitter">
-          <i class="fab fa-x-twitter"></i>
+      <p class="fc-title">Learning</p>
+      <a href="/" class="fc-link"><i class="fas fa-compass"></i>Activities</a>
+      <a href="/dashboard.html" class="fc-link"><i class="fas fa-gauge"></i>Dashboard</a>
+      <a href="/teach.html" class="fc-link"><i class="fas fa-chalkboard"></i>Host Activity</a>
+      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link"><i class="fas fa-book-open"></i>All Courses</a>
+      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link"><i class="fas fa-list-check"></i>Subjects</a>
+      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link"><i class="fas fa-users"></i>Study Groups</a>
+    </div>
+
+    <!-- COMMUNITY -->
+    <div>
+      <p class="fc-title">Community</p>
+      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link"><i class="fas fa-comments"></i>Forum</a>
+      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link"><i class="fas fa-blog"></i>Blog</a>
+      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link"><i class="fas fa-star"></i>Success Stories</a>
+      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link"><i class="fas fa-door-open"></i>Waiting Rooms</a>
+      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link"><i class="fas fa-code"></i>GSoC '26</a>
+    </div>
+
+    <!-- RESOURCES & INFO -->
+    <div>
+      <p class="fc-title">Resources</p>
+      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link"><i class="fas fa-circle-info"></i>About Us</a>
+      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link"><i class="fas fa-github"></i>GitHub</a>
+      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link"><i class="fas fa-chart-line"></i>Status</a>
+      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link"><i class="fas fa-comment-dots"></i>Feedback</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link"><i class="fas fa-shield-halved"></i>Privacy</a>
+    </div>
+
+    <!-- CONNECT -->
+    <div>
+      <p class="fc-title">Connect</p>
+      <div class="footer-social">
+        <a href="https://twitter.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="X/Twitter">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="color:var(--teal);">
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.254 5.622 5.91-5.622Zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+          </svg>
         </a>
-        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="f-social" title="Discord">
+        <a href="https://discord.gg/HJtuzTJN3h" target="_blank" rel="noopener" class="footer-social-btn" title="Discord">
           <i class="fab fa-discord"></i>
         </a>
-        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="f-social" title="Instagram">
+        <a href="https://instagram.com/alphaonelabs1" target="_blank" rel="noopener" class="footer-social-btn" title="Instagram">
           <i class="fab fa-instagram"></i>
         </a>
-        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="Facebook">
+        <a href="https://facebook.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="Facebook">
           <i class="fab fa-facebook"></i>
         </a>
-        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="f-social" title="YouTube">
+        <a href="https://youtube.com/alphaonelabs" target="_blank" rel="noopener" class="footer-social-btn" title="YouTube">
           <i class="fab fa-youtube"></i>
         </a>
-        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="f-social" title="GitHub">
+        <a href="https://github.com/alphaonelabs/learn" target="_blank" rel="noopener" class="footer-social-btn" title="GitHub">
           <i class="fab fa-github"></i>
         </a>
-        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="f-social" title="Slack">
+        <a href="https://join.slack.com/t/alphaonelabs/shared_invite/zt-3glzypiib-8Lq~UZwWvcCFAjeG5uwcPg" target="_blank" rel="noopener" class="footer-social-btn" title="Slack">
           <i class="fab fa-slack"></i>
         </a>
       </div>
     </div>
-    <div>
-      <p class="fc-title">Learning</p>
-      <a href="/" class="fc-link">Activities</a>
-      <a href="/dashboard.html" class="fc-link">Dashboard</a>
-      <a href="/teach.html" class="fc-link">Host an Activity</a>
-      <a href="https://alphaonelabs.com/en/courses/search/" target="_blank" class="fc-link">All Courses</a>
-      <a href="https://alphaonelabs.com/en/subjects/" target="_blank" class="fc-link">Subjects</a>
-      <a href="https://alphaonelabs.com/en/study-groups/" target="_blank" class="fc-link">Study Groups</a>
-    </div>
-    <div>
-      <p class="fc-title">Community</p>
-      <a href="https://alphaonelabs.com/en/forum/" target="_blank" class="fc-link">Forum</a>
-      <a href="https://alphaonelabs.com/en/blog/" target="_blank" class="fc-link">Blog</a>
-      <a href="https://alphaonelabs.com/en/success-stories/" target="_blank" class="fc-link">Success Stories</a>
-      <a href="https://alphaonelabs.com/en/waiting-rooms/" target="_blank" class="fc-link">Waiting Rooms</a>
-      <a href="https://github.com/alphaonelabs/alphaonelabs-education-website/wiki/GSOC-2026-Ideas" target="_blank" class="fc-link">GSoC '26</a>
-    </div>
-    <div>
-      <p class="fc-title">About</p>
-      <a href="https://alphaonelabs.com/en/about/" target="_blank" class="fc-link">Our Mission</a>
-      <a href="https://github.com/alphaonelabs/learn" target="_blank" class="fc-link">GitHub Repo</a>
-      <a href="https://alphaonelabs.com/en/status/" target="_blank" class="fc-link">Status</a>
-      <a href="https://alphaonelabs.com/en/feedback/" target="_blank" class="fc-link">Feedback</a>
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" class="fc-link">Privacy Policy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" class="fc-link">Terms</a>
-    </div>
   </div>
+
+  <!-- Footer Bottom -->
   <div class="footer-bottom">
-    <p style="font-size:.75rem;color:rgba(255,255,255,.22);">© 2024–2026 Alpha One Labs · Cloudflare Workers + D1 · All data encrypted at rest</p>
-    <div style="display:flex;gap:1.25rem;">
-      <a href="https://alphaonelabs.com/en/terms/#privacy" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Privacy</a>
-      <a href="https://alphaonelabs.com/en/terms/#terms" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Terms</a>
-      <a href="https://alphaonelabs.com/en/terms/#cookies" target="_blank" style="font-size:.73rem;color:rgba(255,255,255,.24);text-decoration:none;transition:color .15s;" onmouseover="this.style.color='rgba(255,255,255,.65)'" onmouseout="this.style.color='rgba(255,255,255,.24)'">Cookies</a>
+    <p>© 2024–2026 Alpha One Labs. All rights reserved. · Cloudflare Workers + D1</p>
+    <div class="footer-links">
+      <a href="https://alphaonelabs.com/en/about/">About Us</a>
+      <a href="https://alphaonelabs.com/en/terms/#terms">Terms & Conditions</a>
+      <a href="https://alphaonelabs.com/en/terms/#privacy">Privacy Policy</a>
+      <a href="https://alphaonelabs.com/en/terms/#cookies">Cookie Policy</a>
     </div>
   </div>
 </footer>
 
+<!-- ─── PROFILE DROPDOWN ─── -->
+<div id="profile-dropdown">
+  <div style="padding:14px 16px;border-bottom:1px solid var(--border);">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div id="dd-avatar" style="width:36px;height:36px;background:var(--teal-dim);border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:var(--teal);"></div>
+      <div>
+        <p id="dd-name" style="font-family:'Syne',sans-serif;font-weight:700;font-size:.83rem;color:var(--ink);"></p>
+        <p id="dd-role" style="font-size:.7rem;color:var(--muted);margin-top:1px;"></p>
+      </div>
+    </div>
+  </div>
+  <div style="padding:6px;">
+    <a href="/profile.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-user-circle" style="color:var(--teal);width:16px;"></i> View Profile
+    </a>
+    <a href="/dashboard.html" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:.83rem;font-weight:500;">
+      <i class="fas fa-gauge" style="color:var(--teal);width:16px;"></i> Dashboard
+    </a>
+  </div>
+  <div style="padding:6px;border-top:1px solid var(--border);">
+    <button onclick="logout()" style="display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:#dc2626;font-size:.83rem;font-weight:500;width:100%;text-align:left;">
+      <i class="fas fa-sign-out-alt" style="width:16px;"></i> Sign Out
+    </button>
+  </div>
+</div>
+
 <script>
   const API   = '';
-  const token = localStorage.getItem('edu_token');
-  const user  = JSON.parse(localStorage.getItem('edu_user') || 'null');
-  function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-  function logout() { localStorage.clear(); window.location.href = '/login.html'; }
-
-  if (!token || !user) {
-    window.location.href = '/login.html';
-  } else {
-    document.getElementById('nav-user').textContent = 'Hi, ' + user.username;
-    document.getElementById('host-content').style.display = 'block';
-    init();
+  function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+
+  // Navbar scroll
+  window.addEventListener('scroll',()=>{document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>8);});
+
+  // Mobile menu toggle
+  function toggleMobileMenu(){
+    const menu=document.getElementById('mobile-menu');
+    menu.classList.toggle('hidden');
+    document.body.classList.toggle('overflow-hidden');
   }
+  document.addEventListener('click',function(e){
+    const menu=document.getElementById('mobile-menu');
+    const btn=e.target.closest('[onclick="toggleMobileMenu()"]');
+    if(!menu.classList.contains('hidden')&&!btn&&!e.target.closest('#mobile-menu')){
+      toggleMobileMenu();
+    }
+  });
+
+  // Update navbar with auth state
+  function updateNav(){
+    const token=localStorage.getItem('edu_token');
+    const user=JSON.parse(localStorage.getItem('edu_user')||'null');
+    const nav=document.getElementById('nav-auth');
+    const dd=document.getElementById('profile-dropdown');
+    if(token&&user){
+      const ini=(user.name||user.username||'?').slice(0,2).toUpperCase();
+      nav.innerHTML=`
+        <a href="/dashboard.html" class="nav-link">Dashboard</a>
+        <button onclick="toggleDD(event)" style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:9px;border:none;cursor:pointer;font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:#fff;display:flex;align-items:center;justify-content:center;">${esc(ini)}</button>`;
+      document.getElementById('dd-avatar').textContent=ini;
+      document.getElementById('dd-name').textContent=user.name||user.username;
+      document.getElementById('dd-role').textContent=user.role||'member';
+      nav.appendChild(dd);
+      document.getElementById('host-content').style.display='block';
+      init();
+    } else {
+      nav.innerHTML=`
+        <a href="/login.html" class="nav-link" style="display:flex;align-items:center;gap:6px;"><i class="fas fa-right-to-bracket"></i> Login</a>
+        <a href="/login.html?tab=register" style="display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.84rem;padding:8px 18px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;">
+          <i class="fas fa-user-plus"></i> Signup
+        </a>`;
+      window.location.href='/login.html';
+    }
+  }
+
+  let ddOpen=false;
+  function toggleDD(e){e.stopPropagation();ddOpen=!ddOpen;document.getElementById('profile-dropdown').classList.toggle('open',ddOpen);}
+  document.addEventListener('click',()=>{if(ddOpen){ddOpen=false;document.getElementById('profile-dropdown').classList.remove('open');}});
+  function logout(){localStorage.removeItem('edu_token');localStorage.removeItem('edu_user');window.location.href='/login.html';}
 
   const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
   const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
@@ -430,10 +574,11 @@ <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-
   }
 
   async function loadHostedActivities() {
-    const res  = await fetch('/api/dashboard', { headers:{ Authorization:'Bearer ' + token } });
+    const token=localStorage.getItem('edu_token');
+    const res  = await fetch(`${API}/api/dashboard`, { headers:{ Authorization:'Bearer ' + token } });
     const data = await res.json();
     hostedActivities = data.hosted_activities || [];
-    document.getElementById('hosted-count').textContent = hostedActivities.length + ' activities';
+    document.getElementById('hosted-count').textContent = '(' + hostedActivities.length + ')';
 
     const sel = document.getElementById('s-activity');
     sel.innerHTML = '<option value="">Select one of your activities...</option>' +
@@ -482,10 +627,11 @@ <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-
     document.getElementById('act-ok').classList.remove('show');
     const btn = e.target.querySelector('button[type=submit]');
     btn.textContent = 'Creating...'; btn.disabled = true;
+    const token=localStorage.getItem('edu_token');
     const rawTags = document.getElementById('a-tags').value;
     const tags = rawTags ? rawTags.split(',').map(t => t.trim()).filter(Boolean) : [];
     try {
-      const res  = await fetch('/api/activities', {
+      const res  = await fetch(`${API}/api/activities`, {
         method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + token },
         body: JSON.stringify({
           title:         document.getElementById('a-title').value.trim(),
@@ -513,9 +659,10 @@ <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-
     const actId = document.getElementById('s-activity').value;
     if (!actId) { showMsg('ses-err', 'Please select an activity', true); return; }
     btn.textContent = 'Adding...'; btn.disabled = true;
+    const token=localStorage.getItem('edu_token');
     const fmt = v => v ? v.replace('T',' ') : '';
     try {
-      const res  = await fetch('/api/sessions', {
+      const res  = await fetch(`${API}/api/sessions`, {
         method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + token },
         body: JSON.stringify({
           activity_id: actId,
@@ -538,6 +685,8 @@ <h2 class="section-title">Hosted Activities <span id="hosted-count" style="font-
     } catch (err) { showMsg('ses-err', err.message, true); }
     finally { btn.textContent = 'Add Session'; btn.disabled = false; }
   });
+
+  updateNav();
 </script>
 </body>
 </html>
\ No newline at end of file