diff --git a/pom.xml b/pom.xml
index 6ef536d..a20ce24 100644
--- a/pom.xml
+++ b/pom.xml
@@ -10,7 +10,7 @@
     </parent>
     <groupId>cn.typesafe</groupId>
     <artifactId>kafka-map</artifactId>
-    <version>0.2.0</version>
+    <version>0.3.0</version>
     <name>kafka-map</name>
     <description>a simple kafka manager</description>
     <properties>
diff --git a/web/package.json b/web/package.json
index b730411..3e24426 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kafka-map",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
diff --git a/web/src/components/ConsumerGroup.js b/web/src/components/ConsumerGroup.js
index a3bc658..97da972 100644
--- a/web/src/components/ConsumerGroup.js
+++ b/web/src/components/ConsumerGroup.js
@@ -74,9 +74,6 @@ class ConsumerGroup extends Component {
         } catch (e) {
             console.log(e);
         } finally {
-            items = items.map(item => {
-                return {'key': item['id'], ...item}
-            })
             this.setState({
                 items: items,
                 queryParams: queryParams,
@@ -111,14 +108,14 @@ class ConsumerGroup extends Component {
     render() {
 
         const columns = [{
-                title: <FormattedMessage id="index" />,
+                title: <FormattedMessage id="index"/>,
                 dataIndex: 'id',
                 key: 'id',
                 render: (id, record, index) => {
                     return index + 1;
                 }
             }, {
-                title: <FormattedMessage id="name" />,
+                title: <FormattedMessage id="name"/>,
                 dataIndex: 'groupId',
                 key: 'groupId',
                 defaultSortOrder: 'ascend',
@@ -130,7 +127,7 @@ class ConsumerGroup extends Component {
                     </Link>
                 }
             }, {
-                title: <FormattedMessage id="topic-count" />,
+                title: <FormattedMessage id="topic-count"/>,
                 dataIndex: 'topicCount',
                 key: 'topicCount',
                 sorter: (a, b) => a['topics'].length - b['topics'].length,
@@ -142,24 +139,25 @@ class ConsumerGroup extends Component {
                             to={`/topic-info?clusterId=${this.state.clusterId}&topic=${item}`}>{item}</Link></List.Item>}
                     />
 
-                    return <Popover content={content} title={<FormattedMessage id="topic-list" />}>
+                    return <Popover content={content} title={<FormattedMessage id="topic-list"/>}>
                         <Button type="link" size='small'>{record['topics'].length}</Button>
                     </Popover>
                 }
 
             },
                 {
-                    title: <FormattedMessage id="operate" />,
+                    title: <FormattedMessage id="operate"/>,
                     key: 'action',
                     render: (text, record, index) => {
                         return (
                             <div>
                                 <Popconfirm
-                                    title={<FormattedMessage id="delete-confirm" />}
+                                    title={<FormattedMessage id="delete-confirm"/>}
                                     onConfirm={() => this.delete(record['groupId'], index)}
                                 >
                                     <Button type="text" size='small' danger
-                                            loading={this.state.items[index]['deleting']}><FormattedMessage id="delete" /></Button>
+                                            loading={this.state.items[index]['deleting']}><FormattedMessage
+                                        id="delete"/></Button>
                                 </Popconfirm>
 
 
@@ -178,7 +176,7 @@ class ConsumerGroup extends Component {
                         onBack={() => {
                             this.props.history.goBack();
                         }}
-                        subTitle={<FormattedMessage id="consumer-group-management" />}
+                        subTitle={<FormattedMessage id="consumer-group-management"/>}
                         title={this.state.clusterName}
                     />
                 </div>
@@ -197,7 +195,7 @@ class ConsumerGroup extends Component {
                                         allowClear
                                         onSearch={this.handleSearchByName}
                                     />
-                                    <Tooltip title={<FormattedMessage id="reset" />}>
+                                    <Tooltip title={<FormattedMessage id="reset"/>}>
 
                                         <Button icon={<UndoOutlined/>} onClick={() => {
                                             this.inputRefOfName.current.setValue('');
@@ -214,7 +212,7 @@ class ConsumerGroup extends Component {
 
                                     <Divider type="vertical"/>
 
-                                    <Tooltip title={<FormattedMessage id="refresh" />}>
+                                    <Tooltip title={<FormattedMessage id="refresh"/>}>
                                         <Button icon={<SyncOutlined/>} onClick={() => {
                                             this.loadTableData(this.state.queryParams)
                                         }}>
@@ -227,7 +225,7 @@ class ConsumerGroup extends Component {
                     </div>
 
                     <Table
-                        rowKey='id'
+                        rowKey='groupId'
                         dataSource={this.state.items}
                         columns={columns}
                         position={'both'}
diff --git a/web/src/components/Topic.js b/web/src/components/Topic.js
index a688829..1d0478d 100644
--- a/web/src/components/Topic.js
+++ b/web/src/components/Topic.js
@@ -84,9 +84,6 @@ class Topic extends Component {
         } catch (e) {
             console.log(e);
         } finally {
-            items = items.map(item => {
-                return {'key': item['id'], ...item}
-            })
             this.setState({
                 items: items,
                 queryParams: queryParams,
@@ -314,7 +311,7 @@ class Topic extends Component {
                     </div>
 
                     <Table
-                        rowKey='id'
+                        rowKey='name'
                         dataSource={this.state.items}
                         columns={columns}
                         position={'both'}
diff --git a/web/src/components/TopicInfo.js b/web/src/components/TopicInfo.js
index a1b03bb..67247dd 100644
--- a/web/src/components/TopicInfo.js
+++ b/web/src/components/TopicInfo.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Button, PageHeader, Statistic, Tabs, Row, Space, message, notification} from "antd";
+import {Button, PageHeader, Statistic, Tabs, Row, Space, notification} from "antd";
 import TopicPartition from "./TopicPartition";
 import TopicBroker from "./TopicBroker";
 import TopicConsumerGroup from "./TopicConsumerGroup";
@@ -8,7 +8,6 @@ import request from "../common/request";
 import {renderSize} from "../utils/utils";
 import TopicConfig from "./TopicConfig";
 import {FormattedMessage} from "react-intl";
-import ClusterModal from "./ClusterModal";
 import SendMessageModal from "./SendMessageModal";
 
 const {TabPane} = Tabs;
@@ -71,12 +70,12 @@ class TopicInfo extends Component {
                         subTitle={<FormattedMessage id="topic-detail"/>}
                         title={this.state.topic}
                         extra={[
-                            <Button key="2" onClick={() => {
+                            <Button key="btn-1" onClick={() => {
                                 this.setState({
                                     modalVisible: true
                                 })
                             }}><FormattedMessage id="produce-message"/></Button>,
-                            <Link to={`/topic-data?clusterId=${this.state.clusterId}&topic=${this.state.topic}`}>
+                            <Link key={'link-2'} to={`/topic-data?clusterId=${this.state.clusterId}&topic=${this.state.topic}`}>
                                 <Button key="btn-consume-message" type="primary">
                                     <FormattedMessage id="consume-message"/>
                                 </Button>
diff --git a/web/src/components/TopicPartition.js b/web/src/components/TopicPartition.js
index c078df6..e4ea9e8 100644
--- a/web/src/components/TopicPartition.js
+++ b/web/src/components/TopicPartition.js
@@ -41,8 +41,8 @@ class TopicPartition extends Component {
             defaultSortOrder: 'ascend',
             render: (leader, record, index) => {
 
-                return <Tooltip title={leader['host'] + ":" + leader['port']}>
-                    <Button size='small'>{leader['id']}</Button>
+                return <Tooltip key={'leader-' + leader['host']} title={leader['host'] + ":" + leader['port']}>
+                    <Button key={leader['host']} size='small'>{leader['id']}</Button>
                 </Tooltip>
             }
         }, {
@@ -78,7 +78,8 @@ class TopicPartition extends Component {
                         if (item['logSize'] > 0) {
                             logSize = renderSize(item['logSize']);
                         }
-                        return <Tooltip title={item['host'] + ":" + item['port'] + ' ' + logSize}>
+                        return <Tooltip key={'replicas-' + item['host']}
+                                        title={item['host'] + ":" + item['port'] + ' ' + logSize}>
                             <Button size='small'>{item['id']}</Button>
                         </Tooltip>
                     })}
@@ -91,7 +92,8 @@ class TopicPartition extends Component {
             render: (isr, record, index) => {
                 return <Space>
                     {isr.map(item => {
-                        return <Tooltip title={item['host'] + ":" + item['port']}>
+                        return <Tooltip key={'isr-' + item['host']}
+                                        title={item['host'] + ":" + item['port']}>
                             <Button size='small'>{item['id']}</Button>
                         </Tooltip>
                     })}
@@ -109,7 +111,7 @@ class TopicPartition extends Component {
         return (
             <div>
                 <Table
-                    rowKey='id'
+                    rowKey='partition'
                     dataSource={this.state.items}
                     columns={columns}
                     position={'both'}