diff --git a/README.md b/README.md
index 4a33d73..0dad99c 100644
--- a/README.md
+++ b/README.md
@@ -10,66 +10,70 @@ npm install -D @ethercorps/sveltekit-og
 
 ## Usage
 
-Create a file at: `/src/routes/og/+page.server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
+Create a file at: `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
 
 ```typescript
-// /src/routes/og/+page.server.ts
+// src/routes/og/+server.ts
+import { ImageResponse } from '@ethercorps/sveltekit-og';
+import { RequestHandler } from './$types';
 
-import { toReactElement, satori } from '@ethercorps/sveltekit-og';
-
-const htmlString = `
-        <div tw="bg-gray-50 flex w-full">
-        <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
-          <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
-            <span>Ready to dive in?</span>
-            <span tw="text-indigo-600">Start your free trial today.</span>
-          </h2>
-          <div tw="mt-8 flex md:mt-0">
-            <div tw="flex rounded-md shadow">
-              <a tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
-            </div>
-            <div tw="ml-3 flex rounded-md shadow">
-              <a tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
-            </div>
-          </div>
+const template = `
+ <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
+    <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+      <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
+        <span>Ready to dive in?</span>
+        <span tw="text-indigo-600">Start your free trial today.</span>
+      </h2>
+      <div tw="mt-8 flex md:mt-0">
+        <div tw="flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
         </div>
+        <div tw="ml-3 flex rounded-md shadow">
+          <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
         </div>
-        `;
-const newNode = toReactElement(htmlString);
+      </div>
+    </div>
+  </div>
+`;
 
-/** @type {import('./$types').PageServerLoad} */
-export async function load() {
-	const fontFile400 = await fetch(
-		'https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'
-	);
-	const fontData400 = await fontFile400.arrayBuffer();
-	const svg = await satori(newNode, {
-		height: 630,
-		width: 1200,
-		fonts: [
-			{
-				name: 'sans serif',
-				data: fontData400,
-				style: 'normal',
-				weight: 700
-			}
-		]
-	});
+const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
+const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
-	return { svg };
-}
+export const GET: RequestHandler = async () => {
+  return await ImageResponse(template, {
+    height: 630,
+    width: 1200,
+    fonts: [
+      {
+        name: 'Inter Latin',
+        data: fontData,
+        weight: 400
+      }
+    ]
+  });
+};
 ```
 
-Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reload does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. 
+Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. 
 
 ![Rendered OG image](static/demo.png)
 
 ## Headers
 
-When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image at the CDN for 1 year. In both cases, the `'content-type': 'image/png'` is used.
+When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used.
 
 
-Read more about the API, supported features and check out the examples on Satori Playground.
+## Styling
+
+Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css). 
+
+Satori supports only a subset of HTML and CSS. For full details, see [Satori’s documentation](https://github.com/vercel/satori#documentation). Notably, Satori only supports flex-based layouts.
+
+## Fonts
+
+Satori supports `ttf`, `otf`, and `woff` font formats. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`.
+
+By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch. 
 
 ## Examples
 
@@ -127,12 +131,6 @@ componentToImageResponse(
     })
 ```
 
-### Supported HTML and CSS Features
-
-Please refer to [Satori’s documentation](https://github.com/vercel/satori#documentation) for a list of supported HTML and CSS features.
-
-By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. If you need to use other fonts, you can pass them in the `fonts` option.
-
 ## Changelog
 
 ### v1.2.3 Update (Breaking Changes)