diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d2b3f1ec06..3bbb7b76e8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,7 +16,7 @@
         "@gatsbyjs/reach-router": "1.3.9",
         "@seafile/react-image-lightbox": "2.0.8",
         "@seafile/resumablejs": "1.1.16",
-        "@seafile/sdoc-editor": "1.0.71",
+        "@seafile/sdoc-editor": "1.0.72",
         "@seafile/seafile-calendar": "0.0.12",
         "@seafile/seafile-editor": "^1.0.116",
         "@seafile/sf-metadata-ui-component": "^0.0.31",
@@ -4783,9 +4783,9 @@
       "integrity": "sha512-8rBbmAEuuwOAGHYGCtEzpx+bxAcGS+V30otMmhRe7bPAdh4E57RWgCa8x7pkzHGFlY1t5d+ILz1gojvPVMYQig=="
     },
     "node_modules/@seafile/sdoc-editor": {
-      "version": "1.0.71",
-      "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.71.tgz",
-      "integrity": "sha512-BJSvKICn8NbSBPWqJ2KhqDjXYt0L2aQ6s365X/sVrDEMcYmqN4hwBScRaiwW3Db3mD8GOEu/1VGhSA71JIkUIA==",
+      "version": "1.0.72",
+      "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.72.tgz",
+      "integrity": "sha512-ugLUXgfExMie5+pVkCLpBVfivWcsO8eUTDl8P7qmbB0ntQA8eAC5BisHNZ4kZHIaWOWj+bs7z0LLlg0jFa7p2Q==",
       "dependencies": {
         "@seafile/print-js": "1.6.6",
         "@seafile/react-image-lightbox": "2.0.4",
diff --git a/frontend/package.json b/frontend/package.json
index 63978508e3..1f14d03de1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
     "@gatsbyjs/reach-router": "1.3.9",
     "@seafile/react-image-lightbox": "2.0.8",
     "@seafile/resumablejs": "1.1.16",
-    "@seafile/sdoc-editor": "1.0.71",
+    "@seafile/sdoc-editor": "1.0.72",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "^1.0.116",
     "@seafile/sf-metadata-ui-component": "^0.0.31",
diff --git a/frontend/src/components/dirent-detail/detail/header/index.js b/frontend/src/components/dirent-detail/detail/header/index.js
index 87f412bf3a..fb87e85e72 100644
--- a/frontend/src/components/dirent-detail/detail/header/index.js
+++ b/frontend/src/components/dirent-detail/detail/header/index.js
@@ -4,7 +4,8 @@ import Icon from '../../../icon';
 
 import './index.css';
 
-const Header = ({ title, icon, onClose }) => {
+const Header = ({ title, icon, onClose, component = {} }) => {
+  const { closeIcon } = component;
   return (
     <div className="detail-header">
       <div className="detail-title dirent-title">
@@ -12,7 +13,7 @@ const Header = ({ title, icon, onClose }) => {
         <span className="name ellipsis" title={title}>{title}</span>
       </div>
       <div className="detail-control" onClick={onClose}>
-        <Icon symbol="close" className="detail-control-close" />
+        {closeIcon ? closeIcon : (<Icon symbol="close" className="detail-control-close" />)}
       </div>
     </div>
   );
@@ -21,6 +22,7 @@ const Header = ({ title, icon, onClose }) => {
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
+  component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
index f9232e9a60..17062c448b 100644
--- a/frontend/src/components/dirent-detail/embedded-file-details/index.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -10,8 +10,8 @@ import { MetadataContext } from '../../../metadata';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className }) => {
-
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component }) => {
+  const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
   useEffect(() => {
@@ -44,7 +44,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
       })}
       style={{ width }}
     >
-      <Header title={direntName} icon={smallIconUrl} onClose={onClose} />
+      <Header title={direntName} icon={smallIconUrl} onClose={onClose} component={headerComponent} />
       <Body>
         {dirent && direntDetail && (
           <div className="detail-content">
@@ -66,6 +66,7 @@ EmbeddedFileDetails.propTypes = {
   dirent: PropTypes.object,
   path: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
+  component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/pages/sdoc/sdoc-editor/index.css b/frontend/src/pages/sdoc/sdoc-editor/index.css
new file mode 100644
index 0000000000..fa45dbbab3
--- /dev/null
+++ b/frontend/src/pages/sdoc/sdoc-editor/index.css
@@ -0,0 +1,25 @@
+.sdoc-content-right-panel .cur-view-detail {
+  border-left: none;
+}
+
+.sdoc-content-right-panel .cur-view-detail .detail-header {
+  border-bottom-color: #EAECEF;
+  height: 46px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  line-height: 1.5;
+}
+
+.sdoc-content-right-panel .detail-header .detail-control:hover {
+  background-color: inherit;
+}
+
+.sdoc-content-right-panel .detail-header .sdoc-sm-close {
+  color: #999;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.sdoc-content-right-panel .detail-header .detail-control:hover .sdoc-sm-close {
+  color: #5a5a5a;
+}
diff --git a/frontend/src/pages/sdoc/sdoc-editor/index.js b/frontend/src/pages/sdoc/sdoc-editor/index.js
index ce5fd6721f..ea6beab5d6 100644
--- a/frontend/src/pages/sdoc/sdoc-editor/index.js
+++ b/frontend/src/pages/sdoc/sdoc-editor/index.js
@@ -7,6 +7,8 @@ import { Utils } from '../../../utils/utils';
 import { useCollaborators } from '../../../metadata';
 import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details';
 
+import './index.css';
+
 const SdocEditor = () => {
   const [isStarred, setStarted] = useState(window.app.pageOptions.isStarred);
   const [isDraft] = useState(window.app.pageOptions.isSdocDraft);
@@ -22,7 +24,21 @@ const SdocEditor = () => {
         resizable_width: true,
         display_type: 'right-panel',
         component: ({ onClose, width }) => {
-          return (<EmbeddedFileDetails repoID={repoID} onClose={onClose} path={docPath} dirent={currentDirent} repoInfo={{ permission: docPerm }} width={width} />);
+          return (
+            <EmbeddedFileDetails
+              repoID={repoID}
+              path={docPath}
+              dirent={currentDirent}
+              repoInfo={{ permission: docPerm }}
+              width={width - 1}
+              component={{
+                headerComponent: {
+                  closeIcon: (<i className="sdocfont sdoc-sm-close"></i>)
+                }
+              }}
+              onClose={onClose}
+            />
+          );
         },
       }
     ];