diff --git a/apps/portal/src/app/_images/docs-hero-dark.png b/apps/portal/src/app/_images/docs-hero-dark.png
new file mode 100644
index 00000000000..ed84a2e0130
Binary files /dev/null and b/apps/portal/src/app/_images/docs-hero-dark.png differ
diff --git a/apps/portal/src/app/_images/docs-hero-light.png b/apps/portal/src/app/_images/docs-hero-light.png
new file mode 100644
index 00000000000..ace6d7a3f37
Binary files /dev/null and b/apps/portal/src/app/_images/docs-hero-light.png differ
diff --git a/apps/portal/src/app/_images/docs-hero.png b/apps/portal/src/app/_images/docs-hero.png
deleted file mode 100644
index 37b6a330c35..00000000000
Binary files a/apps/portal/src/app/_images/docs-hero.png and /dev/null differ
diff --git a/apps/portal/src/app/globals.css b/apps/portal/src/app/globals.css
index 870737b9e30..30568b9051c 100644
--- a/apps/portal/src/app/globals.css
+++ b/apps/portal/src/app/globals.css
@@ -93,6 +93,15 @@ html {
   }
 }
 
+/* If no data-theme is added in body, its in dark theme  */
+body:not([data-theme="light"]) .light-only {
+  display: none;
+}
+
+[data-theme="light"] .dark-only {
+  display: none;
+}
+
 code span {
   color: var(--code-dark-color);
 }
diff --git a/apps/portal/src/app/layout.tsx b/apps/portal/src/app/layout.tsx
index acf478f286f..9fdbafdb049 100644
--- a/apps/portal/src/app/layout.tsx
+++ b/apps/portal/src/app/layout.tsx
@@ -26,10 +26,6 @@ const monoFont = Fira_Code({
 export const metadata = createMetadata({
   title: "thirdweb docs",
   description: "thirdweb developer portal",
-  image: {
-    title: "Build apps and games on any EVM chain",
-    icon: "thirdweb",
-  },
 });
 
 export default function RootLayout({
diff --git a/apps/portal/src/app/opengraph-image.png b/apps/portal/src/app/opengraph-image.png
new file mode 100644
index 00000000000..bbc04344f97
Binary files /dev/null and b/apps/portal/src/app/opengraph-image.png differ
diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx
index 00e7a4d7c68..2d0711dfef2 100644
--- a/apps/portal/src/app/page.tsx
+++ b/apps/portal/src/app/page.tsx
@@ -1,7 +1,8 @@
 import { Heading } from "@/components/Document";
 import Image from "next/image";
 import Link from "next/link";
-import DocsHero from "./_images/docs-hero.png";
+import DocsHeroDark from "./_images/docs-hero-dark.png";
+import DocsHeroLight from "./_images/docs-hero-light.png";
 
 export default function Page() {
   return (
@@ -34,7 +35,8 @@ function Hero() {
 
       {/* right */}
       <div className="hidden justify-center lg:flex">
-        <Image src={DocsHero} alt="" className="w-full" />
+        <Image src={DocsHeroDark} alt="" className="dark-only w-full" />
+        <Image src={DocsHeroLight} alt="" className="light-only w-full" />
       </div>
     </section>
   );