diff --git a/conf/wide.json b/conf/wide.json
index d8b3f92..765a0ab 100644
--- a/conf/wide.json
+++ b/conf/wide.json
@@ -20,11 +20,13 @@
                     "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\hello",
                     "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time",
                     "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\pkg",
-                    "D:\\go\\src\\pkg"
+                    "D:\\go\\src\\pkg",
+                    "D:\\go\\src\\pkg\\archive",
+                    "D:\\go\\src\\pkg\\archive\\tar",
+                    "D:\\go\\src\\pkg\\archive\\tar\\testdata"
                 ],
                 "Files": [
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\1.json",
-                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\pkg\\time.go",
+                    "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\hello\\main.go",
                     "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\main.go"
                 ],
                 "CurrentFile": "E:\\Work\\go\\src\\github.com\\b3log\\wide\\data\\user_workspaces\\admin\\src\\mytest\\time\\main.go"
diff --git a/static/css/base.css b/static/css/base.css
index f74bd02..a54ccec 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -5,6 +5,7 @@ body {
     color: #000;
     overflow: hidden;
     background-color: #F0F0F0;
+    font-family: Helvetica, 'Microsoft Yahei';
 }
 
 ul {
@@ -17,6 +18,11 @@ ul {
     box-sizing: border-box;
 }
 
+input,
+button {
+    font-family: Helvetica, 'Microsoft Yahei';
+}
+
 .fn-left {
     float: left;
 }
@@ -38,282 +44,4 @@ ul {
 .fn-none {
     display: none;
 }
-
-@font-face {
-    font-family: 'icomoon';
-    src:url('fonts/icomoon.eot?35cb2z');
-    src:url('fonts/icomoon.eot?#iefix35cb2z') format('embedded-opentype'),
-        url('fonts/icomoon.woff?35cb2z') format('woff'),
-        url('fonts/icomoon.ttf?35cb2z') format('truetype'),
-        url('fonts/icomoon.svg?35cb2z#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-
-.font-ico {
-    font-family: 'icomoon';
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: #666;
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 18px;
-}
-
-.font-ico:hover {
-    color: #333;
-}
-
-.ico-play:before {
-    content: "\e605";
-}
-
-.ico-save:before {
-    content: "\f0c7";
-}
-
-.ico-max:before {
-    content: "\f096";
-}
-
-.ico-format:before {
-    content: "\e60b";
-}
-
-.ico-buildrun:before {
-    content: "\e607";
-}
-
-.ico-stop:before {
-    content: "\e608";
-}
-
-.ico-restore:before {
-    content: "\e60c";
-}
-
-.ico-min:before {
-    content: "\e60d";
-    position: absolute;
-    right: 5px;
-}
-
-.ico-close:before {
-    content: "\e60a";
-}
-/* end reset & function */
-
-/* start frame */
-.frame {
-    position: absolute;
-    border: 1px solid #5F5F5F;
-    background-color: #F8F8F8;
-    width: 320px;
-    z-index: 21;
-    display: none;
-}
-
-.frame li {
-    padding: 0 5px;
-    line-height: 25px;
-    cursor: pointer;
-}
-
-.frame li:hover {
-    background-color: #3875D7;
-    color: #FFF;
-}
-
-.frame a {
-    color: #000;
-    text-decoration: none;
-}
-
-.frame li:hover a,
-.frame a:hover {
-    color: #FFF;
-}
-
-.frame .hr {
-    background-color: #bdbdbd;
-    height: 1px;
-    margin: 0 1px;
-}
-/* end frame */
-
-/* start tabs */
-.tabs {
-    height: 20px;
-    overflow: hidden;
-    width: 100%;
-    background-color: #E6E6E6;
-    border-top: 1px solid #A4A4A4;
-    border-bottom: 1px solid #9D9D9D;
-}
-
-.tabs > div {
-    float: left;
-    line-height: 18px;
-    height: 18px;
-    padding: 0 5px;
-    cursor: pointer;
-    background-color: #DDD;
-    color: #8B8B8B;
-    border-right: 1px solid #ADADAD;
-}
-
-.tabs > div.current {
-    background-color: #9F9F9F;
-    color: #FFF;
-}
-/* end tabs */
-
-/* start framework */
-.content {
-    position: relative;
-    overflow: hidden;
-}
-/* end framework */
-
-/* start menu */
-.menu {
-    background-color: #F0F0F0;
-    height: 24px;
-}
-
-.menu > ul > li {
-    float: left;
-}
-
-.menu > ul > li > a,
-.menu > ul > li > span {
-    color: #000;
-    font-size: 12px;
-    line-height: 24px;
-    padding: 5px;
-    text-decoration: none;
-}
-/* end menu */
-
-/* start editor */
-.edit-panel {
-    width: 80%;
-    position: absolute;
-    left: 20%;
-    background-color: #D7D7D7;
-    width: 80%;
-    height: 70%;
-    overflow: hidden;
-}
-
-.edit-panel .tabs > div {
-    background-color: #d1d1d1;
-    border-right-color: #9b9b9b;
-    color: #333;
-    cursor: auto;
-}
-
-.edit-panel .tabs > div.current {
-    background-color: #F7F7F7;
-}
-
-.toolbars {
-    position: absolute;
-    right: 5px;
-    top: 1px;
-}
-
-.edit-panel .tabs .ico {
-    background-image: url("../images/ico-file.png");
-    float: left;
-    height: 16px;
-    margin: 2px 0 0 -2px;
-    width: 16px;
-}
-
-.CodeMirror-focused .cm-matchhighlight {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-    background-position: bottom;
-    background-repeat: repeat-x;
-}
-
-.CodeMirror-hint {
-    padding-right: 18px;    
-    max-width: none;
-}
-
-.CodeMirror-hint:hover {
-    background: #08f;
-    color: white;
-}
-/* end editor */
-
-/* start bottom-window-group */
-.bottom-window-group {
-    width: 80%;
-    position: absolute;
-    left: 20%;
-    width: 80%;
-    height: 30%;
-    top: 70%;
-    z-index: 7;
-    background-color: #fff;
-}
-
-.bottom-window-group-max {
-    height: 100%;
-    left: 0;
-    top: 0;
-    width: 100%;
-    z-index: 11;
-}
-
-.bottom-window-group textarea.output {
-    border-width: 0;
-    background-color: #FFF;
-    color: #555555;
-    width: 100%;
-    margin: 0;
-}
-
-.bottom-window-group .notification,
-.bottom-window-group .search {
-    overflow: auto;
-}
-
-.bottom-window-group .notification > table {
-    width: 100%;
-}
-
-.bottom-window-group .notification td {
-    border-bottom: 1px solid #DDD;
-    line-height: 20px;
-}
-
-.bottom-window-group .notification .type,
-.bottom-window-group .notification .severity {
-    width: 50px;
-    padding: 0 5px;
-}
-/* end bottom-window-group */
-
-/* start footer */
-.footer {
-    border-top: 1px solid #919191;
-    background-color: #F0F0F0;
-    padding-left: 5px;
-    height: 19px;
-    line-height: 18px;
-}
-
-.footer .cursor {
-    cursor: pointer;
-}
-
-.notification-count {
-    float: right;
-    display: none;
-    cursor: pointer;
-}
-/* end footer */
+/* end reset & function */
\ No newline at end of file
diff --git a/static/css/login.css b/static/css/login.css
new file mode 100644
index 0000000..ebc967c
--- /dev/null
+++ b/static/css/login.css
@@ -0,0 +1,86 @@
+.wrapper {
+    margin: 0 auto;
+    width: 980px;
+}
+
+.header h1 {
+    margin: 0;
+}
+
+.header {
+    margin: 20px 0;
+}
+
+.header li {
+    float: left;
+}
+
+.header a {
+    display: block;
+    font-weight: bold;
+    padding: 4px 8px;
+    color: #333;
+    line-height: 30px;
+}
+
+.header a:hover {
+    color: #4183C4;
+}
+
+.content {
+    border-top: 1px solid #A4A4A4;
+    border-bottom: 1px solid #919191;
+    background-color: #202021;
+}
+
+.content h2 {
+    color: #FFF;
+    font-size: 70px;
+}
+
+.content h3 {
+    color: #4183c4;
+    font-size: 21px;
+}
+
+.content .form {
+    width: 320px;
+    margin-top: 76px;
+    position: relative;
+}
+
+.content .form input {
+    width: 100%;
+    background-color: #fafafa; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+    color: #333;
+    min-height: 34px;
+    outline: medium none;
+    vertical-align: middle;
+    font-size: 16px;
+    border: 1px solid #FFF;
+    padding: 10px;
+    margin-top: 20px;
+}
+
+.content .form input:focus {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 12px rgba(255, 255, 255, 0.75);
+}
+
+#msg {
+    background-color: #fcdede;
+    border: 1px solid #d2b2b2;
+    padding: 15px;
+    font-size: 14px;
+    color: #911;
+    position: absolute;
+    width: 100%;
+    top: -48px;
+}
+
+.footer {
+    line-height: 30px;
+    color: #777;
+    font-size: 12px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/static/css/wide.css b/static/css/wide.css
new file mode 100644
index 0000000..4ae63ae
--- /dev/null
+++ b/static/css/wide.css
@@ -0,0 +1,279 @@
+/* start icon */
+@font-face {
+    font-family: 'icomoon';
+    src:url('fonts/icomoon.eot?35cb2z');
+    src:url('fonts/icomoon.eot?#iefix35cb2z') format('embedded-opentype'),
+        url('fonts/icomoon.woff?35cb2z') format('woff'),
+        url('fonts/icomoon.ttf?35cb2z') format('truetype'),
+        url('fonts/icomoon.svg?35cb2z#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.font-ico {
+    font-family: 'icomoon';
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #666;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.font-ico:hover {
+    color: #333;
+}
+
+.ico-play:before {
+    content: "\e605";
+}
+
+.ico-save:before {
+    content: "\f0c7";
+}
+
+.ico-max:before {
+    content: "\f096";
+}
+
+.ico-format:before {
+    content: "\e60b";
+}
+
+.ico-buildrun:before {
+    content: "\e607";
+}
+
+.ico-stop:before {
+    content: "\e608";
+}
+
+.ico-restore:before {
+    content: "\e60c";
+}
+
+.ico-min:before {
+    content: "\e60d";
+    position: absolute;
+    right: 5px;
+}
+
+.ico-close:before {
+    content: "\e60a";
+}
+/* end ico */
+
+/* start frame */
+.frame {
+    position: absolute;
+    border: 1px solid #5F5F5F;
+    background-color: #F8F8F8;
+    width: 320px;
+    z-index: 21;
+    display: none;
+}
+
+.frame li {
+    padding: 0 5px;
+    line-height: 25px;
+    cursor: pointer;
+}
+
+.frame li:hover {
+    background-color: #3875D7;
+    color: #FFF;
+}
+
+.frame a {
+    color: #000;
+    text-decoration: none;
+}
+
+.frame li:hover a,
+.frame a:hover {
+    color: #FFF;
+}
+
+.frame .hr {
+    background-color: #bdbdbd;
+    height: 1px;
+    margin: 0 1px;
+}
+/* end frame */
+
+/* start tabs */
+.tabs {
+    height: 20px;
+    overflow: hidden;
+    width: 100%;
+    background-color: #E6E6E6;
+    border-top: 1px solid #A4A4A4;
+    border-bottom: 1px solid #9D9D9D;
+}
+
+.tabs > div {
+    float: left;
+    line-height: 18px;
+    height: 18px;
+    padding: 0 5px;
+    cursor: pointer;
+    background-color: #DDD;
+    color: #8B8B8B;
+    border-right: 1px solid #ADADAD;
+}
+
+.tabs > div.current {
+    background-color: #9F9F9F;
+    color: #FFF;
+}
+/* end tabs */
+
+/* start framework */
+.content {
+    position: relative;
+    overflow: hidden;
+}
+/* end framework */
+
+/* start menu */
+.menu {
+    background-color: #F0F0F0;
+    height: 24px;
+}
+
+.menu > ul > li {
+    float: left;
+}
+
+.menu > ul > li > a,
+.menu > ul > li > span {
+    color: #000;
+    font-size: 12px;
+    line-height: 24px;
+    padding: 5px;
+    text-decoration: none;
+}
+/* end menu */
+
+/* start editor */
+.edit-panel {
+    width: 80%;
+    position: absolute;
+    left: 20%;
+    background-color: #D7D7D7;
+    width: 80%;
+    height: 70%;
+    overflow: hidden;
+}
+
+.edit-panel .tabs > div {
+    background-color: #d1d1d1;
+    border-right-color: #9b9b9b;
+    color: #333;
+    cursor: auto;
+}
+
+.edit-panel .tabs > div.current {
+    background-color: #F7F7F7;
+}
+
+.toolbars {
+    position: absolute;
+    right: 5px;
+    top: 1px;
+}
+
+.edit-panel .tabs .ico {
+    background-image: url("../images/ico-file.png");
+    float: left;
+    height: 16px;
+    margin: 2px 0 0 -2px;
+    width: 16px;
+}
+
+.CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+
+.CodeMirror-hint {
+    padding-right: 18px;    
+    max-width: none;
+}
+
+.CodeMirror-hint:hover {
+    background: #08f;
+    color: white;
+}
+/* end editor */
+
+/* start bottom-window-group */
+.bottom-window-group {
+    width: 80%;
+    position: absolute;
+    left: 20%;
+    width: 80%;
+    height: 30%;
+    top: 70%;
+    z-index: 7;
+    background-color: #fff;
+}
+
+.bottom-window-group-max {
+    height: 100%;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 11;
+}
+
+.bottom-window-group textarea.output {
+    border-width: 0;
+    background-color: #FFF;
+    color: #555555;
+    width: 100%;
+    margin: 0;
+}
+
+.bottom-window-group .notification,
+.bottom-window-group .search {
+    overflow: auto;
+}
+
+.bottom-window-group .notification > table {
+    width: 100%;
+}
+
+.bottom-window-group .notification td {
+    border-bottom: 1px solid #DDD;
+    line-height: 20px;
+}
+
+.bottom-window-group .notification .type,
+.bottom-window-group .notification .severity {
+    width: 50px;
+    padding: 0 5px;
+}
+/* end bottom-window-group */
+
+/* start footer */
+.footer {
+    border-top: 1px solid #919191;
+    background-color: #F0F0F0;
+    padding-left: 5px;
+    height: 19px;
+    line-height: 18px;
+}
+
+.footer .cursor {
+    cursor: pointer;
+}
+
+.notification-count {
+    float: right;
+    display: none;
+    cursor: pointer;
+}
+/* end footer */
\ No newline at end of file
diff --git a/view/index.html b/view/index.html
index e569034..00df655 100644
--- a/view/index.html
+++ b/view/index.html
@@ -13,6 +13,7 @@
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/dialog.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/wide.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/side.css?{{.conf.StaticResourceVersion}}">
     </head>
     <body>
diff --git a/view/login.html b/view/login.html
index 5f94697..fbf111d 100644
--- a/view/login.html
+++ b/view/login.html
@@ -3,61 +3,92 @@
     <head>
         <meta charset="UTF-8">
         <title>{{.i18n.wide}} - {{.i18n.login}}</title>
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/login.css?{{.conf.StaticResourceVersion}}">
     </head>
     <body>
-        <input id="username" placeholder="{{.i18n.username}}"/>
-        <input id="password" type="password" placeholder="{{.i18n.password}}..."/>
-        <button onclick="login()">{{.i18n.login}}</button>
-        <div id="msg"></div>
+        <div class="header">
+            <div class="wrapper fn-clear">
+                <h1 class="fn-left">Wide</h1>
+                <ul class="fn-right">
+                    <li><a href="">GitHub</a></li>
+                    <li><a href="">Help</a></li>
+                    <li><a href="">Advance</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="content">
+            <div class="wrapper fn-clear">
+                <div class="fn-left">
+                    <h2>Hello, 世界</h2>
+                    <h3>Coding with Go on the Wide way.</h3>
+                </div>
+                <div class="form fn-right">
+                    <div id="msg" class="fn-none"></div>
+                    <input id="username" placeholder="{{.i18n.username}}"/><br/>
+                    <input id="password" type="password" placeholder="{{.i18n.password}}..."/><br/>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="wrapper">
+                &copy; 2014 B3LOG.ORG 1.0.0
+            </div>
+        </div>
+
         <script type="text/javascript" src="{{.conf.StaticServer}}/static/js/lib/jquery-2.1.1.min.js"></script>
         <script type="text/javascript">
-            (function () {
-                $("#username").keydown(function (event) {
-                    if (event.which === 13) {
-                        if ($.trim($(this).val()) === "") {
-                            $("#msg").text("{{.i18n.login_failed}}");
-                        } else {
-                            $("#password").focus();
-                        }
-                    }
-                    
-                    $("#msg").text('');
-                });
+(function () {
+    var contentH = $(window).height() - $(".footer").height() - $(".header").height() - 42;
+    $(".content").height(contentH)
+            .css("padding-top", (contentH - $(".content .fn-left").height()) / 2 + "px");
 
+    var login = function () {
+        var request = {
+            username: $("#username").val(),
+            password: $("#password").val()
+        };
+        $.ajax({
+            type: 'POST',
+            url: '/login',
+            data: JSON.stringify(request),
+            dataType: "json",
+            success: function (data) {
+                if (!data.succ) {
+                    $("#msg").text('{{.i18n.login_failed}}').show();
+                    return;
+                }
 
-                $("#password").keydown(function (event) {
-                    if (event.which === 13) {
-                        if ($.trim($(this).val()) === "") {
-                            $("#msg").text("{{.i18n.login_failed}}");
-                        } else {
-                            login();
-                        }
-                    }
-                    
-                    $("#msg").text('');
-                });
-            })();
-
-            var login = function () {
-                var request = {
-                    username: $("#username").val(),
-                    password: $("#password").val()
-                };
-                $.ajax({
-                    type: 'POST',
-                    url: '/login',
-                    data: JSON.stringify(request),
-                    dataType: "json",
-                    success: function (data) {
-                        if (!data.succ) {
-                            $("#msg").text('{{.i18n.login_failed}}');
-                            return;
-                        }
-
-                        window.location.href = "/";
-                    }
-                });
+                window.location.href = "/";
             }
+        });
+    };
+
+    $("#username").keydown(function (event) {
+        if (event.which === 13) {
+            if ($.trim($(this).val()) === "") {
+                $("#msg").text("{{.i18n.login_failed}}").show();
+            } else {
+                $("#password").focus();
+            }
+        } else {
+            $("#msg").hide();
+        }
+    }).focus();
+
+
+    $("#password").keydown(function (event) {
+        if (event.which === 13) {
+            if ($.trim($(this).val()) === "") {
+                $("#msg").text("{{.i18n.login_failed}}").show();
+            } else {
+                login();
+            }
+        } else {
+            $("#msg").hide();
+        }
+    });
+})();
         </script>        
     </body>
 </html>