diff --git a/media/tidb-cloud/vercel/integration-link-cluster-page.png b/media/tidb-cloud/vercel/integration-link-cluster-page.png
index 511d2e71b5f74..ca00f7a93ec6b 100644
Binary files a/media/tidb-cloud/vercel/integration-link-cluster-page.png and b/media/tidb-cloud/vercel/integration-link-cluster-page.png differ
diff --git a/media/tidb-cloud/vercel/integration-vercel-configuration-page.png b/media/tidb-cloud/vercel/integration-vercel-configuration-page.png
index 8ded906064965..d0f578ee5ae11 100644
Binary files a/media/tidb-cloud/vercel/integration-vercel-configuration-page.png and b/media/tidb-cloud/vercel/integration-vercel-configuration-page.png differ
diff --git a/media/tidb-cloud/vercel/preview-envs.png b/media/tidb-cloud/vercel/preview-envs.png
new file mode 100644
index 0000000000000..c37b53ccdfdf8
Binary files /dev/null and b/media/tidb-cloud/vercel/preview-envs.png differ
diff --git a/media/tidb-cloud/vercel/tidbcloud-branch-check.png b/media/tidb-cloud/vercel/tidbcloud-branch-check.png
new file mode 100644
index 0000000000000..34a3a33e8b0a4
Binary files /dev/null and b/media/tidb-cloud/vercel/tidbcloud-branch-check.png differ
diff --git a/media/tidb-cloud/vercel/vercel-preview-deployment.png b/media/tidb-cloud/vercel/vercel-preview-deployment.png
new file mode 100644
index 0000000000000..bf50ba2a02b31
Binary files /dev/null and b/media/tidb-cloud/vercel/vercel-preview-deployment.png differ
diff --git a/tidb-cloud/integrate-tidbcloud-with-vercel.md b/tidb-cloud/integrate-tidbcloud-with-vercel.md
index f27b782c317b9..83f32d8d7abc9 100644
--- a/tidb-cloud/integrate-tidbcloud-with-vercel.md
+++ b/tidb-cloud/integrate-tidbcloud-with-vercel.md
@@ -227,15 +227,24 @@ After you push changes to GitHub repository, Vercel will trigger a preview deplo
 
 1. Create a new branch in your Git repository.
 
-```shell
-cd tidb-prisma-vercel-demo1
-git checkout -b new-branch
-```
+    ```shell
+    cd tidb-prisma-vercel-demo1
+    git checkout -b new-branch
+    ```
 
 2. Add some changes and push the changes to the remote repository.
 3. Vercel will trigger a preview deployment for the new branch.
+
+    ![Vercel Preview_Deployment](/media/tidb-cloud/vercel/vercel-preview-deployment.png)
+
     a. During the deployment, TiDB Cloud integration will automatically create a TiDB Serverless branch, of which the name is the same as the git branch name. If the TiDB Serverless branch already exists, TiDB Cloud integration will skip this step.
+
+    ![TiDB_Cloud_Branch_Check](/media/tidb-cloud/vercel/tidb-cloud-branch-check.png)
+
     b. After the TiDB Serverless branch is ready, TiDB Cloud integration will set environment variables in the preview deployment for the Vercel project.
+
+    ![Preview_Envs](/media/tidb-cloud/vercel/preview-envs.png)
+
     c. TiDB Cloud integration will also register a blocking check to wait for the TiDB Serverless branch to be ready. You can rerun the check manually.
 4. After the check is passed, you can visit the preview deployment to see the changes.