diff --git a/src/main/java/com/xuxd/kafka/console/controller/TopicController.java b/src/main/java/com/xuxd/kafka/console/controller/TopicController.java
index 84031c1..5a9f8b1 100644
--- a/src/main/java/com/xuxd/kafka/console/controller/TopicController.java
+++ b/src/main/java/com/xuxd/kafka/console/controller/TopicController.java
@@ -1,5 +1,6 @@
 package com.xuxd.kafka.console.controller;
 
+import com.xuxd.kafka.console.beans.ReplicaAssignment;
 import com.xuxd.kafka.console.beans.dto.AddPartitionDTO;
 import com.xuxd.kafka.console.beans.dto.NewTopicDTO;
 import com.xuxd.kafka.console.beans.enums.TopicType;
@@ -71,8 +72,14 @@ public class TopicController {
 
         return topicService.addPartitions(topic, addNum, assignment);
     }
+
     @GetMapping("/replica/assignment")
     public Object getCurrentReplicaAssignment(@RequestParam String topic) {
         return topicService.getCurrentReplicaAssignment(topic);
     }
+
+    @PostMapping("/replica/assignment")
+    public Object updateReplicaAssignment(@RequestBody ReplicaAssignment assignment) {
+        return "topicService.getCurrentReplicaAssignment(topic)";
+    }
 }
diff --git a/ui/src/utils/api.js b/ui/src/utils/api.js
index a4e47e3..5dffc44 100644
--- a/ui/src/utils/api.js
+++ b/ui/src/utils/api.js
@@ -121,6 +121,10 @@ export const KafkaTopicApi = {
     url: "/topic/replica/assignment",
     method: "get",
   },
+  updateReplicaAssignment: {
+    url: "/topic/replica/assignment",
+    method: "post",
+  },
 };
 
 export const KafkaConsumerApi = {
diff --git a/ui/src/views/topic/UpdateReplica.vue b/ui/src/views/topic/UpdateReplica.vue
index 6126cd6..5dca88f 100644
--- a/ui/src/views/topic/UpdateReplica.vue
+++ b/ui/src/views/topic/UpdateReplica.vue
@@ -5,17 +5,29 @@
     :width="1200"
     :mask="false"
     :destroyOnClose="true"
-    :footer="null"
     :maskClosable="false"
     @cancel="handleCancel"
+    okText="确认"
+    cancelText="取消"
+    @ok="handleOk"
   >
     <div>
       <a-spin :spinning="loading">
+        <div class="replica-box">
+          <label>副本数：</label
+          ><a-input-number
+            id="inputNumber"
+            v-model="replicaNums"
+            :min="1"
+            :max="brokerSize"
+            @change="onChange"
+          />
+        </div>
         <a-table
-            :columns="columns"
-            :data-source="data.partitions"
-            bordered
-            :rowKey="
+          :columns="columns"
+          :data-source="data.partitions"
+          bordered
+          :rowKey="
             (record, index) => {
               return index;
             }
@@ -23,13 +35,10 @@
         >
           <div slot="replicas" slot-scope="text">
             <span v-for="i in text" :key="i">
-              {{
-                i
-              }}
+              {{ i }}
             </span>
           </div>
         </a-table>
-
       </a-spin>
     </div>
   </a-modal>
@@ -37,7 +46,7 @@
 
 <script>
 import request from "@/utils/request";
-import { KafkaTopicApi } from "@/utils/api";
+import { KafkaClusterApi, KafkaTopicApi } from "@/utils/api";
 import notification from "ant-design-vue/lib/notification";
 
 export default {
@@ -59,12 +68,16 @@ export default {
       data: {},
       loading: false,
       form: this.$form.createForm(this, { name: "coordinated" }),
+      brokerSize: 0,
+      replicaNums: 0,
+      defaultReplicaNums: 0,
     };
   },
   watch: {
     visible(v) {
       this.show = v;
       if (this.show) {
+        this.getClusterInfo();
         this.getCurrentReplicaAssignment();
       }
     },
@@ -82,6 +95,10 @@ export default {
         this.loading = false;
         if (res.code == 0) {
           this.data = res.data;
+          if (this.data.partitions.length > 0) {
+            this.replicaNums = this.data.partitions[0].replicas.length;
+            this.defaultReplicaNums = this.replicaNums;
+          }
         } else {
           notification.error({
             message: "error",
@@ -90,14 +107,55 @@ export default {
         }
       });
     },
+    getClusterInfo() {
+      this.loading = true;
+      request({
+        url: KafkaClusterApi.getClusterInfo.url,
+        method: KafkaClusterApi.getClusterInfo.method,
+      }).then((res) => {
+        this.brokerSize = res.data.nodes.length;
+      });
+    },
     handleCancel() {
-      this.data = [];
+      this.data = {};
       this.$emit("closeUpdateReplicaDialog", { refresh: false });
     },
+    onChange(value) {
+      if (this.data.partitions.length > 0) {
+        this.data.partitions.forEach((p) => {
+          if (value > p.replicas.length) {
+            let num = p.replicas[p.replicas.length - 1];
+            for (let i = p.replicas.length; i < value; i++) {
+              p.replicas.push(++num % this.brokerSize);
+            }
+          }
+          if (value < p.replicas.length) {
+            p.replicas.pop();
+          }
+        });
+      }
+    },
+    handleOk() {
+      this.loading = true;
+      request({
+        url: KafkaTopicApi.updateReplicaAssignment.url,
+        method: KafkaTopicApi.updateReplicaAssignment.method,
+        data: this.data,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
   },
 };
 
-
 const columns = [
   {
     title: "Topic",
@@ -118,4 +176,8 @@ const columns = [
 ];
 </script>
 
-<style scoped></style>
+<style scoped>
+.replica-box {
+  margin-bottom: 1%;
+}
+</style>