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/templates.html b/seahub/templates/js/templates.html
index 09bc312b0d..7f51b7568a 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -210,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>
                 <% } %>
@@ -242,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>
@@ -283,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) { %>
@@ -297,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>
                 <% } %>
@@ -333,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>
@@ -357,7 +347,7 @@
 
 <script type="text/template" id="grid-view-file-item-tmpl">
     <a href="<%= url %>" class="img-link" target="_blank">
-        <img src="{{ MEDIA_URL }}img/file/txt-192.png" alt="" width="96" class="vam" />
+        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
     </a>
 
     <a href="<%= url %>" class="ellipsis text-link normal" target="_blank">
@@ -371,11 +361,7 @@
 
 <script type="text/template" id="grid-view-dir-item-tmpl">
     <a href="<%= url %>" class="img-link">
-        <% if (dirent.perm == 'r') { %>
-        <img src="{{ MEDIA_URL }}img/folder-read-only-192.png" alt="" width="96" class="vam" />
-        <% } else { %>
-        <img src="{{ MEDIA_URL }}img/folder-beige-192.png" alt="" width="96" class="vam" />
-        <% } %>
+        <img src="<%= icon_url %>" alt="" width="96" class="vam" />
     </a>
 
     <a href="<%= url %>" class="ellipsis normal text-link">
@@ -399,12 +385,12 @@
                 <% 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>
                     <% } %>
+                <% } 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>
 </script>
@@ -420,9 +406,7 @@
         <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 (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>
 </script>
diff --git a/seahub/templates/libraries.html b/seahub/templates/libraries.html
index 4cf339f858..5478debb1f 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' %}",
diff --git a/static/scripts/app/models/dirent.js b/static/scripts/app/models/dirent.js
index 258fae8de4..f4747a714c 100644
--- a/static/scripts/app/models/dirent.js
+++ b/static/scripts/app/models/dirent.js
@@ -13,6 +13,15 @@ define([
             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;
diff --git a/static/scripts/app/views/dirent-grid.js b/static/scripts/app/views/dirent-grid.js
index d4f043e100..94fe4a3972 100644
--- a/static/scripts/app/views/dirent-grid.js
+++ b/static/scripts/app/views/dirent-grid.js
@@ -50,6 +50,7 @@ define([
             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,
@@ -132,6 +133,7 @@ define([
             this.$el.on('click', '.mv', _.bind(this.mvcp, this));
             this.$el.on('click', '.cp', _.bind(this.mvcp, this));
             this.$el.on('click', '.rename', _.bind(this.rename, this));
+            this.$el.on('click', '.open-via-client', _.bind(this.open_via_client, this));
 
             return false;
         },
@@ -196,6 +198,11 @@ define([
             };
             new DirentRenameDialog(options);
             return false;
+        },
+
+        open_via_client: function() {
+            this._closeMenu();
+            return true;
         }
 
     });
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 1202f1a22d..4ecbd77555 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -38,6 +38,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 +68,14 @@ 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.$('.hidden-op').addClass('hide');
+            this.$el.removeClass('hl').find('.repo-file-op').addClass('vh');
+            this.$('.hidden-op').addClass('hide');
         },
 
         highlight: function() {
@@ -498,7 +508,13 @@ define([
                 }
             });
             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 97bdd6e21c..b7268030ff 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -148,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');