diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
index 596a80c661..8de5de9fa4 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -144,6 +144,9 @@ class DirentGridItem extends React.Component {
     gridClass += this.state.isGridSelected ? " grid-selected-active" : " ";
     gridClass += this.state.isGridDropTipShow ? " grid-drop-show" : " ";
 
+    let lockedInfo = gettext('locked by {name}');
+    lockedInfo = lockedInfo.replace('{name}', dirent.lock_owner_name);
+
     return(
       <Fragment>
         <li className="grid-item" onContextMenu={this.onGridItemContextMenu} onMouseDown={this.onGridItemMouseDown}>
@@ -161,7 +164,7 @@ class DirentGridItem extends React.Component {
               <img src={`${siteRoot}${fileUrl}`} ref={this.gridIcon} className="thumbnail" onClick={this.onItemClick} alt=""/> :
               <img src={iconUrl} ref={this.gridIcon} width="96" alt='' />
             }
-            {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={dirent.lock_owner_name}/>}
+            {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
           </div>
           <div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable="true" >
             <a className={`grid-file-name-link ${this.state.isGridSelected ? "grid-link-selected-active" : ""}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index 770a78351e..71bf93aa67 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -225,6 +225,8 @@ class DirentGridView extends React.Component{
     seafileAPI.lockfile(repoID, filePath).then(() => {
       this.props.updateDirent(currentObject, 'is_locked', true);
       this.props.updateDirent(currentObject, 'locked_by_me', true);
+      let lockName = username.split('@');
+      this.props.updateDirent(currentObject, 'lock_owner_name', lockName[0]);
     });
   }
 
@@ -234,6 +236,7 @@ class DirentGridView extends React.Component{
     seafileAPI.unlockfile(repoID, filePath).then(() => {
       this.props.updateDirent(currentObject, 'is_locked', false);
       this.props.updateDirent(currentObject, 'locked_by_me', false);
+      this.props.updateDirent(currentObject, 'lock_owner_name', '');
     });
   }
 
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index f2aad49bc8..9fe750caef 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import MD5 from 'MD5';
 import { UncontrolledTooltip } from 'reactstrap';
-import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl, username } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -269,15 +269,18 @@ class DirentListItem extends React.Component {
     seafileAPI.lockfile(repoID, filePath).then(() => {
       this.props.updateDirent(this.props.dirent, 'is_locked', true);
       this.props.updateDirent(this.props.dirent, 'locked_by_me', true);
+      let lockName = username.split('@');
+      this.props.updateDirent(this.props.dirent, 'lock_owner_name', lockName[0]);
     });
   }
-
+  
   onUnlockItem = () => {
     let repoID = this.props.repoID;
     let filePath = this.getDirentPath(this.props.dirent);
     seafileAPI.unlockfile(repoID, filePath).then(() => {
       this.props.updateDirent(this.props.dirent, 'is_locked', false);
       this.props.updateDirent(this.props.dirent, 'locked_by_me', false);
+      this.props.updateDirent(this.props.dirent, 'lock_owner_name', '');
     });
   }
 
@@ -501,6 +504,9 @@ class DirentListItem extends React.Component {
     trClass += (activeDirent && activeDirent.name === dirent.name)  ? 'tr-active' : '';
     trClass += dirent.isSelected? 'tr-active' : '';
 
+    let lockedInfo = gettext('locked by {name}');
+    lockedInfo = lockedInfo.replace('{name}', dirent.lock_owner_name);
+
     return (
       <Fragment>
         <tr 
@@ -531,7 +537,7 @@ class DirentListItem extends React.Component {
                 <img ref='drag_icon' src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail cursor-pointer" onClick={this.onItemClick} alt="" /> :
                 <img ref='drag_icon' src={iconUrl} width="24" alt='' />
               }
-              {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={dirent.lock_owner_name}/>}
+              {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
             </div>
           </td>
           <td className="name">
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 7470949184..91f18eded4 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -915,7 +915,7 @@ table td {
 .rename-container input {
     box-sizing: content-box;
     padding: 2px 3px;
-    width: 15rem;
+    width: 10rem;
     height: 22px;
     line-height: 19px;
     border-radius: 2px;