diff --git a/pom.xml b/pom.xml
index c66e164..d19b5e3 100644
--- a/pom.xml
+++ b/pom.xml
@@ -83,6 +83,12 @@
             <version>3.12.0</version>
         </dependency>
 
+        <dependency>
+            <groupId>commons-collections</groupId>
+            <artifactId>commons-collections</artifactId>
+            <version>3.2.2</version>
+        </dependency>
+
         <dependency>
             <groupId>com.google.guava</groupId>
             <artifactId>guava</artifactId>
diff --git a/src/main/java/com/xuxd/kafka/console/beans/dto/QueryConsumerGroupDTO.java b/src/main/java/com/xuxd/kafka/console/beans/dto/QueryConsumerGroupDTO.java
new file mode 100644
index 0000000..2d4180f
--- /dev/null
+++ b/src/main/java/com/xuxd/kafka/console/beans/dto/QueryConsumerGroupDTO.java
@@ -0,0 +1,18 @@
+package com.xuxd.kafka.console.beans.dto;
+
+import java.util.List;
+import lombok.Data;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2021-09-11 11:26:47
+ **/
+@Data
+public class QueryConsumerGroupDTO {
+
+    private String groupId;
+
+    private List<String> State;
+}
diff --git a/src/main/java/com/xuxd/kafka/console/controller/ConsumerController.java b/src/main/java/com/xuxd/kafka/console/controller/ConsumerController.java
new file mode 100644
index 0000000..1103c3f
--- /dev/null
+++ b/src/main/java/com/xuxd/kafka/console/controller/ConsumerController.java
@@ -0,0 +1,45 @@
+package com.xuxd.kafka.console.controller;
+
+import com.xuxd.kafka.console.beans.dto.QueryConsumerGroupDTO;
+import com.xuxd.kafka.console.service.ConsumerService;
+import java.util.Collections;
+import java.util.HashSet;
+import java.util.List;
+import java.util.Objects;
+import java.util.Set;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.kafka.common.ConsumerGroupState;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * kafka-console-ui.
+ *
+ * @author xuxd
+ * @date 2021-09-11 11:16:09
+ **/
+@RestController
+@RequestMapping("/consumer")
+public class ConsumerController {
+
+    @Autowired
+    private ConsumerService consumerService;
+
+    @GetMapping("/group/list")
+    public Object getGroupList(@RequestBody(required = false) QueryConsumerGroupDTO dto) {
+        if (Objects.isNull(dto)) {
+            return consumerService.getConsumerGroupList(null, null);
+        }
+        List<String> groupIdList = StringUtils.isNotBlank(dto.getGroupId()) ? Collections.singletonList(dto.getGroupId()) : Collections.emptyList();
+
+        Set<ConsumerGroupState> stateSet = new HashSet<>();
+        if (CollectionUtils.isNotEmpty(dto.getState())) {
+            dto.getState().stream().forEach(s -> stateSet.add(ConsumerGroupState.valueOf(s)));
+        }
+        return consumerService.getConsumerGroupList(groupIdList, stateSet);
+    }
+}
diff --git a/ui/src/utils/api.js b/ui/src/utils/api.js
index a356f86..ad0f25f 100644
--- a/ui/src/utils/api.js
+++ b/ui/src/utils/api.js
@@ -66,3 +66,10 @@ export const KafkaTopicApi = {
     method: "delete",
   },
 };
+
+export const KafkaConsumerApi = {
+  getConsumerGroupList: {
+    url: "/consumer/group/list",
+    method: "get",
+  },
+};
diff --git a/ui/src/views/group/Group.vue b/ui/src/views/group/Group.vue
index aa5366b..14233d9 100644
--- a/ui/src/views/group/Group.vue
+++ b/ui/src/views/group/Group.vue
@@ -1,17 +1,227 @@
 <template>
-  <div>
-    <HelloWorld msg="This is group console."></HelloWorld>
+  <div class="content">
+    <div class="topic">
+      <div id="form-consumer-group-advanced-search">
+        <a-form
+          class="ant-advanced-search-form"
+          :form="form"
+          @submit="handleSearch"
+        >
+          <a-row :gutter="24">
+            <a-col :span="8">
+              <a-form-item :label="`topic`">
+                <a-input
+                  placeholder="topic"
+                  class="input-w"
+                  v-decorator="['topic']"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item :label="`类型`">
+                <a-select
+                  class="type-select"
+                  v-decorator="['type', { initialValue: 'all' }]"
+                  placeholder="Please select a country"
+                >
+                  <a-select-option value="all"> 所有 </a-select-option>
+                  <a-select-option value="normal"> 普通 </a-select-option>
+                  <a-select-option value="system"> 系统 </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="8" :style="{ textAlign: 'right' }">
+              <a-form-item>
+                <a-button type="primary" html-type="submit"> 搜索</a-button>
+                <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+                  重置
+                </a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="operation-row-button">
+        <a-button type="primary" @click="handleReset">新增/更新</a-button>
+      </div>
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        bordered
+        row-key="groupId"
+      >
+        <div slot="members" slot-scope="text">
+          <a href="#">{{ text }} </a>
+        </div>
+
+        <div slot="state" slot-scope="text">
+          {{ text }}
+          <!--          <span v-if="text" style="color: red">是</span><span v-else>否</span>-->
+        </div>
+
+        <div slot="operation" slot-scope="record" v-show="!record.internal">
+          <a-popconfirm
+            :title="'删除消费组: ' + record.groupId + '？'"
+            ok-text="确认"
+            cancel-text="取消"
+            @confirm="deleteTopic(record.groupId)"
+          >
+            <a-button size="small" href="javascript:;" class="operation-btn"
+              >删除</a-button
+            >
+          </a-popconfirm>
+        </div>
+      </a-table>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from "@/components/HelloWorld.vue";
+import request from "@/utils/request";
+import { KafkaTopicApi, KafkaConsumerApi } from "@/utils/api";
+import notification from "ant-design-vue/es/notification";
 export default {
-  name: "Group",
-  components: {
-    HelloWorld,
+  name: "ConsumerGroup",
+  components: {},
+  data() {
+    return {
+      queryParam: { type: "all" },
+      data: [],
+      columns,
+      selectRow: {},
+      form: this.$form.createForm(this, { name: "topic_advanced_search" }),
+      showUpdateUser: false,
+      deleteUserConfirm: false,
+      selectDetail: {
+        resourceName: "",
+        resourceType: "",
+        username: "",
+      },
+    };
+  },
+  methods: {
+    handleSearch(e) {
+      e.preventDefault();
+      this.getConsumerGroupList();
+    },
+
+    handleReset() {
+      this.form.resetFields();
+    },
+
+    getConsumerGroupList() {
+      // Object.assign(this.queryParam, this.form.getFieldsValue());
+      request({
+        url: KafkaConsumerApi.getConsumerGroupList.url,
+        method: KafkaConsumerApi.getConsumerGroupList.method,
+        params: this.queryParam,
+      }).then((res) => {
+        this.data = res.data.list;
+      });
+    },
+    deleteTopic(topic) {
+      request({
+        url: KafkaTopicApi.deleteTopic.url + "?topic=" + topic,
+        method: KafkaTopicApi.deleteTopic.method,
+      }).then((res) => {
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.getConsumerGroupList();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.getConsumerGroupList();
   },
 };
+
+const columns = [
+  {
+    title: "消费组",
+    dataIndex: "groupId",
+    key: "groupId",
+    width: 300,
+  },
+  {
+    title: "消费端数量",
+    dataIndex: "members",
+    key: "members",
+    slots: { title: "members" },
+    scopedSlots: { customRender: "members" },
+  },
+  {
+    title: "当前状态",
+    dataIndex: "state",
+    key: "state",
+    slots: { title: "state" },
+    scopedSlots: { customRender: "state" },
+  },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+    width: 500,
+  },
+];
 </script>
 
-<style scoped></style>
+<style scoped>
+.topic {
+  width: 100%;
+  height: 100%;
+}
+
+.ant-advanced-search-form {
+  padding: 24px;
+  background: #fbfbfb;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+.ant-advanced-search-form .ant-form-item {
+  display: flex;
+}
+
+.ant-advanced-search-form .ant-form-item-control-wrapper {
+  flex: 1;
+}
+
+#form-consumer-group-advanced-search .ant-form {
+  max-width: none;
+  margin-bottom: 1%;
+}
+
+#form-consumer-group-advanced-search .search-result-list {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+.input-w {
+  width: 400px;
+}
+
+.operation-row-button {
+  height: 4%;
+  text-align: left;
+}
+
+.operation-btn {
+  margin-right: 3%;
+}
+
+.type-select {
+  width: 200px !important;
+}
+</style>