diff --git a/web_ui/src/app/home/pipelines/page.tsx b/web_ui/src/app/home/pipelines/page.tsx
index c9be078a..e6a8a331 100644
--- a/web_ui/src/app/home/pipelines/page.tsx
+++ b/web_ui/src/app/home/pipelines/page.tsx
@@ -1,21 +1,25 @@
 "use client"
 import {Modal} from "antd";
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
 import PipelineFormComponent from "./components/pipeline-form/PipelineFormComponent";
 import {httpClient} from "@/app/infra/http/HttpClient";
 import {PipelineCardVO} from "@/app/home/pipelines/components/pipeline-card/PipelineCardVO";
-
+import PipelineCardComponent from "@/app/home/pipelines/components/pipeline-card/PipelineCardComponent";
 
 export default function PluginConfigPage() {
     const [modalOpen, setModalOpen] = useState<boolean>(false);
     const [isEditForm, setIsEditForm] = useState(false)
-    const [pipelineList, setPipelineList] = useState([])
+    const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([])
+
+    useEffect(() => {
+        getPipelines()
+    }, [])
 
 
     function getPipelines() {
         httpClient.getPipelines().then(value => {
-            value.pipelines.map(pipeline => {
+            const pipelineList = value.pipelines.map(pipeline => {
                 return new PipelineCardVO({
                     createTime: pipeline.created_at,
                     description: pipeline.description,
@@ -24,6 +28,7 @@ export default function PluginConfigPage() {
                     version: pipeline.for_version
                 })
             })
+            setPipelineList(pipelineList)
         }).catch(error => {
             // TODO toast
             console.log(error)
@@ -49,6 +54,14 @@ export default function PluginConfigPage() {
                         onCancel={() => {}}/>
             </Modal>
 
+            {
+                pipelineList.length > 0 &&
+                <div className={``}>
+                    {pipelineList.map(pipeline => {
+                        return <PipelineCardComponent cardVO={pipeline}/>
+                    })}
+                </div>
+            }
             <CreateCardComponent width={360} height={200} plusSize={90} onClick={() => {setModalOpen(true)}}/>
         </div>
     );