diff --git a/e2e/src/web/specs/timeline/utils.ts b/e2e/src/web/specs/timeline/utils.ts
index 0b49f02941..4c232ff09a 100644
--- a/e2e/src/web/specs/timeline/utils.ts
+++ b/e2e/src/web/specs/timeline/utils.ts
@@ -117,12 +117,9 @@ export const thumbnailUtils = {
     await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-archive]')).toHaveCount(0);
   },
   async expectSelectedReadonly(page: Page, assetId: string) {
-    // todo - need a data attribute for selected
-    await expect(
-      page.locator(
-        `[data-thumbnail-focus-container][data-asset="${assetId}"] > .group.cursor-not-allowed > .rounded-xl`,
-      ),
-    ).toBeVisible();
+    const container = thumbnailUtils.withAssetId(page, assetId);
+    await expect(container.locator('[data-selected]')).toBeVisible();
+    await expect(container.locator('button[role="checkbox"][disabled]')).toBeVisible();
   },
   async expectTimelineHasOnScreenAssets(page: Page) {
     const first = await thumbnailUtils.getFirstInViewport(page);
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 0645541241..ba45d74a5e 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -230,6 +230,7 @@
       { 'rounded-xl': selected },
     ]}
     data-outline
+    data-selected={selected || undefined}
   ></div>
 
   <div