diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index ced6cebb5b..30338de2da 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -63,7 +63,7 @@ class GenerateShareLink extends React.Component {
   }
 
   generatePassword = () => {
-    let val = Math.random().toString(36).substr(2);
+    let val = Math.random().toString(36).substr(5);
     this.setState({
       password: val,
       passwordnew: val
diff --git a/frontend/src/components/dialog/generate-upload-link.js b/frontend/src/components/dialog/generate-upload-link.js
index 7d2af905b9..327d610bc5 100644
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -55,7 +55,7 @@ class GenerateUploadLink extends React.Component {
   }
 
   generatePassword = () => {
-    let val = Math.random().toString(36).substr(2);
+    let val = Math.random().toString(36).substr(5);
     this.setState({
       password: val,
       passwordnew: val
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index cefe1f2d4f..d02768f826 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -35,7 +35,7 @@ class ShareDialog extends React.Component {
     return (
       <Fragment>
         <div className="share-dialog-side">
-          <Nav pills>
+          <Nav pills vertical>
             <NavItem>
               <NavLink className={activeTab === 'shareLink' ? 'active' : ''} onClick={this.toggle.bind(this, 'shareLink')}>
                 {gettext('Share Link')}
@@ -83,7 +83,7 @@ class ShareDialog extends React.Component {
     return (
       <Fragment>
         <div className="share-dialog-side">
-          <Nav pills>
+          <Nav pills vertical>
             <NavItem>
               <NavLink
                 className={activeTab === 'shareLink' ? 'active' : ''} onClick={() => {this.toggle.bind(this, 'shareLink');}}>
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index cfe217c55b..3f384ea104 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -108,7 +108,7 @@ class DirView extends React.Component {
   
   onAddFile = (filePath, isDraft) => {
     let repoID = this.state.repoID;
-    seafileAPI.createDir(repoID, filePath).then(() => {
+    seafileAPI.createFile(repoID, filePath, isDraft).then(() => {
       let name = Utils.getFileName(filePath);
       let dirent = this.createDirent(name, 'file');
       let direntList = this.addItem(dirent, 'file');
diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 998b1937df..cb06d7c856 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -70,7 +70,7 @@ class MainSideNav extends React.Component {
         <li className="nav-item"> 
           <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={() => this.tabItemClick('groups')}>
             <span className="sharp" aria-hidden="true">#</span>
-            {gettext('All Groups')}
+            <span className="nav-text">{gettext('All Groups')}</span>
           </Link>
         </li>
         {this.state.groupItems.map(item => {
@@ -78,7 +78,7 @@ class MainSideNav extends React.Component {
             <li key={item.id} className="nav-item"> 
               <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.id)}`} onClick={() => this.tabItemClick(item.id)}>
                 <span className="sharp" aria-hidden="true">#</span>
-                {item.name}
+                <span className="nav-text">{item.name}</span>
               </Link>
             </li>
           );
@@ -101,19 +101,19 @@ class MainSideNav extends React.Component {
         <li className="nav-item">
           <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
             <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Libraries')}
+            <span className="nav-text">{gettext('Libraries')}</span>
           </Link>
         </li>
         <li className="nav-item">
           <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Folders')}
+            <span className="nav-text">{gettext('Folders')}</span>
           </Link>
         </li>
         <li className="nav-item">
           <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links') || this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
-            {gettext('Links')}
+            <span className="nav-text">{gettext('Links')}</span>
           </Link>
         </li>
       </ul>
@@ -129,20 +129,20 @@ class MainSideNav extends React.Component {
             <li className="nav-item">
               <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs')}`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
                 <span className="sf2-icon-user" aria-hidden="true"></span>
-                {gettext('My Libraries')}
+                <span className="nav-text">{gettext('My Libraries')}</span>
               </Link>
             </li>
             <li className="nav-item">
               <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
                 <span className="sf2-icon-share" aria-hidden="true"></span>
-                {gettext('Shared with me')}
+                <span className="nav-text">{gettext('Shared with me')}</span>
               </Link>
             </li>
             { canViewOrg &&
               <li className="nav-item" onClick={() => this.tabItemClick('org')}>
                 <a href={ siteRoot + '#org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
                   <span className="sf2-icon-organization" aria-hidden="true"></span>
-                  {gettext('Shared with all')}
+                  <span className="nav-text">{gettext('Shared with all')}</span>
                 </a>
               </li>
             }
@@ -150,7 +150,7 @@ class MainSideNav extends React.Component {
               <a className="nav-link ellipsis" title={gettext('Shared with groups')} onClick={this.grpsExtend}>
                 <span className={`toggle-icon float-right fas ${this.state.groupsExtended ?'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
                 <span className="sf2-icon-group" aria-hidden="true"></span>
-                {gettext('Shared with groups')}
+                <span className="nav-text">{gettext('Shared with groups')}</span>
               </a>
               {this.renderSharedGroups()}
             </li>
@@ -161,25 +161,25 @@ class MainSideNav extends React.Component {
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>
-                {gettext('Favorites')}
+                <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Acitivities')} onClick={() => this.tabItemClick('dashboard')}>
                 <span className="sf2-icon-clock" aria-hidden="true"></span>
-                {gettext('Acitivities')}
+                <span className="nav-text">{gettext('Acitivities')}</span>
               </Link>
             </li>
             <li className="nav-item">
               <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
                 <span className="sf2-icon-monitor" aria-hidden="true"></span>
-                {gettext('Linked Devices')}
+                <span className="nav-text">{gettext('Linked Devices')}</span>
               </Link>
             </li>
             <li className="nav-item" onClick={() => this.tabItemClick('drafts')}>
               <Link className={`nav-link ellipsis ${this.getActiveClass('drafts') || this.getActiveClass('reviews')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                 <span className="sf2-icon-edit" aria-hidden="true"></span>
-                <span className="draft-info">
+                <span className="draft-info nav-text">
                   {gettext('Drafts')}  
                   {this.props.draftCounts === 0 ? '' : <Badge color="info" pill>{this.props.draftCounts}</Badge>}
                 </span>
@@ -188,8 +188,8 @@ class MainSideNav extends React.Component {
             <li className="nav-item flex-column" id="share-admin-nav">
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
-                <span aria-hidden="true" className="sf2-icon-wrench"></span>
-                {gettext('Share Admin')}
+                <span className="sf2-icon-wrench" aria-hidden="true"></span>
+                <span className="nav-text">{gettext('Share Admin')}</span>
               </a>
               {this.renderSharedAdmin()}
             </li>
diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css
index 5fd00a8f76..05a3b67378 100644
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -4,7 +4,7 @@
 }
 
 .share-dialog .share-dialog-content {
-    padding: 1rem 1rem 2rem;
+    padding: 0;
     min-height: 15rem;
     display: flex;
     flex-direction: row;
@@ -13,15 +13,14 @@
 .share-dialog-content .share-dialog-side {
     display: flex;
     flex: 0 0 22%;
-}
-
-.share-dialog-content .share-dialog-side .nav {
-    flex-direction: column;
+    padding: 1rem 0 0 1rem;
+    border-right: 1px solid #eee;
 }
 
 .share-dialog-content .share-dialog-main {
     display: flex;
     flex: 0 0 78%;
+    padding: 1rem 1.5rem 2rem;
 }
 .share-dialog-content .share-dialog-main .tab-content {
     flex: 1;
@@ -69,10 +68,6 @@
     font-size: 0.875rem;
 }
 
-.share-dialog .nav .nav-item .nav-link.active {
-    font-weight: normal;
-}
-
 input.expire-input {
     display: inline-block;
     width: 5rem;
diff --git a/frontend/src/pages/group/group.js b/frontend/src/pages/group/group.js
index 9dd64cad79..44de0cad30 100644
--- a/frontend/src/pages/group/group.js
+++ b/frontend/src/pages/group/group.js
@@ -137,7 +137,7 @@ class Content extends Component {
       };
 
       const table = (
-        <table className="table table-hover table-vcenter">
+        <table>
           {window.innerWidth >= 768 ? desktopThead : mobileThead}
           <TableBody items={items} extra={extraData} />
         </table>
@@ -185,7 +185,17 @@ class Group extends Component {
   }
 
   componentDidMount() {
-    seafileAPI.getGroup(this.props.groupID).then((res) => {
+    this.updateGroupRepoList(this.props.groupID);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.groupID !== this.props.groupID) {
+      this.updateGroupRepoList(nextProps.groupID);
+    }
+  }
+
+  updateGroupRepoList = (groupID) => {
+    seafileAPI.getGroup(groupID).then((res) => {
       // res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
       this.setState({
         groupMetaInfo: {
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index bcc45eabf7..e5419daa67 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -58,13 +58,13 @@ class Content extends Component {
       const desktopThead = (
         <thead>
           <tr>
-            <th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
-            <th width="34%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
-            <th width="24%"><span className="sr-only">{gettext("Actions")}</span></th>
+            <th width="4%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="42%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
+            <th width="14%"><span className="sr-only">{gettext("Actions")}</span></th>
 
-            <th width={showStorageBackend ? '14%' : '20%'}>{gettext("Size")}</th>
+            <th width={showStorageBackend ? '15%' : '20%'}>{gettext("Size")}</th>
             {showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
-            <th width={showStorageBackend ? '10%' : '14%'}>{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
+            <th width={showStorageBackend ? '15%' : '20%'}>{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
           </tr>
         </thead>
       );
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 74b29561ef..576d39cd51 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -261,7 +261,7 @@ ul,ol,li {
 }
 .op-icon.sf2-x:hover,
 .op-icon.sf2-x:focus {
-    text-decoration: underline;
+    border-bottom: 0.125rem solid #f89a68;;
 }
 
 /** Account info **/
@@ -420,7 +420,6 @@ a.op-icon:focus {
 
 .nav-pills .nav-item .nav-link.active {
     background-color: #feac74;
-    font-weight: bold;
     color: #fff;
     border: none;
 }
@@ -471,7 +470,7 @@ a.op-icon:focus {
     margin-left:auto;
 }
 
-.side-nav-con .nav {
+.side-nav-con>.nav {
     margin-bottom: 1rem;
 }
 
@@ -481,15 +480,17 @@ a.op-icon:focus {
     padding-right: 0;
     margin-right: 0;
 }
+.side-nav-con .active .sharp,
+.side-nav-con .active .nav-text {
+    font-weight: bold;
+}
 
 .side-nav-con .active [class^="sf2-icon-"],
 .side-nav-con .active .sharp {
-    background-color: #feac74;
     color: #fff;
-    border: none;
 }
 
-.side-nav-con  [class^="sf2-icon-"] {
+.side-nav-con [class^="sf2-icon-"] {
     display:inline-block;
     width:2.625rem;
     margin-right:0.325rem;
@@ -500,7 +501,7 @@ a.op-icon:focus {
     color:#999;
 }
 
-.side-nav-con  .sharp {
+.side-nav-con .sharp {
     display:inline-block;
     width:2.625rem;
     margin-right:0.25rem;
@@ -508,7 +509,8 @@ a.op-icon:focus {
     color:#aaa;
 }
 
-.side-nav-con  .toggle-icon {
+.side-nav-con .toggle-icon {
+    margin-right: 0.25rem;
     height: 1.5rem;
     display: flex;
     align-items: center;
@@ -516,12 +518,12 @@ a.op-icon:focus {
     color:#999;
 }
 
-.side-nav-con  .draft-info {
+.side-nav-con .draft-info {
     position: relative;
     line-height: 1.5rem;
 }
 
-.side-nav-con  .draft-info .badge {
+.side-nav-con .draft-info .badge {
     right: -1.5rem;
 }