diff --git a/screenshots/unit-converter.webp b/screenshots/unit-converter.webp
new file mode 100644
index 0000000..6570236
Binary files /dev/null and b/screenshots/unit-converter.webp differ
diff --git a/tools.json b/tools.json
index cb3c24c..b8bb599 100644
--- a/tools.json
+++ b/tools.json
@@ -1,5 +1,5 @@
 {
-  "catalogVersion": 20,
+  "catalogVersion": 21,
   "tools": [
     {
       "dir": "color-capture",
@@ -208,6 +208,14 @@
       "glyph": "🎵",
       "color": "#4d63ff",
       "version": 1
+    },
+    {
+      "dir": "unit-converter",
+      "name": "Unit Converter",
+      "description": "Convert length, weight, temperature, volume, area, speed, time, and digital storage — instantly and fully offline.",
+      "glyph": "📐",
+      "color": "#4d63ff",
+      "version": 1
     }
   ]
 }
diff --git a/unit-converter/index.html b/unit-converter/index.html
new file mode 100644
index 0000000..63fa134
--- /dev/null
+++ b/unit-converter/index.html
@@ -0,0 +1,626 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="theme-color" content="#eef0f4" />
+  <title>Unit Converter</title>
+  <style>
+    /* Single-file, fully offline. No remote fonts/scripts/images — the app runs
+       tools under a strict CSP that blocks the network. Every conversion is pure
+       arithmetic done in the browser; nothing loads or phones home. State (the
+       last category + units) lives in localStorage. Palette + shapes follow the
+       Hillnote design system: azure primary, cool-mist canvas, near-black ink,
+       generous 24px card radius, Manrope display + Inter body. */
+    :root {
+      --primary: #4d63ff;
+      --primary-active: #6f82ff;
+      --primary-pale: #e6ebff;
+      --on-primary: #f4f6ff;
+      --ink: #111318;
+      --body: #454852;
+      --mute: #868a93;
+      --canvas: #ffffff;
+      --canvas-soft: #eef0f4;
+      --line: #dfe3ec;
+      --r-md: 12px;
+      --r-lg: 16px;
+      --r-xl: 24px;
+      --display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+      --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    }
+
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      background: var(--canvas-soft);
+      color: var(--ink);
+      font-family: var(--sans);
+      font-feature-settings: "calt";
+      min-height: 100dvh;
+      padding: 28px 20px 40px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    header { text-align: center; max-width: 640px; }
+    header .eyebrow {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: var(--primary);
+    }
+    header h1 {
+      font-family: var(--display);
+      font-weight: 900;
+      font-size: clamp(1.9rem, 6vw, 2.6rem);
+      letter-spacing: -0.02em;
+      line-height: 1.05;
+      margin-top: 6px;
+    }
+    header p {
+      color: var(--body);
+      font-size: 0.95rem;
+      line-height: 1.5;
+      margin-top: 8px;
+    }
+
+    .shell { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
+
+    /* ── Category pills ────────────────────────────────────────── */
+    .cats {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      justify-content: center;
+    }
+    .cats button {
+      border: 1px solid var(--line);
+      background: var(--canvas);
+      color: var(--body);
+      border-radius: 9999px;
+      font-family: var(--sans);
+      font-size: 0.85rem;
+      font-weight: 600;
+      padding: 8px 16px;
+      cursor: pointer;
+      transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
+    }
+    .cats button:hover { background: var(--canvas-soft); }
+    .cats button:active { transform: scale(0.96); }
+    .cats button.active {
+      background: var(--primary);
+      color: var(--on-primary);
+      border-color: var(--primary);
+    }
+    .cats button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+
+    /* ── Converter card ────────────────────────────────────────── */
+    .card {
+      background: var(--canvas);
+      border-radius: var(--r-xl);
+      padding: 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+
+    .field { display: flex; flex-direction: column; gap: 8px; }
+    .field > label {
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--mute);
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 40%;
+      gap: 10px;
+    }
+
+    input.value {
+      width: 100%;
+      min-width: 0;
+      border: 1px solid var(--line);
+      background: var(--canvas);
+      color: var(--ink);
+      border-radius: var(--r-md);
+      font-family: var(--display);
+      font-weight: 800;
+      font-size: 1.5rem;
+      letter-spacing: -0.02em;
+      padding: 12px 14px;
+      font-variant-numeric: tabular-nums;
+      transition: border-color 0.12s, box-shadow 0.12s;
+    }
+    input.value:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-pale);
+    }
+    input.value.invalid { border-color: var(--negative, #e0453f); }
+
+    select {
+      width: 100%;
+      min-width: 0;
+      border: 1px solid var(--line);
+      background: var(--canvas);
+      color: var(--ink);
+      border-radius: var(--r-md);
+      font-family: var(--sans);
+      font-size: 0.95rem;
+      font-weight: 600;
+      padding: 12px 12px;
+      cursor: pointer;
+      transition: border-color 0.12s, box-shadow 0.12s;
+    }
+    select:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px var(--primary-pale);
+    }
+
+    /* ── Swap divider ──────────────────────────────────────────── */
+    .swap-line { display: flex; align-items: center; gap: 12px; }
+    .swap-line hr { flex: 1; height: 1px; background: var(--line); border: none; }
+    .swap {
+      flex: none;
+      width: 44px; height: 44px;
+      border-radius: 9999px;
+      border: 1px solid var(--line);
+      background: var(--canvas);
+      color: var(--primary);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.12s, border-color 0.12s, transform 0.18s ease;
+    }
+    .swap:hover { background: var(--primary-pale); border-color: var(--primary); }
+    .swap:active { transform: rotate(180deg) scale(0.94); }
+    .swap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+    .swap svg { width: 20px; height: 20px; display: block; }
+
+    /* ── Equation echo ─────────────────────────────────────────── */
+    .echo {
+      text-align: center;
+      font-size: 0.95rem;
+      color: var(--body);
+      line-height: 1.5;
+      min-height: 1.4em;
+    }
+    .echo strong { color: var(--ink); font-weight: 700; }
+
+    /* ── Quick reference ───────────────────────────────────────── */
+    .ref {
+      background: var(--canvas);
+      border-radius: var(--r-xl);
+      padding: 18px 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .ref h2 {
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--mute);
+      margin-bottom: 8px;
+    }
+    .ref-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 12px;
+      padding: 7px 0;
+      border-top: 1px solid var(--line);
+      font-size: 0.9rem;
+    }
+    .ref-row:first-of-type { border-top: none; }
+    .ref-row .unit { color: var(--body); font-weight: 600; }
+    .ref-row .num { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
+
+    footer {
+      color: var(--mute);
+      font-size: 0.75rem;
+      text-align: center;
+      max-width: 560px;
+    }
+  </style>
+</head>
+<body>
+
+  <header>
+    <div class="eyebrow">Everyday &middot; Convert</div>
+    <h1>Unit Converter</h1>
+    <p>Convert length, weight, temperature and more — instantly, and fully offline.</p>
+  </header>
+
+  <div class="shell">
+    <nav class="cats" id="cats" aria-label="Measurement category"></nav>
+
+    <section class="card" aria-label="Converter">
+      <div class="field">
+        <label for="fromVal">From</label>
+        <div class="row">
+          <input class="value" id="fromVal" type="text" inputmode="decimal"
+                 autocomplete="off" spellcheck="false" aria-label="Value to convert" value="1" />
+          <select id="fromUnit" aria-label="Convert from unit"></select>
+        </div>
+      </div>
+
+      <div class="swap-line">
+        <hr />
+        <button class="swap" id="swap" type="button" aria-label="Swap units" title="Swap units">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
+               stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M7 4v16" /><path d="M3 8l4-4 4 4" />
+            <path d="M17 20V4" /><path d="M21 16l-4 4-4-4" />
+          </svg>
+        </button>
+        <hr />
+      </div>
+
+      <div class="field">
+        <label for="toVal">To</label>
+        <div class="row">
+          <input class="value" id="toVal" type="text" inputmode="decimal"
+                 autocomplete="off" spellcheck="false" aria-label="Converted value" value="1" />
+          <select id="toUnit" aria-label="Convert to unit"></select>
+        </div>
+      </div>
+
+      <p class="echo" id="echo" aria-live="polite"></p>
+    </section>
+
+    <section class="ref" aria-label="Quick reference">
+      <h2 id="refTitle">Quick reference</h2>
+      <div id="refRows"></div>
+    </section>
+  </div>
+
+  <footer>Everything runs on your device. Nothing you type ever leaves it.</footer>
+
+  <script>
+    'use strict';
+
+    var KEY = 'unit-converter:v1';
+
+    /* Each linear category maps a unit → its size in the category's base unit,
+       so converting is value * from.factor / to.factor. Temperature is the one
+       non-linear case (offsets), handled with explicit to/from-Celsius fns. */
+    var CATEGORIES = [
+      {
+        id: 'length', label: 'Length',
+        units: [
+          { id: 'mm', name: 'Millimetre', f: 0.001 },
+          { id: 'cm', name: 'Centimetre', f: 0.01 },
+          { id: 'm',  name: 'Metre', f: 1 },
+          { id: 'km', name: 'Kilometre', f: 1000 },
+          { id: 'in', name: 'Inch', f: 0.0254 },
+          { id: 'ft', name: 'Foot', f: 0.3048 },
+          { id: 'yd', name: 'Yard', f: 0.9144 },
+          { id: 'mi', name: 'Mile', f: 1609.344 }
+        ],
+        from: 'mi', to: 'km'
+      },
+      {
+        id: 'mass', label: 'Weight',
+        units: [
+          { id: 'mg', name: 'Milligram', f: 0.000001 },
+          { id: 'g',  name: 'Gram', f: 0.001 },
+          { id: 'kg', name: 'Kilogram', f: 1 },
+          { id: 't',  name: 'Tonne', f: 1000 },
+          { id: 'oz', name: 'Ounce', f: 0.028349523125 },
+          { id: 'lb', name: 'Pound', f: 0.45359237 },
+          { id: 'st', name: 'Stone', f: 6.35029318 }
+        ],
+        from: 'lb', to: 'kg'
+      },
+      {
+        id: 'temp', label: 'Temperature',
+        temp: true,
+        units: [
+          { id: 'C', name: 'Celsius' },
+          { id: 'F', name: 'Fahrenheit' },
+          { id: 'K', name: 'Kelvin' }
+        ],
+        from: 'C', to: 'F'
+      },
+      {
+        id: 'volume', label: 'Volume',
+        units: [
+          { id: 'ml',   name: 'Millilitre', f: 0.001 },
+          { id: 'l',    name: 'Litre', f: 1 },
+          { id: 'm3',   name: 'Cubic metre', f: 1000 },
+          { id: 'tsp',  name: 'Teaspoon (US)', f: 0.00492892159375 },
+          { id: 'tbsp', name: 'Tablespoon (US)', f: 0.01478676478125 },
+          { id: 'floz', name: 'Fluid ounce (US)', f: 0.0295735295625 },
+          { id: 'cup',  name: 'Cup (US)', f: 0.2365882365 },
+          { id: 'pt',   name: 'Pint (US)', f: 0.473176473 },
+          { id: 'gal',  name: 'Gallon (US)', f: 3.785411784 }
+        ],
+        from: 'cup', to: 'ml'
+      },
+      {
+        id: 'area', label: 'Area',
+        units: [
+          { id: 'cm2', name: 'Square centimetre', f: 0.0001 },
+          { id: 'm2',  name: 'Square metre', f: 1 },
+          { id: 'km2', name: 'Square kilometre', f: 1000000 },
+          { id: 'ft2', name: 'Square foot', f: 0.09290304 },
+          { id: 'yd2', name: 'Square yard', f: 0.83612736 },
+          { id: 'ac',  name: 'Acre', f: 4046.8564224 },
+          { id: 'ha',  name: 'Hectare', f: 10000 },
+          { id: 'mi2', name: 'Square mile', f: 2589988.110336 }
+        ],
+        from: 'ac', to: 'ha'
+      },
+      {
+        id: 'speed', label: 'Speed',
+        units: [
+          { id: 'ms',  name: 'Metre / second', f: 1 },
+          { id: 'kmh', name: 'Kilometre / hour', f: 0.2777777777777778 },
+          { id: 'mph', name: 'Mile / hour', f: 0.44704 },
+          { id: 'kn',  name: 'Knot', f: 0.5144444444444445 },
+          { id: 'fts', name: 'Foot / second', f: 0.3048 }
+        ],
+        from: 'mph', to: 'kmh'
+      },
+      {
+        id: 'time', label: 'Time',
+        units: [
+          { id: 'ms',  name: 'Millisecond', f: 0.001 },
+          { id: 's',   name: 'Second', f: 1 },
+          { id: 'min', name: 'Minute', f: 60 },
+          { id: 'h',   name: 'Hour', f: 3600 },
+          { id: 'd',   name: 'Day', f: 86400 },
+          { id: 'wk',  name: 'Week', f: 604800 }
+        ],
+        from: 'h', to: 'min'
+      },
+      {
+        id: 'data', label: 'Digital',
+        units: [
+          { id: 'bit', name: 'Bit', f: 0.125 },
+          { id: 'B',   name: 'Byte', f: 1 },
+          { id: 'KB',  name: 'Kilobyte (1000)', f: 1000 },
+          { id: 'KiB', name: 'Kibibyte (1024)', f: 1024 },
+          { id: 'MB',  name: 'Megabyte', f: 1000000 },
+          { id: 'MiB', name: 'Mebibyte', f: 1048576 },
+          { id: 'GB',  name: 'Gigabyte', f: 1000000000 },
+          { id: 'GiB', name: 'Gibibyte', f: 1073741824 },
+          { id: 'TB',  name: 'Terabyte', f: 1000000000000 }
+        ],
+        from: 'MB', to: 'MiB'
+      }
+    ];
+
+    // ── state ──────────────────────────────────────────────────
+    var saved = load();
+    var current = CATEGORIES[0];
+    if (saved && saved.cat) {
+      var c = findCat(saved.cat);
+      if (c) {
+        current = c;
+        if (findUnit(c, saved.from)) c.from = saved.from;
+        if (findUnit(c, saved.to)) c.to = saved.to;
+      }
+    }
+    var lastEdited = 'from'; // which field the user last drove
+
+    // ── DOM ────────────────────────────────────────────────────
+    var catsEl   = document.getElementById('cats');
+    var fromVal  = document.getElementById('fromVal');
+    var toVal    = document.getElementById('toVal');
+    var fromUnit = document.getElementById('fromUnit');
+    var toUnit   = document.getElementById('toUnit');
+    var echoEl   = document.getElementById('echo');
+    var refTitle = document.getElementById('refTitle');
+    var refRows  = document.getElementById('refRows');
+
+    function findCat(id) {
+      for (var i = 0; i < CATEGORIES.length; i++) if (CATEGORIES[i].id === id) return CATEGORIES[i];
+      return null;
+    }
+    function findUnit(cat, id) {
+      for (var i = 0; i < cat.units.length; i++) if (cat.units[i].id === id) return cat.units[i];
+      return null;
+    }
+
+    function load() {
+      try {
+        var raw = localStorage.getItem(KEY);
+        if (!raw) return null;
+        var o = JSON.parse(raw);
+        return (o && typeof o === 'object') ? o : null;
+      } catch (e) { return null; }
+    }
+    function save() {
+      try {
+        localStorage.setItem(KEY, JSON.stringify({ cat: current.id, from: current.from, to: current.to }));
+      } catch (e) { /* storage full or blocked — fine */ }
+    }
+
+    // ── conversion ─────────────────────────────────────────────
+    function tempToC(v, unit) {
+      if (unit === 'C') return v;
+      if (unit === 'F') return (v - 32) * 5 / 9;
+      return v - 273.15; // K
+    }
+    function tempFromC(c, unit) {
+      if (unit === 'C') return c;
+      if (unit === 'F') return c * 9 / 5 + 32;
+      return c + 273.15; // K
+    }
+    function convert(v, fromId, toId) {
+      if (current.temp) return tempFromC(tempToC(v, fromId), toId);
+      var fu = findUnit(current, fromId), tu = findUnit(current, toId);
+      return v * fu.f / tu.f;
+    }
+
+    // Trim to a sensible number of significant figures without trailing zeros.
+    function fmt(n) {
+      if (!isFinite(n)) return '—';
+      if (n === 0) return '0';
+      var abs = Math.abs(n);
+      var s;
+      if (abs !== 0 && (abs < 1e-4 || abs >= 1e12)) {
+        s = n.toExponential(4).replace(/\.?0+e/, 'e');
+      } else {
+        s = Number(n.toPrecision(8)).toString();
+      }
+      return s;
+    }
+
+    function parseVal(str) {
+      if (typeof str !== 'string') return NaN;
+      var t = str.trim().replace(/,/g, '');
+      if (t === '' || t === '-' || t === '.' || t === '-.') return NaN;
+      return Number(t);
+    }
+
+    // ── rendering ──────────────────────────────────────────────
+    function buildCats() {
+      catsEl.textContent = '';
+      CATEGORIES.forEach(function (cat) {
+        var b = document.createElement('button');
+        b.type = 'button';
+        b.textContent = cat.label;
+        b.setAttribute('aria-pressed', String(cat === current));
+        if (cat === current) b.className = 'active';
+        b.addEventListener('click', function () { selectCat(cat); });
+        catsEl.appendChild(b);
+      });
+    }
+
+    function buildUnits() {
+      [fromUnit, toUnit].forEach(function (sel) {
+        sel.textContent = '';
+        current.units.forEach(function (u) {
+          var o = document.createElement('option');
+          o.value = u.id;
+          o.textContent = u.name;
+          sel.appendChild(o);
+        });
+      });
+      fromUnit.value = current.from;
+      toUnit.value = current.to;
+    }
+
+    function selectCat(cat) {
+      current = cat;
+      lastEdited = 'from';
+      buildCats();
+      buildUnits();
+      if (parseVal(fromVal.value) == null || isNaN(parseVal(fromVal.value))) fromVal.value = '1';
+      recompute('from');
+      save();
+    }
+
+    function unitName(id) {
+      var u = findUnit(current, id);
+      return u ? u.name.toLowerCase() : id;
+    }
+
+    function recompute(driver) {
+      var srcInput = driver === 'to' ? toVal : fromVal;
+      var dstInput = driver === 'to' ? fromVal : toVal;
+      var srcUnit  = driver === 'to' ? current.to : current.from;
+      var dstUnit  = driver === 'to' ? current.from : current.to;
+
+      var v = parseVal(srcInput.value);
+      if (isNaN(v)) {
+        srcInput.classList.toggle('invalid', srcInput.value.trim() !== '');
+        dstInput.value = '';
+        echoEl.textContent = '';
+        renderRef(NaN);
+        return;
+      }
+      srcInput.classList.remove('invalid');
+      var out = convert(v, srcUnit, dstUnit);
+      dstInput.value = fmt(out);
+
+      // Echo always reads left-to-right (from → to) regardless of which field drove.
+      var fv = parseVal(fromVal.value);
+      if (!isNaN(fv)) {
+        var res = convert(fv, current.from, current.to);
+        echoEl.innerHTML = '<strong>' + fmt(fv) + '</strong> ' + esc(unitName(current.from)) +
+          ' = <strong>' + fmt(res) + '</strong> ' + esc(unitName(current.to));
+        renderRef(fv);
+      } else {
+        echoEl.textContent = '';
+        renderRef(NaN);
+      }
+    }
+
+    function esc(s) {
+      return String(s).replace(/[&<>]/g, function (ch) {
+        return ch === '&' ? '&amp;' : ch === '<' ? '&lt;' : '&gt;';
+      });
+    }
+
+    // Quick reference: the "from" value expressed in every other unit.
+    function renderRef(fromValue) {
+      refTitle.textContent = current.temp
+        ? 'In every scale'
+        : (isNaN(fromValue) ? 'Quick reference' : fmt(fromValue) + ' ' + unitName(current.from) + ' in every unit');
+      refRows.textContent = '';
+      if (isNaN(fromValue)) return;
+      current.units.forEach(function (u) {
+        var row = document.createElement('div');
+        row.className = 'ref-row';
+        var name = document.createElement('span');
+        name.className = 'unit';
+        name.textContent = u.name;
+        var num = document.createElement('span');
+        num.className = 'num';
+        num.textContent = fmt(convert(fromValue, current.from, u.id));
+        row.appendChild(name);
+        row.appendChild(num);
+        refRows.appendChild(row);
+      });
+    }
+
+    // ── events ─────────────────────────────────────────────────
+    fromVal.addEventListener('input', function () { lastEdited = 'from'; recompute('from'); });
+    toVal.addEventListener('input',   function () { lastEdited = 'to';   recompute('to'); });
+
+    fromUnit.addEventListener('change', function () {
+      current.from = fromUnit.value;
+      recompute(lastEdited);
+      save();
+    });
+    toUnit.addEventListener('change', function () {
+      current.to = toUnit.value;
+      recompute(lastEdited);
+      save();
+    });
+
+    document.getElementById('swap').addEventListener('click', function () {
+      var f = current.from;
+      current.from = current.to;
+      current.to = f;
+      fromUnit.value = current.from;
+      toUnit.value = current.to;
+      // Keep the visible "from" number, recompute the result from it.
+      lastEdited = 'from';
+      recompute('from');
+      save();
+    });
+
+    // ── first paint ────────────────────────────────────────────
+    buildCats();
+    buildUnits();
+    recompute('from');
+  </script>
+
+</body>
+</html>
