diff --git a/pages/themes/shiro/index.mdx b/pages/themes/shiro/index.mdx
index 96e1e7ce..d178baf3 100644
--- a/pages/themes/shiro/index.mdx
+++ b/pages/themes/shiro/index.mdx
@@ -47,9 +47,22 @@ import { ToGitHub } from '@components/ToGitHub'
 import { Steps } from 'nextra/components'
 import Video from '@components/Video'
 
+export function FAQBox({ title, children }) {
+  return (
+    <details
+      className="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4"
+    >
+      <summary>
+        <strong className="text-lg">{title}</strong>
+      </summary>
+      <div className="nx-p-2">{children}</div>
+    </details>
+  )
+}
+
 <Steps>
 
-### 打开 Clerk 创建项目 (已弃用)
+<FAQBox title="打开 Clerk 创建项目(已弃用)">
 
 打开 [Clerk 仪表盘](https://dashboard.clerk.com/) 点击 Add application 按钮，填入你的博客名称，并配置信息，点击 Create application 按钮，即可完成配置。
 
@@ -57,6 +70,8 @@ import Video from '@components/Video'
 
 <Video src="https://pan.vinua.cn/f/Mv1Ty/clerk_create_project.mp4" />
 
+</FAQBox>
+
 ### 设置主题配置
 
 进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：
@@ -314,7 +329,7 @@ import { EnvVariableConfig } from '@components/EnvVariableConfig'
 
 参见 [README 相关部分](https://github.com/Innei/Shiro/blob/main/README.md#whale-运行) 完成对应操作，随后配置[反向代理](/docs/extra#反向代理)。
 
-## Clerk 登录与 Mix Space 后端绑定（已过时）
+<FAQBox title="Clerk 登录与 Mix Space 后端绑定（已过时）">
 
 如果你遇到在 Shiro 登录之后，无法评论遇到 "和主人重名" 的报错，是因为 Clerk 的用户名和 Mix Space 后端的用户名重复了，你需要绑定本系统和 Clerk 的用户。让某个 Clerk 用户具有管理员权限。
 
@@ -340,16 +355,20 @@ Key:
 
 Refer: https://github.com/Innei/Shiro/issues/137
 
+</FAQBox>
+
 ## 完成！
 
 至此，你已完成了 Shiro 主题的部署，你可以访问你的博客了。
 
-## 移除 Edge Config
+<FAQBox title="移除 Edge Config（已过时）">
 
 在后续的 Shiro 更新中，Edge Config 将不再被使用。你可能需要移除 Edge Config，以防止不必要的资源使用。
 
 进入 Vercel 部署此项目的仪表盘，点击上方的 Storage，进入设置页面，点击左侧的 Projects，将链接的项目取消链接，接着点击左侧的 Settings，点击右侧的 Delete Edge Config 按钮，即可完成删除。
 
+</FAQBox>
+
 ## 更新
 
 ### Vercel 托管