diff --git a/src/renderer/image-renderers.ts b/src/renderer/image-renderers.ts
index 63170b4..e4bc35c 100644
--- a/src/renderer/image-renderers.ts
+++ b/src/renderer/image-renderers.ts
@@ -17,6 +17,7 @@ const titleElement = ({ children }) =>
                 margin: "25px 225px 10px 0px",
                 color: "#e3e3e3",
                 wordBreak: "break-word",
+                zIndex: 2,
             },
         },
         children
@@ -37,6 +38,7 @@ const headerElement = (header: string, svg: ReactNode) =>
                 display: "flex",
                 alignItems: "center",
                 marginTop: "50px",
+                zIndex: 2,
             },
         },
         svg,
@@ -67,9 +69,25 @@ const rootDivStyle: React.CSSProperties = {
     backgroundColor: "#1b1b1d",
     color: "#e3e3e3",
     borderBottom: "2rem solid #58c142",
-    zIndex: "2 !important",
 };
 
+const bookIcon = join(__dirname, "../../static/img/book-open-cover-regular.svg");
+const bookIconBase64 = `data:image/svg+xml;base64,${readFileSync(bookIcon).toString("base64")}`;
+const bookIconElement = React.createElement("div", {
+    style: {
+        position: "absolute",
+        bottom: "-100px",
+        right: "-100px",
+        height: "500px",
+        width: "500px",
+        backgroundColor: "#58c142bb",
+        zIndex: 1,
+        // background: `url('${bookIconBase64}')`,
+        mask: `url('${bookIconBase64}')`,
+        WebkitMask: `url('${bookIconBase64}')`,
+    },
+});
+
 export const docOgRenderer: ImageRenderer<DocsPageData> = async (data, context) => {
     const element = React.createElement(
         "div",
@@ -77,7 +95,16 @@ export const docOgRenderer: ImageRenderer<DocsPageData> = async (data, context)
         waveLogoElement,
         headerElement("Documentation", null),
         React.createElement(titleElement, null, data.metadata.title),
-        React.createElement("div", null, data.metadata.description.replace("&mdash;", "-"))
+        React.createElement(
+            "div",
+            {
+                style: {
+                    zIndex: 2,
+                },
+            },
+            data.metadata.description.replace("&mdash;", "-")
+        ),
+        bookIconElement
     );
 
     return [element, await imageGeneratorOptions()];
diff --git a/static/img/book-open-cover-regular.svg b/static/img/book-open-cover-regular.svg
new file mode 100644
index 0000000..8f9abfa
--- /dev/null
+++ b/static/img/book-open-cover-regular.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" stroke="white">
+	<!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.-->
+	<path
+		d="M512 337.2l0-284.8L344 77l0 296 168-35.8zM296 373l0-296L128 52.4l0 284.8L296 373zM523.4 2.2C542.7-.7 560 14.3 560 33.8l0 316.3c0 15.1-10.6 28.1-25.3 31.3l-201.3 43c-8.8 1.9-17.9 1.9-26.7 0l-201.3-43C90.6 378.3 80 365.2 80 350.1L80 33.8C80 14.3 97.3-.7 116.6 2.2L320 32 523.4 2.2zM38.3 23.7l10.2 2c-.3 2.7-.5 5.4-.5 8.1l0 40.7 0 267.6 0 66.7 265.8 54.5c2 .4 4.1 .6 6.2 .6s4.2-.2 6.2-.6L592 408.8l0-66.7 0-267.6 0-40.7c0-2.8-.2-5.5-.5-8.1l10.2-2C621.5 19.7 640 34.8 640 55l0 366.9c0 15.2-10.7 28.3-25.6 31.3L335.8 510.4c-5.2 1.1-10.5 1.6-15.8 1.6s-10.6-.5-15.8-1.6L25.6 453.2C10.7 450.2 0 437.1 0 421.9L0 55C0 34.8 18.5 19.7 38.3 23.7z" />
+</svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 97ba080..eb3c74c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3732,7 +3732,7 @@ __metadata:
 
 "@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og":
   version: 1.0.0-alpha.132
-  resolution: "@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og.git#commit=1cc17b16b5cba9ce1a4e4634877f4bea42da9824"
+  resolution: "@waveterm/docusaurus-og@https://github.com/wavetermdev/docusaurus-og.git#commit=b3c4a9071b72d72bfc7ad23c58853a0894b63cde"
   dependencies:
     "@docusaurus/core": "npm:^3.4.0"
     "@docusaurus/module-type-aliases": "npm:^3.4.0"
@@ -3747,8 +3747,8 @@ __metadata:
     lodash: "npm:^4.17.21"
     node-html-parser: "npm:^6.1.5"
     object-hash: "npm:^3.0.0"
-    satori: "npm:^0.10.13"
-  checksum: 10c0/1b67f2464bde5821c5eb475a5be572d2a7601dbc1a832ccf9817cbacdbfc4da87bdc22813eb4d6119707b0b9c117f035f18bbb7e39d79fbd588283b4175e0d34
+    satori: "npm:^0.1"
+  checksum: 10c0/eaa141f979c4df21fad374328a0d6177a9716ecd8f6f8fda84d3b0782bcfcb49f7170e364d86d0ea4a686d886ca2be8b0dfd300ad03fc7982cda9edf2b582b5a
   languageName: node
   linkType: hard
 
@@ -4349,13 +4349,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-js@npm:0.0.8":
-  version: 0.0.8
-  resolution: "base64-js@npm:0.0.8"
-  checksum: 10c0/60f02a9fdbbbb251c0a1064834d4062f5a3c4237edd9f0313282d75980a80ce303316795f7a80c8e240e524169644d88445ec0697b03f81ab9f4458090979375
-  languageName: node
-  linkType: hard
-
 "base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -4925,7 +4918,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
@@ -7306,13 +7299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hex-rgb@npm:^4.1.0":
-  version: 4.3.0
-  resolution: "hex-rgb@npm:4.3.0"
-  checksum: 10c0/ce2c2ff260d9e0686bead74e3318c1684d8a2da856da30ed90535442f705fb4f5cd93ffe70274e2534a7319a99cda6a6617f23d4f163b72867f406e25ea30cb4
-  languageName: node
-  linkType: hard
-
 "history@npm:^4.9.0":
   version: 4.10.1
   resolution: "history@npm:4.10.1"
@@ -8355,16 +8341,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"linebreak@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "linebreak@npm:1.1.0"
-  dependencies:
-    base64-js: "npm:0.0.8"
-    unicode-trie: "npm:^2.0.0"
-  checksum: 10c0/b350c90d7b10db30345ed56cdb869548110ce73ccdc4337100eaee50755eed78e9823490e6f2d7ed0adde14f7ed2a12d8583015e072c54f34dc70b316fde133d
-  languageName: node
-  linkType: hard
-
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -10140,13 +10116,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pako@npm:^0.2.5":
-  version: 0.2.9
-  resolution: "pako@npm:0.2.9"
-  checksum: 10c0/79c1806ebcf325b60ae599e4d7227c2e346d7b829dc20f5cf24cef07c934079dc3a61c5b3c8278a2f7a190c4a613e343ea11e5302dbe252efd11712df4b6b041
-  languageName: node
-  linkType: hard
-
 "param-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
@@ -10166,16 +10135,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-css-color@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "parse-css-color@npm:0.2.1"
-  dependencies:
-    color-name: "npm:^1.1.4"
-    hex-rgb: "npm:^4.1.0"
-  checksum: 10c0/558f1d9874295a618717b88633fb15343fd4d2952c21b274c77503f251c1ed18086df6cec422b6ca67c8f8f0511baf327fae232d4ed12d55cf116695346161d3
-  languageName: node
-  linkType: hard
-
 "parse-entities@npm:^2.0.0":
   version: 2.0.0
   resolution: "parse-entities@npm:2.0.0"
@@ -12267,21 +12226,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"satori@npm:^0.10.13":
-  version: 0.10.14
-  resolution: "satori@npm:0.10.14"
+"satori@npm:^0.1":
+  version: 0.1.2
+  resolution: "satori@npm:0.1.2"
   dependencies:
     "@shuding/opentype.js": "npm:1.4.0-beta.0"
     css-background-parser: "npm:^0.1.0"
     css-box-shadow: "npm:1.0.0-3"
     css-to-react-native: "npm:^3.0.0"
     emoji-regex: "npm:^10.2.1"
-    escape-html: "npm:^1.0.3"
-    linebreak: "npm:^1.1.0"
-    parse-css-color: "npm:^0.2.1"
     postcss-value-parser: "npm:^4.2.0"
-    yoga-wasm-web: "npm:^0.3.3"
-  checksum: 10c0/874e7c869bf33e4d2337fc15a47a3ff97dc592370c2a599e0ad08ac87ba6b4b2800549adae81bbd7c12b773a5cf91ca726be543b7c43a132cab173d0e49e85c2
+    yoga-wasm-web: "npm:^0.3.0"
+  checksum: 10c0/9842dc2513d3b48e8b5fb8dcb528a7547ad4b78231827920a1dfafecfac3c607d44e4119535ce4b617a09d9959b526635969708c137d68473c5678f1929b5fa7
   languageName: node
   linkType: hard
 
@@ -13258,13 +13214,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-inflate@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "tiny-inflate@npm:1.0.3"
-  checksum: 10c0/fab687537254f6ec44c9a2e880048fe70da3542aba28f73cda3e74c95cabf342a339372f2a6c032e322324f01accc03ca26c04ba2bad9b3eb8cf3ee99bba7f9b
-  languageName: node
-  linkType: hard
-
 "tiny-invariant@npm:^1.0.2":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
@@ -13483,16 +13432,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unicode-trie@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "unicode-trie@npm:2.0.0"
-  dependencies:
-    pako: "npm:^0.2.5"
-    tiny-inflate: "npm:^1.0.0"
-  checksum: 10c0/2422368645249f315640a1c9e9506046aa7738fc9c5d59e15c207cdd6ec66101c35b0b9f75dc3ac28fe7be19aaf1efc898bbea074fa1e8e295ef736aeb7904bb
-  languageName: node
-  linkType: hard
-
 "unified-args@npm:^11.0.0":
   version: 11.0.1
   resolution: "unified-args@npm:11.0.1"
@@ -14390,7 +14329,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoga-wasm-web@npm:^0.3.3":
+"yoga-wasm-web@npm:^0.3.0":
   version: 0.3.3
   resolution: "yoga-wasm-web@npm:0.3.3"
   checksum: 10c0/d46ae3a436409e89eb0ea3b8c7624dafaf2c846d9038fdf8aa0cc839f73a2577b679bdc22997596177de74c580a6cdc3206c98fd2acd91b66f85462d9d9d260a