diff --git a/static/math.html b/static/math.html
new file mode 100644
index 0000000..e9ea243
--- /dev/null
+++ b/static/math.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Multiplication Worksheets</title>
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    font-family: 'Nunito', sans-serif;
+    background: #f5f5f5;
+    color: #111;
+  }
+
+  /*  Screen nav  */
+  .screen-nav {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    background: #111;
+    color: white;
+    padding: 8px 20px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 100;
+    flex-wrap: wrap;
+  }
+  .screen-nav label {
+    font-weight: 700;
+    font-size: 13px;
+    margin-right: 4px;
+  }
+  .tab-btn {
+    background: rgba(255,255,255,0.12);
+    border: none;
+    color: white;
+    padding: 5px 13px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    font-size: 13px;
+  }
+  .tab-btn:hover { background: rgba(255,255,255,0.25); }
+  .tab-btn.active { background: white; color: #111; }
+
+  .nav-actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+  }
+  .action-btn {
+    background: white;
+    border: none;
+    color: #111;
+    padding: 6px 16px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 800;
+    font-size: 13px;
+  }
+  .action-btn:hover { background: #ddd; }
+
+  /*  Worksheet  */
+  .worksheet {
+    display: none;
+    max-width: 680px;
+    margin: 68px auto 40px;
+    padding: 32px 36px;
+    background: white;
+  }
+  .worksheet.visible { display: block; }
+
+  .ws-header {
+    text-align: center;
+    margin-bottom: 28px;
+    border-bottom: 2px solid #111;
+    padding-bottom: 14px;
+  }
+  .ws-title {
+    font-size: 1.8rem;
+    font-weight: 800;
+    letter-spacing: 1px;
+  }
+  .ws-meta {
+    display: flex;
+    gap: 40px;
+    justify-content: center;
+    margin-top: 10px;
+    font-size: 0.9rem;
+  }
+  .ws-meta div { display: flex; align-items: center; gap: 6px; }
+  .ws-meta span {
+    border-bottom: 1.5px solid #111;
+    min-width: 130px;
+    display: inline-block;
+    height: 18px;
+  }
+
+  /*  Problems  */
+  .section { margin-bottom: 24px; }
+
+  .problems-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px 40px;
+  }
+
+  .problem {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    font-size: 1.25rem;
+    font-weight: 700;
+    padding: 7px 4px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  .prob-num {
+    min-width: 26px;
+    font-size: 0.78rem;
+    font-weight: 800;
+    color: #999;
+    flex-shrink: 0;
+  }
+  .answer-line {
+    border-bottom: 2px solid #111;
+    min-width: 38px;
+    display: inline-block;
+    height: 20px;
+    vertical-align: bottom;
+  }
+  .box-blank {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 2px solid #111;
+    border-radius: 4px;
+    vertical-align: middle;
+  }
+
+  .section-divider {
+    border: none;
+    border-top: 1.5px dashed #ccc;
+    margin: 22px 0;
+  }
+
+  h1 {
+    font-size: 1.2em;
+    margin-bottom: 10px;
+    font-weight: bold;
+  }
+
+  /*  Print  */
+  @media print {
+    body { background: white; }
+    .screen-nav { display: none !important; }
+    .worksheet { display: none !important; margin: 0; padding: 0; }
+    .worksheet.visible { display: block !important; }
+
+    .ws-header {
+      margin-bottom: 14px;
+      padding-bottom: 8px;
+    }
+    .ws-title { font-size: 1.4rem; }
+    .ws-meta { margin-top: 6px; font-size: 0.82rem; }
+    .ws-meta span { min-width: 110px; }
+
+    .section { margin-bottom: 0; }
+    .section-divider { margin: 8px 0; }
+
+    .problems-grid { gap: 2px 40px; }
+
+    .problem {
+      font-size: 1.05rem;
+      padding: 4px 4px;
+      border-bottom-color: #ccc;
+      margin-left: 30px;
+      margin-bottom: 12px;
+    }
+    .answer-line { height: 16px; min-width: 32px; }
+    .box-blank { width: 24px; height: 24px; }
+  }
+  @page { margin: 0.6in; }
+</style>
+</head>
+<body>
+
+<nav class="screen-nav" id="nav">
+  <label>Times Tables:</label>
+</nav>
+
+<div id="worksheets-container"></div>
+
+<script>
+function shuffle(arr) {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+const nums = [1,2,3,4,5,6,7,8,9,10];
+
+function renderProblems(n) {
+  const sA = shuffle(nums);
+  const sB = shuffle(nums);
+  const sC = shuffle(nums);
+
+  const partA = sA.map((k, i) =>
+    `<div class="problem"><span class="prob-num">${i+1}.</span><span>${n} &times; ${k} = <span class="answer-line"></span></span></div>`
+  ).join('');
+
+  const partB = sB.map((k, i) =>
+    `<div class="problem"><span class="prob-num">${i+1}.</span><span>${k} &times; ${n} = <span class="answer-line"></span></span></div>`
+  ).join('');
+
+  const partC = sC.map((k, i) =>
+    `<div class="problem"><span class="prob-num">${i+1}.</span><span>${n} &times; <span class="box-blank"></span> = ${n*k}</span></div>`
+  ).join('');
+
+  return `
+    <div class="section"><h1>Part I.</h1><div class="problems-grid">${partA}</div></div>
+    <hr class="section-divider">
+    <div class="section"><h1>Part II.</h1><div class="problems-grid">${partB}</div></div>
+    <hr class="section-divider">
+    <div class="section"><h1>Part III.</h1><div class="problems-grid">${partC}</div></div>
+  `;
+}
+
+function buildWorksheet(n) {
+  return `
+  <div class="worksheet" id="ws-${n}" data-n="${n}">
+    <div class="ws-header">
+      <div class="ws-title">Multiplying by ${n}</div>
+      <div class="ws-meta">
+        <div>Name: <span></span></div>
+        <div>Date: <span></span></div>
+      </div>
+    </div>
+    <div class="problems" id="problems-${n}">
+      ${renderProblems(n)}
+    </div>
+  </div>`;
+}
+
+// Build nav and worksheets
+const container = document.getElementById('worksheets-container');
+const nav = document.getElementById('nav');
+
+for (let n = 2; n <= 9; n++) {
+  container.innerHTML += buildWorksheet(n);
+
+  const btn = document.createElement('button');
+  btn.className = 'tab-btn';
+  btn.textContent = '\u00d7' + n;
+  btn.dataset.n = n;
+  btn.onclick = () => showSheet(n);
+  nav.appendChild(btn);
+}
+
+// Action buttons
+const actions = document.createElement('div');
+actions.className = 'nav-actions';
+
+const randomizeBtn = document.createElement('button');
+randomizeBtn.className = 'action-btn';
+randomizeBtn.textContent = '\uD83D\uDD00 Randomize';
+randomizeBtn.onclick = () => {
+  const ws = document.querySelector('.worksheet.visible');
+  if (!ws) return;
+  const n = +ws.dataset.n;
+  document.getElementById('problems-' + n).innerHTML = renderProblems(n);
+};
+
+const printBtn = document.createElement('button');
+printBtn.className = 'action-btn';
+printBtn.textContent = '\uD83D\uDDA8 Print';
+printBtn.onclick = () => window.print();
+
+actions.appendChild(randomizeBtn);
+actions.appendChild(printBtn);
+nav.appendChild(actions);
+
+function showSheet(n) {
+  document.querySelectorAll('.worksheet').forEach(el => el.classList.remove('visible'));
+  document.querySelector('#ws-' + n).classList.add('visible');
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', +b.dataset.n === n));
+}
+
+showSheet(2);
+</script>
+</body>
+</html>
+
