diff --git a/frontend/src/css/system-stat.css b/frontend/src/css/system-stat.css
index fd9ece677f..3f4e22f0bc 100644
--- a/frontend/src/css/system-stat.css
+++ b/frontend/src/css/system-stat.css
@@ -25,10 +25,6 @@
   width: 120px;
 }
 
-.error-tip {
-  color: red;
-}
-
 .statistic-traffic-tab {
   display: flex;
   font-size: 13px;
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 2e023ec14d..430a3278ff 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
 import classnames from 'classnames';
 import { navigate } from '@gatsbyjs/reach-router';
-import { gettext, siteRoot, username } from '../../utils/constants';
+import { gettext, siteRoot, username, mediaUrl } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
@@ -335,28 +335,28 @@ class GroupView extends React.Component {
               className={classnames('cur-view-content', 'd-block', 'repos-container', { 'pt-3': currentViewMode != LIST_MODE })}
               onScroll={this.handleScroll}
             >
-              {isLoading
-                ? <Loading />
-                : errMessage
-                  ? <p className="error text-center mt-2">{errMessage}</p>
-                  : repoList.length == 0
-                    ? emptyTip
-                    : (
-                      <SharedRepoListView
-                        repoList={this.state.repoList}
-                        hasNextPage={this.state.hasNextPage}
-                        currentGroup={this.state.currentGroup}
-                        sortBy={this.state.sortBy}
-                        sortOrder={this.state.sortOrder}
-                        sortItems={this.sortItems}
-                        onItemUnshare={this.onItemUnshare}
-                        onItemDelete={this.onItemDelete}
-                        onItemRename={this.onItemRename}
-                        onMonitorRepo={this.onMonitorRepo}
-                        onTransferRepo={this.onItemTransfer}
-                        currentViewMode={currentViewMode}
-                      />
-                    )
+              {isLoading ? <Loading /> : errMessage ?
+                <div className="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+                  <img src={`${mediaUrl}img/error-tip.png`} alt="" width="100" />
+                  <p className="mt-2">{errMessage}</p>
+                </div>
+                : repoList.length == 0
+                  ? emptyTip
+                  :
+                  <SharedRepoListView
+                    repoList={this.state.repoList}
+                    hasNextPage={this.state.hasNextPage}
+                    currentGroup={this.state.currentGroup}
+                    sortBy={this.state.sortBy}
+                    sortOrder={this.state.sortOrder}
+                    sortItems={this.sortItems}
+                    onItemUnshare={this.onItemUnshare}
+                    onItemDelete={this.onItemDelete}
+                    onItemRename={this.onItemRename}
+                    onMonitorRepo={this.onMonitorRepo}
+                    onTransferRepo={this.onItemTransfer}
+                    currentViewMode={currentViewMode}
+                  />
               }
             </div>
           </div>
diff --git a/frontend/src/pages/invitations/invitations-view.js b/frontend/src/pages/invitations/invitations-view.js
index 9c7131a63b..229daa86c3 100644
--- a/frontend/src/pages/invitations/invitations-view.js
+++ b/frontend/src/pages/invitations/invitations-view.js
@@ -3,7 +3,7 @@ import { DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import classnames from 'classnames';
-import { gettext } from '../../utils/constants';
+import { gettext, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
@@ -172,7 +172,12 @@ class Content extends Component {
     }
 
     if (errorMsg) {
-      return <p className="error text-center mt-2">{errorMsg}</p>;
+      return (
+        <div className="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+          <img src={`${mediaUrl}img/error-tip.png`} alt="" width="100" />
+          <p className="mt-2">{errorMsg}</p>
+        </div>
+      );
     }
 
     if (!invitationsList.length) {
diff --git a/frontend/src/pages/org-admin/org-group-info.js b/frontend/src/pages/org-admin/org-group-info.js
index bc88c26393..8cb008832d 100644
--- a/frontend/src/pages/org-admin/org-group-info.js
+++ b/frontend/src/pages/org-admin/org-group-info.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { orgAdminAPI } from '../../utils/org-admin-api';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
 import OrgAdminGroupNav from '../../components/org-admin-group-nav';
@@ -65,7 +65,12 @@ class Content extends Component {
       return <Loading />;
     }
     if (errorMsg) {
-      return <p className="error text-center mt-2">{errorMsg}</p>;
+      return (
+        <div className="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+          <img src={`${mediaUrl}img/error-tip.png`} alt="" width="100" />
+          <p className="mt-2">{errorMsg}</p>
+        </div>
+      );
     }
 
     return (
diff --git a/frontend/src/pages/org-admin/org-group-members.js b/frontend/src/pages/org-admin/org-group-members.js
index 1b9e3ebc86..a04edc19d7 100644
--- a/frontend/src/pages/org-admin/org-group-members.js
+++ b/frontend/src/pages/org-admin/org-group-members.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@gatsbyjs/reach-router';
 import { orgAdminAPI } from '../../utils/org-admin-api';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
 import OrgAdminGroupNav from '../../components/org-admin-group-nav';
@@ -69,7 +69,12 @@ class Content extends Component {
       return <Loading />;
     }
     if (errorMsg) {
-      return <p className="error text-center mt-2">{errorMsg}</p>;
+      return (
+        <div className="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+          <img src={`${mediaUrl}img/error-tip.png`} alt="" width="100" />
+          <p className="mt-2">{errorMsg}</p>
+        </div>
+      );
     }
 
     return (
diff --git a/frontend/src/pages/org-admin/org-group-repos.js b/frontend/src/pages/org-admin/org-group-repos.js
index 4d62b84109..c360261e04 100644
--- a/frontend/src/pages/org-admin/org-group-repos.js
+++ b/frontend/src/pages/org-admin/org-group-repos.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Link } from '@gatsbyjs/reach-router';
 import { orgAdminAPI } from '../../utils/org-admin-api';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import Loading from '../../components/loading';
 import toaster from '../../components/toast';
@@ -72,7 +72,12 @@ class Content extends Component {
       return <Loading />;
     }
     if (errorMsg) {
-      return <p className="error text-center mt-2">{errorMsg}</p>;
+      return (
+        <div className="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+          <img src={`${mediaUrl}img/error-tip.png`} alt="" width="100" />
+          <p className="mt-2">{errorMsg}</p>
+        </div>
+      );
     }
 
     return (
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 86908f24f6..c9a18e8099 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -336,7 +336,6 @@ img {
   margin: 0;
 }
 
-body,
 input,
 textarea,
 button,
@@ -680,17 +679,7 @@ table img {
 }
 
 .error {
-  color: red;
-}
-
-.errorlist {
-  color: red;
-  padding: 0;
-}
-
-.error-tip {
-  text-align: center;
-  margin-top: 5em;
+  color: #212529;
 }
 
 .ovhd {
@@ -1416,7 +1405,7 @@ textarea:-moz-placeholder {
   padding: 5px;
   background: #FDF;
   margin: 0;
-  color: #000;
+  color: #212529;
 }
 
 /**** narrow-panel ****/
@@ -3004,8 +2993,3 @@ a.sf-popover-item {
   margin-right: 2px;
   background-color: #DBDBDB;
 }
-
-.unable-view-file-tip {
-  margin-top: 20px;
-  font-size: 1.125rem;
-}
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 30b0373241..7d31142263 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -309,7 +309,7 @@ a, a:hover {
 }
 
 .error {
-  color: red;
+  color: #212529;
 }
 
 .no-deco,
diff --git a/media/img/error-tip.png b/media/img/error-tip.png
index 982cbce628..5f5efbb8ee 100644
Binary files a/media/img/error-tip.png and b/media/img/error-tip.png differ
diff --git a/media/img/failed-to-view-file.png b/media/img/failed-to-view-file.png
deleted file mode 100644
index 5f5efbb8ee..0000000000
Binary files a/media/img/failed-to-view-file.png and /dev/null differ
diff --git a/seahub/templates/404.html b/seahub/templates/404.html
index 394ba50b24..bb82fd047c 100644
--- a/seahub/templates/404.html
+++ b/seahub/templates/404.html
@@ -1,8 +1,9 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block main_panel %}
-<div class="text-panel">
+{% block main_content %}
+<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+  <img src="{{MEDIA_URL}}img/error-tip.png" alt="" width="100" />
   <p>{% trans "Sorry, but the requested page could not be found." %}</p>
 </div>
 {% endblock %}
diff --git a/seahub/templates/error.html b/seahub/templates/error.html
index c93c2c546f..52012b768c 100644
--- a/seahub/templates/error.html
+++ b/seahub/templates/error.html
@@ -1,15 +1,13 @@
 {% extends 'base.html' %}
 
 {% block main_content %}
-<div class="text-panel">
-  {% if unable_view_file %}
-  <img src="{{MEDIA_URL}}img/failed-to-view-file.png" alt="" width="100" />
-  <p class="unable-view-file-tip">{{ error_msg }}</p>
-  {% elif organization_inactive %}
+<div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
+  {% if organization_inactive %}
   <img src="{{MEDIA_URL}}img/organization-inactive.png" alt="" width="100" />
   <p>{{ error_msg }}</p>
   {% else %}
-  <p class="error">{{ error_msg }}</p>
+  <img src="{{MEDIA_URL}}img/error-tip.png" alt="" width="100" />
+  <p>{{ error_msg }}</p>
   {% endif %}
 </div>
 {% endblock %}
diff --git a/seahub/utils/__init__.py b/seahub/utils/__init__.py
index e0597cff7b..6b26546d83 100644
--- a/seahub/utils/__init__.py
+++ b/seahub/utils/__init__.py
@@ -157,10 +157,8 @@ FILEEXT_TYPE_MAP = gen_fileext_type_map()
 def render_permission_error(request, msg=None, extra_ctx=None):
     """
     Return permisson error page.
-
     """
     ctx = {}
-    ctx['unable_view_file'] = msg == _('Unable to view file')
     ctx['error_msg'] = msg or _('permission error')
 
     if extra_ctx:
@@ -172,10 +170,8 @@ def render_permission_error(request, msg=None, extra_ctx=None):
 def render_error(request, msg=None, extra_ctx=None):
     """
     Return normal error page.
-
     """
     ctx = {}
-    ctx['unable_view_file'] = msg == _('Unable to view file')
     ctx['error_msg'] = msg or _('Internal Server Error')
 
     if extra_ctx:
@@ -187,7 +183,6 @@ def render_error(request, msg=None, extra_ctx=None):
 def list_to_string(l):
     """
     Return string of a list.
-
     """
     return ','.join(l)