diff --git a/packages/website/pages/_app.tsx b/packages/website/pages/_app.tsx
index 360392abd00..3835feeb4be 100644
--- a/packages/website/pages/_app.tsx
+++ b/packages/website/pages/_app.tsx
@@ -1,6 +1,7 @@
 import "../styles.css";
-import localFont from "next/font/local";
+
 import { Analytics } from "@vercel/analytics/react";
+import localFont from "next/font/local";
 
 const grotesk = localFont({
   src: "../fonts/ClashGrotesk-Semibold.woff2",
@@ -16,9 +17,11 @@ const groteskmedium = localFont({
 
 export default function App({ Component, pageProps }) {
   return (
-    <main className={`${grotesk.variable} ${groteskmedium.variable}`}>
-      <Component {...pageProps} />
-      <Analytics />
-    </main>
+    <>
+      <main className={`${grotesk.variable} ${groteskmedium.variable}`}>
+        <Component {...pageProps} />
+        <Analytics />
+      </main>
+    </>
   );
 }
diff --git a/packages/website/public/images/Taiko_social_media_preview.png b/packages/website/public/images/Taiko_social_media_preview.png
new file mode 100644
index 00000000000..7d095df4b68
Binary files /dev/null and b/packages/website/public/images/Taiko_social_media_preview.png differ
diff --git a/packages/website/public/images/guides/receive-horse.png b/packages/website/public/images/guides/receive-horse.png
index 8e84214d839..501d81fd37f 100644
Binary files a/packages/website/public/images/guides/receive-horse.png and b/packages/website/public/images/guides/receive-horse.png differ
diff --git a/packages/website/theme.config.tsx b/packages/website/theme.config.tsx
index 5285684d62f..52accf6a3da 100644
--- a/packages/website/theme.config.tsx
+++ b/packages/website/theme.config.tsx
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import { useConfig } from "nextra-theme-docs";
 import Footer from "./components/Footer";
 import ThemedImage from "./components/ThemedImage";
+import { useConfig } from "nextra-theme-docs";
+import { useRouter } from "next/router";
 
 export default {
   banner: {
@@ -41,6 +41,10 @@ export default {
             "A decentralized, Ethereum-equivalent ZK-Rollup."
           }
         />
+        <meta
+          property="og:image"
+          content={"/images/Taiko_social_media_preview.png"}
+        />
         <link rel="icon" href="/images/favicon.svg" />
       </>
     );