diff --git a/src/components/SelectTileOverlay.tsx b/src/components/SelectTileOverlay.tsx
new file mode 100644
index 00000000..d9b54adf
--- /dev/null
+++ b/src/components/SelectTileOverlay.tsx
@@ -0,0 +1,45 @@
+import { clsx } from 'clsx/lite';
+import Checkbox from './primitives/Checkbox';
+
+export default function SelectTileOverlay({
+  isSelected,
+  onSelectChange,
+}: {
+  isSelected: boolean
+  onSelectChange: () => void
+}) {
+  return (
+    <>
+      {/* Admin Select Border */}
+      <div className={clsx(
+        'absolute w-full h-full pointer-events-none',
+      )}>
+        <div
+          className={clsx(
+            'w-full h-full',
+            'border-black dark:border-white',
+            'transition-opacity',
+            !isSelected && 'opacity-0',
+            'group-hover:opacity-100',
+            // eslint-disable-next-line max-len
+            'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
+            isSelected && 'border-4',
+          )}
+        />
+      </div>
+      {/* Admin Select Action */}
+      <div className="absolute top-0 right-0 p-2">
+        <Checkbox
+          className={clsx(
+            'text-white',
+            !isSelected && 'opacity-0 group-hover:opacity-100',
+            // Required to prevent Safari jitter
+            'translate-x-[0.1px]',
+          )}
+          checked={isSelected}
+          onChange={onSelectChange}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 5e2d3db0..b9a06a62 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -8,7 +8,7 @@ import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
 import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config';
 import { useAppState } from '@/state/AppState';
-import Checkbox from '@/components/primitives/Checkbox';
+import SelectTileOverlay from '@/components/SelectTileOverlay';
 
 export default function PhotoGrid({
   photos,
@@ -106,41 +106,13 @@ export default function PhotoGrid({
             }}
           />
           {canSelect && isUserSignedIn &&
-            <>
-              {/* Admin Select Border */}
-              <div className={clsx(
-                'absolute w-full h-full pointer-events-none',
-              )}>
-                <div
-                  className={clsx(
-                    'w-full h-full',
-                    'border-black dark:border-white',
-                    'transition-opacity',
-                    !isSelected && 'opacity-0',
-                    'group-hover:opacity-100',
-                    // eslint-disable-next-line max-len
-                    'bg-[radial-gradient(169.40%_89.55%_at_94.76%_6.29%,rgba(1,0,0,0.40)_0%,rgba(255,255,255,0.00)_75%)]',
-                    isSelected && 'border-4',
-                  )}
-                />
-              </div>
-              {/* Admin Select Action */}
-              <div className="absolute top-0 right-0 p-2">
-                <Checkbox
-                  className={clsx(
-                    // Required to prevent Safari jitter
-                    'translate-x-[0.1px]',
-                    'text-white',
-                    !isSelected && 'opacity-0 group-hover:opacity-100',
-                  )}
-                  checked={isSelected}
-                  onChange={() => setSelectedPhotoIds?.(isSelected
-                    ? selectedPhotoIds.filter(id => id !== photo.id)
-                    : selectedPhotoIds.concat(photo.id),
-                  )}
-                />
-              </div>
-            </>}
+            <SelectTileOverlay
+              isSelected={isSelected}
+              onSelectChange={() => setSelectedPhotoIds?.(isSelected
+                ? selectedPhotoIds.filter(id => id !== photo.id)
+                : selectedPhotoIds.concat(photo.id),
+              )}
+            />}
         </div>;
       }).concat(additionalTile ?? [])}
       itemKeys={photos.map(photo => photo.id)