fix #650

5 files changed, 219 insertions, 199 deletions

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