diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5282133a..a9a995cb 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -20,5 +20,6 @@ module.exports = {
     "react-hooks/exhaustive-deps":
       process.env.NODE_ENV === "production" ? "off" : "warn",
     "import/no-named-as-default-member": "off",
+    "react/no-unknown-property": ['error', { ignore: ['tw'] }]
   },
 }
diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx
index c1c54a9a..2579c0c8 100644
--- a/src/app/api/og/route.tsx
+++ b/src/app/api/og/route.tsx
@@ -1,4 +1,5 @@
 import { ImageResponse, type NextRequest } from "next/server"
+import removeMarkdown from "remove-markdown"
 import uniqolor from "uniqolor"
 
 import { gql } from "@urql/core"
@@ -7,7 +8,7 @@ import { toGateway } from "~/lib/ipfs-parser"
 import { client } from "~/queries/graphql"
 
 const fontNormal = fetch(
-  "https://github.com/lxgw/LxgwWenKai/releases/download/v1.300/LXGWWenKai-Regular.ttf",
+  "https://github.com/lxgw/LxgwWenKai-Screen/releases/download/v1.300/LXGWWenKaiScreenR.ttf",
 ).then((res) => res.arrayBuffer())
 
 export const runtime = "edge"
@@ -55,9 +56,12 @@ export const GET = async (req: NextRequest) => {
       )
       .toPromise()
     const title = result.data.note.metadata?.content?.title
-    const subtitle = result.data.note.metadata?.content?.summary?.slice(0, 15)
+    const subtitle =
+      result.data.note.metadata?.content?.summary ||
+      removeMarkdown(result.data.note.metadata.content.content)
     const avatar = toGateway(
-      result.data.note.character.metadata?.content?.avatars?.[0],
+      result.data.note.character.metadata?.content?.avatars?.[0] ||
+        `https://api.dicebear.com/6.x/bottts-neutral/svg?seed=${characterId}`,
     )
 
     const siteName =
@@ -82,78 +86,37 @@ export const GET = async (req: NextRequest) => {
     return new ImageResponse(
       (
         <div
+          tw="flex h-full w-full p-20 items-center justify-between flex-col"
           style={{
-            display: "flex",
-            height: "100%",
-            width: "100%",
-
             background: `linear-gradient(37deg, ${bgAccent} 27.82%, ${bgAccentLight} 79.68%, ${bgAccentUltraLight} 100%)`,
-
             fontFamily: "LXGW WenKai Screen R",
-
-            padding: "5rem",
-            alignItems: "flex-end",
-            justifyContent: "flex-end",
           }}
         >
-          <div
-            style={{
-              display: "flex",
-
-              position: "absolute",
-              left: "5rem",
-              top: "5rem",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
+          <div tw="flex items-center w-full -mb-20">
             {avatar && (
+              // eslint-disable-next-line @next/next/no-img-element
               <img
+                alt="avatar"
                 src={avatar}
-                style={{
-                  borderRadius: "50%",
-                }}
-                height={120}
-                width={120}
+                tw="rounded-full"
+                height={130}
+                width={130}
               />
             )}
-
-            <span
-              style={{
-                marginLeft: "3rem",
-                color: "#ffffff99",
-                fontSize: "2rem",
-              }}
-            >
+            <span tw="ml-10 text-zinc-100 text-7xl">
               <h3>{siteName}</h3>
             </span>
           </div>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "flex-end",
-              flexDirection: "column",
-              textAlign: "right",
-            }}
-          >
-            <h1
-              style={{
-                color: "rgba(255, 255, 255, 0.92)",
-
-                fontSize: "4.2rem",
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
-                WebkitLineClamp: 1,
-                lineClamp: 1,
-              }}
-            >
-              {title?.slice(0, 20)}
-            </h1>
+          <h1 tw="text-white text-[9rem] font-bold line-clamp-2 overflow-hidden w-full text-center flex items-center justify-center">
+            <span tw="max-h-[350px]">{title}</span>
+          </h1>
+          <div tw="flex items-center justify-center w-full">
             <h2
+              tw="text-zinc-200 text-8xl"
               style={{
-                color: "rgba(230, 230, 230, 0.85)",
-                fontSize: "3rem",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
               }}
             >
               {subtitle}
@@ -162,8 +125,8 @@ export const GET = async (req: NextRequest) => {
         </div>
       ),
       {
-        width: 1200,
-        height: 600,
+        width: 1920,
+        height: 1080,
         fonts: [
           {
             name: "LXGW WenKai Screen R",
diff --git a/src/app/site/[site]/[slug]/page.tsx b/src/app/site/[site]/[slug]/page.tsx
index d8e54a23..caee5635 100644
--- a/src/app/site/[site]/[slug]/page.tsx
+++ b/src/app/site/[site]/[slug]/page.tsx
@@ -8,7 +8,6 @@ import PageContent from "~/components/common/PageContent"
 import { OIAButton } from "~/components/site/OIAButton"
 import { PostFooter } from "~/components/site/PostFooter"
 import PostMeta from "~/components/site/PostMeta"
-import { SITE_URL } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { getTranslation } from "~/lib/i18n"
 import { toCid, toGateway } from "~/lib/ipfs-parser"
@@ -44,9 +43,8 @@ export async function generateMetadata({
   }`
 
   const description = page?.metadata?.content?.summary
-  const siteImages = `${SITE_URL}/api/og?noteId=${page?.noteId}&characterId=${site?.characterId}`
 
-  const images = toGateway(page?.metadata?.content?.cover || siteImages)
+  const images = toGateway(page?.metadata?.content?.cover!)
   const useLargeOGImage = !!page?.metadata?.content?.cover
   const twitterCreator = site?.metadata?.content?.connected_accounts
     ?.find((account) => account?.endsWith?.("@twitter"))
diff --git a/src/lib/expand-unit.ts b/src/lib/expand-unit.ts
index 9da27ce2..f04bf77b 100644
--- a/src/lib/expand-unit.ts
+++ b/src/lib/expand-unit.ts
@@ -54,7 +54,9 @@ export const expandCrossbellNote = async ({
       expandedNote.metadata.content.cover =
         expandedNote.metadata?.content?.attachments?.find(
           (attachment) => attachment.name === "cover",
-        )?.address || rendered.cover
+        )?.address ||
+        rendered.cover ||
+        `${SITE_URL}/api/og?noteId=${expandedNote.noteId}&characterId=${expandedNote.characterId}`
       expandedNote.metadata.content.audio = rendered.audio
       expandedNote.metadata.content.frontMatter = rendered.frontMatter