diff --git a/README.md b/README.md
index 635f395..0e0bbca 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ Short SQL case studies (SQLite/Postgres style): cleaning, aggregation, window fu
 | --- | --- |
 | Shareable project overview | [Project site](https://bmowville.github.io/sql-mini-challenges/) |
 | Find a challenge by topic | [Challenge finder](https://bmowville.github.io/sql-mini-challenges/#challenge-finder) |
+| Read a challenge in the browser | [Challenge viewer](https://bmowville.github.io/sql-mini-challenges/challenge.html?id=038_inventory_stockout_risk) |
 | Try one challenge quickly | [001 Passenger survival](challenges/001_passenger_survival) |
 | Follow a structured path | [Learning paths](docs/learning-paths.md) |
 | Suggest a new challenge | [Challenge roadmap](docs/challenge-roadmap.md) |
diff --git a/docs/challenge-finder.js b/docs/challenge-finder.js
index ca160a7..7e91879 100644
--- a/docs/challenge-finder.js
+++ b/docs/challenge-finder.js
@@ -1,4 +1,4 @@
-const CHALLENGES = [
+window.SQL_CHALLENGES = [
   { id: "001", title: "Passenger survival by class", folder: "001_passenger_survival", skill: "foundations", difficulty: "starter", focus: "Grouping, rates, and segmented aggregation." },
   { id: "002", title: "Top customers by total spend", folder: "002_top_customers", skill: "foundations", difficulty: "starter", focus: "Ranking customer totals with window functions." },
   { id: "003", title: "Customer retention", folder: "003_customer_retention", skill: "retention", difficulty: "starter", focus: "Repeat customers by month." },
@@ -41,7 +41,9 @@ const CHALLENGES = [
   { id: "040", title: "Revenue leakage audit", folder: "040_revenue_leakage_audit", skill: "engineering", difficulty: "advanced", focus: "Invoice, payment, refund, and exception reconciliation." },
 ];
 
-const SKILL_LABELS = {
+const CHALLENGES = window.SQL_CHALLENGES;
+
+window.SQL_SKILL_LABELS = {
   all: "Any skill area",
   foundations: "Analytics foundations",
   retention: "Retention and cohorts",
@@ -50,17 +52,25 @@ const SKILL_LABELS = {
   engineering: "Data engineering SQL",
 };
 
-const DIFFICULTY_LABELS = {
+const SKILL_LABELS = window.SQL_SKILL_LABELS;
+
+window.SQL_DIFFICULTY_LABELS = {
   all: "Any difficulty",
   starter: "Starter",
   intermediate: "Intermediate",
   advanced: "Advanced",
 };
 
-function getChallengeUrl(challenge) {
+const DIFFICULTY_LABELS = window.SQL_DIFFICULTY_LABELS;
+
+function getChallengeGitHubUrl(challenge) {
   return `https://github.com/Bmowville/sql-mini-challenges/tree/main/challenges/${challenge.folder}`;
 }
 
+function getChallengeViewerUrl(challenge) {
+  return `challenge.html?id=${encodeURIComponent(challenge.folder)}`;
+}
+
 function getMatches(skill, difficulty) {
   return CHALLENGES.filter((challenge) => {
     const skillMatches = skill === "all" || challenge.skill === skill;
@@ -82,7 +92,7 @@ function renderResults(results, summary, container) {
           <p>${challenge.focus}</p>
           <div class="result-footer">
             <span>${SKILL_LABELS[challenge.skill]}</span>
-            <a href="${getChallengeUrl(challenge)}">Open challenge</a>
+            <a href="${getChallengeViewerUrl(challenge)}">View challenge</a>
           </div>
         </article>
       `
diff --git a/docs/challenge-viewer.js b/docs/challenge-viewer.js
new file mode 100644
index 0000000..4d14e50
--- /dev/null
+++ b/docs/challenge-viewer.js
@@ -0,0 +1,254 @@
+const FILES = [
+  { key: "readme", label: "README.md", file: "README.md", format: "markdown" },
+  { key: "schema", label: "schema.sql", file: "schema.sql", format: "code" },
+  { key: "solution", label: "solution.sql", file: "solution.sql", format: "code" },
+  { key: "expected", label: "expected.json", file: "expected.json", format: "code" },
+];
+
+const RAW_BASE = "https://raw.githubusercontent.com/Bmowville/sql-mini-challenges/main/challenges";
+const GITHUB_BASE = "https://github.com/Bmowville/sql-mini-challenges/tree/main/challenges";
+
+function escapeHtml(value) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function renderInlineMarkdown(value) {
+  return escapeHtml(value)
+    .replace(/\[([^\]]+)]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+}
+
+function closeList(html, listType) {
+  if (listType) {
+    html.push(`</${listType}>`);
+  }
+  return null;
+}
+
+function renderMarkdown(markdown) {
+  const html = [];
+  const codeLines = [];
+  let inCode = false;
+  let listType = null;
+
+  for (const line of markdown.split("\n")) {
+    if (line.startsWith("```")) {
+      if (inCode) {
+        html.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+        codeLines.length = 0;
+        inCode = false;
+      } else {
+        listType = closeList(html, listType);
+        inCode = true;
+      }
+      continue;
+    }
+
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+
+    if (line.trim() === "") {
+      listType = closeList(html, listType);
+      continue;
+    }
+
+    if (line.startsWith("# ")) {
+      listType = closeList(html, listType);
+      html.push(`<h2>${renderInlineMarkdown(line.slice(2))}</h2>`);
+      continue;
+    }
+
+    if (line.startsWith("## ")) {
+      listType = closeList(html, listType);
+      html.push(`<h3>${renderInlineMarkdown(line.slice(3))}</h3>`);
+      continue;
+    }
+
+    if (line.startsWith("- ")) {
+      if (listType !== "ul") {
+        listType = closeList(html, listType);
+        html.push("<ul>");
+        listType = "ul";
+      }
+      html.push(`<li>${renderInlineMarkdown(line.slice(2))}</li>`);
+      continue;
+    }
+
+    const orderedListMatch = line.match(/^\d+\.\s+(.*)$/);
+    if (orderedListMatch) {
+      if (listType !== "ol") {
+        listType = closeList(html, listType);
+        html.push("<ol>");
+        listType = "ol";
+      }
+      html.push(`<li>${renderInlineMarkdown(orderedListMatch[1])}</li>`);
+      continue;
+    }
+
+    listType = closeList(html, listType);
+    html.push(`<p>${renderInlineMarkdown(line)}</p>`);
+  }
+
+  closeList(html, listType);
+  if (inCode) {
+    html.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+  }
+
+  return html.join("\n");
+}
+
+function getRequestedChallenge() {
+  const params = new URLSearchParams(window.location.search);
+  const requested = (params.get("id") || params.get("challenge") || "").trim();
+  if (!requested) return window.SQL_CHALLENGES[0];
+
+  return window.SQL_CHALLENGES.find(
+    (challenge) => challenge.folder === requested || challenge.id === requested || challenge.folder.startsWith(`${requested}_`)
+  );
+}
+
+function initChallengeSelect(root, selectedChallenge) {
+  const select = root.querySelector("[data-challenge-select]");
+  select.innerHTML = window.SQL_CHALLENGES
+    .map((challenge) => `<option value="${challenge.folder}">${challenge.id} - ${challenge.title}</option>`)
+    .join("");
+  select.value = selectedChallenge.folder;
+  select.addEventListener("change", () => {
+    window.location.href = `challenge.html?id=${encodeURIComponent(select.value)}`;
+  });
+}
+
+function getFileUrl(challenge, file) {
+  return `${RAW_BASE}/${challenge.folder}/${file.file}`;
+}
+
+function getRunCommand(challenge) {
+  return `cat challenges/${challenge.folder}/schema.sql challenges/${challenge.folder}/solution.sql | sqlite3 -header -column :memory:
+
+Windows CMD:
+type challenges\\${challenge.folder}\\schema.sql challenges\\${challenge.folder}\\solution.sql | sqlite3 -header -column :memory:`;
+}
+
+async function copyText(value, button) {
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch {
+    const textarea = document.createElement("textarea");
+    textarea.value = value;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "absolute";
+    textarea.style.left = "-9999px";
+    document.body.append(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    textarea.remove();
+  }
+
+  const original = button.textContent;
+  button.textContent = "Copied";
+  window.setTimeout(() => {
+    button.textContent = original;
+  }, 1400);
+}
+
+async function loadFile(challenge, file, state) {
+  const url = getFileUrl(challenge, file);
+  state.status.textContent = `Loading ${file.label}...`;
+  state.label.textContent = file.label;
+  state.rawLink.href = url;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const text = await response.text();
+    state.currentText = text;
+    state.content.className = `viewer-content ${file.format === "markdown" ? "viewer-markdown" : "viewer-code"}`;
+    state.content.innerHTML = file.format === "markdown"
+      ? renderMarkdown(text)
+      : `<pre><code>${escapeHtml(text)}</code></pre>`;
+    state.status.textContent = `${file.label} loaded.`;
+  } catch (error) {
+    state.currentText = "";
+    state.content.className = "viewer-content viewer-empty";
+    state.content.innerHTML = `
+      <h3>File could not be loaded</h3>
+      <p>Open the challenge folder on GitHub to inspect ${file.label} directly.</p>
+    `;
+    state.status.textContent = `Could not load ${file.label}.`;
+  }
+}
+
+function selectTab(key, state) {
+  const file = FILES.find((item) => item.key === key) || FILES[0];
+  state.tabs.forEach((tab) => {
+    tab.setAttribute("aria-selected", String(tab.dataset.fileTab === file.key));
+  });
+  loadFile(state.challenge, file, state);
+}
+
+function renderMissingChallenge(root) {
+  root.querySelector("[data-viewer-title]").textContent = "Challenge not found";
+  root.querySelector("[data-viewer-focus]").textContent = "Use the finder to choose a validated SQL challenge.";
+  root.querySelector("[data-viewer-status]").textContent = "No matching challenge id was provided.";
+  root.querySelector("[data-file-content]").innerHTML = `
+    <div class="viewer-empty">
+      <h3>Pick a challenge from the finder</h3>
+      <p>The viewer expects a URL like <code>challenge.html?id=038_inventory_stockout_risk</code>.</p>
+      <a class="button primary" href="index.html#challenge-finder">Open Finder</a>
+    </div>
+  `;
+}
+
+function initChallengeViewer() {
+  const root = document.querySelector("[data-challenge-viewer]");
+  if (!root) return;
+
+  const challenge = getRequestedChallenge();
+  if (!challenge) {
+    renderMissingChallenge(root);
+    return;
+  }
+
+  document.title = `${challenge.id} ${challenge.title} | SQL Mini Challenges`;
+  root.querySelector("[data-viewer-kicker]").textContent = `Challenge ${challenge.id}`;
+  root.querySelector("[data-viewer-title]").textContent = challenge.title;
+  root.querySelector("[data-viewer-focus]").textContent = challenge.focus;
+  root.querySelector("[data-viewer-id]").textContent = challenge.id;
+  root.querySelector("[data-viewer-skill]").textContent = window.SQL_SKILL_LABELS[challenge.skill];
+  root.querySelector("[data-viewer-difficulty]").textContent = window.SQL_DIFFICULTY_LABELS[challenge.difficulty];
+  root.querySelector("[data-github-link]").href = `${GITHUB_BASE}/${challenge.folder}`;
+  root.querySelector("[data-run-command]").textContent = getRunCommand(challenge);
+  initChallengeSelect(root, challenge);
+
+  const state = {
+    challenge,
+    currentText: "",
+    status: root.querySelector("[data-viewer-status]"),
+    label: root.querySelector("[data-file-label]"),
+    rawLink: root.querySelector("[data-raw-link]"),
+    content: root.querySelector("[data-file-content]"),
+    tabs: [...root.querySelectorAll("[data-file-tab]")],
+  };
+
+  state.tabs.forEach((tab) => {
+    tab.addEventListener("click", () => selectTab(tab.dataset.fileTab, state));
+  });
+
+  root.querySelector("[data-copy-file]").addEventListener("click", (event) => {
+    if (state.currentText) {
+      copyText(state.currentText, event.currentTarget);
+    }
+  });
+
+  selectTab("readme", state);
+}
+
+initChallengeViewer();
\ No newline at end of file
diff --git a/docs/challenge.html b/docs/challenge.html
new file mode 100644
index 0000000..5575e97
--- /dev/null
+++ b/docs/challenge.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta
+      name="description"
+      content="Read SQL Mini Challenges prompts, schemas, solutions, and expected outputs in a static challenge viewer."
+    >
+    <title>Challenge Viewer | SQL Mini Challenges</title>
+    <link rel="stylesheet" href="site.css">
+    <script src="challenge-finder.js" defer></script>
+    <script src="challenge-viewer.js" defer></script>
+  </head>
+  <body>
+    <header class="site-header">
+      <nav class="nav" aria-label="Primary navigation">
+        <a class="brand" href="index.html">SQL Mini Challenges</a>
+        <div class="nav-links">
+          <a href="index.html#challenge-finder">Finder</a>
+          <a href="https://github.com/Bmowville/sql-mini-challenges#challenge-index">Challenges</a>
+          <a href="https://github.com/Bmowville/sql-mini-challenges/blob/main/docs/learning-paths.md">Learning Paths</a>
+          <a href="https://github.com/Bmowville/sql-mini-challenges/releases/latest">Latest Release</a>
+        </div>
+      </nav>
+    </header>
+
+    <main class="viewer-main" data-challenge-viewer>
+      <section class="viewer-hero" aria-labelledby="viewer-title">
+        <div>
+          <p class="eyebrow" data-viewer-kicker>Challenge viewer</p>
+          <h1 id="viewer-title" data-viewer-title>Loading challenge...</h1>
+          <p class="lead" data-viewer-focus></p>
+          <div class="viewer-meta" aria-label="Challenge metadata">
+            <span data-viewer-id></span>
+            <span data-viewer-skill></span>
+            <span data-viewer-difficulty></span>
+          </div>
+          <div class="actions" aria-label="Challenge links">
+            <a class="button primary" data-github-link href="https://github.com/Bmowville/sql-mini-challenges">Open on GitHub</a>
+            <a class="button" href="index.html#challenge-finder">Back to Finder</a>
+          </div>
+        </div>
+        <aside class="viewer-run-card" aria-labelledby="run-heading">
+          <p class="eyebrow">Run locally</p>
+          <h2 id="run-heading">Copy the files into SQLite.</h2>
+          <pre class="command"><code data-run-command>Loading command...</code></pre>
+        </aside>
+      </section>
+
+      <section class="content-section viewer-section" aria-labelledby="files-heading">
+        <div class="section-heading">
+          <p class="eyebrow">Challenge files</p>
+          <h2 id="files-heading">Read the prompt, inspect the SQL, then compare expected output.</h2>
+          <p class="section-copy">
+            These tabs load from the repository source of truth, so the viewer stays aligned with the validated challenge folders.
+          </p>
+        </div>
+
+        <div class="viewer-status" data-viewer-status role="status" aria-live="polite">Loading challenge files...</div>
+
+        <div class="viewer-panel">
+          <div class="viewer-picker">
+            <label>
+              <span>Jump to challenge</span>
+              <select data-challenge-select aria-label="Jump to challenge"></select>
+            </label>
+          </div>
+
+          <div class="viewer-tabs" role="tablist" aria-label="Challenge file tabs">
+            <button class="tab-button" type="button" role="tab" aria-selected="true" data-file-tab="readme">README</button>
+            <button class="tab-button" type="button" role="tab" aria-selected="false" data-file-tab="schema">schema.sql</button>
+            <button class="tab-button" type="button" role="tab" aria-selected="false" data-file-tab="solution">solution.sql</button>
+            <button class="tab-button" type="button" role="tab" aria-selected="false" data-file-tab="expected">expected.json</button>
+          </div>
+
+          <div class="viewer-toolbar">
+            <span data-file-label>README.md</span>
+            <div class="viewer-toolbar-actions">
+              <button class="button" type="button" data-copy-file>Copy file</button>
+              <a class="button" data-raw-link href="https://github.com/Bmowville/sql-mini-challenges">Open raw</a>
+            </div>
+          </div>
+
+          <div class="viewer-content" data-file-content tabindex="0"></div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <span>Built for local SQL practice and review.</span>
+      <a href="index.html#challenge-finder">Find another challenge</a>
+    </footer>
+  </body>
+</html>
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index a5e4e07..6e0ea91 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,6 +18,7 @@
         <div class="nav-links">
           <a href="https://github.com/Bmowville/sql-mini-challenges#challenge-index">Challenges</a>
           <a href="#challenge-finder">Finder</a>
+          <a href="challenge.html?id=001_passenger_survival">Viewer</a>
           <a href="https://github.com/Bmowville/sql-mini-challenges/blob/main/docs/learning-paths.md">Learning Paths</a>
           <a href="https://github.com/Bmowville/sql-mini-challenges/blob/main/docs/challenge-roadmap.md">Roadmap</a>
           <a href="https://github.com/Bmowville/sql-mini-challenges/releases/latest">Latest Release</a>
@@ -76,7 +77,7 @@ <h1 id="page-title">40 SQL analytics challenges with validated answers.</h1>
           <p class="eyebrow">Challenge finder</p>
           <h2 id="finder-heading">Pick a problem that matches the skill you want to practice.</h2>
           <p class="section-copy">
-            Filter the challenge set by topic and difficulty, then open one of the suggested folders with its schema, solution, and expected output.
+            Filter the challenge set by topic and difficulty, then open a readable viewer with the prompt, schema, solution, and expected output.
           </p>
         </div>
         <div class="finder-panel" data-challenge-finder>
diff --git a/docs/site.css b/docs/site.css
index e373ab3..87c414f 100644
--- a/docs/site.css
+++ b/docs/site.css
@@ -341,6 +341,171 @@ code {
   min-height: auto;
 }
 
+.viewer-main {
+  padding-bottom: 72px;
+}
+
+.viewer-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  gap: 42px;
+  align-items: start;
+  padding: 64px 0 24px;
+}
+
+.viewer-hero h1 {
+  font-size: clamp(2.1rem, 4vw, 3.6rem);
+}
+
+.viewer-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 650;
+}
+
+.viewer-meta span {
+  padding: 6px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.viewer-run-card,
+.viewer-panel {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.viewer-run-card {
+  padding: 22px;
+}
+
+.viewer-run-card h2 {
+  font-size: 1.35rem;
+}
+
+.viewer-section {
+  padding-top: 48px;
+}
+
+.viewer-status {
+  margin-bottom: 12px;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.viewer-tabs,
+.viewer-toolbar,
+.viewer-toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.viewer-picker {
+  padding: 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.viewer-picker label {
+  display: grid;
+  gap: 8px;
+  max-width: 460px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 650;
+}
+
+.viewer-picker select {
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+}
+
+.viewer-tabs {
+  padding: 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.tab-button {
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 650;
+}
+
+.tab-button[aria-selected="true"] {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.viewer-toolbar {
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.92rem;
+  font-weight: 650;
+}
+
+.viewer-toolbar .button {
+  min-height: 38px;
+  padding: 0 12px;
+}
+
+.viewer-content {
+  min-height: 420px;
+  background: var(--bg);
+}
+
+.viewer-code pre,
+.viewer-markdown pre {
+  border-radius: 0;
+  background: var(--code);
+}
+
+.viewer-markdown {
+  padding: 28px;
+}
+
+.viewer-markdown h2,
+.viewer-markdown h3 {
+  margin-top: 22px;
+}
+
+.viewer-markdown p,
+.viewer-markdown li {
+  max-width: 820px;
+  color: var(--muted);
+}
+
+.viewer-markdown code:not(pre code) {
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text);
+}
+
+.viewer-empty {
+  padding: 28px;
+}
+
 .split {
   display: grid;
   grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
@@ -385,6 +550,7 @@ code {
   }
 
   .intro,
+  .viewer-hero,
   .split {
     grid-template-columns: 1fr;
   }
@@ -409,6 +575,20 @@ code {
     width: 100%;
     justify-content: center;
   }
+
+  .viewer-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .viewer-toolbar-actions,
+  .viewer-toolbar-actions .button {
+    width: 100%;
+  }
+
+  .viewer-toolbar-actions .button {
+    justify-content: center;
+  }
 }
 
 @media (prefers-color-scheme: dark) {