diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5c95226..a73469c 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -233,6 +233,7 @@ module.exports = {
 				'xml',
 				'jsconfig',
 				'vitest',
+				'matcher',
 			],
 			minLength: 4,
 		}],
diff --git a/apps/www/.eslintrc-auto-import.json b/apps/www/.eslintrc-auto-import.json
index f97c5a5..8a927d1 100644
--- a/apps/www/.eslintrc-auto-import.json
+++ b/apps/www/.eslintrc-auto-import.json
@@ -62,7 +62,6 @@
     "Banner": true,
     "load": true,
     "data": true,
-    "PageData": true,
-    "GET": true
+    "PageData": true
   }
 }
diff --git a/apps/www/.eslintrc.cjs b/apps/www/.eslintrc.cjs
index fce476c..1155b38 100644
--- a/apps/www/.eslintrc.cjs
+++ b/apps/www/.eslintrc.cjs
@@ -3,4 +3,7 @@ module.exports = {
 	extends: [
 		'./.eslintrc-auto-import.json',
 	],
+	rules: {
+		'@typescript-eslint/no-throw-literal': 'off',
+	},
 };
diff --git a/apps/www/src/lib/imports.d.ts b/apps/www/src/lib/imports.d.ts
index 65a62ef..44237b8 100644
--- a/apps/www/src/lib/imports.d.ts
+++ b/apps/www/src/lib/imports.d.ts
@@ -5,7 +5,6 @@
 export {}
 declare global {
   const Banner: typeof import('./Banner')['default']
-  const GET: typeof import('../routes/api.svg/+server')['GET']
   const afterUpdate: typeof import('svelte')['afterUpdate']
   const backIn: typeof import('svelte/easing')['backIn']
   const backInOut: typeof import('svelte/easing')['backInOut']
@@ -41,7 +40,6 @@ declare global {
   const getContext: typeof import('svelte')['getContext']
   const hasContext: typeof import('svelte')['hasContext']
   const linear: typeof import('svelte/easing')['linear']
-  const load: typeof import('../routes/+page')['load']
   const onDestroy: typeof import('svelte')['onDestroy']
   const onMount: typeof import('svelte')['onMount']
   const quadIn: typeof import('svelte/easing')['quadIn']
diff --git a/apps/www/src/params/layout.ts b/apps/www/src/params/layout.ts
new file mode 100644
index 0000000..d95d502
--- /dev/null
+++ b/apps/www/src/params/layout.ts
@@ -0,0 +1,11 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match = ((param) => {
+	if (
+		param === 'horizontal.svg'
+		|| param === 'vertical.svg'
+		|| param === 'horizontal'
+		|| param === 'vertical'
+	) return true;
+	else return false;
+}) satisfies ParamMatcher;
diff --git a/apps/www/src/routes/api.svg/+server.ts b/apps/www/src/routes/api.svg/+server.ts
deleted file mode 100644
index 1884ce0..0000000
--- a/apps/www/src/routes/api.svg/+server.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import newBanner from '@marknow/banners';
-
-export const GET = (async ({ fetch }): Promise<Response> => {
-	const banner = await newBanner({
-		title: 'Hello world',
-		subtitle: 'This is a test!',
-		icon: 'solar:hand-shake-bold-duotone',
-		colors: {
-			background: '#000000',
-			foreground: '#ffffff',
-		},
-		fonts: {
-			title: {
-				data: await (await fetch('/Mona-Sans-SemiBold.woff')).arrayBuffer(),
-				name: 'Mona Sans',
-				weight: 600,
-				style: 'normal',
-			},
-			subtitle: {
-				data: await (await fetch('/Mona-Sans-Regular.woff')).arrayBuffer(),
-				name: 'Mona Sans',
-				weight: 400,
-				style: 'normal',
-			},
-		},
-		libConfig: {
-			fetcher: fetch,
-		},
-	});
-
-	return new Response(`${banner.toString()}`, {
-		status: 200,
-		headers: {
-			'Content-type': 'image/svg+xml',
-		},
-	});
-}) satisfies RequestHandler;
diff --git a/apps/www/src/routes/v1/banners/[layout=layout]/+server.ts b/apps/www/src/routes/v1/banners/[layout=layout]/+server.ts
new file mode 100644
index 0000000..2ce6aca
--- /dev/null
+++ b/apps/www/src/routes/v1/banners/[layout=layout]/+server.ts
@@ -0,0 +1,48 @@
+import type { BannerOptions } from '@marknow/banners';
+import createBanner from '@marknow/banners';
+import { type RequestHandler, error } from '@sveltejs/kit';
+
+export const GET = (async ({ params, url, fetch }) => {
+	const title: string | null = url.searchParams.get('title');
+	if (!title)
+		throw error(400, { message: 'Please provide a title parameter for the banner' });
+
+	const layout = <BannerOptions['layout']>params.layout?.replace('.svg', '');
+	const subtitle: string | undefined = url.searchParams.get('subtitle') ?? undefined;
+	const icon: string | undefined = url.searchParams.get('icon') ?? undefined;
+	const rtl: boolean = url.searchParams.get('rtl') !== 'false' && url.searchParams.get('rtl') !== null;
+
+	const colors: BannerOptions['colors'] = {
+		foreground: url.searchParams.get('foreground') ?? '#000000',
+		background: url.searchParams.get('background') ?? '#ffffff',
+	};
+
+	const banner = await createBanner({
+		title,
+		layout,
+		subtitle,
+		icon,
+		rtl,
+		colors,
+		fonts: {
+			title: {
+				data: await (await fetch('/Mona-Sans-SemiBold.woff')).arrayBuffer(),
+				name: 'Mona Sans',
+			},
+			subtitle: {
+				data: await (await fetch('/Mona-Sans-Regular.woff')).arrayBuffer(),
+				name: 'Mona Sans',
+			},
+		},
+		libConfig: {
+			fetcher: fetch,
+		},
+	});
+
+	return new Response(banner.svg, {
+		headers: {
+			'Content-type': 'image/svg+xml',
+		},
+		status: 200,
+	});
+}) satisfies RequestHandler;