diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index b8b9abdd55..1c9a15d102 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -107,7 +107,7 @@ class DirPath extends React.Component {
           <InternalLinkOperation repoID={this.props.repoID} path={this.props.currentPath}/>
         )}
         {(this.props.isViewFile && fileTags.length !== 0) &&
-          <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1">
+          <span id='column-mode-file-tags' className="tag-list tag-list-stacked align-middle ml-1 d-flex align-items-center">
             {fileTags.map((fileTag, index) => {
               return (<span className="file-tag" key={fileTag.id} style={{zIndex: index, backgroundColor: fileTag.color}}></span>);
             })}
diff --git a/frontend/src/components/dirent-detail/dirent-details.js b/frontend/src/components/dirent-detail/dirent-details.js
index a78c574733..15446c4960 100644
--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -157,7 +157,7 @@ class DirentDetail extends React.Component {
   }
 
   renderDetailBody = (bigIconUrl, folderDirent) => {
-    const { dirent } = this.props;
+    const { dirent, fileTags } = this.props;
     return (
       <Fragment>
         <div className="detail-body dirent-info">
@@ -171,7 +171,7 @@ class DirentDetail extends React.Component {
                 dirent={this.props.dirent || folderDirent}
                 direntType={this.state.direntType}
                 direntDetail={this.state.direntDetail}
-                fileTagList={dirent ? dirent.file_tags : []}
+                fileTagList={dirent ? dirent.file_tags : fileTags}
                 onFileTagChanged={this.props.onFileTagChanged}
                 fileParticipantList={this.state.fileParticipantList}
                 onParticipantsChange={this.onParticipantsChange}
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 0320530010..5fc0f138a6 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -350,6 +350,7 @@ class LibContentContainer extends React.Component {
                   path={this.props.path}
                   dirent={this.state.currentDirent}
                   currentRepoInfo={this.props.currentRepoInfo}
+                  fileTags={this.props.isViewFile ? this.props.fileTags : []}
                   onFileTagChanged={this.props.onFileTagChanged}
                   onItemDetailsClose={this.props.closeDirentDetail}
                   direntDetailPanelTab={this.props.direntDetailPanelTab}
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 7acb7cd937..ba7ae94988 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1333,7 +1333,12 @@ class LibContentView extends React.Component {
       let fileTags = res.data.file_tags.map(item => {
         return new FileTag(item);
       });
-      this.updateDirent(dirent, 'file_tags', fileTags);
+
+      if (this.state.isViewFile) {
+        this.setState({fileTags: fileTags});
+      } else {
+        this.updateDirent(dirent, 'file_tags', fileTags);
+      }
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);