diff --git a/CHANGELOG.md b/CHANGELOG.md
index eaef49b..815b36a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Added safer confirmations for manual operations and localized the main Web UI feedback messages.
 - Removed the redundant send-console navigation label while keeping send details available from contextual actions.
 - Added a persistent sun/moon toggle for switching between light and dark console themes.
+- Updated the README preview image and added a screenshot-based usage guide.
 - Added a project disclaimer to the root README.
 - Added a Linux Do friendly link and GitHub star history chart.
 - Refined the root README wording and structure for an open source project style.
diff --git a/DouYinSparkFlow/webui/static/app.css b/DouYinSparkFlow/webui/static/app.css
index 25cdf44..fe844f4 100644
--- a/DouYinSparkFlow/webui/static/app.css
+++ b/DouYinSparkFlow/webui/static/app.css
@@ -436,6 +436,12 @@ h3 {
   align-items: start;
 }
 
+.layout-grid > *,
+.dashboard-layout > *,
+.settings-layout > * {
+  min-width: 0;
+}
+
 .content-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1200,6 +1206,8 @@ tbody tr:last-child td {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .layout-grid,
+  .dashboard-layout,
   .content-grid,
   .account-list,
   .account-grid {
diff --git a/README.md b/README.md
index e12d75a..9cb961d 100644
--- a/README.md
+++ b/README.md
@@ -13,11 +13,14 @@ Douyin SparkFlow 提供一个面向个人自用场景的抖音火花维护工具
 - ⏱️ 定时执行续火花任务，支持手动触发和日志查看。
 - 🌐 可选 Mihomo/Clash 代理订阅配置。
 - 🐳 Docker Compose 编排 Web、登录桌面、定时器、任务和代理服务。
+- 🌗 支持小太阳/小月亮切换白天模式和黑夜模式。
 
 ## 🖼️ 界面预览
 
 ![Douyin SparkFlow 控制台界面预览](docs/images/ui-preview.png)
 
+新版 Web 面板将概览、登录工作区、账号与目标、运行与系统拆成独立视图。完整流程见 [使用教程](docs/usage.md)。
+
 ## ⚠️ 免责声明
 
 本项目仅用于个人学习、研究和自用场景，不是抖音、字节跳动或相关平台的官方工具，也未获得其授权、背书或关联。
@@ -86,11 +89,13 @@ docker compose ps
 首次使用：
 
 1. 创建管理员账号。
-2. 打开登录桌面并扫码登录抖音。
+2. 打开登录工作区并扫码登录抖音。
 3. 保存登录态。
 4. 刷新好友列表并选择目标好友。
 5. 设置发送窗口，例如 `10:00-18:00/10m`。
 
+截图版操作流程见 [使用教程](docs/usage.md)。
+
 ## 💻 本地运行
 
 Windows 需要先启动 Docker Desktop：
diff --git a/docs/images/ui-preview.png b/docs/images/ui-preview.png
index cad52ba..29c2e8c 100644
Binary files a/docs/images/ui-preview.png and b/docs/images/ui-preview.png differ
diff --git a/docs/images/usage-accounts.png b/docs/images/usage-accounts.png
new file mode 100644
index 0000000..798a555
Binary files /dev/null and b/docs/images/usage-accounts.png differ
diff --git a/docs/images/usage-dark-mode.png b/docs/images/usage-dark-mode.png
new file mode 100644
index 0000000..8932ab2
Binary files /dev/null and b/docs/images/usage-dark-mode.png differ
diff --git a/docs/images/usage-login-workspace.png b/docs/images/usage-login-workspace.png
new file mode 100644
index 0000000..85282f6
Binary files /dev/null and b/docs/images/usage-login-workspace.png differ
diff --git a/docs/images/usage-login.png b/docs/images/usage-login.png
new file mode 100644
index 0000000..98fe138
Binary files /dev/null and b/docs/images/usage-login.png differ
diff --git a/docs/images/usage-overview.png b/docs/images/usage-overview.png
new file mode 100644
index 0000000..abe31fe
Binary files /dev/null and b/docs/images/usage-overview.png differ
diff --git a/docs/images/usage-settings.png b/docs/images/usage-settings.png
new file mode 100644
index 0000000..ca087da
Binary files /dev/null and b/docs/images/usage-settings.png differ
diff --git a/docs/usage.md b/docs/usage.md
new file mode 100644
index 0000000..ce2b98d
--- /dev/null
+++ b/docs/usage.md
@@ -0,0 +1,91 @@
+# 🔥 Douyin SparkFlow 使用教程
+
+这份教程按第一次部署后的操作顺序写。你需要先完成服务器或本地部署，然后访问 Web 面板。
+
+## 1. 登录控制台
+
+打开 Web 面板地址，例如：
+
+- 服务器部署：`http://服务器IP:8787`
+- 本地部署：`http://127.0.0.1:8787`
+
+首次打开时创建管理员账号。后续登录时输入管理员用户名和密码。
+
+![控制台登录](images/usage-login.png)
+
+## 2. 查看控制台概览
+
+登录后进入 **控制台概览**。这里用于快速确认启用账号、今日成功、失败待补发、待发送、未处理和服务状态。
+
+右上角的小太阳和小月亮可以切换白天模式和黑夜模式，选择会保存在当前浏览器中。
+
+![控制台概览](images/usage-overview.png)
+
+## 3. 打开登录工作区
+
+进入 **登录工作区**，在远端浏览器里完成抖音扫码、验证码或其他人工验证步骤。
+
+如果内嵌 noVNC 无法连接，点击 **新窗口打开**。登录完成后点击 **保存当前账号**，面板会把登录态写入账号配置。
+
+![登录工作区](images/usage-login-workspace.png)
+
+## 4. 维护账号与目标好友
+
+进入 **账号与目标** 查看已保存的账号。你可以启用或停用账号，修改显示名，维护目标好友。
+
+如果账号已经保存，可以点击 **刷新好友列表**，再从好友选择器中选择目标好友。保存后，定时任务会按这些目标执行续火花。
+
+![账号与目标](images/usage-accounts.png)
+
+## 5. 设置运行参数和发送窗口
+
+进入 **运行与系统** 调整消息模板、随机策略、消息间隔、代理维护和发送窗口。
+
+发送窗口使用北京时间，例如：
+
+```text
+10:00-18:00/10m
+```
+
+这个例子表示每天 `10:00` 到 `18:00` 之间执行，调度间隔为 `10` 分钟。
+
+![运行与系统](images/usage-settings.png)
+
+## 6. 处理失败和查看日志
+
+在概览页可以点击 **查看明细** 查看今日发送明细。遇到失败时，优先使用 **补发未成功目标**，它只会处理失败队列。
+
+**补发全部对象** 会重新处理所有启用账号的所有目标，适合确认目标范围后手动执行。
+
+需要排查问题时，进入 **运行日志** 查看最近任务输出。
+
+## 7. 使用黑夜模式
+
+黑夜模式适合夜间运维或长时间盯屏。点击右上角的小月亮即可切换。
+
+![黑夜模式](images/usage-dark-mode.png)
+
+## 常见问题
+
+### 登录工作区打不开
+
+先点击 **新窗口打开**。如果仍然不可用，检查 `login-desktop` 容器是否运行，并确认服务器防火墙或安全组已放行登录桌面端口。
+
+```bash
+docker compose ps
+docker compose logs -f login-desktop
+```
+
+### 账号保存后没有好友列表
+
+进入 **账号与目标**，点击 **刷新好友列表**。刷新需要当前账号的登录态有效，如果登录态过期，回到 **登录工作区** 重新登录并保存。
+
+### 定时任务没有按预期发送
+
+检查 **运行与系统** 里的发送窗口，再查看调度容器日志：
+
+```bash
+docker compose logs -f scheduler
+```
+
+如果只是少量目标失败，先使用 **补发未成功目标**，不要直接补发全部对象。