diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index b575759df1..09854e2ec8 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -5,6 +5,8 @@ import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap
 import { Link } from '@reach/router';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, isPro, username, folderPermEnabled } from '../../utils/constants';
+import ModalPotal from '../../components/modal-portal';
+import ShareDialog from '../../components/dialog/share-dialog';
 
 const propTypes = {
   currentGroup: PropTypes.object,
@@ -22,6 +24,7 @@ class SharedRepoListItem extends React.Component {
       highlight: false,
       isOperationShow: false,
       isItemMenuShow: false,
+      isShowSharedDialog: false,
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -109,7 +112,7 @@ class SharedRepoListItem extends React.Component {
         this.onItemDetails();
         break;
       case 'Share':
-        this.onItemShared();
+        this.onItemShare();
         break;
       case 'Unshare':
         this.onItemUnshare();
@@ -133,6 +136,7 @@ class SharedRepoListItem extends React.Component {
 
   onItemShare = () => {
     // todo
+    this.setState({isShowSharedDialog: true});
   }
 
   onItemUnshare = () => {
@@ -144,6 +148,10 @@ class SharedRepoListItem extends React.Component {
     // todo
   }
 
+  toggleShareDialog = () => {
+    this.setState({isShowSharedDialog: false});
+  }
+
   generatorOperations = () => {
     let { repo, currentGroup } = this.props;
     //todo this have a bug; use current api is not return admins param;
@@ -217,7 +225,7 @@ class SharedRepoListItem extends React.Component {
     // scene one: (share, delete, itemToggle and other operations);
     // scene two: (share, unshare), (share), (unshare)
     let operations = this.generatorOperations();
-    const shareOperation   = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShared}></a>;
+    const shareOperation   = <a href="#" className="sf2-icon-share sf2-x op-icon" title={gettext("Share")} onClick={this.onItemShare}></a>;
     const unshareOperation = <a href="#" className="sf2-icon-x3 sf2-x op-icon" title={gettext("Unshare")} onClick={this.onItemUnshare}></a>
     const deleteOperation  = <a href="#" className="sf2-icon-delete sf2-x op-icon" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
     
@@ -267,14 +275,27 @@ class SharedRepoListItem extends React.Component {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     let { repo } = this.props;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-        <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
-        <td><Link to={libPath}>{repo.repo_name}</Link></td>
-        <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
-        <td>{repo.size}</td>
-        <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
-        <td title={repo.owner_contact_email}>{repo.owner_name}</td>
-      </tr>
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+          <td><img src={iconUrl} title={repo.iconTitle} alt={iconTitle} width="24" /></td>
+          <td><Link to={libPath}>{repo.repo_name}</Link></td>
+          <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
+          <td>{repo.size}</td>
+          <td title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</td>
+          <td title={repo.owner_contact_email}>{repo.owner_name}</td>
+        </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+            <ShareDialog 
+              itemType={'library'}
+              itemName={repo.repo_name}
+              itemPath={'/'}
+              repoID={repo.repo_id}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
   }
   
@@ -282,16 +303,29 @@ class SharedRepoListItem extends React.Component {
     let { iconUrl, iconTitle, libPath } = this.getRepoComputeParams();
     let { repo } = this.props;
     return (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
-        <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
-        <td>
-          <Link to={libPath}>{repo.repo_name}</Link><br />
-          <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
-          <span className="item-meta-info">{repo.size}</span>
-          <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
-        </td>
-        <td>{this.generatorMobileMenu()}</td>
-      </tr>
+      <Fragment>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''}  onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+          <td><img src={iconUrl} title={iconTitle} alt={iconTitle}/></td>
+          <td>
+            <Link to={libPath}>{repo.repo_name}</Link><br />
+            <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>
+            <span className="item-meta-info">{repo.size}</span>
+            <span className="item-meta-info" title={moment(repo.last_modified).format('llll')}>{moment(repo.last_modified).fromNow()}</span>
+          </td>
+          <td>{this.generatorMobileMenu()}</td>
+        </tr>
+        {this.state.isShowSharedDialog && (
+          <ModalPotal>
+            <ShareDialog 
+              itemType={'library'}
+              itemName={repo.repo_name}
+              itemPath={'/'}
+              repoID={repo.repo_id}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPotal>
+        )}
+      </Fragment>
     );
   }
 
diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js
index 679d4b9eb0..f9ced61e6b 100644
--- a/frontend/src/pages/my-libs/item.js
+++ b/frontend/src/pages/my-libs/item.js
@@ -264,13 +264,13 @@ class Item extends Component {
         </tr>
         {this.state.isShowSharedDialog && (
           <ModalPotal>
-              <ShareDialog 
-                itemType={'library'}
-                itemName={data.repo_name}
-                itemPath={'/'}
-                repoID={data.repo_id}
-                toggleDialog={this.toggleShareDialog}
-              />
+            <ShareDialog 
+              itemType={'library'}
+              itemName={data.repo_name}
+              itemPath={'/'}
+              repoID={data.repo_id}
+              toggleDialog={this.toggleShareDialog}
+            />
           </ModalPotal>
         )}
       </Fragment>
@@ -292,13 +292,13 @@ class Item extends Component {
         </tr>
         {this.state.isShowSharedDialog && (
           <ModalPotal>
-              <ShareDialog 
-                itemType={'library'}
-                itemName={data.repo_name}
-                itemPath={'/'}
-                repoID={data.repo_id}
-                toggleDialog={this.toggleShareDialog}
-              />
+            <ShareDialog 
+              itemType={'library'}
+              itemName={data.repo_name}
+              itemPath={'/'}
+              repoID={data.repo_id}
+              toggleDialog={this.toggleShareDialog}
+            />
           </ModalPotal>
         )}
       </Fragment>
diff --git a/seahub/urls.py b/seahub/urls.py
index 66824debbc..8a4ef1739a 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -204,7 +204,7 @@ urlpatterns = [
     url(r'^shared-libs/$', react_fake_view, name="shared_libs"),
     url(r'^my-libs/$', react_fake_view, name="my_libs"),
     url(r'^groups/$', react_fake_view, name="groups"),
-    url(r'^group/(?P<group_id>\d+)/$', react_group, name="group"),
+    url(r'^group/.*$', react_fake_view, name="group"),
     url(r'^library/.*$', react_fake_view, name="lib_view"),
     url(r'^my-libs/deleted/$', react_fake_view, name="my_libs_deleted"),