diff --git a/components/Avatar.vue b/components/Avatar.vue
index 3baf4a2..5214f84 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,13 +1,24 @@
 <template>
   <v-avatar color="transparent" :size="size">
-    <v-img v-if="avatar" :src="avatar.src" aspect-ratio="1" :width="size" />
-    <v-img
-      v-else
-      src="\logo\art-by-city\art-by-city-x.png"
-      contained
-      aspect-ratio="1"
-      :width="size"
-    />
+    <v-img :src="avatar ? avatar.src : ''" aspect-ratio="1" :width="size">
+      <template v-slot:error>
+        <v-img
+          src="\logo\art-by-city\art-by-city-x.png"
+          contained
+          aspect-ratio="1"
+          :width="size"
+        />
+      </template>
+      <template v-slot:placeholder>
+        <v-img
+          src="\logo\art-by-city\art-by-city-x.png"
+          contained
+          aspect-ratio="1"
+          :width="size"
+        />
+      </template>
+    </v-img>
+
   </v-avatar>
 </template>
 
@@ -23,7 +34,14 @@ const {
   data: avatar,
   refresh
 } = useLazyAsyncData(`avatar-${props.address}`, async () => {
-  return await abc.legacy.fetchAvatar(props.address)
+  const avatar = await abc.legacy.fetchAvatar(props.address)
+
+  // CORS error with data url i guess
+  if (avatar && !avatar.src.startsWith('data')) {
+    return avatar
+  }
+
+  return null
 })
 
 watch(() => props.address, async () => { await refresh() })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 60563ea..132bb2e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,6 @@ import { replaceCodePlugin } from './plugins/vite-plugin-replace'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: false },
-
   ssr: false,
 
   app: {
@@ -42,9 +41,11 @@ export default defineNuxtConfig({
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css'
   ],
+
   build: {
     transpile: ['vuetify'],
   },
+
   vite: {
     define: {
       'process.env.DEBUG': false,
@@ -105,5 +106,7 @@ exports.randomFillSync = randomFillSync`,
     compilerOptions: {
       isCustomElement: (tag: string) => tag === 'model-viewer'
     }
-  }
-})
+  },
+
+  compatibilityDate: '2024-09-20'
+})
\ No newline at end of file
diff --git a/pages/directory/index.vue b/pages/directory/index.vue
index f2fda90..a5ffdda 100644
--- a/pages/directory/index.vue
+++ b/pages/directory/index.vue
@@ -2,22 +2,22 @@
   <v-container id="discover-page">
     <v-row>
       <v-col>
-        <span class="text-h4">Directory</span>
+        <span class="text-h4">Verified Artist Directory</span>
       </v-col>
     </v-row>
     <v-row
       justify="center"
     >
-      <v-col>
-        <v-list lines="one">
+      <v-col v-for="user in users" :key="user" cols="4">
+        <!-- <v-list lines="one">
           <v-list-item
             v-for="user in users"
             :key="user"
-          >
-            <Avatar :address="user" small class="mr-2" />
+          > -->
+            <Avatar :address="user" class="mr-2" />
             <ResolveUsername :address="user" />
-          </v-list-item>
-        </v-list>
+          <!-- </v-list-item>
+        </v-list> -->
       </v-col>
     </v-row>
   </v-container>