diff --git a/src/apps/draw/DrawGallery.tsx b/src/apps/draw/DrawGallery.tsx
index 83bada6df..fd0b19faf 100644
--- a/src/apps/draw/DrawGallery.tsx
+++ b/src/apps/draw/DrawGallery.tsx
@@ -1,42 +1,38 @@
 import * as React from 'react';
-
-import { AppPlaceholder } from '../AppPlaceholder';
-import { useDBlobItemsByTypeCIdSId } from '~/modules/dblobs/dblobs.hooks';
-import { DBlobImageItem, DBlobMetaDataType } from '~/modules/dblobs/dblobs.types';
 import { Box, Table } from '@mui/joy';
 
+import { dBlobCacheT256, DBlobImageItem, DBlobMetaDataType } from '~/modules/dblobs/dblobs.types';
+import { useDBlobItemsByTypeCIdSId } from '~/modules/dblobs/dblobs.hooks';
 
-export function DrawGallery(props: { domain: 'draw' | 'app' }) {
+import { AppPlaceholder } from '../AppPlaceholder';
 
-  // external state from the DB
+
+export function DrawGallery({ domain }: { domain: 'draw' | 'app' }) {
   const [items] = useDBlobItemsByTypeCIdSId<DBlobImageItem>(
     DBlobMetaDataType.IMAGE,
     'global',
-    props.domain === 'draw' ? 'app-draw' : 'app-chat',
+    domain === 'draw' ? 'app-draw' : 'app-chat',
   );
 
-  // wait until we load everything
   if (!items || items.length === 0) {
-    return (
-      <AppPlaceholder text={items === undefined ? 'Loading...' : 'No images found.'} />
-    );
+    return <AppPlaceholder text={items === undefined ? 'Loading...' : 'No images found.'} />;
   }
 
-  return (
-    <Box sx={{
-      flexGrow: 1,
-      overflowY: 'auto',
-      p: { xs: 3, md: 6 },
-      border: '1px solid blue',
-    }}>
+  const boxStyles = {
+    flexGrow: 1,
+    overflowY: 'auto',
+    p: { xs: 3, md: 6 },
+    border: '1px solid blue',
+  };
 
-      <Table
-        borderAxis='both'
-        size='sm'
-        // stickyHeader
-        stripe='odd'
-        variant='plain'
-      >
+  const cellStyles = {
+    overflowWrap: 'anywhere',
+    whiteSpace: 'break-spaces',
+  };
+
+  return (
+    <Box sx={boxStyles}>
+      <Table borderAxis='both' size='sm' stripe='odd' variant='plain'>
         <thead>
         <tr>
           <th>ID</th>
@@ -46,50 +42,34 @@ export function DrawGallery(props: { domain: 'draw' | 'app' }) {
         </tr>
         </thead>
         <tbody>
-        {items.map((_item) => {
-          const {
-            id,
-            label,
-            data,
-            origin,
-            metadata,
-            createdAt,
-            updatedAt,
-          } = _item;
-          return (
-            <tr key={id}>
-              <td>
-                <picture style={{ display: 'flex', maxWidth: 256, maxHeight: 256 }}>
-                  <img src={`data:${data.mimeType};base64,${data.base64}`} alt={label} style={{ maxWidth: '100%', maxHeight: '100%' }} />
-                </picture>
-              </td>
-              <td>{label}</td>
-              <td>
-                <Box sx={{
-                  overflowWrap: 'anywhere',
-                  whiteSpace: 'break-spaces',
-                }}>
-                  {JSON.stringify(origin, null, 2)}
-                </Box>
-              </td>
-              <td>
-                <Box sx={{
-                  overflowWrap: 'anywhere',
-                  whiteSpace: 'break-spaces',
-                }}>
-                  {JSON.stringify(metadata, null, 2)}
-                  <br />
-                  {createdAt ? new Date(createdAt).toLocaleString() : 'no creation'}
-                  <br />
-                  {(updatedAt && updatedAt !== createdAt) ? new Date(updatedAt).toLocaleString() : null}
-                </Box>
-              </td>
-            </tr>
-          );
-        })}
+        {items.map(({ id, label, cache, data, origin, metadata, createdAt, updatedAt }) => (
+          <tr key={id}>
+            <td>
+              <picture style={{ display: 'flex', maxWidth: 256, maxHeight: 256 }}>
+                <img
+                  src={cache[dBlobCacheT256]?.base64 ? `data:${cache[dBlobCacheT256]?.mimeType};base64,${cache[dBlobCacheT256]?.base64}` : `data:${data.mimeType};base64,${data.base64}`}
+                  alt={label}
+                  style={{ maxWidth: '100%', maxHeight: '100%', opacity: cache[dBlobCacheT256]?.base64 ? 1 : 0.5 }}
+                />
+              </picture>
+            </td>
+            <td>{label}</td>
+            <td>
+              <Box sx={cellStyles}>{JSON.stringify(origin, null, 2)}</Box>
+            </td>
+            <td>
+              <Box sx={cellStyles}>
+                {JSON.stringify(metadata, null, 2)}
+                <br />
+                {createdAt ? new Date(createdAt).toLocaleString() : 'no creation'}
+                <br />
+                {updatedAt && updatedAt !== createdAt ? new Date(updatedAt).toLocaleString() : null}
+              </Box>
+            </td>
+          </tr>
+        ))}
         </tbody>
       </Table>
-
     </Box>
   );
 }
\ No newline at end of file