diff --git a/App/components/po/cancel-po-controls.tsx b/App/components/po/cancel-po-controls.tsx
index 26b71be..8245e73 100644
--- a/App/components/po/cancel-po-controls.tsx
+++ b/App/components/po/cancel-po-controls.tsx
@@ -47,7 +47,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
       <button
         type="button"
         onClick={() => setOpen(true)}
-        className="rounded-lg border border-danger-200 bg-white px-3 py-2 text-sm font-medium text-danger-600 hover:bg-danger-50 transition-colors"
+        className="rounded-lg bg-danger px-3 py-2 text-sm font-semibold text-white hover:bg-danger-700 transition-colors"
       >
         Cancel PO
       </button>
@@ -65,7 +65,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
             </p>
 
             <label className="mt-4 block text-xs font-medium text-neutral-700">
-              Reason for cancellation <span className="text-danger-600">*</span>
+              Reason for cancellation <span className="text-danger">*</span>
             </label>
             <textarea
               value={reason}
@@ -73,7 +73,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
               rows={3}
               autoFocus
               placeholder="e.g. Duplicate order — superseded by a corrected PO"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
             />
 
             <label className="mt-3 block text-xs font-medium text-neutral-700">
@@ -83,7 +83,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
               value={confirmText}
               onChange={(e) => setConfirmText(e.target.value)}
               placeholder="cancel"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
             />
 
             {error && <p className="mt-3 text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
@@ -101,7 +101,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
                 type="button"
                 onClick={handleCancel}
                 disabled={!canSubmit}
-                className="rounded-lg bg-danger-600 px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
+                className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
               >
                 {pending ? "Cancelling…" : "Cancel this PO"}
               </button>
diff --git a/App/components/po/po-detail.tsx b/App/components/po/po-detail.tsx
index c9f81f3..8af02fc 100644
--- a/App/components/po/po-detail.tsx
+++ b/App/components/po/po-detail.tsx
@@ -238,7 +238,7 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals
 
       {/* Cancelled banner — reason + supersede link (and the reciprocal "supersedes") */}
       {po.status === "CANCELLED" && (
-        <div className="rounded-lg border border-danger-200 bg-danger-50 px-4 py-3">
+        <div className="rounded-lg border border-danger-100 bg-danger-50 px-4 py-3">
           <p className="text-sm font-semibold text-danger-700">
             Cancelled{po.cancelledAt ? ` on ${formatDate(po.cancelledAt)}` : ""}
           </p>