diff --git a/media/css/seahub.css b/media/css/seahub.css
index ddb59f67ce..65c0527c5c 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -468,6 +468,13 @@ table img { vertical-align:middle; }
     margin-bottom:5px;
 }
 .textarea { height:70px; }
+.repo-meta-info,
+.dirent-meta-info {
+    display:inline-block;
+    margin-right:8px;
+    color:#666;
+    font-size:12px;
+}
 /* loading implemented with css  */
 @-moz-keyframes loading {
     0% {
@@ -1997,12 +2004,6 @@ button.sf-dropdown-toggle:focus {
 #repo-create-form .checkbox-label { /* for "Encrypt" */
     margin:10px 0 0;
 }
-.repo-meta-info {
-    display:inline-block;
-    margin-right:8px;
-    color:#666;
-    font-size:12px;
-}
 .activity-group-hd {
     padding: 8px;
     color: #444;
@@ -2236,6 +2237,12 @@ button.sf-dropdown-toggle:focus {
     width:500px;
     padding:10px 20px;
 }
+@media (max-width:579px) {
+    .file-choose-form {
+        padding:0;
+        width:280px;
+    }
+}
 .file-tree-cont, .dir-tree-cont {
     padding:5px;
     height:280px;
@@ -2254,6 +2261,9 @@ button.sf-dropdown-toggle:focus {
     .inline-rename-form .input {
         width:225px;
     }
+    #dir-view .inline-rename-form .input {
+        width:212px;
+    }
 }
 @media (min-width:375px) and (max-width:400px) {
     .inline-rename-form {
@@ -2499,6 +2509,11 @@ button.sf-dropdown-toggle:focus {
 #mv-form .op-target {
     max-width:410px;
 }
+@media (max-width:579px) {
+    #mv-form .op-target {
+        max-width:280px;
+    }
+}
 #folder-perm-popup .op-target {
     max-width:540px;
 }
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 12e53a711d..f9bf429623 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -298,6 +298,22 @@
         <th width="13%" class="dirent-update"><a class="table-sort-op by-time" href="#">{% trans "Last Update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a></th>
     </tr>
 </script>
+<script type="text/template" id="dirents-hd-mobile-tmpl">
+    <tr>
+        <th width="3%" class="select">
+            <input type="checkbox" class="vam" />
+        </th>
+        <th width="3%" class="star"></th>
+        <th width="5%" class="dirent-icon"></th>
+        <th width="84%">
+            {% trans "Sort:"%}
+            <a class="table-sort-op mobile-table-sort-op by-name" href="#"><span class="dirent-name">{% trans "name"%} <span class="sort-icon icon-caret-up"></span></span></a>
+            <a class="table-sort-op mobile-table-sort-op by-time" href="#">{% trans "last update" %} <span class="sort-icon icon-caret-down hide" aria-hidden="true"></span></a>
+        </th>
+        <th width="5%" class="dirent-op"><span class="sr-only">{% trans "Actions" %}</span></th>
+    </tr>
+</script>
+
 
 <script type="text/template" id="dirent-dir-tmpl">
     <td class="select">
@@ -355,6 +371,51 @@
         <% } %>
     </td>
 </script>
+<script type="text/template" id="dirent-dir-mobile-tmpl">
+    <td class="select">
+        <% if (dirent.selected) { %>
+        <input type="checkbox" class="vam" checked="checked" />
+        <% } else { %>
+        <input type="checkbox" class="vam" />
+        <% } %>
+    </td>
+    <td class="star"></td>
+    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
+    <td>
+        <span class="dirent-name">
+        <a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a>
+        <br />
+        <% if (dirent.last_modified) { %>
+        <span class="dirent-meta-info"><%= dirent.last_update %></span>
+        <% } %>
+        </span>
+    </td>
+    <td class="dirent-op">
+        <div class="op-container">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More operations" %}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
+                    <li><a class="op download download-dir" href="#">{% trans "Download" %}</a></li>
+                    <% if (!repo_encrypted && (can_generate_share_link || can_generate_upload_link || is_repo_owner)) { %>
+                        <li><a href="#" class="op share">{% trans "Share" %}</a></li>
+                    <% } %>
+            <% if (dirent.perm == 'rw') { %>
+                    <li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
+                    <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
+                    <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+                    <% if (app.pageOptions.folder_perm_enabled && is_repo_owner && !is_virtual && has_been_shared_out) { %>
+                    <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
+                    <% } %>
+                    <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path + '/')); %>">{% trans "Open via Client" %}</a></li>
+            <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+            <% } %>
+                </ul>
+            </div>
+        </div>
+    </td>
+</script>
 
 <script type="text/template" id="dirent-file-tmpl">
     <td class="select">
@@ -451,6 +512,94 @@
     </td>
 </script>
 
+<script type="text/template" id="dirent-file-mobile-tmpl">
+    <td class="select">
+        <% if (dirent.selected) { %>
+        <input type="checkbox" class="vam" checked="checked" />
+        <% } else { %>
+        <input type="checkbox" class="vam" />
+        <% } %>
+    </td>
+    <td class="star alc">
+        <% if (dirent.starred) { %>
+        <a href="#" title="{% trans "starred" %}" class="icon-star file-star" aria-label="{% trans "starred" %}"></a>
+        <% } else { %>
+        <a href="#" title="{% trans "unstarred" %}" class="icon-star-empty file-star" aria-label="{% trans "unstarred" %}"></a>
+        <% } %>
+    </td>
+    <td class="dirent-icon">
+        <div class="pos-rel">
+        <% if (dirent.is_img) { %>
+            <% if (dirent.encoded_thumbnail_src) { %>
+            <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
+            <% } else { %>
+            <img src="<%= icon_url %>" width="24" alt="" />
+            <% } %>
+        <% } else { %>
+        <img src="<%= icon_url %>" width="24" alt="" />
+        <% } %>
+
+        <% if (is_pro && dirent.is_locked) { %>
+        <img class="file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
+        <% } %>
+        </div>
+    </td>
+    <td>
+        <span class="dirent-name">
+            <% if (dirent.is_img) { %>
+            <a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
+            <% } else { %>
+            <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
+            <% } %>
+            <br />
+            <span class="dirent-meta-info"><%= dirent.file_size %></span>
+            <span class="dirent-meta-info">
+            <% if (dirent.last_modified) { %>
+                <%= dirent.last_update %>
+            <% } else { %>
+                <% print("{% trans "Fetch failed" %}"); %>
+            <% } %>
+            </span>
+        </span>
+    </td>
+    <td class="dirent-op">
+        <div class="op-container">
+            <div class="sf-dropdown sf-dropdown-inline">
+                <a href="#" class="more-op-icon sf2-icon-caret-down op-icon sf-dropdown-toggle" title="{% trans "More Operations"%}" aria-label="{% trans "More Operations" %}"></a>
+                <ul class="hidden-op dirent-hidden-op hide sf-dropdown-menu">
+                    <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
+                    <% if (!repo_encrypted && can_generate_share_link) { %>
+                    <li><a class="op share" href="#">{% trans "Share" %}</a></li>
+                    <% } %>
+            <% if (dirent.perm == 'rw') { %>
+                    <li><a href="#" class="op delete">{% trans "Delete" %}</a></li>
+                    <li><a class="op rename" href="#">{% trans "Rename" %}</a></li>
+                    <li><a class="op mv" href="#">{% trans "Move" %}</a></li>
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+                    <li><a class="op file-history" href="{{ SITE_ROOT }}repo/file_revisions/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>">{% trans "History" %}</a></li>
+                    <% if (is_pro) { %>
+                        <% if (file_audit_enabled) { %>
+                    <li><a class="op" href="{{ SITE_ROOT }}repo/file-access/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" target="_blank">{% trans "Access Log" %}</a></li>
+                        <% } %>
+                        <% if (dirent.is_locked) { %>
+                            <% if (dirent.locked_by_me) { %>
+                            <li><a class="op unlock-file" href="#">{% trans "Unlock" %}</a></li>
+                            <% } %>
+                        <% } else { %>
+                        <li><a class="op lock-file" href="#">{% trans "Lock" %}</a></li>
+                        <% } %>
+                    <% } %>
+                    <li><a class="op open-via-client" href="seafile://openfile?repo_id=<%- repo_id %>&path=<% print(encodeURIComponent(dirent_path)); %>">{% trans "Open via Client" %}</a></li>
+            <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
+                    <li><a class="op cp" href="#">{% trans "Copy" %}</a></li>
+            <% } %>
+                </ul>
+            </div>
+        </div>
+    </td>
+</script>
+
+
 <script type="text/template" id="grid-view-file-item-tmpl">
     <a href="<%= url %>" class="img-link" target="_blank">
         <% if (dirent.is_img && dirent.encoded_thumbnail_src) { %>
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 178fc9affc..3add5ee90b 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -27,6 +27,7 @@ define([
             path_bar_template: _.template($('#dir-path-bar-tmpl').html()),
             dir_op_bar_template: _.template($('#dir-op-bar-tmpl').html()),
             dirents_hd_template: _.template($('#dirents-hd-tmpl').html()),
+            dirents_hd_mobile_template: _.template($('#dirents-hd-mobile-tmpl').html()),
             top_search_form_template: _.template($('#top-search-form-tmpl').html()),
 
             newDirTemplate: _.template($("#add-new-dir-form-template").html()),
@@ -451,7 +452,8 @@ define([
             },
 
             renderDirentsHd: function() {
-                this.$('thead').html(this.dirents_hd_template());
+                var tmpl = $(window).width() < 768 ? this.dirents_hd_mobile_template : this.dirents_hd_template;
+                this.$('thead').html(tmpl());
             },
 
             render_dirents_slice: function(start, limit) {
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 523ea5bcbd..9235a092c6 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -20,7 +20,9 @@ define([
         },
 
         fileTemplate: _.template($('#dirent-file-tmpl').html()),
+        fileMobileTemplate: _.template($('#dirent-file-mobile-tmpl').html()),
         dirTemplate: _.template($('#dirent-dir-tmpl').html()),
+        dirMobileTemplate: _.template($('#dirent-dir-mobile-tmpl').html()),
         renameTemplate: _.template($("#rename-form-template").html()),
 
         initialize: function(options) {
@@ -41,9 +43,9 @@ define([
             var file_icon_size = Common.isHiDPI() ? 48 : 24;
             var template;
             if (this.model.get('is_dir')) {
-                template = this.dirTemplate;
+                template = $(window).width() < 768 ? this.dirMobileTemplate : this.dirTemplate;
             } else {
-                template = this.fileTemplate;
+                template = $(window).width() < 768 ? this.fileMobileTemplate : this.fileTemplate;
             }
 
             this.$el.html(template({
@@ -66,7 +68,8 @@ define([
             }));
             this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
             this.dropdown = new DropdownView({
-                el: this.$('.sf-dropdown')
+                el: this.$('.sf-dropdown'),
+                right: '0'
             });
 
             // for image files