diff --git a/.all-contributorsrc b/.all-contributorsrc
index a772294..204b266 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -294,6 +294,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "VicaYang",
+      "name": "Vica",
+      "avatar_url": "https://avatars.githubusercontent.com/u/22126501?v=4",
+      "profile": "https://github.com/VicaYang",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorTemplate": "<a href=\"<%= contributor.profile %>\"><img src=\"<%= contributor.avatar_url %>\" width=\"<%= options.imageSize %>px;\" alt=\"\"/><br /><sub><b><%= contributor.name %></b></sub></a>",
diff --git a/messages/zh.json b/messages/zh.json
index 87e5bc9..ab2f807 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -227,7 +227,8 @@
     },
     "vis-tools": {
       "title": "可视化工具大全",
-      "desc": ""
+      "desc": "",
+      "tool": "开源工具"
     },
     "vis-websites": {
       "title": "可视化网站推荐",
diff --git a/src/app/[locale]/(docs)/vis-tools/data.ts b/src/app/[locale]/(docs)/vis-tools/data.ts
new file mode 100644
index 0000000..1eaabdf
--- /dev/null
+++ b/src/app/[locale]/(docs)/vis-tools/data.ts
@@ -0,0 +1,10 @@
+import { ResourceItem } from "@/lib/data_types";
+
+export const vistool: ResourceItem[] = [
+  { id: "D3", name: "D3", url: "https://d3js.org/", desc: "适合做具有复杂的动画、交互的可视化" },
+  { id: "Apache ECharts", name: "Apache ECharts", url: "https://echarts.apache.org/", desc: "适合做静态展示的图表" },
+  { id: "Vega", name: "Vega", url: "https://vega.github.io/vega/", desc: "用声明式语言创建可视化图表" },
+  { id: "Vega-Lite", name: "Vega-Lite", url: "https://vega.github.io/vega-lite/", desc: "更简洁易用的Vega" },
+  { id: "Observable", name: "Observable", url: "https://observablehq.com/", desc: "在线创建基于js的可视化界面" },
+  { id: "Tableau Public", name: "Tableau Public", url: "https://public.tableau.com/", desc: "免费的Tableau工具" },
+]
diff --git a/src/app/[locale]/(docs)/vis-tools/page.tsx b/src/app/[locale]/(docs)/vis-tools/page.tsx
index 6c2986c..f37e4ac 100644
--- a/src/app/[locale]/(docs)/vis-tools/page.tsx
+++ b/src/app/[locale]/(docs)/vis-tools/page.tsx
@@ -2,6 +2,8 @@ import { CollectionLayout } from "@/components/SimpleLayout";
 import { getTranslations } from "next-intl/server";
 import { SectionTitle } from "@/components/collection/SectionTitle";
 import { useTranslations } from "next-intl";
+import { ListView } from "@/components/collection/ListView";
+import { vistool } from "@/app/[locale]/(docs)/vis-tools/data";
 
 
 export default function Page() {
@@ -11,10 +13,11 @@ export default function Page() {
     <CollectionLayout
       title={t("title")}
       intro={t("desc")}
+      authors={["VicaYang"]}
     >
 
-      <SectionTitle title={t("title")} />
-
+      <SectionTitle title={t("tool")} />
+      <ListView data={vistool} />
     </CollectionLayout>
   )
 }