diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 7e5de20f76..4bb9659f29 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -20,6 +20,7 @@ import LeaveGroupDialog from '../../components/dialog/leave-group-dialog';
 import SharedRepoListView from '../../components/shared-repo-list-view/shared-repo-list-view';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import SingleDropdownToolbar from '../../components/toolbar/single-dropdown-toolbar';
+import NewLibrary from '../my-libs/new-library';
 
 import '../../css/group-view.css';
 
@@ -388,7 +389,7 @@ class GroupView extends React.Component {
   };
 
   render() {
-    const { errMessage, emptyTip, currentGroup, isDepartmentGroup, isMembersDialogOpen } = this.state;
+    const { errMessage, emptyTip, currentGroup, isDepartmentGroup, isMembersDialogOpen, isStaff } = this.state;
 
     let useRate = 0;
     if (isDepartmentGroup && currentGroup.group_quota) {
@@ -442,19 +443,24 @@ class GroupView extends React.Component {
               {(!this.state.isLoading && errMessage) && <div className="error text-center mt-2">{errMessage}</div>}
               {(!this.state.isLoading && this.state.repoList.length === 0) && emptyTip}
               {(!this.state.isLoading && this.state.repoList.length > 0) &&
-                <SharedRepoListView
-                  repoList={this.state.repoList}
-                  hasNextPage={this.state.hasNextPage}
-                  currentGroup={this.state.currentGroup}
-                  sortBy={this.state.sortBy}
-                  sortOrder={this.state.sortOrder}
-                  sortItems={this.sortItems}
-                  onItemUnshare={this.onItemUnshare}
-                  onItemDelete={this.onItemDelete}
-                  onItemRename={this.onItemRename}
-                  onMonitorRepo={this.onMonitorRepo}
-                  onTransferRepo={this.onItemTransfer}
-                />
+                <>
+                  <SharedRepoListView
+                    repoList={this.state.repoList}
+                    hasNextPage={this.state.hasNextPage}
+                    currentGroup={this.state.currentGroup}
+                    sortBy={this.state.sortBy}
+                    sortOrder={this.state.sortOrder}
+                    sortItems={this.sortItems}
+                    onItemUnshare={this.onItemUnshare}
+                    onItemDelete={this.onItemDelete}
+                    onItemRename={this.onItemRename}
+                    onMonitorRepo={this.onMonitorRepo}
+                    onTransferRepo={this.onItemTransfer}
+                  />
+                  {((!isDepartmentGroup && canAddRepo) || (isDepartmentGroup && isStaff)) &&
+                    <NewLibrary onClick={this.onCreateRepoToggle} />
+                  }
+                </>
               }
             </div>
           </div>
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index e82c7e2ed8..06fea598ea 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -168,6 +168,7 @@ class MyLibraries extends Component {
                   onTransferRepo={this.onTransferRepo}
                   onMonitorRepo={this.onMonitorRepo}
                   sortRepoList={this.sortRepoList}
+                  toggleCreateRepoDialog={this.toggleCreateRepoDialog}
                 />
               }
             </div>
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-view.js b/frontend/src/pages/my-libs/mylib-repo-list-view.js
index ec6e80d243..e4833569cc 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@@ -8,6 +8,7 @@ import { LIST_MODE } from '../../components/dir-view-mode/constants';
 import ContextMenu from '../../components/context-menu/context-menu';
 import { Utils } from '../../utils/utils';
 import { hideMenu, handleContextClick } from '../../components/context-menu/actions';
+import NewLibrary from './new-library';
 
 const propTypes = {
   sortBy: PropTypes.string.isRequired,
@@ -116,22 +117,41 @@ class MylibRepoListView extends React.Component {
     const sortIcon = this.props.sortOrder === 'asc' ? <span className="sf3-font sf3-font-down rotate-180 d-inline-block"></span> : <span className="sf3-font sf3-font-down"></span>;
 
     return currentViewMode == LIST_MODE ? (
-      <table className={inAllLibs ? 'table-thead-hidden' : ''}>
-        <thead>
-          <tr>
-            <th width="4%"></th>
-            <th width="3%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width={showStorageBackend ? '36%' : '35%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByName}>{gettext('Name')} {this.props.sortBy === 'name' && sortIcon}</a></th>
-            <th width="10%"><span className="sr-only">{gettext('Actions')}</span></th>
-            <th width={showStorageBackend ? '15%' : '14%'}><a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>{gettext('Size')} {this.props.sortBy === 'size' && sortIcon}</a></th>
-            {showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
-            <th width={showStorageBackend ? '15%' : '34%'}><a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>{gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}</a></th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.renderRepoListView()}
-        </tbody>
-      </table>
+      <>
+        <table className={inAllLibs ? 'table-thead-hidden' : ''}>
+          <thead>
+            <tr>
+              <th width="4%"></th>
+              <th width="3%">
+                <span className="sr-only">{gettext('Library Type')}</span>
+              </th>
+              <th width={showStorageBackend ? '36%' : '35%'}>
+                <a className="d-block table-sort-op" href="#" onClick={this.sortByName}>
+                  {gettext('Name')} {this.props.sortBy === 'name' && sortIcon}
+                </a>
+              </th>
+              <th width="10%">
+                <span className="sr-only">{gettext('Actions')}</span>
+              </th>
+              <th width={showStorageBackend ? '15%' : '14%'}>
+                <a className="d-block table-sort-op" href="#" onClick={this.sortBySize}>
+                  {gettext('Size')} {this.props.sortBy === 'size' && sortIcon}
+                </a>
+              </th>
+              {showStorageBackend ? <th width="17%">{gettext('Storage Backend')}</th> : null}
+              <th width={showStorageBackend ? '15%' : '34%'}>
+                <a className="d-block table-sort-op" href="#" onClick={this.sortByTime}>
+                  {gettext('Last Update')} {this.props.sortBy === 'time' && sortIcon}
+                </a>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.renderRepoListView()}
+          </tbody>
+        </table>
+        {!inAllLibs && <NewLibrary onClick={this.props.toggleCreateRepoDialog} />}
+      </>
     ) : (
       <div className="d-flex justify-content-between flex-wrap">
         {this.renderRepoListView()}
diff --git a/frontend/src/pages/my-libs/new-library.css b/frontend/src/pages/my-libs/new-library.css
new file mode 100644
index 0000000000..61e907d652
--- /dev/null
+++ b/frontend/src/pages/my-libs/new-library.css
@@ -0,0 +1,31 @@
+.new-library-container {
+  height: 41px;
+  line-height: 41px;
+  border-bottom: 1px solid #e8e8e8;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  margin-bottom: 60px;
+}
+
+.new-library-container:hover {
+  background-color: #f8f8f8;
+}
+
+.new-library-container .new-library-star {
+  width: 4%;
+}
+
+.new-library-container .new-library-plus {
+  width: 3%;
+  padding-right: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #999;
+}
+
+.new-library-container .new-library-text {
+  padding-left: 3px;
+  font-size: 0.875rem;
+}
diff --git a/frontend/src/pages/my-libs/new-library.js b/frontend/src/pages/my-libs/new-library.js
new file mode 100644
index 0000000000..95ad8c0903
--- /dev/null
+++ b/frontend/src/pages/my-libs/new-library.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { gettext } from '../../utils/constants';
+import './new-library.css';
+
+export default function NewLibrary({ onClick }) {
+  return (
+    <div className="new-library-container" onClick={onClick}>
+      <div className="new-library-star"></div>
+      <div className="new-library-plus">
+        <i className="sf2-icon-plus nav-icon" aria-hidden="true"></i>
+      </div>
+      <div className="new-library-text" aria-label={gettext('New Library')}>{gettext('New Library')}</div>
+    </div>
+  );
+}