diff --git a/web_ui/src/app/home/plugins/page.tsx b/web_ui/src/app/home/plugins/page.tsx
index 8bc22362..877f89e2 100644
--- a/web_ui/src/app/home/plugins/page.tsx
+++ b/web_ui/src/app/home/plugins/page.tsx
@@ -1,7 +1,45 @@
-export default function pluginConfigPage() {
+"use client"
+import { Radio } from 'antd';
+import {useState} from "react";
+import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent";
+import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent";
+
+export default function PluginConfigPage() {
+    enum PageType {
+        INSTALLED = "installed",
+        MARKET = 'market'
+    }
+
+    const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
+
     return (
         <div className={``}>
-            <h1>PluginConfigPage</h1>
+            <div>
+                <Radio.Group
+                    block
+                    options={[
+                        { label: '已安装', value: PageType.INSTALLED },
+                        { label: '插件市场', value: PageType.MARKET },
+                    ]}
+                    defaultValue={PageType.INSTALLED}
+                    value={nowPageType}
+                    optionType="button"
+                    buttonStyle="solid"
+                    onChange={(e) => {
+                        // 这里静态类型检测有问题
+                        setNowPageType(e.target.value)
+                    }}
+                />
+            </div>
+            <div>
+                {
+                    nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
+                }
+                {
+                    nowPageType === PageType.MARKET && <PluginMarketComponent/>
+                }
+            </div>
+
         </div>
     );
 }
diff --git a/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts b/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts
new file mode 100644
index 00000000..e83bd75c
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts
@@ -0,0 +1,24 @@
+export interface IPluginCardVO {
+    author: string,
+    version: string,
+    name: string,
+    description: string,
+    handlerCount: number,
+}
+
+export class PluginCardVO implements IPluginCardVO{
+    description: string;
+    handlerCount: number;
+    name: string;
+    author: string;
+    version: string;
+
+    constructor(prop: IPluginCardVO) {
+        this.description = prop.description
+        this.handlerCount = prop.handlerCount
+        this.name = prop.name
+        this.author = prop.author
+        this.version = prop.version
+    }
+
+}
diff --git a/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
new file mode 100644
index 00000000..39e03b86
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
+import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
+import {useEffect, useState} from "react";
+import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
+
+export default function PluginInstalledComponent () {
+    const [pluginList, setPluginList] = useState<PluginCardVO[]>([])
+
+    useEffect(() => {
+        initData()
+    }, [])
+
+    function initData() {
+        getPluginList().then((value) => {
+            setPluginList(value)
+        })
+    }
+
+    async function getPluginList() {
+        return [
+            new PluginCardVO({
+                description: "一般的描述",
+                handlerCount: 0,
+                name: "插件AAA",
+                author: "/hana",
+                version: "0.1"
+            }),
+            new PluginCardVO({
+                description: "一般的描述",
+                handlerCount: 0,
+                name: "插件AAA",
+                author: "/hana",
+                version: "0.1"
+            }),
+            new PluginCardVO({
+                description: "一般的描述",
+                handlerCount: 0,
+                name: "插件AAA",
+                author: "/hana",
+                version: "0.1"
+            }),
+            new PluginCardVO({
+                description: "一般的描述",
+                handlerCount: 0,
+                name: "插件AAA",
+                author: "/hana",
+                version: "0.1"
+            })
+        ]
+    }
+
+    return (
+        <div>
+            {
+                pluginList.map((vo, index) => {
+                    return <div key={index}>
+                        <PluginCardComponent cardVO={vo}/>
+                    </div>
+                })
+            }
+            <CreateCardComponent
+                width={360}
+                height={120}
+                plusSize={90}
+                onClick={() => {}}
+            />
+        </div>
+    )
+}
diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
new file mode 100644
index 00000000..162dc271
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -0,0 +1,33 @@
+import styles from "./pluginCard.module.css"
+import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
+
+export default function PluginCardComponent({
+    cardVO
+}: {
+    cardVO: PluginCardVO
+}) {
+    return (
+        <div className={`${styles.cardContainer}`}>
+            {/*  header  */}
+            <div className={`${styles.cardHeader}`}>
+                {/* left author */}
+                <div className={`${styles.fontGray}`}>{cardVO.author}</div>
+                {/*  right icon & version  */}
+                <div className={`${styles.iconVersionContainer}`}>
+
+                </div>
+            </div>
+            {/*  content  */}
+            <div className={`${styles.cardContent}`}>
+                <div className={`${styles.boldFont}`}>{cardVO.name}</div>
+                <div className={`${styles.fontGray}`}>{cardVO.description}</div>
+            </div>
+            {/*  footer  */}
+            <div className={`${styles.cardFooter}`}>
+                <div className={`${styles.iconVersionContainer}`}>
+
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
new file mode 100644
index 00000000..6f966543
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
@@ -0,0 +1,49 @@
+.cardContainer {
+    width: 360px;
+    height: 129px;
+    background-color: #FFF;
+    border-radius: 9px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-evenly;
+}
+
+.cardHeader {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #79c1f4;
+
+    .iconVersionContainer {
+        width: 100px;
+        height: 100%;
+        background-color: #063a5a;
+    }
+}
+
+.cardContent {
+    width: 100%;
+    height: 70px;
+    background-color: #e38787;
+}
+
+.cardFooter {
+    width: 100%;
+    height: 30px;
+    background-color: #f8ff6d;
+}
+
+
+.fontGray {
+    color: #6C6C6C;
+}
+
+.boldFont {
+    font-size: 22px;
+    font-weight: bold;
+}
diff --git a/web_ui/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx b/web_ui/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
new file mode 100644
index 00000000..c6b7b540
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+export default function PluginMarketComponent () {
+    return (
+        <div>
+            plugin-market
+        </div>
+    )
+}
diff --git a/web_ui/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web_ui/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
new file mode 100644
index 00000000..b2a94b74
--- /dev/null
+++ b/web_ui/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
@@ -0,0 +1,7 @@
+export function PluginMarketCardComponent() {
+    return (
+        <div>
+            plugin market card
+        </div>
+    )
+}