fix #650

9 files changed, 375 insertions, 363 deletions

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