From 3fd219d513a3a9cf7640db18276db15d6d3d00a8 Mon Sep 17 00:00:00 2001
From: Ananya <ananyagupt2006@gmail.com>
Date: Thu, 18 Jun 2026 00:17:45 +0530
Subject: [PATCH 1/3] course materials

---
 migrations/0006_add_course_materials.sql |  17 +
 public/activity.html                     | 769 +++++++++------------
 public/course-materials.html             | 598 +++++++++++++++++
 public/js/activity.js                    | 812 +++++++++++++++++++++++
 src/api/materials.py                     | 496 ++++++++++++++
 src/worker.py                            |  92 +++
 tests/test_api_materials.py              | 662 ++++++++++++++++++
 wrangler.toml                            |   6 +
 8 files changed, 2999 insertions(+), 453 deletions(-)
 create mode 100644 migrations/0006_add_course_materials.sql
 create mode 100644 public/course-materials.html
 create mode 100644 public/js/activity.js
 create mode 100644 src/api/materials.py
 create mode 100644 tests/test_api_materials.py

diff --git a/migrations/0006_add_course_materials.sql b/migrations/0006_add_course_materials.sql
new file mode 100644
index 0000000..b7d5092
--- /dev/null
+++ b/migrations/0006_add_course_materials.sql
@@ -0,0 +1,17 @@
+-- Migration 0004: Add course_materials table for activity file attachments
+
+CREATE TABLE IF NOT EXISTS course_materials (
+    id          TEXT PRIMARY KEY,
+    activity_id TEXT NOT NULL,
+    title       TEXT NOT NULL,
+    description TEXT,
+    file_key    TEXT NOT NULL,
+    uploaded_by TEXT,
+    created_at  TEXT NOT NULL DEFAULT (datetime('now')),
+    FOREIGN KEY (activity_id) REFERENCES activities(id) ON DELETE CASCADE,
+    FOREIGN KEY (uploaded_by) REFERENCES users(id) ON DELETE SET NULL
+);
+
+CREATE INDEX IF NOT EXISTS idx_materials_activity ON course_materials(activity_id);
+CREATE INDEX IF NOT EXISTS idx_materials_uploader ON course_materials(uploaded_by);
+CREATE INDEX IF NOT EXISTS idx_materials_created  ON course_materials(activity_id, created_at DESC);
diff --git a/public/activity.html b/public/activity.html
index 5dde4c0..d1f7daa 100644
--- a/public/activity.html
+++ b/public/activity.html
@@ -9,73 +9,77 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   
   <script>
-    tailwind.config = {
-      darkMode: 'class',
-      theme: { extend: {} }
-    }
-
-    function initializeDarkMode() {
-      const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
-      if (darkModeEnabled) {
-        document.documentElement.classList.add('dark');
-      } else if (localStorage.getItem('darkMode') === null) {
-        localStorage.setItem('darkMode', 'false');
-      }
-    }
-
-    initializeDarkMode();
-    document.addEventListener('DOMContentLoaded', initializeDarkMode);
+    tailwind.config = { darkMode: 'class', theme: { extend: {} } };
+    (function () {
+      if (localStorage.getItem('darkMode') === 'true') document.documentElement.classList.add('dark');
+      else if (localStorage.getItem('darkMode') === null) localStorage.setItem('darkMode', 'false');
+    })();
   </script>
 
   <style>
-    html, body {
-      overflow-x: hidden;
-      box-sizing: border-box;
-    }
-    
+    html, body { overflow-x: hidden; box-sizing: border-box; }
     .dark { color-scheme: dark; }
-    :root { color-scheme: light; }
-    
+    :root  { color-scheme: light; }
+
     .gradient-hero {
       background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #06B6D4 100%);
     }
-    
-    .gradient-hero.dark {
-      background: linear-gradient(135deg, #134E4A 0%, #0F766E 50%, #164E63 100%);
-    }
-
-    .badge { 
-      display: inline-block; 
-      padding: 4px 12px; 
-      border-radius: 9999px; 
-      font-size: 0.75rem; 
-      font-weight: 600; 
-    }
-
-    .card-hover { 
-      transition: transform 0.2s, box-shadow 0.2s; 
-    }
-    
-    .card-hover:hover { 
-      transform: translateY(-4px); 
-      box-shadow: 0 12px 30px rgba(0,0,0,0.12); 
-    }
-
-    .tag-pill { 
-      cursor: pointer; 
-      transition: background 0.15s; 
-    }
-    
-    .tag-pill.active { 
-      background: #0F766E; 
-      color: #fff; 
+    .badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 9999px;
+      font-size: 0.75rem;
+      font-weight: 600;
     }
+    .card-hover { transition: transform 0.2s, box-shadow 0.2s; }
+    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
+    .tag-pill { cursor: pointer; transition: background 0.15s; }
+    .tag-pill.active { background: #0F766E; color: #fff; }
 
     /* View modes */
     .view-browser { display: block; }
-    .view-detail { display: none; }
+    .view-detail  { display: none; }
     .view-browser.hidden { display: none; }
-    .view-detail.active { display: block; }
+    .view-detail.active  { display: block; }
+
+    /* Tab system */
+    .tab-btn {
+      position: relative;
+      padding: 0.75rem 1.25rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #6b7280;
+      border-bottom: 3px solid transparent;
+      border-top: none; border-left: none; border-right: none;
+      transition: color 0.15s, border-color 0.15s;
+      white-space: nowrap;
+      cursor: pointer;
+      background: none;
+    }
+    .dark .tab-btn { color: #9ca3af; }
+    .tab-btn:hover { color: #0d9488; }
+    .dark .tab-btn:hover { color: #2dd4bf; }
+    .tab-btn.active { color: #0d9488; border-bottom-color: #0d9488; }
+    .dark .tab-btn.active { color: #2dd4bf; border-bottom-color: #2dd4bf; }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+
+    /* Material card */
+    .material-card { transition: transform 0.15s, box-shadow 0.15s; }
+    .material-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
+
+    /* Upload progress */
+    #mat-upload-progress-bar { transition: width 0.3s ease; }
+
+    /* Toast */
+    #act-toast { transition: opacity .3s ease, transform .3s ease; }
+    #act-toast.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
+
+    /* Drop zone drag-over */
+    #mat-drop-zone.drag-over {
+      border-color: #0d9488;
+      background-color: rgba(13,148,136,0.05);
+    }
   </style>
 </head>
 
@@ -86,27 +90,21 @@
   <!-- ==================== BROWSER VIEW ==================== -->
   <div id="browser-view" class="view-browser">
 
-    <!-- ===== HERO SECTION ===== -->
     <section class="gradient-hero text-white py-16 md:py-20 relative overflow-hidden">
       <div class="absolute inset-0 pointer-events-none select-none opacity-10" aria-hidden="true">
         <i class="fas fa-book-open absolute top-10 left-10 text-6xl"></i>
         <i class="fas fa-users absolute bottom-10 right-10 text-6xl"></i>
       </div>
-
       <div class="relative max-w-[90rem] mx-auto px-4 md:px-6">
         <nav class="text-teal-100 text-sm mb-6 flex items-center gap-2">
-          <i class="fas fa-list mr-1"></i>
-          <span>All Activities</span>
+          <i class="fas fa-list mr-1"></i><span>All Activities</span>
         </nav>
-
         <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
           Discover Learning Activities
         </h1>
         <p class="text-lg text-teal-100 mb-8 max-w-2xl">
           Browse courses, meetups, workshops, and study groups. All sessions encrypted and secure.
         </p>
-
-        <!-- Search + Filters -->
         <div class="flex flex-col md:flex-row gap-3 max-w-2xl">
           <input id="search" type="text" placeholder="🔍 Search activities…"
             class="flex-1 px-4 py-2.5 rounded-xl border border-white/20 bg-white/10 text-white placeholder-white/50 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/40 text-sm backdrop-blur" />
@@ -129,35 +127,25 @@ <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
       </div>
     </section>
 
-    <!-- ===== MAIN CONTENT ===== -->
     <main class="flex-1 max-w-[90rem] mx-auto w-full px-4 md:px-6 py-12">
-
-      <!-- Tag cloud -->
       <div id="tag-cloud" class="flex flex-wrap gap-2 mb-8"></div>
-
-      <!-- Activity grid -->
-      <div id="activity-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-        <!-- Populated by JS -->
-      </div>
-
+      <div id="activity-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"></div>
       <p id="no-results" class="hidden text-center text-gray-400 dark:text-gray-500 py-16 text-lg">
         <i class="fas fa-search text-4xl mb-4 block opacity-50"></i>
         No activities found matching your filters.
       </p>
     </main>
-
   </div>
 
   <!-- ==================== DETAIL VIEW ==================== -->
   <div id="detail-view" class="view-detail">
 
-    <!-- ===== HERO SECTION ===== -->
-    <section class="gradient-hero text-white py-16 md:py-20 relative overflow-hidden">
+    <!-- Hero -->
+    <section class="gradient-hero text-white py-14 relative overflow-hidden">
       <div class="absolute inset-0 pointer-events-none select-none opacity-10" aria-hidden="true">
         <i class="fas fa-book-open absolute top-10 left-10 text-6xl"></i>
         <i class="fas fa-users absolute bottom-10 right-10 text-6xl"></i>
       </div>
-
       <div class="relative max-w-[90rem] mx-auto px-4 md:px-6">
         <nav class="text-teal-100 text-sm mb-6 flex items-center gap-2">
           <button onclick="backToBrowser()" class="hover:text-white transition flex items-center gap-1">
@@ -166,18 +154,13 @@ <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
           <span>/</span>
           <span id="crumb-title" class="text-teal-50">Loading...</span>
         </nav>
-
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
           <div class="lg:col-span-2">
-            <h1 id="act-title" class="text-4xl md:text-5xl lg:text-5xl font-extrabold text-white leading-tight mb-4">
-              Loading...
-            </h1>
+            <h1 id="act-title" class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">Loading...</h1>
             <p id="act-meta" class="text-lg text-teal-100 mb-6">Loading metadata...</p>
             <div id="act-badges" class="flex flex-wrap gap-2 mb-6"></div>
             <div id="act-action"></div>
           </div>
-
-          <!-- Quick Info Card -->
           <div class="lg:col-span-1">
             <div class="bg-white/10 dark:bg-black/30 backdrop-blur-lg border border-white/20 rounded-2xl p-6 text-white">
               <h3 class="font-bold text-lg mb-4 flex items-center">
@@ -190,405 +173,285 @@ <h3 class="font-bold text-lg mb-4 flex items-center">
       </div>
     </section>
 
-    <!-- ===== MAIN CONTENT ===== -->
-    <main class="flex-1 max-w-[90rem] mx-auto w-full px-4 md:px-6 py-12">
-      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-
-        <!-- Left Sidebar -->
-        <aside class="lg:col-span-1 space-y-6">
-          
-          <!-- About Card -->
-          <div class="rounded-2xl p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md hover:shadow-lg transition-shadow">
-            <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-              <i class="fas fa-file-alt mr-2 text-teal-600 dark:text-teal-400"></i>About
-            </h2>
-            <p id="act-description" class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-4">
-              Loading description...
-            </p>
-            <div id="act-tags" class="flex flex-wrap gap-2"></div>
-          </div>
-
-          <!-- Sessions Card -->
-          <div id="sessions-card" class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
-            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20">
-              <h2 class="font-bold text-gray-800 dark:text-gray-200 flex items-center">
-                <i class="fas fa-calendar mr-2 text-teal-600 dark:text-teal-400"></i>Sessions
+    <!-- Tab Bar -->
+    <div class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-20 shadow-sm">
+      <div class="max-w-[90rem] mx-auto px-4 md:px-6">
+        <div class="flex gap-0 overflow-x-auto" id="tab-bar" role="tablist">
+          <button class="tab-btn active" data-tab="overview" onclick="switchTab('overview')" role="tab">
+            <i class="fas fa-home mr-2"></i>Overview
+          </button>
+          <button class="tab-btn" data-tab="sessions" onclick="switchTab('sessions')" role="tab">
+            <i class="fas fa-calendar mr-2"></i>Sessions
+            <span id="tab-sessions-count" class="ml-1.5 text-xs bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300 px-1.5 py-0.5 rounded-full hidden"></span>
+          </button>
+          <button class="tab-btn" data-tab="materials" onclick="switchTab('materials')" role="tab">
+            <i class="fas fa-folder-open mr-2"></i>Materials
+            <span id="tab-materials-count" class="ml-1.5 text-xs bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 px-1.5 py-0.5 rounded-full hidden"></span>
+          </button>
+          <button class="tab-btn" data-tab="host" onclick="switchTab('host')" role="tab">
+            <i class="fas fa-user-tie mr-2"></i>About Host
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab Panels -->
+    <main class="flex-1 max-w-[90rem] mx-auto w-full px-4 md:px-6 py-8">
+
+      <!-- ── OVERVIEW TAB ── -->
+      <div id="tab-overview" class="tab-panel active">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <aside class="lg:col-span-1 space-y-6">
+            <!-- About -->
+            <div class="rounded-2xl p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
+              <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+                <i class="fas fa-file-alt mr-2 text-teal-600 dark:text-teal-400"></i>About
               </h2>
-              <span id="sessions-count" class="text-xs bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 px-2.5 py-1 rounded-full font-semibold"></span>
+              <p id="act-description" class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed mb-4">Loading description...</p>
+              <div id="act-tags" class="flex flex-wrap gap-2"></div>
             </div>
-            <ul id="sessions-list" class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[60vh] overflow-y-auto">
-              <li class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                <i class="fas fa-spinner fa-spin"></i>Loading sessions...
-              </li>
-            </ul>
-          </div>
-
-          <!-- Similar Activities Card -->
-          <div id="similar-card" class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
-            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20">
-              <h2 class="font-bold text-gray-800 dark:text-gray-200 flex items-center">
-                <i class="fas fa-star mr-2 text-purple-600 dark:text-purple-400"></i>Similar Activities
+            <!-- Similar -->
+            <div id="similar-card" class="rounded-2xl overflow-hidden bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
+              <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20">
+                <h2 class="font-bold text-gray-800 dark:text-gray-200 flex items-center">
+                  <i class="fas fa-star mr-2 text-purple-600 dark:text-purple-400"></i>Similar Activities
+                </h2>
+              </div>
+              <ul id="similar-list" class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[50vh] overflow-y-auto">
+                <li class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                  <i class="fas fa-spinner fa-spin"></i>Loading...
+                </li>
+              </ul>
+            </div>
+          </aside>
+
+          <div class="lg:col-span-2 space-y-6">
+            <!-- Not Joined CTA -->
+            <div id="join-cta" class="hidden rounded-2xl p-8 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 border border-teal-200 dark:border-teal-800 text-center">
+              <div class="text-5xl mb-4">🔒</div>
+              <h3 class="font-bold text-2xl text-gray-800 dark:text-gray-200 mb-2">Join to Access Details</h3>
+              <p class="text-gray-600 dark:text-gray-300 text-sm mb-6 max-w-sm mx-auto">
+                Session locations and descriptions are encrypted and only revealed to participants.
+              </p>
+              <button id="btn-join" onclick="joinActivity()"
+                class="bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white font-bold px-8 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all">
+                <i class="fas fa-user-plus mr-2"></i>Join Activity - Free
+              </button>
+            </div>
+            <!-- Member Card -->
+            <div id="member-card" class="hidden rounded-2xl p-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
+              <h2 class="font-bold text-lg text-green-800 dark:text-green-300 mb-4 flex items-center">
+                <i class="fas fa-check-circle mr-2"></i>Your Participation
               </h2>
+              <div id="enr-details" class="flex flex-wrap gap-3 text-sm"></div>
+            </div>
+            <!-- Welcome -->
+            <div id="welcome-card" class="rounded-2xl p-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
+              <h2 class="font-bold text-2xl text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+                <i class="fas fa-star mr-2 text-yellow-500"></i>Welcome!
+              </h2>
+              <p id="welcome-text" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">Loading welcome message...</p>
             </div>
-            <ul id="similar-list" class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[50vh] overflow-y-auto">
-              <li class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 flex items-center gap-2">
-                <i class="fas fa-spinner fa-spin"></i>Loading...
-              </li>
-            </ul>
           </div>
+        </div>
+      </div>
 
-        </aside>
-
-        <!-- Main Content Area -->
-        <div class="lg:col-span-3 space-y-6">
-
-          <!-- Not Joined CTA -->
-          <div id="join-cta" class="hidden rounded-2xl p-8 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 border border-teal-200 dark:border-teal-800 text-center">
-            <div class="text-5xl mb-4">🔒</div>
-            <h3 class="font-bold text-2xl text-gray-800 dark:text-gray-200 mb-2">Join to Access Details</h3>
-            <p class="text-gray-600 dark:text-gray-300 text-sm mb-6 max-w-sm mx-auto">
-              Session locations and descriptions are encrypted and only revealed to participants.
-            </p>
-            <button id="btn-join" onclick="joinActivity()"
-              class="bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white font-bold px-8 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all">
-              <i class="fas fa-user-plus mr-2"></i>Join Activity - Free
-            </button>
+      <!-- ── SESSIONS TAB ── -->
+      <div id="tab-sessions" class="tab-panel">
+        <div class="max-w-3xl">
+          <div id="sessions-empty" class="hidden text-center py-16 text-gray-400 dark:text-gray-500">
+            <i class="fas fa-calendar-times text-5xl mb-4 opacity-40"></i>
+            <p class="text-lg font-medium">No sessions scheduled yet</p>
           </div>
+          <ul id="sessions-list-tab" class="space-y-4"></ul>
+        </div>
+      </div>
 
-          <!-- Member Card -->
-          <div id="member-card" class="hidden rounded-2xl p-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
-            <h2 class="font-bold text-lg text-green-800 dark:text-green-300 mb-4 flex items-center">
-              <i class="fas fa-check-circle mr-2"></i>Your Participation
-            </h2>
-            <div id="enr-details" class="flex flex-wrap gap-3 text-sm"></div>
-          </div>
+      <!-- ── MATERIALS TAB ── -->
+      <div id="tab-materials" class="tab-panel">
+        <div class="max-w-3xl space-y-6">
 
-          <!-- Welcome Card -->
-          <div id="welcome-card" class="rounded-2xl p-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
-            <h2 class="font-bold text-2xl text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-              <i class="fas fa-star mr-2 text-yellow-500"></i>Welcome!
+          <!-- Host-only upload form -->
+          <div id="mat-upload-section" class="hidden bg-white dark:bg-gray-800 rounded-2xl shadow-md border border-gray-200 dark:border-gray-700 p-6">
+            <h2 class="text-lg font-bold mb-5 flex items-center gap-2 text-gray-800 dark:text-gray-200">
+              <i class="fas fa-upload text-teal-600 dark:text-teal-400"></i>Upload New Material
             </h2>
-            <p id="welcome-text" class="text-gray-600 dark:text-gray-300 text-base leading-relaxed">
-              Loading welcome message...
-            </p>
+            <form id="mat-upload-form" class="space-y-4" novalidate>
+              <div>
+                <label for="mat-title" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
+                  Title <span class="text-red-500">*</span>
+                </label>
+                <input id="mat-title" type="text" placeholder="e.g. Week 1 Lecture Slides" maxlength="200"
+                  class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm" />
+              </div>
+              <div>
+                <label for="mat-desc" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Description</label>
+                <textarea id="mat-desc" rows="2" placeholder="Optional short description…" maxlength="500"
+                  class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm resize-none"></textarea>
+              </div>
+              <div>
+                <label class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
+                  File <span class="text-red-500">*</span>
+                </label>
+                <div id="mat-drop-zone"
+                  class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 text-center cursor-pointer hover:border-teal-500 transition-colors">
+                  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Drag &amp; drop a file here, or
+                    <span class="text-teal-600 dark:text-teal-400 font-medium underline cursor-pointer" id="mat-browse-link">browse</span>
+                  </p>
+                  <p id="mat-selected-file" class="mt-2 text-xs text-teal-700 dark:text-teal-400 font-medium hidden"></p>
+                  <input id="mat-file-input" type="file" class="hidden" />
+                </div>
+              </div>
+              <div id="mat-upload-progress" class="hidden">
+                <div class="flex justify-between text-xs text-gray-500 mb-1">
+                  <span>Uploading…</span><span id="mat-upload-pct">0%</span>
+                </div>
+                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                  <div id="mat-upload-progress-bar" class="bg-teal-500 h-2 rounded-full" style="width:0%"></div>
+                </div>
+              </div>
+              <p id="mat-upload-error" class="text-red-500 text-sm hidden"></p>
+              <button type="submit" id="mat-upload-btn"
+                class="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold py-2.5 px-4 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm flex items-center justify-center gap-2">
+                <i class="fas fa-upload"></i>Upload Material
+              </button>
+            </form>
           </div>
 
-          <!-- Host Info Card -->
-          <div id="host-card" class="hidden rounded-2xl p-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
-            <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-              <i class="fas fa-user-tie mr-2 text-teal-600 dark:text-teal-400"></i>Activity Host
+          <!-- List header -->
+          <div class="flex items-center justify-between">
+            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
+              <i class="fas fa-file-alt text-teal-600 dark:text-teal-400"></i>
+              Course Materials
+              <span id="mat-count-label" class="text-sm font-normal text-gray-500 dark:text-gray-400"></span>
             </h2>
-            <div id="host-info" class="flex items-center gap-4">
-              <!-- Populated by JS -->
-            </div>
+            <button onclick="loadMaterials()" title="Refresh"
+              class="text-sm text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 flex items-center gap-1 transition-colors">
+              <i class="fas fa-sync-alt"></i>
+            </button>
           </div>
 
-        </div>
-
-      </div>
-    </main>
-
-  </div>
+          <!-- Loading skeleton -->
+          <div id="mat-loading" class="space-y-3">
+            <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow border border-gray-100 dark:border-gray-700"></div>
+            <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow border border-gray-100 dark:border-gray-700"></div>
+            <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow border border-gray-100 dark:border-gray-700"></div>
+          </div>
 
-  <div id="site-footer"></div>
+          <!-- Empty state -->
+          <div id="mat-empty" class="hidden text-center py-16 text-gray-400 dark:text-gray-500">
+            <i class="fas fa-folder-open text-5xl mb-4 opacity-40"></i>
+            <p class="text-lg font-medium">No materials yet</p>
+            <p class="text-sm mt-1" id="mat-empty-sub">Check back later for course materials.</p>
+          </div>
 
-  <script src="/js/layout.js" defer></script>
-  <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;').replace(/"/g,'&quot;'); }
-    function logout() { localStorage.clear(); window.location.href = '/login.html'; }
-
-    const typeIcon  = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
-    const typeColor = { course:'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300', meetup:'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300', workshop:'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300', seminar:'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-300', other:'bg-slate-100 text-slate-600 dark:bg-slate-900/30 dark:text-slate-300' };
-    const fmtLabel  = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
-    const fmtColor  = { live:'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300', self_paced:'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300', hybrid:'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' };
-    const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };
-
-    let allActivities = [];
-    let currentActivity = null;
-    let activeTag = null;
-
-    // ==================== VIEW SWITCHING ====================
-    function showBrowser() {
-      document.getElementById('browser-view').classList.remove('hidden');
-      document.getElementById('detail-view').classList.remove('active');
-      window.history.pushState(null, '', '/activity.html');
-    }
+          <!-- Error state -->
+          <div id="mat-error" class="hidden text-center py-12 text-red-500">
+            <i class="fas fa-exclamation-triangle text-4xl mb-3 opacity-60"></i>
+            <p class="font-medium">Failed to load materials</p>
+            <p id="mat-error-msg" class="text-sm mt-1 text-gray-500"></p>
+          </div>
 
-    function showDetail(activityId) {
-      document.getElementById('browser-view').classList.add('hidden');
-      document.getElementById('detail-view').classList.add('active');
-      window.history.pushState({activityId}, '', `/activity.html?id=${activityId}`);
-      loadActivityDetail(activityId);
-    }
+          <!-- Materials list -->
+          <ul id="mat-list" class="space-y-3 hidden"></ul>
 
-    function backToBrowser() {
-      showBrowser();
-    }
+        </div>
+      </div>
 
-    // ==================== ACTIVITY CARD RENDERING ====================
-    function renderActivityCard(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-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">${esc(t)}</span>`).join('');
-      return `
-        <article class="bg-white dark:bg-gray-800 rounded-2xl shadow-md border border-gray-200 dark:border-gray-700 p-6 card-hover flex flex-col gap-3 cursor-pointer" onclick="showDetail('${esc(a.id)}')">
-          <div class="flex items-start justify-between gap-2">
-            <h3 class="font-bold text-gray-800 dark:text-gray-200 text-base leading-snug">${ic} ${esc(a.title)}</h3>
-            <span class="badge ${tc} shrink-0">${esc(a.type)}</span>
-          </div>
-          <p class="text-gray-600 dark:text-gray-300 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-gray-100 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-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>` : ''}
+      <!-- ── ABOUT HOST TAB ── -->
+      <div id="tab-host" class="tab-panel">
+        <div class="max-w-2xl">
+          <div class="rounded-2xl p-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md">
+            <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-6 flex items-center">
+              <i class="fas fa-user-tie mr-2 text-teal-600 dark:text-teal-400"></i>Activity Host
+            </h2>
+            <div class="flex items-center gap-5">
+              <div id="host-avatar"
+                class="w-16 h-16 rounded-full bg-gradient-to-br from-teal-400 to-cyan-500 flex items-center justify-center text-white text-2xl font-bold shrink-0">
+                ?
+              </div>
+              <div>
+                <p id="host-name-tab" class="font-semibold text-gray-800 dark:text-gray-200 text-xl">Loading…</p>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Activity Host</p>
+              </div>
             </div>
           </div>
-          <p class="text-xs text-gray-400 dark:text-gray-500">by <span class="font-medium text-gray-600 dark:text-gray-300">${esc(a.host_name)}</span></p>
-        </article>`;
-    }
-
-    // ==================== BROWSER VIEW FUNCTIONS ====================
-    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(renderActivityCard).join(''); 
-      }
-    }
-
-    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]).slice(0, 8);
-      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-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900/30 hover:text-teal-600 dark:hover:text-teal-400">
-          ${esc(name)} <span class="opacity-60">${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'));
-        const el = document.getElementById(`tag-${name}`);
-        if (el) el.classList.add('active');
-      }
-      renderGrid();
-    }
+        </div>
+      </div>
 
-    async function loadAllActivities() {
-      try {
-        const res  = await fetch(`${API}/api/activities`);
-        const data = await res.json();
-        allActivities = data.activities || [];
-        buildTagCloud(allActivities);
-        renderGrid();
-      } catch (e) {
-        console.error('Failed to load activities:', e);
-        document.getElementById('activity-grid').innerHTML =
-          `<p class="col-span-3 text-center text-red-400 py-16">Failed to load activities.</p>`;
-      }
-    }
+    </main>
+  </div>
 
-    // ==================== DETAIL VIEW FUNCTIONS ====================
-    function getSimilarActivities(activity, limit = 3) {
-      if (!activity || !allActivities.length) return [];
-      return allActivities
-        .filter(a => a.id !== activity.id && (
-          a.type === activity.type || 
-          (a.tags || []).some(t => (activity.tags || []).includes(t))
-        ))
-        .slice(0, limit);
-    }
+  <div id="site-footer"></div>
 
-    function renderSimilarActivities() {
-      if (!currentActivity) return;
-      
-      const similar = getSimilarActivities(currentActivity);
-      const ul = document.getElementById('similar-list');
-      const card = document.getElementById('similar-card');
-      
-      if (!similar.length) {
-        card.classList.add('hidden');
-        return;
-      }
-
-      ul.innerHTML = similar.map(s => {
-        const ic = typeIcon[s.type] || '✨';
-        return `
-          <li class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition cursor-pointer" onclick="showDetail('${esc(s.id)}')">
-            <p class="font-semibold text-gray-800 dark:text-gray-200 text-sm">${ic} ${esc(s.title)}</p>
-            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">by ${esc(s.host_name)}</p>
-            <p class="text-xs text-teal-600 dark:text-teal-400 mt-1">👥 ${s.participant_count} participants</p>
-          </li>
-        `;
-      }).join('');
-    }
+  <!-- ==================== TOAST ==================== -->
+  <div id="act-toast"
+    class="hidden fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3 rounded-xl shadow-xl text-white text-sm font-medium max-w-xs">
+    <i id="act-toast-icon" class="fas fa-check-circle text-lg"></i>
+    <span id="act-toast-msg"></span>
+  </div>
 
-    async function loadActivityDetail(activityId) {
-      const headers = token ? { Authorization: 'Bearer ' + token } : {};
-      const res = await fetch('/api/activities/' + activityId, { headers });
-      const data = await res.json();
-      if (!res.ok) { document.getElementById('act-title').textContent = 'Activity not found'; return; }
-
-      const a = data.activity;
-      currentActivity = a;
-      
-      document.title = a.title + ' - Alpha One Labs';
-      document.getElementById('crumb-title').textContent = a.title;
-      document.getElementById('act-title').textContent = a.title;
-      document.getElementById('act-description').textContent = a.description;
-      document.getElementById('act-meta').textContent =
-        'by ' + a.host_name + '  ·  ' + a.participant_count + ' participants  ·  ' +
-        (data.sessions.length) + ' sessions';
-
-      const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600 dark:bg-slate-900/30 dark:text-slate-300';
-      const fc = fmtColor[a.format] || 'bg-slate-100 text-slate-600 dark:bg-slate-900/30 dark:text-slate-300';
-      const ic = typeIcon[a.type] || '✨';
-      document.getElementById('act-badges').innerHTML =
-        '<span class="badge ' + tc + '">' + ic + ' ' + esc(a.type) + '</span>' +
-        '<span class="badge ' + fc + '">' + fmtLabel[a.format] + '</span>' +
-        '<span class="badge bg-white/20 text-white">' + schedLabel[a.schedule_type] + '</span>';
-
-      document.getElementById('act-details').innerHTML =
-        '<div class="flex items-center gap-2 text-teal-100"><span>📋</span><span><strong>Type:</strong> ' + esc(a.type) + '</span></div>' +
-        '<div class="flex items-center gap-2 text-teal-100"><span>📡</span><span><strong>Format:</strong> ' + fmtLabel[a.format] + '</span></div>' +
-        '<div class="flex items-center gap-2 text-teal-100"><span>🗓</span><span><strong>Schedule:</strong> ' + schedLabel[a.schedule_type] + '</span></div>' +
-        '<div class="flex items-center gap-2 text-teal-100"><span>👥</span><span><strong>Participants:</strong> ' + a.participant_count + '</span></div>';
-
-      if (a.tags && a.tags.length) {
-        document.getElementById('act-tags').innerHTML =
-          a.tags.map(t => '<span class="badge bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">' + esc(t) + '</span>').join('');
-      }
-
-      // Host Info
-      const hostCard = document.getElementById('host-card');
-      const hostInfo = document.getElementById('host-info');
-      if (a.host_name) {
-        hostInfo.innerHTML = `
-          <div class="flex-1">
-            <p class="font-semibold text-gray-800 dark:text-gray-200">${esc(a.host_name)}</p>
-            <p class="text-xs text-gray-500 dark:text-gray-400">Activity Host</p>
-          </div>
-        `;
-        hostCard.classList.remove('hidden');
-      }
-
-      // Sessions
-      const sessCard = document.getElementById('sessions-card');
-      document.getElementById('sessions-count').textContent = data.sessions.length + ' sessions';
-      const ul = document.getElementById('sessions-list');
-      if (!data.sessions.length) {
-        sessCard.classList.add('hidden');
-      } else {
-        ul.innerHTML = data.sessions.map(s => {
-          const locked = !data.is_enrolled && !data.is_host;
-          return '<li class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition">' +
-            '<p class="font-semibold text-gray-800 dark:text-gray-200 text-sm">' + esc(s.title || 'Session') + '</p>' +
-            (s.start_time ? '<p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">📅 ' + esc(s.start_time) + (s.end_time ? ' – ' + esc(s.end_time) : '') + '</p>' : '') +
-            (locked ? '<p class="text-xs text-gray-400 dark:text-gray-500 mt-1.5">🔒 Join to see location and details</p>' :
-              (s.location ? '<p class="text-xs text-teal-600 dark:text-teal-400 mt-1.5">📍 ' + esc(s.location) + '</p>' : '') +
-              (s.description ? '<p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">' + esc(s.description) + '</p>' : '')) +
-            '</li>';
-        }).join('');
-      }
-
-      // Similar activities
-      renderSimilarActivities();
-
-      // Actions
-      if (data.is_host) {
-        document.getElementById('act-action').innerHTML =
-          '<a href="/teach.html?activity_id=' + esc(a.id) + '" class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 text-teal-600 dark:text-teal-400 font-bold px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5">' +
-          '<i class="fas fa-cog"></i>Manage Activity</a>';
-        document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
-          'You are the host of this activity. Use the Manage button to add sessions and update details.';
-      } else if (data.is_enrolled) {
-        document.getElementById('join-cta').classList.add('hidden');
-        document.getElementById('member-card').classList.remove('hidden');
-        const enr = data.enrollment;
-        const rc  = { participant:'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300', instructor:'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300', organizer:'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' };
-        const sc  = { active:'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300', cancelled:'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300', completed:'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' };
-        document.getElementById('enr-details').innerHTML =
-          '<span class="badge ' + (rc[enr.role]||'bg-gray-100 text-gray-600') + '">' + esc(enr.role) + '</span>' +
-          '<span class="badge ' + (sc[enr.status]||'bg-gray-100 text-gray-600') + '">' + esc(enr.status) + '</span>' +
-          '<span class="text-green-700 dark:text-green-300">✅ You have full access to session details.</span>';
-        document.getElementById('act-action').innerHTML = '<span class="inline-flex items-center gap-2 text-teal-600 dark:text-teal-400 text-sm font-semibold">✅ Joined</span>';
-        document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
-          'You are participating in this activity. Session locations and details are visible above.';
-      } else {
-        if (token) {
-          document.getElementById('join-cta').classList.remove('hidden');
-        } else {
-          document.getElementById('act-action').innerHTML =
-            '<a href="/login.html" class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 text-teal-600 dark:text-teal-400 font-bold px-6 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5">' +
-            '<i class="fas fa-right-to-bracket"></i>Login to Join</a>';
-        }
-      }
-    }
+  <!-- ==================== CONFIRM DELETE MODAL ==================== -->
+  <div id="mat-confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-sm w-full">
+      <h3 class="font-semibold text-lg mb-2 text-gray-800 dark:text-gray-200">Delete Material</h3>
+      <p id="mat-confirm-msg" class="text-sm text-gray-600 dark:text-gray-300 mb-6">
+        Are you sure you want to delete this material? This action cannot be undone.
+      </p>
+      <div class="flex gap-3 justify-end">
+        <button onclick="closeDeleteModal()"
+          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
+          Cancel
+        </button>
+        <button id="mat-confirm-ok"
+          class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-colors">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
 
-    async function joinActivity() {
-      if (!token) { window.location.href = '/login.html'; return; }
-      const btn = document.getElementById('btn-join');
-      btn.textContent = 'Joining...'; btn.disabled = true;
-      try {
-        const res = await fetch('/api/join', {
-          method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + token },
-          body: JSON.stringify({ activity_id: currentActivity.id })
-        });
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.error || 'Failed');
-        window.location.reload();
-      } catch (e) {
-        alert(e.message);
-        btn.textContent = 'Join Activity - Free'; btn.disabled = false;
-      }
-    }
+  <!-- ==================== EDIT MATERIAL MODAL ==================== -->
+  <div id="mat-edit-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-md w-full">
+      <div class="flex items-center justify-between mb-5">
+        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Edit Material</h3>
+        <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
+          <i class="fas fa-times text-lg"></i>
+        </button>
+      </div>
+      <form id="mat-edit-form" class="space-y-4" novalidate>
+        <input type="hidden" id="mat-edit-id" />
+        <div>
+          <label for="mat-edit-title" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
+            Title <span class="text-red-500">*</span>
+          </label>
+          <input id="mat-edit-title" type="text" maxlength="200"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm" />
+        </div>
+        <div>
+          <label for="mat-edit-desc" class="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Description</label>
+          <textarea id="mat-edit-desc" rows="3" maxlength="500"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm resize-none"></textarea>
+        </div>
+        <p id="mat-edit-error" class="text-red-500 text-sm hidden"></p>
+        <div class="flex gap-3 justify-end pt-1">
+          <button type="button" onclick="closeEditModal()"
+            class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
+            Cancel
+          </button>
+          <button type="submit" id="mat-edit-btn"
+            class="px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold transition-colors flex items-center gap-2">
+            <i class="fas fa-save"></i> Save Changes
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
 
-    // ==================== INITIALIZATION ====================
-    ['search','filter-type','filter-format'].forEach(id =>
-      document.getElementById(id).addEventListener(id === 'search' ? 'input' : 'change', renderGrid));
-
-    // Check if coming from URL with ?id=
-    const params = new URLSearchParams(location.search);
-    const actId = params.get('id');
-    
-    if (actId) {
-      loadAllActivities().then(() => showDetail(actId));
-    } else {
-      loadAllActivities();
-    }
-  </script>
+  <script src="/js/layout.js"></script>
+  <script src="/js/activity.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/course-materials.html b/public/course-materials.html
new file mode 100644
index 0000000..3a85f57
--- /dev/null
+++ b/public/course-materials.html
@@ -0,0 +1,598 @@
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Course Materials - Alpha One Labs</title>
+  <link rel="icon" type="image/png" href="https://alphaonelabs.com/static/images/logo.png" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+
+  <script>
+    tailwind.config = { darkMode: 'class', theme: { extend: {} } };
+    (function () {
+      if (localStorage.getItem('darkMode') === 'true') {
+        document.documentElement.classList.add('dark');
+      }
+    })();
+  </script>
+
+  <style>
+    html, body { overflow-x: hidden; box-sizing: border-box; }
+    .dark { color-scheme: dark; }
+    :root  { color-scheme: light; }
+    .gradient-hero {
+      background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #06B6D4 100%);
+    }
+    #upload-progress-bar { transition: width 0.3s ease; }
+    .material-card { transition: transform 0.15s, box-shadow 0.15s; }
+    .material-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
+    #toast { transition: opacity .3s ease, transform .3s ease; }
+    #toast.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
+  </style>
+</head>
+
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex flex-col">
+
+  <!-- Navbar -->
+  <nav class="gradient-hero shadow-lg">
+    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+      <a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
+        <img src="https://alphaonelabs.com/static/images/logo.png" alt="Logo" class="w-8 h-8" />
+        Alpha One Labs
+      </a>
+      <div class="flex items-center gap-4">
+        <a href="/activity.html" class="text-white/80 hover:text-white text-sm">
+          <i class="fas fa-arrow-left mr-1"></i>Back to Activities
+        </a>
+        <button id="dark-toggle" class="text-white/80 hover:text-white text-sm" title="Toggle dark mode">
+          <i class="fas fa-moon"></i>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <header class="gradient-hero text-white py-10 px-4">
+    <div class="max-w-4xl mx-auto">
+      <div class="flex items-center gap-3 mb-2">
+        <i class="fas fa-folder-open text-3xl opacity-80"></i>
+        <h1 class="text-3xl font-bold" id="page-title">Course Materials</h1>
+      </div>
+      <p class="text-white/70 text-sm" id="activity-subtitle">Loading activity&hellip;</p>
+    </div>
+  </header>
+
+  <!-- Main -->
+  <main class="flex-1 max-w-4xl mx-auto w-full px-4 py-8 space-y-8">
+
+    <!-- Upload form (shown only when authenticated) -->
+    <section id="upload-section" class="hidden bg-white dark:bg-gray-800 rounded-2xl shadow p-6">
+      <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+        <i class="fas fa-upload text-teal-600"></i> Upload New Material
+      </h2>
+
+      <form id="upload-form" class="space-y-4" novalidate>
+        <div>
+          <label for="mat-title" class="block text-sm font-medium mb-1">
+            Title <span class="text-red-500">*</span>
+          </label>
+          <input id="mat-title" type="text" placeholder="e.g. Week 1 Lecture Slides" maxlength="200"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2
+                   bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm" />
+        </div>
+
+        <div>
+          <label for="mat-desc" class="block text-sm font-medium mb-1">Description</label>
+          <textarea id="mat-desc" rows="2" placeholder="Optional short description&hellip;" maxlength="500"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2
+                   bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500 text-sm resize-none"></textarea>
+        </div>
+
+        <div>
+          <label for="mat-file" class="block text-sm font-medium mb-1">
+            File <span class="text-red-500">*</span>
+          </label>
+          <div id="drop-zone"
+            class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6
+                   text-center cursor-pointer hover:border-teal-500 transition-colors">
+            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              Drag &amp; drop a file here, or
+              <span class="text-teal-600 font-medium underline cursor-pointer" id="browse-link">browse</span>
+            </p>
+            <p id="selected-file-name" class="mt-2 text-xs text-teal-700 dark:text-teal-400 font-medium hidden"></p>
+            <input id="mat-file" type="file" class="hidden" />
+          </div>
+        </div>
+
+        <!-- Progress bar -->
+        <div id="upload-progress" class="hidden">
+          <div class="flex justify-between text-xs text-gray-500 mb-1">
+            <span>Uploading&hellip;</span>
+            <span id="upload-pct">0%</span>
+          </div>
+          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div id="upload-progress-bar" class="bg-teal-500 h-2 rounded-full" style="width:0%"></div>
+          </div>
+        </div>
+
+        <p id="upload-error" class="text-red-500 text-sm hidden"></p>
+
+        <button type="submit" id="upload-btn"
+          class="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold py-2 px-4
+                 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm">
+          <i class="fas fa-upload mr-2"></i>Upload Material
+        </button>
+      </form>
+    </section>
+
+    <!-- Materials list -->
+    <section>
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold flex items-center gap-2">
+          <i class="fas fa-file-alt text-teal-600"></i>
+          Materials
+          <span id="materials-count" class="text-sm font-normal text-gray-500 dark:text-gray-400"></span>
+        </h2>
+        <button id="refresh-btn" class="text-sm text-teal-600 hover:text-teal-700 flex items-center gap-1" title="Refresh">
+          <i class="fas fa-sync-alt"></i>
+        </button>
+      </div>
+
+      <div id="materials-loading" class="space-y-3">
+        <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow"></div>
+        <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow"></div>
+        <div class="animate-pulse bg-white dark:bg-gray-800 rounded-xl h-20 shadow"></div>
+      </div>
+
+      <div id="materials-empty" class="hidden text-center py-16 text-gray-400 dark:text-gray-500">
+        <i class="fas fa-folder-open text-5xl mb-4 opacity-40"></i>
+        <p class="text-lg font-medium">No materials yet</p>
+        <p class="text-sm mt-1">Upload the first file using the form above.</p>
+      </div>
+
+      <div id="materials-error" class="hidden text-center py-12 text-red-500">
+        <i class="fas fa-exclamation-triangle text-4xl mb-3 opacity-60"></i>
+        <p class="font-medium">Failed to load materials</p>
+        <p id="materials-error-msg" class="text-sm mt-1 text-gray-500"></p>
+      </div>
+
+      <ul id="materials-list" class="space-y-3 hidden"></ul>
+    </section>
+
+  </main>
+
+  <!-- Footer -->
+  <footer class="text-center text-xs text-gray-400 dark:text-gray-600 py-6">
+    &copy; 2024 Alpha One Labs
+  </footer>
+
+  <!-- Toast -->
+  <div id="toast"
+    class="hidden fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3
+           rounded-xl shadow-xl text-white text-sm font-medium max-w-xs">
+    <i id="toast-icon" class="fas fa-check-circle text-lg"></i>
+    <span id="toast-msg"></span>
+  </div>
+
+  <!-- Confirm modal -->
+  <div id="confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-sm w-full">
+      <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
+      <p id="confirm-msg" class="text-sm text-gray-600 dark:text-gray-300 mb-6">
+        Are you sure you want to delete this material? This action cannot be undone.
+      </p>
+      <div class="flex gap-3 justify-end">
+        <button id="confirm-cancel"
+          class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600
+                 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
+          Cancel
+        </button>
+        <button id="confirm-ok"
+          class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-colors">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- App script -->
+  <script>
+  (function () {
+    'use strict';
+
+    var API_BASE = '';
+    var activityId = null;
+    var authToken = null;
+    var currentUser = null;
+    var pendingDeleteId = null;
+
+    function el(id) { return document.getElementById(id); }
+
+    var pageTitle        = el('page-title');
+    var activitySubtitle = el('activity-subtitle');
+    var uploadSection    = el('upload-section');
+    var uploadForm       = el('upload-form');
+    var matTitle         = el('mat-title');
+    var matDesc          = el('mat-desc');
+    var matFile          = el('mat-file');
+    var dropZone         = el('drop-zone');
+    var browseLink       = el('browse-link');
+    var selectedFileName = el('selected-file-name');
+    var uploadProgress   = el('upload-progress');
+    var uploadProgressBar = el('upload-progress-bar');
+    var uploadPct        = el('upload-pct');
+    var uploadError      = el('upload-error');
+    var uploadBtn        = el('upload-btn');
+    var refreshBtn       = el('refresh-btn');
+    var materialsLoading = el('materials-loading');
+    var materialsEmpty   = el('materials-empty');
+    var materialsError   = el('materials-error');
+    var materialsErrorMsg = el('materials-error-msg');
+    var materialsList    = el('materials-list');
+    var materialsCount   = el('materials-count');
+    var toast            = el('toast');
+    var toastIcon        = el('toast-icon');
+    var toastMsg         = el('toast-msg');
+    var confirmModal     = el('confirm-modal');
+    var confirmMsg       = el('confirm-msg');
+    var confirmCancel    = el('confirm-cancel');
+    var confirmOk        = el('confirm-ok');
+    var darkToggle       = el('dark-toggle');
+
+    // Dark mode
+    darkToggle.addEventListener('click', function () {
+      var isDark = document.documentElement.classList.toggle('dark');
+      localStorage.setItem('darkMode', isDark ? 'true' : 'false');
+    });
+
+    // Toast
+    var toastTimer = null;
+    function showToast(msg, type) {
+      type = type || 'success';
+      var colours = { success: 'bg-teal-600', error: 'bg-red-600', info: 'bg-blue-600' };
+      var icons   = { success: 'fa-check-circle', error: 'fa-exclamation-circle', info: 'fa-info-circle' };
+      toast.className = 'fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3 rounded-xl shadow-xl text-white text-sm font-medium max-w-xs ' + (colours[type] || colours.success);
+      toastIcon.className = 'fas ' + (icons[type] || icons.success) + ' text-lg';
+      toastMsg.textContent = msg;
+      clearTimeout(toastTimer);
+      toastTimer = setTimeout(function () { toast.classList.add('hidden'); }, 3500);
+    }
+
+    // Confirm modal
+    function openConfirm(title, mid) {
+      pendingDeleteId = mid;
+      confirmMsg.textContent = 'Are you sure you want to delete "' + title + '"? This action cannot be undone.';
+      confirmModal.classList.remove('hidden');
+    }
+    confirmCancel.addEventListener('click', function () {
+      confirmModal.classList.add('hidden');
+      pendingDeleteId = null;
+    });
+    confirmOk.addEventListener('click', function () {
+      confirmModal.classList.add('hidden');
+      if (pendingDeleteId) {
+        deleteMaterial(pendingDeleteId);
+        pendingDeleteId = null;
+      }
+    });
+
+    // Auth
+    function loadAuth() {
+      try {
+        authToken = localStorage.getItem('edu_token') || localStorage.getItem('token') || null;
+        var raw = localStorage.getItem('edu_user') || localStorage.getItem('user');
+        currentUser = raw ? JSON.parse(raw) : null;
+        if (authToken && !localStorage.getItem('edu_token')) {
+          localStorage.setItem('edu_token', authToken);
+        }
+        if (currentUser && !localStorage.getItem('edu_user')) {
+          localStorage.setItem('edu_user', JSON.stringify(currentUser));
+        }
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+      } catch (e) {
+        authToken = null;
+        currentUser = null;
+      }
+    }
+
+    function authHeaders() {
+      var h = {};
+      if (authToken) { h['Authorization'] = 'Bearer ' + authToken; }
+      return h;
+    }
+
+    function getActivityId() {
+      var params = new URLSearchParams(window.location.search);
+      return params.get('activity_id') || params.get('id') || null;
+    }
+
+    // API helpers
+    function fetchMaterials() {
+      return fetch(API_BASE + '/api/activities/' + activityId + '/materials', {
+        headers: authHeaders()
+      }).then(function (res) {
+        return res.json().then(function (body) {
+          if (!res.ok) { throw new Error(body.error || 'HTTP ' + res.status); }
+          return body;
+        });
+      });
+    }
+
+    function uploadMaterial(formData) {
+      return fetch(API_BASE + '/api/activities/' + activityId + '/materials', {
+        method: 'POST',
+        headers: authHeaders(),
+        body: formData
+      }).then(function (res) {
+        return res.json().then(function (body) {
+          if (!res.ok) { throw new Error(body.error || 'HTTP ' + res.status); }
+          return body;
+        });
+      });
+    }
+
+    function deleteMaterial(mid) {
+      return fetch(API_BASE + '/api/activities/' + activityId + '/materials/' + mid, {
+        method: 'DELETE',
+        headers: authHeaders()
+      }).then(function (res) {
+        return res.json().then(function (body) {
+          if (!res.ok) { throw new Error(body.error || 'HTTP ' + res.status); }
+          return body;
+        });
+      }).then(function () {
+        showToast('Material deleted successfully');
+        loadMaterials();
+      }).catch(function (e) {
+        showToast(e.message || 'Delete failed', 'error');
+      });
+    }
+
+    function downloadMaterial(mid) {
+      fetch(API_BASE + '/api/activities/' + activityId + '/materials/' + mid + '/download', {
+        headers: authHeaders()
+      }).then(function (res) {
+        return res.json().then(function (body) {
+          if (!res.ok) { throw new Error(body.error || 'HTTP ' + res.status); }
+          return body;
+        });
+      }).then(function (body) {
+        var url = body.data && body.data.download_url;
+        if (!url) { throw new Error('No download URL returned'); }
+        window.open(url, '_blank', 'noopener,noreferrer');
+      }).catch(function (e) {
+        showToast(e.message || 'Download failed', 'error');
+      });
+    }
+
+    // Render helpers
+    function escHtml(str) {
+      return String(str || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    }
+
+    function formatDate(iso) {
+      if (!iso) { return ''; }
+      try {
+        return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+      } catch (e) { return iso; }
+    }
+
+    function renderMaterial(mat) {
+      var li = document.createElement('li');
+      li.className = 'material-card bg-white dark:bg-gray-800 rounded-xl shadow px-5 py-4 flex items-start gap-4';
+      li.dataset.id = mat.id;
+
+      var isOwner = currentUser && (mat.uploaded_by === currentUser.id);
+
+      var deleteBtn = isOwner
+        ? '<button class="delete-btn inline-flex items-center gap-1.5 bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/60 text-red-600 dark:text-red-400 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + mat.id + '" data-title="' + escHtml(mat.title) + '" title="Delete"><i class="fas fa-trash-alt"></i><span class="hidden sm:inline ml-1">Delete</span></button>'
+        : '';
+
+      var descHtml = mat.description
+        ? '<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">' + escHtml(mat.description) + '</p>'
+        : '';
+
+      li.innerHTML =
+        '<div class="flex-shrink-0 mt-1"><i class="fas fa-file-alt text-2xl text-gray-400"></i></div>' +
+        '<div class="flex-1 min-w-0">' +
+          '<p class="font-semibold text-sm truncate" title="' + escHtml(mat.title) + '">' + escHtml(mat.title) + '</p>' +
+          descHtml +
+          '<p class="text-xs text-gray-400 dark:text-gray-500 mt-1"><i class="fas fa-calendar-alt mr-1"></i>' + formatDate(mat.created_at) + '</p>' +
+        '</div>' +
+        '<div class="flex-shrink-0 flex items-center gap-2">' +
+          '<button class="download-btn inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + mat.id + '" title="Download"><i class="fas fa-download"></i><span class="hidden sm:inline ml-1">Download</span></button>' +
+          deleteBtn +
+        '</div>';
+
+      li.querySelector('.download-btn').addEventListener('click', function () {
+        downloadMaterial(mat.id);
+      });
+
+      var delEl = li.querySelector('.delete-btn');
+      if (delEl) {
+        delEl.addEventListener('click', function () {
+          openConfirm(mat.title, mat.id);
+        });
+      }
+
+      return li;
+    }
+
+    // Load & render
+    function loadMaterials() {
+      materialsLoading.classList.remove('hidden');
+      materialsEmpty.classList.add('hidden');
+      materialsError.classList.add('hidden');
+      materialsList.classList.add('hidden');
+      materialsList.innerHTML = '';
+
+      fetchMaterials().then(function (data) {
+        var items = data.materials || [];
+        materialsLoading.classList.add('hidden');
+        materialsCount.textContent = '(' + items.length + ')';
+
+        if (items.length === 0) {
+          materialsEmpty.classList.remove('hidden');
+          return;
+        }
+
+        items.forEach(function (mat) {
+          materialsList.appendChild(renderMaterial(mat));
+        });
+        materialsList.classList.remove('hidden');
+      }).catch(function (e) {
+        materialsLoading.classList.add('hidden');
+        materialsError.classList.remove('hidden');
+        materialsErrorMsg.textContent = e.message || 'Unknown error';
+      });
+    }
+
+    // Upload form
+    function setUploadError(msg) {
+      uploadError.textContent = msg;
+      uploadError.classList.toggle('hidden', !msg);
+    }
+
+    function setUploading(active) {
+      uploadBtn.disabled = active;
+      uploadProgress.classList.toggle('hidden', !active);
+      if (active) {
+        uploadProgressBar.style.width = '0%';
+        uploadPct.textContent = '0%';
+      }
+    }
+
+    function animateProgress() {
+      var pct = 0;
+      var iv = setInterval(function () {
+        pct = Math.min(pct + Math.random() * 15, 90);
+        uploadProgressBar.style.width = pct + '%';
+        uploadPct.textContent = Math.round(pct) + '%';
+      }, 200);
+      return function () {
+        clearInterval(iv);
+        uploadProgressBar.style.width = '100%';
+        uploadPct.textContent = '100%';
+      };
+    }
+
+    uploadForm.addEventListener('submit', function (e) {
+      e.preventDefault();
+      setUploadError('');
+
+      var title = matTitle.value.trim();
+      var desc  = matDesc.value.trim();
+      var file  = matFile.files[0];
+
+      if (!title) { setUploadError('Title is required.'); return; }
+      if (!file)  { setUploadError('Please select a file to upload.'); return; }
+
+      var fd = new FormData();
+      fd.append('title', title);
+      fd.append('description', desc);
+      fd.append('file', file, file.name);
+
+      setUploading(true);
+      var stopProgress = animateProgress();
+
+      uploadMaterial(fd).then(function () {
+        stopProgress();
+        setUploading(false);
+        uploadForm.reset();
+        selectedFileName.classList.add('hidden');
+        showToast('Material uploaded successfully!');
+        loadMaterials();
+      }).catch(function (err) {
+        stopProgress();
+        setUploading(false);
+        setUploadError(err.message || 'Upload failed. Please try again.');
+      });
+    });
+
+    // Drag & drop / file picker
+    browseLink.addEventListener('click', function () { matFile.click(); });
+    dropZone.addEventListener('click', function (e) {
+      if (e.target !== browseLink) { matFile.click(); }
+    });
+
+    matFile.addEventListener('change', function () {
+      var f = matFile.files[0];
+      if (f) {
+        selectedFileName.textContent = 'Selected: ' + f.name + ' (' + (f.size / 1024).toFixed(1) + ' KB)';
+        selectedFileName.classList.remove('hidden');
+      }
+    });
+
+    dropZone.addEventListener('dragover', function (e) {
+      e.preventDefault();
+      dropZone.classList.add('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/10');
+    });
+    dropZone.addEventListener('dragleave', function () {
+      dropZone.classList.remove('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/10');
+    });
+    dropZone.addEventListener('drop', function (e) {
+      e.preventDefault();
+      dropZone.classList.remove('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/10');
+      var f = e.dataTransfer.files[0];
+      if (f) {
+        try {
+          var dt = new DataTransfer();
+          dt.items.add(f);
+          matFile.files = dt.files;
+        } catch (ex) { /* Safari fallback – file input stays empty */ }
+        selectedFileName.textContent = 'Selected: ' + f.name + ' (' + (f.size / 1024).toFixed(1) + ' KB)';
+        selectedFileName.classList.remove('hidden');
+      }
+    });
+
+    refreshBtn.addEventListener('click', function () { loadMaterials(); });
+
+    // Load activity title
+    function loadActivityTitle() {
+      fetch(API_BASE + '/api/activities/' + activityId, { headers: authHeaders() })
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+          var title = data.activity && data.activity.title;
+          if (title) {
+            pageTitle.textContent = 'Materials \u2013 ' + title;
+            activitySubtitle.textContent = 'Activity ID: ' + activityId;
+            document.title = title + ' \u2013 Materials | Alpha One Labs';
+          }
+        })
+        .catch(function () { /* non-critical */ });
+    }
+
+    // Bootstrap
+    function init() {
+      loadAuth();
+      activityId = getActivityId();
+
+      if (!activityId) {
+        activitySubtitle.textContent = 'No activity selected. Add ?activity_id=\u2026 to the URL.';
+        materialsLoading.classList.add('hidden');
+        materialsError.classList.remove('hidden');
+        materialsErrorMsg.textContent = 'Missing activity_id query parameter.';
+        return;
+      }
+
+      // Show upload form only when logged in
+      if (authToken) {
+        uploadSection.classList.remove('hidden');
+      }
+
+      loadActivityTitle();
+      loadMaterials();
+    }
+
+    init();
+  }());
+  </script>
+</body>
+</html>
diff --git a/public/js/activity.js b/public/js/activity.js
new file mode 100644
index 0000000..0d0c6c3
--- /dev/null
+++ b/public/js/activity.js
@@ -0,0 +1,812 @@
+/* =========================================================
+   activity.js  –  Activities browser + detail view logic
+   ========================================================= */
+
+// ── State ──────────────────────────────────────────────────
+let _currentActivityId = null;
+let _currentActivity   = null;
+let _isHost            = false;
+let _activeTags        = new Set();
+let _allActivities     = [];
+let _deleteTargetId    = null;
+
+// ── Auth helpers ───────────────────────────────────────────
+function _authToken() {
+  const token = localStorage.getItem('edu_token') || localStorage.getItem('token') || '';
+  if (token && !localStorage.getItem('edu_token')) {
+    localStorage.setItem('edu_token', token);
+  }
+  return token;
+}
+function _authHeaders() {
+  const t = _authToken();
+  return t ? { 'Authorization': `Bearer ${t}` } : {};
+}
+function _currentUser() {
+  // Token format: base64({"id":...,"username":...,"role":...}).hmac_hex
+  // i.e. exactly TWO dot-separated parts: parts[0]=payload, parts[1]=sig
+  const t = _authToken();
+  if (!t) return null;
+  try {
+    const token = t.startsWith('Bearer ') ? t.slice(7) : t;
+    const dot = token.lastIndexOf('.');
+    if (dot === -1) return { _opaque: true };
+    const b64 = token.slice(0, dot);
+    // Fix base64 padding
+    const padded = b64 + '==='.slice((b64.length + 3) % 4 || 4);
+    return JSON.parse(atob(padded));
+  } catch { /* ignore */ }
+  return { _opaque: true };
+}
+
+// ── Toast ──────────────────────────────────────────────────
+function showToast(msg, type = 'success') {
+  const el   = document.getElementById('act-toast');
+  const icon = document.getElementById('act-toast-icon');
+  const txt  = document.getElementById('act-toast-msg');
+  if (!el) return;
+  const colours = {
+    success: 'bg-teal-600',
+    error:   'bg-red-600',
+    info:    'bg-blue-600',
+    warning: 'bg-amber-500',
+  };
+  const icons = {
+    success: 'fa-check-circle',
+    error:   'fa-exclamation-circle',
+    info:    'fa-info-circle',
+    warning: 'fa-exclamation-triangle',
+  };
+  el.className = `fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3 rounded-xl shadow-xl text-white text-sm font-medium max-w-xs ${colours[type] || colours.success}`;
+  icon.className = `fas ${icons[type] || icons.success} text-lg`;
+  txt.textContent = msg;
+  el.classList.remove('hidden');
+  clearTimeout(el._timer);
+  el._timer = setTimeout(() => el.classList.add('hidden'), 3500);
+}
+
+// ── Tab switching ──────────────────────────────────────────
+function switchTab(name) {
+  document.querySelectorAll('.tab-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.tab === name);
+  });
+  document.querySelectorAll('.tab-panel').forEach(p => {
+    p.classList.toggle('active', p.id === `tab-${name}`);
+  });
+  if (name === 'materials') loadMaterials();
+}
+
+// ── View switching ─────────────────────────────────────────
+function showBrowser() {
+  document.getElementById('browser-view').classList.remove('hidden');
+  document.getElementById('browser-view').classList.add('view-browser');
+  document.getElementById('detail-view').classList.remove('active');
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function showDetail() {
+  document.getElementById('browser-view').classList.add('hidden');
+  document.getElementById('detail-view').classList.add('active');
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+function backToBrowser() {
+  _currentActivityId = null;
+  _currentActivity   = null;
+  _isHost            = false;
+  showBrowser();
+}
+
+// ── Format helpers ─────────────────────────────────────────
+function formatDate(iso) {
+  if (!iso) return '—';
+  try {
+    return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+  } catch { return iso; }
+}
+
+function getFileIcon(title) {
+  const t = (title || '').toLowerCase();
+  if (t.endsWith('.pdf'))                          return { icon: 'fa-file-pdf',        colour: 'text-red-500' };
+  if (t.endsWith('.doc') || t.endsWith('.docx'))   return { icon: 'fa-file-word',       colour: 'text-blue-500' };
+  if (t.endsWith('.xls') || t.endsWith('.xlsx'))   return { icon: 'fa-file-excel',      colour: 'text-green-600' };
+  if (t.endsWith('.ppt') || t.endsWith('.pptx'))   return { icon: 'fa-file-powerpoint', colour: 'text-orange-500' };
+  if (t.endsWith('.zip') || t.endsWith('.rar'))    return { icon: 'fa-file-archive',    colour: 'text-yellow-600' };
+  if (t.endsWith('.mp4') || t.endsWith('.mov'))    return { icon: 'fa-file-video',      colour: 'text-purple-500' };
+  if (t.endsWith('.mp3') || t.endsWith('.wav'))    return { icon: 'fa-file-audio',      colour: 'text-pink-500' };
+  if (t.endsWith('.png') || t.endsWith('.jpg') || t.endsWith('.jpeg') || t.endsWith('.gif') || t.endsWith('.webp'))
+                                                   return { icon: 'fa-file-image',      colour: 'text-teal-500' };
+  if (t.endsWith('.js') || t.endsWith('.py') || t.endsWith('.ts') || t.endsWith('.html') || t.endsWith('.css'))
+                                                   return { icon: 'fa-file-code',       colour: 'text-indigo-500' };
+  if (t.endsWith('.txt') || t.endsWith('.md'))     return { icon: 'fa-file-alt',        colour: 'text-gray-500' };
+  return { icon: 'fa-file', colour: 'text-gray-400' };
+}
+
+// ── Activity card renderer ─────────────────────────────────
+function renderActivityCard(act) {
+  const typeColours = {
+    course:    'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
+    workshop:  'bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300',
+    seminar:   'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+    bootcamp:  'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+    webinar:   'bg-pink-100 text-pink-800 dark:bg-pink-900/40 dark:text-pink-300',
+  };
+  const fmtColours = {
+    online:    'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+    in_person: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300',
+    hybrid:    'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
+  };
+  const typeC = typeColours[act.type] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+  const fmtC  = fmtColours[act.format] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+  const tags  = (act.tags || []).slice(0, 3).map(t =>
+    `<span class="badge bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 text-xs">${t}</span>`
+  ).join('');
+
+  return `
+    <article class="card-hover rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden cursor-pointer"
+      onclick="openActivity('${act.id}')">
+      <div class="p-6">
+        <div class="flex items-start justify-between gap-3 mb-3">
+          <h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg leading-snug line-clamp-2">${act.title}</h3>
+          <span class="badge ${typeC} shrink-0">${act.type || 'activity'}</span>
+        </div>
+        <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mb-4">${act.description || 'No description provided.'}</p>
+        <div class="flex flex-wrap gap-2 mb-4">${tags}</div>
+        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-500">
+          <span class="badge ${fmtC}">${(act.format || 'online').replace('_', ' ')}</span>
+          <span><i class="fas fa-users mr-1"></i>${act.participant_count ?? act.member_count ?? 0} enrolled</span>
+        </div>
+      </div>
+    </article>`;
+}
+
+// ── Browser: grid + filters ────────────────────────────────
+function renderGrid(activities) {
+  const grid = document.getElementById('activity-grid');
+  const none = document.getElementById('no-results');
+  if (!grid) return;
+  if (!activities.length) {
+    grid.innerHTML = '';
+    none && none.classList.remove('hidden');
+    return;
+  }
+  none && none.classList.add('hidden');
+  grid.innerHTML = activities.map(renderActivityCard).join('');
+}
+
+function buildTagCloud(activities) {
+  const counts = {};
+  activities.forEach(a => (a.tags || []).forEach(t => { counts[t] = (counts[t] || 0) + 1; }));
+  const cloud = document.getElementById('tag-cloud');
+  if (!cloud) return;
+  const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 20);
+  cloud.innerHTML = sorted.map(([tag]) =>
+    `<button class="tag-pill badge bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900/40 text-xs"
+      onclick="toggleTag('${tag}')">${tag}</button>`
+  ).join('');
+}
+
+function toggleTag(tag) {
+  if (_activeTags.has(tag)) _activeTags.delete(tag);
+  else _activeTags.add(tag);
+  document.querySelectorAll('.tag-pill').forEach(b => {
+    b.classList.toggle('active', _activeTags.has(b.textContent.trim()));
+  });
+  applyFilters();
+}
+
+function applyFilters() {
+  const q    = (document.getElementById('search')?.value || '').toLowerCase();
+  const type = document.getElementById('filter-type')?.value || '';
+  const fmt  = document.getElementById('filter-format')?.value || '';
+  let list = _allActivities;
+  if (q)    list = list.filter(a => (a.title + ' ' + (a.description || '')).toLowerCase().includes(q));
+  if (type) list = list.filter(a => a.type === type);
+  if (fmt)  list = list.filter(a => a.format === fmt);
+  if (_activeTags.size) list = list.filter(a => [..._activeTags].every(t => (a.tags || []).includes(t)));
+  renderGrid(list);
+}
+
+async function loadAllActivities() {
+  try {
+    const res  = await fetch('/api/activities');
+    const data = await res.json();
+    _allActivities = data.activities || [];
+    renderGrid(_allActivities);
+    buildTagCloud(_allActivities);
+  } catch (e) {
+    console.error('loadAllActivities', e);
+    const grid = document.getElementById('activity-grid');
+    if (grid) grid.innerHTML = '<p class="col-span-full text-center text-red-500 py-16">Failed to load activities.</p>';
+  }
+}
+
+// ── Similar activities ─────────────────────────────────────
+function getSimilarActivities(current) {
+  if (!current) return [];
+  return _allActivities
+    .filter(a => a.id !== current.id)
+    .map(a => {
+      const sharedTags = (a.tags || []).filter(t => (current.tags || []).includes(t)).length;
+      const sameType   = a.type === current.type ? 2 : 0;
+      return { ...a, _score: sharedTags + sameType };
+    })
+    .filter(a => a._score > 0)
+    .sort((a, b) => b._score - a._score)
+    .slice(0, 5);
+}
+
+function renderSimilarActivities(similar) {
+  const list = document.getElementById('similar-list');
+  const card = document.getElementById('similar-card');
+  if (!list) return;
+  if (!similar.length) { card && card.classList.add('hidden'); return; }
+  card && card.classList.remove('hidden');
+  list.innerHTML = similar.map(a => `
+    <li class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
+      onclick="openActivity('${a.id}')">
+      <p class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-1">${a.title}</p>
+      <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">${a.type || ''} · ${(a.format || '').replace('_', ' ')}</p>
+    </li>`).join('');
+}
+
+// ── Open activity detail ───────────────────────────────────
+async function openActivity(id) {
+  _currentActivityId = id;
+  showDetail();
+  switchTab('overview');
+  await loadActivityDetail(id);
+}
+
+async function loadActivityDetail(id) {
+  try {
+    const res  = await fetch(`/api/activities/${id}`, { headers: _authHeaders() });
+    if (!res.ok) throw new Error('Not found');
+    const data = await res.json();
+
+    // API response shape:
+    //   { activity: {..., host_name, participant_count, tags},
+    //     sessions: [...],
+    //     is_host: bool,
+    //     is_enrolled: bool }
+    const act      = data.activity || data;
+    const sessions = data.sessions || [];
+    _currentActivity = act;
+
+    // Use the authoritative is_host flag returned by the server
+    _isHost = !!(data.is_host);
+
+    const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val || ''; };
+    const memberCount = act.participant_count ?? act.member_count ?? 0;
+
+    // ── Hero / breadcrumb ──
+    setText('crumb-title', act.title);
+    const titleEl = document.getElementById('act-title');
+    if (titleEl) titleEl.textContent = act.title || 'Activity';
+
+    const metaEl = document.getElementById('act-meta');
+    if (metaEl) metaEl.textContent =
+      `${(act.type || 'activity').charAt(0).toUpperCase() + (act.type || 'activity').slice(1)} · ${(act.format || 'online').replace('_', ' ')} · ${memberCount} enrolled`;
+
+    // ── Hero quick-info sidebar ──
+    const detailsEl = document.getElementById('act-details');
+    if (detailsEl) {
+      detailsEl.innerHTML = `
+        <div class="flex items-center gap-3 text-sm">
+          <i class="fas fa-tag w-5 text-teal-300"></i>
+          <span class="capitalize">${act.type || '—'}</span>
+        </div>
+        <div class="flex items-center gap-3 text-sm">
+          <i class="fas fa-globe w-5 text-teal-300"></i>
+          <span class="capitalize">${(act.format || '—').replace('_', ' ')}</span>
+        </div>
+        <div class="flex items-center gap-3 text-sm">
+          <i class="fas fa-users w-5 text-teal-300"></i>
+          <span>${memberCount} enrolled</span>
+        </div>
+        <div class="flex items-center gap-3 text-sm">
+          <i class="fas fa-user-tie w-5 text-teal-300"></i>
+          <span>${act.host_name || 'Unknown Host'}</span>
+        </div>
+        ${act.created_at ? `<div class="flex items-center gap-3 text-sm"><i class="fas fa-calendar w-5 text-teal-300"></i><span>Created ${formatDate(act.created_at)}</span></div>` : ''}
+      `;
+    }
+
+    // ── Hero badges ──
+    const badgesEl = document.getElementById('act-badges');
+    if (badgesEl) {
+      badgesEl.innerHTML = (act.tags || []).map(t =>
+        `<span class="badge bg-white/20 text-white text-xs">${t}</span>`
+      ).join('');
+    }
+
+    // ── Overview sidebar: description + tags ──
+    setText('act-description', act.description || 'No description provided.');
+    const actTagsEl = document.getElementById('act-tags');
+    if (actTagsEl) {
+      actTagsEl.innerHTML = (act.tags || []).map(t =>
+        `<span class="badge bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300 text-xs">${t}</span>`
+      ).join('') || '<span class="text-sm text-gray-400">No tags</span>';
+    }
+
+    // ── Welcome card ──
+    setText('welcome-text', act.description || 'Welcome to this activity!');
+
+    // ── Join / member CTA ──
+    const joinCta    = document.getElementById('join-cta');
+    const memberCard = document.getElementById('member-card');
+    const enrDetails = document.getElementById('enr-details');
+
+    if (_isHost) {
+      joinCta    && joinCta.classList.add('hidden');
+      memberCard && memberCard.classList.remove('hidden');
+      if (enrDetails) enrDetails.innerHTML = `
+        <span class="flex items-center gap-2 text-green-700 dark:text-green-300 font-semibold">
+          <i class="fas fa-crown text-amber-500"></i>You are the host of this activity
+        </span>`;
+    } else if (data.is_enrolled) {
+      joinCta    && joinCta.classList.add('hidden');
+      memberCard && memberCard.classList.remove('hidden');
+      if (enrDetails) enrDetails.innerHTML = `
+        <span class="flex items-center gap-2 text-green-700 dark:text-green-300 font-semibold">
+          <i class="fas fa-check-circle text-green-500"></i>You are enrolled
+        </span>
+        ${data.enrollment?.role ? `<span class="badge bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 text-xs">${data.enrollment.role}</span>` : ''}`;
+    } else {
+      joinCta    && joinCta.classList.remove('hidden');
+      memberCard && memberCard.classList.add('hidden');
+    }
+
+    // ── Sessions tab ──
+    const sessionsEl = document.getElementById('sessions-list-tab');
+    const sessEmpty  = document.getElementById('sessions-empty');
+    const sessCount  = document.getElementById('tab-sessions-count');
+    if (sessCount) {
+      sessCount.textContent = sessions.length;
+      sessCount.classList.toggle('hidden', sessions.length === 0);
+    }
+    if (sessionsEl) {
+      if (!sessions.length) {
+        sessEmpty && sessEmpty.classList.remove('hidden');
+        sessionsEl.innerHTML = '';
+      } else {
+        sessEmpty && sessEmpty.classList.add('hidden');
+        sessionsEl.innerHTML = sessions.map(s => `
+          <li class="rounded-xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <p class="font-semibold text-gray-800 dark:text-gray-200">${s.title || 'Session'}</p>
+                ${s.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">${s.description}</p>` : ''}
+              </div>
+              ${s.start_time ? `<span class="text-xs text-gray-400 shrink-0">${formatDate(s.start_time)}</span>` : ''}
+            </div>
+          </li>`).join('');
+      }
+    }
+
+    // ── Host tab ──
+    setText('host-name-tab', act.host_name || 'Unknown Host');
+    const hostAvatar = document.getElementById('host-avatar');
+    if (hostAvatar) {
+      const name = act.host_name || '?';
+      hostAvatar.textContent = name.charAt(0).toUpperCase();
+    }
+
+    // ── Similar activities ──
+    renderSimilarActivities(getSimilarActivities(act));
+
+  } catch (e) {
+    console.error('loadActivityDetail', e);
+    showToast('Failed to load activity details', 'error');
+  }
+}
+
+// ── Join activity ──────────────────────────────────────────
+async function joinActivity() {
+  const user = _currentUser();
+  if (!user) {
+    window.location.href = '/login.html?redirect=' + encodeURIComponent(window.location.href);
+    return;
+  }
+  const btn = document.getElementById('btn-join');
+  if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Joining…'; }
+  try {
+    const res  = await fetch(`/api/activities/${_currentActivityId}/join`, {
+      method: 'POST',
+      headers: { ..._authHeaders(), 'Content-Type': 'application/json' },
+    });
+    const data = await res.json();
+    if (res.ok) {
+      showToast('Successfully joined the activity!', 'success');
+      await loadActivityDetail(_currentActivityId);
+    } else {
+      showToast(data.error || 'Failed to join', 'error');
+      if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plus mr-2"></i>Join Activity'; }
+    }
+  } catch {
+    showToast('Network error — please try again', 'error');
+    if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plus mr-2"></i>Join Activity'; }
+  }
+}
+
+// ── Materials ──────────────────────────────────────────────
+async function loadMaterials() {
+  if (!_currentActivityId) return;
+
+  const loadingEl = document.getElementById('mat-loading');
+  const emptyEl   = document.getElementById('mat-empty');
+  const errorEl   = document.getElementById('mat-error');
+  const listEl    = document.getElementById('mat-list');
+  const countLbl  = document.getElementById('mat-count-label');
+  const tabCount  = document.getElementById('tab-materials-count');
+  const uploadSec = document.getElementById('mat-upload-section');
+
+  // Show/hide upload section based on host status
+  if (uploadSec) uploadSec.classList.toggle('hidden', !_isHost);
+
+  // Reset state
+  loadingEl && loadingEl.classList.remove('hidden');
+  emptyEl   && emptyEl.classList.add('hidden');
+  errorEl   && errorEl.classList.add('hidden');
+  listEl    && listEl.classList.add('hidden');
+
+  try {
+    const res  = await fetch(`/api/activities/${_currentActivityId}/materials`);
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Failed to load');
+
+    const materials = data.materials || [];
+    loadingEl && loadingEl.classList.add('hidden');
+
+    // Update counts
+    if (countLbl) countLbl.textContent = `${materials.length} file${materials.length !== 1 ? 's' : ''}`;
+    if (tabCount) {
+      tabCount.textContent = materials.length;
+      tabCount.classList.toggle('hidden', materials.length === 0);
+    }
+
+    if (!materials.length) {
+      emptyEl && emptyEl.classList.remove('hidden');
+      const sub = document.getElementById('mat-empty-sub');
+      if (sub) sub.textContent = _isHost ? 'Upload your first material using the form above.' : 'No materials have been uploaded yet.';
+      return;
+    }
+
+    listEl && listEl.classList.remove('hidden');
+    listEl.innerHTML = materials.map(m => renderMaterialItem(m)).join('');
+
+  } catch (e) {
+    loadingEl && loadingEl.classList.add('hidden');
+    errorEl   && errorEl.classList.remove('hidden');
+    const msgEl = document.getElementById('mat-error-msg');
+    if (msgEl) msgEl.textContent = e.message || 'Failed to load materials.';
+  }
+}
+
+// Store material data for edit/delete lookups (avoids encoding issues in onclick)
+const _matCache = {};
+
+function renderMaterialItem(m) {
+  // Cache the material so edit/delete buttons can retrieve it safely
+  _matCache[m.id] = m;
+
+  const { icon, colour } = getFileIcon(m.title);
+  const hostControls = _isHost ? `
+    <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
+      <button data-action="edit" data-mid="${m.id}"
+        class="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors">
+        <i class="fas fa-pencil-alt"></i> Edit
+      </button>
+      <button data-action="delete" data-mid="${m.id}"
+        class="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 text-red-600 dark:text-red-400 transition-colors">
+        <i class="fas fa-trash-alt"></i> Delete
+      </button>
+    </div>` : '';
+
+  return `
+    <li class="material-card rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm p-4">
+      <div class="flex items-start gap-4">
+        <div class="shrink-0 w-12 h-12 rounded-xl bg-gray-50 dark:bg-gray-700 flex items-center justify-center">
+          <i class="fas ${icon} text-2xl ${colour}"></i>
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <p class="font-semibold text-gray-800 dark:text-gray-200 truncate">${m.title}</p>
+              ${m.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">${m.description}</p>` : ''}
+              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">${formatDate(m.created_at)}</p>
+            </div>
+            <button data-action="download" data-mid="${m.id}"
+              class="shrink-0 flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium transition-colors">
+              <i class="fas fa-download"></i>
+              <span class="hidden sm:inline">Download</span>
+            </button>
+          </div>
+          ${hostControls}
+        </div>
+      </div>
+    </li>`;
+}
+
+async function downloadMaterial(mid) {
+  const token = _authToken();
+  if (!token) {
+    showToast('Please log in to download materials', 'warning');
+    return;
+  }
+  try {
+    const res  = await fetch(`/api/activities/${_currentActivityId}/materials/${mid}/download`, {
+      headers: { 'Authorization': `Bearer ${token}` },
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Download failed');
+
+    // Prefer a real presigned URL (works without auth header in browser).
+    // For the local /api/r2/ fallback, append the token as a query param
+    // since <a> navigation can't set Authorization headers.
+    const payload  = data.data || data;
+    let url        = payload.download_url || '';
+    const filename = payload.filename || payload.title || 'download';
+
+    if (url.startsWith('/api/r2/')) {
+      url = `${url}?token=${encodeURIComponent(token)}`;
+    }
+    const a = document.createElement('a');
+    a.href     = url;
+    a.download = filename;          // sets the saved filename in the browser
+    a.target   = '_blank';
+    a.rel      = 'noopener noreferrer';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    showToast('Download started!', 'success');
+  } catch (e) {
+    showToast(e.message || 'Download failed', 'error');
+  }
+}
+
+// ── Delete modal ───────────────────────────────────────────
+function openDeleteModal(mid, title) {
+  _deleteTargetId = mid;
+  const modal = document.getElementById('mat-confirm-modal');
+  const msg   = document.getElementById('mat-confirm-msg');
+  if (msg) msg.textContent = `Delete "${title}"? This action cannot be undone.`;
+  modal && modal.classList.remove('hidden');
+  const okBtn = document.getElementById('mat-confirm-ok');
+  if (okBtn) {
+    okBtn.onclick = async () => {
+      okBtn.disabled = true;
+      okBtn.textContent = 'Deleting…';
+      await confirmDelete();
+      okBtn.disabled = false;
+      okBtn.textContent = 'Delete';
+    };
+  }
+}
+
+function closeDeleteModal() {
+  document.getElementById('mat-confirm-modal')?.classList.add('hidden');
+  _deleteTargetId = null;
+}
+
+async function confirmDelete() {
+  if (!_deleteTargetId) return;
+  try {
+    const res  = await fetch(`/api/activities/${_currentActivityId}/materials/${_deleteTargetId}`, {
+      method: 'DELETE',
+      headers: _authHeaders(),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Delete failed');
+    closeDeleteModal();
+    showToast('Material deleted', 'success');
+    await loadMaterials();
+  } catch (e) {
+    closeDeleteModal();
+    showToast(e.message || 'Delete failed', 'error');
+  }
+}
+
+// ── Edit modal ─────────────────────────────────────────────
+function openEditModal(mid, title, desc) {
+  document.getElementById('mat-edit-id').value    = mid;
+  document.getElementById('mat-edit-title').value = title;
+  document.getElementById('mat-edit-desc').value  = desc || '';
+  const errEl = document.getElementById('mat-edit-error');
+  if (errEl) { errEl.textContent = ''; errEl.classList.add('hidden'); }
+  document.getElementById('mat-edit-modal')?.classList.remove('hidden');
+}
+
+function closeEditModal() {
+  document.getElementById('mat-edit-modal')?.classList.add('hidden');
+}
+
+// ── Upload form ────────────────────────────────────────────
+function _initUploadForm() {
+  const form      = document.getElementById('mat-upload-form');
+  const dropZone  = document.getElementById('mat-drop-zone');
+  const fileInput = document.getElementById('mat-file-input');
+  const browseBtn = document.getElementById('mat-browse-link');
+  const selFile   = document.getElementById('mat-selected-file');
+  const progWrap  = document.getElementById('mat-upload-progress');
+  const progBar   = document.getElementById('mat-upload-progress-bar');
+  const progPct   = document.getElementById('mat-upload-pct');
+  const errEl     = document.getElementById('mat-upload-error');
+  const submitBtn = document.getElementById('mat-upload-btn');
+
+  if (!form) return;
+
+  // Browse link
+  browseBtn && browseBtn.addEventListener('click', e => { e.preventDefault(); fileInput && fileInput.click(); });
+
+  // File input change
+  fileInput && fileInput.addEventListener('change', () => {
+    const f = fileInput.files[0];
+    if (f && selFile) {
+      selFile.textContent = f.name;
+      selFile.classList.remove('hidden');
+    }
+  });
+
+  // Drag & drop
+  if (dropZone) {
+    dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', e => {
+      e.preventDefault();
+      dropZone.classList.remove('drag-over');
+      const f = e.dataTransfer.files[0];
+      if (f) {
+        const dt = new DataTransfer();
+        dt.items.add(f);
+        fileInput.files = dt.files;
+        if (selFile) { selFile.textContent = f.name; selFile.classList.remove('hidden'); }
+      }
+    });
+  }
+
+  // Form submit
+  form.addEventListener('submit', async e => {
+    e.preventDefault();
+    if (errEl) { errEl.textContent = ''; errEl.classList.add('hidden'); }
+
+    const title = (document.getElementById('mat-title')?.value || '').trim();
+    const desc  = (document.getElementById('mat-desc')?.value  || '').trim();
+    const file  = fileInput?.files[0];
+
+    if (!title) { if (errEl) { errEl.textContent = 'Title is required.'; errEl.classList.remove('hidden'); } return; }
+    if (!file)  { if (errEl) { errEl.textContent = 'Please select a file.'; errEl.classList.remove('hidden'); } return; }
+
+    // Show progress
+    progWrap && progWrap.classList.remove('hidden');
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Uploading…'; }
+
+    // Simulate progress
+    let pct = 0;
+    const ticker = setInterval(() => {
+      pct = Math.min(pct + Math.random() * 15, 85);
+      if (progBar) progBar.style.width = pct + '%';
+      if (progPct) progPct.textContent = Math.round(pct) + '%';
+    }, 200);
+
+    try {
+      const fd = new FormData();
+      fd.append('title', title);
+      fd.append('description', desc);
+      fd.append('file', file);
+
+      const res  = await fetch(`/api/activities/${_currentActivityId}/materials`, {
+        method: 'POST',
+        headers: _authHeaders(),
+        body: fd,
+      });
+      const data = await res.json();
+      clearInterval(ticker);
+
+      if (!res.ok) throw new Error(data.error || 'Upload failed');
+
+      // Complete progress bar
+      if (progBar) progBar.style.width = '100%';
+      if (progPct) progPct.textContent = '100%';
+
+      setTimeout(() => {
+        progWrap && progWrap.classList.add('hidden');
+        if (progBar) progBar.style.width = '0%';
+        if (progPct) progPct.textContent = '0%';
+      }, 600);
+
+      // Reset form
+      form.reset();
+      if (selFile) { selFile.textContent = ''; selFile.classList.add('hidden'); }
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-upload mr-2"></i>Upload Material'; }
+
+      showToast('Material uploaded successfully!', 'success');
+      await loadMaterials();
+
+    } catch (err) {
+      clearInterval(ticker);
+      progWrap && progWrap.classList.add('hidden');
+      if (progBar) progBar.style.width = '0%';
+      if (errEl) { errEl.textContent = err.message || 'Upload failed.'; errEl.classList.remove('hidden'); }
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = '<i class="fas fa-upload mr-2"></i>Upload Material'; }
+    }
+  });
+}
+
+// ── Edit form submit ───────────────────────────────────────
+function _initEditForm() {
+  const form = document.getElementById('mat-edit-form');
+  if (!form) return;
+  form.addEventListener('submit', async e => {
+    e.preventDefault();
+    const mid   = document.getElementById('mat-edit-id')?.value;
+    const title = (document.getElementById('mat-edit-title')?.value || '').trim();
+    const desc  = (document.getElementById('mat-edit-desc')?.value  || '').trim();
+    const errEl = document.getElementById('mat-edit-error');
+    const btn   = document.getElementById('mat-edit-btn');
+
+    if (errEl) { errEl.textContent = ''; errEl.classList.add('hidden'); }
+    if (!title) {
+      if (errEl) { errEl.textContent = 'Title is required.'; errEl.classList.remove('hidden'); }
+      return;
+    }
+    if (btn) { btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Saving…'; }
+
+    try {
+      const res  = await fetch(`/api/activities/${_currentActivityId}/materials/${mid}`, {
+        method: 'PATCH',
+        headers: { ..._authHeaders(), 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, description: desc }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Update failed');
+      closeEditModal();
+      showToast('Material updated!', 'success');
+      await loadMaterials();
+    } catch (err) {
+      if (errEl) { errEl.textContent = err.message || 'Update failed.'; errEl.classList.remove('hidden'); }
+    } finally {
+      if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-save mr-1"></i> Save Changes'; }
+    }
+  });
+}
+
+// ── Init ───────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  // Wire up search + filters (HTML uses id="search", not "search-input")
+  document.getElementById('search')?.addEventListener('input', applyFilters);
+  document.getElementById('filter-type')?.addEventListener('change', applyFilters);
+  document.getElementById('filter-format')?.addEventListener('change', applyFilters);
+
+  // Event delegation for material list buttons (download / edit / delete)
+  // Using delegation avoids onclick-in-HTML encoding issues with special chars
+  document.getElementById('mat-list')?.addEventListener('click', e => {
+    const btn = e.target.closest('[data-action]');
+    if (!btn) return;
+    const action = btn.dataset.action;
+    const mid    = btn.dataset.mid;
+    if (!mid) return;
+
+    if (action === 'download') {
+      downloadMaterial(mid);
+    } else if (action === 'edit') {
+      const mat = _matCache[mid];
+      if (mat) openEditModal(mat.id, mat.title, mat.description || '');
+    } else if (action === 'delete') {
+      const mat = _matCache[mid];
+      if (mat) openDeleteModal(mat.id, mat.title);
+    }
+  });
+
+  // Init forms
+  _initUploadForm();
+  _initEditForm();
+
+  // Load activities for browser view
+  loadAllActivities();
+
+  // Check if URL has ?id= param to open detail directly
+  const params = new URLSearchParams(window.location.search);
+  const actId  = params.get('id');
+  if (actId) openActivity(actId);
+});
\ No newline at end of file
diff --git a/src/api/materials.py b/src/api/materials.py
new file mode 100644
index 0000000..ac5b5a1
--- /dev/null
+++ b/src/api/materials.py
@@ -0,0 +1,496 @@
+"""
+Course Materials API – A2 module
+=================================
+Endpoints:
+  GET    /api/activities/:activity_id/materials
+  POST   /api/activities/:activity_id/materials
+  DELETE /api/activities/:activity_id/materials/:mid
+  GET    /api/activities/:activity_id/materials/:mid/download
+
+Storage:  Cloudflare R2  (env.R2_BUCKET)
+Database: Cloudflare D1  (env.DB)
+Auth:     HMAC-SHA256 stateless tokens (verify_token from worker)
+"""
+
+import json
+import os
+
+
+# ---------------------------------------------------------------------------
+# Internal helpers (imported lazily from worker to avoid circular imports)
+# ---------------------------------------------------------------------------
+
+def _worker():
+    """Return the worker module.  Imported once and cached."""
+    import importlib, sys
+    if "worker" in sys.modules:
+        return sys.modules["worker"]
+    # When running inside the CF runtime the module is already loaded as
+    # the top-level entry-point; fall back to a direct import for tests.
+    return importlib.import_module("worker")
+
+
+def _new_id() -> str:
+    """Generate a UUID-v4 using os.urandom (no stdlib uuid needed)."""
+    b = bytearray(os.urandom(16))
+    b[6] = (b[6] & 0x0F) | 0x40   # version 4
+    b[8] = (b[8] & 0x3F) | 0x80   # RFC 4122 variant
+    h = b.hex()
+    return f"{h[:8]}-{h[8:12]}-{h[12:16]}-{h[16:20]}-{h[20:]}"
+
+
+def _r2_key(activity_id: str, filename: str) -> str:
+    """Build a deterministic, collision-resistant R2 object key.
+
+    Format: ``materials/{activity_id}/{uuid}_{sanitised_filename}``
+
+    The UUID prefix guarantees uniqueness even when the same filename is
+    uploaded twice.  The sanitised filename is kept for human readability
+    inside the R2 bucket.
+    """
+    safe_name = "".join(
+        c if (c.isalnum() or c in "-_.") else "_"
+        for c in filename
+    )[:128]  # cap at 128 chars to stay well within R2 key limits
+    return f"materials/{activity_id}/{_new_id()}_{safe_name}"
+
+
+async def _parse_multipart(req):
+    """
+    Parse a multipart/form-data request using the CF Workers FormData API.
+
+    Returns ``(fields_dict, error_response | None)`` where *fields_dict*
+    maps field names to either a string value (text fields) or a dict
+    ``{"filename": str, "bytes": bytes}`` (file fields).
+
+    Falls back to a plain JSON body when the Content-Type is
+    ``application/json`` so that unit tests can exercise the handler
+    without constructing real multipart payloads.
+    """
+    w = _worker()
+    content_type = (req.headers.get("Content-Type") or
+                    req.headers.get("content-type") or "")
+
+    # ---- JSON fallback (used by unit tests) --------------------------------
+    if "application/json" in content_type:
+        try:
+            text = await req.text()
+            body = json.loads(text)
+        except Exception:
+            return None, w.err("Invalid JSON body", 400)
+        if not isinstance(body, dict):
+            return None, w.err("JSON body must be an object", 400)
+        return body, None
+
+    # ---- Real multipart (CF Workers runtime) --------------------------------
+    try:
+        form_data = await req.formData()
+    except Exception:
+        return None, w.err("Failed to parse multipart form data", 400)
+
+    fields = {}
+    try:
+        # formData() returns a JS FormData object; iterate its entries.
+        for key, value in form_data.entries():
+            # File entries expose a .name attribute (the original filename).
+            filename = getattr(value, "name", None) or getattr(value, "filename", None)
+            if filename is not None:
+                # It's a File/Blob – read raw bytes.
+                try:
+                    arr_buf = await value.arrayBuffer()
+                    import js  # noqa: PLC0415 – CF runtime only
+                    raw = bytes(js.Uint8Array.new(arr_buf))
+                except Exception:
+                    raw = b""
+                fields[key] = {"filename": filename, "bytes": raw}
+            else:
+                fields[key] = str(value)
+    except Exception:
+        # Fallback: try the dict-like .get() interface some runtimes expose.
+        for field_name in ("title", "description", "file"):
+            val = form_data.get(field_name)
+            if val is None:
+                continue
+            filename = getattr(val, "name", None) or getattr(val, "filename", None)
+            if filename is not None:
+                try:
+                    arr_buf = await val.arrayBuffer()
+                    import js  # noqa: PLC0415
+                    raw = bytes(js.Uint8Array.new(arr_buf))
+                except Exception:
+                    raw = b""
+                fields[field_name] = {"filename": filename, "bytes": raw}
+            else:
+                fields[field_name] = str(val)
+
+    return fields, None
+
+
+async def _upload_to_r2(env, key: str, data: bytes, content_type: str = "application/octet-stream",
+                        original_filename: str = ""):
+    """Upload *data* to R2 under *key*.
+
+    Stores ``Content-Type`` and ``Content-Disposition`` in R2 httpMetadata so
+    that presigned download URLs automatically serve the correct filename and
+    MIME type without needing a proxy.
+
+    Uses ``env.R2_BUCKET.put(key, data, options)`` which is the standard
+    Cloudflare Workers R2 binding API.
+    """
+    try:
+        from pyodide.ffi import to_js  # noqa: PLC0415 – CF runtime only
+        import js                       # noqa: PLC0415
+        http_meta = {"contentType": content_type}
+        if original_filename:
+            http_meta["contentDisposition"] = f'attachment; filename="{original_filename}"'
+        options = to_js(
+            {"httpMetadata": http_meta},
+            dict_converter=js.Object.fromEntries,
+        )
+        await env.R2_BUCKET.put(key, to_js(data, create_pyproxies=False), options)
+    except ImportError:
+        # Unit-test environment: env.R2_BUCKET is a MagicMock / AsyncMock.
+        await env.R2_BUCKET.put(key, data)
+
+
+async def _delete_from_r2(env, key: str):
+    """Delete the object at *key* from R2 (best-effort; errors are swallowed)."""
+    try:
+        await env.R2_BUCKET.delete(key)
+    except Exception as exc:
+        w = _worker()
+        await w.capture_exception(exc, _env=env, where="materials._delete_from_r2")
+
+
+async def _generate_download_url(env, key: str) -> str:
+    """Return a time-limited signed URL for *key* from R2.
+
+    Cloudflare R2 supports ``createPresignedUrl`` on the bucket binding.
+    If the binding does not expose that method (e.g. older SDK or unit
+    tests), we fall back to a plain ``/api/r2/{key}`` path that the
+    worker can proxy.
+    """
+    try:
+        # CF Workers R2 binding: bucket.createPresignedUrl(key, {expiresIn})
+        url = await env.R2_BUCKET.createPresignedUrl(key, {"expiresIn": 3600})
+        return str(url)
+    except Exception:
+        pass
+    # Fallback: internal proxy URL (worker must implement GET /api/r2/:key)
+    return f"/api/r2/{key}"
+
+
+# ---------------------------------------------------------------------------
+# Endpoint handlers
+# ---------------------------------------------------------------------------
+
+async def list_materials(activity_id: str, req, env):
+    """GET /api/activities/:activity_id/materials
+
+    Returns all materials for the given activity ordered by created_at DESC.
+    Authentication is optional – public read access is allowed so that
+    unenrolled visitors can see what materials an activity offers.
+    """
+    w = _worker()
+
+    # Validate activity exists
+    try:
+        act = await env.DB.prepare(
+            "SELECT id FROM activities WHERE id = ?"
+        ).bind(activity_id).first()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.list.activity_lookup")
+        return w.err("Database error", 500)
+
+    if not act:
+        return w.err("Activity not found", 404)
+
+    try:
+        res = await env.DB.prepare(
+            "SELECT id, activity_id, title, description, uploaded_by, created_at"
+            " FROM course_materials"
+            " WHERE activity_id = ?"
+            " ORDER BY created_at DESC"
+        ).bind(activity_id).all()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.list.query")
+        return w.err("Failed to fetch materials", 500)
+
+    materials = []
+    for row in res.results or []:
+        materials.append({
+            "id":          row.id,
+            "activity_id": row.activity_id,
+            "title":       row.title,
+            "description": row.description or "",
+            "uploaded_by": row.uploaded_by,
+            "created_at":  row.created_at,
+        })
+
+    return w.json_resp({"materials": materials, "count": len(materials)})
+
+
+async def upload_material(activity_id: str, req, env):
+    """POST /api/activities/:activity_id/materials
+
+    Accepts multipart/form-data with fields:
+      - title       (required, text)
+      - description (optional, text)
+      - file        (required, binary)
+
+    Uploads the file to R2 and stores metadata in D1.
+    Requires authentication.
+    """
+    w = _worker()
+
+    user = w.verify_token(req.headers.get("Authorization"), env.JWT_SECRET)
+    if not user:
+        return w.err("Authentication required", 401)
+
+    # Validate activity exists
+    try:
+        act = await env.DB.prepare(
+            "SELECT id FROM activities WHERE id = ?"
+        ).bind(activity_id).first()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.upload.activity_lookup")
+        return w.err("Database error", 500)
+
+    if not act:
+        return w.err("Activity not found", 404)
+
+    # Parse multipart body
+    fields, parse_err = await _parse_multipart(req)
+    if parse_err:
+        return parse_err
+
+    title = (fields.get("title") or "").strip() if isinstance(fields.get("title"), str) else ""
+    description = (fields.get("description") or "").strip() if isinstance(fields.get("description"), str) else ""
+
+    if not title:
+        return w.err("title is required", 400)
+
+    file_field = fields.get("file")
+    if not file_field:
+        return w.err("file is required", 400)
+
+    # Support both dict (multipart) and raw bytes (test injection)
+    if isinstance(file_field, dict):
+        filename = file_field.get("filename") or "upload"
+        file_bytes = file_field.get("bytes") or b""
+        content_type = file_field.get("content_type") or "application/octet-stream"
+    elif isinstance(file_field, (bytes, bytearray)):
+        filename = fields.get("filename") or "upload"
+        file_bytes = bytes(file_field)
+        content_type = "application/octet-stream"
+    else:
+        return w.err("Invalid file field", 400)
+
+    if not file_bytes:
+        return w.err("Uploaded file is empty", 400)
+
+    # Build R2 key and upload
+    r2_key = _r2_key(activity_id, filename)
+    try:
+        await _upload_to_r2(env, r2_key, file_bytes, content_type, original_filename=filename)
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.upload.r2_put")
+        return w.err("File upload failed — please try again", 500)
+
+    # Persist metadata in D1
+    mid = _new_id()
+    try:
+        await env.DB.prepare(
+            "INSERT INTO course_materials"
+            " (id, activity_id, title, description, file_key, uploaded_by)"
+            " VALUES (?, ?, ?, ?, ?, ?)"
+        ).bind(mid, activity_id, title, description, r2_key, user["id"]).run()
+    except Exception as exc:
+        # Compensating action: remove the orphaned R2 object
+        await _delete_from_r2(env, r2_key)
+        await w.capture_exception(exc, req, env, "materials.upload.db_insert")
+        return w.err("Failed to save material metadata — please try again", 500)
+
+    return w.ok(
+        {
+            "id":          mid,
+            "activity_id": activity_id,
+            "title":       title,
+            "description": description,
+            "file_key":    r2_key,   # internal key – not a public URL
+        },
+        "Material uploaded successfully",
+    )
+
+
+async def delete_material(activity_id: str, mid: str, req, env):
+    """DELETE /api/activities/:activity_id/materials/:mid
+
+    Deletes the material record from D1 and the file from R2.
+    Only the uploader or the activity host may delete a material.
+    """
+    w = _worker()
+
+    user = w.verify_token(req.headers.get("Authorization"), env.JWT_SECRET)
+    if not user:
+        return w.err("Authentication required", 401)
+
+    # Fetch the material (also validates activity_id matches)
+    try:
+        row = await env.DB.prepare(
+            "SELECT id, activity_id, file_key, uploaded_by"
+            " FROM course_materials"
+            " WHERE id = ? AND activity_id = ?"
+        ).bind(mid, activity_id).first()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.delete.lookup")
+        return w.err("Database error", 500)
+
+    if not row:
+        return w.err("Material not found", 404)
+
+    # Authorisation: uploader OR activity host may delete
+    is_uploader = (row.uploaded_by == user["id"])
+    is_host = False
+    if not is_uploader:
+        try:
+            act = await env.DB.prepare(
+                "SELECT host_id FROM activities WHERE id = ?"
+            ).bind(activity_id).first()
+            is_host = bool(act and act.host_id == user["id"])
+        except Exception as exc:
+            await w.capture_exception(exc, req, env, "materials.delete.host_check")
+
+    if not is_uploader and not is_host:
+        return w.err("Permission denied", 403)
+
+    # Delete from D1 first (so the record is gone even if R2 delete lags)
+    try:
+        await env.DB.prepare(
+            "DELETE FROM course_materials WHERE id = ?"
+        ).bind(mid).run()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.delete.db_delete")
+        return w.err("Failed to delete material record", 500)
+
+    # Best-effort R2 deletion (errors are logged but do not fail the request)
+    await _delete_from_r2(env, row.file_key)
+
+    return w.ok({"id": mid}, "Material deleted successfully")
+
+
+async def update_material(activity_id: str, mid: str, req, env):
+    """PATCH /api/activities/:activity_id/materials/:mid
+
+    Updates the title and/or description of an existing material.
+    Only the uploader or the activity host may edit a material.
+    """
+    w = _worker()
+
+    user = w.verify_token(req.headers.get("Authorization"), env.JWT_SECRET)
+    if not user:
+        return w.err("Authentication required", 401)
+
+    # Fetch the material (also validates activity_id matches)
+    try:
+        row = await env.DB.prepare(
+            "SELECT id, activity_id, uploaded_by"
+            " FROM course_materials"
+            " WHERE id = ? AND activity_id = ?"
+        ).bind(mid, activity_id).first()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.update.lookup")
+        return w.err("Database error", 500)
+
+    if not row:
+        return w.err("Material not found", 404)
+
+    # Authorisation: uploader OR activity host may edit
+    is_uploader = (row.uploaded_by == user["id"])
+    is_host = False
+    if not is_uploader:
+        try:
+            act = await env.DB.prepare(
+                "SELECT host_id FROM activities WHERE id = ?"
+            ).bind(activity_id).first()
+            is_host = bool(act and act.host_id == user["id"])
+        except Exception as exc:
+            await w.capture_exception(exc, req, env, "materials.update.host_check")
+
+    if not is_uploader and not is_host:
+        return w.err("Permission denied", 403)
+
+    # Parse JSON body
+    body, parse_err = await w.parse_json_object(req)
+    if parse_err:
+        return parse_err
+
+    title       = (body.get("title") or "").strip()
+    description = (body.get("description") or "").strip()
+
+    if not title:
+        return w.err("title is required", 400)
+
+    try:
+        await env.DB.prepare(
+            "UPDATE course_materials SET title = ?, description = ? WHERE id = ?"
+        ).bind(title, description, mid).run()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.update.db_update")
+        return w.err("Failed to update material", 500)
+
+    return w.ok(
+        {"id": mid, "title": title, "description": description},
+        "Material updated successfully",
+    )
+
+
+async def download_material(activity_id: str, mid: str, req, env):
+    """GET /api/activities/:activity_id/materials/:mid/download
+
+    Returns a time-limited signed URL for the material's R2 object.
+    The raw R2 key is never exposed to the client.
+    Requires authentication.
+    """
+    w = _worker()
+
+    user = w.verify_token(req.headers.get("Authorization"), env.JWT_SECRET)
+    if not user:
+        return w.err("Authentication required", 401)
+
+    # Fetch material (validates activity_id scope)
+    try:
+        row = await env.DB.prepare(
+            "SELECT id, title, file_key"
+            " FROM course_materials"
+            " WHERE id = ? AND activity_id = ?"
+        ).bind(mid, activity_id).first()
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.download.lookup")
+        return w.err("Database error", 500)
+
+    if not row:
+        return w.err("Material not found", 404)
+
+    # Generate a signed / temporary download URL
+    try:
+        download_url = await _generate_download_url(env, row.file_key)
+    except Exception as exc:
+        await w.capture_exception(exc, req, env, "materials.download.url_gen")
+        return w.err("Failed to generate download URL", 500)
+
+    # Derive the original filename from the R2 key
+    # Key format: materials/{activity_id}/{uuid}_{original_filename}
+    raw_name = row.file_key.split("/")[-1]
+    original_filename = raw_name[37:] if len(raw_name) > 37 else raw_name
+
+    return w.ok(
+        {
+            "id":           row.id,
+            "title":        row.title,
+            "filename":     original_filename,
+            "download_url": download_url,
+            "expires_in":   3600,  # seconds
+        },
+        "Download URL generated",
+    )
diff --git a/src/worker.py b/src/worker.py
index f274a07..c7f57b7 100644
--- a/src/worker.py
+++ b/src/worker.py
@@ -720,6 +720,21 @@ async def send_password_reset_email(to_email: str, _username: str, token: str, e
         FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
     )""",
     "CREATE INDEX IF NOT EXISTS idx_prtoken_user ON password_reset_tokens(user_id)",
+    # Course materials (A2 module)
+    """CREATE TABLE IF NOT EXISTS course_materials (
+        id          TEXT PRIMARY KEY,
+        activity_id TEXT NOT NULL,
+        title       TEXT NOT NULL,
+        description TEXT,
+        file_key    TEXT NOT NULL,
+        uploaded_by TEXT,
+        created_at  TEXT NOT NULL DEFAULT (datetime('now')),
+        FOREIGN KEY (activity_id) REFERENCES activities(id) ON DELETE CASCADE,
+        FOREIGN KEY (uploaded_by) REFERENCES users(id) ON DELETE SET NULL
+    )""",
+    "CREATE INDEX IF NOT EXISTS idx_materials_activity ON course_materials(activity_id)",
+    "CREATE INDEX IF NOT EXISTS idx_materials_uploader ON course_materials(uploaded_by)",
+    "CREATE INDEX IF NOT EXISTS idx_materials_created  ON course_materials(activity_id, created_at DESC)",
 ]
 
 
@@ -2691,6 +2706,83 @@ async def _dispatch(request, env):
         if path == "/api/reset-password" and method == "POST":
             return await api_reset_password(request, env)
 
+        # Course Materials (A2 module)
+        m_mat_list = re.fullmatch(r"/api/activities/([A-Za-z0-9_-]+)/materials", path)
+        if m_mat_list:
+            from api.materials import list_materials, upload_material  # noqa: PLC0415
+            if method == "GET":
+                return await list_materials(m_mat_list.group(1), request, env)
+            if method == "POST":
+                return await upload_material(m_mat_list.group(1), request, env)
+
+        m_mat_download = re.fullmatch(
+            r"/api/activities/([A-Za-z0-9_-]+)/materials/([A-Za-z0-9_-]+)/download", path
+        )
+        if m_mat_download and method == "GET":
+            from api.materials import download_material  # noqa: PLC0415
+            return await download_material(m_mat_download.group(1), m_mat_download.group(2), request, env)
+
+        m_mat_item = re.fullmatch(
+            r"/api/activities/([A-Za-z0-9_-]+)/materials/([A-Za-z0-9_-]+)", path
+        )
+        if m_mat_item and method == "DELETE":
+            from api.materials import delete_material  # noqa: PLC0415
+            return await delete_material(m_mat_item.group(1), m_mat_item.group(2), request, env)
+        if m_mat_item and method == "PATCH":
+            from api.materials import update_material  # noqa: PLC0415
+            return await update_material(m_mat_item.group(1), m_mat_item.group(2), request, env)
+
+        # R2 object proxy – fallback download when presigned URLs aren't available
+        # Matches /api/r2/<anything> (the key may contain slashes)
+        if path.startswith("/api/r2/") and method == "GET":
+            r2_key = path[len("/api/r2/"):]
+            # Accept token from Authorization header OR ?token= query param
+            # (browser <a> navigation can't set headers, so we allow query param)
+            auth_header = request.headers.get("Authorization") or ""
+            if not auth_header:
+                qs_params = parse_qs(urlparse(request.url).query)
+                token_param = (qs_params.get("token") or [None])[0]
+                if token_param:
+                    auth_header = token_param
+            user = verify_token(auth_header, env.JWT_SECRET)
+            if not user:
+                return err("Authentication required", 401)
+            try:
+                obj = await env.R2_BUCKET.get(r2_key)
+                if obj is None:
+                    return err("File not found", 404)
+                try:
+                    from pyodide.ffi import to_js  # noqa: PLC0415
+                    import js                       # noqa: PLC0415
+                    body_bytes = bytes(js.Uint8Array.new(await obj.arrayBuffer()))
+                except ImportError:
+                    body_bytes = await obj.arrayBuffer()
+                ct = (getattr(obj, "httpMetadata", None) and
+                      getattr(obj.httpMetadata, "contentType", None)) or "application/octet-stream"
+                # R2 key format: materials/{act_id}/{uuid}_{original_filename}
+                # Strip the UUID prefix (36 chars) + underscore to get original name
+                raw_name = r2_key.split("/")[-1]
+                filename = raw_name[37:] if len(raw_name) > 37 else raw_name
+                try:
+                    import js as _js  # noqa: PLC0415
+                    from pyodide.ffi import to_js as _to_js  # noqa: PLC0415
+                    headers = _to_js({
+                        "Content-Type": ct,
+                        "Content-Disposition": f'attachment; filename="{filename}"',
+                        "Cache-Control": "private, max-age=3600",
+                    }, dict_converter=_js.Object.fromEntries)
+                    return _js.Response.new(
+                        _to_js(body_bytes, create_pyproxies=False),
+                        _to_js({"status": 200, "headers": headers},
+                               dict_converter=_js.Object.fromEntries),
+                    )
+                except ImportError:
+                    # Unit-test / non-CF environment
+                    return json_resp({"error": "R2 proxy not available in this environment"}, 501)
+            except Exception as exc:
+                await capture_exception(exc, request, env, "r2_proxy")
+                return err("Failed to retrieve file", 500)
+
         # Notifications
         if path == "/api/notifications" and method == "GET":
             return await api_list_notifications(request, env)
diff --git a/tests/test_api_materials.py b/tests/test_api_materials.py
new file mode 100644
index 0000000..d5f9688
--- /dev/null
+++ b/tests/test_api_materials.py
@@ -0,0 +1,662 @@
+"""
+Tests for the Course Materials API (A2 module).
+
+Covers:
+  * list_materials   – GET  /api/activities/:activity_id/materials
+  * upload_material  – POST /api/activities/:activity_id/materials
+  * delete_material  – DELETE /api/activities/:activity_id/materials/:mid
+  * download_material – GET /api/activities/:activity_id/materials/:mid/download
+
+Helper stubs:
+  * MockR2Bucket – simulates env.R2_BUCKET (put / delete / createPresignedUrl)
+"""
+
+import importlib
+import json
+import sys
+from pathlib import Path
+from unittest.mock import AsyncMock, MagicMock
+
+import pytest
+
+# ---------------------------------------------------------------------------
+# Ensure the stubs installed by conftest.py are present before any import
+# ---------------------------------------------------------------------------
+from tests.helpers import (
+    MockDB,
+    MockRequest,
+    MockRow,
+    load_worker,
+    make_env,
+    make_stmt,
+)
+
+# Load worker module (needed for create_token / verify_token)
+worker = load_worker()
+
+# ---------------------------------------------------------------------------
+# Load the materials module under test
+# ---------------------------------------------------------------------------
+
+_MATERIALS_PATH = Path(__file__).parent.parent / "src" / "api" / "materials.py"
+
+
+def _load_materials():
+    """Load src/api/materials.py and inject the already-loaded worker stub."""
+    # Make sure "worker" resolves to the already-loaded module inside materials.py
+    sys.modules.setdefault("worker", worker)
+    spec = importlib.util.spec_from_file_location("src.api.materials", _MATERIALS_PATH)
+    mod = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(mod)
+    return mod
+
+
+materials = _load_materials()
+
+# ---------------------------------------------------------------------------
+# Constants
+# ---------------------------------------------------------------------------
+
+JWT = "test-jwt-secret"
+ENC = "test-encryption-key"
+ACTIVITY_ID = "act-test-001"
+MATERIAL_ID = "mat-test-001"
+USER_ID = "usr-host-001"
+OTHER_USER_ID = "usr-other-001"
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def _token(uid=USER_ID, username="alice", role="host"):
+    return worker.create_token(uid, username, role, JWT)
+
+
+def _auth(uid=USER_ID, username="alice", role="host"):
+    return {"Authorization": f"Bearer {_token(uid, username, role)}"}
+
+
+def _parse(resp):
+    return json.loads(resp.body)
+
+
+def _make_material_row(**kwargs):
+    defaults = dict(
+        id=MATERIAL_ID,
+        activity_id=ACTIVITY_ID,
+        title="Lecture Slides",
+        description="Week 1 slides",
+        file_key=f"materials/{ACTIVITY_ID}/uuid_slides.pdf",
+        uploaded_by=USER_ID,
+        created_at="2024-06-01 10:00:00",
+    )
+    defaults.update(kwargs)
+    return MockRow(**defaults)
+
+
+# ---------------------------------------------------------------------------
+# Mock R2 bucket
+# ---------------------------------------------------------------------------
+
+class MockR2Bucket:
+    """Minimal R2 bucket stub that records calls."""
+
+    def __init__(self, presigned_url="https://r2.example.com/signed?token=abc"):
+        self._presigned_url = presigned_url
+        self.put = AsyncMock(return_value=None)
+        self.delete = AsyncMock(return_value=None)
+        self.createPresignedUrl = AsyncMock(return_value=presigned_url)
+
+
+def _make_env_with_r2(db=None, r2=None):
+    env = make_env(db=db, enc_key=ENC, jwt_secret=JWT)
+    env.R2_BUCKET = r2 if r2 is not None else MockR2Bucket()
+    return env
+
+
+# ---------------------------------------------------------------------------
+# list_materials
+# ---------------------------------------------------------------------------
+
+class TestListMaterials:
+    """GET /api/activities/:activity_id/materials"""
+
+    def _req(self, activity_id=ACTIVITY_ID):
+        return MockRequest(method="GET",
+                           url=f"http://localhost/api/activities/{activity_id}/materials")
+
+    async def test_returns_materials_list(self):
+        row = _make_material_row()
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=MockRow(id=ACTIVITY_ID)),   # activity exists
+            make_stmt(all_results=[row]),               # SELECT materials
+        ]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert "materials" in data
+        assert data["count"] == 1
+        assert data["materials"][0]["id"] == MATERIAL_ID
+        assert data["materials"][0]["title"] == "Lecture Slides"
+
+    async def test_empty_list_when_no_materials(self):
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=MockRow(id=ACTIVITY_ID)),
+            make_stmt(all_results=[]),
+        ]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert data["materials"] == []
+        assert data["count"] == 0
+
+    async def test_activity_not_found_returns_404(self):
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=None),   # activity not found
+        ]))
+        resp = await materials.list_materials("nonexistent", self._req("nonexistent"), env)
+        assert resp.status == 404
+        assert "not found" in _parse(resp)["error"].lower()
+
+    async def test_db_error_returns_500(self):
+        stmt = make_stmt()
+        stmt.bind.return_value.first.side_effect = Exception("DB down")
+        env = _make_env_with_r2(db=MockDB([stmt]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        assert resp.status == 500
+
+    async def test_materials_query_error_returns_500(self):
+        act_stmt = make_stmt(first=MockRow(id=ACTIVITY_ID))
+        mat_stmt = make_stmt()
+        mat_stmt.bind.return_value.all.side_effect = Exception("Query failed")
+        env = _make_env_with_r2(db=MockDB([act_stmt, mat_stmt]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        assert resp.status == 500
+
+    async def test_response_fields_present(self):
+        row = _make_material_row()
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=MockRow(id=ACTIVITY_ID)),
+            make_stmt(all_results=[row]),
+        ]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        mat = _parse(resp)["materials"][0]
+        for field in ("id", "activity_id", "title", "description", "uploaded_by", "created_at"):
+            assert field in mat, f"Missing field: {field}"
+
+    async def test_file_key_not_exposed_in_list(self):
+        """R2 file_key must never appear in the list response."""
+        row = _make_material_row()
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=MockRow(id=ACTIVITY_ID)),
+            make_stmt(all_results=[row]),
+        ]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        mat = _parse(resp)["materials"][0]
+        assert "file_key" not in mat
+
+    async def test_multiple_materials_returned(self):
+        rows = [_make_material_row(id=f"mat-{i}", title=f"Material {i}") for i in range(3)]
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=MockRow(id=ACTIVITY_ID)),
+            make_stmt(all_results=rows),
+        ]))
+        resp = await materials.list_materials(ACTIVITY_ID, self._req(), env)
+        data = _parse(resp)
+        assert data["count"] == 3
+        assert len(data["materials"]) == 3
+
+
+# ---------------------------------------------------------------------------
+# upload_material
+# ---------------------------------------------------------------------------
+
+class TestUploadMaterial:
+    """POST /api/activities/:activity_id/materials"""
+
+    def _req(self, activity_id=ACTIVITY_ID, headers=None, body=None):
+        h = {"Content-Type": "application/json"}
+        if headers:
+            h.update(headers)
+        return MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{activity_id}/materials",
+            headers=h,
+            body=json.dumps(body) if body is not None else None,
+        )
+
+    def _upload_req(self, title="Slides", description="", filename="slides.pdf",
+                    file_bytes=b"%PDF-1.4 test", activity_id=ACTIVITY_ID, uid=USER_ID):
+        """Build a JSON-body request that exercises the JSON fallback path in _parse_multipart."""
+        body = {
+            "title": title,
+            "description": description,
+            "filename": filename,
+            "file": {
+                "filename": filename,
+                "bytes": list(file_bytes),   # JSON-serialisable
+                "content_type": "application/pdf",
+            },
+        }
+        return MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{activity_id}/materials",
+            headers={
+                "Content-Type": "application/json",
+                "Authorization": f"Bearer {_token(uid)}",
+            },
+            body=json.dumps(body),
+        )
+
+    async def test_no_auth_returns_401(self):
+        env = _make_env_with_r2()
+        resp = await materials.upload_material(ACTIVITY_ID, self._req(), env)
+        assert resp.status == 401
+
+    async def test_activity_not_found_returns_404(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=None)]))
+        req = self._upload_req()
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 404
+
+    async def test_missing_title_returns_400(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=MockRow(id=ACTIVITY_ID))]))
+        body = {"description": "no title", "file": {"filename": "f.pdf", "bytes": [1, 2, 3]}}
+        req = MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials",
+            headers={"Content-Type": "application/json", "Authorization": f"Bearer {_token()}"},
+            body=json.dumps(body),
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 400
+        assert "title" in _parse(resp)["error"].lower()
+
+    async def test_missing_file_returns_400(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=MockRow(id=ACTIVITY_ID))]))
+        body = {"title": "Slides"}
+        req = MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials",
+            headers={"Content-Type": "application/json", "Authorization": f"Bearer {_token()}"},
+            body=json.dumps(body),
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 400
+        assert "file" in _parse(resp)["error"].lower()
+
+    async def test_successful_upload_returns_200(self):
+        r2 = MockR2Bucket()
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),  # activity check
+                make_stmt(),                               # INSERT material
+            ]),
+            r2=r2,
+        )
+        req = self._upload_req()
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert data["success"] is True
+        assert "id" in data["data"]
+        assert data["data"]["title"] == "Slides"
+        assert data["data"]["activity_id"] == ACTIVITY_ID
+
+    async def test_r2_put_called_on_success(self):
+        r2 = MockR2Bucket()
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        await materials.upload_material(ACTIVITY_ID, self._upload_req(), env)
+        r2.put.assert_called_once()
+
+    async def test_r2_key_format(self):
+        """R2 key must start with materials/{activity_id}/."""
+        r2 = MockR2Bucket()
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        await materials.upload_material(ACTIVITY_ID, self._upload_req(), env)
+        call_args = r2.put.call_args
+        key = call_args[0][0]
+        assert key.startswith(f"materials/{ACTIVITY_ID}/")
+
+    async def test_file_key_not_exposed_in_response(self):
+        """file_key is returned in upload response for internal use but raw R2 path is opaque."""
+        r2 = MockR2Bucket()
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, self._upload_req(), env)
+        data = _parse(resp)
+        # file_key is present in upload response (internal reference) but must not be a raw URL
+        key = data["data"].get("file_key", "")
+        assert not key.startswith("http"), "file_key must not be a public URL"
+
+    async def test_r2_upload_failure_returns_500(self):
+        r2 = MockR2Bucket()
+        r2.put.side_effect = Exception("R2 unavailable")
+        env = _make_env_with_r2(
+            db=MockDB([make_stmt(first=MockRow(id=ACTIVITY_ID))]),
+            r2=r2,
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, self._upload_req(), env)
+        assert resp.status == 500
+
+    async def test_db_insert_failure_deletes_r2_object(self):
+        """If D1 insert fails after R2 upload, the orphaned R2 object must be deleted."""
+        r2 = MockR2Bucket()
+        insert_stmt = make_stmt()
+        insert_stmt.bind.return_value.run.side_effect = Exception("D1 write error")
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),
+                insert_stmt,
+            ]),
+            r2=r2,
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, self._upload_req(), env)
+        assert resp.status == 500
+        # Compensating delete must have been called
+        r2.delete.assert_called_once()
+
+    async def test_empty_file_bytes_returns_400(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=MockRow(id=ACTIVITY_ID))]))
+        body = {"title": "Empty", "file": {"filename": "empty.pdf", "bytes": []}}
+        req = MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials",
+            headers={"Content-Type": "application/json", "Authorization": f"Bearer {_token()}"},
+            body=json.dumps(body),
+        )
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 400
+
+    async def test_invalid_json_returns_400(self):
+        req = MockRequest(
+            method="POST",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials",
+            headers={"Content-Type": "application/json", "Authorization": f"Bearer {_token()}"},
+            body="not-json",
+        )
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=MockRow(id=ACTIVITY_ID))]))
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 400
+
+    async def test_description_is_optional(self):
+        r2 = MockR2Bucket()
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=MockRow(id=ACTIVITY_ID)),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        req = self._upload_req(description="")
+        resp = await materials.upload_material(ACTIVITY_ID, req, env)
+        assert resp.status == 200
+
+
+# ---------------------------------------------------------------------------
+# delete_material
+# ---------------------------------------------------------------------------
+
+class TestDeleteMaterial:
+    """DELETE /api/activities/:activity_id/materials/:mid"""
+
+    def _req(self, activity_id=ACTIVITY_ID, mid=MATERIAL_ID, uid=USER_ID):
+        return MockRequest(
+            method="DELETE",
+            url=f"http://localhost/api/activities/{activity_id}/materials/{mid}",
+            headers={"Authorization": f"Bearer {_token(uid)}"},
+        )
+
+    async def test_no_auth_returns_401(self):
+        env = _make_env_with_r2()
+        req = MockRequest(method="DELETE",
+                          url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials/{MATERIAL_ID}")
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, req, env)
+        assert resp.status == 401
+
+    async def test_material_not_found_returns_404(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=None)]))
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 404
+
+    async def test_uploader_can_delete(self):
+        r2 = MockR2Bucket()
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),   # material lookup
+                make_stmt(),                # DELETE
+            ]),
+            r2=r2,
+        )
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(uid=USER_ID), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert data["success"] is True
+        assert data["data"]["id"] == MATERIAL_ID
+
+    async def test_host_can_delete_others_material(self):
+        """Activity host should be able to delete any material in their activity."""
+        r2 = MockR2Bucket()
+        mat_row = _make_material_row(uploaded_by=OTHER_USER_ID)
+        host_act_row = MockRow(host_id=USER_ID)
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),        # material lookup
+                make_stmt(first=host_act_row),   # activity host check
+                make_stmt(),                     # DELETE
+            ]),
+            r2=r2,
+        )
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(uid=USER_ID), env)
+        assert resp.status == 200
+
+    async def test_non_owner_non_host_returns_403(self):
+        mat_row = _make_material_row(uploaded_by=OTHER_USER_ID)
+        act_row = MockRow(host_id=OTHER_USER_ID)   # different host
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),
+                make_stmt(first=act_row),
+            ]),
+        )
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(uid=USER_ID), env)
+        assert resp.status == 403
+
+    async def test_r2_delete_called_after_db_delete(self):
+        r2 = MockR2Bucket()
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        r2.delete.assert_called_once_with(mat_row.file_key)
+
+    async def test_db_delete_failure_returns_500(self):
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        del_stmt = make_stmt()
+        del_stmt.bind.return_value.run.side_effect = Exception("DB error")
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),
+                del_stmt,
+            ]),
+        )
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 500
+
+    async def test_r2_delete_error_does_not_fail_request(self):
+        """R2 delete errors are swallowed – the DB record is already gone."""
+        r2 = MockR2Bucket()
+        r2.delete.side_effect = Exception("R2 error")
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        env = _make_env_with_r2(
+            db=MockDB([
+                make_stmt(first=mat_row),
+                make_stmt(),
+            ]),
+            r2=r2,
+        )
+        # Should still return 200 even though R2 delete raised
+        resp = await materials.delete_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 200
+
+    async def test_activity_id_scoping(self):
+        """Material must belong to the given activity_id (enforced by WHERE clause)."""
+        # Simulate the DB returning None because activity_id doesn't match
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=None)]))
+        resp = await materials.delete_material("wrong-activity", MATERIAL_ID, self._req(), env)
+        assert resp.status == 404
+
+
+# ---------------------------------------------------------------------------
+# download_material
+# ---------------------------------------------------------------------------
+
+class TestDownloadMaterial:
+    """GET /api/activities/:activity_id/materials/:mid/download"""
+
+    def _req(self, activity_id=ACTIVITY_ID, mid=MATERIAL_ID, uid=USER_ID):
+        return MockRequest(
+            method="GET",
+            url=f"http://localhost/api/activities/{activity_id}/materials/{mid}/download",
+            headers={"Authorization": f"Bearer {_token(uid)}"},
+        )
+
+    async def test_no_auth_returns_401(self):
+        env = _make_env_with_r2()
+        req = MockRequest(
+            method="GET",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials/{MATERIAL_ID}/download",
+        )
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, req, env)
+        assert resp.status == 401
+
+    async def test_material_not_found_returns_404(self):
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=None)]))
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 404
+
+    async def test_returns_signed_url(self):
+        signed_url = "https://r2.example.com/signed?token=xyz&expires=3600"
+        r2 = MockR2Bucket(presigned_url=signed_url)
+        mat_row = MockRow(id=MATERIAL_ID, title="Slides",
+                          file_key=f"materials/{ACTIVITY_ID}/uuid_slides.pdf")
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=mat_row)]), r2=r2)
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert data["success"] is True
+        assert data["data"]["download_url"] == signed_url
+        assert data["data"]["id"] == MATERIAL_ID
+        assert data["data"]["title"] == "Slides"
+
+    async def test_expires_in_field_present(self):
+        r2 = MockR2Bucket()
+        mat_row = MockRow(id=MATERIAL_ID, title="Slides",
+                          file_key=f"materials/{ACTIVITY_ID}/uuid_slides.pdf")
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=mat_row)]), r2=r2)
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        data = _parse(resp)
+        assert "expires_in" in data["data"]
+        assert data["data"]["expires_in"] == 3600
+
+    async def test_raw_r2_key_not_in_response(self):
+        """The raw R2 file_key must never appear in the download response."""
+        r2 = MockR2Bucket()
+        file_key = f"materials/{ACTIVITY_ID}/uuid_slides.pdf"
+        mat_row = MockRow(id=MATERIAL_ID, title="Slides", file_key=file_key)
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=mat_row)]), r2=r2)
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        body_str = resp.body
+        assert file_key not in body_str
+
+    async def test_presigned_url_fallback_when_r2_method_missing(self):
+        """When createPresignedUrl is unavailable, fall back to /api/r2/:key proxy URL."""
+        r2 = MockR2Bucket()
+        r2.createPresignedUrl.side_effect = Exception("Method not available")
+        file_key = f"materials/{ACTIVITY_ID}/uuid_slides.pdf"
+        mat_row = MockRow(id=MATERIAL_ID, title="Slides", file_key=file_key)
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=mat_row)]), r2=r2)
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        # Fallback URL should be the internal proxy path
+        assert data["data"]["download_url"] == f"/api/r2/{file_key}"
+
+    async def test_db_error_returns_500(self):
+        stmt = make_stmt()
+        stmt.bind.return_value.first.side_effect = Exception("DB down")
+        env = _make_env_with_r2(db=MockDB([stmt]))
+        resp = await materials.download_material(ACTIVITY_ID, MATERIAL_ID, self._req(), env)
+        assert resp.status == 500
+
+    async def test_activity_id_scoping(self):
+        """Material must belong to the given activity_id."""
+        env = _make_env_with_r2(db=MockDB([make_stmt(first=None)]))
+        resp = await materials.download_material("wrong-activity", MATERIAL_ID, self._req(), env)
+        assert resp.status == 404
+
+
+# ---------------------------------------------------------------------------
+# Helper unit tests
+# ---------------------------------------------------------------------------
+
+class TestHelpers:
+    """Unit tests for internal helper functions."""
+
+    def test_new_id_is_uuid_format(self):
+        uid = materials._new_id()
+        parts = uid.split("-")
+        assert len(parts) == 5
+        assert len(uid) == 36
+
+    def test_new_id_uniqueness(self):
+        ids = {materials._new_id() for _ in range(100)}
+        assert len(ids) == 100
+
+    def test_r2_key_format(self):
+        key = materials._r2_key("act-123", "lecture.pdf")
+        assert key.startswith("materials/act-123/")
+        assert key.endswith("lecture.pdf")
+
+    def test_r2_key_sanitises_special_chars(self):
+        key = materials._r2_key("act-1", "my file (1).pdf")
+        # Spaces and parentheses should be replaced with underscores
+        assert " " not in key
+        assert "(" not in key
+        assert ")" not in key
+
+    def test_r2_key_caps_filename_length(self):
+        long_name = "a" * 300 + ".pdf"
+        key = materials._r2_key("act-1", long_name)
+        # The filename portion after the UUID_ prefix should be ≤ 128 chars
+        filename_part = key.split("/")[-1].split("_", 5)[-1]
+        assert len(filename_part) <= 128
+
+    def test_r2_key_unique_per_call(self):
+        k1 = materials._r2_key("act-1", "file.pdf")
+        k2 = materials._r2_key("act-1", "file.pdf")
+        assert k1 != k2
diff --git a/wrangler.toml b/wrangler.toml
index 761e130..5bc898f 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -19,6 +19,12 @@ database_id = "a0021f2e-a8cc-4e20-8910-3c7290ba47a6"
 migrations_dir = "migrations"
 
 
+# R2 bucket for course materials 
+[[r2_buckets]]
+binding = "R2_BUCKET"
+bucket_name = "alphaonelabs-production"
+
+
 # Virtual Classroom Durable Object
 [[durable_objects.bindings]]
 name = "CLASSROOM_DO"

From a485b2adfe7d99348ae8fe60299bd179e14ac4f9 Mon Sep 17 00:00:00 2001
From: Ananya <ananyagupt2006@gmail.com>
Date: Thu, 18 Jun 2026 00:22:58 +0530
Subject: [PATCH 2/3] course materials

---
 migrations/0006_add_course_materials.sql |  2 +-
 public/course-materials.html             | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/migrations/0006_add_course_materials.sql b/migrations/0006_add_course_materials.sql
index b7d5092..08d3b60 100644
--- a/migrations/0006_add_course_materials.sql
+++ b/migrations/0006_add_course_materials.sql
@@ -1,4 +1,4 @@
--- Migration 0004: Add course_materials table for activity file attachments
+-- Migration 0006: Add course_materials table for activity file attachments
 
 CREATE TABLE IF NOT EXISTS course_materials (
     id          TEXT PRIMARY KEY,
diff --git a/public/course-materials.html b/public/course-materials.html
index 3a85f57..78755b0 100644
--- a/public/course-materials.html
+++ b/public/course-materials.html
@@ -362,7 +362,16 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
       }).then(function (body) {
         var url = body.data && body.data.download_url;
         if (!url) { throw new Error('No download URL returned'); }
-        window.open(url, '_blank', 'noopener,noreferrer');
+        if (url.indexOf('/api/r2/') === 0 && authToken) {
+          url += (url.indexOf('?') === -1 ? '?' : '&') + 'token=' + encodeURIComponent(authToken);
+        }
+        var a = document.createElement('a');
+        a.href = url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
       }).catch(function (e) {
         showToast(e.message || 'Download failed', 'error');
       });

From 776f8db9b8d76be62a8f52173d8181f29f7d44ee Mon Sep 17 00:00:00 2001
From: Ananya <ananyagupt2006@gmail.com>
Date: Thu, 18 Jun 2026 04:06:14 +0530
Subject: [PATCH 3/3] fixes

---
 public/activity.html         |  24 +++---
 public/course-materials.html |  77 ++++++++++++++-----
 public/js/activity.js        | 141 +++++++++++++++++++++++++----------
 src/api/materials.py         |  31 ++++++--
 src/worker.py                |   3 +
 tests/test_api_materials.py  |  92 +++++++++++++++++++++++
 wrangler.toml                |   5 +-
 7 files changed, 295 insertions(+), 78 deletions(-)

diff --git a/public/activity.html b/public/activity.html
index d1f7daa..a29781a 100644
--- a/public/activity.html
+++ b/public/activity.html
@@ -147,8 +147,8 @@ <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
         <i class="fas fa-users absolute bottom-10 right-10 text-6xl"></i>
       </div>
       <div class="relative max-w-[90rem] mx-auto px-4 md:px-6">
-        <nav class="text-teal-100 text-sm mb-6 flex items-center gap-2">
-          <button onclick="backToBrowser()" class="hover:text-white transition flex items-center gap-1">
+          <nav class="text-teal-100 text-sm mb-6 flex items-center gap-2">
+          <button type="button" onclick="backToBrowser()" class="hover:text-white transition flex items-center gap-1">
             <i class="fas fa-arrow-left"></i>Activities
           </button>
           <span>/</span>
@@ -177,18 +177,18 @@ <h3 class="font-bold text-lg mb-4 flex items-center">
     <div class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-20 shadow-sm">
       <div class="max-w-[90rem] mx-auto px-4 md:px-6">
         <div class="flex gap-0 overflow-x-auto" id="tab-bar" role="tablist">
-          <button class="tab-btn active" data-tab="overview" onclick="switchTab('overview')" role="tab">
+          <button type="button" class="tab-btn active" data-tab="overview" onclick="switchTab('overview')" role="tab">
             <i class="fas fa-home mr-2"></i>Overview
           </button>
-          <button class="tab-btn" data-tab="sessions" onclick="switchTab('sessions')" role="tab">
+          <button type="button" class="tab-btn" data-tab="sessions" onclick="switchTab('sessions')" role="tab">
             <i class="fas fa-calendar mr-2"></i>Sessions
             <span id="tab-sessions-count" class="ml-1.5 text-xs bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300 px-1.5 py-0.5 rounded-full hidden"></span>
           </button>
-          <button class="tab-btn" data-tab="materials" onclick="switchTab('materials')" role="tab">
+          <button type="button" class="tab-btn" data-tab="materials" onclick="switchTab('materials')" role="tab">
             <i class="fas fa-folder-open mr-2"></i>Materials
             <span id="tab-materials-count" class="ml-1.5 text-xs bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 px-1.5 py-0.5 rounded-full hidden"></span>
           </button>
-          <button class="tab-btn" data-tab="host" onclick="switchTab('host')" role="tab">
+          <button type="button" class="tab-btn" data-tab="host" onclick="switchTab('host')" role="tab">
             <i class="fas fa-user-tie mr-2"></i>About Host
           </button>
         </div>
@@ -233,7 +233,7 @@ <h3 class="font-bold text-2xl text-gray-800 dark:text-gray-200 mb-2">Join to Acc
               <p class="text-gray-600 dark:text-gray-300 text-sm mb-6 max-w-sm mx-auto">
                 Session locations and descriptions are encrypted and only revealed to participants.
               </p>
-              <button id="btn-join" onclick="joinActivity()"
+               <button type="button" id="btn-join" onclick="joinActivity()"
                 class="bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 text-white font-bold px-8 py-3 rounded-xl shadow-lg hover:shadow-xl transition-all">
                 <i class="fas fa-user-plus mr-2"></i>Join Activity - Free
               </button>
@@ -327,7 +327,7 @@ <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 flex items-center
               Course Materials
               <span id="mat-count-label" class="text-sm font-normal text-gray-500 dark:text-gray-400"></span>
             </h2>
-            <button onclick="loadMaterials()" title="Refresh"
+            <button type="button" onclick="loadMaterials()" title="Refresh"
               class="text-sm text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300 flex items-center gap-1 transition-colors">
               <i class="fas fa-sync-alt"></i>
             </button>
@@ -394,18 +394,18 @@ <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200 mb-6 flex items-ce
   </div>
 
   <!-- ==================== CONFIRM DELETE MODAL ==================== -->
-  <div id="mat-confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+      <div id="mat-confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" role="dialog" aria-modal="true" aria-labelledby="mat-confirm-title">
     <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-sm w-full">
-      <h3 class="font-semibold text-lg mb-2 text-gray-800 dark:text-gray-200">Delete Material</h3>
+      <h3 id="mat-confirm-title" class="font-semibold text-lg mb-2 text-gray-800 dark:text-gray-200">Delete Material</h3>
       <p id="mat-confirm-msg" class="text-sm text-gray-600 dark:text-gray-300 mb-6">
         Are you sure you want to delete this material? This action cannot be undone.
       </p>
       <div class="flex gap-3 justify-end">
-        <button onclick="closeDeleteModal()"
+        <button type="button" onclick="closeDeleteModal()"
           class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-700 dark:text-gray-300">
           Cancel
         </button>
-        <button id="mat-confirm-ok"
+        <button type="button" id="mat-confirm-ok"
           class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-colors">
           Delete
         </button>
diff --git a/public/course-materials.html b/public/course-materials.html
index 78755b0..cb9e0f5 100644
--- a/public/course-materials.html
+++ b/public/course-materials.html
@@ -45,7 +45,7 @@
         <a href="/activity.html" class="text-white/80 hover:text-white text-sm">
           <i class="fas fa-arrow-left mr-1"></i>Back to Activities
         </a>
-        <button id="dark-toggle" class="text-white/80 hover:text-white text-sm" title="Toggle dark mode">
+        <button type="button" id="dark-toggle" class="text-white/80 hover:text-white text-sm" title="Toggle dark mode">
           <i class="fas fa-moon"></i>
         </button>
       </div>
@@ -90,9 +90,9 @@ <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
         </div>
 
         <div>
-          <label for="mat-file" class="block text-sm font-medium mb-1">
-            File <span class="text-red-500">*</span>
-          </label>
+           <label for="mat-file" class="block text-sm font-medium mb-1">
+             File <span class="text-red-500">*</span>
+           </label>
           <div id="drop-zone"
             class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6
                    text-center cursor-pointer hover:border-teal-500 transition-colors">
@@ -102,7 +102,7 @@ <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
               <span class="text-teal-600 font-medium underline cursor-pointer" id="browse-link">browse</span>
             </p>
             <p id="selected-file-name" class="mt-2 text-xs text-teal-700 dark:text-teal-400 font-medium hidden"></p>
-            <input id="mat-file" type="file" class="hidden" />
+             <input id="mat-file" type="file" class="hidden" accept=".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.zip" />
           </div>
         </div>
 
@@ -135,7 +135,7 @@ <h2 class="text-lg font-semibold flex items-center gap-2">
           Materials
           <span id="materials-count" class="text-sm font-normal text-gray-500 dark:text-gray-400"></span>
         </h2>
-        <button id="refresh-btn" class="text-sm text-teal-600 hover:text-teal-700 flex items-center gap-1" title="Refresh">
+        <button type="button" id="refresh-btn" class="text-sm text-teal-600 hover:text-teal-700 flex items-center gap-1" title="Refresh">
           <i class="fas fa-sync-alt"></i>
         </button>
       </div>
@@ -177,19 +177,19 @@ <h2 class="text-lg font-semibold flex items-center gap-2">
   </div>
 
   <!-- Confirm modal -->
-  <div id="confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+  <div id="confirm-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4" role="dialog" aria-modal="true" aria-labelledby="confirm-modal-title">
     <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-6 max-w-sm w-full">
-      <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
+      <h3 id="confirm-modal-title" class="font-semibold text-lg mb-2">Delete Material</h3>
       <p id="confirm-msg" class="text-sm text-gray-600 dark:text-gray-300 mb-6">
         Are you sure you want to delete this material? This action cannot be undone.
       </p>
       <div class="flex gap-3 justify-end">
-        <button id="confirm-cancel"
+        <button type="button" id="confirm-cancel"
           class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600
                  text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
           Cancel
         </button>
-        <button id="confirm-ok"
+        <button type="button" id="confirm-ok"
           class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-colors">
           Delete
         </button>
@@ -360,11 +360,29 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
           return body;
         });
       }).then(function (body) {
-        var url = body.data && body.data.download_url;
+        var data = body.data || body;
+        var url = data && data.download_url;
+        var filename = (data && (data.filename || data.title)) || 'download';
         if (!url) { throw new Error('No download URL returned'); }
+
+        // For /api/r2/ proxy URLs, avoid putting tokens in query params.
         if (url.indexOf('/api/r2/') === 0 && authToken) {
-          url += (url.indexOf('?') === -1 ? '?' : '&') + 'token=' + encodeURIComponent(authToken);
+          return fetch(url, { headers: authHeaders() })
+            .then(function (res2) {
+              if (!res2.ok) { throw new Error('Download failed'); }
+              return res2.blob();
+            }).then(function (blob) {
+              var objectUrl = URL.createObjectURL(blob);
+              var a = document.createElement('a');
+              a.href = objectUrl;
+              a.download = filename;
+              document.body.appendChild(a);
+              a.click();
+              document.body.removeChild(a);
+              URL.revokeObjectURL(objectUrl);
+            });
         }
+
         var a = document.createElement('a');
         a.href = url;
         a.target = '_blank';
@@ -383,7 +401,8 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
     }
 
     function formatDate(iso) {
@@ -399,9 +418,10 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
       li.dataset.id = mat.id;
 
       var isOwner = currentUser && (mat.uploaded_by === currentUser.id);
+      var safeId = escHtml(mat.id);
 
       var deleteBtn = isOwner
-        ? '<button class="delete-btn inline-flex items-center gap-1.5 bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/60 text-red-600 dark:text-red-400 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + mat.id + '" data-title="' + escHtml(mat.title) + '" title="Delete"><i class="fas fa-trash-alt"></i><span class="hidden sm:inline ml-1">Delete</span></button>'
+        ? '<button class="delete-btn inline-flex items-center gap-1.5 bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-900/60 text-red-600 dark:text-red-400 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + safeId + '" data-title="' + escHtml(mat.title) + '" title="Delete"><i class="fas fa-trash-alt"></i><span class="hidden sm:inline ml-1">Delete</span></button>'
         : '';
 
       var descHtml = mat.description
@@ -415,8 +435,8 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
           descHtml +
           '<p class="text-xs text-gray-400 dark:text-gray-500 mt-1"><i class="fas fa-calendar-alt mr-1"></i>' + formatDate(mat.created_at) + '</p>' +
         '</div>' +
-        '<div class="flex-shrink-0 flex items-center gap-2">' +
-          '<button class="download-btn inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + mat.id + '" title="Download"><i class="fas fa-download"></i><span class="hidden sm:inline ml-1">Download</span></button>' +
+          '<div class="flex-shrink-0 flex items-center gap-2">' +
+          '<button class="download-btn inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors" data-id="' + safeId + '" title="Download"><i class="fas fa-download"></i><span class="hidden sm:inline ml-1">Download</span></button>' +
           deleteBtn +
         '</div>';
 
@@ -479,6 +499,7 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
     }
 
     function animateProgress() {
+      // Simulated progress – avoids showing a static bar for small uploads.
       var pct = 0;
       var iv = setInterval(function () {
         pct = Math.min(pct + Math.random() * 15, 90);
@@ -503,6 +524,13 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
       if (!title) { setUploadError('Title is required.'); return; }
       if (!file)  { setUploadError('Please select a file to upload.'); return; }
 
+      // Client-side size guard to fail fast on very large files.
+      var MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB – keep in sync with backend
+      if (file.size > MAX_FILE_SIZE) {
+        setUploadError('File is too large. Maximum size is 50MB.');
+        return;
+      }
+
       var fd = new FormData();
       fd.append('title', title);
       fd.append('description', desc);
@@ -546,6 +574,8 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
     dropZone.addEventListener('dragleave', function () {
       dropZone.classList.remove('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/10');
     });
+    var droppedFile = null;
+
     dropZone.addEventListener('drop', function (e) {
       e.preventDefault();
       dropZone.classList.remove('border-teal-500', 'bg-teal-50', 'dark:bg-teal-900/10');
@@ -555,7 +585,11 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
           var dt = new DataTransfer();
           dt.items.add(f);
           matFile.files = dt.files;
-        } catch (ex) { /* Safari fallback – file input stays empty */ }
+          droppedFile = null;
+        } catch (ex) {
+          // Safari fallback – DataTransfer not supported, remember dropped file
+          droppedFile = f;
+        }
         selectedFileName.textContent = 'Selected: ' + f.name + ' (' + (f.size / 1024).toFixed(1) + ' KB)';
         selectedFileName.classList.remove('hidden');
       }
@@ -563,6 +597,15 @@ <h3 class="font-semibold text-lg mb-2">Delete Material</h3>
 
     refreshBtn.addEventListener('click', function () { loadMaterials(); });
 
+    // Close confirm modal on Escape
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== 'Escape') { return; }
+      if (!confirmModal.classList.contains('hidden')) {
+        confirmModal.classList.add('hidden');
+        pendingDeleteId = null;
+      }
+    });
+
     // Load activity title
     function loadActivityTitle() {
       fetch(API_BASE + '/api/activities/' + activityId, { headers: authHeaders() })
diff --git a/public/js/activity.js b/public/js/activity.js
index 0d0c6c3..d19eb35 100644
--- a/public/js/activity.js
+++ b/public/js/activity.js
@@ -39,6 +39,16 @@ function _currentUser() {
   return { _opaque: true };
 }
 
+// ── HTML escape helper (for XSS safety) ─────────────────────
+function escHtml(str) {
+  return String(str ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 // ── Toast ──────────────────────────────────────────────────
 function showToast(msg, type = 'success') {
   const el   = document.getElementById('act-toast');
@@ -138,22 +148,27 @@ function renderActivityCard(act) {
   };
   const typeC = typeColours[act.type] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
   const fmtC  = fmtColours[act.format] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+  const safeId    = escHtml(act.id);
+  const safeTitle = escHtml(act.title || '');
+  const safeDesc  = escHtml(act.description || 'No description provided.');
+  const safeType  = escHtml(act.type || 'activity');
+  const safeFmt   = escHtml((act.format || 'online').replace('_', ' '));
   const tags  = (act.tags || []).slice(0, 3).map(t =>
-    `<span class="badge bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 text-xs">${t}</span>`
+    `<span class="badge bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 text-xs">${escHtml(t)}</span>`
   ).join('');
 
   return `
     <article class="card-hover rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden cursor-pointer"
-      onclick="openActivity('${act.id}')">
+      onclick="openActivity('${safeId}')">
       <div class="p-6">
         <div class="flex items-start justify-between gap-3 mb-3">
-          <h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg leading-snug line-clamp-2">${act.title}</h3>
-          <span class="badge ${typeC} shrink-0">${act.type || 'activity'}</span>
+          <h3 class="font-bold text-gray-900 dark:text-gray-100 text-lg leading-snug line-clamp-2">${safeTitle}</h3>
+          <span class="badge ${typeC} shrink-0">${safeType}</span>
         </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mb-4">${act.description || 'No description provided.'}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mb-4">${safeDesc}</p>
         <div class="flex flex-wrap gap-2 mb-4">${tags}</div>
         <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-500">
-          <span class="badge ${fmtC}">${(act.format || 'online').replace('_', ' ')}</span>
+          <span class="badge ${fmtC}">${safeFmt}</span>
           <span><i class="fas fa-users mr-1"></i>${act.participant_count ?? act.member_count ?? 0} enrolled</span>
         </div>
       </div>
@@ -180,17 +195,18 @@ function buildTagCloud(activities) {
   const cloud = document.getElementById('tag-cloud');
   if (!cloud) return;
   const sorted = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 20);
-  cloud.innerHTML = sorted.map(([tag]) =>
-    `<button class="tag-pill badge bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900/40 text-xs"
-      onclick="toggleTag('${tag}')">${tag}</button>`
-  ).join('');
+  cloud.innerHTML = sorted.map(([tag]) => {
+    const safeTag = escHtml(tag);
+    return `<button class="tag-pill badge bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-teal-100 dark:hover:bg-teal-900/40 text-xs" data-tag="${safeTag}">${safeTag}</button>`;
+  }).join('');
 }
 
 function toggleTag(tag) {
   if (_activeTags.has(tag)) _activeTags.delete(tag);
   else _activeTags.add(tag);
   document.querySelectorAll('.tag-pill').forEach(b => {
-    b.classList.toggle('active', _activeTags.has(b.textContent.trim()));
+    const t = b.dataset.tag || b.textContent.trim();
+    b.classList.toggle('active', _activeTags.has(t));
   });
   applyFilters();
 }
@@ -243,11 +259,14 @@ function renderSimilarActivities(similar) {
   if (!similar.length) { card && card.classList.add('hidden'); return; }
   card && card.classList.remove('hidden');
   list.innerHTML = similar.map(a => `
+    ${'' /* escape dynamic fields */}
+    ${(() => { const sid = escHtml(a.id); const stitle = escHtml(a.title || ''); const stype = escHtml(a.type || ''); const sfmt = escHtml((a.format || '').replace('_', ' ')); return `
     <li class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
-      onclick="openActivity('${a.id}')">
-      <p class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-1">${a.title}</p>
-      <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">${a.type || ''} · ${(a.format || '').replace('_', ' ')}</p>
-    </li>`).join('');
+      onclick="openActivity('${sid}')">
+      <p class="text-sm font-medium text-gray-800 dark:text-gray-200 line-clamp-1">${stitle}</p>
+      <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">${stype} · ${sfmt}</p>
+    </li>`; })()}
+  `).join('');
 }
 
 // ── Open activity detail ───────────────────────────────────
@@ -358,7 +377,7 @@ async function loadActivityDetail(id) {
     }
 
     // ── Sessions tab ──
-    const sessionsEl = document.getElementById('sessions-list-tab');
+  const sessionsEl = document.getElementById('sessions-list-tab');
     const sessEmpty  = document.getElementById('sessions-empty');
     const sessCount  = document.getElementById('tab-sessions-count');
     if (sessCount) {
@@ -371,16 +390,21 @@ async function loadActivityDetail(id) {
         sessionsEl.innerHTML = '';
       } else {
         sessEmpty && sessEmpty.classList.add('hidden');
-        sessionsEl.innerHTML = sessions.map(s => `
+        sessionsEl.innerHTML = sessions.map(s => {
+          const title = escHtml(s.title || 'Session');
+          const desc  = s.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">${escHtml(s.description)}</p>` : '';
+          const when  = s.start_time ? `<span class="text-xs text-gray-400 shrink-0">${escHtml(formatDate(s.start_time))}</span>` : '';
+          return `
           <li class="rounded-xl p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm">
             <div class="flex items-start justify-between gap-3">
               <div>
-                <p class="font-semibold text-gray-800 dark:text-gray-200">${s.title || 'Session'}</p>
-                ${s.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">${s.description}</p>` : ''}
+                <p class="font-semibold text-gray-800 dark:text-gray-200">${title}</p>
+                ${desc}
               </div>
-              ${s.start_time ? `<span class="text-xs text-gray-400 shrink-0">${formatDate(s.start_time)}</span>` : ''}
+              ${when}
             </div>
-          </li>`).join('');
+          </li>`;
+        }).join('');
       }
     }
 
@@ -491,13 +515,17 @@ function renderMaterialItem(m) {
   _matCache[m.id] = m;
 
   const { icon, colour } = getFileIcon(m.title);
+  const safeId    = escHtml(m.id);
+  const safeTitle = escHtml(m.title || '');
+  const safeDesc  = m.description ? escHtml(m.description) : '';
+  const safeDate  = escHtml(formatDate(m.created_at));
   const hostControls = _isHost ? `
     <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
-      <button data-action="edit" data-mid="${m.id}"
+      <button data-action="edit" data-mid="${safeId}"
         class="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors">
         <i class="fas fa-pencil-alt"></i> Edit
       </button>
-      <button data-action="delete" data-mid="${m.id}"
+      <button data-action="delete" data-mid="${safeId}"
         class="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 text-red-600 dark:text-red-400 transition-colors">
         <i class="fas fa-trash-alt"></i> Delete
       </button>
@@ -510,14 +538,14 @@ function renderMaterialItem(m) {
           <i class="fas ${icon} text-2xl ${colour}"></i>
         </div>
         <div class="flex-1 min-w-0">
-          <div class="flex items-start justify-between gap-3">
-            <div class="min-w-0">
-              <p class="font-semibold text-gray-800 dark:text-gray-200 truncate">${m.title}</p>
-              ${m.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">${m.description}</p>` : ''}
-              <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">${formatDate(m.created_at)}</p>
-            </div>
-            <button data-action="download" data-mid="${m.id}"
-              class="shrink-0 flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium transition-colors">
+            <div class="flex items-start justify-between gap-3">
+             <div class="min-w-0">
+               <p class="font-semibold text-gray-800 dark:text-gray-200 truncate">${safeTitle}</p>
+               ${m.description ? `<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 line-clamp-2">${safeDesc}</p>` : ''}
+               <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">${safeDate}</p>
+             </div>
+             <button data-action="download" data-mid="${safeId}"
+               class="shrink-0 flex items-center gap-2 px-4 py-2 rounded-lg bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium transition-colors">
               <i class="fas fa-download"></i>
               <span class="hidden sm:inline">Download</span>
             </button>
@@ -549,16 +577,28 @@ async function downloadMaterial(mid) {
     const filename = payload.filename || payload.title || 'download';
 
     if (url.startsWith('/api/r2/')) {
-      url = `${url}?token=${encodeURIComponent(token)}`;
+      // Use authenticated fetch + blob to avoid putting tokens in query params
+      const proxied = await fetch(url, { headers: { 'Authorization': `Bearer ${token}` } });
+      if (!proxied.ok) throw new Error('Download failed');
+      const blob = await proxied.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href     = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(objectUrl);
+    } else {
+      const a = document.createElement('a');
+      a.href     = url;
+      a.download = filename;          // sets the saved filename in the browser
+      a.target   = '_blank';
+      a.rel      = 'noopener noreferrer';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
     }
-    const a = document.createElement('a');
-    a.href     = url;
-    a.download = filename;          // sets the saved filename in the browser
-    a.target   = '_blank';
-    a.rel      = 'noopener noreferrer';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
     showToast('Download started!', 'success');
   } catch (e) {
     showToast(e.message || 'Download failed', 'error');
@@ -778,6 +818,14 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('filter-type')?.addEventListener('change', applyFilters);
   document.getElementById('filter-format')?.addEventListener('change', applyFilters);
 
+  // Tag cloud: event delegation (avoids unsafe onclick string injection)
+  document.getElementById('tag-cloud')?.addEventListener('click', e => {
+    const btn = e.target.closest('.tag-pill');
+    if (!btn) return;
+    const tag = btn.dataset.tag || btn.textContent.trim();
+    if (tag) toggleTag(tag);
+  });
+
   // Event delegation for material list buttons (download / edit / delete)
   // Using delegation avoids onclick-in-HTML encoding issues with special chars
   document.getElementById('mat-list')?.addEventListener('click', e => {
@@ -809,4 +857,17 @@ document.addEventListener('DOMContentLoaded', () => {
   const params = new URLSearchParams(window.location.search);
   const actId  = params.get('id');
   if (actId) openActivity(actId);
+
+  // Global Escape key handling for modals
+  document.addEventListener('keydown', e => {
+    if (e.key !== 'Escape') return;
+    const confirmModal = document.getElementById('mat-confirm-modal');
+    const editModal    = document.getElementById('mat-edit-modal');
+    if (confirmModal && !confirmModal.classList.contains('hidden')) {
+      closeDeleteModal();
+    }
+    if (editModal && !editModal.classList.contains('hidden')) {
+      closeEditModal();
+    }
+  });
 });
\ No newline at end of file
diff --git a/src/api/materials.py b/src/api/materials.py
index ac5b5a1..7ab8b4d 100644
--- a/src/api/materials.py
+++ b/src/api/materials.py
@@ -98,7 +98,7 @@ async def _parse_multipart(req):
                 # It's a File/Blob – read raw bytes.
                 try:
                     arr_buf = await value.arrayBuffer()
-                    import js  # noqa: PLC0415 – CF runtime only
+                    import js  
                     raw = bytes(js.Uint8Array.new(arr_buf))
                 except Exception:
                     raw = b""
@@ -115,7 +115,7 @@ async def _parse_multipart(req):
             if filename is not None:
                 try:
                     arr_buf = await val.arrayBuffer()
-                    import js  # noqa: PLC0415
+                    import js  
                     raw = bytes(js.Uint8Array.new(arr_buf))
                 except Exception:
                     raw = b""
@@ -142,7 +142,15 @@ async def _upload_to_r2(env, key: str, data: bytes, content_type: str = "applica
         import js                       # noqa: PLC0415
         http_meta = {"contentType": content_type}
         if original_filename:
-            http_meta["contentDisposition"] = f'attachment; filename="{original_filename}"'
+            # Sanitize filename for Content-Disposition to avoid header injection.
+            safe_fn = (
+                str(original_filename)
+                .replace("\\", "_")
+                .replace('"', "_")
+                .replace("\r", "")
+                .replace("\n", "")
+            )
+            http_meta["contentDisposition"] = f'attachment; filename="{safe_fn}"'
         options = to_js(
             {"httpMetadata": http_meta},
             dict_converter=js.Object.fromEntries,
@@ -274,10 +282,20 @@ async def upload_material(activity_id: str, req, env):
     if not file_field:
         return w.err("file is required", 400)
 
-    # Support both dict (multipart) and raw bytes (test injection)
+    # Support both dict (multipart/JSON) and raw bytes (test injection)
     if isinstance(file_field, dict):
         filename = file_field.get("filename") or "upload"
-        file_bytes = file_field.get("bytes") or b""
+        raw_bytes = file_field.get("bytes") or b""
+        # JSON fallback may provide a list of ints; normalise to bytes.
+        if isinstance(raw_bytes, list):
+            try:
+                file_bytes = bytes(raw_bytes)
+            except Exception:
+                return w.err("Invalid file bytes", 400)
+        elif isinstance(raw_bytes, (bytes, bytearray)):
+            file_bytes = bytes(raw_bytes)
+        else:
+            return w.err("Invalid file bytes", 400)
         content_type = file_field.get("content_type") or "application/octet-stream"
     elif isinstance(file_field, (bytes, bytearray)):
         filename = fields.get("filename") or "upload"
@@ -449,7 +467,8 @@ async def download_material(activity_id: str, mid: str, req, env):
     """GET /api/activities/:activity_id/materials/:mid/download
 
     Returns a time-limited signed URL for the material's R2 object.
-    The raw R2 key is never exposed to the client.
+    Prefer presigned R2 URLs; if presigning isn't available, falls back to
+    the authenticated ``/api/r2/{key}`` proxy implemented in the worker.
     Requires authentication.
     """
     w = _worker()
diff --git a/src/worker.py b/src/worker.py
index c7f57b7..e02e139 100644
--- a/src/worker.py
+++ b/src/worker.py
@@ -2736,6 +2736,9 @@ async def _dispatch(request, env):
         # Matches /api/r2/<anything> (the key may contain slashes)
         if path.startswith("/api/r2/") and method == "GET":
             r2_key = path[len("/api/r2/"):]
+            # Only allow course-material keys under the expected prefix
+            if not r2_key.startswith("materials/"):
+                return err("Invalid R2 key", 400)
             # Accept token from Authorization header OR ?token= query param
             # (browser <a> navigation can't set headers, so we allow query param)
             auth_header = request.headers.get("Authorization") or ""
diff --git a/tests/test_api_materials.py b/tests/test_api_materials.py
index d5f9688..742c265 100644
--- a/tests/test_api_materials.py
+++ b/tests/test_api_materials.py
@@ -620,6 +620,98 @@ async def test_activity_id_scoping(self):
         assert resp.status == 404
 
 
+# ---------------------------------------------------------------------------
+# update_material
+# ---------------------------------------------------------------------------
+
+
+class TestUpdateMaterial:
+    """PATCH /api/activities/:activity_id/materials/:mid"""
+
+    def _req(self, activity_id=ACTIVITY_ID, mid=MATERIAL_ID, uid=USER_ID, body=None):
+        return MockRequest(
+            method="PATCH",
+            url=f"http://localhost/api/activities/{activity_id}/materials/{mid}",
+            headers={"Authorization": f"Bearer {_token(uid)}", "Content-Type": "application/json"},
+            body=json.dumps(body) if body is not None else json.dumps({}),
+        )
+
+    async def test_no_auth_returns_401(self):
+        req = MockRequest(
+            method="PATCH",
+            url=f"http://localhost/api/activities/{ACTIVITY_ID}/materials/{MATERIAL_ID}",
+            headers={"Content-Type": "application/json"},
+            body=json.dumps({"title": "New", "description": "Updated"}),
+        )
+        env = _make_env_with_r2(db=MockDB([]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, req, env)
+        assert resp.status == 401
+
+    async def test_material_not_found_returns_404(self):
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=None),  # material lookup
+        ]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(body={"title": "New"}), env)
+        assert resp.status == 404
+
+    async def test_non_owner_non_host_returns_403(self):
+        mat_row = _make_material_row(uploaded_by=OTHER_USER_ID)
+        act_row = MockRow(host_id=OTHER_USER_ID)
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=mat_row),   # material lookup
+            make_stmt(first=act_row),   # host lookup
+        ]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(uid=USER_ID, body={"title": "New"}), env)
+        assert resp.status == 403
+
+    async def test_missing_title_returns_400(self):
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=mat_row),
+        ]))
+        # Empty title should be rejected
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(body={"title": " "}), env)
+        assert resp.status == 400
+        assert "title" in _parse(resp)["error"].lower()
+
+    async def test_uploader_can_update(self):
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        update_stmt = make_stmt()
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=mat_row),  # material lookup
+            update_stmt,               # UPDATE
+        ]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(body={"title": "New title", "description": "Updated"}), env)
+        assert resp.status == 200
+        data = _parse(resp)
+        assert data["success"] is True
+        assert data["data"]["id"] == MATERIAL_ID
+        assert data["data"]["title"] == "New title"
+
+    async def test_host_can_update_others_material(self):
+        mat_row = _make_material_row(uploaded_by=OTHER_USER_ID)
+        host_act_row = MockRow(host_id=USER_ID)
+        update_stmt = make_stmt()
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=mat_row),      # material lookup
+            make_stmt(first=host_act_row), # host lookup
+            update_stmt,                   # UPDATE
+        ]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(body={"title": "New"}), env)
+        assert resp.status == 200
+
+    async def test_db_error_returns_500(self):
+        mat_row = _make_material_row(uploaded_by=USER_ID)
+        bad_stmt = make_stmt()
+        bad_stmt.bind.return_value.run.side_effect = Exception("DB down")
+        env = _make_env_with_r2(db=MockDB([
+            make_stmt(first=mat_row),
+            bad_stmt,
+        ]))
+        resp = await materials.update_material(ACTIVITY_ID, MATERIAL_ID, self._req(body={"title": "New"}), env)
+        assert resp.status == 500
+
+
 # ---------------------------------------------------------------------------
 # Helper unit tests
 # ---------------------------------------------------------------------------
diff --git a/wrangler.toml b/wrangler.toml
index 5bc898f..859d670 100644
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -18,12 +18,11 @@ database_name = "education_db"
 database_id = "a0021f2e-a8cc-4e20-8910-3c7290ba47a6"
 migrations_dir = "migrations"
 
-
-# R2 bucket for course materials 
+# R2 bucket 
 [[r2_buckets]]
 binding = "R2_BUCKET"
 bucket_name = "alphaonelabs-production"
-
+preview_bucket_name = "alphaonelabs-preview"
 
 # Virtual Classroom Durable Object
 [[durable_objects.bindings]]