diff --git a/frontend/src/components/empty-tip.js b/frontend/src/components/empty-tip.js
new file mode 100644
index 0000000000..82550e6317
--- /dev/null
+++ b/frontend/src/components/empty-tip.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { mediaUrl } from '../utils/constants';
+
+class EmptyTip extends React.Component {
+
+  render() {
+    return (
+      <div className="empty-tip">
+        <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="140" height="140" className="no-items-img-tip" />
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default EmptyTip;
diff --git a/frontend/src/pages/drafts/draft-content.js b/frontend/src/pages/drafts/draft-content.js
index 39a99c3b37..6ef09cefed 100644
--- a/frontend/src/pages/drafts/draft-content.js
+++ b/frontend/src/pages/drafts/draft-content.js
@@ -4,6 +4,7 @@ import editUtilties from '../../utils/editor-utilties';
 import { Utils } from '../../utils/utils';
 import PropTypes from 'prop-types';
 import toaster from '../../components/toast';
+import EmptyTip from '../../components/empty-tip';
 import Loading from '../../components/loading';
 import DraftListView from '../../components/draft-list-view/draft-list-view';
 
@@ -57,10 +58,10 @@ class DraftContent extends React.Component {
         {!this.props.isLoadingDraft && (
           <Fragment>
             {this.props.draftList.length === 0 && (
-              <div className="message empty-tip">
+              <EmptyTip>
                 <h2>{gettext('No draft yet')}</h2>
                 <p>{gettext('Draft is a way to let you collaborate with others on files. You can create a draft from a file, edit the draft and then ask for a review. The original file will be updated only after the draft be reviewed.')}</p>
-              </div>
+              </EmptyTip>
             )}
             {this.props.draftList.length !==0 && (
               <DraftListView
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 45bfa67b69..28a293a584 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -7,6 +7,7 @@ import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 import ModalPortal from '../../components/modal-portal';
 import Group from '../../models/group';
 import Repo from '../../models/repo';
@@ -150,25 +151,25 @@ class GroupView extends React.Component {
     if (currentGroup) {
       if (currentGroup.parent_group_id === 0) {
         emptyTip = (
-          <div className="empty-tip">
+          <EmptyTip>
             <h2>{gettext('No library is shared to this group')}</h2>
             <p>{gettext('You can share libraries by clicking the "New Library" button above or the "Share" icon on your libraries list.')}</p>
             <p>{gettext('Libraries shared as writable can be downloaded and synced by other group members. Read only libraries can only be downloaded, updates by others will not be uploaded.')}</p>
-          </div>
+          </EmptyTip>
         );
       } else {
         if (currentGroup.admins.indexOf(username) == -1) {  // is a member of this group
           emptyTip = (
-            <div className="empty-tip">
+            <EmptyTip>
               <h2>{gettext('No libraries')}</h2>
-            </div>
+            </EmptyTip>
           );
         } else {
           emptyTip = (
-            <div className="empty-tip">
+            <EmptyTip>
               <h2>{gettext('No libraries')}</h2>
               <p>{gettext('You can create libraries by clicking the "New Library" button above.')}</p>
-            </div>
+            </EmptyTip>
           );
         }
       }
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index f96504f4d7..bc453082e0 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -8,6 +8,7 @@ import {Table} from 'reactstrap';
 import Loading from '../../components/loading';
 import moment from 'moment';
 import toaster from '../../components/toast';
+import EmptyTip from '../../components/empty-tip';
 
 import '../../css/invitations.css';
 
@@ -186,9 +187,9 @@ class InvitationsView extends React.Component {
 
   emptyTip = () => {
     return (
-      <div className="message empty-tip">
+      <EmptyTip>
         <h2>{gettext('You have not invited any people.')}</h2>
-      </div>
+      </EmptyTip>
     );
   }
 
diff --git a/frontend/src/pages/my-libs/my-libs-deleted.js b/frontend/src/pages/my-libs/my-libs-deleted.js
index 523b30b4da..9baa5f8a7e 100644
--- a/frontend/src/pages/my-libs/my-libs-deleted.js
+++ b/frontend/src/pages/my-libs/my-libs-deleted.js
@@ -3,10 +3,11 @@ import { Link } from '@reach/router';
 import moment from 'moment';
 import { gettext, siteRoot, lang } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import toaster from '../../components/toast';
-import CommonToolbar from '../../components/toolbar/common-toolbar';
-import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
+import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
+import CommonToolbar from '../../components/toolbar/common-toolbar';
 
 moment.locale(lang);
 
@@ -46,7 +47,7 @@ class MyLibsDeleted extends Component {
           <div className="cur-view-container">
             <div className="cur-view-path">
               <div className="path-container">
-                <Link to={ siteRoot + 'my-libs/' }>{gettext("My Libraries")}</Link>
+                <Link to={ siteRoot + 'my-libs/' }>{gettext('My Libraries')}</Link>
                 <span className="path-split">/</span>
                 <span>{gettext('Deleted Libraries')}</span>
               </div>
@@ -54,9 +55,9 @@ class MyLibsDeleted extends Component {
             <div className="cur-view-content">
               {this.state.isLoading && <Loading />}
               {(!this.state.isLoading && this.state.deletedRepoList.length === 0) &&
-                <div className="message empty-tip">
-                  <h2>{gettext('No deleted libraries.')}</h2>
-                </div>
+              <EmptyTip>
+                <h2>{gettext('No deleted libraries.')}</h2>
+              </EmptyTip>
               }
               {this.state.deletedRepoList.length !== 0 && 
                 <div>
@@ -140,9 +141,9 @@ class DeletedRepoItem extends Component {
       toaster.success(message);
       this.props.refreshDeletedRepoList(repoID);
     }).catch(res => {
-        let message = gettext('Failed. Please check the network.')
-        toaster.danger(message);
-    })
+      let message = gettext('Failed. Please check the network.');
+      toaster.danger(message);
+    });
   }
 
   render() {
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index 1c6e57bf01..47d6e4eed3 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -6,6 +6,7 @@ import { gettext, loginUrl} from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
 import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import RepoViewToolbar from '../../components/toolbar/repo-view-toobar';
 import LibDetail from '../../components/dirent-detail/lib-details';
@@ -29,10 +30,10 @@ class MyLibraries extends Component {
     };
 
     this.emptyMessage = (
-      <div className="empty-tip">
+      <EmptyTip>
         <h2>{gettext('You have not created any libraries')}</h2>
         <p>{gettext('You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately.')}</p>
-      </div>
+      </EmptyTip>
     );
   }
 
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index b5eea0a0af..3ee74fad72 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -3,6 +3,7 @@ import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import EmptyTip from '../../components/empty-tip';
 import SharePermissionEditor from '../../components/select-editor/share-permission-editor';
 import SharedFolderInfo from '../../models/shared-folder-info';
 
@@ -24,10 +25,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <div className="empty-tip">
+        <EmptyTip>
           <h2>{gettext('You have not shared any folders')}</h2>
           <p>{gettext('You can share a single folder with a registered user if you don\'t want to share a whole library.')}</p>
-        </div>
+        </EmptyTip>
       );
 
       // sort
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 04cb3261b5..63ca340e7f 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -3,6 +3,7 @@ import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
+import EmptyTip from '../../components/empty-tip';
 import SharePermissionEditor from '../../components/select-editor/share-permission-editor';
 import SharedRepoInfo from '../../models/shared-repo-info';
 
@@ -24,10 +25,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <div className="empty-tip">
+        <EmptyTip>
           <h2>{gettext('You have not shared any libraries')}</h2>
           <p>{gettext('You can share libraries with your friends and colleagues by clicking the share icon of your own libraries in your home page or creating a new library in groups you are in.')}</p>
-        </div>
+        </EmptyTip>
       );
 
       // sort
diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js
index 99dba98931..56ea38a54d 100644
--- a/frontend/src/pages/share-admin/share-links.js
+++ b/frontend/src/pages/share-admin/share-links.js
@@ -2,13 +2,14 @@ import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import moment from 'moment';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, canGenerateUploadLink } from '../../utils/constants';
 import SharedLinkInfo from '../../models/shared-link-info';
 import ShareLinksPermissionEditor from '../../components/select-editor/share-links-permission-editor';
-import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
 import toaster from '../../components/toast';
+import EmptyTip from '../../components/empty-tip';
 
 class Content extends Component {
 
@@ -66,10 +67,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <div className="empty-tip">
+        <EmptyTip>
           <h2>{gettext('You don\'t have any share links')}</h2>
           <p>{gettext('You can generate a share link for a folder or a file. Anyone who receives this link can view the folder or the file online.')}</p>
-        </div>
+        </EmptyTip>
       );
 
       // sort
diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js
index e91dfacb78..97d3efb2ae 100644
--- a/frontend/src/pages/share-admin/upload-links.js
+++ b/frontend/src/pages/share-admin/upload-links.js
@@ -5,6 +5,7 @@ import { gettext, siteRoot, loginUrl, canGenerateShareLink } from '../../utils/c
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import SharedUploadInfo from '../../models/shared-upload-info';
+import EmptyTip from '../../components/empty-tip';
 
 class Content extends Component {
 
@@ -39,10 +40,10 @@ class Content extends Component {
       return <p className="error text-center">{errorMsg}</p>;
     } else {
       const emptyTip = (
-        <div className="empty-tip">
+        <EmptyTip>
           <h2>{gettext('You don\'t have any upload links')}</h2>
           <p>{gettext('You can generate an upload link from any folder. Anyone who receives this link can upload files to this folder.')}</p>
-        </div>
+        </EmptyTip>
       );
 
       const table = (
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index aebda087f5..3af004ca42 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -8,6 +8,7 @@ import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
 import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 import ModalPotal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 
@@ -38,10 +39,10 @@ class Content extends Component {
     const { loading, errorMsg, items, sortBy, sortOrder } = this.props;
     
     const emptyTip = (
-      <div className="empty-tip">
+      <EmptyTip>
         <h2>{gettext('No libraries have been shared with you')}</h2>
         <p>{gettext('No libraries have been shared directly with you. You can find more shared libraries at "Shared with groups".')}</p>
-      </div>
+      </EmptyTip>
     );
 
     if (loading) {
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index f9b1fe4665..4af8343a40 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/frontend/src/pages/shared-with-all/public-shared-view.js
@@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils';
 import Repo from '../../models/repo';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 import ModalPortal from '../../components/modal-portal';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import CreateRepoDialog from '../../components/dialog/create-repo-dialog';
@@ -162,10 +163,10 @@ class PublicSharedView extends React.Component {
   render() {
     let errMessage = this.state.errMessage;
     let emptyTip = (
-      <div className="empty-tip">
+      <EmptyTip>
         <h2>{gettext('No public libraries')}</h2>
         <p>{gettext('You can create a public library by clicking the "New Library" button, others can view and download this library.')}</p>
-      </div>
+      </EmptyTip>
     );
     return (
       <Fragment>
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index e612c8f1fe..2731570d58 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/frontend/src/pages/wikis/wikis.js
@@ -6,6 +6,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl, canPublishRepo } from '../../utils/constants';
 import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
+import EmptyTip from '../../components/empty-tip';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import NewWikiDialog from '../../components/dialog/new-wiki-dialog';
 import WikiSelectDialog from '../../components/dialog/wiki-select-dialog';
@@ -157,10 +158,10 @@ class Wikis extends Component {
                 />
               }
               {(!this.state.loading && this.state.wikis.length === 0) &&
-                <div className="message empty-tip">
+                <EmptyTip>
                   <h2>{gettext('You do not have any public library')}</h2>
                   <p>{gettext('Public libraries are for publishing your contents in an organized way.')}</p>
-                </div>
+                </EmptyTip>
               }
             </div>
           </div>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 2ef1d0af76..bc00ed6521 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -1008,13 +1008,16 @@ a.table-sort-op:focus {
   
 /* empty-tip */
 .empty-tip {
-    margin: auto 1rem;
-    padding: 30px 40px;
-    background-color: #FAFAFA;
-    border: solid 1px #DDD;
+    margin: 5.5em 1em;
+    border: 1px solid #ddd;
     border-radius: 3px;
-    box-shadow: inset 0 0 8px #EEE;
-    margin-top: 5.5em;
+    padding: 30px 80px;
+    background-color: #fafafa;
+    text-align: center;
+}
+.no-items-img-tip {
+  display: inline-block;
+  margin-bottom: 20px; 
 }
 .empty-tip h2 {
     font-size: 1.25rem;
diff --git a/media/img/no-items-tip.png b/media/img/no-items-tip.png
new file mode 100644
index 0000000000..816fbf0d4c
Binary files /dev/null and b/media/img/no-items-tip.png differ