diff --git a/frontend/src/app.css b/frontend/src/app.css
index 0cd0ee8..70ec51c 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -103,8 +103,11 @@ input, select, textarea {
   width: 100%; font-family: var(--font);
   transition: border-color var(--transition);
 }
+input[type="checkbox"] { width: auto; }
 input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); }
 input::placeholder { color: var(--c-muted); }
+.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
+.checkbox-label-sm { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; color: var(--c-text); }
 
 /* Search */
 .search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
diff --git a/frontend/src/pages/Settings.svelte b/frontend/src/pages/Settings.svelte
index 4f28bfc..9ac3c63 100644
--- a/frontend/src/pages/Settings.svelte
+++ b/frontend/src/pages/Settings.svelte
@@ -294,7 +294,7 @@
         <label for="s-note-label">Note Field Label</label>
         <input id="s-note-label" bind:value={noteLabel} placeholder="Additional note" />
       </div>
-      <label style="display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;cursor:pointer">
+      <label class="checkbox-label">
         <input type="checkbox" bind:checked={noteRequired} />
         Note field is required
       </label>
diff --git a/frontend/src/pages/Users.svelte b/frontend/src/pages/Users.svelte
index cb7a3f8..c1c3a58 100644
--- a/frontend/src/pages/Users.svelte
+++ b/frontend/src/pages/Users.svelte
@@ -167,8 +167,8 @@
           <span style="font-size:0.82rem;color:var(--c-muted);font-weight:500">Roles</span>
           <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
             {#each availableRoles as r}
-              <label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)">
-                <input type="checkbox" style="width:auto"
+              <label class="checkbox-label">
+                <input type="checkbox"
                   checked={newRoles.includes(r)}
                   onchange={() => newRoles = toggleItem(r, newRoles)} />
                 {roleLabel(r)}
@@ -181,8 +181,8 @@
             <span style="font-size:0.82rem;color:var(--c-muted);font-weight:500">Departments</span>
             <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
               {#each $allDepts ?? [] as d}
-                <label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)">
-                  <input type="checkbox" style="width:auto"
+                <label class="checkbox-label">
+                  <input type="checkbox"
                     checked={newDeptIDs.includes(d.id)}
                     onchange={() => newDeptIDs = toggleItem(d.id, newDeptIDs)} />
                   <span class="dept-dot" style="background:{d.color}"></span>
@@ -228,8 +228,8 @@
                 <td>
                   <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
                     {#each availableRoles as r}
-                      <label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)">
-                        <input type="checkbox" style="width:auto"
+                      <label class="checkbox-label-sm">
+                        <input type="checkbox"
                           checked={editRoles.includes(r)}
                           onchange={() => editRoles = toggleItem(r, editRoles)} />
                         {roleLabel(r)}
@@ -241,8 +241,8 @@
                   {#if ($allDepts ?? []).length > 0}
                     <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
                       {#each $allDepts ?? [] as d}
-                        <label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)">
-                          <input type="checkbox" style="width:auto"
+                        <label class="checkbox-label-sm">
+                          <input type="checkbox"
                             checked={editDeptIDs.includes(d.id)}
                             onchange={() => editDeptIDs = toggleItem(d.id, editDeptIDs)} />
                           {d.name}
diff --git a/frontend/src/pages/Volunteers.svelte b/frontend/src/pages/Volunteers.svelte
index d61cc3d..fb92897 100644
--- a/frontend/src/pages/Volunteers.svelte
+++ b/frontend/src/pages/Volunteers.svelte
@@ -209,8 +209,8 @@
           <input id="v-note" bind:value={newNote} placeholder="Optional note" />
         </div>
         <div style="margin-bottom:1rem">
-          <label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer">
-            <input type="checkbox" style="width:auto" bind:checked={newIsLead} />
+          <label class="checkbox-label">
+            <input type="checkbox" bind:checked={newIsLead} />
             Department lead
           </label>
         </div>
@@ -281,8 +281,8 @@
                   </select>
                 </td>
                 <td class="td-edit-checks">
-                  <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;white-space:nowrap">
-                    <input type="checkbox" style="width:auto" bind:checked={editIsLead} /> Co-Lead
+                  <label class="checkbox-label-sm" style="white-space:nowrap">
+                    <input type="checkbox" bind:checked={editIsLead} /> Co-Lead
                   </label>
                 </td>
                 <td class="td-edit-note">