diff --git a/src/app.css b/src/app.css
index dfaad79..a2b2ea6 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,11 +19,10 @@
   border-bottom: 1px solid #e7eaec;
   border-radius: 12px 12px 0 0;
 }
-
-.plugin-map-dialog-en .full-screen-active {
-  background-color: #e0e0e0;
-  border-radius: 2px;
-  color: #404040;
+.full-screen-active {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  border-radius: 4px;
+  color: #666;
 }
 
 .plugin-map-dialog-en .dtable-map-plugin-title .modal-title {
@@ -63,14 +62,14 @@
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: #000;
-  opacity: .5;
+  color: #666;
   text-align: center;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .plugin-map-dialog-en .dtable-map-plugin-title .map-operator:hover {
-  opacity: .75;
+  background-color: rgba(0, 0, 0, 0.04) !important;
 }
 
 .plugin-map-dialog-en .btn-margin-right {
diff --git a/src/components/dialog/new-view-dialog.js b/src/components/dialog/new-view-dialog.js
index 5b1446e..a3817f2 100644
--- a/src/components/dialog/new-view-dialog.js
+++ b/src/components/dialog/new-view-dialog.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
 import intl from 'react-intl-universal';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 const propTypes = {
   onNewViewConfirm: PropTypes.func,
@@ -44,7 +45,7 @@ class NewViewDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{intl.get('New_view')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('New_view')}</DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/src/components/dialog/rename-view-dialog.js b/src/components/dialog/rename-view-dialog.js
index 627267b..f9894dc 100644
--- a/src/components/dialog/rename-view-dialog.js
+++ b/src/components/dialog/rename-view-dialog.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import { Modal, ModalBody, ModalHeader, ModalFooter, Form, FormGroup, Label, Input, Button, Alert } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert, Button } from 'reactstrap';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
+import { DTableModalHeader } from 'dtable-ui-component';
 
 const propTypes = {
   viewName: PropTypes.string,
@@ -54,7 +55,7 @@ class RenameViewDialog extends Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle} autoFocus={false}>
-        <ModalHeader toggle={this.toggle}>{intl.get('Rename_view')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('Rename_view')}</DTableModalHeader>
         <ModalBody>
           <Form>
             <FormGroup>
diff --git a/src/components/location-settings.js b/src/components/location-settings.js
index cf063bb..05d8428 100644
--- a/src/components/location-settings.js
+++ b/src/components/location-settings.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import LocationSettingsItem from './local-settings-widgets/location-settings-item';
 import intl from 'react-intl-universal';
 import { getTableByName, getViewByName, getViewShownColumns } from 'dtable-utils';
-import { FieldDisplaySetting, DTableSwitch } from 'dtable-ui-component';
+import { FieldDisplaySetting, DTableSwitch, IconButton } from 'dtable-ui-component';
 import { MAP_MODE, SETTING_TITLE } from '../constants.js';
 import getConfigItemByType from '../utils/get-config-item-by-type';
 
@@ -123,7 +123,7 @@ class LocationSettings extends Component {
         <div className="dtable-plugin-location-settings-header">
           <div className="location-settings-header-container align-items-center">
             <h3 className="m-0 setting-header-title h5">{intl.get('Settings')}</h3>
-            <i className="dtable-font dtable-icon-x" onClick={onHideMapSettings}></i>
+            <IconButton icon='x'title={intl.get('Close')} onClick={onHideMapSettings}/>
           </div>
         </div>
         <div className="dtable-plugin-location-settings-parameter">
diff --git a/src/components/view-tabs.js b/src/components/view-tabs.js
index 8dd2c8e..45996de 100644
--- a/src/components/view-tabs.js
+++ b/src/components/view-tabs.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ModalPortal } from 'dtable-ui-component';
+import { ModalPortal, IconButton } from 'dtable-ui-component';
 import NewViewDialog from './dialog/new-view-dialog';
 import RenameViewDialog from './dialog/rename-view-dialog';
 import DropdownMenu from './dropdownmenu';
@@ -383,8 +383,13 @@ class ViewTabs extends Component {
             </span>
           </div>
         }
-        <div className={tabStyles['btn-add-view']} key={'btn-add-view'} onClick={this.onNewViewToggle}>
-          <i className={`${tabStyles['add-map-view-icon']} dtable-font dtable-icon-add-table`}></i>
+        <div className={tabStyles['btn-add-view']} key={'btn-add-view'}>
+          <IconButton
+            icon='add-table'
+            title={intl.get('New_view')}
+            onClick={this.onNewViewToggle}
+            className="mt-5"
+          />
         </div>
         {isShowNewViewDialog &&
           <NewViewDialog
diff --git a/src/css/view-tabs.module.css b/src/css/view-tabs.module.css
index 517c923..9498f76 100644
--- a/src/css/view-tabs.module.css
+++ b/src/css/view-tabs.module.css
@@ -108,7 +108,7 @@
   display: flex;
   align-items: center;
   width: 24px;
-  height: 100%; 
+  height: 24px; 
 }
 
 .add-map-view-icon {
@@ -117,15 +117,15 @@
   margin-left: 4px;
   text-align: center;
   cursor: pointer;
-  color: #000;
-  opacity: .5;
-  font-size: 14px;
-  font-weight: 500;
+  color: #666;
+  font-size: 16px;
+  font-weight: normal;
   line-height: 24px;
+  border-radius: 4px;
 }
 
 .add-map-view-icon:hover {
-  opacity: .75;
+  background-color: rgba(0, 0, 0, 0.04) !important;
 }
 
 .view-item .view-item-content:hover {
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 4ee4bf6..f2d937c 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -32,8 +32,11 @@ const en = {
   "Back": "Back",
   "Total_records": "Total records",
   "Exceeded_the_free_locations_limit": "You've exceeded the limit of 100 locations. Please upgrade to a paid plan.",
-  "Exceeded_the_max_locations_limit": "You've exceeded the limit of 5000 locations"
+  "Exceeded_the_max_locations_limit": "You've exceeded the limit of 5000 locations",
+  "Close": "Close",
+  "Download": "Download",
+  "Full_screen": "Full Screen"
 }
-;
+  ;
 
-export default en;
\ No newline at end of file
+export default en;
diff --git a/src/locale/lang/zh_CN.js b/src/locale/lang/zh_CN.js
index 136ea00..17748f2 100644
--- a/src/locale/lang/zh_CN.js
+++ b/src/locale/lang/zh_CN.js
@@ -32,8 +32,11 @@ const zh_CN = {
   "Back": "返回",
   "Total_records": "总行数",
   "Exceeded_the_free_locations_limit": "地理位置超过 100 个限制，请升级到付费版本。",
-  "Exceeded_the_max_locations_limit": "地理位置超过 5000 个限制"
+  "Exceeded_the_max_locations_limit": "地理位置超过 5000 个限制",
+  "Close": "关闭",
+  "Download": "下载",
+  "Full_screen": "全屏"
 }
-;
+  ;
 
-export default zh_CN;
\ No newline at end of file
+export default zh_CN;
diff --git a/src/views/map.js b/src/views/map.js
index 9e65d82..113fee4 100644
--- a/src/views/map.js
+++ b/src/views/map.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import intl from 'react-intl-universal';
-import { toaster } from 'dtable-ui-component';
+import { toaster, IconButton } from 'dtable-ui-component';
 import pluginContext from '../plugin-context';
 import LocationSettings from '../components/location-settings';
 import Loading from '../components/loading';
@@ -445,10 +445,30 @@ class App extends React.Component {
             />
           </div>
           <div className="map-operators">
-            <span className="map-operator dtable-font dtable-icon-download btn-margin-right" onClick={onCapture}></span>
-            <span className={`map-operator dtable-font dtable-icon-full-screen btn-margin-right ${isFullScreen ? 'full-screen-active' : ''}`} onClick={this.toggleFullScreen}></span>
-            <span className="map-operator dtable-font dtable-icon-set-up btn-margin-right" onClick={this.toggleSettingDialog}></span>
-            <span className="map-operator dtable-font dtable-icon-x btn-margin-right" onClick={this.toggle}></span>
+            <IconButton
+              icon='download'
+              title={intl.get('Download')}
+              onClick={onCapture}
+              className="btn-margin-right"
+            />
+            <IconButton
+              icon='full-screen'
+              title={intl.get('Full_screen')}
+              onClick={this.toggleFullScreen}
+              className={`btn-margin-right  ${isFullScreen ? 'full-screen-active' : ''}`}
+            />
+            <IconButton
+              icon='set-up'
+              title={intl.get('Settings')}
+              onClick={this.toggleSettingDialog}
+              className="btn-margin-right"
+            />
+            <IconButton
+              icon='x'
+              title={intl.get('Close')}
+              onClick={this.toggle}
+              className="btn-margin-right"
+            />
           </div>
         </div>
         <div className={'flex-fill map-plugin-modal-body ' + (isFullScreen ? 'map-plugin-modal-body-full-screen' : '')}>