diff --git a/theme/components/Author.tsx b/theme/components/Author.tsx
new file mode 100644
index 0000000..44b7b85
--- /dev/null
+++ b/theme/components/Author.tsx
@@ -0,0 +1,112 @@
+import { useFrontmatter } from "@rspress/core/runtime"
+
+// SHA-256 — self-contained, works in any JS environment
+function sha256Hex(message: string): string {
+  const K = [
+    0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5, 0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
+    0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3, 0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
+    0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc, 0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
+    0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7, 0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
+    0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13, 0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
+    0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3, 0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
+    0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5, 0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
+    0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208, 0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
+  ]
+
+  // UTF-8 encode
+  const bytes: number[] = []
+  for (let i = 0; i < message.length; i++) {
+    const c = message.charCodeAt(i)
+    if (c < 0x80) bytes.push(c)
+    else if (c < 0x800) { bytes.push(0xc0 | (c >> 6)); bytes.push(0x80 | (c & 0x3f)) }
+    else { bytes.push(0xe0 | (c >> 12)); bytes.push(0x80 | ((c >> 6) & 0x3f)); bytes.push(0x80 | (c & 0x3f)) }
+  }
+
+  // Padding
+  const bitLen = bytes.length * 8
+  bytes.push(0x80)
+  while ((bytes.length + 8) % 64 !== 0) bytes.push(0)
+  for (let i = 0; i < 4; i++) bytes.push(0) // high 32 bits of length (always 0 for our use)
+  for (let i = 3; i >= 0; i--) bytes.push((bitLen >>> (i * 8)) & 0xff)
+
+  const H = [0x6a09e667, 0xbb67ae85, 0x3c6ef372, 0xa54ff53a, 0x510e527f, 0x9b05688c, 0x1f83d9ab, 0x5be0cd19]
+
+  for (let offset = 0; offset < bytes.length; offset += 64) {
+    const w = new Array(64)
+    for (let t = 0; t < 16; t++) {
+      w[t] = (bytes[offset + t * 4] << 24) | (bytes[offset + t * 4 + 1] << 16) | (bytes[offset + t * 4 + 2] << 8) | bytes[offset + t * 4 + 3]
+    }
+    for (let t = 16; t < 64; t++) {
+      const s0 = (rotateRight(w[t - 15], 7) ^ rotateRight(w[t - 15], 18) ^ (w[t - 15] >>> 3))
+      const s1 = (rotateRight(w[t - 2], 17) ^ rotateRight(w[t - 2], 19) ^ (w[t - 2] >>> 10))
+      w[t] = (w[t - 16] + s0 + w[t - 7] + s1) | 0
+    }
+    let [a, b, c, d, e, f, g, h] = H
+    for (let t = 0; t < 64; t++) {
+      const S1 = rotateRight(e, 6) ^ rotateRight(e, 11) ^ rotateRight(e, 25)
+      const ch = (e & f) ^ (~e & g)
+      const temp1 = (h + S1 + ch + K[t] + w[t]) | 0
+      const S0 = rotateRight(a, 2) ^ rotateRight(a, 13) ^ rotateRight(a, 22)
+      const maj = (a & b) ^ (a & c) ^ (b & c)
+      const temp2 = (S0 + maj) | 0
+      h = g; g = f; f = e; e = (d + temp1) | 0
+      d = c; c = b; b = a; a = (temp1 + temp2) | 0
+    }
+    H[0] = (H[0] + a) | 0; H[1] = (H[1] + b) | 0; H[2] = (H[2] + c) | 0; H[3] = (H[3] + d) | 0
+    H[4] = (H[4] + e) | 0; H[5] = (H[5] + f) | 0; H[6] = (H[6] + g) | 0; H[7] = (H[7] + h) | 0
+  }
+
+  let result = ""
+  for (let i = 0; i < 8; i++) {
+    result += (H[i] >>> 0).toString(16).padStart(8, "0")
+  }
+  return result
+}
+
+function rotateRight(x: number, n: number): number {
+  return (x >>> n) | (x << (32 - n))
+}
+
+function gravatarUrl(email: string, size = 80): string {
+  const normalized = email.trim().toLowerCase()
+  const hash = sha256Hex(normalized)
+  return `https://gravatar.com/avatar/${hash}?s=${size}&d=robohash&r=g`
+}
+
+interface AuthorInfo {
+  name?: string
+  email?: string
+}
+
+export function Author() {
+  const { frontmatter } = useFrontmatter()
+  const author = frontmatter?.author as AuthorInfo | undefined
+  if (!author?.name?.trim()) return null
+
+  const src = author.email?.trim()
+    ? gravatarUrl(author.email)
+    : null
+
+  return (
+    <a
+      href={author.email?.trim() ? `mailto:${author.email}` : undefined}
+      className="author-capsule flex items-center gap-2 my-6 p-1 rounded-full
+                 border border-(--rp-c-divider) bg-(--rp-c-bg-soft)
+                 no-underline transition-colors hover:bg-(--rp-c-bg-mute)
+                 cursor-pointer select-none w-fit"
+    >
+      {src && (
+        <img
+          src={src}
+          alt={author.name}
+          width={32}
+          height={32}
+          className="rounded-full"
+        />
+      )}
+      <span className="text-sm text-(--rp-c-text-2) pr-2">
+        {author.name}
+      </span>
+    </a>
+  )
+}
diff --git a/theme/components/Tags.tsx b/theme/components/Tags.tsx
index 24829c3..1d9102f 100644
--- a/theme/components/Tags.tsx
+++ b/theme/components/Tags.tsx
@@ -10,7 +10,7 @@ export function Tags() {
         <span
           key={tag}
           className="inline-block px-2.5 py-0.5 text-xs leading-relaxed rounded
-                     text-[var(--rp-c-brand)] bg-[var(--rp-c-brand-tint)]
+                     text-(--rp-c-brand) bg-(--rp-c-brand-tint)
                      whitespace-nowrap">
           {tag}
         </span>
diff --git a/theme/index.css b/theme/index.css
index ddbcd60..bd6817f 100644
--- a/theme/index.css
+++ b/theme/index.css
@@ -1,7 +1,6 @@
 @import "tailwindcss";
 
 :root {
-  /* Example brand color overrides for the custom theme scaffold. */
   --rp-c-brand: #0f766e;
   --rp-c-brand-dark: #115e59;
   --rp-c-brand-tint: rgba(15, 118, 110, 0.16);
diff --git a/theme/index.tsx b/theme/index.tsx
index 7e1dd0d..805387d 100644
--- a/theme/index.tsx
+++ b/theme/index.tsx
@@ -1,20 +1,27 @@
-import './index.css';
-import { DocLayout as OriginalDocLayout } from '@rspress/core/theme-original';
-import { Tags } from './components/Tags';
+import "./index.css"
+import type { DocLayoutProps } from "@rspress/core/theme-original"
+import { DocLayout as OriginalDocLayout } from "@rspress/core/theme-original"
+import { Tags } from "./components/Tags"
+import { Author } from "./components/Author"
 
-function DocLayout(props) {
+function DocLayout(props: DocLayoutProps) {
   return (
     <OriginalDocLayout
       {...props}
-      beforeDocContent={
+      beforeOutline={
         <>
+          <Author />
+        </>
+      }
+      afterDocContent={
+        <>
+          {props.afterDocContent}
           <Tags />
-          {props.beforeDocContent}
         </>
       }
     />
-  );
+  )
 }
 
-export * from '@rspress/core/theme-original';
-export { DocLayout };
+export * from "@rspress/core/theme-original"
+export { DocLayout }