diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index 866f9690d7..59c1e0eebe 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { siteRoot } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
@@ -22,7 +23,8 @@ class Search extends Component {
       isMaskShow: false,
       isResultShow: false,
       isResultGetted: false,
-      isCloseShow: false
+      isCloseShow: false,
+      isSearchInputShow: false, // for mobile
     };
     this.inputValue = '';
     this.source = null; // used to cancel request;
@@ -161,7 +163,8 @@ class Search extends Component {
       isCloseShow: false,
       isResultShow: false,
       isResultGetted: false,
-      resultItems: []
+      resultItems: [],
+      isSearchInputShow: false,
     });
   }
 
@@ -212,33 +215,74 @@ class Search extends Component {
     );
   }
 
+  onSearchToggle = () => {
+    this.setState({
+      isSearchInputShow: !this.state.isSearchInputShow,
+      isMaskShow: !this.state.isMaskShow,
+    });
+  }
+
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
     return (
-      <div className="search">
-        <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
-        <div className="search-container">
-          <div className="input-icon">
-            <i className="search-icon-left input-icon-addon fas fa-search"></i>
-            <input 
-              type="text" 
-              className="form-control search-input" 
-              name="query"
-              placeholder={this.props.placeholder}
-              style={style}
-              value={this.state.value}
-              onFocus={this.onFocusHandler}
-              onChange={this.onChangeHandler}
-              autoComplete="off"
-            />
-            {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+      <Fragment>
+        <MediaQuery query="(min-width: 768px)">
+          <div className="search">
+            <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
+            <div className="search-container">
+              <div className="input-icon">
+                <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                <input 
+                  type="text" 
+                  className="form-control search-input" 
+                  name="query"
+                  placeholder={this.props.placeholder}
+                  style={style}
+                  value={this.state.value}
+                  onFocus={this.onFocusHandler}
+                  onChange={this.onChangeHandler}
+                  autoComplete="off"
+                />
+                {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+              </div>
+              <div className="search-result-container">
+                {this.renderSearchResult()}
+              </div>
+            </div>
           </div>
-          <div className="search-result-container">
-            {this.renderSearchResult()}
+        </MediaQuery>
+        <MediaQuery query="(max-width: 768px)">
+          <div className="search-icon-container">
+            <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
           </div>
-        </div>
-      </div>
+          {this.state.isSearchInputShow && 
+            <div className="search">
+              <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
+              <div className="search-container">
+                <div className="input-icon">
+                  <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                  <input 
+                    type="text" 
+                    className="form-control search-input" 
+                    name="query"
+                    placeholder={this.props.placeholder}
+                    style={style}
+                    value={this.state.value}
+                    onFocus={this.onFocusHandler}
+                    onChange={this.onChangeHandler}
+                    autoComplete="off"
+                  />
+                  {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+                </div>
+                <div className="search-result-container">
+                  {this.renderSearchResult()}
+                </div>
+              </div>
+            </div>
+          }
+        </MediaQuery>
+      </Fragment>
     );
   }
 }
diff --git a/frontend/src/components/toolbar/repo-view-toobar.js b/frontend/src/components/toolbar/repo-view-toobar.js
index 7e104f7d4d..91d79026d6 100644
--- a/frontend/src/components/toolbar/repo-view-toobar.js
+++ b/frontend/src/components/toolbar/repo-view-toobar.js
@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
@@ -39,26 +40,31 @@ class RepoViewToolbar extends React.Component {
   render() {
     return (
       <Fragment>
-        <div className="cur-view-toolbar border-left-show">
-          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
-          <div className="operation">
-            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-            </button>
-            {this.props.libraryType !== 'group' && (
-              <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
-                <DropdownToggle className='btn btn-secondary operation-item'>
-                  {gettext('More')}
-                </DropdownToggle>
-                <DropdownMenu>
-                  <DropdownItem className="link-dropdown-container">
-                    <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
-                  </DropdownItem>
-                </DropdownMenu>
-              </Dropdown>
-            )}
+          <div className="cur-view-toolbar border-left-show">
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
+            <MediaQuery query="(min-width: 768px)">
+              <div className="operation">
+                <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+                </button>
+                {this.props.libraryType !== 'group' && (
+                  <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
+                    <DropdownToggle className='btn btn-secondary operation-item'>
+                      {gettext('More')}
+                    </DropdownToggle>
+                    <DropdownMenu>
+                      <DropdownItem className="link-dropdown-container">
+                        <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
+                )}
+              </div>
+            </MediaQuery>
+            <MediaQuery query="(max-width: 768px)">
+              <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
+            </MediaQuery>
           </div>
-        </div>
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>
             <CreateRepoDialog 
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 770ce7c139..d374edc3d6 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -53,6 +53,16 @@
   border-bottom: 1px solid #e8e8e8;
 }
 
+@media (max-width: 767px) {
+  .side-panel-north {
+      border-right: 1px solid #eee;
+  }
+
+  .main-panel-north {
+    padding-bottom: 0.25rem;
+  }
+}
+
 .side-panel-center,
 .main-panel-center {
   display: flex;
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 6dbb0a6b8d..de7c380859 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -85,3 +85,45 @@
 .item-content .item-text b {
   font-weight: bold;
 }
+
+@media (max-width: 767px) {
+  .common-toolbar .search {
+    margin: 0;
+  }
+  
+  .search-icon-container {
+    display: flex;
+    width: 2rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-icon {
+    font-size: 1.25rem;
+    line-height: 1;
+    color: #999;
+  }
+
+  .search-container {
+    position: fixed;
+    z-index: 2;
+    top: 5rem;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .search-input {
+    height: 2.5rem;
+    width: 20rem !important;
+    box-shadow: 5px 5px 5px #888888;
+  }
+
+  .search-result-container {
+    position: absolute;
+    top: 2.5rem;
+    left: auto;
+    width: 20rem;
+  }
+}
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index 30c19a6114..f9d916812c 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -241,11 +241,11 @@ class MylibRepoListItem extends React.Component {
             />
           )}
           {!this.state.isRenaming && repo.repo_name && (
-            <Link to={repoURL}>{repo.repo_name}</Link>
+            <div><Link to={repoURL}>{repo.repo_name}</Link></div>
           )}
           {!this.state.isRenaming && !repo.repo_name && 
-            (gettext('Broken (please contact your administrator to fix this library)'))
-          }<br />
+            <div>(gettext('Broken (please contact your administrator to fix this library)'))</div>
+          }
           <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>
@@ -267,10 +267,10 @@ class MylibRepoListItem extends React.Component {
     let repo = this.props.repo;
     return (
       <Fragment>
-        <MediaQuery query="(min-device-width: 768px)">
+        <MediaQuery query="(min-width: 768px)">
           {this.renderPCUI()}
         </MediaQuery>
-        <MediaQuery query="(max-device-width: 768px)">
+        <MediaQuery query="(max-width: 768px)">
           {this.renderMobileUI()}
         </MediaQuery>
         {this.state.isShareDialogShow && (
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 7e1e25a96b..414c019b1c 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-view.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-view.js
@@ -98,8 +98,8 @@ class MylibRepoListView extends React.Component {
       <table>
         <thead>
           <tr>
-            <th width="18%"><span className="sr-only">{gettext('Library Type')}</span></th>
-            <th width="76%">
+            <th width="10%"><span className="sr-only">{gettext('Library Type')}</span></th>
+            <th width="84%">
               {gettext('Sort:')}
               <a className="table-sort-op" href="#" onClick={this.sortByName}>{gettext('name')} {this.props.sortBy === 'name' && sortIcon}</a>
               <a className="table-sort-op" href="#" onClick={this.sortByTime}>{gettext('last update')} {this.props.sortBy === 'time' && sortIcon}</a>
@@ -117,10 +117,10 @@ class MylibRepoListView extends React.Component {
   render() {
     return (
       <Fragment>
-        <MediaQuery query="(min-device-width: 768px)">
+        <MediaQuery query="(min-width: 768px)">
           {this.renderPCUI()}
         </MediaQuery>
-        <MediaQuery query="(max-device-width: 768px)">
+        <MediaQuery query="(max-width: 768px)">
           {this.renderMobileUI()}
         </MediaQuery>
       </Fragment>
diff --git a/frontend/src/pages/my-libs/mylib-repo-menu.js b/frontend/src/pages/my-libs/mylib-repo-menu.js
index 8799f7adc1..5fa4a15104 100644
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@@ -140,7 +140,7 @@ class MylibRepoMenu extends React.Component {
       <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
         <DropdownToggle 
           tag="i"
-          className="sf-dropdown-toggle sf2-icon-caret-down"
+          className="sf-dropdown-toggle sf2-icon-caret-down ml-0"
           title={gettext('More Operations')}
           // onClick={this.clickOperationMenuToggle}
           data-toggle="dropdown" 
@@ -150,7 +150,7 @@ class MylibRepoMenu extends React.Component {
           <div className="mobile-operation-menu-bg-layer"></div>
           <div className="mobile-operation-menu">
             {operations.map((item, index) => {
-              return (<DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
+              return (<DropdownItem key={index} className="mobile-menu-item" data-toggle={item} onClick={this.onMenuItemClick}>{this.translateOperations(item)}</DropdownItem>);
             })}
           </div>
         </div>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 8a67d2bc6c..024b3fb28b 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -210,8 +210,6 @@ ul,ol,li {
 
 .side-nav-toggle { /* just for control side-panel */
     margin-right:0.9375rem;
-    height: 1.875rem;
-    line-height: 1.875rem;
     font-size:1.5rem;
     color:#999;
     cursor: pointer;
@@ -325,14 +323,14 @@ ul,ol,li {
 
 .action-icon,
 .attr-action-icon {
-    color:#888;
+    color:#888 !important;
 }
 
 .action-icon:focus,
 .action-icon:hover,
 .attr-action-icon:focus,
 .attr-action-icon:hover {
-    color: #333;
+    color: #333 !important;
     text-decoration: none;
 }
 
@@ -785,11 +783,6 @@ a.sf-popover-item:hover {
 .side-panel-top {
     padding: .5rem 1rem;
 }
-@media (max-width: 767px) {
-    .side-panel-top {
-        border-right: 1px solid #eee;
-    }
-}
 .side-panel-close {
     margin:10px 0 0 auto;
 }
@@ -905,6 +898,12 @@ table td {
     color: green;
 }
 
+@media (max-width: 767px) {
+    .rename-container input {
+        width: 10rem;
+    }
+}
+
 /* table-item loading-more-data */
 .list-show-more {
     padding: 0.25rem 0.75rem;
@@ -1025,39 +1024,55 @@ a.table-sort-op:focus {
     margin-left: 0.5rem;
 }
 
-/* mobile menu */
-.item-meta-info {
-  display: inline-block;
-  margin-right: 8px;
-  font-size: 12px;
-  color: #666;
-}
-
-.mobile-operation-menu-bg-layer {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: #000;
-  opacity: 0.1;
-  z-index: 3;
-}
-
-.mobile-operation-menu {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: .5em 0;
-  background: #fff;
-  text-align: center;
-  z-index: 4;
-}
-
 /* thumbnail */
 .thumbnail {
     max-width: 24px;
     max-height: 24px;
 }
 
+@media (max-width: 767px) {
+    /* mobile menu */
+    .item-meta-info {
+      display: inline-block;
+      margin-right: 8px;
+      font-size: 12px;
+      color: #666;
+    }
+    
+    .mobile-operation-menu-bg-layer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #000;
+      opacity: 0.1;
+      z-index: 3;
+    }
+    
+    .mobile-operation-menu {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: .5em 0;
+      background: #fff;
+      text-align: center;
+      z-index: 4;
+    }
+
+    /* toolbar icon */
+    .mobile-toolbar-icon {
+        color: #999;
+        font-size: 1.375rem;
+        margin-right: 0.5rem;
+    }
+
+    .mobile-menu-item {
+        color: #000;
+        line-height: 2rem;
+        font-size: 0.875rem;
+    }
+    
+}
+