diff --git a/src/app.css b/src/app.css
index dfaad79..28774a2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,9 +21,9 @@
 }
 
 .plugin-map-dialog-en .full-screen-active {
-  background-color: #e0e0e0;
+  background-color: rgba(0,0,0,.04);
   border-radius: 2px;
-  color: #404040;
+  color: #404040 !important;
 }
 
 .plugin-map-dialog-en .dtable-map-plugin-title .modal-title {
@@ -63,14 +63,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,.04);
 }
 
 .plugin-map-dialog-en .btn-margin-right {
@@ -119,19 +119,6 @@
   border-bottom: 1px solid #e4e4e4;
 }
 
-.plugin-map-dialog-en .dtable-icon-x {
-  font-weight: 700;
-}
-
-.plugin-map-dialog-en .dtable-plugin-location-settings-header .dtable-icon-x:hover {
-  opacity: .8;
-}
-
-.plugin-map-dialog-en .location-settings-header-container .dtable-font {
-  color: #000;
-  opacity: 0.5;
-}
-
 .plugin-map-dialog-en .setting-header-title {
   font-weight: 600;
 }
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..9eecb6f 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, Button, Alert } 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/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js b/src/components/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js
index b7f1075..d0a12d8 100644
--- a/src/components/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js
+++ b/src/components/formatter/enlarge-formatter-widgets/file-enlarge-formatter.js
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import { Modal, ModalBody } from 'reactstrap';
 import intl from 'react-intl-universal';
 import PropTypes from 'prop-types';
-import { FileItemFormatter, ModalHeader } from 'dtable-ui-component';
+import { FileItemFormatter, DTableModalHeader } from 'dtable-ui-component';
+
 import { bytesToSize } from '../../../utils/common-utils';
 
 import '../../../assets/css/file-enlarge-formatter.css';
@@ -25,7 +26,7 @@ class FileEnlargeFormatter extends Component {
 
     return (
       <Modal isOpen={true} toggle={this.toggle} className="file-enlarge-formatter-dialog">
-        <ModalHeader toggle={this.toggle}>{intl.get('All_files')}</ModalHeader>
+        <DTableModalHeader toggle={this.toggle}>{intl.get('All_files')}</DTableModalHeader>
         <ModalBody style={{ padding: 0 }} className="file-enlarge-formatter-body">
           {Array.isArray(value) && value.length > 0 && value.map((item, index) => {
             const { url, type, size, name } = item;
@@ -46,7 +47,7 @@ class FileEnlargeFormatter extends Component {
                   }
                 </div>
                 {(type === 'file' && url.indexOf('seafile-connector') === -1) && (
-                  <div className="enlarge-file-item-operation" onClick={(event) => this.downloadFile(event, url)}>
+                  <div className="enlarge-file-item-operation seatable-icon-btn" onClick={(event) => this.downloadFile(event, url)}>
                     <i className="dtable-font dtable-icon-download file-download-icon"></i>
                   </div>
                 )}
diff --git a/src/components/location-detail-list.js b/src/components/location-detail-list.js
index b27fe4d..6263e5b 100644
--- a/src/components/location-detail-list.js
+++ b/src/components/location-detail-list.js
@@ -131,7 +131,9 @@ class LocationDetailList extends React.Component {
             <span className="location-detail-address" title={address}>{address}</span>
             <span className="locatuon-detail-records">{(rows.length + ' ' + intl.get('Records'))}</span>
           </div>
-          <i className={`dtable-font dtable-icon-${isWillHide ? 'up' : 'down'} change-detail-height`} onClick={this.onChangeDeitailHeight}></i>
+          <span className='seatable-icon-btn'>
+            <i className={`dtable-font dtable-icon-${isWillHide ? 'up' : 'down'} change-detail-height`} onClick={this.onChangeDeitailHeight}/>
+          </span>
         </div>
         <div className={classnames(
           'location-detail-container',
diff --git a/src/components/location-settings.js b/src/components/location-settings.js
index cf063bb..a91caba 100644
--- a/src/components/location-settings.js
+++ b/src/components/location-settings.js
@@ -123,7 +123,9 @@ 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>
+            <span className='seatable-icon-btn'>
+              <i className="dtable-font dtable-icon-x" onClick={onHideMapSettings}/>
+            </span>
           </div>
         </div>
         <div className="dtable-plugin-location-settings-parameter">
diff --git a/src/components/mobile/mobile-select-option.js b/src/components/mobile/mobile-select-option.js
index 323c3ed..c4562bc 100644
--- a/src/components/mobile/mobile-select-option.js
+++ b/src/components/mobile/mobile-select-option.js
@@ -57,7 +57,7 @@ class MobileSelectOption extends Component {
     return (
       <div className={styles['setting']}>
         <div className={styles['dtable-map-plugin-title']}>
-          <span onClick={hideSelectConfig} className={styles['dtable-map-plugin-header-btn']}><i className='dtable-font dtable-icon-return'></i></span>
+          <span onClick={hideSelectConfig} className={`seatable-icon-btn ${styles['dtable-map-plugin-header-btn']}`}><i className='dtable-font dtable-icon-return'></i></span>
           <h4 className={styles['dtable-map-plugin-header-title']}>{selectedConfig.name}</h4>
           <span className={`${styles['dtable-map-plugin-header-btn-highlight']} ${styles['dtable-map-plugin-header-btn']}`}></span>
         </div>
diff --git a/src/components/view-tabs.js b/src/components/view-tabs.js
index b90e9eb..40aa7e8 100644
--- a/src/components/view-tabs.js
+++ b/src/components/view-tabs.js
@@ -360,20 +360,20 @@ class ViewTabs extends Component {
           {this.renderTabs()}
         </div>
         {(!isMobile && (canScrollPrev || canScrollNext)) &&
-          <div className={tabStyles['views-scroll-control']}>
-            <span
-              className={`${tabStyles['scroll-control-btn']} ${tabStyles['scroll-prev']} ${canScrollPrev && tabStyles['scroll-active']}`}
-              onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)}
-            >
-              <i className={`dtable-font dtable-icon-left-slide ${tabStyles['btn-scroll-icon']}`} />
-            </span>
-            <span
-              className={`${tabStyles['scroll-control-btn']} ${tabStyles['scroll-next']} ${canScrollNext && tabStyles['scroll-active']}`}
-              onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)}
-            >
-              <i className={`dtable-font dtable-icon-right-slide ${tabStyles['btn-scroll-icon']}`} />
-            </span>
-          </div>
+        <div className={tabStyles['views-scroll-control']}>
+          <span
+            className={`seatable-icon-btn ${tabStyles['scroll-control-btn']} ${tabStyles['scroll-prev']} ${ tabStyles['scroll-active']}`}
+            onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.PREV)}
+          >
+            <i className={`dtable-font dtable-icon-left-slide ${tabStyles['btn-scroll-icon']}`} />
+          </span>
+          <span
+            className={`seatable-icon-btn ${tabStyles['scroll-control-btn']} ${tabStyles['scroll-next']} ${canScrollNext && tabStyles['scroll-active']}`}
+            onClick={this.onScrollWithControl.bind(this, SCROLL_TYPE.NEXT)}
+          >
+            <i className={`dtable-font dtable-icon-right-slide ${tabStyles['btn-scroll-icon']}`} />
+          </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>
diff --git a/src/css/view-tabs.module.css b/src/css/view-tabs.module.css
index 517c923..541863b 100644
--- a/src/css/view-tabs.module.css
+++ b/src/css/view-tabs.module.css
@@ -89,21 +89,6 @@
   cursor: pointer;
 }
 
-.views-scroll-control .btn-scroll-icon {
-  color: #c2c2c2;
-  font-size: 12px;
-  line-height: 24px;
-}
-
-.views-scroll-control .scroll-active .btn-scroll-icon {
-  color: #8c8c8c;
-}
-
-.views-scroll-control .scroll-active:hover .btn-scroll-icon {
-  color: #000;
-  opacity: .75;
-}
-
 .btn-add-view { 
   display: flex;
   align-items: center;
@@ -114,18 +99,17 @@
 .add-map-view-icon {
   height: 24px;
   width: 24px;
-  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,.04);
 }
 
 .view-item .view-item-content:hover {
diff --git a/src/views/mobile-map.js b/src/views/mobile-map.js
index 4e186ae..ff27c23 100644
--- a/src/views/mobile-map.js
+++ b/src/views/mobile-map.js
@@ -458,13 +458,13 @@ class App extends React.Component {
           </div>
           <div className={styles['map-tool-container']}>
             <span className={`close ${styles['title-button']}`} onClick={this.toggle}>
-              <i className={'dtable-font dtable-icon-x'}></i>
+              <i className="dtable-font dtable-icon-x" style={{ fontSize: '16px' }}></i>
             </span>
             <span onClick={this.toggleSettingDialog} className={`close ${styles['title-button']}`}>
-              <i className={'dtable-font dtable-icon-settings'}></i>
+              <i className={'dtable-font dtable-icon-settings'} style={{ fontSize: '16px' }}></i>
             </span>
             <span className={`close ${styles['title-button']}`} onTouchEnd={onCapture}>
-              <i className={'dtable-font dtable-icon-download'}></i>
+              <i className={'dtable-font dtable-icon-download'} style={{ fontSize: '16px' }}></i>
             </span>
           </div>
         </div>