diff --git a/docsite/docusaurus.config.ts b/docsite/docusaurus.config.ts
index 30a81c15..54b8d046 100644
--- a/docsite/docusaurus.config.ts
+++ b/docsite/docusaurus.config.ts
@@ -1,4 +1,4 @@
-import type * as Preset from '@docusaurus/preset-classic';
+import * as Preset from '@docusaurus/preset-classic';
 import type { Config } from '@docusaurus/types';
 import * as themes from 'prism-react-renderer';
 import * as Renderers from './lib/ImageRenderers.js';
@@ -134,16 +134,16 @@ const config: Config = {
         ]
       }
     ],
-          [
-        '@bony_chops/docusaurus-og',
-        {
-          path: './preview-images', // relative to the build directory
-          imageRenderers: {
-              'docusaurus-plugin-content-docs': Renderers.docs,
-              'docusaurus-plugin-content-pages': Renderers.docs,
-          },
+    [
+      '@bony_chops/docusaurus-og',
+      {
+        path: './preview-images', // relative to the build directory
+        imageRenderers: {
+            'docusaurus-plugin-content-docs': Renderers.docs,
+            'docusaurus-plugin-content-pages': Renderers.docs,
         },
-        ],
+      },
+    ]
   ],
   themeConfig:
     {
diff --git a/docsite/package-lock.json b/docsite/package-lock.json
index 02e15598..311e9803 100644
--- a/docsite/package-lock.json
+++ b/docsite/package-lock.json
@@ -10044,6 +10044,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/css-gradient-parser": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/css-gradient-parser/-/css-gradient-parser-0.0.17.tgz",
+      "integrity": "sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/css-has-pseudo": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-7.0.3.tgz",
@@ -10860,6 +10869,15 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-2.0.1.tgz",
+      "integrity": "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/emojilib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
@@ -19907,32 +19925,27 @@
       }
     },
     "node_modules/satori": {
-      "version": "0.10.14",
-      "resolved": "https://registry.npmjs.org/satori/-/satori-0.10.14.tgz",
-      "integrity": "sha512-abovcqmwl97WKioxpkfuMeZmndB1TuDFY/R+FymrZyiGP+pMYomvgSzVPnbNMWHHESOPosVHGL352oFbdAnJcA==",
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/satori/-/satori-0.25.0.tgz",
+      "integrity": "sha512-utINfLxrYrmSnLvxFT4ZwgwWa8KOjrz7ans32V5wItgHVmzESl/9i33nE38uG0miycab8hUqQtDlOpqrIpB/iw==",
       "license": "MPL-2.0",
       "dependencies": {
         "@shuding/opentype.js": "1.4.0-beta.0",
         "css-background-parser": "^0.1.0",
         "css-box-shadow": "1.0.0-3",
+        "css-gradient-parser": "^0.0.17",
         "css-to-react-native": "^3.0.0",
-        "emoji-regex": "^10.2.1",
+        "emoji-regex-xs": "^2.0.1",
         "escape-html": "^1.0.3",
         "linebreak": "^1.1.0",
         "parse-css-color": "^0.2.1",
         "postcss-value-parser": "^4.2.0",
-        "yoga-wasm-web": "^0.3.3"
+        "yoga-layout": "^3.2.1"
       },
       "engines": {
         "node": ">=16"
       }
     },
-    "node_modules/satori/node_modules/emoji-regex": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
-      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
-      "license": "MIT"
-    },
     "node_modules/sax": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
@@ -22575,10 +22588,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/yoga-wasm-web": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/yoga-wasm-web/-/yoga-wasm-web-0.3.3.tgz",
-      "integrity": "sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==",
+    "node_modules/yoga-layout": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
+      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
       "license": "MIT"
     },
     "node_modules/zimmerframe": {
diff --git a/docsite/package.json b/docsite/package.json
index c4b96ee1..f0b41184 100644
--- a/docsite/package.json
+++ b/docsite/package.json
@@ -65,6 +65,7 @@
     "npm": ">=11.12.1"
   },
   "overrides": {
-    "lodash": "4.18.1"
+    "lodash": "4.18.1",
+    "satori": "0.25.0"
   }
 }
diff --git a/docsite/src/ImageRenderers.tsx b/docsite/src/ImageRenderers.tsx
index da90c65a..5fe9d5ac 100644
--- a/docsite/src/ImageRenderers.tsx
+++ b/docsite/src/ImageRenderers.tsx
@@ -23,23 +23,39 @@ const DocContent = (props: { data: DocsPageData }) => {
       width: '100%',
       display: 'flex',
       textAlign: 'center',
-      alignItems: 'center',
-      justifyContent: 'center',
+      alignItems: 'flex-start',
+      backgroundColor: "#1b1b1d",
+      color: 'white',
+      justifyContent: 'flex-start',
       flexDirection: 'column',
-      flexWrap: 'nowrap',
+      flexWrap: 'wrap',
+      padding: '2rem 0 0 2rem',
     }}>
 
       <div style={{
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'space-between',
+        gap: '10px',
+        marginBottom: '2rem'
       }}>
-        {logo}
+        <img src="https://docs.multi-scrobbler.app/img/icon.png" width={64} height={64} />
+        <div style={{fontSize: 46, fontWeight: 600}}>Multi-Scrobbler Docs</div>
+      </div>
+      <div style={{
+        display: 'flex',
+        alignContent: 'flex-start',
+        justifyContent: 'flex-start',
+        flexDirection: 'column',
+        gap: '10px',
+        paddingLeft: '1rem',
+        fontSize: 28
+      }}>
+      <div style={{ display: 'flex' }}>{data.metadata.title}</div>
+      {/* <div style={{ display: 'flex' }}>description: {data.metadata.description}</div> */}
+      {data.metadata.frontMatter?.description !== undefined ? <div style={{ display: 'flex' }}>frontmatter description: {data.metadata.frontMatter?.description}</div> : null}
+      {/* <div style={{ display: 'flex' }}>sidebar: {data.metadata.frontMatter?.sidebar_custom_props !== undefined ? JSON.stringify(data.metadata.frontMatter?.sidebar_custom_props) : ''}</div> */}
       </div>
-      <div style={{ display: 'flex' }}>title: {data.metadata.title}</div>
-      <div style={{ display: 'flex' }}>description: {data.metadata.description}</div>
-      <div style={{ display: 'flex' }}>frontmatter description: {data.metadata.frontMatter?.description}</div>
-      <div style={{ display: 'flex' }}>sidebar: {data.metadata.sidebar}</div>
     </div>
   );
 }