fix #650

22 files changed, 411 insertions, 548 deletions

diff --git a/templates/.VERSION b/templates/.VERSION
index d5e407396f..4bae731101 100644
--- a/templates/.VERSION
+++ b/templates/.VERSION
@@ -1 +1 @@
-0.7.19.1121 Beta
\ No newline at end of file
+0.7.20.1121 Beta
\ No newline at end of file
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
new file mode 100644
index 0000000000..5a459dedd8
--- /dev/null
+++ b/templates/explore/repo_list.tmpl
@@ -0,0 +1,23 @@
+<div class="ui repository list">
+  {{range .Repos}}
+  <div class="item">
+    <div class="ui header">
+      <a href="{{AppSubUrl}}/{{if .Owner}}{{.Owner.Name}}{{else if $.Org}}{{$.Org.Name}}{{else}}{{$.Owner.Name}}{{end}}/{{.Name}}">{{if $.PageIsExplore}}{{.Owner.Name}} / {{end}}{{.Name}}</a>
+      {{if .IsPrivate}}
+      <span class="text gold"><i class="icon octicon octicon-lock"></i></span>
+      {{else if .IsFork}}
+      <span><i class="icon octicon octicon-repo-forked"></i></span>
+      {{else if .IsMirror}}
+      <span><i class="icon octicon octicon-repo-clone"></i></span>
+      {{end}}
+
+      <div class="ui right metas">
+        <span class="text grey"><i class="octicon octicon-star"></i> {{.NumStars}}</span>
+        <span class="text grey"><i class="octicon octicon-git-branch"></i> {{.NumForks}}</span>
+      </div>
+    </div>
+    {{if .Description}}<p>{{.Description}}</p>{{end}}
+    <p class="time">{{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Updated $.i18n.Lang}}</p>
+  </div>
+  {{end}}
+</div>
\ No newline at end of file
diff --git a/templates/explore/repos.tmpl b/templates/explore/repos.tmpl
index 6654a315d0..1d45a96ec5 100644
--- a/templates/explore/repos.tmpl
+++ b/templates/explore/repos.tmpl
@@ -4,22 +4,7 @@
 		<div class="ui grid">
 			{{template "explore/navbar" .}}
 			<div class="twelve wide column content">
-				<div class="ui repository list">
-					{{range .Repos}}
-					<div class="item">
-						<div class="ui header">
-							<a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">{{.Owner.Name}} / {{.Name}}</a>
-
-							<div class="ui right metas">
-								<span class="text grey"><i class="octicon octicon-star"></i> {{.NumStars}}</span>
-								<span class="text grey"><i class="octicon octicon-git-branch"></i> {{.NumForks}}</span>
-							</div>
-						</div>
-						{{if .Description}}<p>{{.Description}}</p>{{end}}
-						<p class="time">{{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Updated $.i18n.Lang}}</p>
-					</div>
-					{{end}}
-				</div>
+        {{template "explore/repo_list" .}}
 
 				{{with .Page}}
 				{{if gt .TotalPages 1}}
diff --git a/templates/ng/base/alert.tmpl b/templates/ng/base/alert.tmpl
deleted file mode 100644
index 4c2976a914..0000000000
--- a/templates/ng/base/alert.tmpl
+++ /dev/null
@@ -1,3 +0,0 @@
-{{if .Flash.ErrorMsg}}<span class="alert alert-red alert-radius block text-bold"><i class="octicon octicon-alert"></i>{{.Flash.ErrorMsg|Str2html}}</span>{{end}}
-{{if .Flash.SuccessMsg}}<div class="alert alert-green alert-radius block"><i class="octicon octicon-check"></i>{{.Flash.SuccessMsg|Str2html}}</div>{{end}}
-{{if .Flash.InfoMsg}}<div class="alert alert-blue alert-radius block"><i class="octicon octicon-info"></i>{{.Flash.InfoMsg|Str2html}}</div>{{end}}
\ No newline at end of file
diff --git a/templates/ng/base/footer.tmpl b/templates/ng/base/footer.tmpl
deleted file mode 100644
index 695a145f72..0000000000
--- a/templates/ng/base/footer.tmpl
+++ /dev/null
@@ -1,29 +0,0 @@
-		</div>
-		<footer id="footer">
-		    <div class="container clear">
-		        <p class="left" id="footer-rights">© 2015 Gogs · {{ if .ShowFooterVersion }}{{.i18n.Tr "version"}}: {{AppVer}}{{ end }} · {{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> ·
-		            {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong></p>
-
-		        <div class="right" id="footer-links">
-		        		{{if .ShowFooterBranding}}
-		            <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>
-		            {{end}}
-		            <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>
-		            {{ if .ShowVersionFooter }}<span class="version">{{GoVer}}</span>{{ end }}
-		        </div>
-		    </div>
-		</footer>
-	</body>
-</html>
diff --git a/templates/ng/base/head.tmpl b/templates/ng/base/head.tmpl
deleted file mode 100644
index dbf801c66b..0000000000
--- a/templates/ng/base/head.tmpl
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html{{if .BrowserSupportsCopy}} class="is-copy-enabled"{{end}}>
-	<head data-suburl="{{AppSubUrl}}">
-		<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">
-		<meta name="referrer" content="no-referrer" />
-		<meta name="_csrf" content="{{.CsrfToken}}" />
-		{{if .GoGetImport}}
-		<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
-		<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">
-		{{end}}
-
-		<link rel="shortcut icon" href="{{AppSubUrl}}/img/favicon.png" />
-
-
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/font-awesome.min.css">
-		
-		<script src="{{AppSubUrl}}/ng/js/lib/jquery-1.11.1.min.js"></script>
-
-		<!-- Stylesheet -->
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/ui.css">
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/gogs.css">
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/tipsy.css">
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/magnific-popup.css">
-		<link rel="stylesheet" href="{{AppSubUrl}}/ng/fonts/octicons.css">
-		<link rel="stylesheet" href="{{AppSubUrl}}/css/github.min.css">
-
-		<!-- JavaScript -->
-    	<script src="{{AppSubUrl}}/ng/js/lib/lib.js"></script>
-    	<script src="{{AppSubUrl}}/ng/js/lib/jquery.tipsy.js"></script>
-    	<script src="{{AppSubUrl}}/ng/js/lib/jquery.magnific-popup.min.js"></script>
-	<script src="{{AppSubUrl}}/js/libs/emojify-1.1.0.min.js"></script>
-        <script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
-        <script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
-		<script src="{{AppSubUrl}}/ng/js/gogs/issue_label.js"></script>
-		<script src="{{AppSubUrl}}/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>
diff --git a/templates/ng/base/header.tmpl b/templates/ng/base/header.tmpl
deleted file mode 100644
index da9218368d..0000000000
--- a/templates/ng/base/header.tmpl
+++ /dev/null
@@ -1,60 +0,0 @@
-<header id="header">
-    <ul class="menu menu-line container" id="header-nav">
-        {{if not .PageIsHome}}
-        <li class="head" id="header-nav-logo">
-            <img src="{{AppSubUrl}}/img/favicon.png" alt="avatar" class="avatar-30"/>
-        </li>
-        <li {{if .PageIsDashboard}}class="current"{{end}}>
-            <a href="{{AppSubUrl}}/">{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}</a>
-        </li>
-        <li><a href="{{AppSubUrl}}/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="{{AppSubUrl}}/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="{{AppSubUrl}}/user/settings" title="{{.i18n.Tr "account_settings"}}"><i class="octicon octicon-settings"></i></a>
-        </li>
-            {{if .IsAdmin}}
-            <li class="right {{if .PageIsAdmin}}current{{end}}">
-                <a href="{{AppSubUrl}}/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="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
-                <li><a href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i>{{.i18n.Tr "new_migrate"}}</a></li>
-                <li><a href="{{AppSubUrl}}/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="{{AppSubUrl}}/{{.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="{{AppSubUrl}}/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="{{AppSubUrl}}/user/login" title="Sign In"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
-            </li>
-            {{if .ShowRegistrationButton}}
-            <li class="right">
-                <a href="{{AppSubUrl}}/user/sign_up" title="Account Settings"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
-            </li>
-            {{end}}
-            {{end}}
-        {{end}}
-    </ul>
-</header>
\ No newline at end of file
diff --git a/templates/org/base/header.tmpl b/templates/org/base/header.tmpl
deleted file mode 100644
index 1649b92090..0000000000
--- a/templates/org/base/header.tmpl
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="org-header" id="org-header">
-	<div class="container">
-		<a class="text-black left" href="{{AppSubUrl}}/org/{{.Org.LowerName}}">
-			<img class="avatar-48 left" src="{{.Org.AvatarLink}}?s=100">
-			<span class="org-name">{{if .Org.FullName}}{{.Org.FullName}}{{else}}{{.Org.Name}}{{end}}</span>
-		</a>
-		<ul class="menu menu-line container">
-			<li class="right">
-				<a {{if .PageIsOrgTeams}}class="current"{{end}} href="{{.OrgLink}}/teams"><i class="octicon octicon-jersey"></i> {{.i18n.Tr "org.teams"}} <span class="label label-gray label-radius">{{.Org.NumTeams}}</span></a>
-			</li>
-			<li class="right">
-				<a {{if .PageIsOrgMembers}}class="current"{{end}} href="{{.OrgLink}}/members"><i class="octicon octicon-organization"></i> {{.i18n.Tr "org.people"}} <span class="label label-gray label-radius">{{.Org.NumMembers}}</span></a>
-			</li>
-		</ul>
-	</div>
-</div>
\ No newline at end of file
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 4301063627..9f64f30259 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -1,93 +1,85 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-<div class="org-header" id="org-home-header">
-	<div class="container clear">
-		<img class="avatar-100 left" src="{{.Org.AvatarLink}}?s=140"/>
-		<div id="org-home-header-info">
-			<h2>
-				{{.Org.FullName}}
-				{{if .IsOrganizationOwner}}<a class="text-grey" href="{{.OrgLink}}/settings"><span class="octicon octicon-gear"></span></a>{{end}}
-			</h2>
-			{{if .Org.Description}}<p>{{.Org.Description}}</p>{{end}}
-      <ul class="text-grey">
-        {{if .Org.Location}}<li><span class="octicon octicon-location"></span> <span>{{.Org.Location}}</span></li>{{end}}
-        {{if .Org.Website}}<li><span class="octicon octicon-link"></span> <a target="_blank" href="{{.Org.Website}}">{{.Org.Website}}</a></li>{{end}}
-        {{if and .Org.Email .IsSigned}}<li><span class="octicon octicon-mail"></span> <a href="mailto:{{.Org.Email}}">{{.Org.Email}}</a></li>{{end}}
-      </ul>
-		</div>
-	</div>
-</div>
-<div class="container">
-	{{$isMember := .Org.IsOrgMember $.SignedUser.Id}}
-  <div id="org-home-repo-list" class="left grid-2-3">
-    <div class="clear">
-	  	{{if .IsOrganizationOwner}}
-	     <a class="btn btn-green btn-large btn-link btn-radius right" href="{{AppSubUrl}}/repo/create?org={{.Org.Id}}"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
-	  	{{end}}
-    </div>
-    <div id="org-repo-list">
-		{{range .Repos}}
-			{{if or (not .IsPrivate) (.HasAccess $.SignedUser)}}
-			<div class="org-repo-item">
-        <ul class="org-repo-status right">
-          <li><i class="octicon octicon-star"></i> {{.NumStars}}</li>
-          <li><i class="octicon octicon-git-branch"></i> {{.NumForks}}</li>
-        </ul>
-				<h2><a href="{{AppSubUrl}}/{{$.Org.Name}}/{{.Name}}">{{.Name}}</a></h2>
-				<p class="org-repo-description">{{.Description}}</p>
-				<p class="org-repo-updated">{{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Updated $.i18n.Lang}}</p>
-			</div>
-			{{end}}
-		{{end}}
+{{template "base/head" .}}
+<div class="organization profile">
+  <div class="ui container">
+    <div class="ui grid">
+      <div class="ui sixteen wide column">
+        <img class="ui left" id="org-avatar" src="{{.Org.AvatarLink}}?s=140"/>
+        <div id="org-info">
+          <div class="ui header">
+            {{.Org.FullName}}
+            {{if .IsOrganizationOwner}}<a class="text grey" href="{{.OrgLink}}/settings"><span class="icon octicon octicon-gear"></span></a>{{end}}
+          </div>
+          {{if .Org.Description}}<p class="desc">{{.Org.Description}}</p>{{end}}
+          <div class="text grey meta">
+            {{if .Org.Location}}<div class="item"><span class="icon octicon octicon-location"></span> <span>{{.Org.Location}}</span></div>{{end}}
+            {{if .Org.Website}}<div class="item"><span class="icon octicon octicon-link"></span> <a target="_blank" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
+          </div>
+        </div>
+
+      </div>
     </div>
   </div>
-  <div class="grid-1-3 right">
-  	<div class="org-sidebar">
-    	<div class="panel panel-radius">
-    		<div class="panel-header">
-    			{{if $isMember}}
-    			<a class="text-grey right" href="{{AppSubUrl}}/org/{{.Org.LowerName}}/members"><strong>{{.Org.NumMembers}}</strong><span class="octicon octicon-chevron-right"></span></a>
-    			{{end}}
-    			<strong>{{.i18n.Tr "org.people"}}</strong>
-    		</div>
-    		<div class="panel-body member-avatar-group">
-    			{{range .Members}}
-						{{if or $isMember (.IsPublicMember $.Org.Id)}}
-	    			<a href="{{AppSubUrl}}/{{.Name}}" title="{{.Name}}"><img src="{{.AvatarLink}}"></a>
-	    			{{end}}
-    			{{end}}
-    		</div>
-    		{{if .IsOrganizationOwner}}
-    		<div class="panel-footer">
-    			<a class="btn btn-medium btn-blue btn-link btn-radius" href="{{AppSubUrl}}/org/{{.Org.LowerName}}/invitations/new">{{.i18n.Tr "org.invite_someone"}}</a>
-    		</div>
-    		{{end}}
-    	</div>
-    	{{if $isMember}}
-    	<br>
-    	<div class="panel panel-radius">
-    		<div class="panel-header">
-    			<a class="text-grey right" href="{{AppSubUrl}}/org/{{.Org.LowerName}}/teams"><strong>{{.Org.NumTeams}}</strong><span class="octicon octicon-chevron-right"></span></a>
-    			<strong>{{.i18n.Tr "org.teams"}}</strong>
-    		</div>
-    		<div class="panel-body" id="org-home-team-list">
-    			<ul>
-	    			{{range .Teams}}
-    				<li>
-    					<a class="text-black" href="{{AppSubUrl}}/org/{{$.Org.LowerName}}/teams/{{.LowerName}}"><strong class="team-name">{{.Name}}</strong></a>
-    					<p class="team-meta">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}} · {{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>
-    				</li>
-	    			{{end}}
-    			</ul>
-    		</div>
-    		{{if .IsOrganizationOwner}}
-    		<div class="panel-footer">
-    			<a class="btn btn-medium btn-blue btn-link btn-radius" href="{{AppSubUrl}}/org/{{$.Org.LowerName}}/teams/new">{{.i18n.Tr "org.create_new_team"}}</a>
-    		</div>
-    		{{end}}
-    	</div>
-    	{{end}}
-  	</div>
+
+  <div class="ui divider"></div>
+
+  <div class="ui container">
+    <div class="ui grid">
+      {{$isMember := .Org.IsOrgMember $.SignedUser.Id}}
+      <div class="ui eleven wide column">
+        {{if .IsOrganizationOwner}}
+        <div class="text right">
+          <a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.Id}}"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
+        </div>
+        <div class="ui divider"></div>
+        {{end}}
+        {{template "explore/repo_list" .}}
+      </div>
+
+      <div class="ui five wide column">
+        <h4 class="ui top attached header">
+          <strong>{{.i18n.Tr "org.people"}}</strong>
+          {{if $isMember}}
+          <div class="ui right">
+            <a class="text grey" href="{{.Org.HomeLink}}/members"><strong>{{.Org.NumMembers}}</strong><span class="octicon octicon-chevron-right"></span></a>
+          </div>
+          {{end}}
+        </h4>
+        <div class="ui attached segment members">
+          {{range .Members}}
+            {{if or $isMember (.IsPublicMember $.Org.Id)}}
+            <a href="{{.HomeLink}}" title="{{.Name}}"><img class="ui avatar" src="{{.AvatarLink}}"></a>
+            {{end}}
+          {{end}}
+        </div>
+        {{if .IsOrganizationOwner}}
+        <div class="ui bottom attached segment">
+          <a class="ui blue small button" href="{{.Org.HomeLink}}/invitations/new">{{.i18n.Tr "org.invite_someone"}}</a>
+        </div>
+        {{end}}
+
+        {{if $isMember}}
+        <div class="ui top attached header">
+          <strong>{{.i18n.Tr "org.teams"}}</strong>
+          <div class="ui right">
+            <a class="text grey" href="{{.Org.HomeLink}}/teams"><strong>{{.Org.NumTeams}}</strong><span class="octicon octicon-chevron-right"></span></a>
+          </div>
+        </div>
+        <div class="ui attached table segment teams">
+          {{range .Teams}}
+          <div class="item">
+            <a href="{{$.Org.HomeLink}}/teams/{{.LowerName}}"><strong class="team-name">{{.Name}}</strong></a>
+            <p class="text grey">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}} · {{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>
+          </div>
+          {{end}}
+        </div>
+        {{if .IsOrganizationOwner}}
+        <div class="ui bottom attached segment">
+          <a class="ui blue small button" href="{{.Org.HomeLink}}/teams/new">{{.i18n.Tr "org.create_new_team"}}</a>
+        </div>
+        {{end}}
+        {{end}}
+      </div>
+    </div>
   </div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/member/invite.tmpl b/templates/org/member/invite.tmpl
index bff1b98b4c..d412dd30a3 100644
--- a/templates/org/member/invite.tmpl
+++ b/templates/org/member/invite.tmpl
@@ -1,18 +1,23 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div class="container">
-	<div class="invite-box" id="invite-box">
-    	{{template "ng/base/alert" .}}
-		<h3>{{.i18n.Tr "org.members.invite_desc" .Org.FullName}}</h3>
-		<form id="invite-member-form" action="{{.OrgLink}}/invitations/new" method="post">
-			{{.CsrfTokenHtml}}
-			<input class="ipt ipt-large ipt-radius" id="org-member-invite" name="uname" autocomplete="off" required>
-			<button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "org.members.invite_now"}}</button>
-			<div id="org-member-list-block">
-				<ul class="menu-down-show menu-vertical menu-radius switching-list user-list" id="org-member-invite-list"></ul>
-			</div>
-		</form>
+{{template "base/head" .}}
+<div class="organization invite">
+	{{template "org/header" .}}
+  <div class="ui container">
+		<div id="invite-box">
+    	{{template "base/alert" .}}
+			<h2>{{.i18n.Tr "org.members.invite_desc" .Org.DisplayName}}</h2>
+		  <form class="ui form" action="{{.Link}}" method="post">
+		    {{.CsrfTokenHtml}}
+		    <div class="inline field ui left">
+		    	<div id="search-user-box">
+		    	  <div class="ui input">
+		    	    <input class="prompt" name="uname" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
+		    	  </div>
+		    	  <div class="ui segment results hide"></div>
+		    	</div>
+		    </div>
+        <button class="ui blue button">{{.i18n.Tr "org.members.invite_now"}}</button>
+      </form>
+		</div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/member/members.tmpl b/templates/org/member/members.tmpl
index 0e7453ac5b..8399e044d2 100644
--- a/templates/org/member/members.tmpl
+++ b/templates/org/member/members.tmpl
@@ -1,49 +1,60 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div class="container">
-	<div class="org-header-alert">
-		{{template "ng/base/alert" .}}
-	</div>
-	<div class="org-toolbar clear">
+{{template "base/head" .}}
+<div class="organization members">
+	{{template "org/header" .}}
+  <div class="ui container">
+  	{{template "base/alert" .}}
 		{{if .IsOrganizationOwner}}
-        <a class="btn btn-green btn-large btn-link btn-radius right" href="{{.OrgLink}}/invitations/new"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "org.invite_someone"}}</a>
+    <div class="text right">
+      <a class="ui blue button" href="{{.OrgLink}}/invitations/new"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "org.invite_someone"}}</a>
+    </div>
+    <div class="ui divider"></div>
 		{{end}}
-	</div>
-	<div id="org-member-list">
-		{{range .Members}}
-		<div class="org-member-item">
-			<img class="avatar-48 left" src="{{.AvatarLink}}?s=100">
-			<a class="text-black" href="{{AppSubUrl}}/{{.Name}}"><span class="member-name"><strong>{{.FullName}}</strong>({{.Name}})</span></a>
-			<ul class="grid-6-12 right">
-				<li class="grid-1-3">
-				{{ $isPublic := .IsPublicMember $.Org.Id}}
-				{{if $isPublic}}
-					{{$.i18n.Tr "org.members.public"}}
-					{{if eq $.SignedUser.Id .Id}}(<a href="{{$.OrgLink}}/members/action/private?uid={{.Id}}">{{$.i18n.Tr "org.members.public_helper"}}</a>){{end}}
-				{{else}}
-					{{$.i18n.Tr "org.members.private"}}
-					{{if eq $.SignedUser.Id .Id}}(<a href="{{$.OrgLink}}/members/action/public?uid={{.Id}}">{{$.i18n.Tr "org.members.private_helper"}}</a>){{end}}
-				{{end}}
-				</li>
-				<li class="grid-1-4">{{if .IsUserOrgOwner $.Org.Id}}<strong>{{$.i18n.Tr "org.members.owner"}}</strong>{{else}}{{$.i18n.Tr "org.members.member"}}{{end}}</li>
-				{{if eq $.SignedUser.Id .Id}}
-					<li class="grid-1-6 right">
-						<a class="btn btn-red btn-link btn-radius" href="{{$.OrgLink}}/members/action/leave?uid={{.Id}}">{{$.i18n.Tr "org.members.leave"}}</a>
-					</li>
-				{{else if $.IsOrganizationOwner}}
-					<li class="grid-1-6 right">
-						<a class="btn btn-red btn-link btn-radius" href="{{$.OrgLink}}/members/action/remove?uid={{.Id}}">{{$.i18n.Tr "org.members.remove"}}</a>
-					</li>
-					{{if $isPublic}}
-						<li class="grid-1-6 right">
-							<a class="btn btn-blue btn-link btn-radius" href="{{$.OrgLink}}/members/action/private?uid={{.Id}}">{{$.i18n.Tr "org.members.conceal"}}</a>
-						</li>
+		
+		<div class="list">
+			{{range .Members}}
+			<div class="item ui grid">
+				<div class="ui one wide column">
+					<img class="ui avatar" src="{{.AvatarLink}}?s=48">
+				</div>
+				<div class="ui three wide column">
+					<div class="meta"><a href="{{.HomeLink}}">{{.Name}}</a></div>
+					<div class="meta">{{.FullName}}</div>
+				</div>
+				<div class="ui five wide column center">
+					<div class="meta">
+						{{$.i18n.Tr "org.members.membership_visibility"}}
+					</div>
+					<div class="meta">
+						{{ $isPublic := .IsPublicMember $.Org.Id}}
+						{{if $isPublic}}
+							<strong>{{$.i18n.Tr "org.members.public"}}</strong>
+							{{if or (eq $.SignedUser.Id .Id) $.IsOrganizationOwner}}(<a href="{{$.OrgLink}}/members/action/private?uid={{.Id}}">{{$.i18n.Tr "org.members.public_helper"}}</a>){{end}}
+						{{else}}
+							<strong>{{$.i18n.Tr "org.members.private"}}</strong>
+							{{if or (eq $.SignedUser.Id .Id) $.IsOrganizationOwner}}(<a href="{{$.OrgLink}}/members/action/public?uid={{.Id}}">{{$.i18n.Tr "org.members.private_helper"}}</a>){{end}}
+						{{end}}
+					</div>
+				</div>
+				<div class="ui three wide column center">
+					<div class="meta">
+						{{$.i18n.Tr "org.members.member_role"}}
+					</div>
+					<div class="meta">
+						<strong>{{if .IsUserOrgOwner $.Org.Id}}<span class="octicon octicon-shield"></span> {{$.i18n.Tr "org.members.owner"}}{{else}}{{$.i18n.Tr "org.members.member"}}{{end}}</strong>
+					</div>
+				</div>
+				<div class="ui four wide column">
+					<div class="text right">
+					{{if eq $.SignedUser.Id .Id}}
+						<a class="ui red small button" href="{{$.OrgLink}}/members/action/leave?uid={{.Id}}">{{$.i18n.Tr "org.members.leave"}}</a>
+					{{else if $.IsOrganizationOwner}}
+						<a class="ui red small button" href="{{$.OrgLink}}/members/action/remove?uid={{.Id}}">{{$.i18n.Tr "org.members.remove"}}</a>
 					{{end}}
-				{{end}}
-			</ul>
+					</div>
+				</div>
+			</div>
+			{{end}}
 		</div>
-		{{end}}
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/team/members.tmpl b/templates/org/team/members.tmpl
index 66f496ebdf..83b832e107 100644
--- a/templates/org/team/members.tmpl
+++ b/templates/org/team/members.tmpl
@@ -1,45 +1,46 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div id="setting-wrapper" class="main-wrapper">
-    <div id="team-members-list" class="container clear">
-		{{template "ng/base/alert" .}}
-		{{template "org/team/sidebar" .}}
-		<div class="grid-2-3 left">
-			<div class="setting-content">
-				<div class="panel panel-radius">
-					<div class="panel-header">
-						{{.i18n.Tr "org.teams.members"}}
-					</div>
-                    <ul class="panel-body setting-list" id="team-members-list">
-                    	{{if .IsOrganizationOwner}}
-						<li class="search">
-			                <form class="form form-align" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/add" id="repo-collab-form">
-			                    {{.CsrfTokenHtml}}
-			                    <input type="hidden" name="uid" value="{{.SignedUser.Id}}">
-                                <input class="ipt ipt-large ipt-radius" id="org-team-members-add" name="uname" autocomplete="off" required />
-                                <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "org.teams.add_team_member"}}</button>
-								<div class="repo-user-list-block">
-									<ul class="menu-down-show menu-vertical menu-radius switching-list user-list" id="org-team-members-list"></ul>
-								</div>
-			                </form>
-						</li>
+{{template "base/head" .}}
+<div class="organization teams">
+	{{template "org/header" .}}
+  <div class="ui container">
+  	{{template "base/alert" .}}
+  	<div class="ui grid">
+			{{template "org/team/sidebar" .}}
+			<div class="ui ten wide column">
+				<div class="ui top attached header">
+					{{.i18n.Tr "org.teams.members"}}
+				</div>
+				<div class="ui attached table segment members">
+      		{{range .Team.Members}}
+					<div class="item">
+      			{{if $.IsOrganizationOwner}}
+						<a class="ui red small button right" href="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/remove?uid={{.Id}}">{{$.i18n.Tr "org.members.remove"}}</a>
 						{{end}}
-                		{{range .Team.Members}}
-                		<li class="collab">
-                			{{if $.IsOrganizationOwner}}
-							<a class="btn btn-small btn-red btn-radius right" href="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/remove?uid={{.Id}}">{{$.i18n.Tr "org.members.remove"}}</a>
-							{{end}}
-							<a class="member" href="{{AppSubUrl}}/{{.Name}}">
-							    <img alt="{{.Name}}" class="pull-left avatar" src="{{.AvatarLink}}">
-							    <strong>{{.FullName}}</strong> ({{.Name}})
-							</a>
-                		</li>
-                		{{end}}
-                    </ul>
+						<a href="{{.HomeLink}}">
+						  <img class="ui avatar image" src="{{.AvatarLink}}">
+					    {{.DisplayName}}
+						</a>
+      		</div>
+      		{{end}}
+				</div>
+      	{{if .IsOrganizationOwner}}
+				<div class="ui bottom attached segment">
+				  <form class="ui form" id="add-member-form" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/add" method="post">
+            {{.CsrfTokenHtml}}
+            <input type="hidden" name="uid" value="{{.SignedUser.Id}}">
+				    <div class="inline field ui left">
+				    	<div id="search-user-box">
+				    	  <div class="ui input">
+				    	    <input class="prompt" name="uname" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" required>
+				    	  </div>
+				    	  <div class="ui segment results hide"></div>
+				    	</div>
+				    </div>
+	          <button class="ui green button">{{.i18n.Tr "org.teams.add_team_member"}}</button>
+        	</form>
 				</div>
+				{{end}}
 			</div>
-		</div>
+  	</div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/team/new.tmpl b/templates/org/team/new.tmpl
index 89afd84f9d..8d09e2ac0f 100644
--- a/templates/org/team/new.tmpl
+++ b/templates/org/team/new.tmpl
@@ -1,70 +1,82 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div id="repo-wrapper">
-    <form id="team-create-form" class="form form-align panel panel-radius" action="{{if .PageIsOrgTeamsNew}}{{.OrgLink}}/teams/new{{else}}{{.OrgLink}}/teams/{{.Team.LowerName}}/edit{{end}}" data-delete-url="{{.OrgLink}}/teams/{{.Team.LowerName}}/delete" method="post">
+{{template "base/head" .}}
+<div class="organization new team">
+  {{template "org/header" .}}
+  <div class="ui middle very relaxed page grid">
+    <div class="column">
+      <form class="ui form" action="{{if .PageIsOrgTeamsNew}}{{.OrgLink}}/teams/new{{else}}{{.OrgLink}}/teams/{{.Team.LowerName}}/edit{{end}}" data-delete-url="{{.OrgLink}}/teams/{{.Team.LowerName}}/delete" method="post">
         {{.CsrfTokenHtml}}
-        <div class="panel-header">
-            <h2>
-                {{if .PageIsOrgTeamsNew}}{{.i18n.Tr "org.create_new_team"}}{{else}}{{.i18n.Tr "org.teams.settings"}}{{end}}
-            </h2>
-        </div>
-        <div class="panel-content">
-            {{template "ng/base/alert" .}}
+        <h3 class="ui top attached header">
+          {{if .PageIsOrgTeamsNew}}{{.i18n.Tr "org.create_new_team"}}{{else}}{{.i18n.Tr "org.teams.settings"}}{{end}}
+        </h3>
+        <div class="ui attached segment">
+          {{template "base/alert" .}}
+          <div class="required field {{if .Err_TeamName}}error{{end}}">
+            <label for="team_name">{{.i18n.Tr "org.team_name"}}</label>
+            {{if eq .Team.LowerName "owners"}}
+            <input type="hidden" name="team_name" value="{{.team_name}}">
+            {{end}}
+            <input id="team_name" name="team_name" value="{{.team_name}}" required {{if eq .Team.LowerName "owners"}}disabled{{end}} autofocus>
+            <span class="help">{{.i18n.Tr "org.team_name_helper"}}</span>
+          </div>
+          <div class="field {{if .Err_Description}}error{{end}}">
+            <label for="desc">{{.i18n.Tr "org.team_desc"}}</label>
+            <input id="desc" name="desc" value="{{.desc}}">
+            <span class="help">{{.i18n.Tr "org.team_desc_helper"}}</span>
+          </div>
+          {{if not (eq .Team.LowerName "owners")}}
+          <div class="grouped field">
+            <label>{{.i18n.Tr "org.team_permission_desc"}}</label>
+            <br>
             <div class="field">
-                <label class="req" for="team-name">{{.i18n.Tr "org.team_name"}}</label>
-                {{if eq .Team.LowerName "owners"}}
-                <input type="hidden" name="team_name" value="{{.team_name}}">
-                {{end}}
-                <input class="ipt ipt-large ipt-radius {{if .Err_TeamName}}ipt-error{{end}}" id="team-name" name="team_name" value="{{.team_name}}" required {{if eq .Team.LowerName "owners"}}disabled{{end}} />
-                <span class="form-label"></span>
-                <span class="help">{{.i18n.Tr "org.team_name_helper"}}</span>
+              <div class="ui radio checkbox">
+                <input type="radio" name="permission" value="read" {{if or .PageIsOrgTeamsNew (eq .Team.Authorize 1)}}checked{{end}}>
+                <label>{{.i18n.Tr "org.teams.read_access"}}</label>
+                <span class="help">{{.i18n.Tr "org.teams.read_access_helper"}}</span>
+              </div>
             </div>
             <div class="field">
-                <label for="desc">{{.i18n.Tr "org.team_desc"}}</label>
-                <input class="ipt ipt-large ipt-radius {{if .Err_Description}}ipt-error{{end}}" id="desc" name="desc" value="{{.desc}}" />
-                <span class="form-label"></span>
-                <span class="help">{{.i18n.Tr "org.team_desc_helper"}}</span>
+              <div class="ui radio checkbox">
+                <input type="radio" name="permission" value="write" {{if eq .Team.Authorize 2}}checked{{end}}>
+                <label>{{.i18n.Tr "org.teams.write_access"}}</label>
+                <span class="help">{{.i18n.Tr "org.teams.write_access_helper"}}</span>
+              </div>
             </div>
-            {{if not (eq .Team.LowerName "owners")}}
             <div class="field">
-                <h4 class="text-center">{{.i18n.Tr "org.team_permission_desc"}}</h4>
-                <label></label>
-                <input name="permission" type="radio" value="read" {{if or .PageIsOrgTeamsNew (eq .Team.Authorize 1)}}checked{{end}}> {{.i18n.Tr "org.teams.read_access"}}
-                <label></label>
-                <p class="text-grey note">{{.i18n.Tr "org.teams.read_access_helper"}}</p>
-                <label></label>
-                <input name="permission" type="radio" value="write" {{if eq .Team.Authorize 2}}checked{{end}}> {{.i18n.Tr "org.teams.write_access"}}
-                <label></label>
-                <p class="text-grey note">{{.i18n.Tr "org.teams.write_access_helper"}}</p>
-                <label></label>
-                <input name="permission" type="radio" value="admin" {{if eq .Team.Authorize 3}}checked{{end}}> {{.i18n.Tr "org.teams.admin_access"}}
-                <label></label>
-                <p class="text-grey note">{{.i18n.Tr "org.teams.admin_access_helper"}}</p>
+              <div class="ui radio checkbox">
+                <input type="radio" name="permission" value="admin" {{if eq .Team.Authorize 3}}checked{{end}}>
+                <label>{{.i18n.Tr "org.teams.admin_access"}}</label>
+                <span class="help">{{.i18n.Tr "org.teams.admin_access_helper"}}</span>
+              </div>
             </div>
-            <hr>
+          </div>
+          <div class="ui divider"></div>
+          {{end}}
+
+          <div class="field">
+            {{if .PageIsOrgTeamsNew}}
+              <button class="ui green button">{{.i18n.Tr "org.create_new_team"}}</button>
+              <a class="ui button" href="{{.OrgLink}}/teams">{{.i18n.Tr "cancel"}}</a>
+            {{else}}
+              <button class="ui green button">{{.i18n.Tr "org.teams.update_settings"}}</button>
+              {{if not (eq .Team.LowerName "owners")}}
+              <button class="ui red button delete-button" data-url="{{.OrgLink}}/teams/{{.team_name}}/delete">{{.i18n.Tr "org.teams.delete_team"}}</button>
+              {{end}}
             {{end}}
-            <div class="field">
-                <label></label>
-                {{if .PageIsOrgTeamsNew}}
-                    <button class="btn btn-large btn-blue btn-radius">{{.i18n.Tr "org.create_new_team"}}</button>
-                    <a class="btn btn-small btn-gray btn-radius" id="repo-create-cancel" href="{{.OrgLink}}/teams"><strong>{{.i18n.Tr "cancel"}}</strong></a>
-                {{else}}
-                    <button class="btn btn-large btn-green btn-radius">{{.i18n.Tr "org.teams.update_settings"}}</button>
-                    {{if not (eq .Team.LowerName "owners")}}
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <button class="btn btn-large btn-red btn-radius" id="org-team-delete" href="#delete-team-modal">{{.i18n.Tr "org.teams.delete_team"}}</button>
-                    <div class="white-popup-block mfp-hide" id="delete-team-modal">
-                        <h1 class="text-red">{{.i18n.Tr "org.teams.delete_team_title"}}</h1>
-                        <p>{{.i18n.Tr "org.teams.delete_team_desc"}}</p>
-                        <br>
-                        <button class="btn btn-red btn-large btn-radius" id="delete-team-submit">{{.i18n.Tr "settings.continue"}}</button>
-                        <button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
-                    </div>
-                    {{end}}
-                {{end}}
-            </div>
+          </div>
         </div>
-    </form>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+    <i class="trash icon"></i>
+    {{.i18n.Tr "org.teams.delete_team_title"}}
+  </div>
+  <div class="content">
+    <p>{{.i18n.Tr "org.teams.delete_team_desc"}}</p>
+  </div>
+  {{template "base/delete_modal_actions" .}}
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/team/repositories.tmpl b/templates/org/team/repositories.tmpl
index 33d4dea854..28126bef32 100644
--- a/templates/org/team/repositories.tmpl
+++ b/templates/org/team/repositories.tmpl
@@ -1,45 +1,46 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div id="setting-wrapper" class="main-wrapper">
-    <div id="team-members-list" class="container clear">
-		{{template "ng/base/alert" .}}
-		{{template "org/team/sidebar" .}}
-		<div class="grid-2-3 left">
-			<div class="setting-content">
-				<div class="panel panel-radius">
-					<div class="panel-header">
-						{{.i18n.Tr "org.teams.repositories"}}
-					</div>
+{{template "base/head" .}}
+<div class="organization teams">
+	{{template "org/header" .}}
+  <div class="ui container">
+  	{{template "base/alert" .}}
+  	<div class="ui grid">
+			{{template "org/team/sidebar" .}}
+			<div class="ui ten wide column">
+				<div class="ui top attached header">
+					{{.i18n.Tr "org.teams.repositories"}}
+				</div>
+				<div class="ui attached table segment repositories">
 					{{$canAddRemove := and $.IsOrganizationOwner (not (eq $.Team.LowerName "owners"))}}
-                    <ul class="panel-body setting-list" id="team-repositories-list">
-                    	{{if $canAddRemove}}
-						<li class="search">
-			                <form class="form form-align" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/add" id="repo-collab-form">
-			                    {{.CsrfTokenHtml}}
-                                <input class="ipt ipt-large ipt-radius" id="org-team-repositories-add" name="repo-name" autocomplete="off" data-uid="{{.Org.Id}}" required />
-                                <button class="btn btn-blue btn-large btn-radius">{{.i18n.Tr "org.teams.add_team_repository"}}</button>
-								<div class="repo-user-list-block">
-									<ul class="menu-down-show menu-vertical menu-radius switching-list user-list" id="org-team-repositories-list"></ul>
-								</div>
-			                </form>
-						</li>
+        	{{range .Team.Repos}}
+          <div class="item">
+            {{if $canAddRemove}}
+						<a class="ui red small button right" href="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/remove?repoid={{.ID}}">{{$.i18n.Tr "org.teams.remove_repo"}}</a>
 						{{end}}
-                		{{range .Team.Repos}}
-                		<li class="collab">
-                			{{if $canAddRemove}}
-							<a class="btn btn-small btn-red btn-radius right" href="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/remove?repoid={{.ID}}">{{$.i18n.Tr "org.teams.remove_repo"}}</a>
-							{{end}}
-							<a class="member" href="{{AppSubUrl}}/{{$.Org.Name}}/{{.Name}}">
-                                <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
-							    <strong>{{$.Org.Name}}/{{.Name}}</strong>
-							</a>
-                		</li>
-                		{{end}}
-                    </ul>
-				</div>
+						<a class="member" href="{{AppSubUrl}}/{{$.Org.Name}}/{{.Name}}">
+              <i class="icon octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+					    <strong>{{$.Org.Name}}/{{.Name}}</strong>
+						</a>
+          </div>
+      		{{end}}
+        </div>
+        {{if $canAddRemove}}
+        <div class="ui bottom attached segment">
+			    <form class="ui form" id="add-repo-form" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/add" method="post">
+			    	{{.CsrfTokenHtml}}
+				    <div class="inline field ui left">
+				    	<div id="search-repo-box" data-uid="{{.Org.Id}}">
+				    	  <div class="ui input">
+				    	    <input class="prompt" name="repo_name" placeholder="{{.i18n.Tr "org.teams.search_repo_placeholder"}}" autocomplete="off" required>
+				    	  </div>
+				    	  <div class="ui segment results hide"></div>
+				    	</div>
+				    </div>
+	          <button class="ui green button">{{.i18n.Tr "org.teams.add_team_repository"}}</button>
+			    </form>
+        </div>
+				{{end}}
 			</div>
 		</div>
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index d6d9251947..5abf34be6c 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -1,34 +1,41 @@
-<div class="grid-1-3 panel panel-radius left" id="org-team-card">
-    <div class="panel-header">
-		{{if .Team.IsMember $.SignedUser.Id}}
-        <a class="btn btn-small btn-red btn-header btn-radius right" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/leave?uid={{$.SignedUser.Id}}&page=team">{{$.i18n.Tr "org.teams.leave"}}</a>
-        {{else if .IsOrganizationOwner}}
-        <a class="btn btn-small btn-blue btn-header btn-radius right" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/join?uid={{$.SignedUser.Id}}&page=team">{{$.i18n.Tr "org.teams.join"}}</a>
-        {{end}}
-    	<strong>{{.Team.Name}}</strong>
+<div class="ui six wide column">
+  <h4 class="ui top attached header">
+    <strong>{{.Team.Name}}</strong>
+    <div class="ui right">
+      {{if .Team.IsMember $.SignedUser.Id}}
+      <a class="ui red tiny button" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/leave?uid={{$.SignedUser.Id}}&page=team">{{$.i18n.Tr "org.teams.leave"}}</a>
+      {{else if .IsOrganizationOwner}}
+      <a class="ui blue tiny button" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/action/join?uid={{$.SignedUser.Id}}&page=team">{{$.i18n.Tr "org.teams.join"}}</a>
+      {{end}}
     </div>
-    <div class="panel-body">
-    	<p class="desc">{{if .Team.Description}}{{.Team.Description}}{{else}}{{.i18n.Tr "org.teams.no_desc"}}{{end}}</p>
-    	<hr>
-    	<div class="team-stats">
-    		<a href="{{.OrgLink}}/teams/{{.Team.LowerName}}"><span class="octicon octicon-person"></span> <strong>{{.Team.NumMembers}}</strong> {{$.i18n.Tr "org.lower_members"}}</a> ·
-    		<a href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories"><span class="octicon octicon-repo"></span> <strong>{{.Team.NumRepos}}</strong> {{$.i18n.Tr "org.lower_repositories"}}</a>
-    	</div>
-    	<p class="desc">
-    		{{if eq .Team.LowerName "owners"}}
-    		{{.i18n.Tr "org.teams.owners_permission_desc" | Str2html}}
-            {{else if (eq .Team.Authorize 1)}}
-            {{.i18n.Tr "org.teams.read_permission_desc" | Str2html}}
-            {{else if (eq .Team.Authorize 2)}}
-            {{.i18n.Tr "org.teams.write_permission_desc" | Str2html}}
-            {{else if (eq .Team.Authorize 3)}}
-            {{.i18n.Tr "org.teams.admin_permission_desc" | Str2html}}
-    		{{end}}
-      	</p>
+  </h4>
+  <div class="ui attached table segment detail">
+    <div class="item">
+      {{if .Team.Description}}
+      {{.Team.Description}}
+      {{else}}
+      <span class="text grey italic">{{.i18n.Tr "org.teams.no_desc"}}</span>
+      {{end}}
     </div>
-    {{if .IsOrganizationOwner}}
-    <div class="panel-footer">
-    	<a class="btn btn-medium btn-green btn-link btn-radius" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/edit"><span class="octicon octicon-gear"></span> {{$.i18n.Tr "org.teams.settings"}}</a>
+    <div class="item">
+      <a href="{{.OrgLink}}/teams/{{.Team.LowerName}}"><span class="octicon octicon-person"></span> <strong>{{.Team.NumMembers}}</strong> {{$.i18n.Tr "org.lower_members"}}</a> ·
+      <a href="{{.OrgLink}}/teams/{{.Team.LowerName}}/repositories"><span class="octicon octicon-repo"></span> <strong>{{.Team.NumRepos}}</strong> {{$.i18n.Tr "org.lower_repositories"}}</a>
     </div>
-    {{end}}
+    <div class="item">
+      {{if eq .Team.LowerName "owners"}}
+        {{.i18n.Tr "org.teams.owners_permission_desc" | Str2html}}
+      {{else if (eq .Team.Authorize 1)}}
+        {{.i18n.Tr "org.teams.read_permission_desc" | Str2html}}
+      {{else if (eq .Team.Authorize 2)}}
+        {{.i18n.Tr "org.teams.write_permission_desc" | Str2html}}
+      {{else if (eq .Team.Authorize 3)}}
+        {{.i18n.Tr "org.teams.admin_permission_desc" | Str2html}}
+      {{end}}
+    </div>
+  </div>
+  {{if .IsOrganizationOwner}}
+  <div class="ui bottom attached segment">
+    <a class="ui teal small button" href="{{.OrgLink}}/teams/{{.Team.LowerName}}/edit"><span class="octicon octicon-gear"></span> {{$.i18n.Tr "org.teams.settings"}}</a>
+  </div>
+  {{end}}
 </div>
\ No newline at end of file
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index 30df3e4041..2289af123f 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -1,42 +1,41 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "org/base/header" .}}
-<div class="container">
-	<div class="org-header-alert">
-		{{template "ng/base/alert" .}}
-	</div>
-	<div class="org-toolbar clear">
+{{template "base/head" .}}
+<div class="organization teams">
+	{{template "org/header" .}}
+  <div class="ui container">
+  	{{template "base/alert" .}}
 		{{if .IsOrganizationOwner}}
-        <a class="btn btn-green btn-large btn-link btn-radius right" href="{{.OrgLink}}/teams/new"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "org.create_new_team"}}</a>
+    <div class="text right">
+      <a class="ui green button" href="{{.OrgLink}}/teams/new"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "org.create_new_team"}}</a>
+    </div>
+    <div class="ui divider"></div>
 		{{end}}
-	</div>
-	<div class="org-team-list">
-		{{range .Teams}}
-		<div class="org-team-list-item">
-			<div class="panel panel-radius">
-				<div class="panel-header">
-					{{if .IsMember $.SignedUser.Id}}
-                    <a class="btn btn-small btn-red btn-header btn-radius right" href="{{$.OrgLink}}/teams/{{.LowerName}}/action/leave?uid={{$.SignedUser.Id}}">{{$.i18n.Tr "org.teams.leave"}}</a>
-                    {{else if $.IsOrganizationOwner}}
-                    <a class="btn btn-small btn-blue btn-header btn-radius right" href="{{$.OrgLink}}/teams/{{.LowerName}}/action/join?uid={{$.SignedUser.Id}}">{{$.i18n.Tr "org.teams.join"}}</a>
-                    {{end}}
-                    <a class="text-black" href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong>{{.Name}}</strong></a>
+
+		<div class="ui two column grid">
+			{{range .Teams}}
+			<div class="column">
+				<div class="ui top attached header">
+	        <a class="text black" href="{{$.OrgLink}}/teams/{{.LowerName}}"><strong>{{.Name}}</strong></a>
+	        <div class="ui right">
+						{{if .IsMember $.SignedUser.Id}}
+	        	<a class="ui red small button" href="{{$.OrgLink}}/teams/{{.LowerName}}/action/leave?uid={{$.SignedUser.Id}}">{{$.i18n.Tr "org.teams.leave"}}</a>
+	          {{else if $.IsOrganizationOwner}}
+	          <a class="ui blue small button" href="{{$.OrgLink}}/teams/{{.LowerName}}/action/join?uid={{$.SignedUser.Id}}">{{$.i18n.Tr "org.teams.join"}}</a>
+	          {{end}}
+	        </div>
 				</div>
-				{{if .NumMembers}}
-				<div class="panel-body member-avatar-group">
+				<div class="ui attached segment members">
 					{{range .Members}}
-					<a href="{{AppSubUrl}}/{{.Name}}" title="{{.Name}}">
-						<img src="{{.AvatarLink}}">
+					<a href="{{.HomeLink}}" title="{{.Name}}">
+						<img class="ui avatar image" src="{{.AvatarLink}}">
 					</a>
 					{{end}}
 				</div>
-				{{end}}
-				<div class="panel-footer">
-	    			<p class="team-meta">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}} · {{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>
+				<div class="ui bottom attached header">
+	    		<p class="team-meta">{{.NumMembers}} {{$.i18n.Tr "org.lower_members"}} · {{.NumRepos}} {{$.i18n.Tr "org.lower_repositories"}}</p>
 				</div>
 			</div>
+			{{end}}
 		</div>
-		{{end}}
 	</div>
 </div>
-{{template "ng/base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index ebaa5965fa..07a9c0919d 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -71,7 +71,7 @@
           </div>
           <div class="inline field">
             <label>{{.i18n.Tr "repo.license"}}</label>
-            <div class="ui selection dropdown">
+            <div class="ui search selection dropdown">
               <input type="hidden" name="license" value="{{.license}}">
               <div class="default text">{{.i18n.Tr "repo.license_helper"}}</div>
               <div class="menu">
diff --git a/templates/repo/migrate.tmpl b/templates/repo/migrate.tmpl
index c1ed2110af..222b275006 100644
--- a/templates/repo/migrate.tmpl
+++ b/templates/repo/migrate.tmpl
@@ -36,22 +36,22 @@
 
 			  	<div class="inline required field {{if .Err_Owner}}error{{end}}">
 	  	      <label>{{.i18n.Tr "repo.owner"}}</label>
-			      <div class="ui selection dropdown">
+			      <div class="ui selection owner dropdown">
 			        <input type="hidden" id="uid" name="uid" value="{{.ContextUser.Id}}" required>
 			        <span class="text">
 			        	<img class="ui mini image" src="{{.ContextUser.AvatarLink}}">
-            		{{.ContextUser.Name}}
+            		{{.ContextUser.ShortName 20}}
             	</span>
 			        <i class="dropdown icon"></i>
 			        <div class="menu">
 			        	<div class="item" data-value="{{.SignedUser.Id}}">
 				        	<img class="ui mini image" src="{{.SignedUser.AvatarLink}}">
-	            		{{.SignedUser.Name}}
+	            		{{.SignedUser.ShortName 20}}
 			        	</div>
 			        	{{range .Orgs}}
 			        	<div class="item" data-value="{{.Id}}">
 				        	<img class="ui mini image" src="{{.AvatarLink}}">
-	            		{{.Name}}
+	            		{{.ShortName 20}}
 			        	</div>
 			        	{{end}}
 			        </div>
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index c991511020..26009edb69 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -29,7 +29,7 @@
 				    <div class="inline field ui left">
 				    	<div id="search-user-box">
 				    	  <div class="ui input">
-				    	    <input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off">
+				    	    <input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" required>
 				    	  </div>
 				    	  <div class="ui segment results hide"></div>
 				    	</div>
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index eed5b40736..b5be8f8fa5 100644
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -73,7 +73,7 @@
               <li>
                 <a href="{{AppSubUrl}}/{{.Name}}">
                   <i class="icon octicon octicon-organization"></i>
-                  <strong>{{.Name}}</strong>
+                  <strong>{{.ShortName 20}}</strong>
                   <span class="ui right text light grey">
                     <i class="octicon octicon-repo"></i>{{.NumRepos}}
                   </span>
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 8469e23bc3..7d9c999507 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -2,7 +2,7 @@
   <div class="ui floating dropdown link jump">
     <span class="text">
     	<img class="ui avatar image" src="{{.ContextUser.AvatarLink}}">
-  		{{.ContextUser.Name}}
+  		{{.ContextUser.ShortName 20}}
     	<i class="dropdown icon"></i>
   	</span>
     <div class="context user overflow menu" tabindex="-1">
@@ -17,7 +17,7 @@
         {{range .Orgs}}
         <a class="{{if eq $.ContextUser.Id .Id}}active selected{{end}} item" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else}}dashboard{{end}}">
           <img class="ui avatar image" src="{{.AvatarLink}}">
-          {{.Name}}
+          {{.ShortName 20}}
         </a>
         {{end}}
       </div>
@@ -42,7 +42,7 @@
       <div class="right menu">
         <div class="item">
           <a class="ui blue basic button" href="{{AppSubUrl}}/org/{{.ContextUser.Name}}">
-            {{.i18n.Tr "home.view_home" .ContextUser.Name}}
+            {{.i18n.Tr "home.view_home" (.ContextUser.ShortName 10)}}
           </a>
         </div>
       </div>
diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index d1d92e8a20..a17261d138 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -55,27 +55,7 @@
           </a>
         </div>
         {{if ne .TabName "activity"}}
-        <div class="ui repository list">
-          {{range .Repos}}
-            {{if or (not .IsPrivate) (.HasAccess $.SignedUser)}}
-            <div class="item">
-              <div class="ui header">
-                <a href="{{AppSubUrl}}/{{$.Owner.Name}}/{{.Name}}">{{.Name}}</a>
-                {{if .IsPrivate}}
-                <span class="text gold"><i class="icon octicon octicon-lock"></i></span>
-                {{end}}
-
-                <div class="ui right metas">
-                  <span class="text grey"><i class="octicon octicon-star"></i> {{.NumStars}}</span>
-                  <span class="text grey"><i class="octicon octicon-git-branch"></i> {{.NumForks}}</span>
-                </div>
-              </div>
-              {{if .Description}}<p>{{.Description}}</p>{{end}}
-              <p class="time">{{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Updated $.i18n.Lang}}</p>
-            </div>
-            {{end}}
-          {{end}}
-        </div>
+          {{template "explore/repo_list" .}}
         {{else}}
         <br>
         <div class="feeds">