diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 0f708174a5..d2640da713 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -186,7 +186,7 @@ class MainSideNav extends React.Component {
           <ul className="nav nav-pills flex-column nav-container">
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('dtable')}`} to={siteRoot + 'dtable/'} title='DTable' onClick={() => this.tabItemClick('dtable')}>
-                <span className="sf2-icon-star" aria-hidden="true"></span>
+                <span className="sf3-font-dtable-logo sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">DTable</span>
               </Link>
             </li>
diff --git a/frontend/src/css/dtable-page.css b/frontend/src/css/dtable-page.css
new file mode 100644
index 0000000000..467db0604e
--- /dev/null
+++ b/frontend/src/css/dtable-page.css
@@ -0,0 +1,36 @@
+.workspace .workspace-name {
+  font-weight: 400;
+  color: #202428;
+  border-bottom: 2px solid #e3e3e3;
+  font-size: 1rem;
+}
+.workspace .workspace-name:hover {
+  border-bottom: 2px solid #202428;
+}
+.workspace .add-table-btn {
+  width: 42px;
+  height: 42px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  display: flex;
+}
+.workspace .add-table-btn:hover {
+  background-color: #e3e3e3;
+}
+.workspace .add-table-btn i {
+  margin: auto;
+  font-size: 18px;
+  color: #929292;
+}
+.workspace .add-table-btn:hover i {
+  color: #202428;
+}
+.add-table-btn-container {
+  align-items: center;
+}
+.add-workspace {
+  color: #929292;
+}
+.add-workspace:hover {
+  color: #202428;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/dtable/dtable.js b/frontend/src/pages/dtable/dtable.js
index 123fdc2ab6..53b8d3412d 100644
--- a/frontend/src/pages/dtable/dtable.js
+++ b/frontend/src/pages/dtable/dtable.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot } from '../../utils/constants';
@@ -10,6 +10,7 @@ import DeleteWorkspaceDialog from '../../components/dialog/delete-workspace-dial
 import CreateTableDialog from '../../components/dialog/create-table-dialog';
 import DeleteTableDialog from '../../components/dialog/delete-table-dialog';
 import Rename from '../../components/rename';
+import '../../css/dtable-page.css';
 
 moment.locale(window.app.config.lang);
 
@@ -19,6 +20,9 @@ const tablePropTypes = {
   workspaceID: PropTypes.number.isRequired,
   renameTable: PropTypes.func.isRequired,
   deleteTable: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
 };
 
 class Table extends Component {
@@ -35,6 +39,7 @@ class Table extends Component {
 
   onRenameTableCancel = () => {
     this.setState({isTableRenaming: !this.state.isTableRenaming});
+    this.props.onUnfreezedItem();
   }
 
   onRenameTableConfirm = (newTableName) => {
@@ -45,39 +50,52 @@ class Table extends Component {
 
   onDeleteTableCancel = () => {
     this.setState({isTableDeleting: !this.state.isTableDeleting});
+    this.props.onUnfreezedItem();
   }
 
   onDeleteTableSubmit = () => {
     let tableName = this.props.table.name;
-    console.log(tableName);
     this.props.deleteTable(tableName);
     this.onDeleteTableCancel();
   }
 
   dropdownToggle = () => {
+    if (this.state.dropdownOpen) {
+      this.props.onUnfreezedItem();
+    } else {
+      this.props.onFreezedItem();
+    }
     this.setState({ dropdownOpen: !this.state.dropdownOpen });
   }
 
   onMouseEnter = () => {
+    if (this.props.isItemFreezed) return;
     this.setState({
       active: true
     });
   }
 
   onMouseLeave = () => {
+    if (this.props.isItemFreezed) return;
     this.setState({
       active: false
     });
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (!nextProps.isItemFreezed) {
+      this.setState({ active: false });
+    }
+  }
+
   render() {
 
     let table = this.props.table;
     let tableHref = siteRoot + 'workspace/' + this.props.workspaceID + '/dtable/' + table.name + '/';
 
     return (
-      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-        <td></td>
+      <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className={this.state.active ? 'tr-highlight' : ''}>
+        <td><img src={siteRoot + 'media/img/data-base.svg'} alt="" width="20"/></td>
         <td>
           {this.state.isTableRenaming &&
             <Rename
@@ -98,7 +116,7 @@ class Table extends Component {
             <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down" className="mx-1 old-history-more-operation">
               <DropdownToggle
                 tag='i'
-                className='fa fa-ellipsis-v'
+                className='fa fa-ellipsis-v cursor-pointer attr-action-icon'
                 title={gettext('More Operations')}
                 data-toggle="dropdown" 
                 aria-expanded={this.state.dropdownOpen}
@@ -143,9 +161,18 @@ class Workspace extends Component {
       isWorkspaceDeleting: false,
       isShowAddTableDialog: false,
       dropdownOpen: false,
+      isItemFreezed: false,
     };
   }
 
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+  
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
   onAddTable = () => {
     this.setState({
       isShowAddTableDialog: !this.state.isShowAddTableDialog,
@@ -220,120 +247,96 @@ class Workspace extends Component {
     this.setState({ dropdownOpen: !this.state.dropdownOpen });
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.workspace.table_list !== this.props.workspace.table_list) {
+      this.setState({
+        tableList: nextProps.workspace.table_list
+      });
+    }
+  }
+
   render() {
     let workspace = this.props.workspace;
 
     return(
-      <Fragment>
-        <tr>
-          <td colSpan='5'>
-            {this.state.isWorkspaceRenaming &&
-              <Rename
-                hasSuffix={false}
-                name={workspace.name}
-                onRenameConfirm={this.onRenameWorkspaceConfirm}
-                onRenameCancel={this.onRenameWorkspaceCancel}
-              />
-            }
-            {!this.state.isWorkspaceRenaming &&
-              <div>
-                {workspace.name}
-                <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
-                  <DropdownToggle
-                    caret={true}
-                    tag='i'
-                    title={gettext('More Operations')}
-                    data-toggle="dropdown" 
-                    aria-expanded={this.state.dropdownOpen}
-                  >
-                  </DropdownToggle>
-                  <DropdownMenu className="drop-list" right={true}>
-                    <DropdownItem onClick={this.onRenameWorkspaceCancel}>{gettext('Rename')}</DropdownItem>
-                    <DropdownItem onClick={this.onDeleteWorkspaceCancel}>{gettext('Delete')}</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-                {this.state.isWorkspaceDeleting &&
-                  <DeleteWorkspaceDialog
-                    currentWorkspace={workspace}
-                    deleteCancel={this.onDeleteWorkspaceCancel}
-                    handleSubmit={this.onDeleteWorkspaceSubmit}
-                  />
-                }
-              </div>
-            }
-          </td>
-        </tr>
-        {this.state.tableList.map((table, index) => {
-          return (
-            <Table
-              key={index}
-              table={table}
-              workspaceID={workspace.id}
-              renameTable={this.renameTable}
-              deleteTable={this.deleteTable}
+      <div className="workspace my-2">
+        <div className="d-flex">
+          {this.state.isWorkspaceRenaming &&
+            <Rename
+              hasSuffix={false}
+              name={workspace.name}
+              onRenameConfirm={this.onRenameWorkspaceConfirm}
+              onRenameCancel={this.onRenameWorkspaceCancel}
             />
-          );
-        })}
-        <tr>
-          <td>
-            <Button className="fa fa-plus" onClick={this.onAddTable}></Button>
-            {this.state.isShowAddTableDialog &&
-              <CreateTableDialog
-                onAddTable={this.onAddTable}
-                createTable={this.createTable}
-              />
-            }
-          </td>
-          <td colSpan='4' >{gettext('Add a DTable')}</td>
-        </tr>
-      </Fragment>
+          }
+          {!this.state.isWorkspaceRenaming &&
+            <Fragment>
+              <span className="workspace-name mb-2">{workspace.name}</span>
+              <Dropdown isOpen={this.state.dropdownOpen} toggle={this.dropdownToggle} direction="down">
+                <DropdownToggle
+                  caret={true}
+                  tag='i'
+                  title={gettext('More Operations')}
+                  data-toggle="dropdown" 
+                  aria-expanded={this.state.dropdownOpen}
+                  className="attr-action-icon"
+                >
+                </DropdownToggle>
+                <DropdownMenu className="drop-list" right={true}>
+                  <DropdownItem onClick={this.onRenameWorkspaceCancel}>{gettext('Rename')}</DropdownItem>
+                  <DropdownItem onClick={this.onDeleteWorkspaceCancel}>{gettext('Delete')}</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+              {this.state.isWorkspaceDeleting &&
+                <DeleteWorkspaceDialog
+                  currentWorkspace={workspace}
+                  deleteCancel={this.onDeleteWorkspaceCancel}
+                  handleSubmit={this.onDeleteWorkspaceSubmit}
+                />
+              }
+            </Fragment>
+          }
+        </div>
+        <div className="my-2 d-flex add-table-btn-container">
+          <div className="add-table-btn cursor-pointer" onClick={this.onAddTable}>
+            <i className="fa fa-plus"></i>
+          </div>
+          {this.state.isShowAddTableDialog &&
+            <CreateTableDialog
+              onAddTable={this.onAddTable}
+              createTable={this.createTable}
+            />
+          }
+          <span className="ml-2">{gettext('Add a DTable')}</span>
+        </div>
+        <table width="100%" className="table table-vcenter">
+          <colgroup>
+            <col width="5%"/><col width="30%"/><col width="30%"/><col width="30%"/><col width="5%"/>
+          </colgroup>
+          <tbody>
+            {this.state.tableList.map((table, index) => {
+              return (
+                <Table
+                  key={index}
+                  table={table}
+                  workspaceID={workspace.id}
+                  renameTable={this.renameTable}
+                  deleteTable={this.deleteTable}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
+                  isItemFreezed={this.state.isItemFreezed}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     );
   }
 }
 
 Workspace.propTypes = workspacePropTypes;
 
-
-const contentPropTypes = {
-  workspaceList: PropTypes.array.isRequired,
-  renameWorkspace: PropTypes.func.isRequired,
-  deleteWorkspace: PropTypes.func.isRequired,
-};
-
-class Content extends Component {
-
-  render() {
-    let workspaceList = this.props.workspaceList;
-
-    return ( 
-      <table width="100%" className="table table-hover table-vcenter">
-        <colgroup>
-          <col width="5%"/>
-          <col width="30%"/>
-          <col width="30%"/>
-          <col width="30%"/>
-          <col width="5%"/>
-        </colgroup>
-        <tbody>
-          {workspaceList.map((workspace, index) => {
-            return (
-              <Workspace
-                key={index}
-                workspace={workspace}
-                renameWorkspace={this.props.renameWorkspace}
-                deleteWorkspace={this.props.deleteWorkspace}
-              />
-            );
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-Content.propTypes = contentPropTypes;
-
-
 class DTable extends Component {
   constructor(props) {
     super(props);
@@ -429,16 +432,20 @@ class DTable extends Component {
             }
             {!this.state.loading &&
               <Fragment>
-                <Content
-                  workspaceList={this.state.workspaceList}
-                  renameWorkspace={this.renameWorkspace}
-                  deleteWorkspace={this.deleteWorkspace}
-                />
-                <br />
+                {this.state.workspaceList.map((workspace, index) => {
+                  return (
+                    <Workspace
+                      key={index}
+                      workspace={workspace}
+                      renameWorkspace={this.renameWorkspace}
+                      deleteWorkspace={this.deleteWorkspace}
+                    />
+                  );
+                })}
                 <div>
-                  <Button onClick={this.onAddWorkspace} className="fa fa-plus">
-                    {gettext('Add a Workspace')}
-                  </Button>
+                  <span className="add-workspace cursor-pointer" onClick={this.onAddWorkspace}>
+                    <i className="fa fa-plus"></i>{' '}{gettext('Add a Workspace')}
+                  </span>
                   {this.state.isShowAddWorkspaceDialog &&
                     <CreateWorkspaceDialog
                       createWorkspace={this.createWorkspace}
diff --git a/media/img/data-base.svg b/media/img/data-base.svg
new file mode 100644
index 0000000000..f53d7a1d3e
--- /dev/null
+++ b/media/img/data-base.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#9D9D9D;}
+</style>
+<title>data-base</title>
+<desc>Created with Sketch.</desc>
+<g id="Symbols">
+	<g id="data-base">
+		<g id="形状">
+			<path class="st0" d="M27.2,1.8C24.4,0.6,20.4,0,16,0S7.6,0.6,4.8,1.8C1.6,3.2,0,4.8,0,6.6v18.6C0,27,1.6,28.8,4.8,30
+				c2.8,1.4,6.8,2,11.2,2s8.4-0.6,11.2-1.8c3-1.2,4.8-3,4.8-4.8V6.6C32,4.8,30.4,3.2,27.2,1.8L27.2,1.8z M25.4,10
+				c-2.6,1-6.2,1.4-9.4,1.4c-3.4,0-6.8-0.4-9.4-1.4c-3-0.8-4.4-2-4.4-3.4c0-1.2,1.6-2.4,4.4-3.4C9.2,2.4,12.6,2,16,2
+				c3.2,0,6.8,0.6,9.4,1.4c2.8,1,4.4,2.2,4.4,3.4S28.4,9.2,25.4,10L25.4,10z M25.6,15.8c-2.6,0.8-6.2,1.4-9.6,1.4s-6.8-0.6-9.6-1.4
+				c-2.8-1-4.4-2.2-4.4-3.4v-2.2C4,11,5.4,12,7.6,12.4c2.6,0.6,5.4,1,8.4,1s5.8-0.4,8.4-1C26.6,12,28,11,30,10.2v2.4
+				C30,13.6,28.4,14.8,25.6,15.8L25.6,15.8z M25.6,22.2C23,23,19.4,23.6,16,23.6S9.2,23,6.4,22.2c-2.8-0.8-4.4-2-4.4-3.4v-3
+				c2,1,3.4,1.8,5.6,2.4c2.6,0.6,5.4,1,8.4,1s5.8-0.4,8.4-1c2.2-0.6,3.6-1.4,5.6-2.4v3C30,20.2,28.4,21.4,25.6,22.2L25.6,22.2z
+				 M16,30c-3.4,0-6.8-0.6-9.6-1.4c-2.8-0.8-4.4-2-4.4-3.2v-3c2,1,3.4,1.8,5.6,2.4c2.4,0.6,5.4,1,8.2,1c3,0,5.8-0.4,8.4-1
+				c2.4-0.6,3.8-1.4,5.8-2.4v3c0,1.2-1.6,2.4-4.4,3.4C23,29.6,19.2,30,16,30L16,30z"/>
+		</g>
+	</g>
+</g>
+</svg>