diff --git a/packages/web-app-preview/src/components/PhotoRollItem.vue b/packages/web-app-preview/src/components/PhotoRollItem.vue
index 874c30b397..8967aedd49 100644
--- a/packages/web-app-preview/src/components/PhotoRollItem.vue
+++ b/packages/web-app-preview/src/components/PhotoRollItem.vue
@@ -2,7 +2,7 @@
   <div
     ref="photoRollItem"
     class="flex flex-col items-center p-4 mb-1 photo-roll-item"
-    :class="{ 'bg-role-surface rounded-md': isActive }"
+    :class="{ 'bg-role-secondary-container rounded-md': isActive }"
   >
     <oc-button
       appearance="raw"