diff --git a/package.json b/package.json
index 97d964bed6..42cb63ead8 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "shiki": "0.14.3",
     "socket.io-client": "4.7.1",
     "tailwind-merge": "1.14.0",
+    "uniqolor": "1.1.0",
     "xss": "1.0.14"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b22f60194..274c0ac27e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,6 +131,9 @@ dependencies:
   tailwind-merge:
     specifier: 1.14.0
     version: 1.14.0
+  uniqolor:
+    specifier: 1.1.0
+    version: 1.1.0
   xss:
     specifier: 1.0.14
     version: 1.0.14
@@ -7849,6 +7852,10 @@ packages:
       tiny-inflate: 1.0.3
     dev: false
 
+  /uniqolor@1.1.0:
+    resolution: {integrity: sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==}
+    dev: false
+
   /unist-util-stringify-position@3.0.3:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
     dependencies:
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
index aaf76d7684..760bc5f555 100644
--- a/src/app/api/og/route.tsx
+++ b/src/app/api/og/route.tsx
@@ -1,3 +1,4 @@
+import uniqolor from 'uniqolor'
 import type { AggregateRoot } from '@mx-space/api-client'
 import type { NextRequest } from 'next/server'
 
@@ -6,7 +7,7 @@ import { ImageResponse } from '@vercel/og'
 import { apiClient } from '~/lib/request'
 
 const fontNormal = fetch(
-  'https://github.com/lxgw/kose-font/raw/master/TTF%20(Simplified%20Chinese)/XiaolaiSC-Regular.ttf',
+  'https://github.com/lxgw/LxgwWenKai/releases/download/v1.300/LXGWWenKai-Regular.ttf',
 ).then((res) => res.arrayBuffer())
 export const runtime = 'edge'
 
@@ -18,7 +19,7 @@ export const GET = async (req: NextRequest) => {
     const { searchParams } = req.nextUrl
 
     const titlePost = searchParams.get('title')
-    const subtitlePost = searchParams.get('subtitle')
+    const subtitlePost = searchParams.get('subtitle') || ''
 
     const aggregation = await fetch(apiClient.aggregate.proxy.toString(true), {
       next: {
@@ -31,6 +32,27 @@ export const GET = async (req: NextRequest) => {
       seo: { title },
     } = aggregation
 
+    if (!title)
+      return new Response(
+        'Failed to generate the OG image. Error: The title is required.',
+        { status: 400 },
+      )
+
+    const bgAccent = uniqolor(titlePost + subtitlePost, {
+      saturation: [30, 35],
+      lightness: [60, 70],
+    }).color
+
+    const bgAccentLight = uniqolor(titlePost + subtitlePost, {
+      saturation: [30, 35],
+      lightness: [80, 90],
+    }).color
+
+    const bgAccentUltraLight = uniqolor(titlePost + subtitlePost, {
+      saturation: [30, 35],
+      lightness: [95, 96],
+    }).color
+
     return new ImageResponse(
       (
         <div
@@ -39,10 +61,9 @@ export const GET = async (req: NextRequest) => {
             height: '100%',
             width: '100%',
 
-            background:
-              'linear-gradient(37deg, #66BDB3 47.82%, #C0E3DD 79.68%, #F2F9F5 100%)',
+            background: `linear-gradient(37deg, ${bgAccent} 27.82%, ${bgAccentLight} 79.68%, ${bgAccentUltraLight} 100%)`,
 
-            fontFamily: 'Xiaolai',
+            fontFamily: 'LXGW WenKai Screen R',
 
             padding: '5rem',
             alignItems: 'flex-end',
@@ -117,7 +138,7 @@ export const GET = async (req: NextRequest) => {
         height: 600,
         fonts: [
           {
-            name: 'Xiaolai',
+            name: 'LXGW WenKai Screen R',
             data: fontData,
             weight: 400,
             style: 'normal',