diff --git a/frontend/src/components/file-content-view/markdown.js b/frontend/src/components/file-content-view/markdown.js
index fe94c98899..719d1a1ed2 100644
--- a/frontend/src/components/file-content-view/markdown.js
+++ b/frontend/src/components/file-content-view/markdown.js
@@ -9,14 +9,13 @@ const { fileContent } = window.app.pageOptions;
 class FileContent extends React.Component {
   render() {
     return (
-      <div className="file-view-content flex-1 o-auto">
-        <div className="md-content">
-          <MarkdownViewer
-            markdownContent={fileContent}
-            showTOC={false}
-            scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-          />
-        </div>
+      <div className="file-view-content md-content">
+        <MarkdownViewer
+          isFetching={false}
+          value={fileContent}
+          isShowOutline={false}
+          mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+        />
       </div>
     );
   }
diff --git a/frontend/src/css/md-file-view.css b/frontend/src/css/md-file-view.css
index 4db22b0e88..eb26bba264 100644
--- a/frontend/src/css/md-file-view.css
+++ b/frontend/src/css/md-file-view.css
@@ -1,9 +1,14 @@
-.md-content {
-    box-shadow: 0 0 6px #ccc;
-    border: 1px solid #ccc;
-    padding: 70px 75px;
-    width: calc(100% - 40px);
-    max-width: 950px;
-    background: #fff;
-    margin: 0 auto;
+.file-view-content.md-content {
+    width: 100%;
+    height: 100%;
+    background: #f4f4f4;
+    border-right: none;
+    padding: 0;
+    display: flex;
+}
+
+.md-content .sf-slate-viewer-scroll-container .article {
+    border: 1px solid #ccc;
+    box-shadow: 0 0 6px #ccc;
+    padding: 70px 75px;
 }
diff --git a/frontend/src/css/shared-file-view.css b/frontend/src/css/shared-file-view.css
index efbb5c89f0..f488722ae3 100644
--- a/frontend/src/css/shared-file-view.css
+++ b/frontend/src/css/shared-file-view.css
@@ -48,24 +48,14 @@
   overflow: auto;
 }
 
-.shared-file-view-body .article {
-  min-height: calc(100% - 15px);
-  background: #fff;
-  padding: 40px 60px;
-  margin: 0 340px 15px 40px;
-  border: 1px solid #e6e6dd;
+.shared-file-view-body.md-view {
+  padding: 0;
+  display: flex;
+  min-height: 0;
 }
 
-.shared-file-view-body .article-no-outline {
-  max-width: 950px;
-  margin: 0 auto 15px;
-}
-
-.shared-file-view-body .seafile-markdown-outline {
-  width: 300px;
-  top: 145px;
-  bottom: 30px;
-  height: auto;
+.shared-file-view-body .sf-slate-viewer-outline {
+  top: 145px !important;
 }
 
 @media (max-width: 991.98px) {
@@ -73,27 +63,10 @@
     width: 100%;
     padding: 10px 20px;
   }
-  .shared-file-view-body .md-view {
-    width: 95%;
-  }
-  .shared-file-view-body .md-view {
-    padding: 55px 50px;
-  }
-}
 
-@media (max-width: 768px) {
-  .shared-file-view-body .md-view {
+  .sf-slate-viewer-article-container {
     padding: 0 10px;
     width: 100%;
-  }
-
-  .shared-file-view-body .md-view .article {
-    display: flex;
-    padding: 20px;
-    margin: 0;
-  }
-
-  .shared-file-view-body .seafile-markdown-outline {
-    display: none;
+    margin: 0 !important;
   }
 }
diff --git a/frontend/src/shared-file-view-markdown.js b/frontend/src/shared-file-view-markdown.js
index 215c52fe09..57c276407f 100644
--- a/frontend/src/shared-file-view-markdown.js
+++ b/frontend/src/shared-file-view-markdown.js
@@ -65,13 +65,6 @@ class FileContent extends React.Component {
     return Utils.changeMarkdownNodes(value, this.changeImageURL);
   };
 
-  updateForNoOutline = () => {
-    const $outline = document.querySelector('.md-view .seafile-markdown-outline');
-    const $main = document.querySelector('.md-view .article');
-    $outline.className += ' d-none';
-    $main.className += ' article-no-outline';
-  };
-
   render() {
     if (err) {
       return <SharedFileViewTip />;
@@ -82,20 +75,13 @@ class FileContent extends React.Component {
     }
 
     return (
-      <div className="shared-file-view-body">
-        <div className="md-view">
-          <MarkdownViewer
-            scriptSource={mediaUrl + 'js/mathjax/tex-svg.js'}
-            markdownContent={this.state.markdownContent}
-            showTOC={true}
-            updateForNoOutline={this.updateForNoOutline}
-            activeTitleIndex={''}
-            serviceURL={serviceURL}
-            sharedToken={sharedToken}
-            repoID={repoID}
-            modifyValueBeforeRender={this.modifyValueBeforeRender}
-          />
-        </div>
+      <div className="shared-file-view-body md-view">
+        <MarkdownViewer
+          value={this.state.markdownContent}
+          isShowOutline={true}
+          mathJaxSource={mediaUrl + 'js/mathjax/tex-svg.js'}
+          beforeRenderCallback={this.modifyValueBeforeRender}
+        />
       </div>
     );
   }