New UI merge in progress

35 files changed, 1041 insertions, 619 deletions

diff --git a/templates/.VERSION b/templates/.VERSION
new file mode 100644
index 0000000000..036f90911f
--- /dev/null
+++ b/templates/.VERSION
@@ -0,0 +1 @@
+0.4.7.0725 Alpha
\ No newline at end of file
diff --git a/templates/VERSION b/templates/VERSION
deleted file mode 100644
index 7b53a20867..0000000000
--- a/templates/VERSION
+++ /dev/null
@@ -1 +0,0 @@
-0.4.5.0712 Alpha
\ No newline at end of file
diff --git a/templates/home.tmpl b/templates/home.tmpl
index 8288d21e15..249bce314d 100644
--- a/templates/home.tmpl
+++ b/templates/home.tmpl
@@ -1,27 +1,72 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container">
-	{{if not .Repos}}
-	<h4>Hey there, welcome to the land of Gogs!</h4>
-	<p>If you just got your Gogs server running, go to the <a href="/install">install</a> guide page, which will guide you through your initial setup.</p>
-	<img src="http://gowalker.org/public/gogs_demo.gif">
-	{{else}}
-	<h4>Hey there, welcome to the land of Gogs!</h4>
-	<h5>Here are some recent updated repositories:</h5>
-    <div class="tab-pane active">
-        <ul class="list-unstyled repo-list">
-            {{range .Repos}}
-            <li>
-                <div class="meta pull-right"><!-- <i class="fa fa-star"></i> {{.NumStars}} --> <i class="fa fa-code-fork"></i> {{.NumForks}}</div>
-                <h4>
-                    <a href="/{{.Owner.Name}}/{{.Name}}">{{.Name}}</a>
-                </h4>
-                <p class="desc">{{.Description}}</p>
-                <div class="info">Last updated {{.Updated|TimeSince}}</div>
-            </li>
-            {{end}}
-        </ul>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="promo-wrapper">
+    <div class="container clear">
+        <div id="promo-logo" class="left">
+            <img src="/img/gogs-lg.png" alt="logo"/>
+        </div>
+        <div id="promo-content">
+            <h1>Gogs</h1>
+            <h2>{{.i18n.Tr "app_desc"}}</h2>
+            <form id="promo-form" action="/user/login" method="post">
+                {{.CsrfTokenHtml}}
+                <input class="ipt ipt-large" id="username" name="uname" type="text" placeholder="{{.i18n.Tr "home.uname_holder"}}"/>
+                <input class="ipt ipt-large" name="password" type="password" placeholder="{{.i18n.Tr "home.password_holder"}}"/>
+                <input name="from" type="hidden" value="home">
+                <button class="btn btn-black btn-large">{{.i18n.Tr "sign_in"}}</button>
+                <button class="btn btn-green btn-large" id="register-button">{{.i18n.Tr "register"}}</button>
+            </form>
+            <div id="promo-social" class="social-buttons">
+                {{template "ng/base/social" .}}
+            </div>
+        </div>&nbsp;
     </div>
-	{{end}}
 </div>
-{{template "base/footer" .}}
+<div id="feature-wrapper">
+    <div class="container clear">
+        {{if eq .Lang "zh-CN"}}
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-flame"></i>
+            <b>易安装</b>
+            <p>您除了可以根据操作系统平台通过 <a target="_blank" href="http://gogs.io/docs/installation/install_from_binary.html">二进制运行</a>，还可以通过 <a target="_blank" href="https://github.com/gogits/gogs/tree/master/dockerfiles">Docker</a> 或 <a target="_blank" href="https://github.com/geerlingguy/ansible-vagrant-examples/tree/master/gogs">Vagrant</a>，以及 <a target="_blank" href="http://gogs.io/docs/installation/install_from_packages.html">包管理</a> 安装。</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-device-desktop"></i>
+            <b>跨平台</b>
+            <p>任何 <a target="_blank" href="http://golang.org/">Go 语言</a> 支持的平台都可以运行 Gogs，包括 Windows、Mac、Linux 以及 ARM。挑一个您喜欢的就行！</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-rocket"></i>
+            <b>轻量级</b>
+            <p>一个廉价的树莓派的配置足以满足 Gogs 的最低系统硬件要求。最大程度上节省您的服务器资源！</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-code"></i>
+            <b>开源化</b>
+            <p>所有的代码都开源在 <a target="_blank" href="https://github.com/gogits/gogs/">GitHub</a> 上，赶快加入我们来共同发展这个伟大的项目！还等什么？成为贡献者吧！</p>
+        </div>
+        {{else}}
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-flame"></i>
+            <b>Easy to install</b>
+            <p>Simply <a target="_blank" href="http://gogs.io/docs/installation/install_from_binary.html">run the binary</a> for your platform. Or ship Gogs with <a target="_blank" href="https://github.com/gogits/gogs/tree/master/dockerfiles">Docker</a> or <a target="_blank" href="https://github.com/geerlingguy/ansible-vagrant-examples/tree/master/gogs">Vagrant</a>, or get it <a target="_blank" href="http://gogs.io/docs/installation/install_from_packages.html">packaged</a>.</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-device-desktop"></i>
+            <b>Cross-platform</b>
+            <p>Gogs runs anywhere <a target="_blank" href="http://golang.org/">Go</a> can compile for: Windows, Mac OS X, Linux, ARM, etc. Choose the one you love!</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-rocket"></i>
+            <b>Lightweight</b>
+            <p>Gogs has low minimal requirements and can run on an inexpensive Raspberry Pi. Save your machine energy!</p>
+        </div>
+        <div class="grid-1-2 left">
+            <i class="octicon octicon-code"></i>
+            <b>Open Source</b>
+            <p>It's all on <a target="_blank" href="https://github.com/gogits/gogs/">GitHub</a>! Join us by contributing to make this project even better. Don't be shy to be a contributor!</p>
+        </div>
+        {{end}}
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/ng/base/alert.tmpl b/templates/ng/base/alert.tmpl
new file mode 100644
index 0000000000..df14d3c3bf
--- /dev/null
+++ b/templates/ng/base/alert.tmpl
@@ -0,0 +1,2 @@
+{{if .Flash.ErrorMsg}}<span class="alert alert-red alert-radius block text-bold"><i class="octicon octicon-alert"></i>{{.Flash.ErrorMsg}}</span>{{end}}
+{{if .Flash.SuccessMsg}}<div class="alert alert-green alert-radius block"><i class="octicon octicon-check"></i>{{.Flash.SuccessMsg}}</div>{{end}}
\ No newline at end of file
diff --git a/templates/ng/base/footer.tmpl b/templates/ng/base/footer.tmpl
new file mode 100644
index 0000000000..734533a108
--- /dev/null
+++ b/templates/ng/base/footer.tmpl
@@ -0,0 +1,27 @@
+		</div>
+		<footer id="footer">
+		    <div class="container clear">
+		        <p class="left" id="footer-rights">© 2014 GoGits · {{.i18n.Tr "version"}}: {{AppVer}} · {{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> ·
+		            {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong></p>
+
+		        <div class="right" id="footer-links">
+		            <a target="_blank" href="https://github.com/gogits/gogs"><i class="fa fa-github-square"></i></a>
+		            <a target="_blank" href="https://twitter.com/gogitservice"><i class="fa fa-twitter"></i></a>
+		            <a target="_blank" href="https://plus.google.com/communities/115599856376145964459"><i class="fa fa-google-plus"></i></a>
+		            <a target="_blank" href="http://weibo.com/gogschina"><i class="fa fa-weibo"></i></a>
+		            <div id="footer-lang" class="inline drop drop-top">{{.i18n.Tr "language"}}
+		                <div class="drop-down">
+		                    <ul class="menu menu-vertical switching-list">
+		                    	{{range .AllLangs}}
+		                        <li><a href="{{if eq $.Lang .Lang}}#{{else}}{{$.Link}}?lang={{.Lang}}{{end}}">{{.Name}}</a></li>
+		                        {{end}}
+		                    </ul>
+		                </div>
+		            </div>
+		            <a target="_blank" href="http://gogs.io">{{.i18n.Tr "website"}}</a>
+		            <span class="version">{{GoVer}}</span>
+		        </div>
+		    </div>
+		</footer>
+	</body>
+</html>
\ No newline at end of file
diff --git a/templates/ng/base/head.tmpl b/templates/ng/base/head.tmpl
new file mode 100644
index 0000000000..0cd7686ffb
--- /dev/null
+++ b/templates/ng/base/head.tmpl
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+        <meta name="author" content="Gogs - Go Git Service" />
+		<meta name="description" content="Gogs(Go Git Service) a painless self-hosted Git Service written in Go" />
+		<meta name="keywords" content="go, git, self-hosted, gogs">
+
+		<link rel="shortcut icon" href="/img/favicon.png" />
+
+		<!-- Stylesheet -->
+		<link rel="stylesheet" href="/ng/css/ui.css">
+		<link rel="stylesheet" href="/ng/css/gogs.css">
+		<link rel="stylesheet" href="/ng/css/font-awesome.min.css">
+		<link rel="stylesheet" href="/ng/fonts/octicons.css">
+		<!-- <link rel="stylesheet" href="http://cdn.bootcss.com/highlight.js/8.1/styles/github.min.css"> -->
+		<link rel="stylesheet" href="/ng/css/github.min.css">
+
+		<!-- JavaScript -->
+		<script src="/ng/js/lib/jquery-1.11.1.min.js"></script>
+		<script src="/ng/js/lib/tabs.js"></script>
+    	<script src="/ng/js/lib/lib.js"></script>
+		<script src="/ng/js/gogs.js"></script>
+
+		<title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>
+	</head>
+	<body>
+		<div id="wrapper">
+		<noscript>Please enable JavaScript in your browser!</noscript>
\ No newline at end of file
diff --git a/templates/ng/base/header.tmpl b/templates/ng/base/header.tmpl
new file mode 100644
index 0000000000..ce1e170319
--- /dev/null
+++ b/templates/ng/base/header.tmpl
@@ -0,0 +1,58 @@
+<header id="header">
+    <ul class="menu menu-line container" id="header-nav">
+        {{if not .PageIsHome}}
+        <li class="head" id="header-nav-logo">
+            <img src="/img/favicon.png" alt="avatar" class="avatar-30"/>
+        </li>
+        <li {{if .PageIsDashboard}}class="current"{{end}}>
+            <a href="/">{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}</a>
+        </li>
+        <li><a href="/explore">{{.i18n.Tr "explore"}}</a></li>
+        <li><a target="_blank" href="http://gogs.io/docs">{{.i18n.Tr "help"}}</a></li>
+        {{end}}
+
+        {{if .IsSigned}}
+        <li class="right" id="header-nav-sign-out">
+            <a href="/user/logout" title="{{.i18n.Tr "sign_out"}}"><i class="octicon octicon-sign-out"></i></a>
+        </li>
+        <li class="right {{if .PageIsUserSettings}}current{{end}}">
+            <a href="/user/settings" title="{{.i18n.Tr "account_settings"}}"><i class="octicon octicon-settings"></i></a>
+        </li>
+            {{if .IsAdmin}}
+            <li class="right">
+                <a href="/admin" title="{{.i18n.Tr "admin_panel"}}"><i class="octicon octicon-circuit-board"></i></a>
+            </li>
+            {{end}}
+        <li class="right down">
+            <a href="#"><i class="octicon octicon-plus"></i></a>
+            <ul class="menu menu-down" id="header-new-repo-menu">
+                <li><a href="/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
+                <li><a href="/repo/migrate"><i class="octicon octicon-repo-clone"></i>{{.i18n.Tr "new_migrate"}}</a></li>
+                <li><a href="/org/create"><i class="octicon octicon-organization"></i>{{.i18n.Tr "new_org"}}</a></li>
+            </ul>
+        </li>
+        <li class="right" id="header-nav-user">
+            <a href="/{{.SignedUser.Name}}" class="text-bold">
+                <img src="{{.SignedUser.AvatarLink}}" alt="user-avatar" class="avatar-30"/>
+                {{.SignedUser.Name}}
+            </a>
+        </li>
+        {{else}}
+            {{if .PageIsHome}}
+            <li class="right" id="header-nav-help">
+                <a target="_blank" href="http://gogs.io/docs"><i class="octicon octicon-info"></i>&nbsp;&nbsp;{{.i18n.Tr "help"}}</a>
+            </li>
+            <li class="right" id="header-nav-explore">
+                <a href="/explore"><i class="octicon octicon-globe"></i>&nbsp;&nbsp;{{.i18n.Tr "explore"}}</a>
+            </li>
+            {{else}}
+            <li class="right" id="header-nav-sign-in">
+                <a href="/user/login" title="Sign In"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
+            </li>
+            <li class="right">
+                <a href="/user/sign_up" title="Account Settings"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
+            </li>
+            {{end}}
+        {{end}}
+    </ul>
+</header>
\ No newline at end of file
diff --git a/templates/ng/base/social.tmpl b/templates/ng/base/social.tmpl
new file mode 100644
index 0000000000..153239f743
--- /dev/null
+++ b/templates/ng/base/social.tmpl
@@ -0,0 +1,4 @@
+<button class="btn github"><i class="fa fa-github"></i>GitHub</button>
+<button class="btn google"><i class="fa fa-google"></i>Google +</button>
+<button class="btn weibo"><i class="fa fa-weibo"></i>新浪微博</button>
+<button class="btn qq"><i class="fa fa-qq"></i>腾讯 QQ&nbsp;</button>
\ No newline at end of file
diff --git a/templates/repo/bare.tmpl b/templates/repo/bare.tmpl
new file mode 100644
index 0000000000..241fea8519
--- /dev/null
+++ b/templates/repo/bare.tmpl
@@ -0,0 +1,50 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper" class="repo-bare">
+    <div id="repo-header" class="clear">
+        <div class="container clear">
+            <h1 id="repo-header-name" class="left public">
+                <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
+                <a class="author" href="/{{.Repository.Owner.Name}}">{{.Repository.Owner.Name}}</a>
+                <span class="divider">/</span>
+                <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+            </h1>
+        </div>
+    </div>
+    <div id="repo-content" class="clear container">
+        <div id="repo-bare">
+            <div id="repo-bare-start" class="panel panel-radius">
+                <p class="panel-header"><strong>Quick Start</strong></p>
+                <div class="panel-content">
+                    <div id="repo-clone" class="clear text-center">
+                        <h2>Clone this repository</h2>
+                        <button id="repo-clone-ssh" class="btn btn-blue current left btn-left-radius">SSH</button>
+                        <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
+                        <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
+                        <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
+                        <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a href="#">Help</a>!</p>
+                        <hr/>
+                    </div>
+                    <div id="repo-bare-cmd" class="text-center">
+                        <h2>Create a new repository on the command line</h2>
+                        <pre class="text-left radius"><code>touch README.md
+git init
+git add README.md
+git commit -m "first commit"
+git remote add origin <span class="clone-url">{{.CloneLink.SSH}}</span>
+git push -u origin master</code></pre>
+                        <br/>
+                        <hr/>
+                    </div>
+                    <div id="repo-bare-remote" class="text-center">
+                        <h2>Push an existing repository from the command line</h2>
+                        <pre class="text-left radius"><code>git remote add origin <span class="clone-url">{{.CloneLink.SSH}}</span>
+git push -u origin master</code></pre>
+                        <br/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index ed01d9772b..6ec713f664 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -1,105 +1,81 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body">
-    <form action="/repo/create" method="post" class="form-horizontal card" id="repo-create">
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    <form id="repo-create-form" class="form form-align panel panel-radius" action="/repo/create" method="post">
         {{.CsrfTokenHtml}}
-        <h3>Create New Repository</h3>
-        {{template "base/alert" .}}
-        <div class="form-group">
-            <label class="col-md-2 control-label">Owner<strong class="text-danger">*</strong></label>
-            <div class="col-md-8">
-                <div class="btn-group" id="repo-owner-switch">
-                    <button type="button" class="btn btn-default" id="repo-owner-current">
-                        <img src="{{.ContextUser.AvatarLink}}?s=28" alt="user-avatar" title="username" id="repo-owner-avatar">
-                        <span id="repo-owner-name">{{.ContextUser.Name}}</span>
-                    </button>
-                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                        <span class="caret"></span>
-                    </button>
-                    <div class="dropdown-menu clone-group-btn no-propagation">
-                        <ul id="dashboard-switch-menu" class="list-unstyled">
-                            {{range .AllUsers}}
-                            <li data-uid="{{.Id}}"{{if eq .Id $.ContextUser.Id}}class="checked"{{end}}>
-                                <a>
-                                    <i class="fa fa-check"></i>
-                                    <img src="{{.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                                    {{.Name}}
-                                </a>
-                            </li>
-                            {{end}}
-                        </ul>
-                    </div>
+        <div class="panel-header"><h2>{{.i18n.Tr "new_repo"}}</h2></div>
+        <div class="panel-content">
+            {{template "ng/base/alert" .}}
+            <div class="field">
+                <label for="owner" class="req">{{.i18n.Tr "repo.owner"}}</label>
+                <input id="owner" type="hidden" name="uid" value="{{.ContextUser.Id}}" />
+                <div class="inline-block drop">
+                    <a href="#" class="drop-bottom">
+                        <img class="avatar" src="{{.ContextUser.AvatarLink}}" alt="user-avatar">
+                        <strong>{{.ContextUser.Name}}</strong>
+                    </a>
+                    <ul class="drop-down menu menu-vertical menu-radius switching-list" id="repo-create-owner-list">
+                        <li {{if eq $.ContextUser.Id .SignedUser.Id}}class="checked"{{end}}>
+                            <a href="#">
+                                <i class="octicon octicon-check"></i>
+                                <img class="avatar" src="{{.SignedUser.AvatarLink}}" alt="user-avatar">
+                                <strong>{{.SignedUser.Name}}</strong>
+                            </a>
+                        </li>
+                        {{range .Orgs}}
+                        <li {{if eq $.ContextUser.Id .Id}}class="checked"{{end}}>
+                            <a href="#">
+                                <i class="octicon octicon-check"></i>
+                                <img class="avatar" src="{{.AvatarLink}}" alt="user-avatar">
+                                <strong>{{.Name}}</strong>
+                            </a>
+                        </li>
+                        {{end}}
+                    </ul>
                 </div>
             </div>
-            <input type="hidden" value="{{.ContextUser.Id}}" name="uid" id="repo-owner-id"/>
-        </div>
-
-        <div class="form-group {{if .Err_RepoName}}has-error has-feedback{{end}}">
-            <label class="col-md-2 control-label">Repository<strong class="text-danger">*</strong></label>
-            <div class="col-md-8">
-                <input name="repo" type="text" class="form-control" placeholder="Type your repository name" value="{{.repo}}" required="required">
-                <span class="help-block">Great repository names are short and memorable. </span>
+            <div class="field">
+                <label class="req" for="repo-name">{{.i18n.Tr "repo.repo_name"}}</label>
+                <input class="ipt ipt-radius" id="repo-name" name="repo_name" type="text" value="{{.repo_name}}" required />
+                <span class="form-label"></span>
+                <span class="help">{{.i18n.Tr "repo.repo_name_helper" | Str2html}}</span>
             </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">Visibility</label>
-            <div class="col-md-8">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="private" {{if .private}}checked{{end}}>
-                        <strong>This repository is private</strong>
-                    </label>
-                </div>
+            <p class="field">
+                <label for="visibility">{{.i18n.Tr "repo.visibility"}}</label>
+                <input class="ipt-chk" id="visibility" name="private" type="checkbox" {{if .private}}checked{{end}} />
+                <span>{{.i18n.Tr "repo.visiblity_helper" | Str2html}}</span>
+            </p>
+            <div class="field clear">
+                <label class="left" for="desc">{{.i18n.Tr "repo.repo_desc"}}</label>
+                <textarea class="ipt ipt-radius" id="desc" name="desc">{{.desc}}</textarea>
             </div>
-        </div>
-
-        <div class="form-group {{if .Err_Description}}has-error has-feedback{{end}}">
-            <label class="col-md-2 control-label">Description</label>
-            <div class="col-md-8">
-                <textarea name="desc" class="form-control" placeholder="Type your repository description">{{.desc}}</textarea>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">Language</label>
-            <div class="col-md-8">
-                <select class="form-control" name="language">
-                    <option value="">Select a language</option>
-                    {{range .LanguageIgns}}<option value="{{.}}">{{.}}</option>{{end}}
+            <p class="field">
+                <label for="lang">{{.i18n.Tr "repo.repo_lang"}}</label>
+                <select id="lang" name="gitignore">
+                    <option>{{.i18n.Tr "repo.repo_lang_helper"}}</option>
+                    {{range .Gitignores}}
+                    <option value="{{.}}" {{if eq . $.gitignore}}selected{{end}}>{{.}}</option>
+                    {{end}}
                 </select>
-                <br>
-                <div>Need more .gitignore? Go <a href="http://www.gitignore.io/">gitignore.io</a>.</div>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <label class="col-md-2 control-label">License</label>
-            <div class="col-md-8">
-                <select class="form-control" name="license">
-                    <option value="">Select a license</option>
-                    {{range .Licenses}}<option value="{{.}}">{{.}}</option>{{end}}
+                <label for="license">{{.i18n.Tr "repo.license"}}</label>
+                <select id="license" name="license">
+                    <option>{{.i18n.Tr "repo.license_helper"}}</option>
+                    {{range .Licenses}}
+                    <option value="{{.}}" {{if eq . $.license}}selected{{end}}>{{.}}</option>
+                    {{end}}
                 </select>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="initReadme" {{if .initReadme}}checked{{end}}>
-                        <strong>Initialize this repository with a README</strong>
-                    </label>
-                </div>
-            </div>
-        </div>
-
-        <div class="form-group">
-            <div class="col-md-offset-2 col-md-8">
-                <button type="submit" class="btn btn-lg btn-primary">Create repository</button>
-                <a href="/" class="text-danger">Cancel</a>
-            </div>
+            </p>
+            <p class="field">
+                <label for="init-readme"></label>
+                <input class="ipt-chk" id="init-readme" name="init_readme" type="checkbox" {{if .init_readme}}checked{{end}} />
+                <strong>{{.i18n.Tr "repo.init_readme"}}</strong>
+            </p>
+            <p class="field">
+                <label for="repo-create-submit"></label>
+                <button class="btn btn-large btn-blue btn-radius" id="repo-create-submit">{{.i18n.Tr "repo.create_repo"}}</button>
+                <a class="btn btn-small btn-gray btn-radius" id="repo-create-cancel" href="/"><strong>{{.i18n.Tr "cancel"}}</strong></a>
+            </p>
         </div>
     </form>
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
new file mode 100644
index 0000000000..1958c40998
--- /dev/null
+++ b/templates/repo/home.tmpl
@@ -0,0 +1,161 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+    <div id="repo-header" class="clear">
+        <div class="container clear">
+            <h1 id="repo-header-name" class="left public">
+                <i class="mega-octicon octicon-{{if .Repository.IsPrivate}}lock{{else}}repo{{end}}"></i>
+                <a class="author" href="/{{.Owner.Name}}">{{.Owner.Name}}</a>
+                <span class="divider">/</span>
+                <a class="repo text-bold" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+            </h1>
+            <ul id="repo-header-meta" class="right menu menu-line">
+                <li id="repo-header-download" class="inline-block down drop">
+                    <a id="repo-header-download-btn" href="#">
+                        <button class="btn btn-black text-bold btn-radius">
+                            <i class="octicon octicon-cloud-download"></i>
+                        </button>
+                    </a>
+                    <div id="repo-header-download-drop" class="drop-down">
+                        <div id="repo-clone" class="clear">
+                            <button id="repo-clone-ssh" class="btn btn-blue current left left btn-left-radius">SSH</button>
+                            <button id="repo-clone-https" class="btn btn-gray left">HTTPS</button>
+                            <input id="repo-clone-url" type="text" class="ipt ipt-disabled left" value="{{.CloneLink.SSH}}" />
+                            <button id="repo-clone-copy" class="btn btn-black left btn-right-radius">Copy</button>
+                            <p class="text-center" id="repo-clone-help">Need help cloning? Visit <a href="#">Help</a>!</p>
+                            <hr/>
+                            <div class="text-center" id="repo-clone-zip">
+                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.zip"><i class="octicon octicon-file-zip"></i>ZIP</a>
+                                <a class="btn btn-green btn-radius" href="{{.RepoLink}}/archive/{{.BranchName}}.tar.gz"><i class="octicon octicon-file-zip"></i>TAR.GZ</a>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li id="repo-header-watch">
+                    <a id="repo-header-watch-btn" href="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-eye-watch"></i>{{if .IsWatchingRepo}}Unwatch{{else}}Watch{{end}}
+                            <span class="num">{{.Repository.NumWatches}}</span>
+                        </button>
+                    </a>
+                </li>
+                <li id="repo-header-star">
+                    <a id="repo-header-star-btn" href="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-star"></i>Star
+                            <span class="num">{{.Repository.NumStars}}</span>
+                        </button>
+                    </a>
+                </li>
+                <li id="repo-header-fork">
+                    <a id="repo-header-fork-btn" href="#">
+                        <button class="btn btn-gray text-bold btn-radius">
+                            <i class="octicon octicon-repo-forked"></i>Fork
+                            <span class="num">{{.Repository.NumForks}}</span>
+                        </button>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div id="repo-content" class="clear container">
+        <div id="repo-main" class="left grid-4-5">
+            <p id="repo-desc">
+                <span class="description">{{.Repository.DescriptionHtml}}</span>
+                <a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>
+            </p>
+            <ul id="repo-file-nav" class="clear menu menu-line">
+                <li>
+                    <a href="#">
+                        <button class="btn btn-green btn-small btn-radius" id="repo-compare-btn"><i class="octicon octicon-git-compare"></i></button>
+                    </a>
+                </li>
+                <li id="repo-branch-switch" class="down drop">
+                    <a href="#">
+                        <button class="btn btn-gray btn-small btn-radius">
+                            <i class="octicon octicon-git-branch"></i> Branch :
+                            <strong id="repo-branch-current">{{.BranchName}}</strong>
+                        </button>
+                    </a>
+                    <div class="drop-down panel">
+                        <p class="panel-header text-bold">Branches & Tags</p>
+                        <input id="repo-branch-filter-ipt" class="ipt ipt-large" type="text" placeholder="find branches / tags"/>
+                        <div id="repo-branch-tag">
+                            <ul class="menu menu-line tab-nav clear" id="repo-branch-tab-nav">
+                                <li class="js-tab-nav js-tab-nav-show left" data-tab-target="#repo-branch-list"><a href="#">Branches</a></li>
+                                <li class="js-tab-nav left" data-tab-target="#repo-tag-list"><a href="#">Tags</a></li>
+                            </ul>
+                            <ul class="menu menu-vertical switching-list" id="repo-branch-list">
+                                {{range .Branches}}
+                                <li {{if eq . $.BranchName}}class="checked"{{end}}><a href="{{$.RepoLink}}/src/{{.}}"><i class="octicon octicon-check"></i>master</a></li>
+                                {{end}}
+                            </ul>
+                            <ul class="menu menu-vertical switching-list" id="repo-tag-list">
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.3.3</a></li>
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.4.4</a></li>
+                                <li class="checked"><a href="#"><i class="octicon octicon-check"></i>0.1</a></li>
+                                <li><a href="#"><i class="octicon octicon-check"></i>0.1 beta</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+                <li id="repo-bread" class="breads">
+                    <a class="title bread" href="{{.RepoLink}}">{{.Repository.Name}}</a>
+                    {{ $n := len .Treenames}}
+                    {{ $l := Subtract $n 1}}
+                    {{range $i, $v := .Treenames}}
+                        {{if eq $i $l}}
+                        <span class="bread">{{$v}}</span>
+                        {{else}}
+                        <span class="bread"><a href="{{$.BranchLink}}/{{index $.Paths $i}}">{{$v}}</a></span>
+                        {{end}}
+                    {{end}}
+                </li>
+                <li id="repo-commits-jump" class="repo-jump right">
+                    <a href="#">
+                        <button class="btn btn-small btn-gray btn-radius"><i class="octicon octicon-git-commit"></i></button>
+                    </a>
+                </li>
+                <li id="repo-find-jump" class="repo-jump right">
+                    <a href="#">
+                        <button class="btn btn-small btn-gray btn-radius"><i class="octicon octicon-list-unordered"></i></button>
+                    </a>
+                </li>
+            </ul>
+            {{if .IsFile}}
+                {{template "repo/view_file" .}}
+            {{else}}
+                {{template "repo/view_list" .}}
+            {{end}}
+        </div>
+        <div id="repo-sidebar" class="right grid-1-5">
+            <ul class="menu menu-vertical" id="repo-sidebar-nav">
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/issues"><i class="octicon octicon-issue-opened"></i>Issues<span class="num right label label-blue label-radius">{{.Repository.NumOpenIssues}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/pulls"><i class="octicon octicon-git-pull-request"></i>Pull Requests<span class="num right label label-blue label-radius">{{.Repository.NumOpenPulls}}</span></a>
+                </li>
+                <li class="border-bottom"></li>
+                <li class="head">{{.BranchName}}</li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/commits/{{.BranchName}}"><i class="octicon octicon-history"></i>Commits <span class="num right label label-gray label-radius">{{.CommitsCount}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/branches"><i class="octicon octicon-git-branch"></i>Branches<span class="num right label label-gray label-radius">{{.BrancheCount}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/releases"><i class="octicon octicon-tag"></i>Releases <span class="num right label label-gray label-radius">{{.Repository.NumTags}}</span></a>
+                </li>
+                <li>
+                    <a class="radius" href="#"><i class="octicon octicon-organization"></i>contributors <span class="num right label label-gray label-radius">43</span></a>
+                </li>
+                <li class="border-bottom"></li>
+                <li>
+                    <a class="radius" href="{{.RepoLink}}/settings"><i class="octicon octicon-tools"></i>settings</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
new file mode 100644
index 0000000000..be54419404
--- /dev/null
+++ b/templates/repo/view_file.tmpl
@@ -0,0 +1,29 @@
+<div class="panel panel-radius" id="repo-readme">
+    <p class="panel-header">
+        {{if .ReadmeExist}}
+            <i class="icon fa fa-book fa-lg"></i>
+	        {{if .ReadmeInHome}}
+	        <strong class="file-name">{{.FileName}}</strong>
+	        {{else}}
+	        <strong>{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
+	        {{end}}
+	    {{else}}
+        <i class="icon fa fa-file-text-o"></i>
+        <strong class="file-name">{{.FileName}}</strong><span class="file-size">{{FileSize .FileSize}}</span>
+	    {{end}}
+    </p>
+    <div class="{{if .ReadmeExist}}panel-content markdown{{end}} code-view">
+    	{{if .ReadmeExist}}
+    	{{.FileContent | Str2html}}
+    	{{else if .FileSize}}
+        <table>
+            <tbody>
+                <tr>
+                    <td class="lines-num"></td>
+                    <td class="lines-code"><pre class="prettyprint linenums {{if .FileExt}}lang-{{.FileExt}}{{end}}"><code>{{.FileContent}}</code></pre></td>
+                </tr>
+            </tbody>
+        </table>
+    	{{end}}
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
new file mode 100644
index 0000000000..26e7dd4597
--- /dev/null
+++ b/templates/repo/view_list.tmpl
@@ -0,0 +1,46 @@
+<table id="repo-files-table" class="table-border table-block table-radius">
+    <thead>
+    <tr>
+        <th colspan="4" class="clear">
+            <span class="author left">
+                <img class="avatar-24 radius" src="{{AvatarLink .LastCommit.Author.Email}}" />
+                <a href="/user/email2user?email={{Md5 .LastCommit.Author.Email}}"><strong>{{.LastCommit.Author.Name}}</strong>:</a>
+            </span>
+            <span class="last-commit"><a href="{{.RepoLink}}/commit/{{.LastCommit.Id}}" rel="nofollow">
+                <strong>{{ShortSha .LastCommit.Id.String}}</strong></a>
+                <span class="text-truncate">{{.LastCommit.Summary}}</span>
+            </span>
+            <span class="age right">{{TimeSince .LastCommit.Author.When .i18n.Lang}}</span>
+        </th>
+    </tr>
+    </thead>
+    <tbody>
+        {{if .HasParentPath}}
+        <tr class="has-parent">
+            <td class="icon"></td>
+            <td class="name"><a href="{{.BranchLink}}{{.ParentPath}}">..</a></td>
+            <td class="msg"></td>
+            <td class="age"></td>
+        </tr>
+        {{end}}
+        {{range $item := .Files}}
+            {{$entry := index $item 0}}
+            {{$commit := index $item 1}}
+            <tr>
+                <td class="icon">
+                    <span class="octicon octicon-file-{{if $entry.IsDir}}directory{{else}}text{{end}}"></span>
+                </td>
+                <td class="name">
+                    <a href="{{$.BranchLink}}/{{$.TreePath}}{{$entry.Name}}" class="text-truncate">{{$entry.Name}}</a>
+                </td>
+                <td class="msg">
+                    <a class="text-truncate" href="/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.Id}}" rel="nofollow">{{$commit.Summary}}</a>
+                </td>
+                <td class="age">{{TimeSince $commit.Committer.When $.i18n.Lang}}</td>
+            </tr>
+        {{end}}
+    </tbody>
+</table>
+{{if .ReadmeExist}}
+    {{template "repo/view_file" .}}
+{{end}}
\ No newline at end of file
diff --git a/templates/status/401.tmpl b/templates/status/401.tmpl
index 98995381af..6e24302fef 100644
--- a/templates/status/401.tmpl
+++ b/templates/status/401.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .}}
-{{template "base/navbar" .}}
+{{template "base/header" .}}
 <div class="container">
-	401 Unauthorized
+	401 Unauthorized: {{.ErrorMsg}}
 </div>
 {{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/status/403.tmpl b/templates/status/403.tmpl
index 03a88479dd..f252146773 100644
--- a/templates/status/403.tmpl
+++ b/templates/status/403.tmpl
@@ -1,6 +1,6 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
 <div class="container">
 	403 Forbidden
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
index 6adb3d7163..7062fb122e 100644
--- a/templates/status/404.tmpl
+++ b/templates/status/404.tmpl
@@ -1,9 +1,10 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
 <div id="body" class="container text-center">
-    <p style="margin-top: 80px"><img src="/img/404.png" alt="404"/></p>
+    <p style="margin-top: 100px"><img src="/img/404.png" alt="404"/></p>
     <hr/>
+    <br>
     <p>Application Version: {{AppVer}}</p>
     <p>If you think this is an error, please open an issue on <a href="https://github.com/gogits/gogs/issues/new">GitHub</a>.</p>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}
diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl
index 07edd3620a..692525aa40 100644
--- a/templates/status/500.tmpl
+++ b/templates/status/500.tmpl
@@ -1,10 +1,10 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
 <div id="body" class="container text-center">
-    <p style="margin-top: 80px"><img src="/img/500.png" alt="404"/></p>
-    {{if .ErrorMsg}}<hr/>
-    <p>An error is occurred : {{.ErrorMsg}}</p>{{end}}
+    <p style="margin-top: 100px"><img src="/img/500.png" alt="500"/></p>
     <hr/>
+    <br>
+    {{if .ErrorMsg}}<p>An error is occurred : {{.ErrorMsg}}</p>{{end}}
     <p>Application Version: {{AppVer}}</p>
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/dashboard.tmpl b/templates/user/dashboard.tmpl
deleted file mode 100644
index 2cb19cef16..0000000000
--- a/templates/user/dashboard.tmpl
+++ /dev/null
@@ -1,102 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body-nav">
-    <div class="container">
-        <div class="btn-group pull-left" id="dashboard-switch">
-            <button type="button" class="btn btn-default">
-                <img src="{{.ContextUser.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                {{.ContextUser.Name}}
-            </button>
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                <span class="caret"></span>
-            </button>
-            <div class="dropdown-menu clone-group-btn no-propagation">
-                <ul id="dashboard-switch-menu" class="list-unstyled">
-                    <li{{if not .PageIsOrgDashboard}} class="checked"{{end}}>
-                        <a href="/">
-                            <i class="fa fa-check"></i>
-                            <img src="{{.SignedUser.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                            {{.SignedUser.Name}}
-                        </a>
-                    </li>
-                    {{range .Orgs}}
-                    <li{{if eq $.ContextUser.Id .Id}} class="checked"{{end}}>
-                        <a href="/org/{{.Name}}/dashboard">
-                            <i class="fa fa-check"></i>
-                            <img src="{{.AvatarLink}}?s=28" alt="user-avatar" title="username">
-                            {{.Name}}
-                        </a>
-                    </li>
-                    {{end}}
-                    <li>
-                        <a href="/org/create">Create organization</a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <ul class="nav nav-pills pull-right">
-            <li class="active"><a href="/{{if .PageIsOrgDashboard}}org/{{.ContextUser.Name}}/dashboard{{end}}">News Feed</a></li>
-            <li><a href="/{{if .PageIsOrgDashboard}}org/{{.ContextUser.Name}}/dashboard/{{end}}issues">Issues</a></li>
-            {{if .PageIsOrgDashboard}}<li><a href="/org/{{.ContextUser.Name}}/settings">Settings</a></li>{{end}}
-            <!-- <li><a href="/pulls">Pull Requests</a></li>
-            <li><a href="/stars">Stars</a></li> -->
-        </ul>
-    </div>
-</div>
-
-<div id="body" class="container" data-page="user">
-    {{if .HasInfo}}<div class="alert alert-info">{{.InfoMsg}}</div>{{end}}
-    <div id="feed-left" class="col-md-8">
-        <ul class="list-unstyled activity-list">
-        {{range .Feeds}}
-            <li>
-                <i class="icon fa fa-{{ActionIcon .OpType}}"></i>
-                <div class="info"><span class="meta">{{TimeSince .Created}}</span><br>{{ActionDesc . | str2html}}</div>
-                <span class="clearfix"></span>
-            </li>
-        {{else}}
-            <li>Oh. Looks like there isn't any activity here yet. Get Busy!</li>
-        {{end}}
-        </ul>
-    </div>
-    <div id="feed-right" class="col-md-4">
-        <div class="panel panel-default repo-panel">
-            <div class="panel-heading">{{if not .PageIsOrgDashboard}}Your {{end}}Repositories
-                <div class="btn-group pull-right" id="user-dashboard-repo-new">
-                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus-square"></i>New</button>
-                    <div class="dropdown-menu dropdown-menu-right">
-                       <ul class="list-unstyled">
-                           <li><a href="/repo/create"><i class="fa fa-book"></i>Repository</a></li>
-                           <li><a href="/repo/migrate"><i class="fa fa-clipboard"></i>Migration</a></li>
-                           <!-- <li><a href="#"><i class="fa fa-users"></i>Organization</a></li> -->
-                       </ul>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="panel-body">
-                <ul class="list-group">{{range .MyRepos}}
-                    <li class="list-group-item"><a href="/{{$.ContextUser.Name}}/{{.Name}}">
-                        <!-- <span class="stars pull-right"><i class="fa fa-star"></i>{{.NumStars}}</span> -->
-                        <i class="fa fa-book"></i>{{.Name}}{{if .IsPrivate}} <span class="label label-default">Private</span>{{end}}</a>
-                    </li>{{end}}
-                </ul>
-            </div>
-        </div>
-        
-        {{if not .PageIsOrgDashboard}}
-        <div class="panel panel-default repo-panel">
-            <div class="panel-heading">Collaborative Repositories</div>
-            <div class="panel-body">
-                <ul class="list-group">{{range .CollaborativeRepos}}
-                    <li class="list-group-item"><a href="/{{.Owner.Name}}/{{.Name}}">
-                        <!-- <span class="stars pull-right"><i class="fa fa-star"></i>{{.NumStars}}</span> -->
-                        <i class="fa fa-book"></i>{{.Name}}{{if .IsPrivate}} <span class="label label-default">Private</span>{{end}}</a>
-                    </li>{{end}}
-                </ul>
-            </div>
-        </div>
-        {{end}}
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
new file mode 100644
index 0000000000..e9027230a5
--- /dev/null
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -0,0 +1,142 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+{{template "user/dashboard/nav" .}}
+<div id="dashboard-wrapper">
+    <div id="dashboard" class="container">
+        <div id="dashboard-news" class="left grid-2-3">
+            {{range .Feeds}}
+            <div class="news clear">
+                <div class="avatar left">
+                    <img class="avatar-30" src="{{AvatarLink .GetActEmail}}" alt="">
+                </div>
+                <div class="content left {{if eq .GetOpType 5}}push-news{{end}}">
+                    <p class="text-bold">
+                        <a href="/{{.GetActUserName}}">{{.GetActUserName}}</a> 
+                        {{if eq .GetOpType 1}}
+                        {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoLink | Str2html}}
+                        {{else if eq .GetOpType 5}}
+                        {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetBranch .GetRepoLink .GetRepoLink | Str2html}}
+                        {{else if eq .GetOpType 6}}
+                        {{ $index := index .GetIssueInfos 0}}
+                        {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoLink $index | Str2html}}
+                        {{else if eq .GetOpType 10}}
+                        {{ $index := index .GetIssueInfos 0}}
+                        {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoLink $index | Str2html}}
+                        {{end}}
+                    </p>
+                    {{if eq .GetOpType 5}}
+                    <div class="news-content content">
+                        <ul class="list-no-style">
+                            {{ $push := ActionContent2Commits .}}
+                            {{ $repoLink := .GetRepoLink}}
+                            {{range $push.Commits}}
+                            <li><img src="{{AvatarLink .AuthorEmail}}?s=16"> <a href="/{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> {{.Message}}</li>
+                            {{end}}
+                        </ul>
+                    </div>
+                    {{else if eq .GetOpType 6}}
+                    <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+                    {{else if eq .GetOpType 10}}
+                    <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+                    {{end}}
+                    <p class="news-time text-italic">{{TimeSince .GetCreate $.i18n.Lang}}</p>
+                </div>
+                <i class="mega-octicon octicon-{{ActionIcon .GetOpType}} right"></i>
+            </div>
+            {{end}}
+        </div>
+        <div id="dashboard-sidebar" class="right grid-1-3">
+            <ul id="dashboard-sidebar-menu" class="menu menu-line">
+                <li class="js-tab-nav js-tab-nav-show first" data-tab-target="#dashboard-my-repo"><a href="#">{{.i18n.Tr "repository"}}</a></li>
+                <li class="js-tab-nav" data-tab-target="#dashboard-my-org"><a href="#">{{.i18n.Tr "organization"}}</a></li>
+                <li class="js-tab-nav last" data-tab-target="#dashboard-my-mirror"><a href="#">{{.i18n.Tr "mirror"}}</a></li>
+                <li class="drop right">
+                    <button class="btn btn-green text-bold" id="dashboard-new-repo">
+                        <i class="octicon octicon-plus"></i>
+                    </button>
+                    <ul class="menu menu-vertical drop-down" id="dashboard-new-repo-menu">
+                        <li><a href="/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
+                        <li><a href="/org/create"><i class="octicon octicon-organization"></i>{{.i18n.Tr "new_org"}}</a></li>
+                    </ul>
+                </li>
+            </ul>
+            <div class="panel" id="dashboard-my-repo">
+                <div class="panel-header">
+                    <h4 class="left">{{.i18n.Tr "home.my_repos"}}
+                        <span class="repo-count label label-gray label-radius">{{.ContextUser.NumRepos}}</span>
+                    </h4>
+                    &nbsp;
+                </div>
+                <div class="panel-body">
+                    <ul class="list-no-style">
+                        {{range .Repos}}
+                        <li {{if .IsPrivate}}class="private"{{end}}>
+                            <a href="{{$.ContextUser.Name}}/{{.Name}}">
+                                <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+                                <span class="repo-name">
+                                    <!-- <span class="repo-name-prefix">gogits / </span> -->
+                                    <strong class="repo">{{.Name}}</strong>
+                                </span>
+                            </a>
+                        </li>
+                        {{end}}
+                    </ul>
+                </div>
+                <div class="panel-header repo-contrib-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.collaborative_repos"}}</h4>
+                </div>
+                <div class="panel-body">
+                    <ul class="list-no-style">
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">gogits / </span>
+                                <strong class="repo">gogs</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>2048
+                            </span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">astaxie / </span>
+                                <strong class="repo">beego</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>2301
+                            </span>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <i class="octicon octicon-repo"></i>
+                            <span class="repo-name">
+                                <span class="repo-name-prefix">gogits / </span>
+                                <strong class="repo">scaffold</strong>
+                            </span>
+                            <span class="right repo-star">
+                                <i class="octicon octicon-star"></i>0
+                            </span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="panel" id="dashboard-my-org">
+                <div class="panel-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.my_orgs"}}</h4>
+                </div>
+            </div>
+            <div class="panel" id="dashboard-my-mirror">
+                <div class="panel-header">
+                    <h4 class="text-bold">{{.i18n.Tr "home.my_mirrors"}}</h4>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/dashboard/nav.tmpl b/templates/user/dashboard/nav.tmpl
new file mode 100644
index 0000000000..6064f35692
--- /dev/null
+++ b/templates/user/dashboard/nav.tmpl
@@ -0,0 +1,46 @@
+<div id="dashboard-header">
+    <ul class="menu menu-line container">
+        <li id="dashboard-selection-menu" class="down drop">
+            <a href="#" class="text-bold radius">
+                <img class="avatar-30" src="{{.ContextUser.AvatarLink}}" alt="user-avatar" />
+                {{.ContextUser.Name}}
+            </a>
+            <div class="drop-down panel panel-radius">
+                <p class="panel-header"><strong>{{.i18n.Tr "home.switch_dashboard_context"}}</strong></p>
+                <ul class="menu menu-vertical switching-list" id="dashboard-switch-menu">
+                    <li class="org {{if eq .ContextUser.Id .SignedUser.Id}}checked{{end}}">
+                        <a href="/">
+                            <i class="octicon octicon-check"></i>
+                            <img class="avatar-24" src="{{.SignedUser.AvatarLink}}" alt="user-avatar" />
+                            {{.SignedUser.Name}}
+                        </a>
+                    </li>
+                    {{range .Orgs}}
+                    <li class="org {{if eq $.ContextUser.Id .Id}}checked{{end}}">
+                        <a href="{{.DashboardLink}}">
+                            <i class="octicon octicon-check"></i>
+                            <img class="avatar-24" src="{{.AvatarLink}}" alt="user-avatar" />
+                            {{.Name}}
+                        </a>
+                    </li>
+                    {{end}}
+                    <li>
+                        <a href="/user/settings/orgs"><i class="octicon octicon-organization"></i>{{.i18n.Tr "manage_org"}}</a>
+                    </li>
+                    <li>
+                        <a href="/org/create"><i class="octicon octicon-plus"></i>{{.i18n.Tr "new_org"}}</a>
+                    </li>
+                </ul>
+            </div>
+        </li>
+        <li class="right">
+            <a {{if $.PageIsIssues}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}issues"><i class="octicon octicon-issue-opened"></i>{{.i18n.Tr "issues"}}</a>
+        </li>
+        <li class="right">
+            <a {{if .PageIsPulls}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}pulls"><i class="octicon octicon-git-pull-request"></i>{{.i18n.Tr "pull_requests"}}</a>
+        </li>
+        <li class="right">
+            <a {{if $.PageIsNews}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}"><i class="octicon octicon-rss"></i>{{.i18n.Tr "news_feed"}}</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/templates/user/delete.tmpl b/templates/user/delete.tmpl
deleted file mode 100644
index fe29173560..0000000000
--- a/templates/user/delete.tmpl
+++ /dev/null
@@ -1,45 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-warning">
-            <div class="panel-heading">
-                Delete Account
-            </div>
-
-            <div class="panel-body">
-                {{if not .Flash.ErrorMsg}}<p class="alert alert-danger">The operation will delete your account permanently. Sorry to see you go, but we know you'll back soon.</p>{{end}}
-                <div class="form-group">
-                    <button type="submit" class="btn btn-danger btn-lg" href="#delete-account-modal" id="delete-account" data-toggle="modal">Delete Account</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="modal fade" id="delete-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <form action="/user/delete" method="post" class="modal-content" id="user-delete">
-                {{.CsrfTokenHtml}}
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" id="myModalLabel">Delete Account</h4>
-                </div>
-
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label>Make sure your are owner of this account. Please enter your password.<strong class="text-danger">*</strong></label>
-                        <input name="password" class="form-control" type="password" placeholder="Type your account password" required="required">
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-danger">Delete</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/notification.tmpl b/templates/user/notification.tmpl
deleted file mode 100644
index 7c2e8425d4..0000000000
--- a/templates/user/notification.tmpl
+++ /dev/null
@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <h4>Notification</h4>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/password.tmpl b/templates/user/password.tmpl
deleted file mode 100644
index 955a744e4f..0000000000
--- a/templates/user/password.tmpl
+++ /dev/null
@@ -1,49 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Password
-            </div>
-
-            <div class="panel-body">
-                <div class="col-md-8">
-                    <form class="form-horizontal" id="password-form" method="post" action="/user/settings/password">
-                        {{.CsrfTokenHtml}}
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Old Password<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="oldpasswd" class="form-control" placeholder="Type your current password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">New Password<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="newpasswd" class="form-control" placeholder="Type your new password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">Re-Type<strong class="text-danger">*</strong></label>
-                            <div class="col-md-7">
-                                <input type="password" name="retypepasswd" class="form-control" placeholder="Re-type your new password" required="required">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <div class="col-md-offset-3 col-md-7">
-                                <button type="submit" class="btn btn-primary">Change Password</button>&nbsp;&nbsp;
-                                <a href="/user/forget_password/">Forgot your password?</a>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/publickey.tmpl b/templates/user/publickey.tmpl
deleted file mode 100644
index 49b6b9caac..0000000000
--- a/templates/user/publickey.tmpl
+++ /dev/null
@@ -1,65 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="repo-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                SSH Keys
-            </div>
-
-            <div class="panel-body">
-                <div id="ssh-keys">
-                    <ul id="ssh-keys-list" class="list-group">
-                        <li class="list-group-item"><span class="name">SSH Key's name</span></li>
-                        {{range .Keys}}
-                        <li class="list-group-item">
-                            <span class="name">{{.Name}}</span>
-                            <span class="print">({{.Fingerprint}})</span>
-                            <button href="#" class="btn btn-danger delete pull-right" rel="{{.Id}}" data-del="{{.Id}}">Delete</button>
-                        </li>
-                        {{end}}
-                        <li class="list-group-item">
-                            <a class="btn btn-link btn-primary" href="#ssh-add-modal" id="ssh-add" data-toggle="modal">Add SSH Key</a>
-                        </li>
-                    </ul>
-                    <div class="modal fade" id="ssh-add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-                        <div class="modal-dialog">
-                            <form class="modal-content form-horizontal" id="ssh-form" method="post" action="/user/settings/ssh/">
-                                {{.CsrfTokenHtml}}
-                                <div class="modal-header">
-                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                                    <h4 class="modal-title" id="myModalLabel">Add SSH Key</h4>
-                                </div>
-
-                                <div class="modal-body">
-                                    <div class="form-group">
-                                        <label class="col-md-3 control-label">Key Name<strong class="text-danger">*</strong></label>
-                                        <div class="col-md-8">
-                                            <input name="keyname" class="form-control" placeholder="Type your preferred name" required="required">
-                                        </div>
-                                    </div>
-
-                                    <div class="form-group">
-                                        <label class="col-md-3 control-label">SSH Key<strong class="text-danger">*</strong></label>
-                                        <div class="col-md-8">
-                                            <textarea name="key_content" class="form-control" placeholder="Type your key content" required="required"></textarea>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="modal-footer">
-                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                                    <button type="submit" class="btn btn-primary">Save SSH Key</button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                    <p><strong>Need help?</strong> Check out the guide to <a href="https://help.github.com/articles/generating-ssh-keys" target="_blank">generating SSH keys</a> or troubleshoot <a href="https://help.github.com/ssh-issues/" target="_blank">common SSH Problems</a></p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/security.tmpl b/templates/user/security.tmpl
deleted file mode 100644
index 7de41ebd35..0000000000
--- a/templates/user/security.tmpl
+++ /dev/null
@@ -1,9 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-9">
-        <h4>Security</h4>
-    </div>
-</div>
-{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/setting.tmpl b/templates/user/setting.tmpl
deleted file mode 100644
index b197b0eb5f..0000000000
--- a/templates/user/setting.tmpl
+++ /dev/null
@@ -1,69 +0,0 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div id="body" class="container" data-page="user">
-    {{template "user/setting_nav" .}}
-    <div id="user-setting-container" class="col-md-10">
-        {{template "base/alert" .}}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                Account Profile
-            </div>
-
-            <div class="panel-body">
-                <form class="form-horizontal" id="password-form" method="post" action="/user/settings">
-                    {{.CsrfTokenHtml}}
-                    <p>Your Email address is public and will be used for any account related notifications, and any web based operations made via the site.</p>
-                    <div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label" for="user-setting-username">Username<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="username" class="form-control" placeholder="Type your user name" required="required" value="{{.SignedUser.Name}}" title="{{.SignedUser.Name}}" id="user-setting-username">
-                            <p class="help-block hidden"><span class="text-danger">Caution : </span>your username is changing !</p>
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_FullName}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Full Name</label>
-                        <div class="col-md-8">
-                            <input name="fullname" class="form-control" placeholder="Type your full name" value="{{.SignedUser.FullName}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Email<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="email" class="form-control" placeholder="Type your e-mail address" required="required" value="{{.SignedUser.Email}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Website}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Website</label>
-                        <div class="col-md-8">
-                            <input name="website" class="form-control" placeholder="Type your website URL" value="{{.SignedUser.Website}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Location}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Location</label>
-                        <div class="col-md-8">
-                            <input name="location" class="form-control" placeholder="Type your current location" value="{{.SignedUser.Location}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group {{if .Err_Avatar}}has-error has-feedback{{end}}">
-                        <label class="col-md-2 control-label">Gravatar Email<strong class="text-danger">*</strong></label>
-                        <div class="col-md-8">
-                            <input name="avatar" class="form-control" placeholder="Type your Gravatar e-mail address" required="required" value="{{.SignedUser.AvatarEmail}}">
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <div class="col-md-offset-2 col-md-8">
-                            <button type="submit" class="btn btn-primary">Update Profile</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
diff --git a/templates/user/setting_nav.tmpl b/templates/user/setting_nav.tmpl
deleted file mode 100644
index 7ee7982bdd..0000000000
--- a/templates/user/setting_nav.tmpl
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="user-setting-nav" class="col-md-2 repo-setting-nav">
-    <ul class="list-group">
-        <li class="list-group-item{{if .IsUserPageSetting}} active{{end}}"><a href="/user/settings">Account Profile</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingSocial}} active{{end}}"><a href="/user/settings/social">Social Account</a></li>
-        <li class="list-group-item{{if .IsUserPageSettingPasswd}} active{{end}}"><a href="/user/settings/password">Password</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingNotify}} active{{end}}"><a href="/user/setting/notification">Notifications</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingSSH}} active{{end}}"><a href="/user/settings/ssh/">SSH Keys</a></li>
-        <!-- <li class="list-group-item{{if .IsUserPageSettingSecurity}} active{{end}}"><a href="/user/setting/security">Security</a></li> -->
-        <li class="list-group-item{{if .IsUserPageSettingDelete}} active{{end}}"><a href="/user/delete">Delete Account</a></li>
-    </ul>
-</div>
\ No newline at end of file
diff --git a/templates/user/settings/delete.tmpl b/templates/user/settings/delete.tmpl
new file mode 100644
index 0000000000..9bfc287d8e
--- /dev/null
+++ b/templates/user/settings/delete.tmpl
@@ -0,0 +1,28 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-warning panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.delete_account"}}</strong></p>
+                        <div class="panel-body panel-content">
+                            <span class="alert alert-red alert-radius block"><i class="octicon octicon-alert"></i>{{.i18n.Tr "settings.delete_prompt" | Str2html}}</span>
+                            <form  action="/user/settings/delete" method="post">
+                                {{.CsrfTokenHtml}}
+                                <p class="field">
+                                    <span class="form-label"></span>
+                                    <button class="btn btn-red btn-large btn-radius" id="delete-account-button">{{.i18n.Tr "settings.confirm_delete_account"}}</button>
+                                </p>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/nav.tmpl b/templates/user/settings/nav.tmpl
new file mode 100644
index 0000000000..d6d20dee96
--- /dev/null
+++ b/templates/user/settings/nav.tmpl
@@ -0,0 +1,12 @@
+<div id="setting-menu" class="grid-1-5 panel panel-radius left">
+    <p class="panel-header"><strong>{{.i18n.Tr "settings"}}</strong></p>
+    <div class="panel-body">
+        <ul class="menu menu-vertical switching-list grid-1-5 left">
+            <li {{if .PageIsSettingsProfile}}class="current"{{end}}><a href="/user/settings">{{.i18n.Tr "settings.profile"}}</a></li>
+            <li {{if .PageIsSettingsPassword}}class="current"{{end}}><a href="/user/settings/password">{{.i18n.Tr "settings.password"}}</a></li>
+            <li {{if .PageIsSettingsSSHKeys}}class="current"{{end}}><a href="/user/settings/ssh">{{.i18n.Tr "settings.ssh_keys"}}</a></li>
+            <li {{if .PageIsSettingsSocial}}class="current"{{end}}><a href="/user/settings/social">{{.i18n.Tr "settings.social"}}</a></li>
+            <li {{if .PageIsSettingsDelete}}class="current"{{end}}><a href="/user/settings/delete">{{.i18n.Tr "settings.delete"}}</a></li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/user/settings/password.tmpl b/templates/user/settings/password.tmpl
new file mode 100644
index 0000000000..44e087af4e
--- /dev/null
+++ b/templates/user/settings/password.tmpl
@@ -0,0 +1,37 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.change_password"}}</strong></p>
+                        <form class="form form-align panel-body" id="user-profile-form" action="/user/settings/password" method="post">
+                            {{.CsrfTokenHtml}}
+                            <p class="field">
+                                <label class="req" for="old-password">{{.i18n.Tr "settings.old_password"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_OldPassword}}ipt-error{{end}}" id="old-password" name="old_password" type="password" required />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="password">{{.i18n.Tr "settings.new_password"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" required />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="retype">{{.i18n.Tr "re_type"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Retype}}ipt-error{{end}}" id="retype" name="retype" type="password" required />
+                            </p>
+                            <p class="field">
+                                <span class="form-label"></span>
+                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.change_password"}}</button>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl
new file mode 100644
index 0000000000..2d09975f4d
--- /dev/null
+++ b/templates/user/settings/profile.tmpl
@@ -0,0 +1,50 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.public_profile"}}</strong></p>
+                        <form class="form form-align panel-body" id="user-profile-form" action="/user/settings" method="post">
+                            {{.CsrfTokenHtml}}
+                        	<p class="text-center panel-desc">{{.i18n.Tr "settings.profile_desc"}}</p>
+                            <p class="field">
+                                <label class="req" for="username">{{.i18n.Tr "username"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.SignedUser.Name}}" data-uname="{{.SignedUser.Name}}" required />
+                            </p>
+                            <p class="field">
+                                <label for="full-name">{{.i18n.Tr "settings.full_name"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_FullName}}ipt-error{{end}}" id="full-name" name="fullname" type="text" value="{{.SignedUser.FullName}}" />
+                            </p>
+                            <p class="field">
+                                <label class="req" for="email">{{.i18n.Tr "email"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Email}}ipt-error{{end}}" id="email" name="email" type="email" value="{{.SignedUser.Email}}" required />
+                            </p>
+                            <p class="field">
+                                <label for="website">{{.i18n.Tr "settings.website"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Website}}ipt-error{{end}}" id="website" name="website" type="url" value="{{.SignedUser.Website}}" />
+                            </p>
+                            <p class="field">
+                                <label for="location">{{.i18n.Tr "settings.location"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Location}}ipt-error{{end}}" id="location" name="location" type="text" value="{{.SignedUser.Location}}" />
+                            </p>
+                            <p class="field">
+                                <label for="gravatar-email">Gravatar {{.i18n.Tr "email"}}</label>
+                                <input class="ipt ipt-large ipt-radius {{if .Err_Avatar}}ipt-error{{end}}" id="gravatar-email" name="avatar" type="text" value="{{.SignedUser.AvatarEmail}}" />
+                            </p>
+                            <p class="field">
+                                <span class="form-label"></span>
+                                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.update_profile"}}</button>
+                            </p>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/social.tmpl b/templates/user/settings/social.tmpl
new file mode 100644
index 0000000000..7ff2ea237f
--- /dev/null
+++ b/templates/user/settings/social.tmpl
@@ -0,0 +1,18 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="setting-content">
+                    <div id="user-profile-setting-content" class="panel panel-radius">
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.manage_social"}}</strong></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/settings/sshkeys.tmpl b/templates/user/settings/sshkeys.tmpl
new file mode 100644
index 0000000000..43dfb66e26
--- /dev/null
+++ b/templates/user/settings/sshkeys.tmpl
@@ -0,0 +1,61 @@
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="setting-wrapper" class="main-wrapper">
+    <div id="user-profile-setting" class="container clear">
+        {{template "user/settings/nav" .}}
+        <div class="grid-4-5 left">
+            <div class="setting-content">
+                {{template "ng/base/alert" .}}
+                <div id="user-ssh-setting-content">
+                    <div id="user-ssh-panel" class="panel panel-radius">
+                        <p class="panel-header">
+                            <button class="btn btn-small btn-black btn-radius right" id="ssh-add">{{.i18n.Tr "settings.add_key"}}</button>
+                            <strong>{{.i18n.Tr "settings.manage_ssh_keys"}}</strong>
+                        </p>
+                        <ul class="panel-body menu menu-vertical switching-list">
+                            <li>{{.i18n.Tr "settings.ssh_desc"}}</li>
+                            {{range .Keys}}
+                            <li class="ssh clear">
+                                <span class="active-icon left label {{if .HasRecentActivity}}label-green{{end}} label-radius"></span>
+                                <i class="mega-octicon octicon-key left"></i>
+                                <div class="ssh-content left">
+                                    <p><strong>{{.Name}}</strong></p>
+                                    <p class="print">{{.Fingerprint}}</p>
+                                    <p class="activity"><i>{{$.i18n.Tr "settings.add_on"}} {{DateFormat .Created "M d, Y"}} —  <i class="octicon octicon-info"></i>{{if .HasUsed}}{{$.i18n.Tr "settings.last_used"}} {{DateFormat .Updated "M d, Y"}}{{else}}{{$.i18n.Tr "settings.no_activity"}}{{end}}</i></p>
+                                </div>
+                                <form action="/user/settings/ssh" method="post">
+                                    {{$.CsrfTokenHtml}}
+                                    <input name="_method" type="hidden" value="DELETE">
+                                    <input name="id" type="hidden" value="{{.Id}}">
+                                    <button class="right ssh-delete-btn btn btn-red btn-radius btn-small">{{$.i18n.Tr "settings.delete_key"}}</button>
+                                </form>
+                            </li>
+                            {{end}}
+                        </ul>
+                    </div>
+                    <p>{{.i18n.Tr "settings.ssh_helper" | Str2html}}</p>
+                    <br>
+                    <form class="panel panel-radius form form-align hide" id="user-ssh-add-form" action="/user/settings/ssh" method="post">
+                        {{.CsrfTokenHtml}}
+                        <p class="panel-header"><strong>{{.i18n.Tr "settings.add_new_key"}}</strong></p>
+                        <div class="panel-body">
+                            <p class="field">
+                                <label class="req" for="ssh-title">{{.i18n.Tr "settings.key_name"}}</label>
+                                <input class="ipt ipt-radius" id="ssh-title" name="title" type="text" required />
+                            </p>
+                            <p class="field clear">
+                                <label class="left req" for="ssh-key">{{.i18n.Tr "settings.key_content"}}</label>
+                                <textarea class="ipt ipt-radius left" name="content" id="ssh-key" required></textarea>
+                            </p>
+                            <p class="field">
+                                <label></label>
+                                <button class="btn btn-green btn-radius" id="ssh-add-btn">{{.i18n.Tr "settings.add_key"}}</button>
+                            </p>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signin.tmpl b/templates/user/signin.tmpl
index 9a8aa1992d..91f56bd075 100644
--- a/templates/user/signin.tmpl
+++ b/templates/user/signin.tmpl
@@ -1,71 +1,39 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body" data-page="user-signin">
-    <form action="/user/login" method="post" class="form-horizontal card" id="login-card">
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="sign-wrapper">
+    <form class="form-align form panel sign-panel sign-form container panel-radius" id="sign-up-form" action="/user/login" method="post">
         {{.CsrfTokenHtml}}
-        {{if .IsSocialLogin}}
-        <h3>Social login: 2nd step <small>associate account</small></h3>
-        {{else}}
-        <h3>Log in</h3>
-        {{end}}
-        {{template "base/alert" .}}
-        <div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-            <label class="col-md-4 control-label">Username or e-mail: </label>
-            <div class="col-md-6">
-                <input name="username" class="form-control" placeholder="Type your username" value="{{.username}}" required="required">
-            </div>
-        </div>
-
-        <div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
-            <label class="col-md-4 control-label">Password: </label>
-            <div class="col-md-6">
-                <input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required">
-            </div>
+        <div class="panel-header">
+            <h2>{{.i18n.Tr "sign_in"}}</h2>
         </div>
-        
-        {{if not .IsSocialLogin}}<div class="form-group">
-            <div class="col-md-6 col-md-offset-4">
-                <div class="checkbox">
-                    <label>
-                        <input type="checkbox" name="remember" {{if .remember}}checked{{end}}>
-                        <strong>Remember me</strong>
-                    </label>
-                </div>
-            </div>
-        </div>{{end}}
-
-        <div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-                <button type="submit" class="btn btn-lg btn-primary">Log In</button>
-                {{if not .IsSocialLogin}}<a href="/user/forget_password/">Forgot your password?</a>{{end}}
+        <div class="panel-content">
+            {{template "base/alert" .}}
+            <p class="field">
+                <label class="req" for="username">{{.i18n.Tr "home.uname_holder"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.uname}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" required/>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <input class="ipt-chk" id="remember" name="remember" type="checkbox"/>&nbsp;&nbsp;&nbsp;&nbsp;<strong>{{.i18n.Tr "auth.remember_me"}}</strong>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "sign_in"}}</button>&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="/user/forget_password">{{.i18n.Tr "auth.forget_password"}}</a>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <a href="/user/sign_up">{{.i18n.Tr "auth.sign_up_now" | Str2html}}</a>
+            </p>
+            <hr/>
+            <div id="sign-social" class="text-center social-buttons">
+                {{template "ng/base/social" .}}
             </div>
         </div>
-
-        {{if not .IsSocialLogin}}<div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-                <a href="/user/sign_up">Need an account? Sign up now.</a>
-            </div>
-        </div>
-
-        {{if .OauthEnabled}}
-        <div class="form-group text-center" id="social-login">
-            <h4><span>or</span></h4>
-            <!--
-            <a href="/user/login/github?next=/user/sign_up" class="btn btn-default facebbok">
-                <i class="fa fa-facebook-square fa-2x"></i>
-                <span>Facebook</span>
-            </a>
-            <a href="/user/login/github?next=/user/sign_up" class="btn btn-default weibo">
-                <i class="fa fa-weibo fa-2x"></i>
-                <span>Weibo</span>
-            </a>-->
-            {{if .OauthService.GitHub}}<a href="/user/login/github?next=/user/sign_up" class="btn btn-default"><i class="fa fa-github-square fa-2x"></i><span>GitHub</span></a>{{end}}
-            {{if .OauthService.Google}}<a href="/user/login/google?next=/user/sign_up" class="btn btn-default"><i class="fa fa-google-plus-square fa-2x"></i><span>Google</span></a>{{end}}
-            {{if .OauthService.Twitter}}<a href="/user/login/twitter?next=/user/sign_up" class="btn btn-default"><i class="fa fa-twitter-square fa-2x"></i><span>Twitter</span></a>{{end}}
-            {{if not .OauthService.Tencent}}<a href="/user/login/qq?next=/user/sign_up" class="btn btn-default"><i class="fa fa-qq fa-2x"></i><span>Tencent QQ</span></a>{{end}}
-            {{if .OauthService.Weibo}}<a href="/user/login/weibo?next=/user/sign_up" class="btn btn-default"><i class="fa fa-weibo fa-2x"></i><span>Weibo</span></a>{{end}}
-        </div>
-        {{end}}{{end}}
     </form>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/signup.tmpl b/templates/user/signup.tmpl
index 209058c904..60490ceb89 100644
--- a/templates/user/signup.tmpl
+++ b/templates/user/signup.tmpl
@@ -1,60 +1,50 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-<div class="container" id="body">
-	<form action="/user/sign_up" method="post" class="form-horizontal card" id="login-card">
-		{{.CsrfTokenHtml}}
-		{{if .DisableRegistration}}
-		Sorry, registration has been disabled. Please contact the site administrator.
-		{{else}}
-		{{if .IsSocialLogin}}
-		<h3>Social login: 2nd step <small>complete information</small></h3>
-		{{else}}
-		<h3>Sign Up</h3>
-		{{end}}
-	    {{template "base/alert" .}}
-		<div class="form-group {{if .Err_UserName}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Username: </label>
-			<div class="col-md-6">
-				<input name="username" class="form-control" placeholder="Type your username" value="{{.username}}" required="required">
-			</div>
-		</div>
-		<div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Email: </label>
-			<div class="col-md-6">
-				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}" required="required">
-			</div>
-		</div>
-
-		<div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Password: </label>
-			<div class="col-md-6">
-				<input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required">
-			</div>
-		</div>
-
-		<div class="form-group {{if .Err_RetypePasswd}}has-error has-feedback{{end}}">
-			<label class="col-md-4 control-label">Re-type: </label>
-			<div class="col-md-6">
-				<input name="retypepasswd" type="password" class="form-control" placeholder="Re-type your password" required="required">
-			</div>
-		</div>
-
-		<div class="form-group">
-		    <div class="col-md-offset-4 col-md-6">
-		    	<button type="submit" class="btn btn-lg btn-primary">Create an account</button>
-		    </div>
-		</div>
-		
-	    <div class="form-group">
-            <div class="col-md-offset-4 col-md-6">
-			{{if .IsSocialLogin}}
-                <a href="/user/login">Already have an account? Bind now!</a>
-			{{else}}
-                <a href="/user/login">Already have an account? Sign in now!</a>
-			{{end}}
-            </div>
-	    </div>
-	    {{end}}
-	</form>
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="sign-wrapper">
+    <form class="form-align form panel panel-radius sign-panel sign-form container" id="sign-up-form" action="/user/sign_up" method="post">
+        {{.CsrfTokenHtml}}
+        <div class="panel-header">
+            <h2>{{.i18n.Tr "sign_up"}}</h2>
+        </div>
+        <div class="panel-content">
+            {{template "base/alert" .}}
+	        {{if .DisableRegistration}}
+	        <p>{{.i18n.Tr "auth.disable_register_prompt"}}</p>
+	        {{else}}
+            <p class="field">
+                <label class="req" for="username">{{.i18n.Tr "username"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.uname}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="email">{{.i18n.Tr "email"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Email}}ipt-error{{end}}" id="email" name="email" type="email"  value="{{.email}}"required/>
+            </p>
+            <p class="field">
+                <label class="req" for="password">{{.i18n.Tr "password"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="password" name="password" type="password" value="{{.password}}" required/>
+            </p>
+            <p class="field">
+                <label class="req" for="re-type">{{.i18n.Tr "re_type"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Password}}ipt-error{{end}}" id="re-type" name="retype" type="password" required/>
+            </p>
+            <p class="field">
+                <label></label>
+                {{CreateCaptcha}}
+            </p>
+            <p class="field">
+                <label class="req" for="captcha">{{.i18n.Tr "captcha"}}</label>
+                <input class="ipt ipt-large ipt-radius {{if .Err_Captcha}}ipt-error{{end}}" id="captcha" name="captcha" type="text" required/>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "auth.create_new_account"}}</button>
+            </p>
+            <p class="field">
+                <span class="form-label"></span>
+                <a href="/user/login">{{.i18n.Tr "auth.register_hepler_msg"}}</a>
+            </p>
+        	{{end}}
+        </div>
+    </form>
 </div>
-{{template "base/footer" .}}
+{{template "ng/base/footer" .}}
\ No newline at end of file