diff --git a/media/css/seahub.css b/media/css/seahub.css
index 8c15b25f99..3640f0eaa6 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1,36 +1,5 @@
 body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,form,input,button,img { margin:0; padding:0; }
 ul > li { list-style:none; }
-.error { color:red; }
-.fleft { float:left }
-.fright { float:right }
-.clear { clear:both; }
-.show { display:block }
-.hide { display:none }
-.errorlist { color: red; }
-.ovhd { overflow:hidden; }
-.bold { font-weight:bold; }
-.mgb5 { margin-bottom:5px; }
-.mgb10 { margin-bottom:10px; }
-.mgt10 { margin-top:10px; }
-.label { color:#333; font-size:12px; font-style:normal; }
-.w100 {
-	width: 100%;
-}
-.notification {
-    padding:5px;
-    background:#FDF;
-    margin:10px 0;
-}
-.tip {
-    color:#808080;
-    font-size:12px;
-}
-.vh {
-    visibility:hidden;
-}
-.al-rt {
-    text-align:right;
-}
 a { color:#ee8833; text-decoration:none; font-weight:bold; }
 a:hover { color: #ff9933; text-decoration: underline; }
 img { border:none; }
@@ -94,6 +63,45 @@ tr.first { background-color: #00FF00; }
 table img {
     vertical-align:middle;
 }
+/*common class*/
+.error { color:red; }
+.fleft { float:left }
+.fright { float:right }
+.clear { clear:both; }
+.show { display:block }
+.hide { display:none }
+.errorlist { color: red; }
+.ovhd { overflow:hidden; }
+.bold { font-weight:bold; }
+.label { color:#333; font-size:12px; font-style:normal; }
+.w100 {
+	width: 100%;
+}
+.notification {
+    padding:5px;
+    background:#FDF;
+    margin:10px 0;
+}
+.tip {
+    color:#808080;
+    font-size:12px;
+}
+.vh {
+    visibility:hidden;
+}
+.al-rt {
+    text-align:right;
+}
+.op,
+.more {
+    font-weight:normal;
+    font-size:12px;
+    color:#080;
+}
+.op {
+    font-size:13px;
+}
+
 /* container */
 #wrapper { font: 13px/1.5 Arial, Helvetica, sans-serif; }
 #header, #main, #footer { width:950px; }
@@ -248,15 +256,6 @@ table img {
 #repo-page .main {
     width:680px;
 }
-#repo-page .op,
-#repo-page .more {
-    font-weight:normal;
-    font-size:12px;
-    color:#080;
-}
-#repo-page .op {
-    font-size:13px;
-}
 #repo-page .latest-commit .more:hover {
     text-decoration:none;
 }
diff --git a/templates/repo_history.html b/templates/repo_history.html
index 9cbd01d9e0..fe6ee74eec 100644
--- a/templates/repo_history.html
+++ b/templates/repo_history.html
@@ -12,8 +12,8 @@
 <h2 id="repo-history-hd">{{repo.props.name}} 修改历史</h2>
 <table>
     <tr>
-        <th width="13%">修改时间</th>
-        <th width="17%">修改者</th>
+        <th width="20%">修改时间</th>
+        <th width="10%">修改者</th>
         <th width="60%">描述</th>
         <th width="10%">操作</th>
     </tr>
@@ -28,11 +28,11 @@
         <td>{{ commit.props.desc|translate_commit_desc }}</td>
         {% if not forloop.last %}
         <td>
-	    <a href="{{ SITE_ROOT }}repo/history/dir/{{ repo.id }}/?commit_id={{ commit.id }}">浏览</a>
+	        <a href="{{ SITE_ROOT }}repo/history/dir/{{ repo.id }}/?commit_id={{ commit.id }}" class="op">浏览</a>
             {% if is_owner %}
-	    <a href="#" data="{{ SITE_ROOT }}repo/history/revert/{{ repo.id }}/?commit_id={{ commit.id }}" class="repo-revert">还原</a>
+	        <a href="#" data="{{ SITE_ROOT }}repo/history/revert/{{ repo.id }}/?commit_id={{ commit.id }}" class="repo-revert op">还原</a>
             {% endif %}
-	</td>
+	    </td>
         {% else %}
         <td></td>
         {% endif %}
diff --git a/templates/repo_history_dir.html b/templates/repo_history_dir.html
index f2677d27d2..b5a317531a 100644
--- a/templates/repo_history_dir.html
+++ b/templates/repo_history_dir.html
@@ -1,14 +1,13 @@
 {% extends "myhome_base.html" %}
 {% load seahub_tags %}
 
-{% block main_panel %}
-<div id="repo-page" class="ovhd">
-    <h2>{{repo.props.name}} 历史浏览</h2>
-    <div class="side fright">
-        {% if not repo.props.encrypted %}
-        {% if is_owner or repo_ap == 'public' or share_to_me %}
-        <p class="latest-commit mgt10">
-            {{ current_commit.props.desc|translate_commit_desc }}<br />
+{% block left_panel %}
+{% if not repo.props.encrypted %}
+    {% if is_owner or repo_ap == 'public' or share_to_me %}
+    <div class="latest-commit">
+        <h3>最新修改</h3>
+        <p>{{ current_commit.props.desc|translate_commit_desc }}</p>
+        <p class="al-rt">
             <span class="author">by
             {% if current_commit.props.creator_name %}
             {{ current_commit.props.creator_name }}
@@ -16,34 +15,41 @@
             未知
            {% endif %}
            </span>
-           <span class="time">{{ current_commit.props.ctime|tsstr_sec }}</span>
+           <span class="time">{{ current_commit.props.ctime|translate_commit_time }}</span>
         </p>
-        {% endif %}
-        {% endif %}
-        <a href="{{ SITE_ROOT }}repo/history/{{ repo.id }}/"><p>返回历史列表</p></a>
     </div>
-    <div class="main fleft">
+    {% endif %}
+{% endif %}
+    <h3>操作</h3>
+    <ul class="with-bg">
+        <li><a href="{{ SITE_ROOT }}repo/history/{{ repo.id }}/">返回历史列表</a></li>
+    </ul>
+{% endblock%}
+
+{% block right_panel %}
+    <h3>{{repo.props.name}} 历史浏览</h3>
         {% if repo.props.encrypted %}
         <p>该同步目录已加密，不能在线查看。</p>
         {% else %}
             {% if not is_owner and repo_ap == 'own' and not share_to_me %}
             <p>该同步目录web匿名访问未开启，不能在线查看。</p>
             {% else %}
-            <div>
+            <p>
+                当前路径：
               	{% for name, link in zipped %}
-                {% if not forloop.last %}                
+                    {% if not forloop.last %}                
                 <a href="{{ SITE_ROOT }}repo/history/dir/{{ repo.id }}/?commit_id={{ current_commit.id}}&p={{ link|urlencode }}">{{ name }}</a> /
-                {% else %}
+                    {% else %}
                 {{ name }}
-                {% endif %}
+                    {% endif %}
                 {% endfor %}
-            </div>
+            </p>
             <table>
                 <tr>
                     <th width="5%"></th>
-                    <th width="55%">名字</th>
-                    <th width="10%">大小</th>
-                    <th width="30%">操作</th>
+                    <th width="60%">名字</th>
+                    <th width="15%">大小</th>
+                    <th width="20%">操作</th>
                 </tr>
 
                 {% for dirent in dir_list %}
@@ -69,11 +75,4 @@
             </table>
             {% endif %}
         {% endif %}
-    </div>
-</div>
-{% endblock %}
-
-{% block extra_script %}
-<script type="text/javascript">
-</script>
 {% endblock %}