diff --git a/ui/src/components/SwipeToArchive.test.tsx b/ui/src/components/SwipeToArchive.test.tsx
index 4cdf92db..4d1c8f86 100644
--- a/ui/src/components/SwipeToArchive.test.tsx
+++ b/ui/src/components/SwipeToArchive.test.tsx
@@ -136,7 +136,7 @@ describe("SwipeToArchive", () => {
 
     const surface = container.querySelector("[data-inbox-row-surface]") as HTMLDivElement | null;
     expect(surface).not.toBeNull();
-    expect(surface?.style.backgroundColor).toBe("hsl(var(--muted))");
+    expect(surface?.style.backgroundColor).toBe("rgb(243, 244, 246)");
     expect(surface?.style.boxShadow).toBe("");
 
     act(() => {
diff --git a/ui/src/components/SwipeToArchive.tsx b/ui/src/components/SwipeToArchive.tsx
index 4b0f304c..5bddcab8 100644
--- a/ui/src/components/SwipeToArchive.tsx
+++ b/ui/src/components/SwipeToArchive.tsx
@@ -13,6 +13,7 @@ interface SwipeToArchiveProps {
 const COMMIT_THRESHOLD = 0.32;
 const MAX_SWIPE = 0.88;
 const COMMIT_DELAY_MS = 140;
+const SELECTED_ROW_BACKGROUND = "#f3f4f6";
 
 export function SwipeToArchive({
   children,
@@ -155,7 +156,7 @@ export function SwipeToArchive({
         style={{
           transform: `translate3d(${offsetX}px, 0, 0)`,
           transition: isDragging ? "none" : "transform 180ms ease-out",
-          backgroundColor: selected ? "hsl(var(--muted))" : undefined,
+          backgroundColor: selected ? SELECTED_ROW_BACKGROUND : undefined,
         }}
       >
         {children}