diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index f9bf429623..416c4d4521 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1138,6 +1138,21 @@
         </div>
     </div>
 </script>
+<script type="text/template" id="starred-file-thead-tmpl">
+    <tr>
+        <% if ($(window).width() >= 768) { %>
+        <th width="5%"></th>
+        <th width="40%">{% trans "File Name" %}</th>
+        <th width="32%">{% trans "Library" %}</th>
+        <th width="18%">{% trans "Last Update" %}</th>
+        <th width="5%"></th>
+        <% } else { %>
+        <th width="5%"></th>
+        <th width="90%">{% trans "File Name" %}</th>
+        <th width="5%"></th>
+        <% } %>
+    </tr>
+</script>
 <script type="text/template" id="starred-file-item-tmpl">
     <td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
     <td>
@@ -1153,6 +1168,23 @@
         <a href="#" class="sf2-icon-delete unstar op-icon vh" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
     </td>
 </script>
+<script type="text/template" id="starred-file-item-mobile-tmpl">
+    <td class="alc"><img src="{{ MEDIA_URL }}img/file/<%= icon_path %>" alt="{% trans "icon" %}" /></td>
+    <td>
+        <% if (is_img) { %>
+            <a class="img-name-link" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- file_name %></a>
+        <% } else { %>
+            <a href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- file_name %></a>
+        <% } %>
+        <br />
+        <span class="dirent-meta-info"><%- repo_name %></span>
+        <span class="dirent-meta-info"><%= mtime_relative %></span>
+    </td>
+    <td>
+        <a href="#" class="sf2-icon-delete unstar op-icon" title="{% trans "Unstar" %}" aria-label="{% trans "Unstar" %}"></a>
+    </td>
+</script>
+
 
 <script type="text/template" id="my-repos-hd-tmpl">
    <tr>
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index 1b85cc18a9..701ca27d85 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -163,15 +163,7 @@
 <script type="text/template" id="starred-file-tmpl">
     <h3 class="hd">{% trans "Favorites" %}</h3>
     <table class="hide">
-        <thead>
-            <tr>
-                <th width="5%"></th>
-                <th width="40%">{% trans "File Name" %}</th>
-                <th width="32%">{% trans "Library" %}</th>
-                <th width="18%">{% trans "Last Update" %}</th>
-                <th width="5%"></th>
-            </tr>
-        </thead>
+        <thead></thead>
         <tbody></tbody>
     </table>
     <span class="loading-icon loading-tip"></span>
diff --git a/static/scripts/app/views/starred-file-item.js b/static/scripts/app/views/starred-file-item.js
index cfc4194daf..a7bdc35660 100644
--- a/static/scripts/app/views/starred-file-item.js
+++ b/static/scripts/app/views/starred-file-item.js
@@ -11,6 +11,7 @@ define([
         tagName: 'tr',
 
         template: _.template($('#starred-file-item-tmpl').html()),
+        mobileTemplate: _.template($('#starred-file-item-mobile-tmpl').html()),
 
         events: {
             'click .unstar': 'removeShare'
@@ -26,7 +27,8 @@ define([
             data['is_img'] = Common.imageCheck(data['file_name']);
             data['encoded_path'] = Common.encodePath(data['path']);
 
-            this.$el.html(this.template(data));
+            var tmpl = $(window).width() >= 768 ? this.template : this.mobileTemplate;
+            this.$el.html(tmpl(data));
             return this;
         },
 
diff --git a/static/scripts/app/views/starred-file.js b/static/scripts/app/views/starred-file.js
index aa706a9a26..d02c979d96 100644
--- a/static/scripts/app/views/starred-file.js
+++ b/static/scripts/app/views/starred-file.js
@@ -14,6 +14,7 @@ define([
         id: 'starred-file',
 
         template: _.template($('#starred-file-tmpl').html()),
+        theadTemplate: _.template($('#starred-file-thead-tmpl').html()),
 
         initialize: function() {
             this.starredFiles = new StarredFilesCollection();
@@ -29,9 +30,10 @@ define([
         reset: function() {
             this.$tableBody.empty();
             this.$loadingTip.hide();
-            this.starredFiles.each(this.addOne, this);
             if (this.starredFiles.length) {
                 this.$emptyTip.hide();
+                this.renderThead();
+                this.starredFiles.each(this.addOne, this);
                 this.$table.show();
             } else {
                 this.$emptyTip.show();
@@ -77,6 +79,10 @@ define([
             });
         },
 
+        renderThead: function() {
+            this.$('thead').html(this.theadTemplate());
+        },
+
         show: function() {
             $("#right-panel").html(this.$el);
             this.showStarredFiles();