diff --git a/images/default-og-image.webp b/images/default-og-image.webp
new file mode 100644
index 00000000..c4bfab56
Binary files /dev/null and b/images/default-og-image.webp differ
diff --git a/images/og-image-gradient.webp b/images/og-image-gradient.webp
new file mode 100644
index 00000000..06c7322e
Binary files /dev/null and b/images/og-image-gradient.webp differ
diff --git a/images/og-image-grid.webp b/images/og-image-grid.webp
new file mode 100644
index 00000000..289d1023
Binary files /dev/null and b/images/og-image-grid.webp differ
diff --git a/images/og-image-lights.webp b/images/og-image-lights.webp
new file mode 100644
index 00000000..30ddd86f
Binary files /dev/null and b/images/og-image-lights.webp differ
diff --git a/images/og-image-none.webp b/images/og-image-none.webp
new file mode 100644
index 00000000..43a46779
Binary files /dev/null and b/images/og-image-none.webp differ
diff --git a/images/og-image-solid.webp b/images/og-image-solid.webp
new file mode 100644
index 00000000..5413262f
Binary files /dev/null and b/images/og-image-solid.webp differ
diff --git a/settings/global.mdx b/settings/global.mdx
index 7586860b..613de021 100644
--- a/settings/global.mdx
+++ b/settings/global.mdx
@@ -550,7 +550,7 @@ Example:
 }
 ```
 
-  <Expandable title="Redirect">
+  <Expandable title="SEO">
     <ResponseField name="indexHiddenPages" type="boolean" default="false">
     Enables indexing pages not included in `navigation`.
     </ResponseField>
@@ -558,6 +558,58 @@ Example:
   </Expandable>
 </ResponseField>
 
+
+### Open Graph Image
+
+Configure the Open Graph image that is displayed when you share your site on social media such as X and in chats such as Slack.
+
+<Frame>
+  <img src="images/default-og-image.webp" />
+</Frame>
+
+<Expandable title="OgImage">
+  <ResponseField name="mode" type='"light" | "dark"'>
+    The color theme of the OG image. Default to `modeToggle` setting. If it is not set, it will be determined based on the color luminosity of your primary color.
+  </ResponseField>
+  <ResponseField name="logo" type="boolean" default={true}>
+    Whether to include the logo in the OG image.
+  </ResponseField>
+  <ResponseField name="header" type="boolean" default={true}>
+    Whether to include the header in the OG image.
+  </ResponseField>
+  <ResponseField name="title" type="boolean" default={true}>
+    Whether to include the title in the OG image.
+  </ResponseField>
+  <ResponseField name="description" type="boolean" default={true}>
+    Whether to include the page description in the OG image.
+  </ResponseField>
+  <ResponseField name="backgroundStyle" type='"grid" | "none" | "gradient" | "lights" | "solid' default='grid'>
+    The style of the background.
+      <Expandable title="Background style examples">
+        `grid`
+        <Frame>
+          <img src="images/og-image-grid.webp" />
+        </Frame>
+        `none`
+        <Frame>
+          <img src="images/og-image-none.webp" />
+        </Frame>
+        `gradient`
+        <Frame>
+          <img src="images/og-image-gradient.webp" />
+        </Frame>
+        `lights`
+        <Frame>
+          <img src="images/og-image-lights.webp" />
+        </Frame>
+        `solid`
+        <Frame>
+          <img src="images/og-image-solid.webp" />
+        </Frame>
+      </Expandable>
+  </ResponseField>
+</Expandable>
+
 ## Example `mint.json`
 
 Click on the following dropdown to view a sample configuration file