diff --git a/frontend/src/components/dialog/file-participant-dialog.js b/frontend/src/components/dialog/file-participant-dialog.js
index 03c51752d6..34c00e1d9f 100644
--- a/frontend/src/components/dialog/file-participant-dialog.js
+++ b/frontend/src/components/dialog/file-participant-dialog.js
@@ -5,7 +5,7 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import UserSelect from '../user-select';
 import toaster from '../toast';
-import '../../css/add-reviewer-dialog.css';
+import '../../css/participants-list.css';
 
 const fileParticipantListItemPropTypes = {
   participant: PropTypes.object.isRequired,
@@ -32,16 +32,16 @@ class FileParticipantListItem extends Component {
   render() {
     const { participant } = this.props;
     return (
-      <div className="reviewer-select-info" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+      <div className="participant-select-info" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
         <div className="d-flex">
-          <img className="avatar reviewer-select-avatar" src={participant.avatar_url} alt=""/>
-          <span className="reviewer-select-name ellipsis">{participant.name}</span>
+          <img className="avatar participant-select-avatar" src={participant.avatar_url} alt=""/>
+          <span className="participant-select-name ellipsis">{participant.name}</span>
         </div>
-          <i
-            className={`action-icon sf2-icon-x3 ${!this.state.isOperationShow &&'o-hidden'}`}
-            title={gettext('Delete')}
-            onClick={this.props.deleteFileParticipant.bind(this, participant.email)}
-          ></i>
+        <i
+          className={`action-icon sf2-icon-x3 ${!this.state.isOperationShow &&'o-hidden'}`}
+          title={gettext('Delete')}
+          onClick={this.props.deleteFileParticipant.bind(this, participant.email)}
+        ></i>
       </div>
     );
   }
@@ -72,7 +72,7 @@ class FileParticipantDialog extends Component {
   };
 
   deleteFileParticipant = (email) => {
-    const { repoID, filePath, dirent } = this.props;
+    const { repoID, filePath } = this.props;
     seafileAPI.deleteFileParticipant(repoID, filePath, email).then((res) => {
       this.props.onParticipantsChange(repoID, filePath);
     }).catch((error) => {
@@ -83,7 +83,7 @@ class FileParticipantDialog extends Component {
 
   addFileParticipant = () => {
     const { selectedOption } = this.state;
-    const { repoID, filePath, dirent } = this.props;
+    const { repoID, filePath } = this.props;
     if (!selectedOption || selectedOption.length === 0) {
       return;
     }
@@ -119,11 +119,11 @@ class FileParticipantDialog extends Component {
       <Modal isOpen={true} toggle={this.props.toggleFileParticipantDialog}>
         <ModalHeader toggle={this.props.toggleFileParticipantDialog}>{gettext('Participants')}</ModalHeader>
         <ModalBody>
-          <div className="add-reviewer">
+          <div className="participant-add">
             <UserSelect
               ref="userSelect"
               isMulti={false}
-              className="reviewer-select"
+              className="participant-select"
               placeholder={gettext('Select users...')}
               onSelectChange={this.handleSelectChange}
             />
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 984c4f18c5..ce8aafcbb5 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -19,6 +19,7 @@ const propTypes = {
   relatedFiles: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
   onRelatedFileChange: PropTypes.func.isRequired,
+  onParticipantsChange: PropTypes.func.isRequired,
   fileParticipantList: PropTypes.array.isRequired,
 };
 
diff --git a/frontend/src/components/file-view/participants-list.js b/frontend/src/components/file-view/participants-list.js
index 0190adc838..c9c9836ae4 100644
--- a/frontend/src/components/file-view/participants-list.js
+++ b/frontend/src/components/file-view/participants-list.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import ModalPortal from '../modal-portal';
 import FileParticipantDialog from '../dialog/file-participant-dialog';
 import { serviceURL } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
 import '../../css/participants-list.css';
 
 const propTypes = {
@@ -29,11 +28,11 @@ class ParticipantsList extends React.Component {
   render() {
     const { participants, repoID, filePath } = this.props;
     return (
-      <div className="file-participants mb-2 position-relative">
+      <div className="participants mb-2 position-relative">
         {participants.map((item, index) => {
           return <img src={serviceURL + item.avatar_url} className="avatar" alt="avatar" key={index} style={{left: index * -7 + 'px'}}/>;
         })}
-        <span className="add-file-participants" style={{left: participants.length * 21, top: 8 }} onClick={this.toggleDialog}>
+        <span className="add-participants" style={{left: participants.length * 21, top: 8 }} onClick={this.toggleDialog}>
           <i className="fas fa-plus-circle"></i>
         </span>
         {this.state.showDialog &&
diff --git a/frontend/src/css/participants-list.css b/frontend/src/css/participants-list.css
index a93d9e14ec..a09a11e756 100644
--- a/frontend/src/css/participants-list.css
+++ b/frontend/src/css/participants-list.css
@@ -1,18 +1,58 @@
-.file-participants {
+/* participants-list */
+.participants {
   min-height: 30px;
 }
-.file-participants .avatar {
+.participants .avatar {
   width: 28px;
   height: 28px;
   border: 2px solid #fff;
 }
-.file-participants .add-file-participants {
+.participants .add-participants {
   position: absolute;
   cursor: pointer;
 }
-.file-participants .add-file-participants i {
+.participants .add-participants i {
   font-size: 16px;
   color: rgb(229, 162, 82);
   border: 2px solid #fff;
   border-radius: 50%;
-}
\ No newline at end of file
+}
+/* file-participant-dialog */
+.participant-add {
+  display: flex;
+  justify-content: space-between;
+}
+.participant-add .participant-select {
+  width: 385px;
+}
+.participant-add .btn {
+  width: 75px;
+}
+.participant-select-info {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.participant-select-avatar {
+  margin-right: 10px;
+}
+.participant-select-name {
+  height: 2rem;
+  line-height: 2rem;
+}
+.participant-select-error {
+  margin-top: 1em;
+}
+.participant-select .true__dropdown-indicator, .participant-select .true__indicator-separator {
+  display: none;
+}
+.participant-select-info i {
+  opacity: 0;
+  margin-right: 10px;
+}
+.participant-select-info:hover i {
+  cursor: pointer;
+  opacity: 1;
+  color: #a4a4a4;
+}
diff --git a/frontend/src/history-trash-file-view.js b/frontend/src/history-trash-file-view.js
index d95ae969fd..37592353bf 100644
--- a/frontend/src/history-trash-file-view.js
+++ b/frontend/src/history-trash-file-view.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Utils } from './utils/utils';
-import { gettext, siteRoot } from './utils/constants';
 import FileView from './components/history-trash-file-view/file-view';
 import FileViewTip from './components/history-trash-file-view/file-view-tip';
 import Image from './components/file-content-view/image';