diff --git a/lib/render.js b/lib/render.js
index fdb90a2..02c1e0f 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -1,4 +1,4 @@
-import html2png from '@besties/html2png'
+import html2png, { renderHTML as inline } from '@besties/html2png'
 import fs from 'node:fs'
 
 const style = fs.readFileSync('./assets/style.css', 'utf8')
@@ -9,5 +9,27 @@ export default async function (html, options = {}) {
 
 export async function renderHtml(html) {
 	const styleNow = await fs.promises.readFile('./assets/style.css', 'utf8')
-	return `<style>${styleNow}</style>${html}`
+	return (
+		`<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<style>
+	:root {
+		height: 100%;
+		font-family: 'DM Sans', Arial, Helvetica, sans-serif;
+	}
+	* {
+		font-family: inherit;
+	}
+	body {
+		margin: 0;
+		background-color: black;
+		display: grid;
+		place-items: center;
+		height: 100%;
+	}
+	</style>
+	<title>OpenGraph Debug Preview</title>
+</head>` + (await inline(`<style>${styleNow}</style>${html}`))
+	)
 }
diff --git a/views/layout.eta b/views/layout.eta
index f45b730..35748c3 100644
--- a/views/layout.eta
+++ b/views/layout.eta
@@ -1,26 +1,3 @@
-<% if (it.debug) { %>
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<style>
-		:root {
-			height: 100%;
-			font-family: 'DM Sans', Arial, Helvetica, sans-serif;
-		}
-		* {
-			font-family: inherit;
-		}
-		body {
-			margin: 0;
-			background-color: black;
-			display: grid;
-			place-items: center;
-			height: 100%;
-		}
-		</style>
-		<title>OpenGraph Debug Preview</title>
-	</head>
-<% } %>
 <div class="wrapper <% if (it.languages) { %>has-languages<% } %> <% if (it.debug) { %>is-debug<% } %>">
 	<%~ it.body %>
 	<% if (it.languages) { %>
