diff --git a/media/css/seahub.css b/media/css/seahub.css
index ad79b2ea20..06afa5b437 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -134,6 +134,8 @@
 /*.sf2-icon-group-settings:before { content:"\e022"; }*/
 .sf2-icon-comment:before { content:"\e023"; }
 .sf2-icon-wiki2:before { content:"\e024"; }
+.sf2-icon-grid-view:before { content:"\e025"; }
+.sf2-icon-list-view:before { content:"\e026"; }
 
 /******* tags **********/
 html { background:#fff; }
@@ -1202,9 +1204,12 @@ textarea:-moz-placeholder {/* for FF */
     padding:4px 12px;
     min-width:110px;
     white-space:nowrap;
+    color:#444;
 }
 .dropdown-menu a:hover {
-    background:#eee;
+    background:#feaa7c;
+    text-decoration:none;
+    color:#fff;
 }
 /********** container ***********/
 #main, #footer {
@@ -3731,54 +3736,6 @@ img.thumbnail {
 .shared-dir-zip {
     margin-left:5px;
 }
-.grid {
-    display:inline-block;
-    width:100px;
-    padding:10px 24px;
-    position:relative;
-}
-.grid .img-link,
-.grid .text-link {
-    display:block;
-    text-align:center;
-}
-.grid .img-link {
-    height:100px;
-    font-size:0;
-    line-height:0;
-    border-radius:3px;
-    margin-bottom:6px;
-}
-.grid .img-link:before {
-    content:' ';
-    display:inline-block;
-    vertical-align:middle;
-    height:100%;
-}
-.grid .thumbnail {
-    max-width:96px;
-    max-height:96px;
-    padding:1px;
-    border:1px solid #ddd;
-    border-radius:3px;
-}
-.grid .text-link {
-    color:#333;
-    font-size:14px;
-    line-height:17px;
-    height:34px;
-    white-space:normal;
-}
-.grid .op-icon {
-    position:absolute;
-    top:10px;
-    right:24px;
-    padding:2px 6px;
-    background:#fff;
-    border:1px solid #eee;
-    border-radius:3px;
-    margin:0;
-}
 /**** #groups ****/ /* groups page */
 #groups .group-name {
     font-size:16px;
@@ -3837,3 +3794,90 @@ img.thumbnail {
 #add-group-members-form .submit {
     margin:0 0 0 5px;
 }
+/****** grid view *****/
+/* view mode */
+.switch-mode {
+    display:inline-block;
+    margin-left:12px;
+}
+.grid-view-icon-btn,
+.list-view-icon-btn {
+    display:inline-block;
+    padding:0 6px;
+    height:27px;
+    background:#fff;
+    border:1px solid #ccc;
+    font-size:18px;
+    color:#aaa;
+    cursor:pointer;
+}
+.grid-view-icon-btn.active,
+.list-view-icon-btn.active {
+    color:#fff;
+    background:#ccc;
+    cursor:default;
+}
+/* grid view */
+.grid-item {
+    display:inline-block;
+    width:100px;
+    padding:10px 24px;
+    position:relative;
+}
+.grid-item .img-link {
+    position:relative; /* for locked icon */
+    display:block;
+    text-align:center;
+    height:100px;
+    font-size:0;
+    line-height:0;
+    border-radius:3px;
+    margin-bottom:6px;
+}
+.grid-item .img-link:before {
+    content:' ';
+    display:inline-block;
+    vertical-align:middle;
+    height:100%;
+}
+.grid-item .img-link.hl {
+    background:#f8f8f8;
+}
+.grid-item .thumbnail {
+    max-width:96px;
+    max-height:96px;
+    padding:1px;
+    border:1px solid #ddd;
+    border-radius:3px;
+}
+.grid-item .text-link {
+    display:block;
+    text-align:center;
+    color:#333;
+    font-size:14px;
+    line-height:17px;
+    height:34px;
+    white-space:normal;
+}
+.grid-item .text-link.hl {
+    color:#f93;
+    background:#fff;
+}
+.grid-item .op-icon {
+    position:absolute;
+    top:10px;
+    right:24px;
+    padding:2px 6px;
+    background:#fff;
+    border:1px solid #eee;
+    border-radius:3px;
+    margin:0;
+}
+.grid-file-locked-icon {
+    position:absolute;
+    bottom:0px;
+    right:10px;
+}
+#dir-view .grid-item {
+    padding:10px 20px; /* use less padding */
+}
diff --git a/media/css/sf_font2/seafile-font2.eot b/media/css/sf_font2/seafile-font2.eot
index 1ba88e5208..87ae8cd92b 100644
Binary files a/media/css/sf_font2/seafile-font2.eot and b/media/css/sf_font2/seafile-font2.eot differ
diff --git a/media/css/sf_font2/seafile-font2.svg b/media/css/sf_font2/seafile-font2.svg
index 3aab1b4caa..e329868b23 100644
--- a/media/css/sf_font2/seafile-font2.svg
+++ b/media/css/sf_font2/seafile-font2.svg
@@ -44,4 +44,6 @@
 <glyph glyph-name="01" unicode="&#57378;" d="M223 130c0 21 7 38 19 54-2 5-2 7-2 11 0 17 7 28 16 40-14 2-30 2-47 2-107 0-193-46-193-102 0-56 96-72 96-72 42-14 107-16 158-9-28 18-47 46-47 76z m-4 70c0 0 0-2 0-5-12-16-19-37-19-58 0-23 7-42 19-60-37-3-75 2-100 11l-3 0c-16 3-76 19-76 49 0 38 69 79 169 79 5 0 7 0 12 3-2-7-2-12-2-19z m4 291l-28 0c-46 0-83-37-83-84l0-58c0-49 39-86 88-86l19 0c49 0 88 40 88 86l0 58c0 47-37 84-84 84z m63-142c0-35-30-63-65-63l-19 0c-37 0-65 28-65 63l0 58c0 33 26 61 58 61l31 0c32 0 60-28 60-61z m84-328c-19 0-35 16-35 35l0 2c-2 3-2 3-5 3l-2-3c-14-14-35-14-49 0-14 14-14 35 0 49l3 2c0 3 0 3-3 5-18 0-35 16-35 35 0 19 17 35 35 35l3 0c0 0 2 2 2 5l-2 2c-14 14-14 35 0 49 14 14 35 14 48 0l3-3c2 0 2 0 4 3l0 2c0 19 17 35 35 35 19 0 35-16 35-35l0-2c3-3 3-3 5-3l2 3c14 14 35 14 49 0 14-14 14-35 0-49l-7-5c0-2 0-2 2-4l3 0c18 0 35-17 35-35 0-19-17-35-35-35l-3 0c-2-3-2-3-2-5l2-2c14-14 14-35 0-49-13-14-34-14-48 0l-3 2c-2 0-2 0-4-2l0-2c2-17-14-33-33-33z m-44 67l7-4c4-3 9-5 16-7l9-3 0-18c0-7 5-12 12-12 7 0 12 5 12 12l0 18 9 3c5 2 12 4 16 7l7 4 14-14c5-4 12-4 17 0 4 5 4 12 0 17l-14 14 4 7c3 4 5 9 7 16l3 9 18 0c7 0 12 5 12 12 0 7-5 12-12 12l-21 0-2 9c-2 5-5 12-7 16l-5 7 14 14c5 5 5 12 0 16-4 5-11 5-16 0l-16-16-5 2c-5 3-9 5-16 7l-10 3 0 18c0 7-4 12-11 12-7 0-12-5-12-12l0-18-7-3c-5-2-12-4-16-7l-7-2-14 14c-5 5-12 5-16 0-5-5-5-12 0-16l14-14-5-7c-2-5-5-9-7-16l-2-10-17 0c-7 0-11-4-11-11 0-7 4-12 11-12l19 0 2-9c3-5 5-12 7-17l5-7-14-14c-5-4-5-11 0-16 5-5 12-5 16 0z m44 17c-23 0-42 18-42 42 0 23 19 42 42 42 23 0 42-19 42-42 0-24-19-42-42-42z m0 60c-9 0-19-9-19-18 0-10 10-19 19-19 9 0 19 9 19 19 0 9-10 18-19 18z"/>
 <glyph glyph-name="04-1" unicode="&#57379;" d="M254 440c97 0 184-72 184-156 0-84-84-156-184-156-17 0-33 2-49 5-3 0-3 0-5 0-11 0-18-5-25-14-14-26-42-42-68-45 5 14 14 35 14 56 0 26-9 47-14 59 0 2-2 2-2 4-19 26-31 58-31 89 0 32 14 72 42 97 35 38 84 61 138 61m0 28c-117 0-212-84-210-186 0-42 14-80 40-107 4-12 11-26 11-47 0-23-18-56-18-56-7-5-7-11-5-16 5-2 7-9 14-9 2 0 9-3 19-3 39 0 74 23 95 58 16-2 33-4 56-4 116 0 212 84 212 186 0 102-96 184-214 184z"/>
 <glyph glyph-name="021" unicode="&#57380;" d="M254 44l-180 56c-11 5-18 19-18 30l0 317c0 14 14 25 28 21l170-49 179 49c2 0 5 0 7 0 11 0 21-10 21-21l0-317c0-11-7-25-19-30z m-177 401l0-315c0-2 2-7 4-7l173-53 179 56c0 0 2 4 2 7l0 312-181-49z m165-38l23 0 0-349-23 0z"/>
+<glyph glyph-name="grid-view" unicode="&#57381;" d="M28 228l200 0 0-171-200 0z m256 0l200 0 0-171-200 0z m-256 227l200 0 0-171-200 0z m256 0l200 0 0-171-200 0z"/>
+<glyph glyph-name="list-view" unicode="&#57382;" d="M28 114l456 0 0-57-456 0z m0 114l456 0 0-57-456 0z m0 113l456 0 0-57-456 0z m0 114l456 0 0-57-456 0z"/>
 </font></defs></svg>
diff --git a/media/css/sf_font2/seafile-font2.ttf b/media/css/sf_font2/seafile-font2.ttf
index 1deadd0e1c..75ca19b65b 100644
Binary files a/media/css/sf_font2/seafile-font2.ttf and b/media/css/sf_font2/seafile-font2.ttf differ
diff --git a/media/css/sf_font2/seafile-font2.woff b/media/css/sf_font2/seafile-font2.woff
index 76bef0a41f..543f7f0c43 100644
Binary files a/media/css/sf_font2/seafile-font2.woff and b/media/css/sf_font2/seafile-font2.woff differ
diff --git a/media/img/file/192/excel.png b/media/img/file/192/excel.png
new file mode 100644
index 0000000000..bf3266e4c2
Binary files /dev/null and b/media/img/file/192/excel.png differ
diff --git a/media/img/file/192/file.png b/media/img/file/192/file.png
new file mode 100644
index 0000000000..df1352f761
Binary files /dev/null and b/media/img/file/192/file.png differ
diff --git a/media/img/file/192/music.png b/media/img/file/192/music.png
new file mode 100644
index 0000000000..6057c995c7
Binary files /dev/null and b/media/img/file/192/music.png differ
diff --git a/media/img/file/192/pdf.png b/media/img/file/192/pdf.png
new file mode 100644
index 0000000000..576808cf39
Binary files /dev/null and b/media/img/file/192/pdf.png differ
diff --git a/media/img/file/192/pic.png b/media/img/file/192/pic.png
new file mode 100644
index 0000000000..31e0c19f86
Binary files /dev/null and b/media/img/file/192/pic.png differ
diff --git a/media/img/file/192/ppt.png b/media/img/file/192/ppt.png
new file mode 100644
index 0000000000..bd2b8dd214
Binary files /dev/null and b/media/img/file/192/ppt.png differ
diff --git a/media/img/file/192/txt.png b/media/img/file/192/txt.png
new file mode 100644
index 0000000000..3d8d4b5550
Binary files /dev/null and b/media/img/file/192/txt.png differ
diff --git a/media/img/file/192/word.png b/media/img/file/192/word.png
new file mode 100644
index 0000000000..9018b64caf
Binary files /dev/null and b/media/img/file/192/word.png differ
diff --git a/media/img/file/24/excel.png b/media/img/file/24/excel.png
new file mode 100644
index 0000000000..99f9aaaa9a
Binary files /dev/null and b/media/img/file/24/excel.png differ
diff --git a/media/img/file/24/file.png b/media/img/file/24/file.png
new file mode 100644
index 0000000000..4c5e246b30
Binary files /dev/null and b/media/img/file/24/file.png differ
diff --git a/media/img/file/24/music.png b/media/img/file/24/music.png
new file mode 100644
index 0000000000..3a91d035c8
Binary files /dev/null and b/media/img/file/24/music.png differ
diff --git a/media/img/file/24/pdf.png b/media/img/file/24/pdf.png
new file mode 100644
index 0000000000..11f0d637fa
Binary files /dev/null and b/media/img/file/24/pdf.png differ
diff --git a/media/img/file/24/pic.png b/media/img/file/24/pic.png
new file mode 100644
index 0000000000..d628f47363
Binary files /dev/null and b/media/img/file/24/pic.png differ
diff --git a/media/img/file/24/ppt.png b/media/img/file/24/ppt.png
new file mode 100644
index 0000000000..6aa676fd03
Binary files /dev/null and b/media/img/file/24/ppt.png differ
diff --git a/media/img/file/24/txt.png b/media/img/file/24/txt.png
new file mode 100644
index 0000000000..281abef98e
Binary files /dev/null and b/media/img/file/24/txt.png differ
diff --git a/media/img/file/24/word.png b/media/img/file/24/word.png
new file mode 100644
index 0000000000..61f26a99a4
Binary files /dev/null and b/media/img/file/24/word.png differ
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
index dcfa17a000..60e0490184 100644
--- a/seahub/templates/js/dir-view.html
+++ b/seahub/templates/js/dir-view.html
@@ -4,10 +4,14 @@
         <p class="path"></p>
         <div class="repo-op"></div>
     </div>
-    <table class="repo-file-list">
-        <thead></thead>
-        <tbody></tbody>
-    </table>
+    <div class="js-dir-content">
+        <table class="repo-file-list">
+            <thead></thead>
+            <tbody></tbody>
+        </table>
+        <ul class="grid-view hide">
+        </ul>
+    </div>
     <span class="loading-icon loading-tip"></span>
     <p class="error hide"></p>
 </div>
diff --git a/seahub/templates/js/lib-op-popups.html b/seahub/templates/js/lib-op-popups.html
index 81aefb22f5..98abaa9eb2 100644
--- a/seahub/templates/js/lib-op-popups.html
+++ b/seahub/templates/js/lib-op-popups.html
@@ -39,8 +39,18 @@
     </form>
     </script>
 
+    <script type="text/template" id="dirent-rename-dialog-template">
+    <form id="rename-form" class="dirent-rename-dialog" action="" method="post">
+        <h3><%= form_title %></h3>
+        <input type="text" name="newname" value="<%- dirent_name %>" class="input vam" maxlength="{{max_file_name}}" /><br />
+        <p class="error hide"></p>
+        <button type="submit" class="submit">{% trans "Submit" %}</button>
+        <button class="simplemodal-close">{% trans "Cancel" %}</button>
+    </form>
+    </script>
+
     <script type="text/template" id="mvcp-form-template">
-    <form id="mv-form" action="" method="post" class="file-choose-form hide">{% csrf_token %}
+    <form id="mv-form" action="" method="post" class="file-choose-form">{% csrf_token %}
         <h3><%= form_title %></h3>
         <div id="mv-dir-list" class="dir-tree-cont">
             <% if (show_cur_repo) { %>
@@ -68,7 +78,7 @@
     </script>
 
     <script type="text/template" id="mv-progress-popup-template">
-    <div id="mv-progress-popup" class="alc hide">
+    <div id="mv-progress-popup" class="alc">
         <p id="mv-details" class="ellipsis"></p>
         <div id="mv-progress"></div>
         <p id="mv-other-info" class="hide"></p>
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index b55486b529..530d469b06 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -147,6 +147,11 @@
     <% if (!encrypted && can_generate_shared_link) { %>
     <button class="op-btn" id="share-cur-dir">{% trans "Share" %}</button>
     <% } %>
+
+    <div class="switch-mode vam">
+        <span class="list-view-icon-btn sf2-icon-list-view <% if (mode == 'list') { %>active<% } %>" title="{% trans "List" %}" id="js-switch-list-view"></span><span class="grid-view-icon-btn sf2-icon-grid-view <% if (mode == 'grid') { %>active<% } %>" title="{% trans "Grid" %}" id="js-switch-grid-view"></span>
+    </div>
+
     <% if (path == '/') { %>
         <div class="fright">
             <% if (user_perm == 'rw') { %>
@@ -205,22 +210,14 @@
         <% } %>
     </td>
     <td class="star"></td>
-    <% if (dirent.perm == 'r') { %>
-        <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/folder-read-only-24.png" alt="{% trans "Directory icon" %}" /></td>
-    <% } else { %>
-        <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/folder-24.png" alt="{% trans "Directory icon" %}" /></td>
-    <% } %>
+    <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="{% trans "Directory icon" %}" /></td>
     <td>
-        <% if (category) { %>
-        <span class="dirent-name"><a href="#<%= category %>/lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
-        <% } else { %>
-        <span class="dirent-name"><a href="#lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
-        <% } %>
+        <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
     </td>
     <td class="dirent-op">
         <div class="repo-file-op vh">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="{{ SITE_ROOT }}repo/download_dir/<%= repo_id %>/?p=<% print(encodeURIComponent(dirent_path)); %>" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
                 <span class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></span>
                 <% } %>
@@ -237,9 +234,7 @@
                 <% if (app.pageOptions.folder_perm_enabled && is_repo_owner) { %>
                 <li><a class="op set-folder-permission" href="#">{% trans "Permission" %}</a></li>
                 <% } %>
-                <% if (is_pro) { %>
                 <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>
-                <% } %>
             </ul>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
             <span class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></span>
@@ -278,10 +273,10 @@
             <% if (dirent.encoded_thumbnail_src) { %>
             <img class="thumbnail" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
             <% } else { %>
-            <img src="{{ MEDIA_URL }}img/file/<%= dirent.file_icon %>" alt="" />
+            <img src="<%= icon_url %>" width="24" alt="" />
             <% } %>
         <% } else { %>
-        <img src="{{ MEDIA_URL }}img/file/<%= dirent.file_icon %>" alt="" />
+        <img src="<%= icon_url %>" width="24" alt="" />
         <% } %>
 
         <% if (is_pro && dirent.is_locked) { %>
@@ -292,16 +287,16 @@
     <td>
         <span class="dirent-name">
             <% if (dirent.is_img) { %>
-            <a class="normal 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 %>"><%- dirent.obj_name %></a>
+            <a class="normal img-name-link" href="<%= url %>" target="_blank" data-mfp-src="{{ SITE_ROOT }}repo/<%= repo_id %>/raw<%- encoded_path %>"><%- dirent.obj_name %></a>
             <% } else { %>
-            <a class="normal" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>" target="_blank"><%- dirent.obj_name %></a>
+            <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
             <% } %>
         </span>
     </td>
     <td class="dirent-op">
         <div class="repo-file-op vh">
             <div class="displayed-op">
-                <a class="op-icon download sf2-icon-download sf2-x" href="{{ SITE_ROOT }}lib/<%= repo_id %>/file<%- encoded_path %>?dl=1" title="{% trans "Download" %}"></a>
+                <a class="op-icon download sf2-icon-download sf2-x" href="<%= download_url %>" title="{% trans "Download" %}"></a>
                 <% if (!repo_encrypted && can_generate_shared_link) { %>
                 <span class="op-icon share sf2-icon-share sf2-x" title="{% trans "Share" %}"></span>
                 <% } %>
@@ -328,8 +323,8 @@
                     <% } 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>
                 <% } %>
+                <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>
             </ul>
             <% } else if (dirent.perm == 'r' && !repo_encrypted) { %>
             <span class="more-op-icon sf2-icon-caret-down op-icon" title="{% trans "More operations" %}"></span>
@@ -349,6 +344,84 @@
     </td>
     <% } %>
 </script>
+
+<script type="text/template" id="grid-view-file-item-tmpl">
+    <a href="<%= url %>" class="img-link" target="_blank">
+        <% if (dirent.is_img) { %>
+            <% if (dirent.encoded_thumbnail_src) { %>
+            <img class="thumbnail vam" src="{{ SITE_ROOT }}<%- dirent.encoded_thumbnail_src %>" alt="" />
+            <% } else { %>
+            <img src="<%= icon_url %>" width="96" alt="" class="vam" />
+            <% } %>
+        <% } else { %>
+        <img src="<%= icon_url %>" width="96" alt="" class="vam" />
+        <% } %>
+
+        <% if (is_pro && dirent.is_locked) { %>
+        <img class="grid-file-locked-icon" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" />
+        <% } %>
+    </a>
+
+    <a href="<%= url %>" class="ellipsis text-link normal" target="_blank">
+        <%- dirent.obj_name %>
+    </a>
+</script>
+
+<script type="text/template" id="grid-view-dir-item-tmpl">
+    <a href="<%= url %>" class="img-link">
+        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
+    </a>
+
+    <a href="<%= url %>" class="ellipsis normal text-link">
+        <%- dirent.obj_name %>
+    </a>
+</script>
+
+<script type="text/template" id="grid-view-file-op-tmpl">
+    <ul class="grid-item-op dropdown-menu">
+        <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
+        <% if (!repo_encrypted && can_generate_shared_link) { %>
+        <li><a class="op share" href="#">{% trans "Share" %}</a></li>
+        <% } %>
+        <% if (dirent.perm == 'rw') { %>
+        <li><a class="op delete" href="#">{% 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 (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>
+        <% } %>
+    </ul>
+</script>
+
+<script type="text/template" id="grid-view-dir-op-tmpl">
+    <ul class="grid-item-op dropdown-menu">
+        <li><a class="op download" href="<%= download_url %>">{% trans "Download" %}</a></li>
+        <% if (!repo_encrypted && can_generate_shared_link) { %>
+        <li><a class="op share" href="#">{% trans "Share" %}</a></li>
+        <% } %>
+        <% if (dirent.perm == 'rw') { %>
+        <li><a class="op delete" href="#">{% 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) { %>
+        <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>
+        <% } %>
+    </ul>
+</script>
+
 <script type="text/template" id="group-change-item-tmpl">
     <td>
     <span class="icon-plus"></span>
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index 4cf339f858..7f0f9818bc 100644
--- a/seahub/templates/libraries.html
+++ b/seahub/templates/libraries.html
@@ -238,7 +238,6 @@
 <script type="text/javascript">
 app["pageOptions"] = {
     site_root: "{{ SITE_ROOT }}",
-    base_url: "{{ SITE_ROOT }}" + "home/my/",
     csrfToken: "{{ csrf_token }}",
     reposUrl: "{% url 'api2-repos' %}",
     pubReposUrl: "{% url 'api2-pub-repos' %}",
@@ -275,6 +274,8 @@ app["pageOptions"] = {
     enable_upload_folder: {% if enable_upload_folder %} true {% else %} false {% endif %},
     enable_resumable_fileupload: {% if enable_resumable_fileupload %} true {% else %} false {% endif %},
     enable_thumbnail: {% if enable_thumbnail %} true {% else %} false {% endif %},
+    thumbnail_default_size: {{ thumbnail_default_size }},
+    thumbnail_size_for_grid: {{ thumbnail_size_for_grid }},
     enable_encrypted_library: {% if enable_encrypted_library %} true {% else %} false {% endif %},
     enable_repo_history_setting: {% if enable_repo_history_setting %} true {% else %} false {% endif %},
     max_upload_file_size: {% if max_upload_file_size %} {{ max_upload_file_size }} {% else %} '' {% endif %},
diff --git a/seahub/templates/view_shared_dir.html b/seahub/templates/view_shared_dir.html
index d7b6e78a1f..d73b3c3929 100644
--- a/seahub/templates/view_shared_dir.html
+++ b/seahub/templates/view_shared_dir.html
@@ -99,9 +99,9 @@
         </tbody>
     </table>
     {% else %}
-        <ul>
+        <ul class="grid">
             {% for dirent in dir_list %}
-            <li class="grid" title="{{ dirent.obj_name }}">
+            <li class="grid-item" title="{{ dirent.obj_name }}">
                 <a href="?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}&mode={{mode}}" class="img-link">
                     <img src="{{ MEDIA_URL }}img/folder-beige-192.png" alt="" width="96" class="vam" />
                 </a>
@@ -115,7 +115,7 @@
             {% endfor %}
 
             {% for dirent in file_list %}
-            <li class="file-item grid" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}">
+            <li class="file-item grid-item" data-name="{{dirent.obj_name}}" title="{{dirent.obj_name}}">
                 {% if dirent.is_img %}
                 <a class="img-link img-img-link" href="{% url "view_file_via_shared_dir" token %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}" data-mfp-src="{% url "view_raw_shared_file" token dirent.obj_id dirent.obj_name %}?p={{ path|urlencode }}{{ dirent.obj_name|urlencode }}">
                     {% if dirent.encoded_thumbnail_src %}
@@ -215,15 +215,15 @@ $(function() {
 });
 {% endif %}
 
-$('.grid').hover(
+$('.grid-item').hover(
     function () {
-        $('.img-link', $(this)).css({'background': '#f8f8f8'});
-        $('.text-link', $(this)).css({'color': '#f93'});
+        $('.img-link', $(this)).addClass('hl');
+        $('.text-link', $(this)).addClass('hl');
         $('.op-icon', $(this)).removeClass('vh');
     },
     function () {
-        $('.img-link', $(this)).css({'background': '#fff'});
-        $('.text-link', $(this)).css({'color': '#333'});
+        $('.img-link', $(this)).removeClass('hl');
+        $('.text-link', $(this)).removeClass('hl');
         $('.op-icon', $(this)).addClass('vh');
     }
 );
diff --git a/seahub/views/__init__.py b/seahub/views/__init__.py
index 10835670e6..4666f75bf5 100644
--- a/seahub/views/__init__.py
+++ b/seahub/views/__init__.py
@@ -966,6 +966,8 @@ def libraries(request):
             'enable_upload_folder': settings.ENABLE_UPLOAD_FOLDER,
             'enable_resumable_fileupload': settings.ENABLE_RESUMABLE_FILEUPLOAD,
             'enable_thumbnail': settings.ENABLE_THUMBNAIL,
+            'thumbnail_default_size': settings.THUMBNAIL_DEFAULT_SIZE,
+            'thumbnail_size_for_grid': settings.THUMBNAIL_SIZE_FOR_GRID,
             'enable_encrypted_library': config.ENABLE_ENCRYPTED_LIBRARY,
             'enable_repo_history_setting': config.ENABLE_REPO_HISTORY_SETTING,
             'max_upload_file_size': max_upload_file_size,
diff --git a/seahub/views/ajax.py b/seahub/views/ajax.py
index 8f7468975e..9e2088e4b6 100644
--- a/seahub/views/ajax.py
+++ b/seahub/views/ajax.py
@@ -470,7 +470,8 @@ def list_lib_dir(request, repo_id):
         d_['perm'] = d.permission # perm for sub dir in current dir
         dirent_list.append(d_)
 
-    size = THUMBNAIL_DEFAULT_SIZE
+    size = int(request.GET.get('thumbnail_size', THUMBNAIL_DEFAULT_SIZE))
+
     for f in file_list:
         f_ = {}
         f_['is_file'] = True
diff --git a/static/scripts/app/models/dirent.js b/static/scripts/app/models/dirent.js
index 9eb182c7cd..ecdeb65e3d 100644
--- a/static/scripts/app/models/dirent.js
+++ b/static/scripts/app/models/dirent.js
@@ -1,10 +1,201 @@
 define([
+    'jquery',
     'underscore',
-    'backbone'
-], function(_, Backbone) {
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
     'use strict';
 
-    var Dirent = Backbone.Model.extend({});
+    var Dirent = Backbone.Model.extend({
+
+        // get the absolute path within the library
+        getPath: function() {
+            return Common.pathJoin([this.collection.path, this.get('obj_name')]);
+        },
+
+        getIconUrl: function(size) {
+            if (this.get('is_dir')) {
+                var is_readonly = this.get('perm') == 'r';
+                return Common.getDirIconUrl(is_readonly, size);
+            } else {
+                return Common.getFileIconUrl(this.get('obj_name'), size);
+            }
+        },
+
+        // return the URL to visit the folder or file
+        getWebUrl: function() {
+            var dir = this.collection;
+            var dirent_path = this.getPath();
+
+            if (this.get('is_dir')) {
+                if (dir.category) {
+                    return "#" + dir.category + "/lib/" + dir.repo_id + Common.encodePath(dirent_path);
+                } else {
+                    return "#lib/" + dir.repo_id + Common.encodePath(dirent_path);
+                }
+            } else {
+                return app.config.siteRoot + "lib/" + dir.repo_id
+                    + "/file" + Common.encodePath(dirent_path);
+            }
+        },
+
+        // return the URL to download the folder or file
+        getDownloadUrl: function() {
+            var dir = this.collection;
+            var dirent_path = this.getPath();
+
+            if (this.get('is_dir')) {
+                return app.config.siteRoot + "repo/download_dir/" + dir.repo_id
+                    + "/?p=" + Common.encodePath(dirent_path);
+            } else {
+                return app.config.siteRoot + "lib/" + dir.repo_id
+                    + "/file" + Common.encodePath(dirent_path) + "?dl=1";
+            }
+        },
+
+        // We can't use Backbone.sync() here because the URL for a dirent
+        // is not a standard RESTful one
+        deleteFromServer: function(options) {
+            var dir = this.collection;
+            var path = this.getPath();
+            var model = this;
+            options = options || {};
+
+            var opts = {
+                repo_id: dir.repo_id,
+                name: this.get('is_dir') ? 'del_dir' : 'del_file'
+            };
+            $.ajax({
+                url: Common.getUrl(opts) + '?p=' + encodeURIComponent(path),
+                type: 'DELETE',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                success: function(data) {
+                    // We don't understand how the event actually work in Backbone
+                    // It is safer to call dir.remove() directly.
+                    dir.remove(model);
+                    // this.trigger('destroy');
+                    if (options.success)
+                        options.success(data);
+                },
+                error: function(xhr) {
+                    if (options.error)
+                        options.error(xhr);
+                }
+            });
+        },
+
+        rename: function(options) {
+            var dir = this.collection;
+            var _this = this;
+            options = options || {};
+
+            var opts = {
+                repo_id: dir.repo_id,
+                name: this.get('is_dir') ? 'rename_dir' : 'rename_file'
+            };
+
+            var post_data = {
+                'operation': 'rename',
+                'newname': options.newname
+            };
+
+            $.ajax({
+                url: Common.getUrl(opts) + '?p=' + encodeURIComponent(this.getPath()),
+                type: 'POST',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                data: post_data,
+                success: function(data) {
+                    var renamed_dirent_data = {
+                        'obj_name': options.newname,
+                        'last_modified': new Date().getTime()/1000,
+                        'last_update': gettext("Just now")
+                    };
+                    if (!_this.get('is_dir')) {
+                        $.extend(renamed_dirent_data, {
+                            'starred': false
+                        });
+                    }
+                    _this.set(renamed_dirent_data)
+                    if (options.success)
+                        options.success(data);
+                },
+                error: function(xhr) {
+                    if (options.error)
+                        options.error(xhr);
+                }
+            });
+        },
+
+        lockOrUnlockFile: function(options) {
+            var dir = this.collection,
+                filepath = this.getPath();
+
+            $.ajax({
+                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
+                type: 'PUT',
+                dataType: 'json',
+                data: {
+                    'operation': options.op,
+                    'p': filepath
+                },
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                success: function() {
+                    options.success();
+                },
+                error: function(xhr) {
+                    options.error(xhr);
+                }
+            });
+        },
+
+        lockFile: function(options) {
+            var _this = this;
+            this.lockOrUnlockFile({
+                op: 'lock',
+                success: function() {
+                    _this.set({
+                        'is_locked': true,
+                        'locked_by_me': true,
+                        'lock_owner_name': app.pageOptions.name
+                    });
+                    if (options.success) {
+                        options.success();
+                    }
+                },
+                error: function(xhr) {
+                    if (options.error) {
+                        options.error(xhr)
+                    }
+                }
+            });
+            return false;
+        },
+
+        unlockFile: function(options) {
+            var _this = this;
+            this.lockOrUnlockFile({
+                op: 'unlock',
+                success: function() {
+                    _this.set({
+                        'is_locked': false
+                    });
+                    if (options.success) {
+                        options.success();
+                    }
+                },
+                error: function(xhr) {
+                    if (options.error) {
+                        options.error(xhr)
+                    }
+                }
+            });
+            return false;
+        },
+
+    });
 
     return Dirent;
 });
diff --git a/static/scripts/app/views/dialogs/dirent-mvcp.js b/static/scripts/app/views/dialogs/dirent-mvcp.js
new file mode 100644
index 0000000000..d366501805
--- /dev/null
+++ b/static/scripts/app/views/dialogs/dirent-mvcp.js
@@ -0,0 +1,226 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'file-tree'
+], function($, _, Backbone, Common, FileTree) {
+    'use strict';
+
+    var DirentMvcpDialog = Backbone.View.extend({
+
+        mvcpTemplate: _.template($("#mvcp-form-template").html()),
+        mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
+
+        initialize: function(options) {
+            this.dirent = options.dirent;
+            this.dir = options.dir;
+            this.op_type = options.op_type;
+
+            // only show current repo if current repo is read-write
+            this.show_cur_repo = this.dirent.get('perm') == 'rw' ? true : false;
+
+            this.render();
+            this.$el.modal({appendTo:'#main', autoResize:true, focus:false});
+            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
+
+            if (this.show_cur_repo) {
+                FileTree.renderTreeForPath({
+                    repo_name: this.dir.repo_name,
+                    repo_id: this.dir.repo_id,
+                    path: this.dir.path
+                });
+            }
+            if (!this.dir.encrypted) {
+                FileTree.prepareOtherReposTree({cur_repo_id: this.dir.repo_id});
+            }
+
+            this.$error = this.$('.error');
+            this.$form = this.$('form');
+        },
+
+        render: function() {
+            var dir = this.dir;
+            var obj_name = this.dirent.get('obj_name'),
+                obj_type = this.dirent.get('is_dir') ? 'dir' : 'file';
+
+            var title = this.op_type == 'mv' ?
+                gettext("Move {placeholder} to:") : gettext("Copy {placeholder} to:");
+            title = title.replace('{placeholder}',
+                '<span class="op-target ellipsis ellipsis-op-target" title="'
+                + Common.HTMLescape(obj_name) + '">' + Common.HTMLescape(obj_name) + '</span>');
+
+            this.$el.html(this.mvcpTemplate({
+                form_title: title,
+                op_type: this.op_type,
+                obj_type: obj_type,
+                obj_name: this.dirent.get('obj_name'),
+                show_cur_repo: this.show_cur_repo,
+                show_other_repos: !dir.encrypted
+            }));
+
+            return this;
+        },
+
+        events: {
+            'submit form': 'formSubmit'
+        },
+
+        _showProgress: function(msg, task_id) {
+            var _this = this;
+            var op = this.op_type,
+                obj_name = this.dirent.get("obj_name");
+            var mv_progress_popup = $(_this.mvProgressTemplate());
+            var details = $('#mv-details', mv_progress_popup),
+                cancel_btn = $('#cancel-mv', mv_progress_popup),
+                other_info = $('#mv-other-info', mv_progress_popup);
+
+            cancel_btn.removeClass('hide');
+
+            setTimeout(function() {
+                mv_progress_popup.modal({containerCss: {
+                    width: 300,
+                    height: 150,
+                    paddingTop: 50
+                }, focus:false});
+                var det_text = _this.op_type == 'mv' ?
+                    gettext("Moving %(name)s") : gettext("Copying %(name)s");
+                details.html(det_text.replace('%(name)s', Common.HTMLescape(obj_name))).removeClass('vh');
+                $('#mv-progress').progressbar();
+                req_progress();
+            }, 100);
+            var req_progress = function() {
+                $.ajax({
+                    url: Common.getUrl({name: 'get_cp_progress'}) + '?task_id=' + encodeURIComponent(task_id),
+                    dataType: 'json',
+                    success: function(data) {
+                        var bar = $('.ui-progressbar-value', $('#mv-progress'));
+                        if (!data['failed'] && !data['canceled'] && !data['successful']) {
+                            if (data['done'] == data['total']) {
+                                bar.css('width', '100%'); // 'done' and 'total' can be both 0
+                                details.addClass('vh');
+                                cancel_btn.addClass('hide');
+                                other_info.html(gettext("Saving...")).removeClass('hide');
+                            } else {
+                                bar.css('width', parseInt(data['done']/data['total']*100, 10) + '%');
+                            }
+                            bar.show();
+                            setTimeout(req_progress, 1000);
+                        } else if (data['successful']) {
+                            $.modal.close();
+                            if (op == 'mv') {
+                                dirent.remove();
+                            }
+                            Common.feedback(msg, 'success');
+                        } else { // failed or canceled
+                            details.addClass('vh');
+                            var other_msg = data['failed'] ? gettext("Failed.") : gettext("Canceled.");
+                            other_info.html(other_msg).removeClass('hide');
+                            cancel_btn.addClass('hide');
+                            setTimeout(function () { $.modal.close(); }, 1000);
+                        }
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        var error;
+                        if (xhr.responseText) {
+                            error = $.parseJSON(xhr.responseText).error;
+                        } else {
+                            error = gettext("Failed. Please check the network.");
+                        }
+                        details.addClass('vh')
+                        other_info.html(error).removeClass('hide');
+                        cancel_btn.addClass('hide');
+                        setTimeout(function () { $.modal.close(); }, 1000);
+                    }
+                });
+            };
+
+            cancel_btn.click(function() {
+                Common.disableButton(cancel_btn);
+                $.ajax({
+                    url: Common.getUrl({name: 'cancel_cp'}) + '?task_id=' + encodeURIComponent(task_id),
+                    dataType: 'json',
+                    success: function(data) {
+                        details.addClass('vh')
+                        other_info.html(gettext("Canceled.")).removeClass('hide');
+                        cancel_btn.addClass('hide');
+                        setTimeout(function () {$.modal.close();}, 1000);
+                    },
+                    error: function(xhr, textStatus, errorThrown) {
+                        var error;
+                        if (xhr.responseText) {
+                            error = $.parseJSON(xhr.responseText).error;
+                        } else {
+                            error = gettext("Failed. Please check the network.");
+                        }
+                        other_info.html(error).removeClass('hide');
+                        Common.enableButton(cancel_btn);
+                    }
+                });
+            });
+        },
+
+        formSubmit: function() {
+            var _this = this;
+            var path = this.dir.path,
+                repo_id = this.dir.repo_id,
+                obj_name = this.dirent.get('obj_name'),
+                obj_type = this.dirent.get('is_dir') ? 'dir' : 'file';
+            var dst_repo = $('[name="dst_repo"]', this.$form).val(),
+                dst_path = $('[name="dst_path"]', this.$form).val();
+
+            if (!$.trim(dst_repo) || !$.trim(dst_path)) {
+                $('.error', form).removeClass('hide');
+                return false;
+            }
+            if (dst_repo == repo_id && (dst_path == path || (obj_type == 'dir' && dst_path == path + obj_name + '/'))) {
+                this.$error.html(gettext("Invalid destination path")).removeClass('hide');
+                return false;
+            }
+            var options = { repo_id: repo_id };
+            if (obj_type == 'dir') {
+                options.name = this.op_type == 'mv' ? 'mv_dir' : 'cp_dir';
+            } else {
+                options.name = this.op_type == 'mv' ? 'mv_file' : 'cp_file';
+            }
+            var post_url = Common.getUrl(options) + '?path=' + encodeURIComponent(path)
+                + '&obj_name=' + encodeURIComponent(obj_name);
+            var post_data = {
+                'dst_repo': dst_repo,
+                'dst_path': dst_path
+            };
+            var after_op_success = function(data) {
+                $.modal.close();
+                var msg;
+
+                if (_this.op_type == 'mv') {
+                    msg = gettext("Successfully moved %(name)s")
+                        .replace('%(name)s', Common.HTMLescape(obj_name));
+                } else {
+                    msg = gettext("Successfully copied %(name)s")
+                        .replace('%(name)s', Common.HTMLescape(obj_name));
+                }
+
+                if (!data['task_id']) { // no progress
+                    if (_this.op_type == 'mv') {
+                        _this.dir.remove(_this.dirent);
+                    }
+                    Common.feedback(msg, 'success');
+                } else {
+                    _this._showProgress(msg, data['task_id']);
+                }
+            }
+            Common.ajaxPost({
+                'form': this.$form,
+                'post_url': post_url,
+                'post_data': post_data,
+                'after_op_success': after_op_success,
+                'form_id': this.$form.attr('id')
+            });
+            return false;
+        }
+
+    });
+
+    return DirentMvcpDialog;
+});
diff --git a/static/scripts/app/views/dialogs/dirent-rename.js b/static/scripts/app/views/dialogs/dirent-rename.js
new file mode 100644
index 0000000000..ad6cd1fbfd
--- /dev/null
+++ b/static/scripts/app/views/dialogs/dirent-rename.js
@@ -0,0 +1,79 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var DirentRenameDialog = Backbone.View.extend({
+
+        template: _.template($("#dirent-rename-dialog-template").html()),
+
+        initialize: function(options) {
+            this.dirent = options.dirent;
+            this.dir = options.dir;
+
+            this.render();
+            this.$el.modal({appendTo:'#main', autoResize:true, focus:false});
+            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
+
+            this.$error = this.$('.error');
+            this.$form = this.$('form');
+        },
+
+        render: function() {
+            var title = this.dirent.get('is_dir') ?
+                gettext("Rename Folder") : gettext("Rename File");
+
+            this.$el.html(this.template({
+                form_title: title,
+                dirent_name: this.dirent.get('obj_name')
+            }));
+
+            return this;
+        },
+
+        events: {
+            'submit form': 'formSubmit'
+        },
+
+        formSubmit: function() {
+            var _this = this;
+            var new_name = $.trim(this.$('[name="newname"]').val());
+
+            if (!new_name) {
+                return false;
+            }
+            if (new_name == this.dirent.get('obj_name')) {
+                $.modal.close();
+                return false;
+            }
+
+            var $submit_btn = this.$('[type="submit"]');
+            Common.disableButton($submit_btn);
+
+            this.dirent.rename({
+                newname: new_name,
+                success: function() {
+                    $.modal.close();
+                },
+                error: function(xhr, textStatus, errorThrown) {
+                    var err;
+                    if (xhr.responseText) {
+                        err = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err = gettext("Failed. Please check the network.");
+                    }
+                    _this.$error.html(err).removeClass('hide');
+                    $("#simplemodal-container").css({'height':'auto'});
+                    Common.enableButton($submit_btn);
+                }
+            });
+            return false;
+        }
+
+    });
+
+    return DirentRenameDialog;
+});
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 4018bc2fc1..0218fbfa53 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -7,12 +7,14 @@ define([
     'backbone',
     'common',
     'file-tree',
+    'js.cookie',
     'app/collections/dirents',
     'app/views/dirent',
+    'app/views/dirent-grid',
     'app/views/fileupload',
     'app/views/share'
     ], function($, progressbar, magnificPopup, simplemodal, _, Backbone, Common,
-        FileTree, DirentCollection, DirentView, FileUploadView, ShareView) {
+        FileTree, Cookies, DirentCollection, DirentView, DirentGridView, FileUploadView, ShareView) {
         'use strict';
 
         var DirView = Backbone.View.extend({
@@ -29,11 +31,22 @@ define([
             mvProgressTemplate: _.template($("#mv-progress-popup-template").html()),
 
             initialize: function(options) {
-                this.$dirent_list = this.$('.repo-file-list tbody');
+                this.$dirent_list_body = this.$('.repo-file-list tbody');
+                this.$dirent_list = this.$('.repo-file-list');
+                this.$dirent_grid = this.$('.grid-view');
                 this.$path_bar = this.$('.path');
                 // For compatible with css, we use .repo-op instead of .dir-op
                 this.$dir_op_bar = this.$('.repo-op');
 
+                var view_mode = Cookies.get('view_mode');
+                if (view_mode == 'grid') {
+                    this.view_mode = 'grid';
+                } else {
+                    this.view_mode = 'list';
+                }
+
+                this.contextOptions = {};
+
                 this.dir = new DirentCollection();
                 this.listenTo(this.dir, 'add', this.addOne);
                 this.listenTo(this.dir, 'reset', this.reset);
@@ -108,99 +121,46 @@ define([
                         }
                     }
                 });
+
+                // stop default event when clicking the right mouse button in grid view
+                $('.grid-view').bind("contextmenu", function(e) {
+                    if (e && e.preventDefault) {
+                        e.preventDefault();
+                    } else {
+                        window.event.returnValue = false;
+                    }
+                });
+
+                // remove 'grid-item-op' popup
+                $(document).click(function(e) {
+                    var target =  e.target || event.srcElement;
+                    var $popup = $('.grid-item-op');
+                    if ($popup.length > 0 &&
+                        !$popup.is(target) &&
+                        !$popup.find('*').is(target)) {
+                        $popup.remove();
+                    }
+                });
+
             },
 
+            // public function
+            // show a folder
             // 'category' is sth. like url prefix
-            // options is for 'group dir view', at present (Wed Jan 13 12:44:17 CST 2016)
+            // options: for rendering from group view, currently is { group_name: group_name }
             showDir: function(category, repo_id, path, options) {
                 $('#top-search-form').html(this.top_search_form_template({
                     search_repo_id: repo_id
                 }));
 
-                this.$el.show();
-                this.$dirent_list.empty();
-                var loading_tip = this.$('.loading-tip').show();
-
                 this.contextOptions = options;
-
-                var dir = this.dir;
-                dir.setPath(category, repo_id, path);
-                var _this = this;
-                dir.fetch({
-                    cache: false,
-                    reset: true,
-                    data: {'p': path},
-                    success: function (collection, response, opts) {
-                        dir.last_start = 0; // for 'more'
-                        if (response.dirent_list.length == 0 ||  // the dir is empty
-                            !response.dirent_more ) { // no 'more'
-                            loading_tip.hide();
-                        }
-                    },
-                    error: function (collection, response, opts) {
-                        loading_tip.hide();
-                        var $el_con = _this.$('.repo-file-list-topbar, .repo-file-list').hide();
-                        var $error = _this.$('.error');
-                        var err_msg;
-                        var lib_need_decrypt = false;
-                        if (response.responseText) {
-                            if (response.responseJSON.lib_need_decrypt) {
-                                lib_need_decrypt = true;
-                            } else {
-                                err_msg = response.responseJSON.error;
-                            }
-                        } else {
-                            err_msg = gettext('Please check the network.');
-                        }
-                        if (err_msg) {
-                            $error.html(err_msg).show();
-                        }
-
-                        if (lib_need_decrypt) {
-                            var form = $($('#repo-decrypt-form-template').html());
-                            var decrypt_success = false;
-                            form.modal({
-                                containerCss: {'padding': '1px'},
-                                onClose: function () {
-                                    $.modal.close();
-                                    $el_con.show();
-                                    if (!decrypt_success) {
-                                        app.router.navigate(
-                                            category + '/', // need to append '/' at end
-                                            {trigger: true}
-                                        );
-                                    }
-                                }
-                            });
-                            $('#simplemodal-container').css({'height':'auto'});
-                            form.submit(function() {
-                                var passwd = $.trim($('[name="password"]', form).val());
-                                if (!passwd) {
-                                    $('.error', form).html(gettext("Password is required.")).removeClass('hide');
-                                    return false;
-                                }
-                                Common.ajaxPost({
-                                    form: form,
-                                    form_id: form.attr('id'),
-                                    post_url: Common.getUrl({'name':'repo_set_password'}),
-                                    post_data: {
-                                        repo_id: repo_id,
-                                        password: passwd,
-                                        username: app.pageOptions.username
-                                    },
-                                    after_op_success: function() {
-                                        decrypt_success = true;
-                                        $.modal.close();
-                                        _this.showDir(category, repo_id, path);
-                                    }
-                                });
-                                return false;
-                            });
-                        }
-                    }
-                });
+                this.$el.show();
+                this.dir.setPath(category, repo_id, path);
+                this.renderDir();
             },
 
+            // public function
+            // hide the folder view
             hide: function() {
                 $('#top-search-form').html(this.top_search_form_template({
                     search_repo_id: ''
@@ -209,16 +169,26 @@ define([
                 this.$el.hide();
             },
 
+            /***** private functions *****/
+
             addOne: function(dirent) {
-                var view = new DirentView({model: dirent, dirView: this});
-                this.$dirent_list.append(view.render().el);
+                var view;
+                if (this.view_mode == 'list') {
+                    view = new DirentView({model: dirent, dirView: this});
+                    this.$dirent_list_body.append(view.render().el);
+                } else {
+                    view = new DirentGridView({model: dirent, dirView: this});
+                    this.$dirent_grid.append(view.render().el);
+                }
             },
 
             reset: function() {
-                this.dir.each(this.addOne, this);
                 this.renderPath();
                 this.renderDirOpBar();
-                this.renderDirentsHd();
+                if (this.view_mode == 'list') {
+                    this.renderDirentsHd();
+                }
+                this.dir.each(this.addOne, this);
                 this.fileUploadView.setFileInput();
                 this.getImageThumbnail();
             },
@@ -240,12 +210,19 @@ define([
                     repo_id = this.dir.repo_id,
                     cur_path = this.dir.path,
                     _this = this;
+                var thumbnail_size = app.pageOptions.thumbnail_default_size;
+                if (this.view_mode == 'grid') {
+                    thumbnail_size = app.pageOptions.thumbnail_size_for_grid;
+                }
                 var get_thumbnail = function(i) {
                     var cur_img = images_with_no_thumbnail[i];
                     var cur_img_path = Common.pathJoin([cur_path, cur_img.get('obj_name')]);
                     $.ajax({
                         url: Common.getUrl({name: 'thumbnail_create', repo_id: repo_id}),
-                        data: {'path': cur_img_path},
+                        data: {
+                            'path': cur_img_path,
+                            'size': thumbnail_size
+                        },
                         cache: false,
                         dataType: 'json',
                         success: function(data) {
@@ -266,6 +243,103 @@ define([
                 get_thumbnail(0);
             },
 
+            _showLibDecryptDialog: function() {
+                var _this = this;
+                var form = $($('#repo-decrypt-form-template').html());
+                var decrypt_success = false;
+                form.modal({
+                    containerCss: {'padding': '1px'},
+                    onClose: function () {
+                        $.modal.close();
+                        _this.$el_con.show();
+                        if (!decrypt_success) {
+                            app.router.navigate(
+                                _this.dir.category + '/', // need to append '/' at end
+                                {trigger: true}
+                            );
+                        }
+                    }
+                });
+                $('#simplemodal-container').css({'height':'auto'});
+                form.submit(function() {
+                    var passwd = $.trim($('[name="password"]', form).val());
+                    if (!passwd) {
+                        $('.error', form).html(gettext("Password is required.")).removeClass('hide');
+                        return false;
+                    }
+                    Common.ajaxPost({
+                        form: form,
+                        form_id: form.attr('id'),
+                        post_url: Common.getUrl({'name':'repo_set_password'}),
+                        post_data: {
+                            repo_id: _this.dir.repo_id,
+                            password: passwd,
+                            username: app.pageOptions.username
+                        },
+                        after_op_success: function() {
+                            decrypt_success = true;
+                            $.modal.close();
+                            _this.renderDir();
+                        }
+                    });
+                    return false;
+                });
+            },
+
+            renderDir: function() {
+                this.$dirent_grid.empty();
+                this.$dirent_list_body.empty();
+
+                if (this.view_mode == 'list') {
+                    this.$dirent_list.show();
+                    this.$dirent_grid.hide();
+                } else {
+                    this.$dirent_list.hide();
+                    this.$dirent_grid.show();
+                }
+
+                var loading_tip = this.$('.loading-tip').show();
+
+                var _this = this;
+                var thumbnail_size = app.pageOptions.thumbnail_default_size;
+                if (this.view_mode == 'grid') {
+                    thumbnail_size = app.pageOptions.thumbnail_size_for_grid;
+                }
+                var dir = this.dir;
+                dir.fetch({
+                    cache: false,
+                    reset: true,
+                    data: {
+                        'p': dir.path,
+                        'thumbnail_size': thumbnail_size
+                    },
+                    success: function(collection, response, opts) {
+                        dir.last_start = 0; // for 'more'
+                        if (response.dirent_list.length == 0 ||  // the dir is empty
+                            !response.dirent_more ) { // no 'more'
+                            loading_tip.hide();
+                        }
+                    },
+                    error: function(collection, response, opts) {
+                        loading_tip.hide();
+                        _this.$el_con = _this.$('.repo-file-list-topbar, .js-dir-content').hide();
+                        var $error = _this.$('.error');
+                        var err_msg;
+                        if (response.responseText) {
+                            if (response.responseJSON.lib_need_decrypt) {
+                                _this._showLibDecryptDialog();
+                                return;
+                            } else {
+                                err_msg = response.responseJSON.error;
+                            }
+                        } else {
+                            err_msg = gettext('Please check the network.');
+                        }
+                        $error.html(err_msg).show();
+                    }
+                });
+            },
+
             renderPath: function() {
                 var dir = this.dir;
                 var path = dir.path;
@@ -280,14 +354,12 @@ define([
                     context = 'common';
                 }
                 var obj = {
-                        path: path,
-                        repo_name: dir.repo_name,
-                        category: dir.category,
-                        context: context
-                    };
-                if (this.contextOptions) {
-                    $.extend(obj, this.contextOptions);
-                }
+                    path: path,
+                    repo_name: dir.repo_name,
+                    category: dir.category,
+                    context: context
+                };
+                $.extend(obj, this.contextOptions);
 
                 var path_list = path.substr(1).split('/');
                 var path_list_encoded = Common.encodePath(path.substr(1)).split('/');
@@ -308,6 +380,7 @@ define([
                 this.$dir_op_bar.html($.trim(this.dir_op_bar_template({
                     user_perm: dir.user_perm,
                     encrypted: dir.encrypted,
+                    mode: this.view_mode,
                     path: dir.path,
                     repo_id: dir.repo_id,
                     site_root: app.pageOptions.site_root,
@@ -326,6 +399,8 @@ define([
                 'click #add-new-dir': 'newDir',
                 'click #add-new-file': 'newFile',
                 'click #share-cur-dir': 'share',
+                'click #js-switch-grid-view': 'switchToGridView',
+                'click #js-switch-list-view': 'switchToListView',
                 'click th.select': 'select',
                 'click #mv-dirents': 'mv',
                 'click #cp-dirents': 'cp',
@@ -449,26 +524,49 @@ define([
             addNewFile: function(new_dirent) {
                 var dirView = this,
                     dir = this.dir;
-                var view = new DirentView({model: new_dirent, dirView: dirView});
-                var new_file = view.render().el;
-                // put the new file as the first file
-                if ($('tr', dirView.$dirent_list).length == 0) {
-                    dirView.$dirent_list.append(new_file);
-                } else {
-                    var dirs = dir.where({'is_dir':true});
-                    if (dirs.length == 0) {
-                        dirView.$dirent_list.prepend(new_file);
+
+                if (this.view_mode == 'list') {
+                    var view = new DirentView({model: new_dirent, dirView: dirView});
+                    var new_file = view.render().el;
+                    // put the new file as the first file
+                    if ($('tr', dirView.$dirent_list_body).length == 0) {
+                        dirView.$dirent_list_body.append(new_file);
                     } else {
-                        // put the new file after the last dir
-                        $($('tr', dirView.$dirent_list)[dirs.length - 1]).after(new_file);
+                        var dirs = dir.where({'is_dir':true});
+                        if (dirs.length == 0) {
+                            dirView.$dirent_list_body.prepend(new_file);
+                        } else {
+                            // put the new file after the last dir
+                            $($('tr', dirView.$dirent_list_body)[dirs.length - 1]).after(new_file);
+                        }
+                    }
+                } else {
+                    var gview = new DirentGridView({model: new_dirent, dirView: dirView});
+                    var grid_new_file = gview.render().el;
+                    if ($('.grid-item', dirView.$dirent_grid).length == 0) {
+                        dirView.$dirent_grid.append(grid_new_file);
+                    } else {
+                        var dirs = dir.where({'is_dir':true});
+                        if (dirs.length == 0) {
+                            dirView.$dirent_grid.prepend(grid_new_file);
+                        } else {
+                            // put the new file after the last dir
+                            $($('.grid-item', dirView.$dirent_grid)[dirs.length - 1]).after(grid_new_file);
+                        }
                     }
                 }
             },
 
             addNewDir: function(new_dirent) {
                 var dirView = this;
-                var view = new DirentView({model: new_dirent, dirView: dirView});
-                dirView.$dirent_list.prepend(view.render().el); // put the new dir as the first one
+                if (this.view_mode == 'list') {
+                    var view = new DirentView({model: new_dirent, dirView: dirView});
+                    // put the new dir as the first one
+                    dirView.$dirent_list_body.prepend(view.render().el);
+                } else {
+                    var gview = new DirentGridView({model: new_dirent, dirView: dirView});
+                    dirView.$dirent_grid.prepend(gview.render().el);
+                }
             },
 
             share: function () {
@@ -486,6 +584,28 @@ define([
                 new ShareView(options);
             },
 
+            switchToGridView: function() {
+                if (this.view_mode == 'grid') {
+                    return false;
+                } else {
+                    this.view_mode = 'grid';
+                    Cookies.set('view_mode', 'grid');
+                    this.renderDir();
+                    return false;
+                }
+            },
+
+            switchToListView: function() {
+                if (this.view_mode == 'list') {
+                    return false;
+                } else {
+                    this.view_mode = 'list';
+                    Cookies.set('view_mode', 'list');
+                    this.renderDir();
+                    return false;
+                }
+            },
+
             sortByName: function() {
                 this.$('.by-time .sort-icon').hide();
 
@@ -508,7 +628,7 @@ define([
                     }
                 };
                 dirents.sort();
-                this.$dirent_list.empty();
+                this.$dirent_list_body.empty();
                 dirents.each(this.addOne, this);
                 el.toggleClass('icon-caret-up icon-caret-down').show();
                 dirents.comparator = null;
@@ -534,7 +654,7 @@ define([
                 };
                 dirents.sort();
 
-                this.$dirent_list.empty();
+                this.$dirent_list_body.empty();
                 dirents.each(this.addOne, this);
                 el.toggleClass('icon-caret-up icon-caret-down').show();
                 dirents.comparator = null;
@@ -933,11 +1053,16 @@ define([
                     var loading_tip = this.$('.loading-tip'),
                         _this = this;
                     dir.last_start = start;
+                    var thumbnail_size = app.pageOptions.thumbnail_default_size;
+                    if (this.view_mode == 'grid') {
+                        thumbnail_size = app.pageOptions.thumbnail_size_for_grid;
+                    }
                     dir.fetch({
                         cache: false,
                         remove: false,
                         data: {
                             'p': dir.path,
+                            'thumbnail_size': thumbnail_size,
                             'start': dir.more_start
                         },
                         success: function (collection, response, opts) {
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
new file mode 100644
index 0000000000..1d23dbd235
--- /dev/null
+++ b/static/scripts/app/views/dirent-grid.js
@@ -0,0 +1,234 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'file-tree',
+    'app/views/share',
+    'app/views/folder-perm',
+    'app/views/dialogs/dirent-mvcp',
+    'app/views/dialogs/dirent-rename'
+], function($, _, Backbone, Common, FileTree, ShareView, FolderPermView,
+    DirentMvcpDialog, DirentRenameDialog) {
+    'use strict';
+
+    app = app || {};
+    app.globalState = app.globalState || {};
+
+    var DirentGridView = Backbone.View.extend({
+        tagName: 'li',
+        className: 'grid-item',
+
+        dirTemplate: _.template($('#grid-view-dir-item-tmpl').html()),
+        dirOpTemplate: _.template($('#grid-view-dir-op-tmpl').html()),
+        fileTemplate:  _.template($('#grid-view-file-item-tmpl').html()),
+        fileOpTemplate: _.template($('#grid-view-file-op-tmpl').html()),
+        renameTemplate: _.template($("#dirent-rename-dialog-template").html()),
+
+        initialize: function(options) {
+            this.dirView = options.dirView;
+            this.dir = this.dirView.dir;
+
+            this.listenTo(this.model, "change", this.render);
+            this.listenTo(this.model, 'remove', this.remove); // for multi dirents: delete, mv
+        },
+
+        render: function() {
+            var dir = this.dir;
+            var template;
+
+            if (this.model.get('is_dir')) {
+                template = this.dirTemplate;
+            } else {
+                template = this.fileTemplate;
+            }
+
+            this.$el.html(template({
+                dirent: this.model.attributes,
+                dirent_path: this.model.getPath(),
+                icon_url: this.model.getIconUrl(192),
+                url: this.model.getWebUrl(),
+                category: dir.category,
+                repo_id: dir.repo_id,
+                is_repo_owner: dir.is_repo_owner,
+                can_generate_shared_link: app.pageOptions.can_generate_shared_link,
+                is_pro: app.pageOptions.is_pro,
+                repo_encrypted: dir.encrypted
+            }));
+
+            this.$('.file-locked-icon').attr('title', gettext("locked by {placeholder}").replace('{placeholder}', this.model.get('lock_owner_name')));
+
+            return this;
+        },
+
+        events: {
+            'mouseenter': 'highlight',
+            'mouseleave': 'rmHighlight',
+            'contextmenu .img-link': 'showPopupMenu',
+            'contextmenu .text-link': 'showPopupMenu'
+        },
+
+        highlight: function() {
+            this.$('.img-link').addClass('hl');
+            this.$('.text-link').addClass('hl');
+        },
+
+        rmHighlight: function() {
+            this.$('.img-link').removeClass('hl');
+            this.$('.text-link').removeClass('hl');
+        },
+
+        showPopupMenu: function(event) {
+            var dir = this.dir;
+            var template;
+
+            if (this.model.get('is_dir')) {
+                template = this.dirOpTemplate;
+            } else {
+                template = this.fileOpTemplate;
+            }
+
+            this.$('.img-link').addClass('hl');
+            this.$('.text-link').addClass('hl');
+
+            var op = template({
+                dirent: this.model.attributes,
+                dirent_path: this.model.getPath(),
+                download_url: this.model.getDownloadUrl(),
+                category: dir.category,
+                repo_id: dir.repo_id,
+                is_repo_owner: dir.is_repo_owner,
+                can_generate_shared_link: app.pageOptions.can_generate_shared_link,
+                is_pro: app.pageOptions.is_pro,
+                repo_encrypted: dir.encrypted
+            });
+            this.$el.append(op);
+
+            var el_pos = this.$el.offset();
+            this.$('.grid-item-op').css({
+                'position': 'absolute',
+                'left': event.pageX - el_pos.left,
+                'top': event.pageY - el_pos.top
+            });
+
+            // Using _.bind(function, object) to make that whenever the function is
+            // called, the value of this will be the object.
+            this.$('.delete').on('click', _.bind(this.del, this));
+            this.$('.share').on('click', _.bind(this.share, this));
+            this.$('.mv').on('click', _.bind(this.mvcp, this));
+            this.$('.cp').on('click', _.bind(this.mvcp, this));
+            this.$('.rename').on('click', _.bind(this.rename, this));
+            this.$('.open-via-client').on('click', _.bind(this.open_via_client, this));
+            this.$('.lock-file').on('click', _.bind(this.lockFile, this));
+            this.$('.unlock-file').on('click', _.bind(this.unlockFile, this));
+            this.$('.set-folder-permission').on('click', _.bind(this.setFolderPerm, this));
+
+            return false;
+        },
+
+        closeMenu: function() {
+            this.$('.grid-item-op').remove();
+        },
+
+        del: function(event) {
+            this.closeMenu();
+            var dirent_name = this.model.get('obj_name');
+            this.model.deleteFromServer({
+                success: function(data) {
+                    var msg = gettext("Successfully deleted %(name)s")
+                        .replace('%(name)s', Common.HTMLescape(dirent_name));
+                    Common.feedback(msg, 'success');
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            return false;
+        },
+
+        share: function() {
+            var dir = this.dir,
+                obj_name = this.model.get('obj_name'),
+                dirent_path = this.model.getPath();
+
+            var options = {
+                'is_repo_owner': dir.is_repo_owner,
+                'is_virtual': dir.is_virtual,
+                'user_perm': this.model.get('perm'),
+                'repo_id': dir.repo_id,
+                'repo_encrypted': false,
+                'is_dir': this.model.get('is_dir') ? true : false,
+                'dirent_path': dirent_path,
+                'obj_name': obj_name
+            };
+            new ShareView(options);
+            this.closeMenu();
+            return false;
+        },
+
+        mvcp: function(e) {
+            var op_type = $(e.currentTarget).hasClass('mv') ? 'mv' : 'cp';
+            var options = {
+                'dir': this.dir,
+                'dirent': this.model,
+                'op_type': op_type
+            };
+
+            new DirentMvcpDialog(options);
+            this.closeMenu();
+            return false;
+        },
+
+        rename: function() {
+            this.closeMenu();
+            var options = {
+                'dir': this.dir,
+                'dirent': this.model
+            };
+            new DirentRenameDialog(options);
+            return false;
+        },
+
+        setFolderPerm: function() {
+            var options = {
+                'obj_name': this.model.get('obj_name'),
+                'dir_path': this.dir.path,
+                'repo_id': this.dir.repo_id
+            };
+            new FolderPermView(options);
+            return false;
+        },
+
+        lockFile: function() {
+            this.closeMenu();
+            this.model.lockFile({
+                success: function() {
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            return false;
+        },
+
+        unlockFile: function() {
+            this.closeMenu();
+            this.model.unlockFile({
+                success: function() {
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            return false;
+        },
+
+        open_via_client: function() {
+            this.closeMenu();
+            return true;
+        }
+
+    });
+
+    return DirentGridView;
+});
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 3add62a80c..73128f8b3b 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -5,8 +5,10 @@ define([
     'common',
     'file-tree',
     'app/views/share',
+    'app/views/dialogs/dirent-mvcp',
     'app/views/folder-perm'
-], function($, _, Backbone, Common, FileTree, ShareView, FolderPermView) {
+], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog,
+    FolderPermView) {
     'use strict';
 
     app = app || {};
@@ -38,6 +40,9 @@ define([
                 dirent: this.model.attributes,
                 dirent_path: dirent_path,
                 encoded_path: Common.encodePath(dirent_path),
+                icon_url: this.model.getIconUrl(48),
+                url: this.model.getWebUrl(),
+                download_url: this.model.getDownloadUrl(),
                 category: dir.category,
                 repo_id: dir.repo_id,
                 is_repo_owner: dir.is_repo_owner,
@@ -65,7 +70,13 @@ define([
             'click .cp': 'mvcp',
             'click .set-folder-permission': 'setFolderPerm',
             'click .lock-file': 'lockFile',
-            'click .unlock-file': 'unlockFile'
+            'click .unlock-file': 'unlockFile',
+            'click .open-via-client': 'open_via_client'
+        },
+
+        _hideMenu: function() {
+            this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
+            this.$('.hidden-op').addClass('hide');
         },
 
         highlight: function() {
@@ -183,20 +194,8 @@ define([
 
         del: function() {
             var dirent_name = this.model.get('obj_name');
-            var dir = this.dir;
-            var options = {
-                repo_id: dir.repo_id,
-                name: this.model.get('is_dir') ? 'del_dir' : 'del_file'
-            };
-            var model = this.model;
-            $.ajax({
-                url: Common.getUrl(options) + '?parent_dir=' + encodeURIComponent(dir.path)
-                + '&name=' + encodeURIComponent(dirent_name),
-                type: 'POST',
-                dataType: 'json',
-                beforeSend: Common.prepareCSRFToken,
+            this.model.deleteFromServer({
                 success: function(data) {
-                    dir.remove(model);
                     var msg = gettext("Successfully deleted %(name)s")
                         .replace('%(name)s', Common.HTMLescape(dirent_name));
                     Common.feedback(msg, 'success');
@@ -239,9 +238,7 @@ define([
             };
             $('.cancel', form).click(cancelRename);
 
-            var form_id = form.attr('id');
             var _this = this;
-            var dir = this.dirView.dir;
             form.submit(function() {
                 var new_name = $.trim($('[name="newname"]', form).val());
                 if (!new_name) {
@@ -251,27 +248,10 @@ define([
                     cancelRename();
                     return false;
                 }
-                var post_data = {
-                    'oldname': dirent_name,
-                    'newname': new_name
-                };
-                var post_url = Common.getUrl({
-                    name: is_dir ? 'rename_dir' : 'rename_file',
-                    repo_id: dir.repo_id
-                }) + '?parent_dir=' + encodeURIComponent(dir.path);
-                var after_op_success = function(data) {
-                    var renamed_dirent_data = {
-                        'obj_name': data['newname'],
-                        'last_modified': new Date().getTime()/1000,
-                        'last_update': gettext("Just now")
-                    };
-                    if (!is_dir) {
-                        $.extend(renamed_dirent_data, {
-                            'starred': false
-                        });
-                    }
-                    _this.model.set(renamed_dirent_data); // it will trigger 'change' event
-                };
+
+                var submit_btn = $('[type="submit"]', form);
+                Common.disableButton(submit_btn);
+
                 var after_op_error = function(xhr) {
                     var err_msg;
                     if (xhr.responseText) {
@@ -282,16 +262,8 @@ define([
                     Common.feedback(err_msg, 'error');
                     Common.enableButton(submit_btn);
                 };
-
-                var submit_btn = $('[type="submit"]', form);
-                Common.disableButton(submit_btn);
-                $.ajax({
-                    url: post_url,
-                    type: 'POST',
-                    dataType: 'json',
-                    beforeSend: Common.prepareCSRFToken,
-                    data: post_data,
-                    success: after_op_success,
+                _this.model.rename({
+                    newname: new_name,
                     error: after_op_error
                 });
                 return false;
@@ -299,179 +271,15 @@ define([
             return false;
         },
 
-        mvcp: function(event) {
-            var dir = this.dir;
-            var el = event.target || event.srcElement,
-                op_type = $(el).hasClass('mv') ? 'mv' : 'cp',
-                obj_name = this.model.get('obj_name'),
-                obj_type = this.model.get('is_dir') ? 'dir' : 'file';
+        mvcp: function(e) {
+            var op_type = $(e.currentTarget).hasClass('mv') ? 'mv' : 'cp';
+            var options = {
+                'dir': this.dir,
+                'dirent': this.model,
+                'op_type': op_type
+            };
 
-            var title = op_type == 'mv' ? gettext("Move {placeholder} to:") : gettext("Copy {placeholder} to:");
-            title = title.replace('{placeholder}', '<span class="op-target ellipsis ellipsis-op-target" title="' + Common.HTMLescape(obj_name) + '">' + Common.HTMLescape(obj_name) + '</span>');
-
-            var show_cur_repo = true;
-            if (this.model.get('perm') == 'r') {
-                show_cur_repo = false;
-            }
-            var form = $(this.mvcpTemplate({
-                form_title: title,
-                op_type: op_type,
-                obj_type: obj_type,
-                obj_name: obj_name,
-                show_cur_repo: show_cur_repo,
-                show_other_repos: !dir.encrypted
-            }));
-            form.modal({appendTo:'#main', autoResize:true, focus:false});
-            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
-
-            if (show_cur_repo) {
-                FileTree.renderTreeForPath({
-                    repo_name: dir.repo_name,
-                    repo_id: dir.repo_id,
-                    path: dir.path
-                });
-            }
-            if (!dir.encrypted) {
-                FileTree.prepareOtherReposTree({cur_repo_id: dir.repo_id});
-            }
-
-            var dirent = this.$el;
-            var _this = this;
-            form.submit(function() {
-                var form = $(this),
-                    form_id = form.attr('id'),
-                    path = dir.path,
-                    repo_id = dir.repo_id;
-                var dst_repo = $('[name="dst_repo"]', form).val(),
-                    dst_path = $('[name="dst_path"]', form).val(),
-                    op = $('[name="op"]', form).val(),
-                    obj_name = $('[name="obj_name"]', form).val(),
-                    obj_type = $('[name="obj_type"]', form).val();
-
-                if (!$.trim(dst_repo) || !$.trim(dst_path)) {
-                    $('.error', form).removeClass('hide');
-                    return false;
-                }
-                if (dst_repo == repo_id && (dst_path == path || (obj_type == 'dir' && dst_path == path + obj_name + '/'))) {
-                    $('.error', form).html(gettext("Invalid destination path")).removeClass('hide');
-                    return false;
-                }
-                var options = { repo_id: repo_id };
-                if (obj_type == 'dir') {
-                    options.name = op == 'mv' ? 'mv_dir' : 'cp_dir';
-                } else {
-                    options.name = op == 'mv' ? 'mv_file' : 'cp_file';
-                }
-                var post_url = Common.getUrl(options) + '?path=' + encodeURIComponent(path) + '&obj_name=' + encodeURIComponent(obj_name);
-                var post_data = {
-                    'dst_repo': dst_repo,
-                    'dst_path': dst_path
-                };
-                var after_op_success = function(data) {
-                    $.modal.close();
-                    var msg = data['msg'];
-                    if (!data['task_id']) { // no progress
-                        if (op == 'mv') {
-                            dirent.remove();
-                        }
-                        Common.feedback(msg, 'success');
-                    } else {
-                        var mv_progress_popup = $(_this.mvProgressTemplate());
-                        var details = $('#mv-details', mv_progress_popup),
-                            cancel_btn = $('#cancel-mv', mv_progress_popup),
-                            other_info = $('#mv-other-info', mv_progress_popup);
-                        cancel_btn.removeClass('hide');
-                        setTimeout(function () {
-                            mv_progress_popup.modal({containerCss: {
-                                width: 300,
-                                height: 150,
-                                paddingTop: 50
-                            }, focus:false});
-                            var det_text = op == 'mv' ? gettext("Moving %(name)s") : gettext("Copying %(name)s");
-                            details.html(det_text.replace('%(name)s', Common.HTMLescape(obj_name))).removeClass('vh');
-                            $('#mv-progress').progressbar();
-                            req_progress();
-                        }, 100);
-                        var req_progress = function () {
-                            $.ajax({
-                                url: Common.getUrl({name: 'get_cp_progress'}) + '?task_id=' + encodeURIComponent(data['task_id']),
-                                dataType: 'json',
-                                success: function(data) {
-                                    var bar = $('.ui-progressbar-value', $('#mv-progress'));
-                                    if (!data['failed'] && !data['canceled'] && !data['successful']) {
-                                        if (data['done'] == data['total']) {
-                                            bar.css('width', '100%'); // 'done' and 'total' can be both 0
-                                            details.addClass('vh');
-                                            cancel_btn.addClass('hide');
-                                            other_info.html(gettext("Saving...")).removeClass('hide');
-                                        } else {
-                                            bar.css('width', parseInt(data['done']/data['total']*100, 10) + '%');
-                                        }
-                                        bar.show();
-                                        setTimeout(req_progress, 1000);
-                                    } else if (data['successful']) {
-                                        $.modal.close();
-                                        if (op == 'mv') {
-                                            dirent.remove();
-                                        }
-                                        Common.feedback(msg, 'success');
-                                    } else { // failed or canceled
-                                        details.addClass('vh');
-                                        var other_msg = data['failed'] ? gettext("Failed.") : gettext("Canceled.");
-                                        other_info.html(other_msg).removeClass('hide');
-                                        cancel_btn.addClass('hide');
-                                        setTimeout(function () { $.modal.close(); }, 1000);
-                                    }
-                                },
-                                error: function(xhr, textStatus, errorThrown) {
-                                    var error;
-                                    if (xhr.responseText) {
-                                        error = $.parseJSON(xhr.responseText).error;
-                                    } else {
-                                        error = gettext("Failed. Please check the network.");
-                                    }
-                                    details.addClass('vh')
-                                    other_info.html(error).removeClass('hide');
-                                    cancel_btn.addClass('hide');
-                                    setTimeout(function () { $.modal.close(); }, 1000);
-                                }
-                            });
-                        };
-
-                        cancel_btn.click(function() {
-                            Common.disableButton(cancel_btn);
-                            $.ajax({
-                                url: Common.getUrl({name: 'cancel_cp'}) + '?task_id=' + encodeURIComponent(data['task_id']),
-                                dataType: 'json',
-                                success: function(data) {
-                                    details.addClass('vh')
-                                    other_info.html(gettext("Canceled.")).removeClass('hide');
-                                    cancel_btn.addClass('hide');
-                                    setTimeout(function () {$.modal.close();}, 1000);
-                                },
-                                error: function(xhr, textStatus, errorThrown) {
-                                    var error;
-                                    if (xhr.responseText) {
-                                        error = $.parseJSON(xhr.responseText).error;
-                                    } else {
-                                        error = gettext("Failed. Please check the network.");
-                                    }
-                                    other_info.html(error).removeClass('hide');
-                                    Common.enableButton(cancel_btn);
-                                }
-                            });
-                        });
-                    }
-                }
-                Common.ajaxPost({
-                    'form': form,
-                    'post_url': post_url,
-                    'post_data': post_data,
-                    'after_op_success': after_op_success,
-                    'form_id': form_id
-                });
-                return false;
-            });
+            new DirentMvcpDialog(options);
             return false;
         },
 
@@ -485,41 +293,14 @@ define([
             return false;
         },
 
-        lockOrUnlockFile: function(params) {
-            var dir = this.dir,
-                filepath = Common.pathJoin([dir.path, this.model.get('obj_name')]),
-                callback = params.after_success;
-
-            $.ajax({
-                url: Common.getUrl({name: 'lock_or_unlock_file', repo_id: dir.repo_id}),
-                type: 'PUT',
-                dataType: 'json',
-                data: {
-                    'operation': params.op,
-                    'p': filepath
-                },
-                cache: false,
-                beforeSend: Common.prepareCSRFToken,
-                success: function() {
-                    callback();
-                },
-                error: function (xhr) {
-                    Common.ajaxErrorHandler(xhr);
-                }
-            });
-        },
-
         lockFile: function() {
             var _this = this;
-            this.lockOrUnlockFile({
-                'op': 'lock',
-                'after_success': function() {
-                    _this.model.set({
-                        'is_locked': true,
-                        'locked_by_me': true,
-                        'lock_owner_name': app.pageOptions.name
-                    });
+            this.model.lockFile({
+                success: function() {
                     _this.$el.removeClass('hl');
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
                 }
             });
             return false;
@@ -527,17 +308,22 @@ define([
 
         unlockFile: function() {
             var _this = this;
-            this.lockOrUnlockFile({
-                'op': 'unlock',
-                'after_success': function() {
-                    _this.model.set({
-                        'is_locked': false
-                    });
+            this.model.unlockFile({
+                success: function() {
                     _this.$el.removeClass('hl');
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
                 }
             });
             return false;
+        },
+
+        open_via_client: function() {
+            this._hideMenu();
+            return true;
         }
+
     });
 
     return DirentView;
diff --git a/static/scripts/app/views/fileupload.js b/static/scripts/app/views/fileupload.js
index c4b3ddedd3..b0caaede44 100644
--- a/static/scripts/app/views/fileupload.js
+++ b/static/scripts/app/views/fileupload.js
@@ -274,7 +274,7 @@ define([
             .bind('fileuploadprogressall', function (e, data) {
                 $total_progress.html(parseInt(data.loaded / data.total * 100, 10) + '% ' +
                     '<span style="font-size:14px;color:#555;">(' +
-                    $(this).data('blueimp-fileupload')._formatBitrate(data.bitrate) + 
+                    $(this).data('blueimp-fileupload')._formatBitrate(data.bitrate) +
                     ')</span>').removeClass('hide');
                 if (data.loaded > 0 && data.loaded == data.total) {
                     saving_tip.show();
diff --git a/static/scripts/common.js b/static/scripts/common.js
index e06b64ba62..b7268030ff 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -36,6 +36,8 @@ require.config({
 
         'jquery.magnific-popup': 'lib/jquery.magnific-popup',
 
+        'js.cookie': 'lib/js.cookie',
+
         simplemodal: 'lib/jquery.simplemodal',
         jstree: 'lib/jstree.1.0',
         select2: 'lib/select2-3.5.2',
@@ -66,10 +68,10 @@ define([
                 case 'list_lib_dir': return siteRoot + 'ajax/lib/' + options.repo_id + '/dir/';
                 case 'star_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/star/';
                 case 'unstar_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/unstar/';
-                case 'del_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/delete/';
-                case 'del_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/delete/';
-                case 'rename_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/rename/';
-                case 'rename_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/rename/';
+                case 'del_dir': return siteRoot + 'api2/repos/' + options.repo_id + '/dir/';
+                case 'del_file': return siteRoot + 'api2/repos/' + options.repo_id + '/file/';
+                case 'rename_dir': return siteRoot + 'api2/repos/' + options.repo_id + '/dir/';
+                case 'rename_file': return siteRoot + 'api2/repos/' + options.repo_id + '/file/';
                 case 'mv_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/mv/';
                 case 'cp_dir': return siteRoot + 'ajax/repo/' + options.repo_id + '/dir/cp/';
                 case 'mv_file': return siteRoot + 'ajax/repo/' + options.repo_id + '/file/mv/';
@@ -146,6 +148,77 @@ define([
             }
         },
 
+        FILEEXT_ICON_MAP: {
+            // text file
+            'md': 'txt.png',
+            'txt': 'txt.png',
+
+            // pdf file
+            'pdf' : 'pdf.png',
+            // document file
+            'doc' : 'word.png',
+            'docx' : 'word.png',
+            'ppt' : 'ppt.png',
+            'pptx' : 'ppt.png',
+            'xls' : 'excel.png',
+            'xlsx' : 'excel.png',
+            'txt' : 'txt.png',
+            'odt' : 'word.png',
+            'fodt' : 'word.png',
+            'ods' : 'excel.png',
+            'fods' : 'excel.png',
+            'odp' : 'ppt.png',
+            'fodp' : 'ppt.png',
+            // music file
+            'mp3' : 'music.png',
+            'oga' : 'music.png',
+            'ogg' : 'music.png',
+            'flac' : 'music.png',
+            'aac' : 'music.png',
+            'ac3' : 'music.png',
+            'wma' : 'music.png',
+            // image file
+            'jpg' : 'pic.png',
+            'jpeg' : 'pic.png',
+            'png' : 'pic.png',
+            'svg' : 'pic.png',
+            'gif' : 'pic.png',
+            'bmp' : 'pic.png',
+            'ico' : 'pic.png',
+            // default
+            'default' : 'file.png'
+        },
+
+        getFileIconUrl: function(filename, size) {
+            if (size > 24) {
+                size = 192;
+            } else {
+                size = 24;
+            }
+
+            var file_ext;
+            if (filename.lastIndexOf('.') == -1) {
+                return app.config.mediaUrl + "img/file/" + size + "/"
+                    + this.FILEEXT_ICON_MAP['default'];
+            } else {
+                file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+            }
+
+            if (_.has(this.FILEEXT_ICON_MAP, file_ext)) {
+                return app.config.mediaUrl + "img/file/" + size + "/" + this.FILEEXT_ICON_MAP[file_ext];
+            } else {
+                return app.config.mediaUrl + "img/file/" + size + "/" + this.FILEEXT_ICON_MAP['default'];
+            }
+        },
+
+        getDirIconUrl: function(is_readonly, size) {
+            if (is_readonly) {
+                return app.config.mediaUrl + "img/folder-read-only-192.png";
+            } else {
+                return app.config.mediaUrl + "img/folder-beige-192.png";
+            }
+        },
+
         showConfirm: function(title, content, yesCallback) {
             var $popup = $("#confirm-popup");
             var $cont = $('#confirm-con');
diff --git a/static/scripts/lib/js.cookie.js b/static/scripts/lib/js.cookie.js
new file mode 100644
index 0000000000..9c7626735d
--- /dev/null
+++ b/static/scripts/lib/js.cookie.js
@@ -0,0 +1,145 @@
+/*!
+ * JavaScript Cookie v2.1.0
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				if (!converter.write) {
+					value = encodeURIComponent(String(value))
+						.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+				} else {
+					value = converter.write(value, key);
+				}
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure ? '; secure' : ''
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					cookie = converter.read ?
+						converter.read(cookie, name) : converter(cookie, name) ||
+						cookie.replace(rdecode, decodeURIComponent);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					if (key === name) {
+						result = cookie;
+						break;
+					}
+
+					if (!key) {
+						result[name] = cookie;
+					}
+				} catch (e) {}
+			}
+
+			return result;
+		}
+
+		api.get = api.set = api;
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));