diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ee2f56c..b9557c1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -122,8 +122,11 @@ jobs:
       - name: Generate image tag
         id: version
         run: |
+          # Always include short SHA so each build is immutable and cache-from can never
+          # cross-contaminate between commits. For PRs the format is pr-N-sha7; for main
+          # it is YYYY.MM.DD-sha7.
           if [ "${{ github.event_name }}" = "pull_request" ]; then
-            TAG="pr-${{ github.event.pull_request.number }}"
+            TAG="pr-${{ github.event.pull_request.number }}-${GITHUB_SHA::7}"
           else
             TAG="$(date -u +%Y.%m.%d)-${GITHUB_SHA::7}"
           fi
@@ -209,7 +212,7 @@ jobs:
 
       - name: Deploy to groombook-dev
         env:
-          TAG: pr-${{ github.event.pull_request.number }}
+          TAG: pr-${{ github.event.pull_request.number }}-${{ github.sha::7 }}
           PR_NUM: ${{ github.event.pull_request.number }}
         run: |
           echo "Deploying images tagged $TAG to groombook-dev..."
diff --git a/apps/api/src/routes/staff.ts b/apps/api/src/routes/staff.ts
index 3316c45..7a4a8b5 100644
--- a/apps/api/src/routes/staff.ts
+++ b/apps/api/src/routes/staff.ts
@@ -13,10 +13,16 @@ const createStaffSchema = z.object({
   role: z.enum(["groomer", "receptionist", "manager"]).default("groomer"),
   oidcSub: z.string().optional(),
   active: z.boolean().default(true),
+  isSuperUser: z.boolean().optional(),
 });
 
 const updateStaffSchema = createStaffSchema.partial().omit({ email: true });
 
+staffRouter.get("/me", async (c) => {
+  const staffRow = c.get("staff");
+  return c.json(staffRow);
+});
+
 staffRouter.get("/", async (c) => {
   const db = getDb();
   const includeInactive = c.req.query("includeInactive") === "true";
@@ -46,10 +52,55 @@ staffRouter.post("/", zValidator("json", createStaffSchema), async (c) => {
 staffRouter.patch("/:id", zValidator("json", updateStaffSchema), async (c) => {
   const db = getDb();
   const body = c.req.valid("json");
+  const currentStaff = c.get("staff");
+  const targetId = c.req.param("id");
+
+  // Super user check: only super users can change isSuperUser
+  if (body.isSuperUser !== undefined && !currentStaff.isSuperUser) {
+    return c.json({ error: "Forbidden: only super users can grant or revoke super user status" }, 403);
+  }
+
+  // If revoking super user status, check last-super-user guardrail
+  if (body.isSuperUser === false) {
+    const superUserCount = await db
+      .select({ id: staff.id })
+      .from(staff)
+      .where(eq(staff.isSuperUser, true))
+      .limit(2); // just need count; fetch 2 to know if > 1
+    if (superUserCount.length <= 1) {
+      return c.json(
+        { error: "Cannot revoke the last super user. Assign another super user first." },
+        400
+      );
+    }
+  }
+
+  // If deactivating a super user, check last-super-user guardrail
+  if (body.active === false) {
+    const [target] = await db
+      .select({ isSuperUser: staff.isSuperUser })
+      .from(staff)
+      .where(eq(staff.id, targetId))
+      .limit(1);
+    if (target?.isSuperUser) {
+      const superUserCount = await db
+        .select({ id: staff.id })
+        .from(staff)
+        .where(eq(staff.isSuperUser, true))
+        .limit(2);
+      if (superUserCount.length <= 1) {
+        return c.json(
+          { error: "Cannot deactivate the last super user. Assign another super user first." },
+          400
+        );
+      }
+    }
+  }
+
   const [row] = await db
     .update(staff)
     .set({ ...body, updatedAt: new Date() })
-    .where(eq(staff.id, c.req.param("id")))
+    .where(eq(staff.id, targetId))
     .returning();
   if (!row) return c.json({ error: "Not found" }, 404);
   return c.json(row);
@@ -81,6 +132,26 @@ staffRouter.delete("/:id", async (c) => {
     );
   }
 
+  // Prevent deleting the last super user
+  const [target] = await db
+    .select({ isSuperUser: staff.isSuperUser })
+    .from(staff)
+    .where(eq(staff.id, id))
+    .limit(1);
+  if (target?.isSuperUser) {
+    const superUserCount = await db
+      .select({ id: staff.id })
+      .from(staff)
+      .where(eq(staff.isSuperUser, true))
+      .limit(2);
+    if (superUserCount.length <= 1) {
+      return c.json(
+        { error: "Cannot delete the last super user. Assign another super user first." },
+        400
+      );
+    }
+  }
+
   const [row] = await db
     .delete(staff)
     .where(eq(staff.id, id))
diff --git a/apps/web/src/pages/Staff.tsx b/apps/web/src/pages/Staff.tsx
index aac23a7..a521e1c 100644
--- a/apps/web/src/pages/Staff.tsx
+++ b/apps/web/src/pages/Staff.tsx
@@ -11,6 +11,7 @@ const EMPTY_FORM: StaffForm = { name: "", email: "", role: "groomer" };
 
 export function StaffPage() {
   const [staff, setStaff] = useState<Staff[]>([]);
+  const [currentUser, setCurrentUser] = useState<Staff | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<Staff | null>(null);
@@ -18,11 +19,18 @@ export function StaffPage() {
   const [form, setForm] = useState<StaffForm>(EMPTY_FORM);
   const [formError, setFormError] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+  const [toggleError, setToggleError] = useState<string | null>(null);
 
   async function load() {
-    const r = await fetch("/api/staff?includeInactive=true");
-    if (!r.ok) throw new Error(`HTTP ${r.status}`);
-    setStaff((await r.json()) as Staff[]);
+    const [staffRes, meRes] = await Promise.all([
+      fetch("/api/staff?includeInactive=true"),
+      fetch("/api/staff/me"),
+    ]);
+    if (!staffRes.ok) throw new Error(`HTTP ${staffRes.status}`);
+    if (!meRes.ok) throw new Error(`HTTP ${meRes.status}`);
+    setStaff((await staffRes.json()) as Staff[]);
+    setCurrentUser((await meRes.json()) as Staff);
   }
 
   useEffect(() => {
@@ -71,6 +79,29 @@ export function StaffPage() {
     await load();
   }
 
+  async function toggleSuperUser(s: Staff) {
+    setTogglingId(s.id);
+    setToggleError(null);
+    try {
+      const res = await fetch(`/api/staff/${s.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ isSuperUser: !s.isSuperUser }),
+      });
+      if (!res.ok) {
+        const err = (await res.json()) as { error?: string };
+        setToggleError(err.error ?? `HTTP ${res.status}`);
+        return;
+      }
+      await load();
+    } finally {
+      setTogglingId(null);
+    }
+  }
+
+  const isLastSuperUser = (s: Staff) =>
+    s.isSuperUser && staff.filter((st) => st.isSuperUser).length === 1;
+
   if (loading) return <p style={{ padding: "1rem" }}>Loading…</p>;
   if (error) return <p style={{ padding: "1rem", color: "red" }}>Error: {error}</p>;
 
@@ -83,6 +114,10 @@ export function StaffPage() {
         </button>
       </div>
 
+      {toggleError && (
+        <p style={{ color: "red", marginBottom: "0.5rem" }}>{toggleError}</p>
+      )}
+
       {staff.length === 0 ? (
         <p>No staff members yet.</p>
       ) : (
@@ -90,7 +125,7 @@ export function StaffPage() {
         <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
           <thead>
             <tr style={{ background: "#f8fafc" }}>
-              {["Name", "Email", "Role", "Status", ""].map((h) => (
+              {["Name", "Email", "Role", "Super User", "Status", ""].map((h) => (
                 <th key={h} style={{ textAlign: "left", padding: "0.55rem 0.75rem", borderBottom: "1px solid #e5e7eb", fontSize: 11, fontWeight: 600, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.04em" }}>{h}</th>
               ))}
             </tr>
@@ -101,12 +136,33 @@ export function StaffPage() {
                 <td style={tdStyle}>{s.name}</td>
                 <td style={tdStyle}>{s.email}</td>
                 <td style={tdStyle}><span style={{ textTransform: "capitalize" }}>{s.role}</span></td>
+                <td style={tdStyle}>
+                  {s.isSuperUser ? (
+                    <span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: "#fef3c7", color: "#92400e" }}>
+                      Super User
+                    </span>
+                  ) : (
+                    <span style={{ color: "#9ca3af", fontSize: 13 }}>—</span>
+                  )}
+                </td>
                 <td style={tdStyle}>
                   <span style={{ padding: "2px 8px", borderRadius: 12, fontSize: 11, fontWeight: 600, background: s.active ? "#d1fae5" : "#f3f4f6", color: s.active ? "#065f46" : "#6b7280" }}>
                     {s.active ? "Active" : "Inactive"}
                   </span>
                 </td>
                 <td style={{ ...tdStyle, whiteSpace: "nowrap" }}>
+                  {currentUser?.isSuperUser && (
+                    <>
+                      <button
+                        onClick={() => toggleSuperUser(s)}
+                        disabled={togglingId === s.id || isLastSuperUser(s)}
+                        title={isLastSuperUser(s) ? "Cannot revoke the last super user" : s.isSuperUser ? "Revoke super user" : "Grant super user"}
+                        style={{ ...btnStyle, marginRight: "0.4rem", ...(s.isSuperUser ? { color: "#b45309", borderColor: "#f59e0b" } : {}) }}
+                      >
+                        {togglingId === s.id ? "…" : s.isSuperUser ? "Revoke SU" : "Grant SU"}
+                      </button>
+                    </>
+                  )}
                   <button onClick={() => openEdit(s)} style={{ ...btnStyle, marginRight: "0.4rem" }}>Edit</button>
                   <button onClick={() => toggleActive(s)} style={btnStyle}>{s.active ? "Deactivate" : "Activate"}</button>
                 </td>