diff --git a/package.json b/package.json
index cc9a019..a25024a 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf ./.svelte-kit",
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "pnpm sync && vite build",
     "preview": "vite preview",
     "sync": "svelte-kit sync",
     "validate:svelte": "pnpm sync && svelte-check --tsconfig ./tsconfig.json",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@download/blockies": "^1.0.3",
     "@ensdomains/ensjs": "^3.2.0",
+    "@ethercorps/svelte-h2j": "^4.0.0",
     "@ethercorps/sveltekit-og": "^3.0.0",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/roboto-mono": "^5.0.16",
@@ -30,6 +31,7 @@
     "@urql/svelte": "^4.0.4",
     "date-fns": "^3.3.1",
     "dotenv": "^16.3.2",
+    "satori": "^0.10.13",
     "svelte": "^4.2.7",
     "tailwindcss": "^3.4.1",
     "viem": "^2.5.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4372f3c..8a22ed0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@ensdomains/ensjs':
         specifier: ^3.2.0
         version: 3.2.0(typescript@5.3.3)(viem@2.5.0)
+      '@ethercorps/svelte-h2j':
+        specifier: ^4.0.0
+        version: 4.0.0(svelte@4.2.9)
       '@ethercorps/sveltekit-og':
         specifier: ^3.0.0
         version: 3.0.0(svelte@4.2.9)
@@ -41,6 +44,9 @@ importers:
       dotenv:
         specifier: ^16.3.2
         version: 16.3.2
+      satori:
+        specifier: ^0.10.13
+        version: 0.10.13
       svelte:
         specifier: ^4.2.7
         version: 4.2.9
@@ -539,6 +545,14 @@ packages:
       svelte: 4.2.9
     dev: false
 
+  /@ethercorps/svelte-h2j@4.0.0(svelte@4.2.9):
+    resolution: {integrity: sha512-2U56wEIys5MoFqQ863FCxRvu8rQjA3Esix/RpI5FktrbEBSXLoHYalYPeqZM1mPHSVOBAOHgcbmLONmhZa5zbQ==}
+    peerDependencies:
+      svelte: ^4.0.0
+    dependencies:
+      svelte: 4.2.9
+    dev: false
+
   /@ethercorps/sveltekit-og@3.0.0(svelte@4.2.9):
     resolution: {integrity: sha512-CQRmcfCPnTEqP+EeHBE7wWp1sNxpBaT4Fb5Js5fGnWEgFFIDbJEEcFiT0Uwc1CteolXY+CyTOg7mokcOtu3d7w==}
     peerDependencies:
@@ -1469,14 +1483,14 @@ packages:
     resolution: {integrity: sha512-N1ZhksgwD3OBlwTv3R6KFEcPojl/W4ElJOeCZdi+vuI5QmTFwLq3OFf2zd2ROpKvxFdgZ6hUpb0dx9bVNEwYCA==}
     dependencies:
       '@noble/curves': 1.2.0
-      '@noble/hashes': 1.3.2
+      '@noble/hashes': 1.3.3
       '@scure/base': 1.1.5
     dev: false
 
   /@scure/bip39@1.2.1:
     resolution: {integrity: sha512-Z3/Fsz1yr904dduJD0NpiyRHhRYHdcnyh73FZWiV+/qhWi83wNJ3NWolYqCEN+ZWsUz2TWwajJggcRE9r1zUYg==}
     dependencies:
-      '@noble/hashes': 1.3.2
+      '@noble/hashes': 1.3.3
       '@scure/base': 1.1.5
     dev: false
 
diff --git a/src/lib/components/Seo/seo.svelte b/src/lib/components/Seo/seo.svelte
index 345eef9..3327a16 100644
--- a/src/lib/components/Seo/seo.svelte
+++ b/src/lib/components/Seo/seo.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { POAPEventMetadata } from '$lib/types/poap'
 
-  const baseUrl = 'https://vpoap.vercel.app'
+  // const baseUrl = 'https://vpoap.vercel.app'
+  const baseUrl = 'https://vpoap-git-opengraph-goldsky.vercel.app'
   const title = 'Visual POAP'
   const description = 'Watch POAP mints live!'
 
diff --git a/src/routes/og/[token_id]/+server.ts b/src/routes/og/[token_id]/+server.ts
index fbe43be..0918d49 100644
--- a/src/routes/og/[token_id]/+server.ts
+++ b/src/routes/og/[token_id]/+server.ts
@@ -1,7 +1,7 @@
 import { ImageResponse } from '@ethercorps/sveltekit-og'
+import { error } from '@sveltejs/kit'
 import { loadTokenData } from '../../token/[id]/data'
 import type { RequestHandler } from './$types'
-import { error } from '@sveltejs/kit'
 import OgToken from './og-token.svelte'
 import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff'
 import inter600 from '@fontsource/inter/files/inter-latin-600-normal.woff'
diff --git a/src/routes/og/[token_id]/og-token.svelte b/src/routes/og/[token_id]/og-token.svelte
index 5277ffb..fa40f8d 100644
--- a/src/routes/og/[token_id]/og-token.svelte
+++ b/src/routes/og/[token_id]/og-token.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { renderIcon } from '@download/blockies'
-  import { createCanvas } from '@napi-rs/canvas'
+  // import { renderIcon } from '@download/blockies'
+  // import { createCanvas } from '@napi-rs/canvas'
   import { formatDistanceToNow } from 'date-fns'
 
   /**
@@ -16,16 +16,17 @@
    */
   export let ens
 
-  const avatarSrc =
-    ens.avatar ||
-    renderIcon(
-      {
-        seed: token.owner.id,
-        size: 20,
-        scale: 10,
-      },
-      createCanvas(200, 200),
-    ).toDataURL()
+  // const avatarSrc =
+  //   ens.avatar ||
+  //   renderIcon(
+  //     {
+  //       seed: token.owner.id,
+  //       size: 20,
+  //       scale: 10,
+  //     },
+  //     createCanvas(200, 200),
+  //   ).toDataURL()
+  const avatarSrc = ''
 </script>
 
 <div
diff --git a/vite.config.ts b/vite.config.ts
index 5b0fa4b..93e4291 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
   },
   build: {
     rollupOptions: {
-      external: ['@resvg/resvg-js'],
+      external: ['@napi-rs/canvas', '@resvg/resvg-js', 'satori', '@ethercorps/svelte-h2j'],
     },
   },
 })