diff --git a/firestore.rules b/firestore.rules
index 61f17e7c..4d074ea0 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -99,5 +99,12 @@ service cloud.firestore {
     match /profiles/{userId} {
       allow read, write: if isAuthenticated() && request.auth.uid == userId;
     }
+
+    match /feedback/{feedbackId} {
+      allow read: if isMemberOrAdmin;
+      allow list: if isMemberOrAdmin;
+      allow get: if isMemberOrAdmin();
+      allow update, delete: if isMemberOrAdmin();
+    }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 851bbd67..0103dc5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@types/katex": "^0.16.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "dompurify": "^3.4.11",
         "dotenv": "^16.4.5",
         "editorjs-alert": "^1.1.4",
         "editorjs-latex": "^1.0.5",
@@ -47,6 +48,7 @@
         "highlight.js": "^11.10.0",
         "katex": "^0.16.11",
         "lucide-react": "^0.525.0",
+        "marked": "^18.0.5",
         "next": "^14.2.5",
         "next-themes": "^0.4.4",
         "obscenity": "^0.4.3",
@@ -2720,8 +2722,7 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
@@ -4552,11 +4553,10 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
       "license": "(MPL-2.0 OR Apache-2.0)",
-      "peer": true,
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
@@ -7658,16 +7658,15 @@
       "license": "ISC"
     },
     "node_modules/marked": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
-      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">= 20"
       }
     },
     "node_modules/math-intrinsics": {
@@ -7816,6 +7815,29 @@
         "marked": "14.0.0"
       }
     },
+    "node_modules/monaco-editor/node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/monaco-editor/node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/morgan": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
diff --git a/package.json b/package.json
index e180b510..9ba74ca1 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@types/katex": "^0.16.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.11",
     "dotenv": "^16.4.5",
     "editorjs-alert": "^1.1.4",
     "editorjs-latex": "^1.0.5",
@@ -50,6 +51,7 @@
     "highlight.js": "^11.10.0",
     "katex": "^0.16.11",
     "lucide-react": "^0.525.0",
+    "marked": "^18.0.5",
     "next": "^14.2.5",
     "next-themes": "^0.4.4",
     "obscenity": "^0.4.3",
diff --git a/public/llms.txt b/public/llms.txt
new file mode 100644
index 00000000..c74626e8
--- /dev/null
+++ b/public/llms.txt
@@ -0,0 +1,15 @@
+# FiveHive
+
+> Free AP (Advanced Placement) study resources — study guides, unit notes, and practice questions — written by AP students who scored 5s, for AP students. By AP students. For AP students.
+
+FiveHive helps high school students prepare for College Board AP exams. Content is organized by subject, then by unit, then by chapter, covering courses such as AP Biology, AP Chemistry, AP Calculus, AP US History, and more.
+
+## Key pages
+- [Subject library](https://www.fivehive.org/library): Browse all AP subjects covered on FiveHive.
+- [Study guides](https://www.fivehive.org/guides): Exam study guides and review materials.
+- [Apply to contribute](https://www.fivehive.org/apply): Join the FiveHive team of student contributors.
+
+## Notes
+- Subject study guides live at /subject/{subject-slug} and chapters at /subject/{subject-slug}/{unit}/chapter/{id}/{title}.
+- Content is free and written/reviewed by AP students.
+- See https://www.fivehive.org/sitemap.xml for the full list of indexable pages.
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
index a742a559..c51531a5 100644
--- a/src/app/account/page.tsx
+++ b/src/app/account/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 import "@/styles/globals.css";
 import React, { useEffect, useState, type FormEvent } from "react";
diff --git a/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
new file mode 100644
index 00000000..905bd0e4
--- /dev/null
+++ b/src/app/admin/feedback/[slug]/FeedbackDetailsClient.tsx
@@ -0,0 +1,308 @@
+/* eslint-disable */
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { db } from '@/lib/firebase';
+import { doc, getDoc, updateDoc, setDoc } from 'firebase/firestore';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+interface FeedbackDetailsClientProps {
+  slug: string;
+  config: {
+    gitHubAccessToken: string;
+    gitHubRepoOwner: string;
+    gitHubRepoName: string;
+  };
+}
+
+function parseMarkdown(text: string): string {
+  if (!text) return '';
+  const rawHtml = marked(text) as string;
+  return DOMPurify.sanitize(rawHtml);
+}
+
+interface FeedbackItem {
+  type: string;
+  title: string;
+  bugType?: string;
+  bugUrl?: string;
+  message: string;
+  email: string;
+  attachedImage?: string;
+  isResolved?: boolean;
+  createdAt?: {
+    seconds: number;
+    nanoseconds: number;
+  };
+  // Feature request specific fields
+  featureProblem?: string;
+  featureAlternatives?: string;
+  featureSolution?: string;
+  featureContextUrl?: string;
+}
+
+export default function FeedbackDetailsClient({ slug, config }: FeedbackDetailsClientProps) {
+  const router = useRouter();
+  const [bug, setBug] = useState<FeedbackItem | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [isCreatingIssue, setIsCreatingIssue] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  useEffect(() => {
+    if (!slug) return;
+
+    const fetchSingleFeedback = async () => {
+      try {
+        const docRef = doc(db, 'feedback', slug);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+          setBug(docSnap.data() as FeedbackItem);
+        } else {
+          console.error("No such document found!");
+        }
+      } catch (err) {
+        console.error("Error pulling document context:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSingleFeedback();
+  }, [slug]);
+
+  const handleCreateGitHubIssue = async () => {
+    if (!bug) return;
+    if (!config.gitHubAccessToken || !config.gitHubRepoOwner || !config.gitHubRepoName) {
+      alert("GitHub integration is not fully configured. Please check your server environment variables.");
+      return;
+    }
+
+    setIsCreatingIssue(true);
+
+    try {
+      const owner = config.gitHubRepoOwner;
+      const repo = config.gitHubRepoName;
+      const url = `https://api.github.com/repos/${owner}/${repo}/issues`;
+
+      const imgMarkdown = bug.attachedImage && bug.attachedImage.startsWith('http') ? `\n\n[Attached Image](${bug.attachedImage})` : '';
+
+      let issueBody = `### Feedback Context\n\n- **Type:** ${bug.type}\n- **Contact Email:** ${bug.email ?? 'anonymous'}\n`;
+      if (bug.bugUrl && bug.bugUrl !== 'N/A') {
+        issueBody += `- **Context URL:** ${bug.bugUrl}\n`;
+      }
+      if (bug.type === 'bug') {
+        issueBody += `- **Category:** ${bug.bugType ?? 'N/A'}\n`;
+        issueBody += `\n### Detailed Description & Steps to Reproduce\n\n${bug.message}\n${imgMarkdown}`;
+      } else if (bug.type === 'feature') {
+        issueBody += `\n### Feature Request Details\n`;
+        if (bug.featureProblem) issueBody += `- **Problem:** ${bug.featureProblem}\n`;
+        if (bug.featureAlternatives) issueBody += `- **Alternatives Considered:** ${bug.featureAlternatives}\n`;
+        if (bug.featureSolution) issueBody += `- **Proposed Solution:** ${bug.featureSolution}\n`;
+        issueBody += `\n### Additional Description\n\n${bug.message}\n${imgMarkdown}`;
+      } else {
+        issueBody += `\n### Description\n\n${bug.message}${imgMarkdown}`;
+      }
+
+      const title = bug.title && bug.title.trim().length > 0 ? bug.title : `${bug.type === 'bug' ? 'Bug' : 'Feature'}: ${bug.bugType || ''}`;
+      const payload = {
+        title,
+        body: issueBody.trim(),
+        labels: [bug.type === 'bug' ? 'bug' : 'enhancement'],
+      };
+      console.log('Creating GitHub issue with payload:', payload);
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.gitHubAccessToken}`,
+          'Accept': 'application/vnd.github.v3+json',
+        },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({})) as any;
+        const detailed = errorData.errors?.map((e: any) => `${e.resource || ''} ${e.field || ''} ${e.code || ''}`).join(', ');
+        const msg = errorData.message ?? `GitHub API responded with status ${response.status}`;
+        throw new Error(detailed ? `${msg}: ${detailed}` : msg);
+      }
+
+      // Update Firestore document resolution status to resolved
+      const docRef = doc(db, 'feedback', slug);
+      await setDoc(docRef, { isResolved: true }, { merge: true });
+
+      alert("GitHub Issue created successfully!");
+      setSubmitted(true);
+    } catch (err: unknown) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      console.error("Failed to create GitHub issue:", err);
+      alert(`Error creating GitHub issue: ${errorMsg}`);
+    } finally {
+      setIsCreatingIssue(false);
+    }
+  };
+
+  if (loading) return <div className="p-8 text-center text-gray-500">Loading item snapshot...</div>;
+  if (!bug) return <div className="p-8 text-center text-red-500">Feedback ticket not found.</div>;
+  if (submitted) {
+    return (
+      <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Feedback Submitted</h2>
+        <p className="text-gray-700 mb-4">Your feedback has been turned into a GitHub issue and marked as resolved.</p>
+        <button
+          onClick={() => router.push('/admin/feedback')}
+          className="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition"
+        >
+          Back to Feedback List
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+      <button
+        onClick={() => router.back()}
+        className="text-sm text-gray-500 hover:text-gray-800 mb-4 inline-flex items-center gap-1"
+      >
+        ← Back to Dashboard
+      </button>
+
+      <div className="flex items-center justify-between border-b pb-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Feedback Record</h1>
+        <div className="flex items-center gap-2">
+          {bug.isResolved ? (
+            <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase bg-green-100 text-green-800">
+              Resolved
+            </span>
+          ) : (
+            <span className="px-3 py-1 rounded-full text-xs font-semibold uppercase bg-yellow-100 text-yellow-800">
+              Active
+            </span>
+          )}
+          <span className={`px-3 py-1 rounded-full text-xs font-semibold uppercase ${bug.type === 'bug' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'
+            }`}>
+            {bug.type}
+          </span>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            Title
+          </h3>
+          <div className="bg-gray-50 border rounded py-2 px-4 text-gray-800 truncate font-medium">
+            {bug.title}
+          </div>
+        </div>
+
+        {bug.type === 'bug' && (
+          <>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Issue Category</h3>
+              <p className="text-gray-900 font-medium block bg-gray-50 p-2 rounded border">{bug.bugType}</p>
+            </div>
+
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
+              {bug.bugUrl && bug.bugUrl !== 'N/A' ? (
+                <a
+                  href={bug.bugUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-yellow-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
+                >
+                  {bug.bugUrl}
+                </a>
+              ) : (
+                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
+              )}
+            </div>
+          </>
+        )}
+        {bug.type === 'feature' && (
+          <>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Context URL</h3>
+              {bug.featureContextUrl ? (
+                <a
+                  href={bug.featureContextUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-yellow-600 hover:underline break-all font-medium block bg-gray-50 p-2 rounded border"
+                >
+                  {bug.featureContextUrl}
+                </a>
+              ) : (
+                <p className="text-gray-500 bg-gray-50 p-2 rounded border">N/A</p>
+              )}
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Problem Description</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureProblem || 'N/A'}</p>
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Alternatives Considered</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureAlternatives || 'N/A'}</p>
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Proposed Solution</h3>
+              <p className="bg-gray-50 p-2 rounded border text-gray-800">{bug.featureSolution || 'N/A'}</p>
+            </div>
+          </>
+        )}
+
+        <div>
+          <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">
+            {bug.type === 'bug' ? 'Detailed Description & Steps' : 'User Message'}
+          </h3>
+          {/* Content Report Container with native Markdown parser applied */}
+          <div
+            id="content-report-container"
+            className="bg-gray-50 border rounded p-4 text-gray-800 min-h-[100px] leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: parseMarkdown(bug.message) }}
+          />
+        </div>
+
+        {bug.attachedImage && (
+          <div>
+            <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Attached Image</h3>
+            <div className="bg-gray-50 border rounded p-4 flex justify-center">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={bug.attachedImage}
+                alt="Attached Screenshot"
+                className="max-h-96 object-contain rounded border shadow-sm"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="border-t pt-4 text-xs text-gray-500 space-y-1">
+          <p><strong>Contact Email:</strong> {bug.email}</p>
+          <p>
+            <strong>Timestamp:</strong> {bug.createdAt?.seconds
+              ? new Date(bug.createdAt.seconds * 1000).toLocaleString()
+              : 'N/A'
+            }
+          </p>
+        </div>
+
+        {(bug.type === 'bug' || bug.type === 'feature') && !bug.isResolved && (
+          <div className="pt-4 flex justify-end">
+            <button
+              onClick={handleCreateGitHubIssue}
+              disabled={isCreatingIssue}
+              className="px-4 py-2 bg-yellow-600 text-white rounded-md font-semibold text-sm hover:bg-yellow-700 transition duration-200 disabled:bg-gray-400 inline-flex items-center gap-2 shadow-sm"
+            >
+              {isCreatingIssue ? 'Creating GitHub Issue...' : 'Create GitHub Issue'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/feedback/[slug]/page.tsx b/src/app/admin/feedback/[slug]/page.tsx
new file mode 100644
index 00000000..d0bd8311
--- /dev/null
+++ b/src/app/admin/feedback/[slug]/page.tsx
@@ -0,0 +1,17 @@
+import FeedbackDetailsClient from './FeedbackDetailsClient';
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+export default function FeedbackDetailsPage({ params }: PageProps) {
+  const config = {
+    gitHubAccessToken: process.env.GITHUB_ACCESS_TOKEN ?? '',
+    gitHubRepoOwner: process.env.GITHUB_REPO_OWNER ?? '',
+    gitHubRepoName: process.env.GITHUB_REPO_NAME ?? '',
+  };
+
+  return <FeedbackDetailsClient slug={params.slug} config={config} />;
+}
\ No newline at end of file
diff --git a/src/app/admin/feedback/page.tsx b/src/app/admin/feedback/page.tsx
new file mode 100644
index 00000000..0a8c1509
--- /dev/null
+++ b/src/app/admin/feedback/page.tsx
@@ -0,0 +1,167 @@
+"use client";
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any */
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { db } from '@/lib/firebase';
+import { collection, getDocs, query, orderBy, doc, updateDoc } from 'firebase/firestore';
+import { buttonVariants } from "@/components/ui/button";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { useRouter } from 'next/navigation';
+
+export default function AdminFeedbackDashboard() {
+  const router = useRouter();
+  const [feedbackItems, setFeedbackItems] = useState<any[]>([]);
+  const [activeTab, setActiveTab] = useState<'active' | 'resolved'>('active');
+  const [loading, setLoading] = useState(true);
+
+  const handleResolve = async (e: React.MouseEvent, itemId: string, item: any) => {
+    e.stopPropagation();
+    setArchivingIds(prev => [...prev, itemId]);
+    try {
+      const docRef = doc(db, 'feedback', itemId);
+      const nextStatus = !item.isResolved;
+      await updateDoc(docRef, { isResolved: nextStatus });
+
+      setFeedbackItems(prevItems =>
+        prevItems.map(item =>
+          item.id === itemId ? { ...item, isResolved: nextStatus } : item
+        )
+      );
+    }
+    catch (error) {
+      console.error("Error archiving item:", error);
+    }
+    finally {
+      setArchivingIds(prev => prev.filter(id => id !== item.id));
+    }
+  };
+
+  const activeItems = feedbackItems.filter(item => !item.isResolved);
+  const resolvedItems = feedbackItems.filter(item => item.isResolved);
+  const displayedItems = activeTab === 'active' ? activeItems : resolvedItems;
+  const [archivingIds, setArchivingIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchFeedback = async () => {
+      try {
+        const q = query(collection(db, 'feedback'), orderBy('createdAt', 'desc'));
+        const querySnapshot = await getDocs(q);
+        const items = querySnapshot.docs.map(doc => ({
+          id: doc.id,
+          ...doc.data()
+        }));
+        setFeedbackItems(items);
+      } catch (error) {
+        console.error("Error fetching feedback:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFeedback();
+  }, []);
+
+  if (loading) return <div className="p-8 text-center text-gray-500">Loading feedback...</div>;
+
+  return (
+    <div className="p-8 max-w-5xl mx-auto">
+      <Link
+        className={buttonVariants({ variant: "outline" })}
+        href="/admin"
+      >
+        <ArrowLeft className="mr-2" />
+        Return to Admin Dashboard
+      </Link>
+      <h1 className="text-3xl font-bold mb-6 mt-6 text-gray-900">Feedback/Bug Reports</h1>
+
+      <div className="flex border-b border-gray-200 mb-6">
+        <button
+          onClick={() => setActiveTab('active')}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${activeTab === 'active'
+            ? 'border-yellow-600 text-yellow-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
+        >
+          Active Reports ({activeItems.length})
+        </button>
+        <button
+          onClick={() => setActiveTab('resolved')}
+          className={`py-2 px-4 font-medium text-sm border-b-2 transition-colors ${activeTab === 'resolved'
+            ? 'border-yellow-600 text-yellow-600'
+            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
+        >
+          Resolved ({resolvedItems.length})
+        </button>
+      </div>
+      {displayedItems.length === 0 ? (
+        <p className="text-gray-500">
+          {activeTab === 'active' ? 'No active feedback submissions found.' : 'No resolved submissions found yet.'}
+        </p>
+      ) : (
+        <div className="overflow-x-auto border rounded-lg shadow-sm bg-white">
+          <table className="min-w-full divide-y divide-gray-200 text-left text-sm">
+            <thead className="bg-gray-50 text-gray-700 uppercase font-semibold text-xs tracking-wider">
+              <tr>
+                <th className="p-4">Type</th>
+                <th className="p-4">Title</th>
+                <th className="p-4">Submitted By</th>
+                <th className="p-4">Date</th>
+                <th className="p-4"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 text-gray-700">
+              {displayedItems.map((item) => (
+                <tr key={item.id} onClick={() => router.push(`/admin/feedback/${item.id}`)} className="hover:bg-gray-50 transition-colors">
+                  <td className="p-4 whitespace-nowrap">
+                    <span className={`px-2 py-1 rounded text-xs font-semibold uppercase ${item.type === 'bug' ? 'bg-red-100 text-red-800' :
+                      item.type === 'questions' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'
+                      }`}>
+                      {item.type}
+                    </span>
+                  </td>
+                  <td className="p-4 font-medium max-w-xs truncate">
+                    <Link href={`/admin/feedback/${item.id}`} className="text-yellow-600 hover:underline">
+                      {item.title}
+                      {item.type === 'bug' ? ` (${item.bugType})` : ''}
+                    </Link>
+                  </td>
+                  <td className="p-4 text-gray-500">{item.email}</td>
+                  <td className="p-4 text-gray-500 whitespace-nowrap">
+                    {item.createdAt?.seconds
+                      ? new Date(item.createdAt.seconds * 1000).toLocaleDateString()
+                      : new Date().toLocaleDateString()
+                    }
+                  </td>
+                  <td className="p-4" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      onClick={(e) => handleResolve(e, item.id, item)}
+                      disabled={archivingIds.includes(item.id)}
+                      className={`inline-flex items-center gap-1 px-3 py-1 rounded text-xs font-medium transition-colors ${item.isResolved
+                        ? 'bg-green-100 hover:bg-green-200 text-green-800'
+                        : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                        }`}
+                    >
+                      {archivingIds.includes(item.id) ? (
+                        <>
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          Updating...
+                        </>
+                      ) : item.isResolved ? (
+                        "Unresolve"
+                      ) : (
+                        "Resolve"
+                      )}
+                    </button>
+                  </td>
+
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 43ecd0cd..357e818a 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,4 +1,6 @@
 "use client";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 import Navbar from "@/components/global/navbar";
 import Footer from "@/components/global/footer";
 import type { User } from "@/types/user";
@@ -10,12 +12,11 @@ import { useUser } from "../../components/hooks/UserContext";
 import Link from "next/link";
 import { cn, formatSlug } from "@/lib/utils";
 import { Ban, ClipboardPen, PencilRuler, ShieldUser, X } from "lucide-react";
-import AdminImport from "@/components/admin/AdminImport";
 import { doc, updateDoc } from "firebase/firestore";
 import { db } from "@/lib/firebase";
 import { Button } from "@/components/ui/button";
 
-const apClasses = apClassesData.apClasses;
+const apClasses = [...apClassesData.apClasses, "AP Porting"];
 
 const Page = () => {
   const { user } = useUser();
@@ -44,11 +45,16 @@ const Page = () => {
         {user.access === "admin" && (
           <>
             <AdminPanel user={user} />
-            <h2 className="mt-6 text-2xl font-bold">Validate Editor JSON</h2>
-            <AdminImport />
           </>
         )}
 
+
+        <Link href="/admin/feedback" className="hover:text-yellow-600">
+          <Button className="w-full">
+            Check Feedback & Bug Reports
+          </Button>
+        </Link>
+        <br></br>
         <SelectCourse />
       </div>
 
@@ -121,11 +127,9 @@ function AdminPanel({ user }: { user: User }) {
 
   const filteredUsers = users.filter(
     (user) =>
-      user.displayName
-        .toLowerCase()
-        .includes(searchTermUsers.toLowerCase().trim()) ||
-      user.email.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
-      user.access.toLowerCase().includes(searchTermUsers.toLowerCase().trim()),
+      user.displayName?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
+      user.email?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()) ||
+      user.access?.toLowerCase().includes(searchTermUsers.toLowerCase().trim()),
   );
 
   return (
diff --git a/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx b/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
index fc3fd585..b50870f3 100644
--- a/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
+++ b/src/app/admin/subject/[slug]/[unit]/chapter/[id]/page.tsx
@@ -1,9 +1,5 @@
 "use client";
-import dynamic from "next/dynamic";
-const ArticleCreator = dynamic(
-  () => import("@/components/article-creator/ArticleCreator"),
-  { ssr: false },
-);
+import ArticleCreator from "@/components/article-creator/ArticleCreator";
 import { useUser } from "@/components/hooks/UserContext";
 import { buttonVariants } from "@/components/ui/button";
 import { ArrowLeft, ExternalLink, UserRoundCog } from "lucide-react";
@@ -18,8 +14,9 @@ const Page = () => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const query = searchParams ?? new URLSearchParams();
 
-  const pathParts = pathname.split("/").slice(-4);
+  const pathParts = (pathname ?? "").split("/").slice(-4);
 
   useEffect(() => {
     if ((!user || user?.access === "user") && !loading) {
@@ -28,7 +25,7 @@ const Page = () => {
   }, [user, loading, router]);
 
   return (
-    <div className="flex grow flex-col px-10 pt-10 xl:px-20">
+      <div className="flex grow flex-col px-10 pt-10 xl:px-20">
       <div className="mb-4 flex items-center justify-between gap-2">
         <Link
           className={cn(buttonVariants({ variant: "outline" }), "w-min")}
@@ -42,15 +39,15 @@ const Page = () => {
             href={`/subject/${pathParts[0]}`}
             className="flex justify-center gap-1"
           >
-            <b>{decodeURIComponent(searchParams.get("subject") ?? "")}</b> Unit{" "}
-            {decodeURIComponent(searchParams.get("unitIndex") ?? "")}
+            <b>{decodeURIComponent(query.get("subject") ?? "")}</b> Unit{" "}
+            {decodeURIComponent(query.get("unitIndex") ?? "")}
             <ExternalLink />
           </Link>
           <Link
-            href={`/subject/${pathParts[0]}/unit-${decodeURIComponent(searchParams.get("unitIndex") ?? "")}-${pathParts[1]}/chapter/${pathParts[3]}/view`}
+            href={`/subject/${pathParts[0]}/unit-${decodeURIComponent(query.get("unitIndex") ?? "")}-${pathParts[1]}/chapter/${pathParts[3]}/view`}
             className="flex justify-center gap-1"
           >
-            {decodeURIComponent(searchParams.get("chapter") ?? "")}
+            {decodeURIComponent(query.get("chapter") ?? "")}
             <ExternalLink />
           </Link>
         </h1>
diff --git a/src/app/admin/subject/[slug]/[unit]/test/[id]/page.tsx b/src/app/admin/subject/[slug]/[unit]/test/[id]/page.tsx
index 04fcaf18..d4a214a4 100644
--- a/src/app/admin/subject/[slug]/[unit]/test/[id]/page.tsx
+++ b/src/app/admin/subject/[slug]/[unit]/test/[id]/page.tsx
@@ -21,7 +21,7 @@ import { cn } from "@/lib/utils";
 import { Blocker } from "@/app/admin/subject/navigation-block";
 
 const Page = () => {
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
 
   const { user } = useUser();
   const instanceId = pathname.split("/").slice(-4).join("_");
diff --git a/src/app/admin/subject/[slug]/page.tsx b/src/app/admin/subject/[slug]/page.tsx
index 3fb60a73..374ac4c4 100644
--- a/src/app/admin/subject/[slug]/page.tsx
+++ b/src/app/admin/subject/[slug]/page.tsx
@@ -20,6 +20,7 @@ import { cn, formatSlug } from "@/lib/utils";
 import short from "short-uuid";
 import type { Subject, Unit } from "@/types/firestore";
 import UnitComponent from "./_components/unit";
+import { DEFAULT_PORTING_SUBJECT } from "@/lib/apPortingDefaults";
 
 const translator = short(short.constants.flickrBase58);
 
@@ -29,7 +30,7 @@ function generateShortId() {
   return timestamp + randomPart;
 }
 
-const apClasses = apClassesData.apClasses;
+const apClasses = [...apClassesData.apClasses, "AP Porting"];
 
 // Default empty subject structure
 const emptyData: Subject = {
@@ -68,6 +69,7 @@ export default function Page({ params }: { params: { slug: string } }) {
   const { user, error, setError, setLoading } = useUser();
   const [subjectTitle, setSubjectTitle] = useState<string>("");
   const [units, setUnits] = useState<Unit[]>([]);
+  const [resetting, setResetting] = useState<boolean>(false);
 
   const [subjectLoading, setSubjectLoading] = useState<boolean>(true);
   const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
@@ -172,6 +174,85 @@ export default function Page({ params }: { params: { slug: string } }) {
    * If you dont want this, use the commented out handleSave.
    ****************************************************/
 
+  const handleReset = async () => {
+    if (!confirm("Are you sure you want to reset the AP Porting course? This will restore all articles, MCQs, and structure to their default values and delete any custom changes you made.")) {
+      return;
+    }
+    setResetting(true);
+    try {
+      // 1. Fetch and delete existing structure/articles/tests under /subjects/porting
+      const unitsCollectionRef = collection(db, "subjects", "porting", "units");
+      const unitsSnap = await getDocs(unitsCollectionRef);
+
+      const batch = writeBatch(db);
+
+      for (const unitDoc of unitsSnap.docs) {
+        const chaptersCollectionRef = collection(db, "subjects", "porting", "units", unitDoc.id, "chapters");
+        const chaptersSnap = await getDocs(chaptersCollectionRef);
+        chaptersSnap.forEach((chapterDoc) => {
+          batch.delete(chapterDoc.ref);
+        });
+
+        const testsCollectionRef = collection(db, "subjects", "porting", "units", unitDoc.id, "tests");
+        const testsSnap = await getDocs(testsCollectionRef);
+        testsSnap.forEach((testDoc) => {
+          batch.delete(testDoc.ref);
+        });
+
+        batch.delete(unitDoc.ref);
+      }
+
+      batch.delete(doc(db, "subjects", "porting"));
+      await batch.commit();
+
+      // 2. Write defaults
+      const writeBatchObj = writeBatch(db);
+      writeBatchObj.set(doc(db, "subjects", "porting"), {
+        title: DEFAULT_PORTING_SUBJECT.title,
+        units: DEFAULT_PORTING_SUBJECT.units,
+      });
+
+      for (const unit of DEFAULT_PORTING_SUBJECT.units) {
+        const unitRef = doc(db, "subjects", "porting", "units", unit.id);
+        writeBatchObj.set(unitRef, unit);
+
+        for (const chapter of unit.chapters) {
+          const chapterRef = doc(db, "subjects", "porting", "units", unit.id, "chapters", chapter.id);
+          writeBatchObj.set(chapterRef, {
+            id: chapter.id,
+            createdAt: new Date(),
+            author: "System Default",
+            title: `${unit.id}/chapter/${chapter.id}`,
+            isPublic: chapter.isPublic ?? true,
+          });
+        }
+
+        if (unit.tests) {
+          for (const test of unit.tests) {
+            const testRef = doc(db, "subjects", "porting", "units", unit.id, "tests", test.id);
+            writeBatchObj.set(testRef, {
+              ...test,
+              instanceId: `porting_${unit.id}_test_${test.id}`,
+            });
+          }
+        }
+      }
+
+      await writeBatchObj.commit();
+
+      setSubjectTitle(DEFAULT_PORTING_SUBJECT.title);
+      setUnits(DEFAULT_PORTING_SUBJECT.units);
+      setUnsavedChanges(false);
+
+      alert("AP Porting course reset successfully.");
+    } catch (error) {
+      console.error("Error resetting subject:", error);
+      alert("Error resetting subject. Check console for details.");
+    } finally {
+      setResetting(false);
+    }
+  };
+
   // Replaces save
   const handleSave = async () => {
     // Rebuild the Subject object from current state
@@ -353,17 +434,28 @@ export default function Page({ params }: { params: { slug: string } }) {
               <ArrowLeft className="mr-2" />
               Return to Admin Dashboard
             </Link>
-            {(!subjectLoading || unsavedChanges) && (
-              <Button
-                className={cn(
-                  "bg-blue-500 hover:bg-blue-600",
-                  unsavedChanges && "animate-pulse",
-                )}
-                onClick={handleSave}
-              >
-                <Save className="mr-2" /> Save Changes
-              </Button>
-            )}
+            <div className="flex gap-2">
+              {params.slug === "porting" && (
+                <Button
+                  className="bg-red-500 hover:bg-red-600 text-white"
+                  onClick={handleReset}
+                  disabled={resetting}
+                >
+                  {resetting ? "Resetting..." : "Reset Course"}
+                </Button>
+              )}
+              {(!subjectLoading || unsavedChanges) && (
+                <Button
+                  className={cn(
+                    "bg-blue-500 hover:bg-blue-600",
+                    unsavedChanges && "animate-pulse",
+                  )}
+                  onClick={handleSave}
+                >
+                  <Save className="mr-2" /> Save Changes
+                </Button>
+              )}
+            </div>
           </div>
 
           {/* Subject Title */}
diff --git a/src/app/auth/action/page.tsx b/src/app/auth/action/page.tsx
index 0019a9b3..5cd2d2ea 100644
--- a/src/app/auth/action/page.tsx
+++ b/src/app/auth/action/page.tsx
@@ -1,16 +1,19 @@
-'use client';
+"use client";
 
 import PasswordResetPage from "@/components/auth/ResetPassword";
 import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 
 // If you want this to take effect on your local app, you have to go to firebase -> auth -> templates -> edit -> customize action url -> "http://localhost:<port>/auth/action"
-export default function ActionPage() {
-  const searchParams = useSearchParams();
+function ActionPageContent() {
+  const searchParams = useSearchParams() ?? new URLSearchParams();
   const mode = searchParams.get("mode");
 
   const code = searchParams.get("oobCode");
   if (!code) {
-    alert("Need an oobCode to access this page. If you don't know what that means just leave the page");
+    alert(
+      "Need an oobCode to access this page. If you don't know what that means just leave the page",
+    );
     return;
   }
 
@@ -25,3 +28,11 @@ export default function ActionPage() {
       );
   }
 }
+
+export default function ActionPage() {
+  return (
+    <Suspense>
+      <ActionPageContent />
+    </Suspense>
+  );
+}
diff --git a/src/app/feedback/page.tsx b/src/app/feedback/page.tsx
new file mode 100644
index 00000000..29c99d92
--- /dev/null
+++ b/src/app/feedback/page.tsx
@@ -0,0 +1,334 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-floating-promises, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unused-vars, react/no-unescaped-entities */
+'use client'
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { storage } from '@/lib/firebase';
+import { db } from '@/lib/firebase';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { collection, addDoc, serverTimestamp, Timestamp } from 'firebase/firestore';
+
+export default function FeedbackPage() {
+  const [featureProblem, setFeatureProblem] = useState('');
+  const [featureAlternatives, setFeatureAlternatives] = useState('');
+  const [featureSolution, setFeatureSolution] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [type, setType] = useState('general');
+  // New bug-specific states matching your images
+  const [bugType, setBugType] = useState('Website Article Errors');
+  const [bugUrl, setBugUrl] = useState('');
+  const [attachedImage, setAttachedImage] = useState<File | null>(null);
+  const [featureContextUrl, setFeatureContextUrl] = useState('');
+  const [message, setMessage] = useState('');
+  const [email, setEmail] = useState('');
+  const [title, setTitle] = useState('');
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setAttachedImage(file);
+    } else {
+      setAttachedImage(null);
+    }
+  };
+
+  const router = useRouter();
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const trimmedTitle = title.trim();
+    const trimmedMessage = message.trim();
+    const trimmedBugUrl = bugUrl.trim();
+
+    if (!trimmedTitle || !trimmedMessage) {
+      setStatus('error');
+      return;
+    }
+
+    if (type === 'bug' && !trimmedBugUrl) {
+      setStatus('error');
+      return;
+    }
+
+    setStatus('loading');
+    try {
+      interface NewFeedback {
+        type: string;
+        message: string;
+        title: string;
+        email: string;
+        // Firestore server timestamp field
+        createdAt: Timestamp;
+        bugType?: string;
+        bugUrl?: string;
+        attachedImage?: string;
+        // Feature request fields
+        featureProblem?: string;
+        featureAlternatives?: string;
+        featureSolution?: string;
+        featureContextUrl?: string;
+      }
+
+      // Build the base payload
+      const feedbackPayload: NewFeedback = {
+        type,
+        message: trimmedMessage,
+        title: trimmedTitle,
+        email: email || 'anonymous',
+        createdAt: serverTimestamp() as Timestamp,
+      };
+
+      // Conditionally append the precise details if it's a bug report
+      if (type === 'bug') {
+        feedbackPayload.bugType = bugType;
+        feedbackPayload.bugUrl = trimmedBugUrl;
+      }
+      // Add feature request specific fields
+      if (type === 'feature') {
+        feedbackPayload.featureProblem = featureProblem;
+        feedbackPayload.featureAlternatives = featureAlternatives;
+        feedbackPayload.featureSolution = featureSolution;
+        feedbackPayload.featureContextUrl = featureContextUrl;
+      }
+
+      // If an image was attached, upload it to Firebase Storage first
+      if (attachedImage && type !== 'general') {
+        const imageRef = ref(
+          storage,
+          `feedbackImages/${Date.now()}-${attachedImage.name}`
+        );
+        await uploadBytes(imageRef, attachedImage);
+        feedbackPayload.attachedImage = await getDownloadURL(imageRef);
+      }
+
+      // Add feedback document with image URL (if any) included
+      const docRef = await addDoc(collection(db, 'feedback'), feedbackPayload);
+      // Mark as submitted so UI shows success view
+      setSubmitted(true);
+      setStatus('success');
+      console.log('Feedback document created with ID:', docRef.id);
+
+      // Clear form fields
+      setMessage('');
+      setEmail('');
+      setTitle('');
+      setBugUrl('');
+      setAttachedImage(null);
+      setFeatureProblem('');
+      setFeatureAlternatives('');
+      setFeatureSolution('');
+      // Reset file input if present
+      const fileInput = document.getElementById('screenshot-input') as HTMLInputElement;
+      if (fileInput) fileInput.value = '';
+    } catch (err) {
+      console.error('Error submitting feedback:', err);
+      setStatus('error');
+    }
+  };
+
+  if (submitted) {
+    return (
+      <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Feedback Submitted</h2>
+        <p className="text-gray-700 mb-4">Thank you! Your feedback has been recorded.</p>
+        <button
+          onClick={() => {
+            setSubmitted(false);
+            setStatus('idle');
+          }}
+          className="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 transition"
+        >
+          Submit Another Feedback
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-md mx-auto my-12 p-6 bg-white rounded-lg shadow-md border">
+      <h1 className="text-2xl font-bold mb-4 text-gray-800">Submit Feedback</h1>
+
+      {status === 'success' && (
+        <div className="mb-4 p-3 bg-green-100 text-green-700 rounded-md">
+          Thank you! Your feedback has been submitted successfully.
+        </div>
+      )}
+      {status === 'error' && (
+        <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md">
+          Something went wrong. Please try again.
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+          <input
+            type="text"
+            required
+            placeholder="title of issue"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Feedback Type</label>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          >
+            <option value="general">General Feedback</option>
+            <option value="bug">Bug Report</option>
+            <option value="feature">Feature Request</option>
+          </select>
+        </div>
+
+        {/* --- DYNAMIC BUG FIELDS (Shown only when 'bug' is chosen) --- */}
+        {type === 'bug' && (
+          <>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                What is the type of the issue? *
+              </label>
+              <select
+                value={bugType}
+                onChange={(e) => setBugType(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              >
+                <option value="Website Article Errors">Website Article Errors</option>
+                <option value="Unit Test Errors">Unit Test Errors</option>
+                <option value="Mock Exam Errors">Mock Exam Errors</option>
+                <option value="Website Bugs">Website Bugs</option>
+                <option value="Other">Other</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                What is the URL of the issue? *
+              </label>
+              <p className="text-xs text-gray-500 mb-1">If the URL is irrelevant for your bug report, just put down &quot;N/A&quot;.</p>
+              <input
+                type="text"
+                required
+                placeholder="https://fivehive.org/... or N/A"
+                value={bugUrl}
+                onChange={(e) => setBugUrl(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Attach Screenshot (Optional)
+              </label>
+              <input
+                id="screenshot-input"
+                type="file"
+                accept="image/*"
+                onChange={handleImageChange}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900 text-sm file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100"
+              />
+            </div>
+          </>
+        )}
+        {/* ------------------------------------------------------------- */}
+
+        {/* Feature Request Fields (shown when type === 'feature') */}
+        {type === 'feature' && (
+          <>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Context URL</label>
+              <input
+                type="text"
+                placeholder="https://example.com/..."
+                value={featureContextUrl}
+                onChange={e => setFeatureContextUrl(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Is your feature request related to a problem? Please describe.</label>
+              <textarea
+                rows={3}
+                value={featureProblem}
+                onChange={e => setFeatureProblem(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Describe alternatives you've considered</label>
+              <textarea
+                rows={3}
+                value={featureAlternatives}
+                onChange={e => setFeatureAlternatives(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Describe the solution you'd like (rich text)</label>
+              <textarea
+                rows={4}
+                value={featureSolution}
+                onChange={e => setFeatureSolution(e.target.value)}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Attach Screenshot (Optional)</label>
+              <input
+                id="screenshot-input"
+                type="file"
+                accept="image/*"
+                onChange={handleImageChange}
+                className="w-full p-2 border rounded-md bg-gray-50 text-gray-900 text-sm file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-xs file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100"
+              />
+            </div>
+          </>
+        )}
+
+        {/* ------------------------------------------------------------- */}
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Your Email (Optional)</label>
+          <input
+            type="email"
+            placeholder="apstudent@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {type === 'bug' ? 'Please describe the issue in detail. *' : 'Message *'}
+          </label>
+          {type === 'bug' && (
+            <p className="text-xs text-gray-500 mb-1">
+              Please include any relevant information, such as factual errors, punctuation errors, broken links, formatting issues, appearance bugs, ... Most importantly, please provide detailed steps on how to reproduce this bug.
+            </p>
+          )}
+          <textarea
+            required
+            rows={4}
+            placeholder={type === 'bug' ? "Steps to reproduce / description..." : "This could be anything about improving the website or even FiveHive in general! We appreciate any feedback you can give."}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            className="w-full p-2 border rounded-md bg-gray-50 text-gray-900"
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={status === 'loading'}
+          className="w-full py-2 bg-yellow-500 hover:bg-yellow-600 disabled:bg-gray-400 text-white font-semibold rounded-md transition duration-200"
+        >
+          {status === 'loading' ? 'Submitting...' : 'Submit Feedback'}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 870f1063..c7379987 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "@/styles/globals.css";
+import { type Metadata } from "next";
 import { Figtree } from "next/font/google";
 import RootLayoutClient from "./RootLayoutClient";
 import { Toaster } from "@/components/ui/sonner";
@@ -8,9 +9,51 @@ const figtree = Figtree({
   variable: "--font-figtree",
 });
 
-export const metadata = {
-  title: "FiveHive",
-  description: "By AP students. For AP students.",
+export const metadata: Metadata = {
+  metadataBase: new URL("https://www.fivehive.org"),
+  title: {
+    default: "FiveHive — Free AP Study Guides, Notes & Practice",
+    template: "%s | FiveHive",
+  },
+  description:
+    "Free AP study guides, unit notes, and practice questions written by AP students who scored 5s. Covering AP Biology, Chemistry, Calculus, US History, and more.",
+  keywords: [
+    "AP study guides",
+    "AP notes",
+    "AP exam prep",
+    "AP practice questions",
+    "free AP resources",
+    "AP review",
+  ],
+  applicationName: "FiveHive",
+  alternates: { canonical: "/" },
+  openGraph: {
+    type: "website",
+    siteName: "FiveHive",
+    title: "FiveHive — Free AP Study Guides, Notes & Practice",
+    description:
+      "Free AP study guides, unit notes, and practice questions written by AP students. By AP students. For AP students.",
+    url: "https://www.fivehive.org",
+    images: [{ url: "/logo.png", width: 1200, height: 630, alt: "FiveHive" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "FiveHive — Free AP Study Guides, Notes & Practice",
+    description:
+      "Free AP study guides, notes, and practice written by AP students.",
+    images: ["/logo.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1,
+    },
+  },
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
diff --git a/src/app/robots.ts b/src/app/robots.ts
new file mode 100644
index 00000000..815b41f7
--- /dev/null
+++ b/src/app/robots.ts
@@ -0,0 +1,40 @@
+import { type MetadataRoute } from "next";
+
+const baseUrl = "https://www.fivehive.org";
+
+// Authenticated / non-content areas that should not be crawled or cited.
+const disallow = [
+  "/admin",
+  "/account",
+  "/peer-grading",
+  "/login",
+  "/signup",
+  "/auth",
+  "/api",
+];
+
+// AI assistant crawlers we explicitly welcome so FiveHive can be cited in
+// AI-generated answers. They inherit the same disallow list as everyone else.
+const aiBots = [
+  "GPTBot", // OpenAI / ChatGPT
+  "ChatGPT-User",
+  "OAI-SearchBot",
+  "PerplexityBot", // Perplexity
+  "ClaudeBot", // Anthropic / Claude
+  "anthropic-ai",
+  "Claude-Web",
+  "Google-Extended", // Gemini & Google AI Overviews
+  "Bingbot", // Microsoft Copilot (via Bing)
+  "Applebot-Extended",
+];
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      { userAgent: "*", allow: "/", disallow },
+      ...aiBots.map((userAgent) => ({ userAgent, allow: "/", disallow })),
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl,
+  };
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 00000000..170b52c4
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,52 @@
+import { type MetadataRoute } from "next";
+import { getAllSubjects } from "@/lib/sitemap-data";
+import { formatSlug } from "@/lib/utils";
+
+const baseUrl = "https://www.fivehive.org";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const now = new Date();
+
+  const staticRoutes: MetadataRoute.Sitemap = [
+    { path: "", priority: 1 },
+    { path: "/library", priority: 0.8 },
+    { path: "/guides", priority: 0.8 },
+    { path: "/apply", priority: 0.6 },
+    { path: "/privacy", priority: 0.3 },
+  ].map(({ path, priority }) => ({
+    url: `${baseUrl}${path}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority,
+  }));
+
+  const subjects = (await getAllSubjects()).filter((s) => s.slug !== "porting");
+  const subjectRoutes: MetadataRoute.Sitemap = [];
+
+  for (const subject of subjects) {
+    subjectRoutes.push({
+      url: `${baseUrl}/subject/${subject.slug}`,
+      lastModified: now,
+      changeFrequency: "weekly",
+      priority: 0.9,
+    });
+
+    subject.units.forEach((unit, unitIndex) => {
+      const unitSegment = `unit-${unitIndex + 1}-${unit.id}`;
+      for (const chapter of unit.chapters ?? []) {
+        // Only list publicly readable chapters — gated content can't be
+        // crawled or cited anyway, and listing it invites thin-page penalties.
+        if (chapter.isPublic) {
+          subjectRoutes.push({
+            url: `${baseUrl}/subject/${subject.slug}/${unitSegment}/chapter/${chapter.id}/${formatSlug(chapter.title)}`,
+            lastModified: now,
+            changeFrequency: "monthly",
+            priority: 0.8,
+          });
+        }
+      }
+    });
+  }
+
+  return [...staticRoutes, ...subjectRoutes];
+}
diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx
new file mode 100644
index 00000000..5f3801ce
--- /dev/null
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterClient.tsx
@@ -0,0 +1,97 @@
+"use client";
+import Renderer from "@/components/article-creator/Renderer";
+import { useFetchAndCache } from "./useFetchAndCache";
+import ChapterScaffold from "./ChapterScaffold";
+import "katex/dist/katex.min.css";
+import { useUser } from "@/components/hooks/UserContext";
+import Link from "next/link";
+import { useEffect } from "react";
+
+/**
+ * Client-side chapter renderer for gated (non-public) chapters: it fetches the
+ * content through Firestore with the signed-in user's auth, so members/admins can
+ * preview WIP chapters. Public chapters are server-rendered by `page.tsx` and
+ * never reach this component.
+ */
+const ChapterClient = ({
+  params,
+}: {
+  params: { slug: string; unit: string; id: string };
+}) => {
+  const { user } = useUser();
+  const { subject, content, loading, error } = useFetchAndCache(
+    params,
+    user?.access === "admin" || user?.access === "member",
+  );
+
+  useEffect(() => {
+    if (subject && content) {
+      const unitIndex = Number(params.unit.split("-")[1]) - 1;
+      const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
+        (ch) => ch.id === params.id,
+      );
+      const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
+
+      document.title = `FiveHive - ${subject.title} ${unitIndex + 1}.${chapterIndex + 1} - ${chapter?.title}`;
+    }
+  }, [subject, content, params.unit, params.id]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen grow items-center justify-center text-2xl">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="grid min-h-screen grow place-content-center text-xl">
+        <p>
+          {error}
+          <br />
+          Return to{" "}
+          <Link
+            href={`/subject/${params.slug}`}
+            className="text-blue-600 hover:underline"
+          >
+            subject homepage
+          </Link>
+          .
+        </p>
+      </div>
+    );
+  }
+
+  if (subject && content) {
+    const unitIndex = Number(params.unit.split("-")[1]) - 1;
+    const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
+      (ch) => ch.id === params.id,
+    );
+    const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
+    const unitTitle = subject.units[unitIndex]?.title;
+
+    if (!unitTitle || !chapter) {
+      return <div>Error: Unit or chapter not found.</div>;
+    }
+
+    return (
+      <ChapterScaffold
+        subjectTitle={subject.title}
+        units={subject.units}
+        unitIndex={unitIndex}
+        chapterIndex={chapterIndex}
+        unitTitle={unitTitle}
+        chapterTitle={chapter.title}
+        chapterId={params.id}
+        author={content.author}
+      >
+        <Renderer content={content.data} />
+      </ChapterScaffold>
+    );
+  }
+
+  return null;
+};
+
+export default ChapterClient;
diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx
new file mode 100644
index 00000000..eab96e6e
--- /dev/null
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/ChapterScaffold.tsx
@@ -0,0 +1,160 @@
+import Footer from "@/components/global/footer";
+import Navbar from "@/components/global/navbar";
+import SubjectBreadcrumb from "@/components/subject/subject-breadcrumb";
+import ProgressTracker from "@/components/subject/progress-tracker";
+import Link from "next/link";
+import type { Unit } from "@/types/firestore";
+import { buttonVariants } from "@/components/ui/button";
+import { cn, formatSlug } from "@/lib/utils";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+/**
+ * Presentational chapter shell shared by the public (server-rendered) and gated
+ * (client) paths so the two never drift. Has no data fetching or hooks of its
+ * own; the body — server-rendered article or client `Renderer` — is passed as
+ * `children`. `Navbar`/`ProgressTracker` are client components rendered within.
+ */
+export default function ChapterScaffold({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+  unitTitle,
+  chapterTitle,
+  chapterId,
+  author,
+  children,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+  unitTitle: string;
+  chapterTitle: string;
+  chapterId: string;
+  author: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative flex grow flex-col">
+      <Navbar hideLinks />
+
+      <div className="relative mt-8 flex justify-between gap-x-16 px-10 lg:mt-16 xl:px-20">
+        <div className="flex grow flex-col items-center">
+          <SubjectBreadcrumb
+            locations={[subjectTitle, unitTitle, chapterTitle]}
+          />
+
+          <h1 className="my-2 text-balance text-center text-5xl font-extrabold">
+            {unitIndex + 1}.{chapterIndex + 1} - {chapterTitle}
+          </h1>
+          <p>{author}</p>
+          <div className="my-4">
+            <ProgressTracker chapterId={chapterId} />
+          </div>
+
+          {children}
+        </div>
+      </div>
+      <div className="mt-auto flex justify-center">
+        <div className="flex max-w-[65ch] grow gap-3 pt-6">
+          <PreviousArticle
+            subjectTitle={subjectTitle}
+            units={units}
+            unitIndex={unitIndex}
+            chapterIndex={chapterIndex}
+          />
+          <NextArticle
+            subjectTitle={subjectTitle}
+            units={units}
+            unitIndex={unitIndex}
+            chapterIndex={chapterIndex}
+          />
+        </div>
+      </div>
+
+      <Footer className="mx-0 w-full max-w-none px-10 xl:px-20" />
+    </div>
+  );
+}
+
+function PreviousArticle({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+}) {
+  let unit = units[unitIndex];
+  let newUnitIndex = unitIndex;
+  let newChapterIndex = chapterIndex;
+
+  if (chapterIndex <= 0) {
+    if (unitIndex <= 0) return null;
+    newUnitIndex -= 1;
+    unit = units[newUnitIndex];
+    if (!unit?.chapters) return null;
+    newChapterIndex = unit.chapters.length - 1;
+  } else {
+    newChapterIndex -= 1;
+  }
+
+  if (!unit) return null;
+
+  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+
+  return (
+    <Link
+      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
+      className={cn(buttonVariants({ variant: "outline" }), "gap-2")}
+    >
+      <ArrowLeft />
+      Previous Chapter
+    </Link>
+  );
+}
+
+function NextArticle({
+  subjectTitle,
+  units,
+  unitIndex,
+  chapterIndex,
+}: {
+  subjectTitle: string;
+  units: Unit[];
+  unitIndex: number;
+  chapterIndex: number;
+}) {
+  let unit = units[unitIndex];
+  let newUnitIndex = unitIndex;
+  let newChapterIndex = chapterIndex;
+
+  if (!unit?.chapters) return null;
+
+  if (chapterIndex >= unit.chapters.length - 1) {
+    if (unitIndex >= units.length - 1) return null;
+    newUnitIndex += 1;
+    unit = units[newUnitIndex];
+    newChapterIndex = 0;
+  } else {
+    newChapterIndex += 1;
+  }
+
+  if (!unit) return null;
+
+  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+
+  return (
+    <Link
+      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
+      className={cn(buttonVariants({ variant: "outline" }), "ml-auto gap-2")}
+    >
+      Next Chapter
+      <ArrowRight />
+    </Link>
+  );
+}
diff --git a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
index edb2fae1..c3f8ba03 100644
--- a/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
+++ b/src/app/subject/[slug]/(sidebar)/[unit]/chapter/[id]/[title]/page.tsx
@@ -1,228 +1,70 @@
-"use client";
-import Footer from "@/components/global/footer";
-import Navbar from "@/components/global/navbar";
-import SubjectBreadcrumb from "@/components/subject/subject-breadcrumb";
-import Renderer from "@/components/article-creator/Renderer";
-import { useFetchAndCache } from "./useFetchAndCache";
 import "katex/dist/katex.min.css";
-import { useUser } from "@/components/hooks/UserContext";
-import Image from "next/image";
-import Link from "next/link";
-import type { Unit } from "@/types/firestore";
-import { buttonVariants } from "@/components/ui/button";
-import { cn, formatSlug } from "@/lib/utils";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-import { useEffect } from "react";
-import ProgressTracker from "@/components/subject/progress-tracker";
-
-const Page = ({
-  params,
-}: {
-  params: { slug: string; unit: string; id: string };
-}) => {
-  const { user } = useUser();
-  const { subject, content, loading, error } = useFetchAndCache(
-    params,
-    user?.access === "admin" || user?.access === "member",
+import { getSubject, getChapterContent } from "@/lib/sitemap-data";
+import { renderEditorJsToHtml } from "@/components/article-creator/editorjs-render";
+import QuestionsHydrator from "@/components/article-creator/QuestionsHydrator";
+import ChapterScaffold from "./ChapterScaffold";
+import ChapterClient from "./ChapterClient";
+import type { OutputData } from "@editorjs/editorjs";
+
+const CONTAINER_ID = "chapter-article";
+
+type PageParams = { slug: string; unit: string; id: string; title: string };
+
+/**
+ * Chapter page. Public chapters (`isPublic === true`) are server-rendered so the
+ * study-guide HTML and page-level JSON-LD reach crawlers and AI assistants in the
+ * initial response. Gated chapters fall through to `ChapterClient`, which fetches
+ * with the signed-in user's auth. If a public chapter's content can't be read
+ * server-side (e.g. a transient REST failure), we also fall back to the client
+ * renderer rather than showing nothing.
+ */
+export default async function Page({ params }: { params: PageParams }) {
+  const subject = await getSubject(params.slug);
+  const unitIndex = Number(params.unit.split("-")[1]) - 1;
+  const unit = subject?.units[unitIndex];
+  const chapterIndex =
+    unit?.chapters.findIndex((ch) => ch.id === params.id) ?? -1;
+  const chapter = chapterIndex >= 0 ? unit?.chapters[chapterIndex] : undefined;
+
+  const clientFallback = (
+    <ChapterClient
+      params={{ slug: params.slug, unit: params.unit, id: params.id }}
+    />
   );
 
-  useEffect(() => {
-    if (subject && content) {
-      const unitIndex = Number(params.unit.split("-")[1]) - 1;
-      const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
-        (ch) => ch.id === params.id,
-      );
-      const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
-
-      document.title = `FiveHive - ${subject.title} ${unitIndex + 1}.${chapterIndex + 1} - ${chapter?.title}`;
-    }
-  }, [subject, content, params.unit, params.id]);
-
-  if (loading) {
-    return (
-      <div className="flex min-h-screen grow items-center justify-center text-2xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="grid min-h-screen grow place-content-center text-xl">
-        <p>
-          {error}
-          <br />
-          Return to{" "}
-          <Link
-            href={`/subject/${params.slug}`}
-            className="text-blue-600 hover:underline"
-          >
-            subject homepage
-          </Link>
-          .
-        </p>
-      </div>
-    );
+  if (!subject || !unit || !chapter || chapter.isPublic !== true) {
+    return clientFallback;
   }
 
-  if (subject && content) {
-    const unitIndex = Number(params.unit.split("-")[1]) - 1;
-    const chapterIndex = subject.units[unitIndex]!.chapters.findIndex(
-      (ch) => ch.id === params.id,
-    );
-    const chapter = subject.units[unitIndex]!.chapters[chapterIndex];
-    const unitTitle = subject.units[unitIndex]?.title;
-
-    if (!unitTitle || !chapter) {
-      return <div>Error: Unit or chapter not found.</div>;
-    }
-
-    return (
-      <div className="relative flex grow flex-col">
-        <Navbar hideLinks />
-
-        <div className="relative mt-8 flex justify-between gap-x-16 px-10 lg:mt-16 xl:px-20">
-          <div className="flex grow flex-col items-center">
-            <SubjectBreadcrumb
-              locations={[subject.title, unitTitle, chapter.title]}
-            />
-
-            <h1 className="my-2 text-balance text-center text-5xl font-extrabold">
-              {unitIndex + 1}.{chapterIndex + 1} - {chapter.title}
-            </h1>
-            <p>{content.author}</p>
-            <div className="my-4">
-              <ProgressTracker chapterId={params.id} />
-            </div>
-
-            <Renderer content={content.data} />
-          </div>
-        </div>
-        <div className="mt-auto flex justify-center">
-          <div className="flex max-w-[65ch] grow gap-3 pt-6">
-            <PreviousArticle
-              subjectTitle={subject.title}
-              units={subject.units}
-              unitIndex={unitIndex}
-              chapterIndex={chapterIndex}
-            />
-            <NextArticle
-              subjectTitle={subject.title}
-              units={subject.units}
-              unitIndex={unitIndex}
-              chapterIndex={chapterIndex}
-            />
-          </div>
-        </div>
-
-        <Footer className="mx-0 w-full max-w-none px-10 xl:px-20" />
-      </div>
-    );
-  } else {
-    error;
-  }
-};
-
-function PreviousArticle({
-  subjectTitle,
-  units,
-  unitIndex,
-  chapterIndex,
-}: {
-  subjectTitle: string;
-  units: Unit[];
-  unitIndex: number;
-  chapterIndex: number;
-}) {
-  let unit = units[unitIndex];
-  let newUnitIndex = unitIndex;
-  let newChapterIndex = chapterIndex;
-
-  if (chapterIndex <= 0) {
-    if (unitIndex <= 0) return null;
-    newUnitIndex -= 1;
-    unit = units[newUnitIndex];
-    if (!unit?.chapters) return null;
-    newChapterIndex = unit.chapters.length - 1;
-  } else {
-    newChapterIndex -= 1;
-  }
-
-  if (!unit) return null;
-
-  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
-
-  return (
-    <Link
-      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
-      className={cn(buttonVariants({ variant: "outline" }), "gap-2")}
-    >
-      <ArrowLeft />
-      Previous Chapter
-    </Link>
-  );
-}
-
-function NextArticle({
-  subjectTitle,
-  units,
-  unitIndex,
-  chapterIndex,
-}: {
-  subjectTitle: string;
-  units: Unit[];
-  unitIndex: number;
-  chapterIndex: number;
-}) {
-  let unit = units[unitIndex];
-  let newUnitIndex = unitIndex;
-  let newChapterIndex = chapterIndex;
-
-  if (!unit?.chapters) return null;
-
-  if (chapterIndex >= unit.chapters.length - 1) {
-    if (unitIndex >= units.length - 1) return null;
-    newUnitIndex += 1;
-    unit = units[newUnitIndex];
-    newChapterIndex = 0;
-  } else {
-    newChapterIndex += 1;
-  }
-
-  if (!unit) return null;
-
-  const subjectSlug = formatSlug(subjectTitle.replace(/AP /g, ""));
+  const content = await getChapterContent(params.slug, params.unit, params.id);
+  if (!content) return clientFallback;
 
   return (
-    <Link
-      href={`/subject/${subjectSlug}/unit-${newUnitIndex + 1}-${unit.id}/chapter/${unit.chapters[newChapterIndex]?.id}/${formatSlug(unit.chapters[newChapterIndex]?.title ?? "")}`}
-      className={cn(buttonVariants({ variant: "outline" }), "ml-auto gap-2")}
+    <ChapterScaffold
+      subjectTitle={subject.title}
+      units={subject.units}
+      unitIndex={unitIndex}
+      chapterIndex={chapterIndex}
+      unitTitle={unit.title}
+      chapterTitle={chapter.title}
+      chapterId={params.id}
+      author={content.author}
     >
-      Next Chapter
-      <ArrowRight />
-    </Link>
+      <ChapterArticle data={content.data} />
+    </ChapterScaffold>
   );
 }
 
-function AuthorCredits({
-  displayName,
-  photoURL,
-}: {
-  displayName: string;
-  photoURL: string;
-}) {
+/** Server-rendered chapter body + client hydration of interactive question cards. */
+function ChapterArticle({ data }: { data: OutputData }) {
   return (
-    <div className="mb-6 flex items-center space-x-2 text-sm text-gray-600 md:mb-10">
-      <Image
-        src={photoURL}
-        alt={`${displayName}'s profile`}
-        width={24}
-        height={24}
-        className="rounded-full"
-      />
-      <span className="ml-3 font-medium">{displayName}</span>
-    </div>
+    <>
+      <article
+        id={CONTAINER_ID}
+        className="prose before:prose-code:content-none after:prose-code:content-none"
+        dangerouslySetInnerHTML={{ __html: renderEditorJsToHtml(data) }}
+      ></article>
+      <QuestionsHydrator content={data} containerId={CONTAINER_ID} />
+    </>
   );
 }
-
-export default Page;
diff --git a/src/app/subject/[slug]/(sidebar)/layout.tsx b/src/app/subject/[slug]/(sidebar)/layout.tsx
index 104dfd7a..dd37cfa0 100644
--- a/src/app/subject/[slug]/(sidebar)/layout.tsx
+++ b/src/app/subject/[slug]/(sidebar)/layout.tsx
@@ -8,7 +8,6 @@ import { type Subject } from "@/types/firestore";
 
 import { db } from "@/lib/firebase";
 import { doc, getDoc } from "firebase/firestore";
-import Link from "next/link";
 import { useUser } from "@/components/hooks/UserContext";
 
 export default function Layout({
@@ -23,62 +22,45 @@ export default function Layout({
   const { user } = useUser();
 
   const [subject, setSubject] = useState<Subject | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (user === undefined) return;
+
     const fetchSubject = async () => {
       try {
+        const isAuthorized = user && (user.access === "admin" || user.access === "member" || user.access === "grader");
+        if (params.slug === "porting" && !isAuthorized) {
+          return;
+        }
         const docRef = doc(db, "subjects", params.slug);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
           setSubject(docSnap.data() as Subject);
-        } else {
-          setError("Subject not found. That's probably us, not you.");
         }
       } catch (error) {
         console.error("Error fetching subject data:", error);
-        setError("Failed to fetch subject data.");
-      } finally {
-        setLoading(false);
       }
     };
 
     fetchSubject().catch((error) => {
       console.error(error);
     });
-  }, [params.slug]);
-
-  if (loading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error ?? !subject) {
-    return (
-      <div className="grid min-h-screen place-content-center text-xl">
-        <p>
-          {error}
-          <br />
-          Return to{" "}
-          <Link href="/" className="text-blue-600 hover:underline">
-            FiveHive&apos;s homepage
-          </Link>
-          .
-        </p>
-      </div>
-    );
-  }
+  }, [params.slug, user]);
 
+  // `{children}` must always render: this layout wraps server-rendered chapter
+  // pages, and short-circuiting on the client `loading`/`error` state (which is
+  // `loading === true` during SSR) would strip the chapter content and its
+  // page-level JSON-LD out of the static HTML. The sidebar's own subject fetch is
+  // independent of the page, so a sidebar load failure just omits the rail — the
+  // page renders (and surfaces any content errors) regardless.
   return (
     <div className="relative flex min-h-screen">
-      <SubjectSidebar
-        subject={subject}
-        preview={user?.access === "member" || user?.access === "admin"}
-      />
+      {subject ? (
+        <SubjectSidebar
+          subject={subject}
+          preview={user?.access === "member" || user?.access === "admin"}
+        />
+      ) : null}
       {children}
     </div>
   );
diff --git a/src/app/subject/[slug]/(sidebar)/page.tsx b/src/app/subject/[slug]/(sidebar)/page.tsx
index 9b37c680..e41dc81b 100644
--- a/src/app/subject/[slug]/(sidebar)/page.tsx
+++ b/src/app/subject/[slug]/(sidebar)/page.tsx
@@ -23,6 +23,12 @@ const Page = ({ params }: { params: { slug: string } }) => {
   useEffect(() => {
     const fetchSubject = async () => {
       try {
+        const isAuthorized = user && (user.access === "admin" || user.access === "member" || user.access === "grader");
+        if (params.slug === "porting" && !isAuthorized) {
+          setError("Subject not found. That's probably us, not you.");
+          setLoading(false);
+          return;
+        }
         const docRef = doc(db, "subjects", params.slug);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
diff --git a/src/app/subject/[slug]/layout.tsx b/src/app/subject/[slug]/layout.tsx
new file mode 100644
index 00000000..88fee478
--- /dev/null
+++ b/src/app/subject/[slug]/layout.tsx
@@ -0,0 +1,38 @@
+import { type Metadata } from "next";
+import { getSubjectTitle } from "@/lib/sitemap-data";
+
+// Server layout for every page under /subject/[slug]. Its only job is to attach
+// real per-subject metadata (title, description, canonical, OpenGraph) so
+// crawlers and AI assistants can disambiguate subjects instead of seeing the
+// generic global title. The nested (sidebar)/(no-sidebar) client layouts and
+// pages render unchanged inside it.
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  const name = (await getSubjectTitle(params.slug)) ?? "AP Subject";
+  const title = `${name} Study Guide & Notes`;
+  const description = `Free ${name} study guides, unit-by-unit notes, and practice questions written by students who aced the exam. Review every unit of ${name} on FiveHive.`;
+  const url = `/subject/${params.slug}`;
+
+  return {
+    title,
+    description,
+    alternates: { canonical: url },
+    openGraph: {
+      type: "article",
+      title: `${title} | FiveHive`,
+      description,
+      url,
+    },
+  };
+}
+
+export default function SubjectLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}
diff --git a/src/components/article-creator/ArticleCreator.tsx b/src/components/article-creator/ArticleCreator.tsx
index d730fc91..b0184a66 100644
--- a/src/components/article-creator/ArticleCreator.tsx
+++ b/src/components/article-creator/ArticleCreator.tsx
@@ -97,7 +97,7 @@ function ArticleCreator({ className }: { className?: string }) {
     version: "2.30.2",
   });
 
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const pathParts = pathname.split("/").slice(-4);
   const subject = pathParts[0]!;
   const unit = pathParts[1]!;
diff --git a/src/components/article-creator/Editor.tsx b/src/components/article-creator/Editor.tsx
index cf8c2b0d..5bc34f41 100644
--- a/src/components/article-creator/Editor.tsx
+++ b/src/components/article-creator/Editor.tsx
@@ -1,8 +1,8 @@
 import React, { memo, useEffect, useRef, useState } from "react";
 import {
   type EditorConfig,
-  type ToolConstructable,
   type OutputData,
+  type ToolConstructable,
 } from "@editorjs/editorjs";
 import useEditor from "hooks/useEditor";
 
@@ -30,7 +30,7 @@ import {
   uploadBytes,
 } from "firebase/storage";
 import { buttonVariants } from "../ui/button";
-import { cn } from "@/lib/utils";
+import { cn, resolveUploadContentType } from "@/lib/utils";
 
 interface EditorImageData {
   file: { url?: string; storageRefFullPath?: string; [key: string]: unknown };
@@ -40,13 +40,90 @@ interface EditorImageData {
   stretched?: boolean;
 }
 
+type MenuConfigItemList = Array<{
+  name: string;
+  icon: string;
+  title: string;
+  onActivate?: () => void;
+  toggle?: boolean;
+}>;
+
+type CustomImageTool = {
+  _data: EditorImageData;
+  api: {
+    blocks: {
+      getBlockIndex(blockId: string): number;
+      delete(index?: number): void;
+    };
+  };
+  block: {
+    id: string;
+  };
+  renderSettings(): MenuConfigItemList;
+};
+
+const pendingStorageDeletes = new Set<string>();
+
+function isStorageObjectNotFoundError(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === "storage/object-not-found"
+  );
+}
+
 // https://github.com/editor-js/image/issues/54#issuecomment-1546833098
 // https://github.com/editor-js/image/issues/27
 class CustomImage extends Image {
+  renderSettings(): MenuConfigItemList {
+    const typedTool = this as unknown as CustomImageTool;
+    const baseImageTool = Image as unknown as {
+      prototype: {
+        renderSettings(this: CustomImageTool): MenuConfigItemList;
+      };
+    };
+    // The EditorJS image package ships loose inherited typings here, so we
+    // constrain the call at the boundary instead of widening the rest of the file.
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    const settings = baseImageTool.prototype.renderSettings.call(typedTool);
+    const settingsArray = (
+      Array.isArray(settings) ? settings : [settings]
+    ) as unknown[];
+
+    return [
+      {
+        name: "deleteImage",
+        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M6 6l1 14h10l1-14"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>`,
+        title: "Delete image",
+        onActivate: () => {
+          const { file } = typedTool._data;
+          const blockIndex = typedTool.api.blocks.getBlockIndex(
+            typedTool.block.id,
+          );
+
+          if (blockIndex === -1) {
+            return;
+          }
+
+          if (file.storageRefFullPath) {
+            pendingStorageDeletes.add(file.storageRefFullPath);
+          }
+
+          typedTool.api.blocks.delete(blockIndex);
+        },
+      },
+      ...settingsArray,
+    ] as unknown as MenuConfigItemList;
+  }
+
   removed() {
     const { file } = this._data as EditorImageData;
 
     if (!file.storageRefFullPath) return;
+    if (!pendingStorageDeletes.has(file.storageRefFullPath)) return;
+
+    pendingStorageDeletes.delete(file.storageRefFullPath);
 
     const storage = getStorage();
     const storageRef = ref(storage, file.storageRefFullPath);
@@ -55,10 +132,14 @@ class CustomImage extends Image {
         console.log("Deleted " + file.storageRefFullPath);
       })
       .catch((error) => {
-        console.log(error);
-        alert(
-          "Failed to delete image from Firebase Storage: notify FiveHive Website Team.\n" +
-            String(error),
+        if (isStorageObjectNotFoundError(error)) {
+          return;
+        }
+
+        console.error(
+          "Failed to delete image from Firebase Storage:",
+          file.storageRefFullPath,
+          error,
         );
       });
   }
@@ -100,7 +181,12 @@ export const EDITOR_TOOLS: EditorConfig["tools"] = {
           );
 
           try {
-            const snapshot = await uploadBytes(storageRef, file);
+            const contentType = resolveUploadContentType(file);
+            const snapshot = await uploadBytes(
+              storageRef,
+              file,
+              contentType ? { contentType } : undefined,
+            );
             const downloadURL = await getDownloadURL(snapshot.ref);
 
             return {
@@ -368,7 +454,10 @@ const Editor = ({
       />
 
       <div className="mb-4 rounded-sm border p-3">
-        <label className="mb-2 block text-sm font-medium" htmlFor="pasted-editor-json">
+        <label
+          className="mb-2 block text-sm font-medium"
+          htmlFor="pasted-editor-json"
+        >
           Paste raw Editor JSON
         </label>
         <textarea
@@ -380,10 +469,7 @@ const Editor = ({
         />
         <div className="mt-2 flex justify-end">
           <button
-            className={cn(
-              buttonVariants({ variant: "outline" }),
-              "rounded-sm",
-            )}
+            className={cn(buttonVariants({ variant: "outline" }), "rounded-sm")}
             onClick={handleImportPastedJson}
             type="button"
           >
diff --git a/src/components/article-creator/FetchArticleFunctions.tsx b/src/components/article-creator/FetchArticleFunctions.tsx
index fb68455e..c66f1ad2 100644
--- a/src/components/article-creator/FetchArticleFunctions.tsx
+++ b/src/components/article-creator/FetchArticleFunctions.tsx
@@ -6,6 +6,7 @@ import type { QuestionFormat } from "@/types/questions";
 import { type OutputData } from "@editorjs/editorjs";
 import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { getFileFromIndexedDB } from "./custom_questions/RenderAdvancedTextbox";
+import { resolveUploadContentType } from "@/lib/utils";
 
 export interface ImageData {
   caption: string;
@@ -37,7 +38,11 @@ export const processQuestions = async (
       ...question.options.flatMap((option) => option.value.files || []),
     ];
 
-    allFiles.forEach((file) => allFileKeys.add(file.key));
+    allFiles.forEach((file) => {
+      if (!file.url?.startsWith("http")) {
+        allFileKeys.add(file.key);
+      }
+    });
   });
 
   // Read all files from IndexedDB
@@ -63,7 +68,12 @@ export const processQuestions = async (
   await Promise.all(
     Array.from(fileKeyToFile.entries()).map(async ([fileKey, file]) => {
       const storageRef = ref(storage, fileKey);
-      const snapshot = await uploadBytes(storageRef, file);
+      const contentType = resolveUploadContentType(file);
+      const snapshot = await uploadBytes(
+        storageRef,
+        file,
+        contentType ? { contentType } : undefined,
+      );
       const downloadURL = await getDownloadURL(snapshot.ref);
       fileKeyToDownloadURL.set(fileKey, downloadURL);
     }),
diff --git a/src/components/article-creator/QuestionsHydrator.tsx b/src/components/article-creator/QuestionsHydrator.tsx
new file mode 100644
index 00000000..985d00c2
--- /dev/null
+++ b/src/components/article-creator/QuestionsHydrator.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { OutputData } from "@editorjs/editorjs";
+import { useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QuestionsOutput } from "./custom_questions/QuestionInstance";
+import type { QuestionFormat } from "@/types/questions";
+
+const rootMap = new Map<Element, Root>();
+
+/**
+ * Hydrates the interactive question cards inside server- or client-rendered
+ * chapter markup. The markup (from `renderEditorJsToHtml`) emits an empty
+ * `.questions-block-<instanceId>` placeholder for every `questionsAddCard` block;
+ * this component finds each placeholder in the DOM, seeds the question data into
+ * `localStorage` (the contract `QuestionsOutput` reads from), and mounts a React
+ * root into it. Renders nothing itself.
+ *
+ * `containerId` scopes the placeholder lookup to a single article so multiple
+ * renderers on a page don't clobber each other.
+ */
+export default function QuestionsHydrator({
+  content,
+  containerId,
+}: {
+  content: OutputData;
+  containerId: string;
+}) {
+  useEffect(() => {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const instanceIdsLoaded = new Set<string>();
+
+    content.blocks.forEach((block) => {
+      /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
+      if (block.type !== "questionsAddCard") return;
+
+      const instanceId = block.data.instanceId as string;
+      const storageKey = `questions_${instanceId}`;
+
+      if (!instanceIdsLoaded.has(instanceId)) {
+        const questionsFromDb: QuestionFormat[] = (
+          block.data.questions as QuestionFormat[]
+        ).map((questionInstance) => ({
+          ...questionInstance,
+          questionInstance: questionInstance.question || { value: "" },
+          options: questionInstance.options.map((option) => ({
+            ...option,
+            value: option.value || { value: "" },
+          })),
+          answers: questionInstance.answers || [],
+          explanation: questionInstance.explanation || { value: "" },
+        }));
+
+        localStorage.setItem(storageKey, JSON.stringify(questionsFromDb));
+        window.dispatchEvent(new Event("questionsUpdated"));
+        instanceIdsLoaded.add(instanceId);
+      }
+
+      const placeholder = container.querySelector(
+        `.questions-block-${instanceId}`,
+      );
+      if (placeholder) {
+        let root = rootMap.get(placeholder);
+        if (!root) {
+          root = createRoot(placeholder);
+          rootMap.set(placeholder, root);
+        }
+        root.render(<QuestionsOutput instanceId={instanceId.toString()} />);
+      }
+      /* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
+    });
+  }, [content, containerId]);
+
+  return null;
+}
diff --git a/src/components/article-creator/Renderer.tsx b/src/components/article-creator/Renderer.tsx
index 880c26b3..62e2a036 100644
--- a/src/components/article-creator/Renderer.tsx
+++ b/src/components/article-creator/Renderer.tsx
@@ -134,14 +134,14 @@ const customParsers: Record<
     const rows = content.map((row, index) => {
       if (withHeadings && index === 0) {
         return `<tr class="divide-x-[1px]">${row.reduce(
-          (acc, cell) => acc + `<th>${cell}</th>`,
+          (acc, cell) => acc + `<th>${parseLatex(cell)}</th>`,
           "",
         )}</tr>`;
       }
 
       // For other rows, use <td> tags
       return `<tr class="divide-x-[1px]">${row.reduce(
-        (acc, cell) => acc + `<td>${cell}</td>`,
+        (acc, cell) => acc + `<td>${parseLatex(cell)}</td>`,
         "",
       )}</tr>`;
     });
@@ -210,9 +210,17 @@ const customParsers: Record<
   },
 
   image: (data, _config) => {
+    // SVGs (viewBox only) collapse or render at the 300x150 replaced-element
+    // default unless given a definite width, so tag them for the .img-svg rule.
+    const storageRefPath = data.file?.storageRefFullPath;
+    const storagePath =
+      typeof storageRefPath === "string" ? storageRefPath : "";
+    const isSvg =
+      storagePath.toLowerCase().endsWith(".svg") ||
+      (typeof data.url === "string" && data.url.toLowerCase().includes(".svg"));
     const imageConditions = `${data.stretched ? "img-fullwidth" : ""} ${
       data.withBorder ? "img-border" : ""
-    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""}`;
+    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""} ${isSvg ? "img-svg" : ""}`;
     const imgClass = _config.image.imgClass ?? "";
     let imageSrc;
 
diff --git a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
index 36beb74b..a6784cdc 100644
--- a/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/AdvancedTextbox.tsx
@@ -5,15 +5,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 import React, { useRef, useState, useEffect } from "react";
 import { Textarea } from "@/components/ui/textarea";
-import type {
-  QuestionFile,
-  QuestionFormat,
-  QuestionInput,
-} from "@/types/questions";
-import { QuestionsInput } from "./QuestionInstance";
-import { Paperclip, Trash } from "lucide-react";
-import { deleteObject, getStorage, ref } from "firebase/storage";
+import type { QuestionFile, QuestionFormat } from "@/types/questions";
+import { Paperclip, Trash, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  deleteObject,
+  getStorage,
+  ref,
+  uploadBytes,
+  getDownloadURL,
+} from "firebase/storage";
 import { getUser } from "@/components/hooks/users";
+import { getFileFromIndexedDB } from "./RenderAdvancedTextbox";
+import { isSvgFileName, resolveUploadContentType } from "@/lib/utils";
 
 interface Props {
   questions: QuestionFormat[];
@@ -25,6 +28,15 @@ interface Props {
   setUnsavedChanges?: (unchangedChanges: boolean) => void;
 }
 
+function isStorageObjectNotFoundError(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === "storage/object-not-found"
+  );
+}
+
 // Utility to store a file in IndexedDB with a unique key for each instance
 function storeFileInIndexedDB(name: string, file: File) {
   const dbRequest = indexedDB.open("mediaFilesDB", 3);
@@ -73,6 +85,79 @@ function deleteFileFromIndexedDB(name: string) {
   });
 }
 
+function areFilesEqual(a: QuestionFile[], b: QuestionFile[]) {
+  if (a.length !== b.length) return false;
+
+  return a.every((file, index) => {
+    const other = b[index];
+    return (
+      !!other &&
+      file.key === other.key &&
+      file.url === other.url &&
+      file.name === other.name &&
+      file.alt === other.alt &&
+      file.order === other.order
+    );
+  });
+}
+
+// Helper component to display visual thumbnails/previews of files in editing mode
+const ThumbnailPreview: React.FC<{ file: QuestionFile }> = ({ file }) => {
+  const [src, setSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    let url: string | null = null;
+    if (file.url) {
+      setSrc(file.url);
+      return;
+    }
+
+    const loadLocal = async () => {
+      try {
+        const stored = await getFileFromIndexedDB(file.key);
+        if (stored?.file) {
+          url = URL.createObjectURL(stored.file);
+          setSrc(url);
+        }
+      } catch (err) {
+        console.error("Error loading thumbnail:", err);
+      }
+    };
+    void loadLocal();
+
+    return () => {
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [file]);
+
+  if (!src) {
+    return (
+      <div className="flex h-20 w-20 items-center justify-center rounded bg-gray-100 text-gray-400">
+        <span className="text-[10px]">Loading...</span>
+      </div>
+    );
+  }
+
+  if (file.key.startsWith("image-") || file.key.startsWith("image/")) {
+    return (
+      <img
+        src={src}
+        alt="Thumbnail preview"
+        className="h-20 w-20 rounded border border-gray-200 object-cover"
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-20 w-20 flex-col items-center justify-center rounded border border-blue-200 bg-blue-50 text-blue-500">
+      <Paperclip size={20} />
+      <span className="mt-1 max-w-[70px] truncate px-1 text-[9px]">
+        {file.name}
+      </span>
+    </div>
+  );
+};
+
 export default function AdvancedTextbox({
   questions,
   qIndex,
@@ -85,31 +170,47 @@ export default function AdvancedTextbox({
   const questionInstance = questions[qIndex];
   const [currentText, setCurrentText] = useState<string>("");
   const [uploadedFiles, setUploadedFiles] = useState<QuestionFile[]>([]);
+  const [uploadStatuses, setUploadStatuses] = useState<
+    Record<
+      string,
+      { status: "uploading" | "success" | "error"; error?: string }
+    >
+  >({});
+
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Initialize currentText and fileExists when question gets loaded from db if any
+  // Sync state when loaded
   useEffect(() => {
-    if (origin === "option" && oIndex !== undefined) {
-      if (questionInstance!.options[oIndex]?.value?.value) {
-        setCurrentText(questionInstance!.options[oIndex].value.value);
-      }
+    const nextText =
+      origin === "option" && oIndex !== undefined
+        ? (questionInstance!.options[oIndex]?.value?.value ?? "")
+        : origin === "question" ||
+            origin === "explanation" ||
+            origin === "content"
+          ? (questionInstance![origin]?.value ?? "")
+          : "";
+
+    const nextFiles =
+      origin === "option" && oIndex !== undefined
+        ? (questionInstance!.options[oIndex]?.value?.files ?? [])
+        : origin === "question" ||
+            origin === "explanation" ||
+            origin === "content"
+          ? (questionInstance![origin]?.files ?? [])
+          : [];
+
+    if (currentText !== nextText) {
+      setCurrentText(nextText);
+    }
 
-      setUploadedFiles(questionInstance!.options[oIndex]?.value?.files ?? []);
-    } else if (
-      origin === "question" ||
-      origin === "explanation" ||
-      origin === "content"
-    ) {
-      if (questionInstance![origin]?.value) {
-        setCurrentText(questionInstance![origin].value);
-      }
-      setUploadedFiles(questionInstance![origin]?.files ?? []);
+    if (!areFilesEqual(uploadedFiles, nextFiles)) {
+      setUploadedFiles(nextFiles);
     }
   }, [questionInstance, oIndex, origin]);
 
+  // Handle keys logic
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Keys are being handled by EditorJS rather than default behavior, so we need to block the EditorJS behavior
     const key = e.key;
 
     if (
@@ -131,22 +232,23 @@ export default function AdvancedTextbox({
       const textBeforeCursor = currentText.substring(0, cursorPosition);
       const textAfterCursor = currentText.substring(textarea.selectionEnd);
 
-      // Find the current line the cursor is on
       const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
       const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
-      
-      // Match leading whitespace
+
       const match = currentLine.match(/^\s*/);
       const leadingWhitespace = match ? match[0] : "";
 
       if (leadingWhitespace) {
         e.preventDefault();
-        const newText = textBeforeCursor + "\n" + leadingWhitespace + textAfterCursor;
+        const newText =
+          textBeforeCursor + "\n" + leadingWhitespace + textAfterCursor;
         updateQuestionText(newText);
 
         setTimeout(() => {
           if (textareaRef.current) {
-            textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition + 1 + leadingWhitespace.length;
+            textareaRef.current.selectionStart =
+              textareaRef.current.selectionEnd =
+                cursorPosition + 1 + leadingWhitespace.length;
           }
         }, 0);
       }
@@ -162,22 +264,22 @@ export default function AdvancedTextbox({
         const lastNewLineIndex = textBeforeCursor.lastIndexOf("\n");
         const currentLine = textBeforeCursor.substring(lastNewLineIndex + 1);
 
-        // If the line up to the cursor is purely spaces, treat it as indentation
         if (currentLine.length > 0 && /^\s+$/.test(currentLine)) {
           e.preventDefault();
-          
-          // delete 2 spaces instead of 1 if possible
+
           const spacesToDelete = currentLine.length % 2 !== 0 ? 1 : 2;
 
-          const newText = 
-            currentText.substring(0, cursorPosition - spacesToDelete) + 
+          const newText =
+            currentText.substring(0, cursorPosition - spacesToDelete) +
             currentText.substring(cursorPosition);
-            
+
           updateQuestionText(newText);
 
           setTimeout(() => {
             if (textareaRef.current) {
-              textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition - spacesToDelete;
+              textareaRef.current.selectionStart =
+                textareaRef.current.selectionEnd =
+                  cursorPosition - spacesToDelete;
             }
           }, 0);
         }
@@ -195,23 +297,54 @@ export default function AdvancedTextbox({
       const end = textarea.selectionEnd;
       const indent = "  ";
       const newText =
-      currentText.substring(0, start) + indent + currentText.substring(end);
-      
+        currentText.substring(0, start) + indent + currentText.substring(end);
+
       updateQuestionText(newText);
 
       setTimeout(() => {
         if (textareaRef.current) {
-          textareaRef.current.selectionStart = textareaRef.current.selectionEnd =
-            start + indent.length;
+          textareaRef.current.selectionStart =
+            textareaRef.current.selectionEnd = start + indent.length;
         }
       }, 0);
     }
   };
 
+  const updateQuestionsWithFiles = (newFiles: QuestionFile[]) => {
+    setUnsavedChanges?.(true);
+    const updatedQuestions = [...questions];
+    const updatedQuestion = { ...questionInstance! };
+
+    if (
+      origin === "question" ||
+      origin === "explanation" ||
+      origin === "content"
+    ) {
+      updatedQuestion[origin] = {
+        ...updatedQuestion[origin],
+        files: newFiles,
+      };
+    } else if (origin === "option" && oIndex !== undefined) {
+      updatedQuestion.options = [
+        ...updatedQuestion.options.slice(0, oIndex),
+        {
+          value: {
+            ...updatedQuestion.options[oIndex]!.value,
+            files: newFiles,
+          },
+          id: updatedQuestion.options[oIndex]!.id,
+        },
+        ...updatedQuestion.options.slice(oIndex + 1),
+      ];
+    }
+
+    updatedQuestions[qIndex] = updatedQuestion;
+    setQuestions(updatedQuestions);
+  };
+
   const updateQuestionText = (newText: string) => {
     setUnsavedChanges?.(true);
     setCurrentText(newText);
-    // Clone the current question to avoid direct mutation
     const updatedQuestions = [...questions];
     if (
       origin === "question" ||
@@ -223,12 +356,11 @@ export default function AdvancedTextbox({
         [origin]: {
           ...questionInstance![origin],
           value: newText,
-          files: questionInstance?.[origin]?.files ?? [], // Keep the files they exist
-        }, // Clone question
+          files: questionInstance?.[origin]?.files ?? [],
+        },
       };
       updatedQuestions[qIndex] = updatedQuestion;
     } else if (origin === "option" && oIndex !== undefined) {
-      // oIndex !== undefined because 0 is falsy
       const updatedQuestion: QuestionFormat = {
         ...questionInstance!,
         options: [
@@ -246,7 +378,7 @@ export default function AdvancedTextbox({
       updatedQuestions[qIndex] = updatedQuestion;
     }
 
-    setQuestions(updatedQuestions); // Update state immutably
+    setQuestions(updatedQuestions);
   };
 
   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -257,11 +389,56 @@ export default function AdvancedTextbox({
     fileInputRef.current?.click();
   };
 
+  // Immediate upload to Firebase Storage
+  const uploadSingleFile = async (fileKey: string, file: File) => {
+    setUploadStatuses((prev) => ({
+      ...prev,
+      [fileKey]: { status: "uploading" },
+    }));
+
+    try {
+      const storage = getStorage();
+      const storageRef = ref(storage, fileKey);
+      const contentType = resolveUploadContentType(file);
+      const snapshot = await uploadBytes(
+        storageRef,
+        file,
+        contentType ? { contentType } : undefined,
+      );
+      const downloadURL = await getDownloadURL(snapshot.ref);
+
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: { status: "success" },
+      }));
+
+      // Update the file URL in the state and questions
+      setUploadedFiles((prevFiles) => {
+        const updated = prevFiles.map((f) =>
+          f.key === fileKey ? { ...f, url: downloadURL } : f,
+        );
+        updateQuestionsWithFiles(updated);
+        return updated;
+      });
+    } catch (err) {
+      console.error(`Failed to upload file ${file.name}:`, err);
+      setUploadStatuses((prev) => ({
+        ...prev,
+        [fileKey]: {
+          status: "error",
+          error: err instanceof Error ? err.message : "Upload failed",
+        },
+      }));
+    }
+  };
+
   const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
     const fileList = e.target.files ?? [];
     let files = Array.from(fileList).filter(
       (file) =>
-        file.type.startsWith("image/") || file.type.startsWith("audio/"),
+        file.type.startsWith("image/") ||
+        file.type.startsWith("audio/") ||
+        isSvgFileName(file.name),
     );
 
     const validFiles = files.filter((file) => file.size <= 5 * 1024 * 1024);
@@ -274,71 +451,45 @@ export default function AdvancedTextbox({
       alert(
         "No valid file selected (photo or audio). Try uploading again or contact support.",
       );
-      return; // Early return if file is not defined
+      return;
     }
 
-    const storeAndAppendIfNewKey = (
-      questionInput: QuestionInput,
-      files: File[],
-    ) => {
-      const newFiles = files.flatMap((file) => {
-        const fileKey = `${file.type}-${file.lastModified}`;
-        if (questionInput.files.map((file) => file.key).includes(fileKey)) {
-          return [];
-        } else {
-          storeFileInIndexedDB(fileKey, file);
-          return [
-            {
-              key: fileKey,
-              name: file.name,
-            },
-          ];
-        }
+    const newFiles: QuestionFile[] = [];
+    const filesToUpload: { key: string; file: File }[] = [];
+
+    files.forEach((file) => {
+      // Resolve the MIME type (some SVGs report an empty file.type) and build a
+      // storage-safe key. Stripping non-alphanumerics also removes the "+" in
+      // image/svg+xml, while keeping the leading "image-" prefix the renderer
+      // uses to treat the file as an image.
+      const mimeType =
+        file.type || (isSvgFileName(file.name) ? "image/svg+xml" : "");
+      const sanitizedType = mimeType.replace(/[^a-z0-9]+/gi, "-");
+      const fileKey = `${sanitizedType}-${Date.now()}-${file.name}`;
+
+      storeFileInIndexedDB(fileKey, file);
+
+      newFiles.push({
+        key: fileKey,
+        name: file.name,
+        order: uploadedFiles.length + newFiles.length,
       });
-      // Recreate array for set state
-      questionInput.files = [...questionInput.files, ...newFiles];
-    };
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
-
-    if (origin === "question") {
-      const questionInput: QuestionInput = { ...updatedQuestion.question };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.question = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "option" && oIndex !== undefined) {
-      // Update a specific option by oIndex
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
-      storeAndAppendIfNewKey(optionInput, files);
-      updatedQuestion.options[oIndex]!.value = optionInput; // Update only the specified option
-      setUploadedFiles(optionInput.files);
-    } else if (origin === "explanation") {
-      const questionInput: QuestionInput = {
-        ...updatedQuestion.explanation,
-      };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.explanation = questionInput;
-      setUploadedFiles(questionInput.files);
-    } else if (origin === "content") {
-      const questionInput: QuestionInput = { ...updatedQuestion.content };
-      storeAndAppendIfNewKey(questionInput, files);
-      updatedQuestion.content = questionInput;
-      setUploadedFiles(questionInput.files);
-    }
-    updatedQuestions[qIndex] = updatedQuestion;
+      filesToUpload.push({ key: fileKey, file });
+    });
 
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+    const nextFiles = [...uploadedFiles, ...newFiles];
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    // Reset input value so duplicate files can be reuploaded in the case of deletion
-    // Code logic will catch actual duplicates
     e.target.value = "";
+
+    // Trigger immediate uploads
+    filesToUpload.forEach(({ key, file }) => {
+      void uploadSingleFile(key, file);
+    });
   };
 
-  // Function to delete a file from Firebase Storage
   async function deleteFileFromStorage(fileKey: string): Promise<void> {
     const user = await getUser();
 
@@ -354,58 +505,90 @@ export default function AdvancedTextbox({
       if (!storageRef) return;
       await deleteObject(storageRef);
     } catch (error) {
+      if (isStorageObjectNotFoundError(error)) {
+        return;
+      }
+
       console.error(`Error deleting file ${fileKey} from storage:`, error);
-      // You might want to handle specific error codes here
       return;
     }
   }
 
-  const handleDeleteFile = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const fileKey = e.currentTarget.dataset.fileKey;
+  const handleDeleteFile = (fileKey: string) => {
+    const nextFiles = uploadedFiles.filter((file) => file.key !== fileKey);
+    setUploadedFiles(nextFiles);
+    updateQuestionsWithFiles(nextFiles);
 
-    if (!fileKey) {
-      alert("Error deleting file, please try again");
-      return;
+    setUploadStatuses((prev) => {
+      const next = { ...prev };
+      delete next[fileKey];
+      return next;
+    });
+
+    void deleteFileFromIndexedDB(fileKey);
+    void deleteFileFromStorage(fileKey);
+  };
+
+  const handleRetryUpload = async (fileKey: string, fileName: string) => {
+    try {
+      const stored = await getFileFromIndexedDB(fileKey);
+      if (stored?.file) {
+        void uploadSingleFile(fileKey, stored.file);
+      } else {
+        alert(
+          `Could not find local file data for "${fileName}". Please remove and re-upload.`,
+        );
+      }
+    } catch (err) {
+      console.error("Retry load from IndexedDB failed:", err);
+      alert("Failed to retry. Please try uploading the file again.");
     }
+  };
 
-    const updatedQuestions = [...questions];
-    const updatedQuestion: QuestionFormat = { ...questionInstance! };
+  const updateFileAlt = (fileKey: string, newAlt: string) => {
+    const updated = uploadedFiles.map((f) =>
+      f.key === fileKey ? { ...f, alt: newAlt } : f,
+    );
+    setUploadedFiles(updated);
+    updateQuestionsWithFiles(updated);
+  };
 
-    const deleteFile = (question: QuestionInput) => {
-      deleteFileFromIndexedDB(fileKey).catch((error) => {
-        console.error("Error deleting file from IndexedDB:", error);
-      });
-      deleteFileFromStorage(fileKey).catch((error) => {
-        console.error("Error deleting file from Storage:", error);
-      });
+  const moveFile = (index: number, direction: "left" | "right") => {
+    const targetIndex = index + (direction === "left" ? -1 : 1);
+    if (targetIndex < 0 || targetIndex >= uploadedFiles.length) return;
 
-      question.files = question.files.filter((file) => file.key !== fileKey);
-      setUploadedFiles(question.files);
-    };
+    const nextFiles = [...uploadedFiles];
+    const temp = nextFiles[index]!;
+    nextFiles[index] = nextFiles[targetIndex]!;
+    nextFiles[targetIndex] = temp;
 
-    if (
-      origin === "question" ||
-      origin === "explanation" ||
-      origin === "content"
-    ) {
-      const questionInput: QuestionInput = { ...updatedQuestion[origin] };
+    const orderedFiles = nextFiles.map((f, idx) => ({ ...f, order: idx }));
+    setUploadedFiles(orderedFiles);
+    updateQuestionsWithFiles(orderedFiles);
+  };
 
-      deleteFile(questionInput);
+  const insertPlaceholder = (file: QuestionFile, index: number) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
 
-      updatedQuestion[origin] = questionInput;
-    } else if (origin === "option" && oIndex !== undefined) {
-      const optionInput: QuestionInput = {
-        ...updatedQuestion.options[oIndex]!.value,
-      };
+    const placeholderText = `[image:${index + 1}]`;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
 
-      deleteFile(optionInput);
+    const newText =
+      currentText.substring(0, start) +
+      placeholderText +
+      currentText.substring(end);
 
-      updatedQuestion.options[oIndex]!.value = optionInput;
-    }
+    updateQuestionText(newText);
 
-    updatedQuestions[qIndex] = updatedQuestion;
-    setQuestions(updatedQuestions);
-    setUnsavedChanges?.(true);
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(
+        start + placeholderText.length,
+        start + placeholderText.length,
+      );
+    }, 0);
   };
 
   return (
@@ -417,7 +600,7 @@ export default function AdvancedTextbox({
         onKeyDown={handleKeyDown}
         placeholder={
           placeholder ??
-          "Type or drag and drop here (only 1 file allowed). Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code."
+          "Type or drag and drop here. Latex syntax starts with $@ and ends with $ (eg: $@e^{ipi} + 1 = 0$). Code blocks use ``` around the code. References to images can be made via [image:1] placeholders."
         }
       />
 
@@ -430,28 +613,131 @@ export default function AdvancedTextbox({
         multiple
       />
 
-      {/* Section under the textarea for upload and delete buttons */}
-      <div className="mt-2">
-        {uploadedFiles.length > 0 &&
-          uploadedFiles.map((file) => (
-            <div key={file.key} className="mb-2 flex items-center space-x-2">
-              <button
-                type="button"
-                className="flex items-center text-red-500 hover:underline"
-                onClick={handleDeleteFile}
-                data-file-key={file.key}
+      {/* Grid of uploaded file cards with visual preview, load states, and alt tag fields */}
+      {uploadedFiles.length > 0 && (
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {uploadedFiles.map((file, index) => {
+            const statusInfo = uploadStatuses[file.key] ?? {
+              status: file.url ? "success" : "uploading",
+            };
+            return (
+              <div
+                key={file.key}
+                className="flex flex-col rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all duration-200 hover:shadow"
               >
-                Delete file <Trash className="ml-1 size-5" />
-              </button>
-              <div>{file.name}</div>
-            </div>
-          ))}
+                <div className="flex items-start gap-3">
+                  <div className="relative shrink-0">
+                    <ThumbnailPreview file={file} />
+                    {statusInfo.status === "uploading" && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded bg-black/40">
+                        <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent" />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="min-w-0 flex-1">
+                    <div
+                      className="truncate text-xs font-semibold text-gray-800"
+                      title={file.name}
+                    >
+                      {file.name}
+                    </div>
+
+                    {statusInfo.status === "error" && (
+                      <div className="mt-1 flex flex-col gap-1">
+                        <span className="text-[10px] font-bold text-red-500">
+                          Upload failed: {statusInfo.error ?? "Unknown error"}
+                        </span>
+                        <button
+                          type="button"
+                          onClick={() => handleRetryUpload(file.key, file.name)}
+                          className="w-fit text-[10px] font-medium text-blue-600 hover:underline"
+                        >
+                          Retry Upload
+                        </button>
+                      </div>
+                    )}
+
+                    {statusInfo.status === "success" && (
+                      <span className="mt-1 inline-flex items-center rounded border border-green-200 bg-green-50 px-1.5 py-0.5 text-[9px] font-medium text-green-700">
+                        Uploaded
+                      </span>
+                    )}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteFile(file.key)}
+                    className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-red-500"
+                    title="Remove file"
+                  >
+                    <Trash size={14} />
+                  </button>
+                </div>
+
+                <div className="mt-3 flex flex-col gap-2 border-t border-gray-100 pt-2">
+                  <div className="flex items-center gap-1.5">
+                    <label
+                      htmlFor={`alt-${file.key}`}
+                      className="shrink-0 text-[9px] font-bold uppercase tracking-wider text-gray-500"
+                    >
+                      Alt:
+                    </label>
+                    <input
+                      id={`alt-${file.key}`}
+                      type="text"
+                      placeholder="Alt text (e.g. Graph of sales)"
+                      value={file.alt ?? ""}
+                      onChange={(e) => updateFileAlt(file.key, e.target.value)}
+                      className="flex h-7 w-full rounded border border-gray-200 bg-background px-2 py-1 text-xs placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-300"
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        disabled={index === 0}
+                        onClick={() => moveFile(index, "left")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 transition-colors hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50"
+                        title="Move left/up"
+                      >
+                        <ChevronLeft size={12} />
+                      </button>
+                      <button
+                        type="button"
+                        disabled={index === uploadedFiles.length - 1}
+                        onClick={() => moveFile(index, "right")}
+                        className="rounded border border-gray-200 bg-gray-50 p-1 text-gray-600 transition-colors hover:bg-gray-100 disabled:opacity-40 disabled:hover:bg-gray-50"
+                        title="Move right/down"
+                      >
+                        <ChevronRight size={12} />
+                      </button>
+                    </div>
+
+                    <button
+                      type="button"
+                      onClick={() => insertPlaceholder(file, index)}
+                      className="rounded border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                      title="Insert inline placeholder tag"
+                    >
+                      Insert Inline
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="mt-2 flex justify-end">
         <button
           type="button"
-          className="flex items-center text-blue-500 hover:underline"
+          className="flex items-center gap-1 rounded-md border border-blue-500 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 shadow-sm transition-all hover:bg-blue-100 hover:text-blue-700"
           onClick={handleUploadClick}
         >
-          Add file <Paperclip className="ml-1 size-5" />
+          <Paperclip size={14} /> Add file
         </button>
       </div>
     </div>
diff --git a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
index 2cfda0c3..473debc3 100644
--- a/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
+++ b/src/components/article-creator/custom_questions/RenderAdvancedTextbox.tsx
@@ -2,17 +2,25 @@ import React, { useState, useEffect } from "react";
 import katex from "katex";
 import type { QuestionFile, QuestionInput } from "@/types/questions";
 import "../../../styles/katexStyling.css";
-import Image from "next/image";
 import { decodeEntities, katexMacros } from "../Renderer";
 
+import { cn, isSvgFileName } from "@/lib/utils";
+
 interface Props {
   content: QuestionInput;
+  origin?: "question" | "explanation" | "option" | "content";
 }
 
 interface FileWrapper {
   file: File;
 }
 
+const isImageFileKey = (key: string) =>
+  key.startsWith("image/") || key.startsWith("image-");
+
+const isAudioFileKey = (key: string) =>
+  key.startsWith("audio/") || key.startsWith("audio-");
+
 // Utility to retrieve a file from IndexedDB based on unique ID
 export function getFileFromIndexedDB(
   name: string,
@@ -98,25 +106,32 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
 
   if (!objectUrl) return null;
 
-  if (file.key.startsWith("image/")) {
+  if (isImageFileKey(file.key)) {
+    // SVGs frequently omit intrinsic dimensions (viewBox only), which makes them
+    // collapse or overflow under width/height auto. Give them a definite,
+    // responsive width instead.
+    const isSvg = isSvgFileName(file.name) || file.key.startsWith("image-svg");
     return (
-      <div className="my-2">
-        <Image
+      <div className="my-2 flex w-full justify-center">
+        <img
           src={objectUrl}
-          alt="Uploaded image"
-          width={16}
-          height={9}
-          layout="responsive"
-          className="h-auto max-w-full"
+          alt={file.alt ?? "Uploaded image"}
+          loading="lazy"
+          className={cn(
+            "rounded-md object-contain shadow-sm transition-shadow duration-200 hover:shadow-md",
+            isSvg
+              ? "h-auto w-full max-w-[450px]"
+              : "h-auto max-h-[450px] w-auto max-w-full",
+          )}
         />
       </div>
     );
   }
 
-  if (file.key.startsWith("audio/")) {
+  if (isAudioFileKey(file.key)) {
     return (
       <div className="my-2">
-        <audio controls>
+        <audio controls className="w-full max-w-md">
           <source src={objectUrl} type="audio/mpeg" />
           Your browser does not support the audio element.
         </audio>
@@ -127,45 +142,153 @@ const FileRenderer: React.FC<{ file: QuestionFile }> = ({ file }) => {
   return null;
 };
 
-export function RenderContent({ content }: Props) {
+export function RenderContent({ content, origin }: Props) {
+  // Sort files by their order index, default to stable positioning
+  const sortedFiles = [...(content.files || [])].sort((a, b) => {
+    const orderA = a.order ?? 999;
+    const orderB = b.order ?? 999;
+    return orderA - orderB;
+  });
+
+  const renderedInlineKeys = new Set<string>();
+
+  // Function to search for a matching file based on placeholder string
+  const getMatchingFile = (param: string) => {
+    const trimmed = param.trim();
+    // 1. Check if 1-based index (e.g., [image:1])
+    const index = parseInt(trimmed, 10);
+    if (!isNaN(index) && index > 0 && index <= sortedFiles.length) {
+      return sortedFiles[index - 1];
+    }
+    // 2. Check if direct file key matches
+    const byKey = sortedFiles.find((f) => f.key === trimmed);
+    if (byKey) return byKey;
+    // 3. Check if filename matches (case-insensitive)
+    const byName = sortedFiles.find(
+      (f) =>
+        f.name.toLowerCase() === trimmed.toLowerCase() ||
+        f.name.split(".")[0]?.toLowerCase() === trimmed.toLowerCase(),
+    );
+    if (byName) return byName;
+    return null;
+  };
+
+  const tokens = decodeEntities(content.value)
+    .split(/(```[\s\S]*?```|\$@[^$]+\$|\[image:[^\]]+\])/g)
+    .map((token, tokenIndex) => {
+      if (token.startsWith("```") && token.endsWith("```")) {
+        const codeContent = token.slice(3, -3).replace(/^\n/, "");
+        return (
+          <pre
+            key={`code-${tokenIndex}`}
+            className="my-2 max-w-full overflow-x-auto whitespace-pre-wrap rounded p-2 font-mono text-sm leading-relaxed text-black"
+            style={{
+              fontFamily: "'Consolas', monospace",
+              backgroundColor: "#f0f0f0",
+            }}
+          >
+            <code>{codeContent}</code>
+          </pre>
+        );
+      } else if (token.startsWith("$@") && token.endsWith("$")) {
+        return (
+          <span
+            key={`latex-${tokenIndex}`}
+            dangerouslySetInnerHTML={{
+              __html: katex.renderToString(token.slice(2, -1), {
+                throwOnError: false,
+                macros: katexMacros,
+              }),
+            }}
+          ></span>
+        );
+      } else if (token.startsWith("[image:") && token.endsWith("]")) {
+        const param = token.slice(7, -1);
+        const matchedFile = getMatchingFile(param);
+        if (matchedFile) {
+          renderedInlineKeys.add(matchedFile.key);
+          return (
+            <div
+              key={`inline-img-${tokenIndex}`}
+              className="my-4 block text-center"
+            >
+              <FileRenderer file={matchedFile} />
+              {matchedFile.alt && (
+                <span className="mt-1 block text-center text-xs italic text-gray-500">
+                  {matchedFile.alt}
+                </span>
+              )}
+            </div>
+          );
+        }
+      }
+      return <span key={`text-${tokenIndex}`}>{token}</span>;
+    });
+
+  // Filter out files that were already rendered inline
+  const remainingFiles = sortedFiles.filter(
+    (file) => !renderedInlineKeys.has(file.key),
+  );
+  const remainingImages = remainingFiles.filter((file) =>
+    isImageFileKey(file.key),
+  );
+  const remainingAudio = remainingFiles.filter((file) =>
+    isAudioFileKey(file.key),
+  );
+
   return (
     <div className="custom-katex my-2 whitespace-pre-wrap">
-      {/* Render text content directly */}
-      {decodeEntities(content.value)
-        .split(/(```[\s\S]*?```|\$@[^$]+\$)/g)
-        .map((token, tokenIndex) => {
-          if (token.startsWith("```") && token.endsWith("```")) {
-            // Strip the ``` from start and end, and remove the leading newline.
-            const codeContent = token.slice(3, -3).replace(/^\n/, "");
-            return (
-              <pre
-                key={`code-${tokenIndex}`}
-                className="my-2 whitespace-pre-wrap overflow-x-auto rounded p-2 font-mono text-sm leading-relaxed text-black max-w-full"
-                style={{ fontFamily: "'Consolas', monospace", backgroundColor: "#f0f0f0" }}
-              >
-                <code>{codeContent}</code>
-              </pre>
-            );
-          } else if (token.startsWith("$@") && token.endsWith("$")) {
-            return (
-              <span
-                key={`latex-${tokenIndex}`}
-                dangerouslySetInnerHTML={{
-                  __html: katex.renderToString(token.slice(2, -1), {
-                    throwOnError: false,
-                    macros: katexMacros,
-                  }),
-                }}
-              ></span>
-            );
-          }
-          return <span key={`text-${tokenIndex}`}>{token}</span>;
-        })}
-
-      {/* Render files through individual components */}
-      {content.files?.map((file) => (
+      {/* Render parsed inline block elements */}
+      {tokens}
+
+      {/* Render any leftover audio files */}
+      {remainingAudio.map((file) => (
         <FileRenderer key={file.key} file={file} />
       ))}
+
+      {/* Render remaining images */}
+      {remainingImages.length > 0 && (
+        <div className="mt-4">
+          {origin === "question" && remainingImages.length >= 2 ? (
+            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+              {remainingImages.map((file, idx) => {
+                const isThirdOfThree =
+                  remainingImages.length === 3 && idx === 2;
+                return (
+                  <div
+                    key={file.key}
+                    className={cn(
+                      "flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50/40 p-2 shadow-sm",
+                      isThirdOfThree &&
+                        "w-full sm:col-span-2 sm:mx-auto sm:max-w-2xl",
+                    )}
+                  >
+                    <FileRenderer file={file} />
+                    {file.alt && (
+                      <span className="mt-1 block text-center text-xs italic text-gray-500">
+                        {file.alt}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex flex-col gap-4">
+              {remainingImages.map((file) => (
+                <div key={file.key} className="flex flex-col items-center">
+                  <FileRenderer file={file} />
+                  {file.alt && (
+                    <span className="mt-1 block text-center text-xs italic text-gray-500">
+                      {file.alt}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/article-creator/editorjs-render.ts b/src/components/article-creator/editorjs-render.ts
new file mode 100644
index 00000000..d0cfb29c
--- /dev/null
+++ b/src/components/article-creator/editorjs-render.ts
@@ -0,0 +1,263 @@
+import type { OutputData } from "@editorjs/editorjs";
+import type { BlockData, Config } from "editorjs-parser";
+import edjsParser from "editorjs-parser";
+import { decode } from "html-entities";
+import katex from "katex";
+import "katex/contrib/mhchem";
+import hljs from "highlight.js";
+import "@/styles/highlightjs.css";
+import type { QuestionFormat } from "@/types/questions";
+import "@/styles/katexStyling.css";
+import styles from "./Renderer.module.css";
+
+// DOM-free entity decoder so this module can run during server rendering.
+// Previously this used `document.createElement("textarea")`, which kept the
+// whole renderer client-only. `html-entities` decodes named + numeric entities
+// without a DOM.
+export function decodeEntities(str: string): string {
+  return decode(str);
+}
+
+export const katexMacros = {
+  "\\unit": "\\,\\mathrm{#1}",
+  "\\qty": "#1\\,\\mathrm{#2}",
+};
+
+// derived from advancedtextbox
+function parseLatex(text: string): string {
+  const decoded = decodeEntities(text);
+
+  return decoded
+    .split(/(\$@[^$]+\$)/g)
+    .map((part) => {
+      if (/^\$@[^$]+\$$/.test(part)) {
+        const expr = part.slice(2, -1);
+        return katex.renderToString(expr, {
+          throwOnError: false,
+          output: "html",
+          macros: katexMacros,
+        });
+      }
+      return part;
+    })
+    .join("");
+}
+
+const customParsers: Record<
+  string,
+  (data: BlockData, _config: Config) => string
+> = {
+  alert: (data, _config) => {
+    const { align, message, type } = data as {
+      align: string;
+      message: string;
+      type: string;
+    };
+    return `<div class="cdx-alert cdx-alert-align-${align} cdx-alert-${type}">
+      <div class="cdx-alert__message" contenteditable="true" data-placeholder="Type here..." data-empty="false">
+        ${message}
+      </div>
+    </div>`;
+  },
+
+  code: (data, _config) => {
+    const { code } = data as { code: string };
+    const highlighted = hljs.highlightAuto(code).value;
+    return `<pre class="code"><code>${highlighted}</code></pre>`;
+  },
+
+  delimiter: (_data, _config) => {
+    return "<hr />";
+  },
+
+  embed: (data, _config) => {
+    const { caption, regex, embed, source, height, width } = data as {
+      caption: string;
+      regex: string;
+      embed: string;
+      source: string;
+      height: number;
+      width: number;
+    };
+    return `<div class="cdx-block embed-tool">
+      <preloader class="embed-tool__preloader">
+        <div class="embed-tool__url">${source}</div>
+      </preloader>
+      <iframe class="rounded-lg w-full" height="${height}" width="${width}" style="margin: 0 auto;" frameborder="0" scrolling="no" allowtransparency="true" src="${embed}" class="embed-tool__content"></iframe>
+      <figcaption class="fig-cap">${caption}</figcaption>
+    </div>`;
+  },
+
+  math: (data, _config) => {
+    const { text } = data as { text: string };
+    return katex.renderToString(text, {
+      output: "html",
+      throwOnError: true,
+      displayMode: true,
+      macros: katexMacros,
+    });
+  },
+
+  paragraph: (data, _config) => {
+    const { text } = data as { text: string };
+    const parsedText = parseLatex(text);
+    return `<p class="paragraph">${parsedText}</p>`;
+  },
+
+  header: (data, _config) => {
+    const { text, level } = data as { text: string; level: number };
+    const lvl = Math.min(Math.max(level || 1, 1), 6);
+    const parsedText = parseLatex(text);
+    return `<h${lvl}>${parsedText}</h${lvl}>`;
+  },
+
+  quote: (data, _config) => {
+    const { alignment, caption, text } = data as {
+      alignment: string;
+      caption: string;
+      text: string;
+    };
+    return `<blockquote>
+      <p class="mb-3">${text}</p>
+      <cite>${caption}</cite>
+    </blockquote>`;
+  },
+
+  table: (data, _config) => {
+    const { withHeadings, content } = data as {
+      withHeadings: boolean;
+      content: string[][];
+    };
+    if (content.length === 0) {
+      return "<table></table>";
+    }
+    const rows = content.map((row, index) => {
+      if (withHeadings && index === 0) {
+        return `<tr class="divide-x-[1px]">${row.reduce(
+          (acc, cell) => acc + `<th>${parseLatex(cell)}</th>`,
+          "",
+        )}</tr>`;
+      }
+
+      // For other rows, use <td> tags
+      return `<tr class="divide-x-[1px]">${row.reduce(
+        (acc, cell) => acc + `<td>${parseLatex(cell)}</td>`,
+        "",
+      )}</tr>`;
+    });
+    const thead = withHeadings ? `<thead>${rows.shift()}</thead>` : "";
+    const tbody = `<tbody>${rows.join("")}</tbody>`;
+
+    return `<table>${thead}${tbody}</table>`;
+  },
+
+  list: (data, _config) => {
+    const { style, items, meta } = data;
+
+    const renderItems = (items: typeof data.items, depth = 0): string => {
+      if (!items || items.length === 0) return "";
+
+      if (style === "checklist") {
+        return `<div class="checklist depth-${depth}">
+        ${items
+          .map((item) => {
+            const checked =
+              ("checked" in item.meta && item.meta?.checked) ?? false;
+            const nested = renderItems(item.items, depth + 1);
+            return `<div class="checklist-item">
+              <label>
+                <input type="checkbox" ${checked ? "checked" : ""} />
+                <span>${parseLatex(item.content)}</span>
+              </label>
+              ${nested}
+            </div>`;
+          })
+          .join("")}
+        </div>`;
+      }
+
+      const tag = style === "ordered" ? "ol" : "ul";
+
+      // const startAttr = meta?.start ? ` start="${meta.start}"` : "";
+
+      // const typeAttr = meta?.counterType
+      //   ? ` style="--list-counter-type: ${meta.counterType};"`
+      //   : "";
+
+      return `
+      <${tag} class="depth-${depth}" style="counter-reset: item ${meta?.start ? meta.start - 1 || 1 : ""}; ${meta?.counterType ? `--list-counter-type: ${meta.counterType};` : ""}">
+      ${items
+        .map(
+          (item) =>
+            `<li>
+              ${parseLatex(item.content)}
+              ${renderItems(item.items, depth + 1)}
+            </li>`,
+        )
+        .join("")}
+      </${tag}>`;
+    };
+
+    return `<div class="${styles.list}">${renderItems(items)}</div>`;
+  },
+
+  questionsAddCard: (data, _config) => {
+    const { instanceId } = data as {
+      instanceId: string;
+      content: QuestionFormat;
+    };
+    return `<div class="questions-block-${instanceId}"></div>`;
+  },
+
+  image: (data, _config) => {
+    // SVGs (viewBox only) collapse or render at the 300x150 replaced-element
+    // default unless given a definite width, so tag them for the .img-svg rule.
+    const storageRefPath = data.file?.storageRefFullPath;
+    const storagePath =
+      typeof storageRefPath === "string" ? storageRefPath : "";
+    const isSvg =
+      storagePath.toLowerCase().endsWith(".svg") ||
+      (typeof data.url === "string" && data.url.toLowerCase().includes(".svg"));
+    const imageConditions = `${data.stretched ? "img-fullwidth" : ""} ${
+      data.withBorder ? "img-border" : ""
+    } ${data.withBackground ? "img-bg" : ""} ${data.centerImage ? "img-center" : ""} ${isSvg ? "img-svg" : ""}`;
+    const imgClass = _config.image.imgClass ?? "";
+    let imageSrc;
+
+    if (data.url) {
+      // simple-image was used and the image probably is not uploaded to this server
+      // therefore, we use the absolute path provided in data.url
+      // so, _config.image.path property is useless in this case!
+      imageSrc = data.url;
+    } else if (_config.image.path === "absolute") {
+      imageSrc = data.file?.url;
+    } else {
+      imageSrc = _config.image.path?.replace(
+        /<(.+)>/,
+        (match, p1: string) => data.file?.[p1] ?? "",
+      );
+    }
+
+    if (_config.image.use === "img") {
+      return `<img class="${imageConditions} ${imgClass}" src="${imageSrc}" alt="${data.caption}">`;
+    } else if (_config.image.use === "figure") {
+      const figureClass = _config.image.figureClass ?? "";
+      const figCapClass = _config.image.figCapClass ?? "";
+
+      return `<figure class="${figureClass}"><img class="${imgClass} ${imageConditions}" src="${imageSrc}" alt="${data.caption}"><figcaption class="${figCapClass}">${data.caption}</figcaption></figure>`;
+    }
+    return "ERROR DISPLAYING IMAGE";
+  },
+};
+
+/**
+ * Parses EditorJS `OutputData` into an HTML string. Pure and DOM-free, so it runs
+ * both server-side (public chapter SSR) and client-side (gated chapters via
+ * `Renderer`). Question cards render as empty `.questions-block-<id>` placeholders
+ * that `QuestionsHydrator` mounts interactive components into on the client.
+ */
+export function renderEditorJsToHtml(content: OutputData): string {
+  const parser = new edjsParser(undefined, customParsers);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  return parser.parse(content);
+}
diff --git a/src/components/global/SearchBar.tsx b/src/components/global/SearchBar.tsx
index 329a242a..965ef12f 100644
--- a/src/components/global/SearchBar.tsx
+++ b/src/components/global/SearchBar.tsx
@@ -37,7 +37,7 @@ const SearchBar = ({
 
   const containerRef = useRef<HTMLDivElement>(null);
   const startedRef = useRef(false);
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const listboxId = useId();
 
   const canPreview = isPreviewUser(user?.access);
diff --git a/src/components/global/footer.tsx b/src/components/global/footer.tsx
index 2518c006..09ce2075 100644
--- a/src/components/global/footer.tsx
+++ b/src/components/global/footer.tsx
@@ -17,7 +17,7 @@ const links = [
   },
   {
     title: "Feedback",
-    url: "https://forms.gle/1J1VWe9rEMp3kfC78",
+    url: "/feedback",
   },
 ];
 
diff --git a/src/components/hooks/UserContext.tsx b/src/components/hooks/UserContext.tsx
index 112112fa..81a67e2f 100644
--- a/src/components/hooks/UserContext.tsx
+++ b/src/components/hooks/UserContext.tsx
@@ -1,6 +1,8 @@
 import React, { createContext, useState, useEffect, useContext } from "react";
 import { getUser } from "./users";
 import type { User } from "@/types/user";
+import { auth } from "@/lib/firebase";
+import { onAuthStateChanged } from "firebase/auth";
 
 interface UserContextType {
   user: User | null;
@@ -26,42 +28,35 @@ export const UserProvider: React.FC<{ children: React.ReactNode }> = ({
       setLoading(true);
       setError(null);
       const fetchedUser = await getUser();
-      if (fetchedUser) {
-        setUser(fetchedUser);
-      }
+      setUser(fetchedUser);
       setLoading(false);
     } catch (err) {
+      setUser(null);
       setLoading(false);
     }
   };
 
   useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, () => {
+      void fetchUser();
+    });
+
     fetchUser().catch((error) => {
       console.error("Error fetching user:", error);
       setLoading(false);
     });
+
+    return () => unsubscribe();
   }, []);
 
   const updateUser = async () => {
     await fetchUser();
   };
 
-  if (loading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-3xl">
-        Loading...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex min-h-screen items-center justify-center text-3xl">
-        {error}
-      </div>
-    );
-  }
-
+  // Always render children: this provider wraps the whole app, so gating on the
+  // client-only `loading`/`error` state (which is `loading === true` during SSR)
+  // strips every page's content and JSON-LD out of the static HTML. Consumers
+  // read `loading`/`user` from context and handle their own pending/auth state.
   return (
     <UserContext.Provider
       value={{ user, loading, error, setError, setLoading, updateUser }}
diff --git a/src/components/questions/checkForUnderstanding.tsx b/src/components/questions/checkForUnderstanding.tsx
index 5980e8af..bbe304f3 100644
--- a/src/components/questions/checkForUnderstanding.tsx
+++ b/src/components/questions/checkForUnderstanding.tsx
@@ -62,7 +62,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
   return (
     <div className="max-w-6xl rounded-lg border border-primary bg-primary-foreground p-4">
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -131,7 +131,7 @@ const CheckForUnderstanding: React.FC<Props> = ({ questionInstance }) => {
           {!isFrq && questionInstance.explanation.value && (
             <div className="mt-4 rounded-md border border-primary bg-white p-3">
               <strong>Explanation:</strong>
-              <RenderContent content={questionInstance.explanation} />
+              <RenderContent content={questionInstance.explanation} origin="explanation" />
             </div>
           )}
           <button
diff --git a/src/components/questions/digital-testing/Footer.tsx b/src/components/questions/digital-testing/Footer.tsx
index 1cbb8069..dd30ede5 100644
--- a/src/components/questions/digital-testing/Footer.tsx
+++ b/src/components/questions/digital-testing/Footer.tsx
@@ -36,7 +36,7 @@ export default function Footer({
   testName,
 }: FooterProps) {
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
 
   const handleNext = () => {
     if (showReviewPage) {
diff --git a/src/components/questions/digital-testing/Header.tsx b/src/components/questions/digital-testing/Header.tsx
index b428b8fe..6c0fe6a3 100644
--- a/src/components/questions/digital-testing/Header.tsx
+++ b/src/components/questions/digital-testing/Header.tsx
@@ -21,7 +21,7 @@ const Header: React.FC<HeaderProps> = ({
   submitted,
   directions,
 }) => {
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
   const [showTimer, setShowTimer] = useState(true);
   const [remainingTime, setRemainingTime] = useState(timeRemaining);
   const [showDirections, setShowDirections] = useState(true);
diff --git a/src/components/questions/digital-testing/QuestionPanel.tsx b/src/components/questions/digital-testing/QuestionPanel.tsx
index 96f2664e..32dab5b9 100644
--- a/src/components/questions/digital-testing/QuestionPanel.tsx
+++ b/src/components/questions/digital-testing/QuestionPanel.tsx
@@ -99,7 +99,7 @@ export default function QuestionPanel({
   return (
     <div className="relative">
       <div className="my-4 text-lg">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       <div className="grid gap-4">
@@ -145,7 +145,7 @@ export default function QuestionPanel({
                       isStrikedThrough && "opacity-50",
                     )}
                   >
-                    <RenderContent content={option.value} />
+                    <RenderContent content={option.value} origin="option" />
                   </span>
 
                   {!submitted && showEliminationTools && (
@@ -181,7 +181,7 @@ export default function QuestionPanel({
         {submitted && (
           <div className="rounded-lg border bg-gray-100 p-3">
             <h3 className="mb-2 text-lg font-semibold">Explanation:</h3>
-            <RenderContent content={questionInstance.explanation} />
+            <RenderContent content={questionInstance.explanation} origin="explanation" />
           </div>
         )}
       </div>
diff --git a/src/components/questions/digital-testing/ReviewPage.tsx b/src/components/questions/digital-testing/ReviewPage.tsx
index ca9929de..80c473ca 100644
--- a/src/components/questions/digital-testing/ReviewPage.tsx
+++ b/src/components/questions/digital-testing/ReviewPage.tsx
@@ -37,7 +37,7 @@ export default function QuestionNavigation({
   setShowReviewPage,
   submitted,
 }: FooterProps) {
-  const pathname = usePathname();
+  const pathname = usePathname() ?? "";
 
   return (
     <>
diff --git a/src/components/questions/quizRenderer.tsx b/src/components/questions/quizRenderer.tsx
index 58c72340..43483c4d 100644
--- a/src/components/questions/quizRenderer.tsx
+++ b/src/components/questions/quizRenderer.tsx
@@ -85,7 +85,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             : "Answers revealed")}
       </div>
       <div className="markdown text-xl text-foreground">
-        <RenderContent content={questionInstance.question} />
+        <RenderContent content={questionInstance.question} origin="question" />
       </div>
 
       {isFrq ? (
@@ -111,19 +111,18 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
             <button
               key={option.id}
               className={`rounded-md border px-2 text-left shadow transition-colors
-            ${
-              showResults
-                ? isAnswerCorrect(option.id)
-                  ? answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-green-700 bg-green-300"
-                    : "border-green-700 bg-green-100"
+            ${showResults
+                  ? isAnswerCorrect(option.id)
+                    ? answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-green-700 bg-green-300"
+                      : "border-green-700 bg-green-100"
+                    : answers[currentQuestionIndex]?.includes(option.id)
+                      ? "border-red-700 bg-red-300"
+                      : "border-gray-300 bg-white"
                   : answers[currentQuestionIndex]?.includes(option.id)
-                    ? "border-red-700 bg-red-300"
+                    ? "border-blue-500 bg-blue-100"
                     : "border-gray-300 bg-white"
-                : answers[currentQuestionIndex]?.includes(option.id)
-                  ? "border-blue-500 bg-blue-100"
-                  : "border-gray-300 bg-white"
-            }
+                }
             `}
               onClick={() => handleSelectOption(option.id)}
               disabled={showResults}
@@ -150,7 +149,7 @@ const QuizRenderer: React.FC<QuizRendererProps> = ({ questions }) => {
       {showResults && !isFrq && questionInstance.explanation.value && (
         <div className="mt-4 rounded-md border border-primary bg-white p-3">
           <strong>Explanation:</strong>
-          <RenderContent content={questionInstance.explanation} />
+          <RenderContent content={questionInstance.explanation} origin="explanation" />
         </div>
       )}
 
diff --git a/src/components/questions/testRenderer.tsx b/src/components/questions/testRenderer.tsx
index 16fa4266..c6720bae 100644
--- a/src/components/questions/testRenderer.tsx
+++ b/src/components/questions/testRenderer.tsx
@@ -153,6 +153,7 @@ export default function DigitalTestingPage({
                 >
                   <RenderContent
                     content={questions[currentQuestionIndex]!.content}
+                    origin="content"
                   />
                 </Highlighter>
               </div>
diff --git a/src/components/subject/progress-tracker.tsx b/src/components/subject/progress-tracker.tsx
index ef9036a7..68933182 100644
--- a/src/components/subject/progress-tracker.tsx
+++ b/src/components/subject/progress-tracker.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { BookOpen, Check, ChevronsRight, History, Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
 
diff --git a/src/components/subject/table-of-contents.tsx b/src/components/subject/table-of-contents.tsx
index 05f5e180..d546a4a3 100644
--- a/src/components/subject/table-of-contents.tsx
+++ b/src/components/subject/table-of-contents.tsx
@@ -14,7 +14,7 @@ type Props = {
 };
 
 const TableOfContents = ({ title, subject }: Props) => {
-  const router = usePathname();
+  const pathname = usePathname() ?? "";
   const [collapsed, setCollapsed] = useState(false);
 
   return (
@@ -51,7 +51,7 @@ const TableOfContents = ({ title, subject }: Props) => {
         {subject.units.map((unit, unitIndex) => (
           <div key={unitIndex}>
             <Link
-              href={`${router.split("/").slice(0, 3).join("/")}#${unit.title}`}
+              href={`${pathname.split("/").slice(0, 3).join("/")}#${unit.title}`}
               key={unit.title}
               className={cn(
                 "flex items-center gap-3 text-base font-medium opacity-50 transition-all hover:text-primary/70 hover:opacity-100",
diff --git a/src/env.js b/src/env.js
index ef4c2325..959f21b2 100644
--- a/src/env.js
+++ b/src/env.js
@@ -3,6 +3,12 @@ import { z } from "zod";
 
 export const env = createEnv({
   // Client-side Firebase variables
+  server: {
+    GITHUB_TOKEN: z.string().optional(),
+    GITHUB_OWNER: z.string().optional(),
+    GITHUB_REPO: z.string().optional(),
+  },
+
   client: {
     NEXT_PUBLIC_FIREBASE_API_KEY: z.string(),
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: z.string(),
@@ -15,6 +21,9 @@ export const env = createEnv({
 
   // Runtime environment variables
   runtimeEnv: {
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+    GITHUB_OWNER: process.env.GITHUB_OWNER,
+    GITHUB_REPO: process.env.GITHUB_REPO,
     NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
     NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
       process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
diff --git a/src/lib/apPortingDefaults.ts b/src/lib/apPortingDefaults.ts
new file mode 100644
index 00000000..92cf8589
--- /dev/null
+++ b/src/lib/apPortingDefaults.ts
@@ -0,0 +1,9 @@
+import type { Subject } from "@/types/firestore";
+import type { OutputData } from "@editorjs/editorjs";
+
+export const DEFAULT_PORTING_SUBJECT: Subject = {
+  title: "AP Porting",
+  units: []
+};
+
+
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 92dc9cd4..858dd959 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -3,6 +3,7 @@
 import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
 
 import { env } from "@/env.js";
 
@@ -19,6 +20,7 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
+const storage = getStorage(app);
 
-export { db, auth };
+export { db, auth, storage };
 export default app;
diff --git a/src/lib/search/guideSearch.ts b/src/lib/search/guideSearch.ts
index ebbe8d89..1e7d20ae 100644
--- a/src/lib/search/guideSearch.ts
+++ b/src/lib/search/guideSearch.ts
@@ -345,8 +345,10 @@ export const loadGuideSearchItems = async (
     const subjectsSnapshot = await getDocs(collection(db, "subjects"));
 
     const itemsBySubject = await Promise.all(
-      subjectsSnapshot.docs.map(async (subjectDoc) => {
-        const subjectData = subjectDoc.data() as Subject;
+      subjectsSnapshot.docs
+        .filter((subjectDoc) => subjectDoc.id !== "porting")
+        .map(async (subjectDoc) => {
+          const subjectData = subjectDoc.data() as Subject;
         try {
           return await mapSubjectToSearchItems(subjectDoc.id, subjectData);
         } catch (error) {
diff --git a/src/lib/sitemap-data.ts b/src/lib/sitemap-data.ts
new file mode 100644
index 00000000..75aa960e
--- /dev/null
+++ b/src/lib/sitemap-data.ts
@@ -0,0 +1,193 @@
+import type { OutputData } from "@editorjs/editorjs";
+import { env } from "@/env.js";
+
+/**
+ * Server-side helpers for reading public subject data via the Firestore REST
+ * API. The app otherwise talks to Firestore through the client SDK, but route
+ * handlers like `sitemap.ts` and server `generateMetadata` run before hydration
+ * and need a dependency-free way to read the publicly readable `subjects`
+ * collection (`allow read: if true` in firestore.rules).
+ */
+
+const PROJECT_ID = env.NEXT_PUBLIC_FIREBASE_PROJECT_ID;
+const API_KEY = env.NEXT_PUBLIC_FIREBASE_API_KEY;
+const BASE = `https://firestore.googleapis.com/v1/projects/${PROJECT_ID}/databases/(default)/documents`;
+
+// Cache for a day; subject structure changes rarely.
+const REVALIDATE_SECONDS = 86_400;
+
+interface RestValue {
+  stringValue?: string;
+  booleanValue?: boolean;
+  integerValue?: string;
+  doubleValue?: number;
+  nullValue?: null;
+  timestampValue?: string;
+  arrayValue?: { values?: RestValue[] };
+  mapValue?: { fields?: Record<string, RestValue> };
+}
+
+interface RestDocument {
+  name: string;
+  fields?: Record<string, RestValue>;
+}
+
+function parseValue(value: RestValue): unknown {
+  if (value.stringValue !== undefined) return value.stringValue;
+  if (value.booleanValue !== undefined) return value.booleanValue;
+  if (value.integerValue !== undefined) return Number(value.integerValue);
+  if (value.doubleValue !== undefined) return value.doubleValue;
+  if (value.timestampValue !== undefined) return value.timestampValue;
+  if (value.arrayValue) return (value.arrayValue.values ?? []).map(parseValue);
+  if (value.mapValue) return parseFields(value.mapValue.fields ?? {});
+  return null;
+}
+
+function parseFields(
+  fields: Record<string, RestValue>,
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(fields)) {
+    out[key] = parseValue(value);
+  }
+  return out;
+}
+
+export interface SitemapChapter {
+  id: string;
+  title: string;
+  isPublic?: boolean;
+}
+
+export interface SitemapUnit {
+  id: string;
+  title: string;
+  chapters: SitemapChapter[];
+}
+
+export interface SitemapSubject {
+  slug: string;
+  title: string;
+  units: SitemapUnit[];
+}
+
+/**
+ * Returns every subject with its embedded units and chapters. Falls back to an
+ * empty array on any failure so callers (e.g. the sitemap) still render their
+ * static entries instead of crashing the build.
+ */
+export async function getAllSubjects(): Promise<SitemapSubject[]> {
+  try {
+    const res = await fetch(`${BASE}/subjects?pageSize=300&key=${API_KEY}`, {
+      next: { revalidate: REVALIDATE_SECONDS },
+    });
+    if (!res.ok) return [];
+    const data = (await res.json()) as { documents?: RestDocument[] };
+    return (data.documents ?? []).map((doc) => {
+      const slug = doc.name.split("/").pop() ?? "";
+      const fields = parseFields(doc.fields ?? {});
+      return {
+        slug,
+        title: typeof fields.title === "string" ? fields.title : slug,
+        units: (Array.isArray(fields.units)
+          ? fields.units
+          : []) as SitemapUnit[],
+      };
+    });
+  } catch {
+    return [];
+  }
+}
+
+/** Returns a single subject (title + embedded units), or null on failure. */
+export async function getSubject(slug: string): Promise<SitemapSubject | null> {
+  try {
+    const res = await fetch(`${BASE}/subjects/${slug}?key=${API_KEY}`, {
+      next: { revalidate: REVALIDATE_SECONDS },
+    });
+    if (!res.ok) return null;
+    const data = (await res.json()) as RestDocument;
+    const fields = parseFields(data.fields ?? {});
+    return {
+      slug,
+      title: typeof fields.title === "string" ? fields.title : slug,
+      units: (Array.isArray(fields.units) ? fields.units : []) as SitemapUnit[],
+    };
+  } catch {
+    return null;
+  }
+}
+
+/** Returns a single subject's display title, or null if it can't be read. */
+export async function getSubjectTitle(slug: string): Promise<string | null> {
+  return (await getSubject(slug))?.title ?? null;
+}
+
+export interface ChapterContent {
+  data: OutputData;
+  author: string;
+  displayName: string;
+  title: string;
+}
+
+/**
+ * Firestore stores table block content as a map (`{ row0: [...], row1: [...] }`)
+ * because nested arrays aren't allowed. EditorJS expects an array of rows, so
+ * convert every table block back. Mirrors `revertTableObjectToArray`, but kept
+ * here so this server module doesn't import the client-only article helpers.
+ */
+function revertTableBlocks(data: OutputData): void {
+  for (const block of data.blocks ?? []) {
+    if (block.type !== "table") continue;
+    const blockData = block.data as { content?: unknown };
+    const content = blockData.content;
+    if (content && typeof content === "object" && !Array.isArray(content)) {
+      const rows = content as Record<string, unknown>;
+      blockData.content = Object.keys(rows)
+        .sort()
+        .map((key) => rows[key]);
+    }
+  }
+}
+
+/**
+ * Reads a single chapter's content document via the Firestore REST API. The
+ * `chapters` rule allows unauthenticated reads only when `isPublic == true`, so a
+ * successful read here means the chapter is public and safe to server-render;
+ * gated chapters return 403 and this resolves to `null`. Doc-id mapping mirrors
+ * the client `useFetchAndCache` hook.
+ */
+export async function getChapterContent(
+  slug: string,
+  unitParam: string,
+  idParam: string,
+): Promise<ChapterContent | null> {
+  try {
+    const unitId = unitParam.split("-").at(-1);
+    const chapterId = idParam.split("-").slice(0, 2).join("-");
+    if (!unitId || !chapterId) return null;
+
+    const res = await fetch(
+      `${BASE}/subjects/${slug}/units/${unitId}/chapters/${chapterId}?key=${API_KEY}`,
+      { next: { revalidate: REVALIDATE_SECONDS } },
+    );
+    if (!res.ok) return null;
+
+    const doc = (await res.json()) as RestDocument;
+    const fields = parseFields(doc.fields ?? {});
+    const data = fields.data as OutputData | undefined;
+    if (!data || !Array.isArray(data.blocks)) return null;
+
+    revertTableBlocks(data);
+
+    return {
+      data,
+      author: typeof fields.author === "string" ? fields.author : "",
+      displayName:
+        typeof fields.displayName === "string" ? fields.displayName : "",
+      title: typeof fields.title === "string" ? fields.title : "",
+    };
+  } catch {
+    return null;
+  }
+}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 2c9da7b4..67c99b57 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -11,3 +11,20 @@ export function formatSlug(slug: string) {
     .replace(/[^a-z1-9 ]+/g, "")
     .replace(/\s/g, "-");
 }
+
+/**
+ * True when a file (by MIME type or name) is an SVG. Some browsers report an
+ * empty `type` for SVGs, so the filename extension is checked as a fallback.
+ */
+export function isSvgFileName(name?: string | null): boolean {
+  return name?.toLowerCase().endsWith(".svg") ?? false;
+}
+
+/**
+ * Content type to attach when uploading to Firebase Storage. Returns the file's
+ * own MIME type, falling back to image/svg+xml for SVGs that report an empty
+ * type so they are served (and rendered) as images rather than octet-streams.
+ */
+export function resolveUploadContentType(file: File): string | undefined {
+  return file.type || (isSvgFileName(file.name) ? "image/svg+xml" : undefined);
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ea9edee1..60a70caf 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -89,3 +89,10 @@
 .img.img-center {
   @apply mx-auto;
 }
+
+/* SVGs often ship without intrinsic width/height (viewBox only) and would
+   otherwise render at the 300x150 replaced-element default; give them a
+   definite, responsive width. */
+.img.img-svg {
+  @apply h-auto w-full max-w-[480px];
+}
diff --git a/src/types/questions.ts b/src/types/questions.ts
index 1b88859d..83def309 100644
--- a/src/types/questions.ts
+++ b/src/types/questions.ts
@@ -2,8 +2,12 @@ export interface QuestionFile {
   key: string;
   url?: string;
   name: string;
+  id?: string;
+  alt?: string;
+  order?: number;
 }
 
+
 export interface QuestionInput {
   value: string;
   files: QuestionFile[];