diff --git a/frontend/src/assets/chart/down_arrow.png b/frontend/src/assets/chart/down_arrow.png
new file mode 100644
index 0000000..67b06c1
Binary files /dev/null and b/frontend/src/assets/chart/down_arrow.png differ
diff --git a/frontend/src/assets/chart/five_arrow.png b/frontend/src/assets/chart/five_arrow.png
new file mode 100644
index 0000000..e32df74
Binary files /dev/null and b/frontend/src/assets/chart/five_arrow.png differ
diff --git a/frontend/src/assets/chart/four_arrow.png b/frontend/src/assets/chart/four_arrow.png
index 951db88..5d1a961 100644
Binary files a/frontend/src/assets/chart/four_arrow.png and b/frontend/src/assets/chart/four_arrow.png differ
diff --git a/frontend/src/assets/chart/one_arrow.png b/frontend/src/assets/chart/one_arrow.png
index fc01a42..5eeba61 100644
Binary files a/frontend/src/assets/chart/one_arrow.png and b/frontend/src/assets/chart/one_arrow.png differ
diff --git a/frontend/src/assets/chart/three_arrow.png b/frontend/src/assets/chart/three_arrow.png
index d1bf5ba..b177b3e 100644
Binary files a/frontend/src/assets/chart/three_arrow.png and b/frontend/src/assets/chart/three_arrow.png differ
diff --git a/frontend/src/assets/chart/two_arrow.png b/frontend/src/assets/chart/two_arrow.png
index 25439c4..0da6f3d 100644
Binary files a/frontend/src/assets/chart/two_arrow.png and b/frontend/src/assets/chart/two_arrow.png differ
diff --git a/frontend/src/assets/chart/up_arrow.png b/frontend/src/assets/chart/up_arrow.png
new file mode 100644
index 0000000..d923b82
Binary files /dev/null and b/frontend/src/assets/chart/up_arrow.png differ
diff --git a/frontend/src/components/ProcessView/index.less b/frontend/src/components/ProcessView/index.less
index bc3d507..2267872 100644
--- a/frontend/src/components/ProcessView/index.less
+++ b/frontend/src/components/ProcessView/index.less
@@ -21,16 +21,17 @@
 
                 .item_text {
                     position: relative;
-                    width: 56px;
-                    height: 56px;
+                    width: 55px;
+                    height: 52px;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
                     padding-top: 5px;
-                    img {
-                        width: 56px;
-                        height: 56px;
+
+                    .item_round {
+                        width: 100%;
+                        height: 100%;
                         position: absolute;
                         top: 0;
                         left: 0;
@@ -38,18 +39,46 @@
 
                     p {
                         font-size: 12px;
-                        width: 20px;
-                        height: 20px;
+                        width: 22px;
+                        height: 16px;
                         border-radius: 50%;
                         display: flex;
                         align-items: center;
                         justify-content: center;
                         transform: scale(0.8);
+                        font-weight: 600;
                     }
 
                     span {
                         transform: scale(0.6);
                         font-size: 12px;
+                        margin-top: -4px;
+                    }
+
+                    .dashed_line {
+                        position: absolute;
+                        width: 13px;
+                    }
+                }
+
+                &:nth-child(1) {
+                    top: 82px;
+                    left: 84px;
+
+                    .item_text {
+                        width: 68px;
+                        height: 63px;
+                    }
+                    p {
+                        width: 18px;
+                        height: 18px;
+                        background: #bfd8ee;
+                        color: #fff;
+                    }
+
+                    span {
+                        color: #649ed2;
+                        margin-top: -6px;
                     }
                 }
 
@@ -65,11 +94,18 @@
                     span {
                         color: #DAA600;
                     }
+
+                    .dashed_line {
+                        transform: rotate(-90deg);
+                        top: -34px;
+                        left: 108px;
+                    }
                 }
 
                 &:nth-child(3) {
                     top: 1px;
                     right: -2px;
+
                     p {
                         background: #c5e0b4;
                         color: #e58881;
@@ -78,11 +114,18 @@
                     span {
                         color: #5e913b;
                     }
+
+                    .dashed_line {
+                        top: 61px;
+                        left: 24px;
+                        width: 12.4px;
+                    }
                 }
 
                 &:nth-child(4) {
                     top: 173px;
                     right: -2px;
+
                     p {
                         background: #cccfde;
                         color: #5e913b;
@@ -91,11 +134,18 @@
                     span {
                         color: #5e913b;
                     }
+
+                    .dashed_line {
+                        transform: rotate(90deg);
+                        top: -28px;
+                        left: -66.6px;
+                    }
                 }
 
                 &:nth-child(5) {
                     top: 173px;
                     left: 1px;
+
                     p {
                         background: #edd1cf;
                         color: #e58881;
@@ -104,6 +154,13 @@
                     span {
                         color: #e58881;
                     }
+
+                    .dashed_line {
+                        transform: rotate(180deg);
+                        top: -113px;
+                        left: 20px;
+                        width: 12.4px;
+                    }
                 }
             }
         }
diff --git a/frontend/src/components/ProcessView/index.vue b/frontend/src/components/ProcessView/index.vue
index c42e330..74d6ade 100644
--- a/frontend/src/components/ProcessView/index.vue
+++ b/frontend/src/components/ProcessView/index.vue
@@ -2,11 +2,22 @@
   <div class="process_box" v-show="isCollapse">
     <div class="body-box">
       <div class="out_list">
-        <div class="out_item" v-for="(item,index) in outList" :key="index">
+        <div class="out_item" v-for="(item, index) in outList" :key="index">
           <div class="item_text" v-if="index">
-            <img :src="item.url" alt="" />
+            <img class="item_round" :src="item.url" alt="" />
             <p>{{ item.goup }}</p>
             <span>{{ item.content }}</span>
+            <div class="dashed_line"></div>
+          </div>
+          <div class="centent_box" v-else>
+            <div class="item_text">
+              <img class="item_round" :src="item.url" alt="" />
+              <p>{{ item.goup }}</p>
+              <span>{{ item.content }}</span>
+            </div>
+            <div class="" v-for="(key,num) in centerList" :key="num">
+              <img :src="key" alt="">
+            </div>
           </div>
         </div>
       </div>
@@ -25,28 +36,35 @@ const isCollapse = ref<boolean>(true);
 const outList = ref<Array<any>>([
   {
     url: oneRound,
-    goup: 'G1',
-    content: 'ORCHESTRATOR'
+    goup: "G1",
+    content: "ORCHESTRATOR",
   },
   {
     url: twoRound,
-    goup: 'G2',
-    content: 'SCIENTIST'
+    goup: "G2",
+    content: "SCIENTIST",
   },
   {
     url: threeRound,
-    goup: 'G3',
-    content: 'ENGINEER'
+    goup: "G3",
+    content: "ENGINEER",
   },
   {
     url: fourRound,
-    goup: 'G4',
-    content: 'EXECUTOR'
+    goup: "G4",
+    content: "EXECUTOR",
   },
   {
     url: fiveRound,
-    goup: 'G5',
-    content: 'ANALYST'
+    goup: "G5",
+    content: "ANALYST",
+  },
+]);
+const centerList = ref<Array<any>>([
+  {
+    url: oneRound,
+    getter: "Admin",
+    typeText: "Handoff",
   },
 ]);
 </script>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d3633a7
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "matagent",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}