diff --git a/frontend/src/components/operations/style.css b/frontend/src/components/operations/style.css
index b819cfad66..40777f36d0 100644
--- a/frontend/src/components/operations/style.css
+++ b/frontend/src/components/operations/style.css
@@ -13,5 +13,5 @@
 }
 
 .dialog-operation .file-internal-link:hover {
-  color: #333;
+  color: #212529;
 }
diff --git a/frontend/src/components/wiki-card-view/wiki-card-group.js b/frontend/src/components/wiki-card-view/wiki-card-group.js
index 1466f3c813..c5f5f4e35a 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-group.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-group.js
@@ -1,22 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, username } from '../../utils/constants';
 import WikiCardItem from './wiki-card-item';
 
 const propTypes = {
   wikis: PropTypes.array.isRequired,
   deleteWiki: PropTypes.func.isRequired,
-  owner: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  isDepartment: PropTypes.bool.isRequired,
 };
 
 class WikiCardGroup extends Component {
   render() {
-    let { wikis, owner } = this.props;
+    let { wikis, title, isDepartment } = this.props;
     return (
-      <div className='wiki-card-group'>
-        <h4 className="sf-heading my-4">
-          <span className={`sf3-font nav-icon sf3-font-${username === owner ? 'mine' : 'department'}`} aria-hidden="true"></span>
-          {username === owner ? gettext('My Wikis') : wikis[0].owner_nickname}
+      <div className='wiki-card-group mb-4'>
+        <h4 className="sf-heading">
+          <span className={`sf3-font nav-icon sf3-font-${isDepartment ? 'department' : 'mine'}`} aria-hidden="true"></span>
+          {title}
         </h4>
         <div className='wiki-card-group-items'>
           {wikis.map((wiki, index) => {
@@ -25,7 +25,6 @@ class WikiCardGroup extends Component {
                 key={index}
                 wiki={wiki}
                 deleteWiki={this.props.deleteWiki}
-                owner={owner}
               />
             );
           })}
diff --git a/frontend/src/components/wiki-card-view/wiki-card-item.js b/frontend/src/components/wiki-card-view/wiki-card-item.js
index 0fe8e4d5a9..472396e5a5 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-item.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-item.js
@@ -7,7 +7,6 @@ import ModalPortal from '../modal-portal';
 import WikiDeleteDialog from '../dialog/wiki-delete-dialog';
 
 const propTypes = {
-  owner: PropTypes.string.isRequired,
   wiki: PropTypes.object.isRequired,
   deleteWiki: PropTypes.func.isRequired,
 };
@@ -57,11 +56,10 @@ class WikiCardItem extends Component {
 
   renderAvatar = () => {
     const { wiki } = this.props;
-    // const userProfileURL = `${siteRoot}profile/${encodeURIComponent(wiki.owner)}/`;
     return (
       <div className="wiki-card-item-avatar-container">
-        <img src={appAvatarURL} className="avatar mr-1" alt={gettext('Avatar')} />
-        <span title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
+        <img className="wiki-card-item-avatar" src={appAvatarURL} alt={wiki.owner_nickname}/>
+        <span className="wiki-card-item-owner text-truncate" title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
       </div>
     );
   };
@@ -70,14 +68,14 @@ class WikiCardItem extends Component {
     const { wiki } = this.props;
     return (
       <div className="wiki-card-item-avatar-container">
-        <span className='sf3-font-department sf3-font nav-icon mr-1'></span>
-        <span title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
+        <span className='sf3-font-department sf3-font nav-icon'></span>
+        <span className="wiki-card-item-owner text-truncate" title={wiki.owner_nickname}>{wiki.owner_nickname}</span>
       </div>
     );
   };
 
   render() {
-    const { owner, wiki } = this.props;
+    const { wiki } = this.props;
     let isOldVersion = wiki.version !== 'v2';
     let publishedUrl = `${siteRoot}published/${encodeURIComponent(wiki.slug)}/`;
     let editUrl = `${siteRoot}wikis/${wiki.id}/`;
@@ -86,7 +84,7 @@ class WikiCardItem extends Component {
       <>
         <div className="wiki-card-item" onClick={this.clickWikiCard.bind(this, isOldVersion ? publishedUrl : editUrl )}>
           <div className="wiki-card-item-top">
-            <div className="d-flex align-items-center">
+            <div className="d-flex align-items-center" style={{width: 'calc(100% - 46px)'}}>
               <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
               <span className="wiki-card-item-name ml-2 text-truncate" title={wikiName} aria-label={wikiName}>{wikiName}</span>
             </div>
@@ -110,7 +108,7 @@ class WikiCardItem extends Component {
             </Dropdown>
           </div>
           <div className="wiki-card-item-bottom">
-            {owner === username ? this.renderAvatar() : this.renderDept()}
+            {wiki.owner === username ? this.renderAvatar() : this.renderDept()}
             <span className="wiki-item-updated-time">{moment(wiki.updated_at).fromNow()}</span>
           </div>
         </div>
diff --git a/frontend/src/components/wiki-card-view/wiki-card-view.css b/frontend/src/components/wiki-card-view/wiki-card-view.css
index f915519360..27b0d8a205 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-view.css
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.css
@@ -1,3 +1,7 @@
+.wiki-card-group .sf-heading {
+  margin: 16px 0 10px;
+}
+
 .wiki-card-group-items {
   display: grid;
   grid-template-columns: 32.5% 32.5% 32.5%;
@@ -7,8 +11,8 @@
 .wiki-card-item {
   height: 120px;
   width: 100%;
-  border: 1px solid #EEEEEE;
-  padding: 20px;
+  border: 1px solid #eee;
+  padding: 16px;
   border-radius: 6px;
   display: flex;
   flex-direction: column;
@@ -37,12 +41,13 @@
 }
 
 .wiki-card-item .wiki-card-item-top .sf3-font-wiki.sf3-font {
-  color: #FF8900;
+  color: #FF9800;
   font-size: 24px;
+  height: 24px;
+  line-height: 24px;
 }
 
 .wiki-card-item .wiki-card-item-top .wiki-card-item-name {
-  max-width: 220px;
   font-size: 16px;
 }
 
@@ -52,6 +57,7 @@
   border-radius: 3px;
   opacity: 0;
   color: #444;
+  margin-left: 20px;
 }
 
 .wiki-card-item:hover .wiki-card-item-top .dropdown .sf-dropdown-toggle {
@@ -63,26 +69,30 @@
 }
 
 .wiki-card-item .wiki-card-item-avatar-container {
-  height: 20px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  border: 1px solid #EEEEEE;
+  border: 1px solid #eee;
   border-radius: 10px;
-  padding: 2px;
+  height: 20px;
+  max-width: 50%;
+  padding: 0 8px 0 2px;
 }
 
-.wiki-card-item .wiki-card-item-avatar-container .avatar {
-  width: 16px;
+.wiki-card-item .wiki-card-item-avatar-container .wiki-card-item-avatar {
+  border-radius: 50%;
   height: 16px;
+  width: 16px;
 }
 
-.wiki-card-item .wiki-card-item-avatar-container span {
+.wiki-card-item .wiki-card-item-avatar-container .wiki-card-item-owner {
+  display: inline-block;
   font-size: 13px;
+  line-height: 20px;
+  margin-left: 5px;
 }
 
 .wiki-card-item .wiki-card-item-avatar-container .sf3-font-department {
-  font-size: 1rem;
-  line-height: 1;
+  font-size: 14px;
   color: #999;
 }
 
diff --git a/frontend/src/components/wiki-card-view/wiki-card-view.js b/frontend/src/components/wiki-card-view/wiki-card-view.js
index 771cdd8752..ff2e0285f4 100644
--- a/frontend/src/components/wiki-card-view/wiki-card-view.js
+++ b/frontend/src/components/wiki-card-view/wiki-card-view.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { username } from '../../utils/constants';
+import { gettext, username } from '../../utils/constants';
 import WikiCardGroup from './wiki-card-group';
 import './wiki-card-view.css';
 
@@ -12,19 +12,22 @@ const propTypes = {
 class WikiCardView extends Component {
 
   classifyWikis = (wikis) => {
+    let v1Wikis = [];
     let myWikis = [];
     let department2WikisMap = {};
     for (let i = 0; i < wikis.length; i++) {
-      if (wikis[i].owner === username) {
+      if (wikis[i].version === 'v1') {
+        v1Wikis.push(wikis[i]);
+      } else if (wikis[i].owner === username) {
         myWikis.push(wikis[i]);
-        continue;
+      } else {
+        if (!department2WikisMap[wikis[i].owner]) {
+          department2WikisMap[wikis[i].owner] = [];
+        }
+        department2WikisMap[wikis[i].owner].push(wikis[i]);
       }
-      if (!department2WikisMap[wikis[i].owner]) {
-        department2WikisMap[wikis[i].owner] = [];
-      }
-      department2WikisMap[wikis[i].owner].push(wikis[i]);
     }
-    return { department2WikisMap, myWikis };
+    return { department2WikisMap, myWikis, v1Wikis };
   };
 
   render() {
@@ -36,24 +39,37 @@ class WikiCardView extends Component {
     if (errorMsg) {
       return <p className="error text-center">{errorMsg}</p>;
     }
-    const { myWikis, department2WikisMap } = this.classifyWikis(wikis);
+    const { v1Wikis, myWikis, department2WikisMap } = this.classifyWikis(wikis);
     let wikiCardGroups = [];
     wikiCardGroups.push(
       <WikiCardGroup
+        key='my-Wikis'
         deleteWiki={this.props.deleteWiki}
         wikis={myWikis}
-        owner={username}
+        title={gettext('My Wikis')}
+        isDepartment={false}
       />
     );
     for (let key in department2WikisMap) {
       wikiCardGroups.push(
         <WikiCardGroup
+          key={'department-Wikis' + key}
           deleteWiki={this.props.deleteWiki}
           wikis={department2WikisMap[key]}
-          owner={key}
+          title={department2WikisMap[key][0].owner_nickname}
+          isDepartment={true}
         />
       );
     }
+    wikiCardGroups.push(
+      <WikiCardGroup
+        key='old-Wikis'
+        deleteWiki={this.props.deleteWiki}
+        wikis={v1Wikis}
+        title={gettext('Old Wikis')}
+        isDepartment={false}
+      />
+    );
     return wikiCardGroups;
   }
 }
diff --git a/frontend/src/css/dirent-detail.css b/frontend/src/css/dirent-detail.css
index cdc9f1c4c2..3e2ce0f9dd 100644
--- a/frontend/src/css/dirent-detail.css
+++ b/frontend/src/css/dirent-detail.css
@@ -40,7 +40,7 @@
   line-height: 1.5rem;
   vertical-align: middle;
   font-size: 1rem;
-  color: #322;
+  color: #212529;
 }
 
 .detail-body {
@@ -93,7 +93,7 @@
 
 .dirent-table-container td {
   font-size: 14px;
-  color: #333;
+  color: #212529;
   word-break: break-all;
 }
 
@@ -136,7 +136,7 @@
 
 .file-related-files ul li a,
 .list-related-file-table tr td a {
-  color: #333;
+  color: #212529;
 }
 
 .list-related-file-body {
diff --git a/frontend/src/css/file-uploader.css b/frontend/src/css/file-uploader.css
index ea26139506..6804810950 100644
--- a/frontend/src/css/file-uploader.css
+++ b/frontend/src/css/file-uploader.css
@@ -27,7 +27,7 @@
   background-color: #f0f0f0;
   padding: 0.625rem;
   font-size: 1rem;
-  color: #322;
+  color: #212529;
   display: flex;
   justify-content: space-between;
   min-height: 2.25rem;
diff --git a/frontend/src/css/files-activities.css b/frontend/src/css/files-activities.css
index d149615ee3..9c6ecf56fb 100644
--- a/frontend/src/css/files-activities.css
+++ b/frontend/src/css/files-activities.css
@@ -3,7 +3,7 @@
   cursor: pointer;
 }
 .activity-details:hover {
-  color: #333;
+  color: #212529;
 }
 .mobile-activity-time {
   display: inline-block;
diff --git a/frontend/src/css/grid-view.css b/frontend/src/css/grid-view.css
index d7b6ab1d6f..bfcc0eacc7 100644
--- a/frontend/src/css/grid-view.css
+++ b/frontend/src/css/grid-view.css
@@ -62,7 +62,7 @@
 }
 
 .grid-file-name-link {
-  color: #333;
+  color: #212529;
   font-size: 0.875rem;
 }
 
diff --git a/frontend/src/css/image-file-view.css b/frontend/src/css/image-file-view.css
index 55b0b074ee..a412c6f68d 100644
--- a/frontend/src/css/image-file-view.css
+++ b/frontend/src/css/image-file-view.css
@@ -41,5 +41,5 @@
 }
 #img-prev:hover,
 #img-next:hover {
-    color:#333;
+    color:#212529;
 }
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 65a0075d49..106c010f10 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -53,14 +53,14 @@
   display: flex;
   flex-shrink: 0;
   background: #fff;
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid #eee;
   box-shadow: 0 2px 4px rgba(0,0,0, 10%);
   z-index: 100;
 }
 
 @media (max-width: 767px) {
   .side-panel-north {
-      border-right: 1px solid #eee;
+    border-right: 1px solid #eee;
   }
 
   .main-panel-north {
@@ -92,7 +92,6 @@
 }
 
 .cur-view-path {
-  position: relative; /* for the ':after' */
   padding: 8px 16px;
   max-height: 48px;
   background: #fff;
@@ -100,15 +99,7 @@
   align-items: center;
   flex-shrink: 0;
   justify-content: space-between;
-}
-
-.cur-view-path:after {
-  position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: 0;
-  content: '';
-  border-bottom: 1px solid #e8e8e8;
+  border-bottom: 1px solid #eee;
 }
 
 .cur-view-content {
diff --git a/frontend/src/css/notification.css b/frontend/src/css/notification.css
index 0677217a68..6dd6024ec5 100644
--- a/frontend/src/css/notification.css
+++ b/frontend/src/css/notification.css
@@ -17,7 +17,7 @@
 #notifications .title {
   line-height: 1.5;
   font-size: 1rem;
-  color: #322;
+  color: #212529;
   font-weight: normal;
 }
 
diff --git a/frontend/src/css/repo-info-bar.css b/frontend/src/css/repo-info-bar.css
index 922eeb1741..5204604b85 100644
--- a/frontend/src/css/repo-info-bar.css
+++ b/frontend/src/css/repo-info-bar.css
@@ -44,7 +44,7 @@
 }
 
 .file-info a {
-  color: #333;
+  color: #212529;
 }
 
 .info-icon {
diff --git a/frontend/src/css/repo-seatable-integration-dialog.css b/frontend/src/css/repo-seatable-integration-dialog.css
index a4951f1c51..cd29b1dc00 100644
--- a/frontend/src/css/repo-seatable-integration-dialog.css
+++ b/frontend/src/css/repo-seatable-integration-dialog.css
@@ -19,7 +19,7 @@
 
 .account-dialog .nav-pills .nav-item .nav-link {
   padding: .3125rem 1rem .3125rem 8px;
-  color: #333;
+  color: #212529;
 }
 
 .account-dialog .nav-pills .nav-item .nav-link:hover {
@@ -59,7 +59,7 @@
 
 .account-dialog table td {
   padding: 3px 0.1875rem;
-  color: #333;
+  color: #212529;
   font-size: 14px;
   word-break: break-all;
 }
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 6c45eac2d7..f0e5360aeb 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -52,7 +52,7 @@
 }
 
 .search-icon-right:hover {
-  color: #333;
+  color: #212529;
   text-decoration: none;
 }
 
diff --git a/frontend/src/css/system-info.css b/frontend/src/css/system-info.css
index c0ab0a2b19..a647cffa00 100644
--- a/frontend/src/css/system-info.css
+++ b/frontend/src/css/system-info.css
@@ -2,7 +2,7 @@
   padding: 8px 16px;
   background: #f9f9f9;
   font-size: 1rem;
-  color: #322;
+  color: #212529;
   font-weight: normal;
   line-height: 1.5;
   margin: 0;
diff --git a/frontend/src/css/system-stat.css b/frontend/src/css/system-stat.css
index d94e694bd3..4e8e1c9a13 100644
--- a/frontend/src/css/system-stat.css
+++ b/frontend/src/css/system-stat.css
@@ -8,7 +8,7 @@
 .sys-stat-tool {
   display: flex;
   font-size: 13px;
-  color: #333;
+  color: #212529;
 }
 
 .system-statistic-item {
@@ -43,7 +43,7 @@
 .statistic-traffic-tab {
   display: flex;
   font-size: 13px;
-  color: #333;
+  color: #212529;
   margin-top: 10px;
 }
 
diff --git a/frontend/src/css/user-notifications.css b/frontend/src/css/user-notifications.css
index 4553ecb378..5df6af7ad0 100644
--- a/frontend/src/css/user-notifications.css
+++ b/frontend/src/css/user-notifications.css
@@ -98,7 +98,7 @@
 .notification-dialog-body table td {
   padding: 0.5rem 0.1875rem;
   border-bottom: 1px solid #eee;
-  color: #333;
+  color: #212529;
   font-size: 14px;
   word-break: break-all;
 }
diff --git a/frontend/src/css/user-settings.css b/frontend/src/css/user-settings.css
index f03d454744..c3e489a4bf 100644
--- a/frontend/src/css/user-settings.css
+++ b/frontend/src/css/user-settings.css
@@ -23,7 +23,7 @@ body {
   padding: 8px 16px;
   background: #f9f9f9;
   font-size: 1rem;
-  color: #322;
+  color: #212529;
   font-weight: normal;
   line-height: 1.5;
   margin:0;
@@ -74,7 +74,7 @@ body {
   margin: 0;
   padding-left: 1em;
   border-left: 2px solid transparent;
-  color: #333;
+  color: #212529;
 }
 .user-setting-nav .nav-item.active .nav-link {
   color: #ff9800;
diff --git a/frontend/src/pages/markdown-editor/css/detail-list-view.css b/frontend/src/pages/markdown-editor/css/detail-list-view.css
index 3085408baa..563ae283c2 100644
--- a/frontend/src/pages/markdown-editor/css/detail-list-view.css
+++ b/frontend/src/pages/markdown-editor/css/detail-list-view.css
@@ -17,7 +17,7 @@
 
 .dirent-table-container td {
   font-size: 14px;
-  color: #333;
+  color: #212529;
   word-break: break-all;
 }
 
@@ -54,7 +54,7 @@
 
 .file-related-files ul li a,
 .list-related-file-table tr td a {
-  color: #333;
+  color: #212529;
 }
 
 .list-related-file-body {
diff --git a/frontend/src/pages/sdoc/sdoc-file-history/index.css b/frontend/src/pages/sdoc/sdoc-file-history/index.css
index 31947abd04..bdd3bf41e3 100644
--- a/frontend/src/pages/sdoc/sdoc-file-history/index.css
+++ b/frontend/src/pages/sdoc/sdoc-file-history/index.css
@@ -254,7 +254,7 @@
 }
 
 .sdoc-file-history-versions .history-list-item .history-operation:hover a.fas {
-  color: #333;
+  color: #212529;
 }
 
 .sdoc-file-history-versions .history-list-item.item-active {
@@ -343,7 +343,7 @@
 }
 
 .sdoc-file-history-versions .daily-history-detail-toggle .dropdown-toggle:hover {
-  color: #333;
+  color: #212529;
   cursor: pointer;
 }
 
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 8147ea5075..2e853ac6e8 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -217,7 +217,7 @@ form,input,textarea,select,button,img {
 body, input, textarea, button, select {
     font-size: 13px;
     line-height: 1.5;
-    color: #333;
+    color: #212529;
     word-wrap:break-word;
 }
 input, button, select { line-height:19px;/*for ff*/ }
@@ -226,7 +226,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 h1 { font-size:1.9em; }
 h2 { font-size:1.5em; color:#222; font-weight:bold; }
-h3 { font-size:16px; color:#322; font-weight:normal;  }
+h3 { font-size:16px; color:#212529; font-weight:normal;  }
 h4 { font-size:1.1em; color:#222; font-weight:normal; }
 h5, h6 { font-size:1em; }
 ul { list-style:none; }
@@ -279,7 +279,7 @@ select {
 }
 .sf-btn-link {
     display:inline-block;
-    color:#333;
+    color:#212529;
     line-height:19px;
     text-decoration:none;
     font-weight:normal;
@@ -291,7 +291,7 @@ select {
     border-radius:3px;
 }
 .sf-btn-link:hover {
-    color:#333;
+    color:#212529;
     text-decoration:none;
 }
 input[type=radio] {
@@ -368,7 +368,7 @@ th, td {
     border-bottom:1px solid #eee;
 }
 td {
-    color: #333;
+    color: #212529;
     font-size:14px;
     word-break:break-all; /* mainly for lib/folder/file name */
 }
@@ -429,7 +429,7 @@ table img { vertical-align:middle; }
 .hl { background-color: #f8f8f8; } /* highlight */
 .tip { color:#808080; font-size:12px; }
 .tick-green { color:green; }
-.label { color:#333; font-size:12px; font-style:normal; }
+.label { color:#212529; font-size:12px; font-style:normal; }
 .italic { font-style:italic; }
 .alc { text-align: center;}
 .cspt { cursor:pointer; }
@@ -831,7 +831,7 @@ textarea:-moz-placeholder {/* for FF */
     display:block;
     font-size:15px;
     padding:4px 4px 4px 0;
-    color:#333;
+    color:#212529;
     font-weight:normal;
 }
 .side-tabnav-tabs .tab a:focus {
@@ -1135,7 +1135,7 @@ textarea:-moz-placeholder {/* for FF */
     padding:40px 200px 40px 60px;
     font-size:14px;
     line-height:1.6;
-    color:#333;
+    color:#212529;
 }
 .article h2,
 .article h3,
@@ -1143,7 +1143,7 @@ textarea:-moz-placeholder {/* for FF */
 .article h5,
 .article h6 {
     margin: 1.2em 0 0.4em;
-    color:#333;
+    color:#212529;
     font-weight:bold;
 }
 .article h1 + p, .article h2 + p, .article h3 + p, .article h4 + p, .article h5 + p, .article h6 + p,
@@ -1312,7 +1312,7 @@ a.sf-popover-item {
 .wiki-nav .link {
     display:inline-block;
     font-size:15px;
-    color:#333;
+    color:#212529;
     line-height:1.5;
     font-weight:normal;
     padding: 4px 10px 9px;
@@ -1419,7 +1419,7 @@ a.sf-popover-item {
     border-bottom:1px solid #ddd;
 }
 .account-popup a.item {
-    color:#333;
+    color:#212529;
     font-weight:normal;
 }
 .account-popup a.item:hover {
@@ -1606,7 +1606,7 @@ a.sf-popover-item {
     color:#888;
 }
 #traffic-stat {
-    color: #333;
+    color: #212529;
     font-weight: normal;
 }
 #notices-loading,
@@ -1653,7 +1653,7 @@ a.sf-popover-item {
     margin-left:5px;
 }
 .commit-time {
-    color:#333;
+    color:#212529;
     font-size:13px;
     font-weight:normal;
     margin-top: 0em;
@@ -1673,7 +1673,7 @@ a.sf-popover-item {
 }
 .fileinput-button .icon-plus {
     font-size:13px;
-    color:#333;
+    color:#212529;
 }
 .fileinput-button input {
     position: absolute;
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 55372bc159..a59f9a67bc 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -143,7 +143,7 @@ a, a:hover { color: #ec8000; }
 }
 .sf-heading {
     font-size: 1rem;
-    color: #322;
+    color: #212529;
     font-weight: normal;
     line-height: 1.5;
 }
@@ -200,7 +200,7 @@ a, a:hover { color: #ec8000; }
 
 .sf-dropdown-toggle:focus,
 .sf-dropdown-toggle:hover {
-    color: #333;
+    color: #212529;
 }
 
 .user-select-none {
@@ -366,7 +366,7 @@ a, a:hover { color: #ec8000; }
 
 .op-icon:focus,
 .op-icon:hover {
-    color: #333;
+    color: #212529;
     text-decoration: none;
 }
 
@@ -379,7 +379,7 @@ a, a:hover { color: #ec8000; }
 .action-icon:hover,
 .attr-action-icon:focus,
 .attr-action-icon:hover {
-    color: #333 !important;
+    color: #212529 !important;
     text-decoration: none;
 }
 
@@ -464,7 +464,7 @@ a, a:hover { color: #ec8000; }
 }
 
 .account-popup a.item {
-    color:#333;
+    color:#212529;
     font-weight:normal;
 }
 
@@ -557,7 +557,7 @@ a, a:hover { color: #ec8000; }
 
 .nav-pills .nav-item .nav-link {
     padding: 0.25rem;
-    color: #333;
+    color: #212529;
 }
 
 .nav-pills .nav-item .nav-link:hover {
@@ -919,7 +919,7 @@ table th {
 table td {
     padding: 0.5rem 0.1875rem;
     border-bottom: 1px solid #e8e8e8;
-    color: #333;
+    color: #212529;
     font-size: 0.875rem;
     word-break: break-all;
 }