diff --git a/docs/app/api/og-release/route.tsx b/docs/app/api/og-release/route.tsx
index 9f3d0cada7..b121835d7e 100644
--- a/docs/app/api/og-release/route.tsx
+++ b/docs/app/api/og-release/route.tsx
@@ -50,7 +50,6 @@ export async function GET(req: Request) {
 							filter: "blur(35px)",
 							transform: "rotate(50deg)",
 							top: "18%",
-							// zIndex: 999,
 							left: "0%",
 						}}
 					/>
@@ -79,13 +78,14 @@ export async function GET(req: Request) {
 								position: "relative",
 								flexDirection: "column",
 								textAlign: "left",
+								paddingLeft: "170px",
 								gap: "14px",
 							}}
 						/>
 						<div
 							tw="flex text-6xl absolute bottom-56 isolate font-bold"
 							style={{
-								paddingLeft: "145px",
+								paddingLeft: "170px",
 								paddingTop: "200px",
 								background: "linear-gradient(45deg, #000000 4%, #fff, #000)",
 								backgroundClip: "text",
@@ -98,7 +98,7 @@ export async function GET(req: Request) {
 						<div
 							tw="flex absolute bottom-44 z-[999] text-2xl"
 							style={{
-								paddingLeft: "145px",
+								paddingLeft: "170px",
 								background:
 									"linear-gradient(10deg, #d4d4d8, 04%, #fff, #d4d4d8)",
 								backgroundClip: "text",
@@ -112,7 +112,7 @@ export async function GET(req: Request) {
 						<div
 							tw="flex text-2xl absolute bottom-28 z-[999]"
 							style={{
-								paddingLeft: "145px",
+								paddingLeft: "170px",
 								background:
 									"linear-gradient(10deg, #d4d4d8, 04%, #fff, #d4d4d8)",
 								backgroundClip: "text",
diff --git a/docs/app/changelogs/_components/default-changelog.tsx b/docs/app/changelogs/_components/default-changelog.tsx
index 3ce28d565e..d879367bb2 100644
--- a/docs/app/changelogs/_components/default-changelog.tsx
+++ b/docs/app/changelogs/_components/default-changelog.tsx
@@ -13,6 +13,31 @@ import "highlight.js/styles/dark.css";
 
 export const dynamic = "force-static";
 
+const title = "Changelogs";
+const description = "Latest changes , fixes and updates.";
+const ogImage = "https://better-auth.com/release-og/changelog-og.png";
+
+export const metadata = {
+	metadataBase: new URL("https://better-auth.com/changelogs"),
+	title,
+	description,
+	openGraph: {
+		title,
+		description,
+		images: [
+			{
+				url: ogImage,
+			},
+		],
+		url: "https://better-auth.com/changelogs",
+	},
+	twitter: {
+		card: "summary_large_image",
+		title,
+		description,
+		images: [ogImage],
+	},
+};
 const ChangelogPage = async () => {
 	const { data: releases } = await betterFetch<
 		{
diff --git a/docs/public/release-og/changelog-og.png b/docs/public/release-og/changelog-og.png
new file mode 100644
index 0000000000..1b6384dddf
Binary files /dev/null and b/docs/public/release-og/changelog-og.png differ