diff --git a/frontend/src/components/dir-view-mode/dir-column-file.js b/frontend/src/components/dir-view-mode/dir-column-file.js
index b7eec552c29..034aca5d8a4 100644
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -4,7 +4,7 @@ import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
-import WikiMarkdownViewer from '../wiki-markdown-viewer';
+import SeafileMarkdownViewer from '../seafile-markdown-viewer';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -70,7 +70,7 @@ class DirColumnFile extends React.Component {
       );
     }
     return (
-      <WikiMarkdownViewer
+      <SeafileMarkdownViewer
         isTOCShow={false}
         isFileLoading={this.props.isFileLoading}
         markdownContent={this.props.content}
@@ -93,7 +93,7 @@ class DirColumnFile extends React.Component {
             </div>
           }
         </Fragment>
-      </WikiMarkdownViewer>
+      </SeafileMarkdownViewer>
     );
   }
 }
diff --git a/frontend/src/components/markdown-view/history-list.js b/frontend/src/components/markdown-view/history-list.js
deleted file mode 100644
index 7b2a32f6319..00000000000
--- a/frontend/src/components/markdown-view/history-list.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/* eslint-disable linebreak-style */
-import React from 'react';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import Loading from '../loading';
-import moment from 'moment';
-import { gettext } from '../../utils/constants';
-import '../../css/markdown-viewer/history-viewer.css';
-
-const propTypes = {
-  editorApi: PropTypes.object.isRequired,
-  showDiffViewer: PropTypes.func.isRequired,
-  setDiffViewerContent: PropTypes.func.isRequired,
-  reloadDiffContent: PropTypes.func.isRequired,
-  toggleHistoryPanel: PropTypes.func.isRequired,
-};
-
-class HistoryList extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.perPage = 25;
-    this.state = {
-      historyList: [],
-      activeItem: 0,
-      currentPage: 1,
-      totalReversionCount: 0,
-      loading: false
-    };
-  }
-
-  componentDidMount() {
-    this.props.editorApi.listFileHistoryRecords(1, this.perPage).then((res) => {
-      this.setState({
-        historyList: res.data.data,
-        totalReversionCount: res.data.total_count
-      });
-      if (res.data.data.length > 1) {
-        axios.all([
-          this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path),
-          this.props.editorApi.getFileHistoryVersion(res.data.data[1].commit_id, res.data.data[1].path)
-        ]).then(axios.spread((res1, res2) => {
-          axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
-            this.props.showDiffViewer();
-            this.props.setDiffViewerContent(content1.data, content2.data);
-          }));
-        }));
-      } else {
-        this.props.editorApi.getFileHistoryVersion(res.data.data[0].commit_id, res.data.data[0].path).then((res) => {
-          this.props.editorApi.getFileContent(res.data).then((content) => {
-            this.props.showDiffViewer();
-            this.props.setDiffViewerContent(content.data, '');
-          });
-        });
-      }
-    });
-  }
-
-  onClick = (event, key, preItem, currentItem)=> {
-    if (key === this.state.activeItem) return false;
-    this.props.reloadDiffContent();
-    this.setState({
-      activeItem: key,
-    });
-    axios.all([
-      this.props.editorApi.getFileHistoryVersion(currentItem.commit_id, currentItem.path),
-      this.props.editorApi.getFileHistoryVersion(preItem.commit_id, preItem.path)
-    ]).then(axios.spread((res1, res2) => {
-      axios.all([this.props.editorApi.getFileContent(res1.data), this.props.editorApi.getFileContent(res2.data)]).then(axios.spread((content1,content2) => {
-        this.props.showDiffViewer();
-        this.props.setDiffViewerContent(content1.data, content2.data);
-      }));
-    }));
-  };
-
-  onScroll = (event) => {
-    const clientHeight = event.target.clientHeight;
-    const scrollHeight = event.target.scrollHeight;
-    const scrollTop    = event.target.scrollTop;
-    const isBottom = (clientHeight + scrollTop + 1 >= scrollHeight);
-    if (isBottom) {
-      if (this.state.totalReversionCount > this.perPage * this.state.currentPage) {
-        let currentPage = this.state.currentPage + 1;
-        this.setState({
-          currentPage: currentPage,
-          loading : true
-        });
-        this.props.editorApi.listFileHistoryRecords(currentPage, this.perPage).then((res) => {
-          let currentHistoryList = Object.assign([], this.state.historyList);
-          this.setState({
-            historyList: [...currentHistoryList, ...res.data.data],
-            loading : false
-          });
-        });
-      }
-    }
-  };
-
-  render() {
-    return (
-      <div className="seafile-history-side-panel">
-        <div className="seafile-history-title">
-          <div onClick={this.props.toggleHistoryPanel} className={'seafile-history-title-close'}>
-            <i className={'fa fa-times-circle'}/>
-          </div>
-          <div className={'seafile-history-title-text'}>{gettext('History Versions')}</div>
-        </div>
-        <ul onScroll={this.onScroll} className={'history-list-container'}>
-          {this.state.historyList ?
-            this.state.historyList.map((item, index = 0, arr) => {
-              let preItemIndex = index + 1;
-              if (preItemIndex === arr.length) {
-                preItemIndex = index;
-              }
-              return (
-                <HistoryItem
-                  onClick={this.onClick}
-                  ctime={item.ctime}
-                  className={this.state.activeItem === index ? 'item-active': ''}
-                  currentItem={item}
-                  name={item.creator_name}
-                  index={index}
-                  key={index}
-                  preItem={arr[preItemIndex]}
-                />
-              );
-            }) : <Loading/>
-          }
-          {
-            this.state.loading &&
-            <li className={'reloading-reversion'}><Loading style={{width: '0.5rem', margin: '0 auto', color: '#b0b0b0'}}/></li>
-          }
-        </ul>
-      </div>
-    );
-  }
-}
-
-HistoryList.propTypes = propTypes;
-
-
-const HistoryItempropTypes = {
-  ctime: PropTypes.string,
-  onClick: PropTypes.func,
-  index: PropTypes.number,
-  preItem: PropTypes.object,
-  currentItem: PropTypes.object,
-  name: PropTypes.string,
-  className: PropTypes.string,
-};
-
-class HistoryItem extends React.Component {
-  render() {
-    let time = moment.parseZone(this.props.ctime).format('YYYY-MM-DD HH:mm');
-    return (
-      <li onClick={(event) => this.props.onClick(event, this.props.index, this.props.preItem, this.props.currentItem)} className={'history-item-container ' + this.props.className}>
-        <div className="time">{time}</div>
-        <div className="owner"><i className="fa fa-square"/><span>{this.props.name}</span></div>
-      </li>
-    );
-  }
-}
-
-HistoryItem.propTypes = HistoryItempropTypes;
-
-
-export default HistoryList;
diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/seafile-markdown-viewer/index.js
similarity index 80%
rename from frontend/src/components/wiki-markdown-viewer.js
rename to frontend/src/components/seafile-markdown-viewer/index.js
index f4327d5a21a..9aae57ce179 100644
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/frontend/src/components/seafile-markdown-viewer/index.js
@@ -1,27 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EXTERNAL_EVENTS, EventBus, MarkdownViewer } from '@seafile/seafile-editor';
-import { gettext, isPublicWiki, mediaUrl, repoID, serviceURL, sharedToken, slug } from '../utils/constants';
-import Loading from './loading';
-import { Utils } from '../utils/utils';
+import { gettext, mediaUrl, serviceURL, sharedToken, slug } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../loading';
+
+import './style.css';
 
 const propTypes = {
+  isWiki: PropTypes.bool,
+  path: PropTypes.string,
+  repoID: PropTypes.string,
+  isTOCShow: PropTypes.bool,
   children: PropTypes.object,
   isFileLoading: PropTypes.bool.isRequired,
+  containerClassName: PropTypes.string,
   markdownContent: PropTypes.string.isRequired,
   latestContributor: PropTypes.string.isRequired,
   lastModified: PropTypes.string.isRequired,
   onLinkClick: PropTypes.func.isRequired,
-  isWiki: PropTypes.bool,
-  isTOCShow: PropTypes.bool,
-  // for dir-column-file component(import repoID is undefined)
-  repoID: PropTypes.string,
-  path: PropTypes.string,
 };
 
-const contentClass = 'wiki-page-content';
-
-class WikiMarkdownViewer extends React.Component {
+class SeafileMarkdownViewer extends React.Component {
 
   constructor(props) {
     super(props);
@@ -32,6 +32,7 @@ class WikiMarkdownViewer extends React.Component {
     const eventBus = EventBus.getInstance();
     this.unsubscribeLinkClick = eventBus.subscribe(EXTERNAL_EVENTS.ON_LINK_CLICK, this.onLinkClick);
   }
+
   componentWillUnmount() {
     this.unsubscribeLinkClick();
   }
@@ -50,9 +51,10 @@ class WikiMarkdownViewer extends React.Component {
   };
 
   changeInlineNode = (item) => {
+    const { repoID } = this.props;
     let url, imagePath;
-
-    if (item.type == 'image' && isPublicWiki) { // change image url
+    // isPublicWiki: in the old version, only public wiki need replace image url
+    if (item.type == 'image') { // change image url
       url = item.data.src;
       const re = new RegExp(serviceURL + '/lib/' + repoID +'/file.*raw=1');
       // different repo
@@ -113,10 +115,13 @@ class WikiMarkdownViewer extends React.Component {
     if (this.props.isFileLoading) {
       return <Loading />;
     }
-    // In dir-column-file repoID is one of props, width is 100%; In wiki-viewer repoID is not props, width isn't 100%
-    let contentClassName = `${this.props.repoID ? contentClass + ' w-100' : contentClass}`;
+    const { isWiki, containerClassName = '' } = this.props;
+    const containerClass = `wiki-page-container ${containerClassName}`;
+    // In dir-column-file width is 100%;
+    // In wiki-viewer width isn't 100%
+    const contentClassName = `wiki-page-content ${!isWiki ?  + 'w-100' : ''}`;
     return (
-      <div ref={this.scrollRef} className="wiki-page-container">
+      <div ref={this.scrollRef} className={containerClass}>
         <div className={contentClassName}>
           {this.props.children}
           {this.renderMarkdown()}
@@ -131,7 +136,7 @@ const defaultProps = {
   isWiki: false,
 };
 
-WikiMarkdownViewer.propTypes = propTypes;
-MarkdownViewer.defaultProps = defaultProps;
+SeafileMarkdownViewer.propTypes = propTypes;
+SeafileMarkdownViewer.defaultProps = defaultProps;
 
-export default WikiMarkdownViewer;
+export default SeafileMarkdownViewer;
diff --git a/frontend/src/components/seafile-markdown-viewer/style.css b/frontend/src/components/seafile-markdown-viewer/style.css
new file mode 100644
index 00000000000..7de311b977a
--- /dev/null
+++ b/frontend/src/components/seafile-markdown-viewer/style.css
@@ -0,0 +1,25 @@
+.wiki-page-container .article {
+  margin: 0;
+  padding: 0 10px;
+  max-width: none;
+  border: none;
+}
+
+.wiki-page-container .article span[data-url] {
+  cursor: pointer;
+}
+
+.wiki-page-container .article .ml-2 {
+  text-decoration: underline;
+}
+
+.wiki-page-container .article .ml-2:hover {
+  text-decoration: underline;
+  color:#eb8205;
+}
+
+#wiki-page-last-modified {
+  padding: 40px 10px;
+  font-size:12px;
+  color: #666;
+}
diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
index 143fc29e866..0d2901580ff 100644
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -22,7 +22,7 @@ const propTypes = {
   fileTags: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
   showShareBtn: PropTypes.bool.isRequired,
-  dirent: PropTypes.object.isRequired,
+  dirent: PropTypes.object,
 };
 
 class ViewFileToolbar extends React.Component {
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 84e2be0aebd..adf9faedf9d 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -136,10 +136,6 @@
   z-index: -1;
 }
 
-.cur-view-content .article {
-  padding: 40px;
-}
-
 .cur-view-content .hd {
   padding-bottom: 0;
   margin-bottom: .5em;
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index cd9c67e0da1..7c893011231 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -169,21 +169,12 @@
   flex: 1;
 }
 
-/* wiki-page-content */
-.wiki-page-content {
+.dir-content-main .wiki-page-content {
   flex: 1;
 }
 
-.wiki-page-content .ml-2 {
-  text-decoration: underline;
-}
-
-.wiki-page-content .ml-2:hover {
-  text-decoration: underline;
-  color:#eb8205;
-}
-
-.wiki-page-content .wiki-open-file {
+/* wiki-page-content children */
+.dir-content-main .wiki-open-file {
   width: 40px;
   height: 40px;
   font-size: 16px;
@@ -199,74 +190,28 @@
   cursor: pointer;
 }
 
-.wiki-page-content .wiki-open-file i {
+.dir-content-main .wiki-open-file i {
   position: absolute;
   top: 12px;
   left: 12px;
 }
 
-.wiki-page-content .wiki-open-file:hover {
+.dir-content-main .wiki-open-file:hover {
   background-color: #f6f6f6;
 }
 
-.wiki-page-content .sf-slate-viewer-scroll-container {
+.dir-content-main .sf-slate-viewer-scroll-container {
   padding: 0;
   background-color: #fff;
   border: none;
   overflow: inherit;
 }
 
-.wiki-page-content .sf-slate-viewer-article-container {
+.dir-content-main .sf-slate-viewer-article-container {
   display: block;
   width: 100%;
 }
 
-.dir-content-main .wiki-page-content .article {
-  margin: 0;
-  padding: 0 10px;
-  border: none;
-  max-width: fit-content;
-}
-
-.wiki-page-content a {
-  cursor: pointer;
-}
-.wiki-page-ops {
-  position: fixed;
-  top: 10px;
-}
-
-@media (min-width: 768px) {
-  .wiki-page-ops:before {
-    content:'';
-    border-left:1px solid #ddd;
-    position:absolute;
-    top:3px;
-    left:-16px;
-    bottom:3px;
-  }
-}
-
-.wiki-page-list-item {
-  word-break:break-all;
-  line-height:1.6;
-  margin:3px 0;
-}
-
-.wiki-page-link,
-.wiki-page-link:hover {
-  font-size:1.15em;
-  font-weight:normal;
-  color:#444;
-  margin-left:5px;
-}
-
-#wiki-page-last-modified {
-  padding: 40px 10px;
-  font-size:12px;
-  color: #666;
-}
-
 .dir-content-resize {
   flex: 0 0 .5%;
   cursor: ew-resize;
diff --git a/frontend/src/css/markdown-viewer/history-viewer.css b/frontend/src/css/markdown-viewer/history-viewer.css
deleted file mode 100644
index 57ab397dfa8..00000000000
--- a/frontend/src/css/markdown-viewer/history-viewer.css
+++ /dev/null
@@ -1,104 +0,0 @@
-.seafile-history-side-panel {
-  user-select: none;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
-}
-
-.history-side-panel-title {
-  height: 50px;
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 50px;
-  font-size: 1rem;
-  padding: 0 10px;
-  box-sizing: border-box;
-  background-color: rgb(250,250,249);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.history-side-panel-title .history-tile-text {
-  font-weight: bolder;
-}
-
-
-.history-side-panel-title .history-title-close {
-  color: #b9b9b9;
-}
-
-.history-side-panel-title .history-title-close:hover {
-  color: #888;
-}
-
-
-.history-list-container {
-  height: calc(100% - 36px);
-  overflow-y: hidden;
-}
-.history-list-container:hover {
-  overflow-y: auto;
-}
-
-.item-active {
-  background-color: #fdc297;
-}
-
-.history-item-container {
-  padding: 0.5rem .8rem;
-}
-
-.history-item-container:not(.item-active):hover {
-  background-color: #ffe7d5;
-}
-
-.history-item-container div {
- width: 100%;
-}
-
-.history-item-container .owner {
- margin-top: 0.2rem;
-}
-
-.history-item-container .owner i {
-  color: #549b5a;
-  font-size: 0.2rem;
-  margin-right: 0.2rem;
-  vertical-align: middle;
-}
-
-.history-item-container .owner span {
-  vertical-align: middle;
-}
-
-.diff-container {
-  flex: 1 1 auto;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-.diff-wrapper {
-  width: 90%;
-  border: 1px solid #e5e5e5;
-  margin: 20px auto;
-  background-color: #fff;
-  min-height: calc(100% - 40px);
-  padding: 70px 75px;
-}
-
-@media (max-width:991.8px) {
-  .diff-container {
-    width: 100%;
-    box-sizing: border-box;
-  }
-  .diff-wrapper {
-    padding: 20px;
-  }
-}
-@media (min-width:992px) {
-  .seafile-history-side-panel {
-    /* width: 260px; */
-    width: 100%;
-  }
-}
diff --git a/frontend/src/css/markdown-viewer/markdown-editor.css b/frontend/src/css/markdown-viewer/markdown-editor.css
deleted file mode 100644
index 0d19393334d..00000000000
--- a/frontend/src/css/markdown-viewer/markdown-editor.css
+++ /dev/null
@@ -1,182 +0,0 @@
-html, body, #root {
-  width: 100%;
-  height: 100%;
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-}
-
-.seafile-md-viewer {
-  height: 100%;
-  flex-direction: row;
-  position: relative;
-  float: none;
-}
-.sf-md-viewer-topbar-first,
-.sf-md-viewer-topbar-first-narrow {
-  padding: 4px 10px;
-  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
-  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
-  flex-shrink:0;
-  align-items: center;
-}
-.seafile-md-viewer-container {
-  width: 100%;
-  background-color: #fafaf9;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-  display: flex;
-}
-.seafile-md-viewer-container.side-panel-on {
-  width: calc(100% - 260px);
-}
-.seafile-md-viewer-slate {
-  flex: auto;
-  position: relative;
-  margin: 20px 0px 20px 5%;
-  max-width: calc(90% - 260px);
-}
-.seafile-md-viewer-main {
-  flex: auto;
-  overflow: auto;
-  background:#fafaf9;
-  width: 70%;
-}
-.seafile-md-viewer-slate.side-panel-on {
-  margin: 20px 5%;
-}
-/* outline */
-.seafile-md-viewer .seafile-editor-outline {
-  background-color: #fafaf9;
-  margin: 40px auto;
-  padding: 0 0.75rem 0 1.25rem;
-  border-left: 0;
-  width: 260px;
-  position: fixed;
-  top: 68px;
-  overflow-y: hidden;
-  right: 5%;
-  z-index: 1;
-  height: 80%;
-}
-.seafile-md-viewer .seafile-editor-outline:hover {
-  overflow: auto;
-}
-.seafile-md-viewer .seafile-editor-outline .active {
-  color: #eb8205;
-  border-left: 1px solid #eb8205;
-}
-.seafile-md-viewer .seafile-editor-outline-heading {
-  padding: 7px 0;
-  border-bottom: 1px solid #eee;
-  color: #a0a0a0;
-}
-.seafile-editor-outline .outline-h2, .seafile-editor-outline .outline-h3 {
-  height: 30px;
-  margin-left: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-}
-.seafile-editor-outline .outline-h2 {
-  padding-left: 20px;
-}
-.seafile-editor-outline .outline-h3 {
-  padding-left: 40px;
-}
-/* side-panel */
-.seafile-md-viewer-side-panel {
-  height: 100%;
-  overflow: hidden;
-  width: 260px;
-  position: fixed;
-  right: 0;
-  top: 87px;
-}
-.seafile-md-viewer-side-panel .seafile-history-side-panel {
-  width: 100%;
-  height: 100%;
-}
-.seafile-md-viewer-side-panel .seafile-history-side-panel {
-  border-left: 1px solid #e6e6dd;
-}
-@media (max-width:991.8px) {
-  .seafile-editor-outline {
-    display: none;
-  }
-  .seafile-md-viewer-slate {
-    width: calc(100% - 80px);
-    margin: 20px 40px;
-    max-width: 100%;
-  }
-}
-
-@media (max-width: 768px) {
-  .sf-md-viewer-topbar-first {
-    display: none !important;
-  }
-}
-@media (min-width: 768px) {
-  .sf-md-viewer-topbar-first-narrow {
-    display: none !important;
-  }
-}
-
-/* toolbar */
-.topbar-file-info {
-  display: inline-block;
-  margin-left: 8px;
-  /*
-    only select file info text
-  */
-  user-select: text;
-}
-.topbar-file-info .file-title {
-  font-size: 1.2rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-}
-
-.topbar-file-info .file-title .iconfont {
-  font-size: 0.875rem;
-}
-
-.topbar-file-info .file-title .file-star {
-  font-size: 0.875rem;
-  cursor: pointer;
-  margin-left: 0.5rem;
-  vertical-align: text-bottom;
-  color: #999;
-}
-
-.topbar-file-info .file-title .file-star .star {
-  color: #999;
-}
-
-.topbar-file-info .file-state {
-  font-size: 0.8125rem;
-}
-
-.topbar-file-info .file-state .file-modifier-name {
-  margin-right: 0.5rem;
-}
-
-.topbar-file-info .file-state .file-modifier-savedraft {
-  margin-left: 0.5rem;
-  color: #888;
-}
-
-.sf-md-viewer-content {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-  min-width: 0;
-}
\ No newline at end of file
diff --git a/frontend/src/pages/markdown-editor/css/markdown-editor.css b/frontend/src/pages/markdown-editor/css/markdown-editor.css
new file mode 100644
index 00000000000..e59f85e3188
--- /dev/null
+++ b/frontend/src/pages/markdown-editor/css/markdown-editor.css
@@ -0,0 +1,84 @@
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.sf-md-viewer-topbar-first,
+.sf-md-viewer-topbar-first-narrow {
+  padding: 4px 10px;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
+  flex-shrink:0;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .sf-md-viewer-topbar-first {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) {
+  .sf-md-viewer-topbar-first-narrow {
+    display: none !important;
+  }
+}
+
+/* toolbar */
+.topbar-file-info {
+  display: inline-block;
+  margin-left: 8px;
+  /*
+    only select file info text
+  */
+  user-select: text;
+}
+.topbar-file-info .file-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+}
+
+.topbar-file-info .file-title .iconfont {
+  font-size: 0.875rem;
+}
+
+.topbar-file-info .file-title .file-star {
+  font-size: 0.875rem;
+  cursor: pointer;
+  margin-left: 0.5rem;
+  vertical-align: text-bottom;
+  color: #999;
+}
+
+.topbar-file-info .file-title .file-star .star {
+  color: #999;
+}
+
+.topbar-file-info .file-state {
+  font-size: 0.8125rem;
+}
+
+.topbar-file-info .file-state .file-modifier-name {
+  margin-right: 0.5rem;
+}
+
+.topbar-file-info .file-state .file-modifier-savedraft {
+  margin-left: 0.5rem;
+  color: #888;
+}
+
+.sf-md-viewer-content {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+}
diff --git a/frontend/src/pages/markdown-editor/css/rich-editor.css b/frontend/src/pages/markdown-editor/css/rich-editor.css
deleted file mode 100644
index eef631e802b..00000000000
--- a/frontend/src/pages/markdown-editor/css/rich-editor.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.seafile-markdown-editor {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-}
-
-.seafile-markdown-editor .markdown-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  border-bottom: 1px solid #e5e5e5;
-  background-color: #fff;
-  user-select: none;
-  box-shadow: 0 3px 2px -2px rgba(200,200,200,.15);
-  z-index: 3;
-}
-
-.seafile-markdown-editor .markdown-editor-toolbar .editor-btn-group {
-  height: 100%;
-  padding: 5px 0 5px 5px;
-  font-size: 0.75rem;
-  border-right: 1px solid #e5e5e5;
-  color: #555555;
-}
-
-.seafile-markdown-editor .markdown-editor-content {
-  flex: 1;
-  display: flex;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.seafile-markdown-editor .markdown-editor-content .markdown-editor-wrapper {
-  flex: 1;
-  display: flex;
-  position: relative;
-  overflow-x: hidden;
-  min-height: 0;
-  min-width: 0;
-  background-color: #fafaf9;
-}
-
-.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper {
-  width: 0;
-  display: flex;
-  overflow: hidden;
-  min-width: 0;
-  min-height: 0;
-}
-
-.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper.show {
-  width: 300px;
-  background-color: #fff;
-  border-left: 1px solid #e6e6dd;
-  position: relative;
-}
-
-
-.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .file-info {
-  flex: 1;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-}
-
-.seafile-markdown-editor .markdown-editor-content .markdown-help-wrapper .help-info {
-  flex: 1;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-}
-
-.seafile-markdown-editor ::-webkit-scrollbar{
-  width: 8px;
-  height: 8px;
-}
-
-.seafile-markdown-editor ::-webkit-scrollbar-button {
-  display: none;
-}
-
-.seafile-markdown-editor ::-webkit-scrollbar-thumb {
-  background-color: rgb(206, 206, 212);
-  border-radius: 10px;
-}
-
-@media (max-width: 991.8px) {
-  .seafile-editor {
-    min-width: calc(100% - 40px);
-  }
-
-  .seafile-editor-main-panel {
-    width: calc(100% - 200px);
-  }
-
-  .seafile-editor-side-panel {
-    min-width: 200px;
-  }
-
-  .editor-container {
-    width: 100%;
-  }
-
-  .editor-container .editor {
-    margin: 20px !important;
-    padding: 20px 30px;
-  }
-}
-
-@media (max-width: 768px) {
-  .editor-container .editor {
-    margin: 0 !important;
-    padding: 10px 15px;
-    border: 0;
-  }
-}
-
-.full-screen .editor-container .article {
-  margin: 20px auto;
-  max-width: 950px;
-}
diff --git a/frontend/src/pages/markdown-editor/css/side-panel.css b/frontend/src/pages/markdown-editor/css/side-panel.css
deleted file mode 100644
index c8a10022d64..00000000000
--- a/frontend/src/pages/markdown-editor/css/side-panel.css
+++ /dev/null
@@ -1,89 +0,0 @@
-.seafile-markdown-editor .markdown-help-wrapper .side-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: #f5f5f5;
-  user-select: none;
-}
-
-.seafile-markdown-editor .side-panel .nav {
-  padding: 10px 0;
-  min-width: 125px;
-  border-bottom: 1px solid #eee;
-  height: 36px;
-  flex-wrap: nowrap;
-}
-
-.seafile-markdown-editor .side-panel .nav .nav-item {
-  padding: 0 0.75rem;
-}
-
-.seafile-markdown-editor .side-panel .nav .nav-link {
-  padding: 0 0.75rem;
-  transition: 0.3s color;
-  margin-right: 0;
-}
-
-.seafile-markdown-editor .side-panel .nav-link {
-  color: #888;
-}
-
-.seafile-markdown-editor .side-panel .nav .nav-link.active {
-  color: #ff9800;
-  border-bottom: 0;
-}
-
-.seafile-markdown-editor .side-panel .nav .iconfont {
-  font-weight: 700;
-  font-size: 0.875rem;
-}
-
-.seafile-markdown-editor .side-panel-content {
-  font-size: 0.937rem;
-  overflow: hidden;
-}
-
-.seafile-markdown-editor .side-panel-content:hover {
-  overflow: auto;
-}
-
-.image-view {
-  width: 200px;
-  height: 150px;
-  position: absolute;
-  background-color: #fff;
-  z-index: 1004;
-  box-shadow: 0 0 10px #aaa;
-  border-radius: 3px;
-  line-height: 150px;
-  overflow: hidden;
-  font-size: 0;
-  text-align: center;
-}
-
-.image-view img {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.image-view i {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  line-height: 150px;
-  font-size: 30px;
-  color: #eb8205;
-  -moz-animation: rotate 1.5s ease infinite;
-  -webkit-animation: rotate 1.5s ease infinite;
-  animation: rotate 1.5s ease infinite;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/frontend/src/pages/markdown-editor/index.js b/frontend/src/pages/markdown-editor/index.js
index ef4acb8d0b8..ba97c858db3 100644
--- a/frontend/src/pages/markdown-editor/index.js
+++ b/frontend/src/pages/markdown-editor/index.js
@@ -11,7 +11,7 @@ import HeaderToolbar from './header-toolbar';
 import editorApi from './editor-api';
 import DetailListView from './detail-list-view';
 
-import '../../css/markdown-viewer/markdown-editor.css';
+import './css/markdown-editor.css';
 
 const CryptoJS = require('crypto-js');
 const URL = require('url-parse');
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index ef9230b5d74..16ae9822ac6 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID, siteRoot, username, isPro } from '../../utils/constants';
-import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
+import SeafileMarkdownViewer from '../../components/seafile-markdown-viewer';
 import WikiDirListView from '../../components/wiki-dir-list-view/wiki-dir-list-view';
 import Loading from '../../components/loading';
 import { Utils } from '../../utils/utils';
@@ -121,14 +121,15 @@ class MainPanel extends Component {
             {!this.props.pathExist && errMessage}
             {this.props.pathExist && this.props.isDataLoading && <Loading />}
             {isViewingFile && (
-              <WikiMarkdownViewer
+              <SeafileMarkdownViewer
+                isWiki={true}
+                path={this.props.path}
+                repoID={repoID}
                 markdownContent={this.props.content}
                 isFileLoading={this.props.isDataLoading}
                 lastModified = {this.props.lastModified}
                 latestContributor={this.props.latestContributor}
                 onLinkClick={this.props.onLinkClick}
-                isWiki={true}
-                path={this.props.path}
               />
             )}
             {(!this.props.isDataLoading && !this.props.isViewFile) && (
diff --git a/frontend/src/pages/wiki/wiki.css b/frontend/src/pages/wiki/wiki.css
index 38df6ec63b9..9ebbf736721 100644
--- a/frontend/src/pages/wiki/wiki.css
+++ b/frontend/src/pages/wiki/wiki.css
@@ -94,28 +94,12 @@ img[src=""] {
   }
 }
 
-.wiki-page-container .article {
-  margin: 0;
-  padding: 0 10px;
-}
 
-.wiki-page-container .article h1 {
+/* reset article h1 */
+.wiki-main-panel .article h1 {
   margin-top: 0;
 }
 
-.wiki-page-container .article span[data-url] {
-  cursor: pointer;
-}
-
-.wiki-page-container .article .ml-2 {
-  text-decoration: underline;
-}
-
-.wiki-page-container .article .ml-2:hover {
-  text-decoration: underline;
-  color:#eb8205;
-}
-
 .wiki-page-container .outline-h2,
 .wiki-page-container .outline-h3 {
   height: 24px;
@@ -138,10 +122,6 @@ img[src=""] {
   margin: 0 !important;
 }
 
-.wiki-page-container .article {
-  border: none;
-}
-
 .wiki-page-container .sf-slate-viewer-outline {
   top: 79px;
   width: 200px;
@@ -152,9 +132,3 @@ img[src=""] {
     padding: 0 !important;
   }
 }
-
-#wiki-page-last-modified {
-  padding: 40px 10px;
-  font-size:12px;
-  color: #666;
-}