diff --git a/media/css/seahub.css b/media/css/seahub.css
index e29f4cc11b..ec7690d41f 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2629,6 +2629,16 @@ button.sf-dropdown-toggle:focus {
 }
 
 /* file view online, file edit */
+.file-view-hd {
+    font-size:1.4em;
+    margin-bottom:0px;
+}
+.file-view-op {
+    margin-top:10px;
+}
+.file-view-meta-info {
+    margin:0;
+}
 #shared-link,
 #shared-upload-link,
 #shared-link-text,
@@ -2664,7 +2674,7 @@ button.sf-dropdown-toggle:focus {
 #file-view-tip {
     height:130px;
     padding:30px 10px 10px;
-    width:930px;
+    width:950px;
     background:#fff;
     text-align:center;
 }
@@ -2674,24 +2684,28 @@ button.sf-dropdown-toggle:focus {
     font-family: Consolas,"Liberation Mono",Courier,monospace;/*override .ace_editor*/
     min-height: 200px;
 }
-#img-prev {
+#img-prev,
+#img-next {
     position:absolute;
+    top:48%;
+    text-decoration:none;
+    color:#888;
+    width:50px;
+    height:50px;
+    background:#fff;
+    border-radius:100%;
+    line-height:50px;
+}
+#img-prev {
     left:15px;
 }
 #img-next {
-    position:absolute;
     right:15px;
 }
-#img-prev,
-#img-next {
-    top:48%;
-    text-decoration:none;
-    color: #333;
-    width: 50px;
-    height: 50px;
-    background: #fff;
-    border-radius: 100%;
-    line-height: 50px;
+
+#img-prev:hover,
+#img-next:hover {
+    color:#333;
 }
 #image-view {
     padding:1px;
@@ -3465,7 +3479,7 @@ button.sf-dropdown-toggle:focus {
 }
 .shared-file-op-btn {
     padding:7px;
-    margin-top:11px;
+    margin-top:9px;
 }
 /*random password */
 #share-popup .passwd-wrapper,
diff --git a/seahub/templates/shared_file_view.html b/seahub/templates/shared_file_view.html
index ceb0df1937..8ef2fdde11 100644
--- a/seahub/templates/shared_file_view.html
+++ b/seahub/templates/shared_file_view.html
@@ -13,7 +13,7 @@
     {% endif %}
     <div id="shared-file-view-hd" class="ovhd">
         <div class="fleft js-file-info">
-            <h2 class="ellipsis no-bold" title="{{ file_name }}">{{ file_name }}</h2>
+            <h2 class="file-view-hd ellipsis no-bold" title="{{ file_name }}">{{ file_name }}</h2>
             {% if zipped %}
             <p class="cur-path ellipsis">
               {% trans "Current path: "%}
@@ -42,10 +42,7 @@
         </div>
     </div>
 
-    <div id="file">
-        {% include 'snippets/file_content_html.html' %}
-    </div>
-
+    {% include 'snippets/file_content_html.html' %}
 
     <form id="file-save-form" action="{{save_to_link}}" method="post" class="file-choose-form hide">{% csrf_token %}
         <h3>{% trans "Save To:" %}</h3>
diff --git a/seahub/templates/snippets/file_content_html.html b/seahub/templates/snippets/file_content_html.html
index 5552c1be68..e323792f7f 100644
--- a/seahub/templates/snippets/file_content_html.html
+++ b/seahub/templates/snippets/file_content_html.html
@@ -4,7 +4,7 @@
 content of files that can be viewed online shows here.
 For details please refer to 'snippets/file_content_js.html'.
 {% endcomment %}
-<div id="file-view" {% if filetype == 'Image' %}class="image-file-view"{% endif %}>
+<div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
     {% include 'snippets/file_encoding.html' %}
     {% if not err %}
         {% if filetype == 'Text' or filetype == 'Markdown' %}
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index 005b567f42..674ee6afec 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -13,47 +13,32 @@
 {% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
 {% block main_content %}
-    <div id="view-hd">
-        <h2>{{ filename }}
-            {% if is_starred %}
-            <a id="file-star" class="no-deco icon-star" href="#" title="{% trans "starred" %}" aria-label="{% trans "starred" %}"></a>
-            {% else %}
-            <a id="file-star" class="no-deco icon-star-empty" href="#" title="{% trans "unstarred" %}" aria-label="{% trans "unstarred" %}"></a>
-            {% endif %}
+    <div id="view-hd" class="ovhd">
+        <div class="fleft">
+            <h2 class="file-view-hd">
+                <span class="vam">{{ filename }}</span>
+                {% if is_starred %}
+                <a id="file-star" class="vam no-deco icon-star" href="#" title="{% trans "starred" %}" aria-label="{% trans "starred" %}"></a>
+                {% else %}
+                <a id="file-star" class="vam no-deco icon-star-empty" href="#" title="{% trans "unstarred" %}" aria-label="{% trans "unstarred" %}"></a>
+                {% endif %}
 
-            {% if is_pro %}
-            <img class="file-locked-icon cspt vam {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" title="{% trans "locked" %}" aria-label="{% trans "locked" %}" />
-            {% endif %}
-        </h2>
-    </div>
-
-    <div id="view-path-op">
-        <p class="file-path">
-        {% trans "Current Path: "%}
-        {% for name, link in zipped %}
-            {% if not forloop.last %}
-                <a href="{% url 'view_common_lib_dir' repo.id link|strip_slash %}">{{ name }}</a> /
-            {% else %}
-                {{ name }}
-            {% endif %}
-        {% endfor %}
-        </p>
-    </div>
-
-    <div id="file">
-        <div id="file-op" class="ovhd">
-            <div class="commit fleft">
-                {% avatar latest_contributor 24 %} <a href="{% url 'user_profile' latest_contributor %}" class="name vam">{{ latest_contributor|email2nickname }}</a>
+                {% if is_pro %}
+                <img class="file-locked-icon cspt vam {% if not file_locked %}hide{% endif %}" width="16" src="{{ MEDIA_URL }}img/file-locked-32.png" alt="{% trans "locked" %}" title="{% trans "locked" %}" aria-label="{% trans "locked" %}" />
+                {% endif %}
+            </h2>
+            <div class="commit">
+                <a href="{% url 'user_profile' latest_contributor %}" class="name vam">{{ latest_contributor|email2nickname }}</a>
                 <span class="time vam">{{ last_modified|translate_seahub_time}}</span>
                 {% block update_detail %}
                 {% if last_commit_id %}
                   <span class="vam">{% trans "updated this file"%}.</span>
                 {% endif %}
                 {% endblock %}
-
             </div>
+        </div>
 
-            <div class="fright sf-btn-group">
+        <div class="sf-btn-group file-view-op fright">
             {% if can_lock_unlock_file %}
                 {% if not file_locked %}
                     <button id="lock-file" class="sf-btn-group-btn sf-btn-group-btn-first op-icon sf2-icon-lock" title="{% trans "Lock" %}"></button>
@@ -82,22 +67,21 @@
             <a class="sf-btn-group-btn sf-btn-link op-icon sf2-icon-download" href="?dl=1" id="download" title="{% trans "Download"%}"></a>
 
             <button id="discuss" class="sf-btn-group-btn sf-btn-group-btn-last op-icon sf2-icon-msgs" title="{% trans "Comment" %}"></button>
-            </div>
-
-            <div id="file-discussions" class="right-side-panel"></div>
         </div>
 
-        <div id="file-view" {% if filetype == 'Image' %}class="image-file-view"{% endif %}>
-          {% if err %}
-            <div id="file-view-tip">
-            {% if err != 'invalid extension' %}
-                <p class="error">{{ err }}</p>
-            {% endif %}
-            </div>
-          {% else %}
+        <div id="file-discussions" class="right-side-panel"></div>
+    </div>
+
+    <div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
+      {% if err %}
+        <div id="file-view-tip">
+        {% if err != 'invalid extension' %}
+            <p class="error">{{ err }}</p>
+        {% endif %}
+        </div>
+      {% else %}
           {% block file_view %}{% endblock %}
-          {% endif %}
-        </div>
+      {% endif %}
     </div>
 
     {% include "snippets/file_share_popup.html" %}
@@ -301,7 +285,7 @@ if (ref_list.length > 1 && ref_list[0].indexOf('search') > 0) {
 $(window).load(function() {
     if (highlight_kw) {
         // hl kw in file title
-        highlight_kw($('#view-hd')[0]);
+        highlight_kw($('.file-view-hd span')[0]);
 
         // hl kw in file content
         if ('{{filetype}}' == 'Markdown') {
diff --git a/seahub/templates/view_history_file.html b/seahub/templates/view_history_file.html
index 61043b4e5b..894070151b 100644
--- a/seahub/templates/view_history_file.html
+++ b/seahub/templates/view_history_file.html
@@ -12,30 +12,18 @@
 {% block main_css_class %}{% endblock %} {# remove the padding-top css #}
 
 {% block main_content %}
-    <div id="view-hd">
-      {% block view_hd %}
-        <h2>
-          {{file_name}}
-          <span class="commit-time">({{ current_commit.props.ctime|tsstr_sec }})</span>
-        </h2>
-      {% endblock %}
-    </div>
-
-    <div id="file">
-        <div id="file-op" class="ovhd">
-            <p class="history-file-path fleft">
-              {% block file_path %}
-                {% trans "Current Path: "%}
-                {% for name, link in zipped %}
-                    {% if not forloop.last %} {{ name }} / {% else %} {{ name }} {% endif %}
-                {% endfor %}
-              {% endblock %}
-            </p>
-
-            <a class="sf-btn-link fright" href="{% url 'download_file' repo.id obj_id%}?file_name={{ file_name|urlencode }}&p={{path|urlencode}}" id="download">{% trans "Download"%}</a>
+    <div id="view-hd" class="ovhd">
+        <div class="fleft">
+            <h2 class="file-view-hd">{{file_name}}</h2>
+            {% block file_path %}
+            <p class="file-view-meta-info">{{ current_commit.props.ctime|tsstr_sec }}</p>
+            {% endblock %}
         </div>
-        {% include 'snippets/file_content_html.html' %}
+
+        <a class="file-view-op sf-btn-link fright" href="{% url 'download_file' repo.id obj_id%}?file_name={{ file_name|urlencode }}&p={{path|urlencode}}" id="download">{% trans "Download"%}</a>
     </div>
+
+    {% include 'snippets/file_content_html.html' %}
 {% endblock %}
 
 {% block extra_script %}
diff --git a/seahub/templates/view_snapshot_file.html b/seahub/templates/view_snapshot_file.html
index c76e4bede7..05486b7ddf 100644
--- a/seahub/templates/view_snapshot_file.html
+++ b/seahub/templates/view_snapshot_file.html
@@ -1,17 +1 @@
 {% extends 'view_history_file.html' %}
-{% load seahub_tags i18n %}
-{% load url from future %}
-
-{% block view_hd %}
-<h2>
-    {{file_name}}
-    <span class="commit-time">({{ current_commit.props.ctime|tsstr_sec }})</span>
-</h2>
-{% endblock %}
-
-{% block file_path %}
-  {% trans "Current Path: "%}
-  {% for name, link in zipped %}
-    {% if not forloop.last %} <a href="{% url 'repo_history_view' repo.id %}?commit_id={{ current_commit.id }}&p={{ link|urlencode }}">{{ name }}</a> / {% else %} {{ name }} {% endif %}
-  {% endfor %}
-{% endblock %}
diff --git a/seahub/templates/view_trash_file.html b/seahub/templates/view_trash_file.html
index bfff09ceca..221d4f2fcf 100644
--- a/seahub/templates/view_trash_file.html
+++ b/seahub/templates/view_trash_file.html
@@ -2,10 +2,6 @@
 {% load i18n %}
 {% load url from future %}
 
-{% block view_hd %}
-    <h2>{{file_name}}</h2>
-{% endblock %}
-
 {% block file_path %}
-  {% trans "Current Path: "%}{% trans "Trash" %}
+<p class="file-view-meta-info">{% trans "Current Path: "%}{% trans "Trash" %}</p>
 {% endblock %}