diff --git a/apps/web/src/components/viewers/CardViewer.tsx b/apps/web/src/components/viewers/CardViewer.tsx
index 61a8ca7..5fbff5b 100644
--- a/apps/web/src/components/viewers/CardViewer.tsx
+++ b/apps/web/src/components/viewers/CardViewer.tsx
@@ -12,19 +12,26 @@ export default function CardViewer({ object }: { object: TTSObject }) {
   const deck = object.CustomDeck ? Object.values(object.CustomDeck)[0] : undefined;
   const faceUrl = deck?.FaceURL;
   const backUrl = deck?.BackURL;
-  const face = faceUrl ? useTexture(assetUrl(faceUrl)) : null;
-  const back = backUrl ? useTexture(assetUrl(backUrl)) : null;
 
   return (
     <Scene>
-      <mesh>
-        <boxGeometry args={[1.4, 2, 0.06]} />
-        <meshStandardMaterial
-          color={face || back ? '#ffffff' : '#52525b'}
-          map={face ?? back ?? undefined}
-          roughness={0.6}
-        />
-      </mesh>
+      <CardMesh faceUrl={faceUrl} backUrl={backUrl} />
     </Scene>
   );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function CardMesh({ faceUrl, backUrl }: { faceUrl?: string; backUrl?: string }) {
+  const face = faceUrl ? useTexture(assetUrl(faceUrl)) : null;
+  const back = backUrl ? useTexture(assetUrl(backUrl)) : null;
+  return (
+    <mesh>
+      <boxGeometry args={[1.4, 2, 0.06]} />
+      <meshStandardMaterial
+        color={face || back ? '#ffffff' : '#52525b'}
+        map={face ?? back ?? undefined}
+        roughness={0.6}
+      />
+    </mesh>
+  );
 }
\ No newline at end of file
diff --git a/apps/web/src/components/viewers/TileViewer.tsx b/apps/web/src/components/viewers/TileViewer.tsx
index a236dc6..5bb4191 100644
--- a/apps/web/src/components/viewers/TileViewer.tsx
+++ b/apps/web/src/components/viewers/TileViewer.tsx
@@ -9,19 +9,26 @@ import { assetUrl } from './assetUrl';
  */
 export default function TileViewer({ object }: { object: TTSObject }) {
   const url = object.CustomImage?.ImageURL ?? object.CustomImage?.ImageSecondaryURL;
-  const texture = url ? useTexture(assetUrl(url)) : null;
   const thickness = object.CustomImage?.CustomTile?.Thickness ?? 0.1;
 
   return (
     <Scene>
-      <mesh rotation={[-Math.PI / 2, 0, 0]}>
-        <boxGeometry args={[1.6, 1.6, thickness]} />
-        <meshStandardMaterial
-          color={texture ? '#ffffff' : '#52525b'}
-          map={texture ?? undefined}
-          roughness={0.8}
-        />
-      </mesh>
+      <TileMesh url={url} thickness={thickness} />
     </Scene>
   );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function TileMesh({ url, thickness }: { url?: string; thickness: number }) {
+  const texture = url ? useTexture(assetUrl(url)) : null;
+  return (
+    <mesh rotation={[-Math.PI / 2, 0, 0]}>
+      <boxGeometry args={[1.6, 1.6, thickness]} />
+      <meshStandardMaterial
+        color={texture ? '#ffffff' : '#52525b'}
+        map={texture ?? undefined}
+        roughness={0.8}
+      />
+    </mesh>
+  );
 }
\ No newline at end of file
diff --git a/apps/web/src/components/viewers/TokenViewer.tsx b/apps/web/src/components/viewers/TokenViewer.tsx
index a1996ac..1bbb003 100644
--- a/apps/web/src/components/viewers/TokenViewer.tsx
+++ b/apps/web/src/components/viewers/TokenViewer.tsx
@@ -9,19 +9,26 @@ import { assetUrl } from './assetUrl';
  */
 export default function TokenViewer({ object }: { object: TTSObject }) {
   const url = object.CustomImage?.ImageURL ?? object.CustomImage?.ImageSecondaryURL;
-  const texture = url ? useTexture(assetUrl(url)) : null;
   const thickness = object.CustomImage?.CustomToken?.Thickness ?? 0.1;
 
   return (
     <Scene>
-      <mesh rotation={[-Math.PI / 2, 0, 0]}>
-        <cylinderGeometry args={[0.9, 0.9, thickness, 48]} />
-        <meshStandardMaterial
-          color={texture ? '#ffffff' : '#52525b'}
-          map={texture ?? undefined}
-          roughness={0.8}
-        />
-      </mesh>
+      <TokenMesh url={url} thickness={thickness} />
     </Scene>
   );
+}
+
+// Rendered inside the Canvas so `useTexture` can access the R3F store.
+function TokenMesh({ url, thickness }: { url?: string; thickness: number }) {
+  const texture = url ? useTexture(assetUrl(url)) : null;
+  return (
+    <mesh rotation={[-Math.PI / 2, 0, 0]}>
+      <cylinderGeometry args={[0.9, 0.9, thickness, 48]} />
+      <meshStandardMaterial
+        color={texture ? '#ffffff' : '#52525b'}
+        map={texture ?? undefined}
+        roughness={0.8}
+      />
+    </mesh>
+  );
 }
\ No newline at end of file