diff --git a/package.json b/package.json
index cc9a019..72119cf 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,7 +21,7 @@
   "dependencies": {
     "@download/blockies": "^1.0.3",
     "@ensdomains/ensjs": "^3.2.0",
-    "@ethercorps/sveltekit-og": "^3.0.0",
+    "@ethercorps/svelte-h2j": "^0.1.0",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/roboto-mono": "^5.0.16",
     "@napi-rs/canvas": "^0.1.45",
@@ -30,6 +30,7 @@
     "@urql/svelte": "^4.0.4",
     "date-fns": "^3.3.1",
     "dotenv": "^16.3.2",
+    "satori": "^0.10.11",
     "svelte": "^4.2.7",
     "tailwindcss": "^3.4.1",
     "viem": "^2.5.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4372f3c..f7b3df3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,9 @@ importers:
       '@ensdomains/ensjs':
         specifier: ^3.2.0
         version: 3.2.0(typescript@5.3.3)(viem@2.5.0)
-      '@ethercorps/sveltekit-og':
-        specifier: ^3.0.0
-        version: 3.0.0(svelte@4.2.9)
+      '@ethercorps/svelte-h2j':
+        specifier: ^0.1.0
+        version: 0.1.0(svelte@4.2.9)
       '@fontsource/inter':
         specifier: ^5.0.16
         version: 5.0.16
@@ -41,6 +41,9 @@ importers:
       dotenv:
         specifier: ^16.3.2
         version: 16.3.2
+      satori:
+        specifier: ^0.10.11
+        version: 0.10.13
       svelte:
         specifier: ^4.2.7
         version: 4.2.9
@@ -539,17 +542,6 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /@ethercorps/sveltekit-og@3.0.0(svelte@4.2.9):
-    resolution: {integrity: sha512-CQRmcfCPnTEqP+EeHBE7wWp1sNxpBaT4Fb5Js5fGnWEgFFIDbJEEcFiT0Uwc1CteolXY+CyTOg7mokcOtu3d7w==}
-    peerDependencies:
-      svelte: ^4.0.0
-    dependencies:
-      '@ethercorps/svelte-h2j': 0.1.0(svelte@4.2.9)
-      '@resvg/resvg-js': 2.6.0
-      satori: 0.10.13
-      svelte: 4.2.9
-    dev: false
-
   /@ethersproject/abi@5.0.7:
     resolution: {integrity: sha512-Cqktk+hSIckwP/W8O47Eef60VwmoSC/L3lY0+dIBhQPCNn9E4V7rwmm2aFrNRRDJfFlGuZ1khkQUOc3oBX+niw==}
     dependencies:
@@ -1469,14 +1461,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..a8c9657 100644
--- a/src/routes/og/[token_id]/+server.ts
+++ b/src/routes/og/[token_id]/+server.ts
@@ -1,40 +1,44 @@
-import { ImageResponse } from '@ethercorps/sveltekit-og'
-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'
 import robotoMono400 from '@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff'
+import { error } from '@sveltejs/kit'
+import { loadTokenData } from '../../token/[id]/data'
+import OgToken from './og-token.svelte'
+import { svelteToPngResponse } from './svelte-to-png'
+import type { RequestHandler } from './$types'
 
 export const GET: RequestHandler = async ({ params: { token_id }, fetch }) => {
-  const props = await loadTokenData(token_id, fetch)
-  if (!props.token) throw error(404, 'Token not found')
+  try {
+    const inter400Data = await fetch(inter400).then((res) => res.arrayBuffer())
+    const inter600Data = await fetch(inter600).then((res) => res.arrayBuffer())
+    const robotoMono400Data = await fetch(robotoMono400).then((res) => res.arrayBuffer())
+
+    const props = await loadTokenData(token_id, fetch)
+    if (!props.token) throw error(404, 'Token not found')
 
-  return new ImageResponse(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-    OgToken as any,
-    {
+    return await svelteToPngResponse(OgToken, props, {
       width: 1200,
       height: 630,
       fonts: [
         {
           name: 'sans-serif',
-          data: await fetch(inter400).then((res) => res.arrayBuffer()),
+          data: inter400Data,
           weight: 400,
         },
         {
           name: 'sans-serif',
-          data: await fetch(inter600).then((res) => res.arrayBuffer()),
+          data: inter600Data,
           weight: 600,
         },
         {
           name: 'monospace',
-          data: await fetch(robotoMono400).then((res) => res.arrayBuffer()),
+          data: robotoMono400Data,
           weight: 400,
         },
       ],
-    },
-    props,
-  )
+    })
+  } catch (err) {
+    console.error('error building opengraph image', err)
+    throw error(500, err instanceof Error ? err.message : 'Opengraph image error')
+  }
 }
diff --git a/src/routes/og/[token_id]/svelte-to-png/index.d.ts b/src/routes/og/[token_id]/svelte-to-png/index.d.ts
new file mode 100644
index 0000000..4eab731
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/index.d.ts
@@ -0,0 +1,8 @@
+import type { ComponentType, SvelteComponent } from 'svelte'
+import type { SatoriOptions } from 'satori'
+
+export function svelteToPngResponse(
+  component: ComponentType<SvelteComponent>,
+  props: Record<string, unknown>,
+  options: SatoriOptions,
+): Promise<Response>
diff --git a/src/routes/og/[token_id]/svelte-to-png/index.js b/src/routes/og/[token_id]/svelte-to-png/index.js
new file mode 100644
index 0000000..54232ab
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/index.js
@@ -0,0 +1,43 @@
+import satori from 'satori'
+import { Resvg } from '@resvg/resvg-js'
+
+export async function svelteToPngResponse(component, props, options) {
+  let toReactElement
+  // ugh, this is ugly
+  await import('@ethercorps/svelte-h2j').then((module) => {
+    toReactElement = module.toReactElement
+  })
+
+  const reactElement = svelteComponentToJsx(component, props)
+  const svg = await satori(reactElement, options)
+
+  const resvg = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: options.width,
+    },
+    font: {
+      // It will be faster to disable loading system fonts.
+      loadSystemFonts: false,
+    },
+  })
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  return new Response(pngBuffer, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, immutable, no-transform, max-age=31536000',
+    },
+    status: 200,
+  })
+
+  function svelteComponentToJsx(component, props) {
+    const SvelteRenderedMarkup = component.render(props)
+    let htmlTemplate = SvelteRenderedMarkup.html || ''
+    if (SvelteRenderedMarkup.css.code) {
+      htmlTemplate = `${htmlTemplate}<style>${SvelteRenderedMarkup.css.code}</style>`
+    }
+    return toReactElement(htmlTemplate)
+  }
+}
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'],
     },
   },
 })