diff --git a/templates/pages/account.html b/templates/pages/account.html
index 3fd6edc..2b0ac38 100644
--- a/templates/pages/account.html
+++ b/templates/pages/account.html
@@ -67,16 +67,16 @@
           id="add-passkey-btn"
           type="button"
           onclick="registerPasskey()"
-          class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+          class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
         >
-          Register
+          {{ icons::key("h-4 w-4") }} Register
         </button>
         <button
           type="button"
           data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
-          class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
+          class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
       </div>
       <div id="add-passkey-loading" class="mt-3 hidden flex items-center gap-3 text-sm text-accent">
@@ -90,8 +90,9 @@
         type="button"
         data-show="!$_showPasskeyForm"
         data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)"
-        class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover"
+        class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
       >
+        {{ icons::key("h-4 w-4") }}
         Add Passkey
       </button>
     </div>
@@ -167,17 +168,17 @@
           </label>
           <button
             type="submit"
-            class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
+            class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
             data-attr:disabled="$_creatingToken"
           >
-            Create
+            {{ icons::plus("h-4 w-4") }} Create
           </button>
           <button
             type="button"
             data-on:click="$_showTokenForm = false; $_tokenError = ''"
-            class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
+            class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
           >
-            Cancel
+            {{ icons::x_mark("h-4 w-4") }} Cancel
           </button>
         </div>
       </form>
@@ -201,9 +202,9 @@
         <button
           type="button"
           onclick="copyToken(this)"
-          class="shrink-0 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500"
+          class="shrink-0 inline-flex items-center gap-2 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500"
         >
-          Copy
+          {{ icons::clipboard("h-4 w-4") }} Copy
         </button>
       </div>
     </div>
@@ -213,8 +214,9 @@
         type="button"
         data-show="!$_showTokenForm && !$_tokenCreated"
         data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)"
-        class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover"
+        class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
       >
+        {{ icons::terminal("h-4 w-4") }}
         Create Token
       </button>
     </div>
@@ -233,22 +235,25 @@
       <a
         href="/api/v1/backup"
         download
-        class="rounded-md bg-accent px-4 py-2 text-center text-sm font-medium text-accent-text transition hover:bg-accent-hover"
+        class="inline-flex items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
       >
+        {{ icons::arrow_down_tray("h-4 w-4") }}
         Download Backup
       </a>
       <button
         type="button"
-        class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
+        class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
         onclick="document.getElementById('restore-file-input').click()"
       >
+        {{ icons::arrow_up_tray("h-4 w-4") }}
         Restore from Backup
       </button>
       <button
         type="button"
-        class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
+        class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:text-red-700 hover:bg-surface-alt"
         onclick="resetDatabase()"
       >
+        {{ icons::delete("h-4 w-4") }}
         Reset Database
       </button>
     </div>
diff --git a/templates/pages/add.html b/templates/pages/add.html
index 0c84810..cdd7437 100644
--- a/templates/pages/add.html
+++ b/templates/pages/add.html
@@ -118,8 +118,8 @@
         </label>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Roaster
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Roaster
         </button>
       </div>
     </form>
@@ -204,8 +204,8 @@
         </label>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Roast
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Roast
         </button>
       </div>
     </form>
@@ -249,8 +249,8 @@
         </label>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Bag
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Bag
         </button>
       </div>
     </form>
@@ -312,8 +312,8 @@
             <span class="text-text-muted shrink-0">&middot;</span>
             <span class="shrink-0" data-text="$_brewGrind"></span>
           </div>
-          <button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text"
-            data-on:click="$_editGrinder = true">Change</button>
+          <button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
+            data-on:click="$_editGrinder = true">{{ icons::pencil("h-3 w-3") }} Change</button>
         </div>
         <!-- Full grinder fields (expanded) -->
         <div data-show="$_editGrinder" style="display:none">
@@ -349,8 +349,8 @@
             <span data-show="$_filterDisplay" class="text-text-muted shrink-0" style="display:none">&middot;</span>
             <span data-show="$_filterDisplay" class="truncate" data-text="$_filterDisplay" style="display:none"></span>
           </div>
-          <button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text"
-            data-on:click="$_editBrewer = true">Change</button>
+          <button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
+            data-on:click="$_editBrewer = true">{{ icons::pencil("h-3 w-3") }} Change</button>
         </div>
         <!-- Full brewer fields (expanded) -->
         <div data-show="$_editBrewer" style="display:none">
@@ -437,8 +437,8 @@
           data-attr:value="[$_qnGood && 'good', $_qnTooFast && 'too-fast', $_qnTooSlow && 'too-slow', $_qnTooHot && 'too-hot', $_qnUnderExtracted && 'under-extracted', $_qnOverExtracted && 'over-extracted'].filter(Boolean).join(',')" />
       </div>
       <div class="sticky-submit flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Log Brew
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::beaker("h-4 w-4") }} Log Brew
         </button>
       </div>
     </form>
@@ -472,8 +472,8 @@
         </label>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Gear
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Gear
         </button>
       </div>
     </form>
@@ -500,9 +500,9 @@
         <span class="text-xs text-text-muted" data-show="$_cafeCity" data-text="$_cafeCity" style="display:none"></span>
       </div>
       <button type="button"
-        class="text-xs text-text-muted hover:text-text"
+        class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
         data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = ''; $_cafeLng = ''; $_cafeWebsite = ''"
-      >Back</button>
+      >{{ icons::x_mark("h-3 w-3") }} Back</button>
     </div>
 
     <form id="cafe-form" method="post" action="/api/v1/cafes" class="mt-4 flex flex-col gap-4">
@@ -533,8 +533,8 @@
         </label>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Cafe
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Cafe
         </button>
       </div>
     </form>
@@ -580,8 +580,8 @@
         </div>
       </div>
       <div class="flex items-center justify-end">
-        <button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
-          Save Cup
+        <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
+          {{ icons::plus("h-4 w-4") }} Save Cup
         </button>
       </div>
     </form>
diff --git a/templates/pages/checkin.html b/templates/pages/checkin.html
index eb20cc9..c2f440d 100644
--- a/templates/pages/checkin.html
+++ b/templates/pages/checkin.html
@@ -110,9 +110,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
     <button
       type="button"
       data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
-      class="text-xs text-text-muted hover:text-text"
+      class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
     >
-      Change
+      {{ icons::pencil("h-3 w-3") }} Change
     </button>
   </div>
 
@@ -136,9 +136,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
     <button
       type="button"
       data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2"
-      class="text-xs text-text-muted hover:text-text"
+      class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
     >
-      Change
+      {{ icons::pencil("h-3 w-3") }} Change
     </button>
   </div>
 
@@ -185,7 +185,7 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
         <div class="mt-4 flex items-center justify-end gap-2">
           <button
             type="button"
-            class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text"
+            class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
             data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''"
           >
             Back
@@ -316,10 +316,10 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
         <input type="hidden" name="roast_id" data-attr:value="$_roastId" />
         <button
           type="submit"
-          class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
+          class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
           data-attr:disabled="$_submitting"
         >
-          Check In
+          {{ icons::check("h-4 w-4") }} Check In
         </button>
       </form>
     </div>
diff --git a/templates/pages/login.html b/templates/pages/login.html
index c02bbe7..141fcd3 100644
--- a/templates/pages/login.html
+++ b/templates/pages/login.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %}
 {% block title %}Brewlog · Login{% endblock %}
 {% block head %}
 <script src="/webauthn.js"></script>
@@ -21,8 +21,8 @@
       <button
         id="login-button"
         type="button"
-        class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
-        Sign in with Passkey
+        class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
+        {{ icons::key("h-4 w-4") }} Sign in with Passkey
       </button>
 
       <div id="login-loading" class="mt-4 hidden text-center text-sm text-text-muted">
diff --git a/templates/pages/register.html b/templates/pages/register.html
index 2b9c34c..519851d 100644
--- a/templates/pages/register.html
+++ b/templates/pages/register.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %}
 {% block title %}Brewlog · Register{% endblock %}
 {% block head %}
 <script src="/webauthn.js"></script>
@@ -44,8 +44,8 @@
       <button
         id="register-button"
         type="button"
-        class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
-        Register Passkey
+        class="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"      >
+        {{ icons::key("h-4 w-4") }} Register Passkey
       </button>
 
       <div id="register-loading" class="mt-2 hidden text-center text-sm text-text-muted">
diff --git a/templates/partials/forms/scan_result_form.html b/templates/partials/forms/scan_result_form.html
index acf4170..a363f8b 100644
--- a/templates/partials/forms/scan_result_form.html
+++ b/templates/partials/forms/scan_result_form.html
@@ -20,8 +20,8 @@
             <span class="font-medium text-text" data-text="$_roasterName"></span>
             <span class="text-xs text-text-muted" data-show="$_roasterCountry" data-text="$_roasterCountry" style="display:none"></span>
           </div>
-          <button type="button" class="text-xs text-text-muted hover:text-text"
-            data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">Change</button>
+          <button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
+            data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
         </div>
       </div>
       <!-- Roaster: form (not matched) -->
@@ -53,12 +53,12 @@
         <h3 class="text-base font-semibold text-text">Roast</h3>
         <div class="mt-2 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between cursor-pointer" data-on:click="$_matchedRoastId = ''">
           <div class="flex items-center gap-2">
-            {{ icons::bag("h-4 w-4 text-accent shrink-0") }}
+            {{ icons::coffee_bean("h-4 w-4 text-accent shrink-0") }}
             <span class="font-medium text-text" data-text="$_roastName"></span>
             <span class="text-xs text-text-muted" data-show="$_origin" data-text="$_origin" style="display:none"></span>
           </div>
-          <button type="button" class="text-xs text-text-muted hover:text-text"
-            data-on:click="$_matchedRoastId = ''">Change</button>
+          <button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
+            data-on:click="$_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
         </div>
       </div>
       <!-- Roast: form (not matched) -->
@@ -114,33 +114,33 @@
         <button
           type="button"
           data-on:click="$_scanExtracted = false; $_matchedRoasterId = ''; $_matchedRoastId = ''"
-          class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
+          class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
         >
-          Cancel
+          {{ icons::x_mark("h-4 w-4") }} Cancel
         </button>
         <!-- Neither matched: full create -->
         <button
           type="submit"
           data-show="!$_matchedRoasterId"
-          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
+          class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
         >
-          Save Roaster &amp; Roast
+          {{ icons::plus("h-4 w-4") }} Save Roaster &amp; Roast
         </button>
         <!-- Roaster matched, roast not: create roast only -->
         <button
           type="submit"
           data-show="$_matchedRoasterId && !$_matchedRoastId"
-          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
+          class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
         >
-          Save Roast
+          {{ icons::plus("h-4 w-4") }} Save Roast
         </button>
         <!-- Both matched + open bag: create bag only -->
         <button
           type="submit"
           data-show="$_matchedRoastId && $_openBag"
-          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
+          class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
         >
-          Open Bag
+          {{ icons::bag("h-4 w-4") }} Open Bag
         </button>
         <!-- Both matched + no bag: nothing to do -->
         <p data-show="$_matchedRoastId && !$_openBag" style="display:none"