diff --git a/TOC.md b/TOC.md
index fa9ae305a95e..fd60b118dfb6 100644
--- a/TOC.md
+++ b/TOC.md
@@ -407,16 +407,22 @@
         + [`inspection_result`](/system-tables/system-table-inspection-result.md)
         + [`inspection_summary`](/system-tables/system-table-inspection-summary.md)
   + UI
-    + TiDB Dashboard @施闻轩
-      + 访问
-      + 概况页面
-      + 集群信息页面
-      + 流量可视化页面
+    + TiDB Dashboard
+      + [访问](/dashboard/dashboard-access.md)
+      + [概况页面](/dashboard/dashboard-overview.md)
+      + [集群信息页面](/dashboard/dashboard-cluster-info.md)
+      + [流量可视化页面](/dashboard/dashboard-keyvisualizer.md)
       + SQL 语句分析页面
+        + [访问列表页面](/dashboard/dashboard-statements-list.md)
+        + [查看执行详情](/dashboard/dashboard-statements-detail.md)
       + 慢查询页面
+        + [访问列表页面](/dashboard/dashboard-slow-queries-list.md)
+        + [查看执行详情](/dashboard/dashboard-slow-queries-detail.md)
       + 集群诊断页面
-      + 日志搜索页面
-      + 实例性能分析页面
+        + [访问](/dashboard/dashboard-diagnostics-access.md)
+        + [查看报告](/dashboard/dashboard-diagnostics-report.md)
+      + [日志搜索页面](/dashboard/dashboard-log-search.md)
+      + [实例性能分析页面](/dashboard/dashboard-profiling.md)
   + CLI
     + [tikv-ctl](/tikv-control.md) @屈鹏
     + [pd-ctl](/pd-control.md) @陈书宁
diff --git a/dashboard/dashboard-access.md b/dashboard/dashboard-access.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-cluster-info.md b/dashboard/dashboard-cluster-info.md
new file mode 100644
index 000000000000..25abd1fdd798
--- /dev/null
+++ b/dashboard/dashboard-cluster-info.md
@@ -0,0 +1,70 @@
+---
+title: 集群信息页面
+summary: 查看整个集群中 TiDB、TiKV、PD、TiFlash 组件的运行状态及其所在主机的运行状态
+category: how-to
+---
+
+# 集群信息页面
+
+该页面上允许用户查看整个集群中 TiDB、TiKV、PD、TiFlash 组件的运行状态及其所在主机的运行状态。
+
+## 访问
+
+可以通过以下两种方法访问集群信息页面：
+
+- 登录后，左侧导航条点击**集群信息**：
+
+  ![访问](/media/dashboard/cluster-info/access.png)
+
+- 在浏览器中访问 <http://127.0.0.1:2379/dashboard/#/cluster_info/instance>（将 `127.0.0.1:2379` 替换为实际 PD 实例地址和端口）。
+
+## 实例列表
+
+点击**实例**可查看实例列表：
+
+![实例](/media/dashboard/cluster-info/instances.png)
+
+实例列表列出了该集群中 TiDB、TiKV、PD 和 TiFlash 组件所有实例的概况信息。
+
+表格包含以下列：
+
+- 地址：实例地址
+- 状态：实例的运行状态
+- 启动时间：实例的启动时间
+- 版本：实例版本号
+- 部署路径：实例二进制文件所在目录路径
+- Git 哈希值：实例二进制对应的 Git 哈希值
+
+实例的运行状态有：
+
+- 在线 (Up)：实例正常运行。
+- 离线 (Down) 或无法访问 (Unreachable)：实例未启动或对应主机存在网络问题。
+- 已缩容下线 (Tombstone)：实例上的数据已被完整迁出并缩容完毕。仅 TiKV 或 TiFlash 实例存在该状态。
+- 下线中 (Offline)：实例上的数据正在被迁出并缩容。仅 TiKV 或 TiFlash 实例存在该状态。
+- 未知 (Unknown)：未知的实例运行状态。
+
+> **注意：**
+>
+> 表格中部分列仅在实例处于在线状态时能显示。
+
+## 主机列表
+
+点击**主机**可查看主机列表：
+
+![主机](/media/dashboard/cluster-info/hosts.png)
+
+主机列表列出了该集群中 TiDB、TiKV、PD 和 TiFlash 组件所有实例对应主机的运行情况。
+
+表格包含以下列：
+
+- 地址：主机 IP 地址
+- CPU：主机 CPU 逻辑核心数
+- CPU 使用率：主机当前 1 秒的用户态和内核态 CPU 使用率
+- 物理内存：主机总计的物理内存大小
+- 内存使用率：主机当前内存使用率
+- 部署磁盘：主机上运行实例所在磁盘的文件系统和磁盘挂载路径
+- 磁盘使用率：主机上运行实例所在磁盘的空间使用率
+
+> **注意：**
+>
+> 主机列表信息由各个实例进程给出，因此当主机上所有实例都处于离线状态时，该主机信息将无法显示。
diff --git a/dashboard/dashboard-diagnostics-access.md b/dashboard/dashboard-diagnostics-access.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-diagnostics-report.md b/dashboard/dashboard-diagnostics-report.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-keyvisualizer.md b/dashboard/dashboard-keyvisualizer.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-log-search.md b/dashboard/dashboard-log-search.md
new file mode 100644
index 000000000000..9ba11ea38c7d
--- /dev/null
+++ b/dashboard/dashboard-log-search.md
@@ -0,0 +1,72 @@
+---
+title: 日志搜索页面
+summary: 在集群中搜索所有节点上的日志
+category: how-to
+---
+
+# 日志搜索页面
+
+该页面上允许用户在集群中搜索所有节点上的日志，在页面上预览搜索结果和下载日志。
+
+## 访问
+
+登录 Dashboard 后点击左侧导航的**日志搜索**可以进入此功能页面：
+
+![日志搜索首页](/media/dashboard/log-search/home.png)
+
+该页面提供 4 个搜索参数，包括：
+
+- 时间范围：限定搜索时间范围内的日志，默认值为最近 30 分钟
+- 日志等级：限定最低日志等级，搜索该日志等级以上的所有日志，默认值为 INFO 等级
+- 关键词：任何合法的任何字符串，可选，关键词之间以空格分割，支持正则表达式（大小写不敏感）
+- 组件：选择要搜索的集群组件，多选，非空，默认选中所有组件
+
+点击**搜索**按钮后，会进入搜索结果的详情页。
+
+## 搜索结果详情
+
+搜索结果详情页面如下图所示：
+
+![搜索结果](/media/dashboard/log-search/result.png)
+
+整个页面分为三个部分：
+
+- 搜索参数选项：与搜索页面的参数选项相同，可以在表单中重新选择参数并开始一次新的搜索（对应上图中框选的区域 1）
+- 搜索进度：在页面右侧，展示当前搜索的进度，包括每个节点日志搜索状态和统计等（对应上图中框选的区域 2）
+- 搜索结果（对应上图中框选的区域 3）：
+    - 时间：日志产生的时间，时区与前端用户所处时区相同
+    - 日志等级：日志等级
+    - 组件类型：显示组件名及其地址
+    - 日志：每条日志记录的正文部分，不包含日志的时间和日志等级。过长的日志会自动截断，鼠标单击该行可以展开查看完整内容，完整日志最长显示 512 个字符
+
+> **注意：**
+>
+> 在该页面上最多只显示 500 条搜索结果，完整的搜索结果可以通过下载得到。
+
+### 搜索进度
+
+在搜索进度区域中，对一个节点的搜索称为一次搜索任务，对搜索任务的状态分为：
+
+- 运行中：开始搜索后，所有任务会进入**运行中**状态
+- 成功：任务完成后自动转到**成功**，此时日志已缓存在 Dashboard 后端所在的本地磁盘中，可以提供给前端下载
+- 失败：用户主动取消，或者某种原因报错退出的任务进入**失败**状态。任务失败时会自动清理本地临时文件
+
+搜索进度区域包含三个控制按钮：
+
+- 下载选中日志：下载被勾选组件的日志（只有已完成的才能被勾选），返回 tar 文件，解压得到一个或多个 zip 文件（每个组件对应一个 zip 文件），解压 zip 得到 log 文本文件
+- 取消：取消所有正在运行的任务，只能在有运行中的任务时才能点击
+- 重试：重试所有失败的任务，只有在有失败任务且无正在运行的任务时才能点击
+
+## 搜索历史列表
+
+在日志搜索首页点击**查看搜索历史**链接，进入搜索历史列表页面：
+
+![搜索历史入口](/media/dashboard/log-search/history-entry.png)
+
+![搜索历史列表](/media/dashboard/log-search/history.png)
+
+该列表显示每次搜索的日志的时间范围、日志等级、组件、关键字以及搜索状态等信息。点击**操作**列的**查看详情**链接将跳转到此次搜索的结果详情页面。
+
+可以对不再需要的搜索历史执行删除操作，点击右上角的**删除全部任务**，或者先选中需要删除的某些行后再点击**删除选中的任务**进行删除：
+
+![删除搜索历史](/media/dashboard/log-search/delete-history.png)
diff --git a/dashboard/dashboard-overview.md b/dashboard/dashboard-overview.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-profiling.md b/dashboard/dashboard-profiling.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-slow-queries-detail.md b/dashboard/dashboard-slow-queries-detail.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/dashboard-slow-queries-list.md b/dashboard/dashboard-slow-queries-list.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/dashboard/slow-query.md b/dashboard/dashboard-slow-query.md
similarity index 100%
rename from dashboard/slow-query.md
rename to dashboard/dashboard-slow-query.md
diff --git a/dashboard/dashboard-statements-detail.md b/dashboard/dashboard-statements-detail.md
new file mode 100644
index 000000000000..7c9ebe411f33
--- /dev/null
+++ b/dashboard/dashboard-statements-detail.md
@@ -0,0 +1,61 @@
+---
+title: 查看执行详情
+summary: 查看单个 SQL 语句执行的详细情况
+category: how-to
+---
+
+# 查看执行详情
+
+在列表中点击任意一行可以进入该 SQL 语句的详情页查看更详细的信息，这此信息包括三大部分：
+
+- SQL 语句概况：包括 SQL 模板，SQL 模板 ID，当前查看的时间范围，执行计划个数以及执行所在的数据库（下图区域 1）
+- 执行计划列表：如果该 SQL 语句有多个执行计划，则显示该列表，可以选择不同的执行计划，在列表下方会显示选中的执行计划详情；如果只有一个执行计划，则该列表不显示（下图区域 2）
+- 执行计划详情：显示选中的执行计划的详细信息，具体见下一小节（下图区域 3）
+
+![详情](/media/dashboard/statement/detail.png)
+
+## 执行计划详情
+
+执行计划详情包括以下内容：
+
+- SQL 样本：该计划对应的实际执行的某一条 SQL 语句文本。时间范围内任何出现过的 SQL 都可能作为 SQL 样本。
+- 执行计划：执行计划的完整内容，参阅[理解 TiDB 执行计划](https://pingcap.com/docs-cn/dev/query-execution-plan/)文档了解如何解读执行计划。如果选择了多个执行计划，则显示的是其中任意一个。
+- 其他关于该 SQL 的基本信息、执行时间、Coprocessor 读取、事务、慢查询等信息，可点击相应标签页标题切换。
+
+![执行计划详情](/media/dashboard/statement/plans-detail.png)
+
+### 基本信息
+
+包含关于表名、索引名、执行次数、累计耗时等信息。**描述**（Description）列对各个字段进行了具体描述。
+
+![基本信息](/media/dashboard/statement/plans-basic.png)
+
+### 执行时间
+
+显示执行计划执行的各阶段所耗费时间。
+
+> **注意：**
+>
+> 由于单个 SQL 语句内部可能有并行执行的操作，因此各阶段累加时间可能超出该 SQL 语句的实际执行时间。
+
+![执行时间](/media/dashboard/statement/plans-time.png)
+
+### Coprocessor 读取
+
+显示 Coprocessor 读取的相关信息。
+
+![Coprocessor 读取](/media/dashboard/statement/plans-cop-read.png)
+
+### 事务
+
+显示执行计划与事务相关的信息，比如平均写入 key 个数，最大写入 key 个数等。
+
+![事务](/media/dashboard/statement/plans-transaction.png)
+
+### 慢查询
+
+如果该执行计划执行过慢，则在慢查询标签页下可以看到其关联的慢查询记录。
+
+![慢查询](/media/dashboard/statement/plans-slow-queries.png)
+
+该区域显示的内容结构与慢查询页面一致，详见[慢查询页面](/dashboard/dashboard-slow-queries-list.md)。
diff --git a/dashboard/dashboard-statements-list.md b/dashboard/dashboard-statements-list.md
new file mode 100644
index 000000000000..8c5831da16db
--- /dev/null
+++ b/dashboard/dashboard-statements-list.md
@@ -0,0 +1,64 @@
+---
+title: SQL 语句分析页面
+summary: 查看所有 SQL 语句在集群上执行情况
+category: how-to
+---
+
+# SQL 语句分析页面
+
+该页面可以查看所有 SQL 语句在集群上执行情况，常用于分析总耗时或单次耗时执行耗时较长的 SQL 语句。
+
+在该页面中，结构一致的 SQL 查询（即使查询参数不一致）都会被归为同一个 SQL 语句，例如 `SELECT * FROM employee WHERE id IN (1, 2, 3)` 和 `select * from EMPLOYEE where ID in (4, 5)` 都属于同一 SQL 语句 `select * from employee where id in (...)`。
+
+## 访问列表页面
+
+可以通过以下两种方法访问 SQL 语句分析页面：
+
+- 登录后，左侧导航条点击**SQL 语句分析**（SQL Statements）：
+
+  ![访问](/media/dashboard/statement/access.png)
+
+- 在浏览器中访问 <http://127.0.0.1:2379/dashboard/#/statement>（将 `127.0.0.1:2379` 替换为实际 PD 实例地址和端口）。
+
+SQL 语句分析页面所展示的所有数据都来自于 TiDB Statement 系统表，参见 [Statement Summary Tables](https://pingcap.com/docs-cn/dev/statement-summary-tables) 文档了解该系统表的详细情况。
+
+### 修改列表过滤条件
+
+页面顶部可修改显示的时间范围、按执行 SQL 所在数据库进行过滤，或按 SQL 类型进行过滤，如下所示。默认显示最近一个收集周期（默认最近 30 分钟）内的所有 SQL 语句执行情况。
+
+![修改过滤条件](/media/dashboard/statement/filter-options.png)
+
+### 显示其他字段
+
+页面顶部**选择列**（Columns）选项中可选择显示更多列，可将鼠标移动到列名右侧的 (i) 图标处查看列的说明：
+
+![选择列](/media/dashboard/statement/columns-selector.png)
+
+### 修改列表排序依据
+
+列表默认以**累计耗时**（Total Latency）从高到低进行排序，点击不同的列标题可以修改排序依据或切换排序顺序：
+
+![修改列排序](/media/dashboard/statement/change-order.png)
+
+### 修改数据收集设置
+
+在列表页面，点击顶部右侧的**设置**（Settings）按钮，即可对 SQL 语句分析功能进行设置：
+
+![设置入口](/media/dashboard/statement/setting-entry.png)
+
+点击后设置界面如下图所示：
+
+![设置](/media/dashboard/statement/settings.png)
+
+在设置中可以选择关闭或开启 SQL 语句分析功能。在开启 SQL 语句分析功能时可以修改以下选项：
+
+- 数据收集周期：默认 30 分钟，每次进行 SQL 语句分析的时间长度。SQL 语句分析功能每次对一段时间范围内的所有 SQL 语句进行汇总统计，如果这个时间范围过长，则统计的粒度粗，不利用定位问题；如果太短，则统计的粒度细，方便定位问题，但会导致在相同的数据保留时间内产生更多的记录，产生更多的内存占用。因此需要根据实际情况调整，在需要定位问题时适当地将值调低。
+- 数据保留时间：默认 1 天，统计信息保留的时间，超过这个时间的数据会被从系统表中删除。
+
+参见 [Statement Summary Tables 参数设置](https://pingcap.com/docs-cn/dev/statement-summary-tables/#%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE) 文档了解详细情况。
+
+> **注意：**
+>
+> 由于 Statement 系统表只存放在内存中，关闭此功能后，系统表中的数据会将清空。
+>
+> 数据收集周期和保留时间的值会影响内存占用，因此建议根据实际情况调整，保留时间不宜设置过大。
diff --git a/media/dashboard/cluster-info/access.png b/media/dashboard/cluster-info/access.png
new file mode 100644
index 000000000000..56a3d6cf1dbc
Binary files /dev/null and b/media/dashboard/cluster-info/access.png differ
diff --git a/media/dashboard/cluster-info/hosts.png b/media/dashboard/cluster-info/hosts.png
new file mode 100644
index 000000000000..f97b487f871f
Binary files /dev/null and b/media/dashboard/cluster-info/hosts.png differ
diff --git a/media/dashboard/cluster-info/instances.png b/media/dashboard/cluster-info/instances.png
new file mode 100644
index 000000000000..d477ef5911dc
Binary files /dev/null and b/media/dashboard/cluster-info/instances.png differ
diff --git a/media/dashboard/log-search/delete-history.png b/media/dashboard/log-search/delete-history.png
new file mode 100644
index 000000000000..9312eb162691
Binary files /dev/null and b/media/dashboard/log-search/delete-history.png differ
diff --git a/media/dashboard/log-search/history-entry.png b/media/dashboard/log-search/history-entry.png
new file mode 100644
index 000000000000..77386a96a074
Binary files /dev/null and b/media/dashboard/log-search/history-entry.png differ
diff --git a/media/dashboard/log-search/history.png b/media/dashboard/log-search/history.png
new file mode 100644
index 000000000000..f2d515756aa6
Binary files /dev/null and b/media/dashboard/log-search/history.png differ
diff --git a/media/dashboard/log-search/home.png b/media/dashboard/log-search/home.png
new file mode 100644
index 000000000000..d4a50e9c4198
Binary files /dev/null and b/media/dashboard/log-search/home.png differ
diff --git a/media/dashboard/log-search/result.png b/media/dashboard/log-search/result.png
new file mode 100644
index 000000000000..da14c0b0381b
Binary files /dev/null and b/media/dashboard/log-search/result.png differ
diff --git a/media/dashboard/statement/access.png b/media/dashboard/statement/access.png
new file mode 100644
index 000000000000..8d33c589fbb1
Binary files /dev/null and b/media/dashboard/statement/access.png differ
diff --git a/media/dashboard/statement/change-order.png b/media/dashboard/statement/change-order.png
new file mode 100644
index 000000000000..1ee5d38932ed
Binary files /dev/null and b/media/dashboard/statement/change-order.png differ
diff --git a/media/dashboard/statement/columns-selector.png b/media/dashboard/statement/columns-selector.png
new file mode 100644
index 000000000000..35692d214c5d
Binary files /dev/null and b/media/dashboard/statement/columns-selector.png differ
diff --git a/media/dashboard/statement/detail.png b/media/dashboard/statement/detail.png
new file mode 100644
index 000000000000..02cdc3da506c
Binary files /dev/null and b/media/dashboard/statement/detail.png differ
diff --git a/media/dashboard/statement/filter-options.png b/media/dashboard/statement/filter-options.png
new file mode 100644
index 000000000000..2c6fd04cf092
Binary files /dev/null and b/media/dashboard/statement/filter-options.png differ
diff --git a/media/dashboard/statement/plans-basic.png b/media/dashboard/statement/plans-basic.png
new file mode 100644
index 000000000000..c365b315fa34
Binary files /dev/null and b/media/dashboard/statement/plans-basic.png differ
diff --git a/media/dashboard/statement/plans-cop-read.png b/media/dashboard/statement/plans-cop-read.png
new file mode 100644
index 000000000000..95a8571e2349
Binary files /dev/null and b/media/dashboard/statement/plans-cop-read.png differ
diff --git a/media/dashboard/statement/plans-detail.png b/media/dashboard/statement/plans-detail.png
new file mode 100644
index 000000000000..1e8ac9e3f98a
Binary files /dev/null and b/media/dashboard/statement/plans-detail.png differ
diff --git a/media/dashboard/statement/plans-slow-queries.png b/media/dashboard/statement/plans-slow-queries.png
new file mode 100644
index 000000000000..ad812ae90ba2
Binary files /dev/null and b/media/dashboard/statement/plans-slow-queries.png differ
diff --git a/media/dashboard/statement/plans-time.png b/media/dashboard/statement/plans-time.png
new file mode 100644
index 000000000000..bb73524f6667
Binary files /dev/null and b/media/dashboard/statement/plans-time.png differ
diff --git a/media/dashboard/statement/plans-transaction.png b/media/dashboard/statement/plans-transaction.png
new file mode 100644
index 000000000000..43abacbdc118
Binary files /dev/null and b/media/dashboard/statement/plans-transaction.png differ
diff --git a/media/dashboard/statement/setting-entry.png b/media/dashboard/statement/setting-entry.png
new file mode 100644
index 000000000000..9daa14308a74
Binary files /dev/null and b/media/dashboard/statement/setting-entry.png differ
diff --git a/media/dashboard/statement/settings.png b/media/dashboard/statement/settings.png
new file mode 100644
index 000000000000..f6542d5699e5
Binary files /dev/null and b/media/dashboard/statement/settings.png differ