diff --git a/website/src/.vitepress/config/hooks/generateOgImages.ts b/website/src/.vitepress/config/hooks/generateOgImages.ts
index c8a0e4fd..c433d1f2 100644
--- a/website/src/.vitepress/config/hooks/generateOgImages.ts
+++ b/website/src/.vitepress/config/hooks/generateOgImages.ts
@@ -75,6 +75,11 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
 			description: frontmatter.layout === "home"
 				? (frontmatter.hero.tagline ?? frontmatter.description)
 				: frontmatter.description,
+			dir: (url.startsWith("/docs/faq/"))
+				? "FAQ"
+				: (url.startsWith("/docs/guides/"))
+				? "Guides"
+				: undefined,
 		}
 	}
 
diff --git a/website/src/.vitepress/theme/components/OgImageTemplate.vue b/website/src/.vitepress/theme/components/OgImageTemplate.vue
index ae23e7dc..242eabde 100644
--- a/website/src/.vitepress/theme/components/OgImageTemplate.vue
+++ b/website/src/.vitepress/theme/components/OgImageTemplate.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
-defineProps<{ title: string; description?: string }>();
+defineProps<{ title: string; description?: string; dir?: string }>();
 </script>
 
 <template>
-	<div tw="w-full h-full bg-white flex flex-col">
+	<div tw="w-full h-full bg-white flex flex-col" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.98), rgba(231,230,255,0.92)), url(https://tachiyomi-v3-gridsome.netlify.app/background-dark.png);background-position:50%;">
 		<div tw="py-10 pl-10 pr-64 w-full min-h-0 grow flex flex-col items-center justify-between">
-			<div tw="w-full flex items-center text-2xl font-medium">
-				<svg width="48" height="48" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z"/></svg>
-				<div tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div>
+			<div tw="w-full flex justify-between items-center text-4xl font-medium">
+				<div tw="flex items-center">
+					<svg width="64" height="64" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z"/></svg>
+					<div tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div>
+				</div>
+				<div v-if="dir" tw="text-5xl items-center font-bold text-slate-900">{{ dir }}</div>
 			</div>
 			<div tw="w-full flex flex-col items-start justify-end">
-				<div tw="text-6xl font-bold text-slate-900">{{ title }}</div>
-				<div v-if="description" tw="mt-2 text-4xl text-slate-500">{{ description }}</div>
+				<div tw="text-7xl font-bold text-slate-900">{{ title }}</div>
+				<div v-if="description" tw="mt-2 text-5xl text-slate-500">{{ description }}</div>
 			</div>
 		</div>
 		<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995FF;" />