diff --git a/media/css/file_view_extra.css b/media/css/file_view_extra.css
new file mode 100644
index 0000000000..7338ecfd2b
--- /dev/null
+++ b/media/css/file_view_extra.css
@@ -0,0 +1,50 @@
+#main {
+    width:100%;
+}
+#view-hd,
+#view-path-op,
+#file-op,
+#sf-commit-op {
+    width:950px;
+    margin:0 auto;
+}
+#file-op {
+    padding:0;
+    border:0;
+}
+#file-op .avatar,
+#file-op .name,
+#file-op .time,
+#file-op span {
+    vertical-align:middle;
+}
+#file-op .time {
+    color:#666;
+    margin:0 2px 0 8px;
+}
+#file-op .file-diff {
+    font-size:100%;
+}
+#file-op .contributors {
+    margin-left:8px;
+}
+#file {
+    padding:0;
+    background:#fff;
+}
+#file-view {
+    padding:30px 0 10px;
+    min-height:400px;
+    background:#f4f4f4;
+    border:1px solid #ededed;
+    margin-top:12px;
+}
+#sf,
+#md-view {
+    width:624px;
+    padding:40px 96px;
+    border:1px solid #ccc;
+    margin:0 auto;
+    box-shadow:0 0 6px #ccc;
+    min-height:400px;
+}
diff --git a/templates/repo_edit_file.html b/templates/repo_edit_file.html
index 70aa85dbb5..96951f0a6f 100644
--- a/templates/repo_edit_file.html
+++ b/templates/repo_edit_file.html
@@ -40,14 +40,9 @@
     background:#f4f4f4;
     border-top:1px solid #ededed;
 }
-#md-view {
-    width:690px;
-}
-#sf {
+#sf, #md-view {
     width:624px;
     padding:40px 96px;
-}
-#sf, #md-view {
     box-shadow:0 0 6px #ccc;
     min-height:400px;
     border:1px solid #ccc;
@@ -61,7 +56,11 @@
     z-index:1010;/*make seaf image show below path-op*/
 }
 .CodeMirror {
+    {% if filetype == 'Markdown' %}
+    width:818px;
+    {% else %}
     width:950px;
+    {% endif %}
     margin:0 auto;
     box-shadow:0 0 6px #272822;
 }
diff --git a/templates/repo_view_file.html b/templates/repo_view_file.html
index 8695966690..617f166355 100644
--- a/templates/repo_view_file.html
+++ b/templates/repo_view_file.html
@@ -6,53 +6,8 @@
 {% if filetype == 'Text' %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
 {% endif %}
-{% if filetype == 'Sf' %}
-<style type="text/css">
-#main {
-    width:100%;
-}
-#view-hd,
-#view-path-op,
-#file-op,
-#sf-commit-op {
-    width:950px;
-    margin:0 auto;
-}
-#file-op {
-    padding:0;
-    border:0;
-}
-#file-op .avatar,
-#file-op .name,
-#file-op .time,
-#file-op span {
-    vertical-align:middle;
-}
-#file-op .time {
-    color:#666;
-    margin:0 4px 0 8px;
-}
-#file-op .contributors {
-    margin-left:8px;
-}
-#file {
-    padding:0;
-    background:#fff;
-}
-#file-view {
-    background:#f4f4f4;
-    border-top:1px solid #ededed;
-    margin-top:12px;
-}
-#sf {
-    width:624px;
-    padding:40px 96px;
-    border:1px solid #ccc;
-    margin:30px auto 10px;
-    box-shadow:0 0 6px #ccc;
-    min-height:400px;
-}
-</style>
+{% if filetype == 'Sf' or filetype == 'Markdown' %}
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
 {% endif %}
 {% endblock %}
 
@@ -84,7 +39,15 @@
     {% endif %}
     </div>
 
+    {% if filetype == 'Sf' or filetype == 'Markdown'%}
+        {% if view_history %}
+        <div id="view-path-op" class="hide">
+        {% else %}
+        <div id="view-path-op" class="w100 ovhd">
+        {% endif %}
+    {% else %}
     <div id="view-path-op" class="w100 ovhd">
+    {% endif %}
         <p class="path fleft">
         {% trans "Current Path: "%}
 
@@ -130,12 +93,12 @@
         {% endif %}
     </div>
 
-    {% if not view_history and filetype != 'Sf' %}
+    {% if not view_history and filetype != 'Sf' and filetype != 'Markdown' %}
     <div id="file-commit-info">
         <div class="latest-commit ovhd">
             <p class="latest-commit-info fleft">
                 {% avatar latest_contributor 20 %} <a href="{% url 'user_profile' latest_contributor %}" class="name">{{ latest_contributor|email2nickname }}</a><span class="time">{{ last_modified|translate_seahub_time}}</span><span>{% trans "updated this file"%}</span>
-                {% if filetype == 'Text' or filetype == 'Markdown' %}
+                {% if filetype == 'Text' %}
                 {% if last_commit_id %}
                 <span><a class="file-diff" href="{% url 'text_diff' repo.id %}?p={{path|urlencode}}&commit={{last_commit_id}}">{% trans "Detail"%}</a></span>
                 {% endif %}
@@ -161,9 +124,19 @@
         <div id="file-op">
         {% endif %}
 
-        {% if not view_history and filetype == 'Sf' %}
+        {% if not view_history %}
+            {% if filetype == 'Sf' or filetype == 'Markdown' %}
             <div class="commit fleft">
-                {% avatar latest_contributor 20 %} <a href="{% url 'user_profile' latest_contributor %}" class="name">{{ latest_contributor|email2nickname }}</a><span class="time">{{ last_modified|translate_seahub_time}}</span><span>{% trans "updated this file"%}.</span>
+                {% avatar latest_contributor 20 %} <a href="{% url 'user_profile' latest_contributor %}" class="name">{{ latest_contributor|email2nickname }}</a><span class="time">{{ last_modified|translate_seahub_time}}</span>
+                {% if filetype == 'Markdown' %}
+                {% if last_commit_id %}
+                <span>{% trans "updated this file"%}, <a class="file-diff" href="{% url 'text_diff' repo.id %}?p={{path|urlencode}}&commit={{last_commit_id}}">{% trans "Detail"%}</a>.</span>
+                {% endif %}
+                {% endif %}
+
+                {% if filetype == 'Sf' %}
+                <span>{% trans "updated this file"%}.</span>
+                {% endif %}
                 <span class="contributors">{% blocktrans count counter=contributors|length %}one contributor{% plural %} {{ counter }} contributors {% endblocktrans %}</span>
                 {% for user in contributors %}
                 <a href="{% url 'user_profile' user %}" title="{{ user|email2nickname}}">{% avatar user 16 %}</a>
@@ -172,6 +145,7 @@
             {% if user_perm == 'rw' %}
             <button data-url="{% url 'file_revisions' repo.id %}?p={{ path }}" class="history">{% trans "History"%}</button>
             {% endif %}
+            {% endif %}
         {% endif %}
 
             {% if not view_history and request.user.is_authenticated %}
@@ -199,7 +173,13 @@
                 {% endif %}
                 {% endifnotequal %}
             {% else %}
-            <p>{% trans "Loading..."%}</p>
+                {% if filetype == 'Markdown' %}
+                <div id="md-view" class="article">
+                    <p>{% trans "Loading..."%}</p>
+                </div>
+                {% else %}
+                <p>{% trans "Loading..."%}</p>
+                {% endif %}
             {% endif %}
         </div>
     </div>
@@ -601,13 +581,16 @@ $('#back').click(function() {
 {% endif %}
 {% endif %}
 
-{% if filetype == 'Sf' %}
+{% if filetype == 'Sf' or filetype == 'Markdown' %}
 {% if not view_history %}
 $('#file-op .history').click(function () {
     location.href = $(this).data('url');
 });
-{% endif %}
 $('#main-panel').css({'margin-bottom':0});
+{% else %}
+$('.path').css('margin-top', '.5em');
+$('#file-op').prepend($('.path'));
+{% endif %}
 {% endif %}
 </script>
 {% endblock %}
diff --git a/templates/snippets/repo_file_get.html b/templates/snippets/repo_file_get.html
index 772cb43340..f602976a41 100644
--- a/templates/snippets/repo_file_get.html
+++ b/templates/snippets/repo_file_get.html
@@ -101,7 +101,7 @@
     {% endifnotequal %}
 
     {% if err %}
-    $('#file-view').html('<p class="error">{{ err }}</p>').addClass('file-view-tip');
+    $('#file-view').html('<div id="md-view" class="article"><p class="error">{{ err }}</p></div>');
     {% endif %}
 {% endif %}
 
diff --git a/templates/view_shared_file.html b/templates/view_shared_file.html
index 4628434839..0823538bd9 100644
--- a/templates/view_shared_file.html
+++ b/templates/view_shared_file.html
@@ -2,21 +2,33 @@
 {% load seahub_tags i18n %}
 
 {% block extra_style %}
+{% if filetype == 'Text' %}
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
+{% endif %}
+{% if filetype == 'Sf' or filetype == 'Markdown' %}
+<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/file_view_extra.css" />
+{% endif %}
 {% endblock %}
 
 {% block main_panel %}
-    <h2>{{ file_name }}</h2>
+    <h2 id="view-hd">{{ file_name }}</h2>
+    {% if filetype != 'Markdown' and filetype != 'Sf' %}
     <p class="file-share-from">{% trans "Shared by: " %}{{ username }}</p>
+    {% endif %}
     <div id="file">
         {% if filetype == 'PDF' and not pdf_use_flas %}
         <div id="file-op" class="hide">
         {% else %}
         <div id="file-op">
         {% endif %}
+            {% if filetype == 'Markdown' or filetype == 'Sf' %}
+            <p class="fleft">{% trans "Shared by: " %}{{ username }}</p>
+            {% endif %}
+
             {% if filetype == 'Text' or filetype == 'Image' or filetype == 'SVG' or filetype == 'Markdown' %}
             <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=view&t={{ shared_token }}" id="view-original">{% trans "Raw" %}</button>
             {% endif %}
+
             <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/{{ obj_id }}/?file_name={{ file_name }}&op=download&t={{ shared_token }}" id="download">{% trans "Download" %}</button>
         </div>
         <div id="file-view">
@@ -25,11 +37,17 @@
                 {% if filetype == 'Text' %}
                 <textarea id="docu-view" class="vh">{{ file_content|escape }}</textarea>
                 {% else %}
-                <div id="sf-view" class="article">{{ file_content|safe }}</div>
+                <div id="sf" class="article">{{ file_content|safe }}</div>
                 {% endif %}
                 {% endifnotequal %}
             {% else %}
-            <p>{% trans "Loading..." %}</p>
+                {% if filetype == 'Markdown' %}
+                <div id="md-view" class="article">
+                    <p>{% trans "Loading..."%}</p>
+                </div>
+                {% else %}
+                <p>{% trans "Loading..." %}</p>
+                {% endif %}
             {% endif %}
         </div>
     </div>