diff --git a/static/css/directives/ui/avatar.css b/static/css/directives/ui/avatar.css
index 97a15dc31..b0adf7748 100644
--- a/static/css/directives/ui/avatar.css
+++ b/static/css/directives/ui/avatar.css
@@ -20,4 +20,7 @@
 
 .avatar-element .letter {
   cursor: default !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
 }
\ No newline at end of file
diff --git a/static/css/pages/team-view.css b/static/css/pages/team-view.css
new file mode 100644
index 000000000..26df5412d
--- /dev/null
+++ b/static/css/pages/team-view.css
@@ -0,0 +1,51 @@
+.team-view .co-main-content-panel {
+  padding: 20px;
+}
+
+.team-view .team-name {
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
+.team-view .team-view-header {
+  border-bottom: 1px solid #eee;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+}
+
+.team-view .team-view-header > h3 {
+  margin-top: 10px;
+}
+
+.team-view .team-view-header .popover {
+  max-width: none !important;
+}
+
+.team-view .team-view-header .popover.bottom-right .arrow:after {
+  border-bottom-color: #f7f7f7;
+  top: 2px;
+}
+
+.team-view .team-view-header .popover-content {
+  font-size: 14px;
+  padding-top: 6px;
+  min-width: 500px;
+}
+
+.team-view .team-view-header .popover-content input {
+  background: white;
+}
+
+.team-view .team-view-add-element .help-text {
+  font-size: 13px;
+  color: #ccc;
+  margin-top: 10px;
+}
+
+.team-view .co-table-header-row td {
+  padding-top: 20px !important;
+}
+
+.team-view .co-table-header-row:first-child td {
+  padding-top: 10px !important;
+}
\ No newline at end of file
diff --git a/static/js/pages/team-view.js b/static/js/pages/team-view.js
index ecbf59749..e8f184c96 100644
--- a/static/js/pages/team-view.js
+++ b/static/js/pages/team-view.js
@@ -3,7 +3,14 @@
    * Page to view the members of a team and add/remove them.
    */
   angular.module('quayPages').config(['pages', function(pages) {
-    pages.create('team-view', 'team-view.html', TeamViewCtrl);
+    pages.create('team-view', 'team-view.html', TeamViewCtrl, {
+      'newLayout': true,
+      'title': 'Team {{ teamname }}',
+      'description': 'Team {{ teamname }}'
+    }, ['layout'])
+
+    pages.create('team-view', 'old-team-view.html', TeamViewCtrl, {
+    }, ['old-layout']);
   }]);
 
   function TeamViewCtrl($rootScope, $scope, $timeout, Features, Restangular, ApiService, $routeParams) {
diff --git a/static/partials/old-team-view.html b/static/partials/old-team-view.html
new file mode 100644
index 000000000..2ff2cd21f
--- /dev/null
+++ b/static/partials/old-team-view.html
@@ -0,0 +1,128 @@
+<div class="resource-view" resource="orgResource" error-message="'No matching organization'">
+  <div class="team-view cor-container">
+    <div class="organization-header" organization="organization" team-name="teamname">
+      <div ng-show="canEditMembers" class="side-controls">
+        <div class="hidden-xs">
+        <button class="btn btn-success"
+                id="showAddMember"
+                data-title="Add Team Member"
+                data-content-template="/static/directives/team-view-add.html"
+                data-placement="bottom-right"
+                bs-popover="bs-popover">
+          <i class="fa fa-plus"></i>
+          Add Team Member
+        </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="resource-view" resource="membersResource" error-message="'No matching team found'">
+      <div class="description markdown-input" content="team.description" can-write="organization.is_admin"
+           content-changed="updateForDescription" field-title="'team description'"></div>
+
+      <div class="empty-message" ng-if="!members.length">
+        This team has no members
+      </div>
+
+      <div class="empty-message" ng-if="members.length && !(members | filter:search).length">
+        No matching team members found
+      </div>
+
+      <table class="member-listing" style="margin-top: -20px" ng-show="members.length">
+        <!-- Members -->
+        <tr ng-if="(members | filter:search | filter: filterFunction(false, false)).length">
+          <td colspan="2"><div class="section-header">Team Members</div></td>
+        </tr>
+
+        <tr ng-repeat="member in members | filter:search | filter: filterFunction(false, false) | orderBy: 'name'">
+          <td class="user entity">
+            <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
+          </td>
+          <td>
+            <span class="delete-ui" delete-title="'Remove ' + member.name  + ' from team'" button-title="'Remove'"
+                  perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
+          </td>
+        </tr>
+
+        <!-- Robots -->
+        <tr ng-if="(members | filter:search | filter: filterFunction(false, true)).length">
+          <td colspan="2"><div class="section-header">Robot Accounts</div></td>
+        </tr>
+
+        <tr ng-repeat="member in members | filter:search | filter: filterFunction(false, true) | orderBy: 'name'">
+          <td class="user entity">
+            <span class="entity-reference" entity="member" namespace="organization.name"></span>
+          </td>
+          <td>
+            <span class="delete-ui" delete-title="'Remove ' + member.name  + ' from team'" button-title="'Remove'"
+                  perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
+          </td>
+        </tr>
+
+        <!-- Invited -->
+        <tr ng-if="(members | filter:search | filter: filterFunction(true, false)).length">
+          <td colspan="2"><div class="section-header">Invited To Join</div></td>
+        </tr>
+
+        <tr ng-repeat="member in members | filter:search | filter: filterFunction(true, false) | orderBy: 'name'">
+          <td class="user entity">
+            <span ng-if="member.kind != 'invite'">
+              <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
+            </span>
+            <span class="invite-listing" ng-if="member.kind == 'invite'">
+              <span class="avatar" size="32" data="member.avatar"></span>
+              {{ member.email }}
+            </span>
+          </td>
+          <td>
+            <span class="delete-ui" delete-title="'Revoke invite to join team'" button-title="'Revoke'"
+                  perform-delete="revokeInvite(member)" ng-if="canEditMembers"></span>
+          </td>
+        </tr>
+      </table>
+
+      <div ng-show="canEditMembers">
+        <div ng-if-media="'(max-width: 767px)'">
+          <div ng-include="'/static/directives/team-view-add.html'"></div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- Modal message dialog -->
+<div class="modal fade" id="cannotChangeTeamModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Cannot change team</h4>
+      </div>
+      <div class="modal-body">
+        You do not have permission to change properties of this team.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+<!-- Modal message dialog -->
+<div class="modal fade" id="cannotChangeMembersModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Cannot change members</h4>
+      </div>
+      <div class="modal-body">
+        You do not have permission to change the members of this team.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
diff --git a/static/partials/team-view.html b/static/partials/team-view.html
index 2ff2cd21f..d53678fd7 100644
--- a/static/partials/team-view.html
+++ b/static/partials/team-view.html
@@ -1,82 +1,120 @@
-<div class="resource-view" resource="orgResource" error-message="'No matching organization'">
-  <div class="team-view cor-container">
-    <div class="organization-header" organization="organization" team-name="teamname">
-      <div ng-show="canEditMembers" class="side-controls">
-        <div class="hidden-xs">
-        <button class="btn btn-success"
-                id="showAddMember"
-                data-title="Add Team Member"
-                data-content-template="/static/directives/team-view-add.html"
-                data-placement="bottom-right"
-                bs-popover="bs-popover">
-          <i class="fa fa-plus"></i>
-          Add Team Member
-        </button>
-        </div>
-      </div>
+<div class="resource-view team-view" resources="[orgResource, membersResource]"
+     error-message="'No matching organization or team found'">
+  <div class="page-content">
+    <div class="cor-title">
+      <span class="cor-title-link">
+        <a class="back-link" href="/organization/{{ organization.name }}?tab=teams">
+          <span class="avatar" size="24" data="organization.avatar" style="margin-right: 4px"></span>
+          {{ organization.name }}
+        </a>
+      </span>
+      <span class="cor-title-content">
+        <span class="avatar" data="team.avatar" size="32"></span>
+        <span class="team-name">{{ teamname }}</span>
+      </span>
     </div>
 
-    <div class="resource-view" resource="membersResource" error-message="'No matching team found'">
-      <div class="description markdown-input" content="team.description" can-write="organization.is_admin"
-           content-changed="updateForDescription" field-title="'team description'"></div>
+    <div class="co-main-content-panel">
+      <div class="team-view-header">
+        <div ng-show="canEditMembers" class="side-controls">
+          <div class="hidden-xs">
+          <button class="btn btn-primary"
+                  id="showAddMember"
+                  data-title="Add Team Member"
+                  data-content-template="/static/directives/team-view-add.html"
+                  data-placement="bottom-right"
+                  bs-popover="bs-popover">
+            <i class="fa fa-plus"></i>
+            Add Team Member
+          </button>
+          </div>
+        </div>
 
-      <div class="empty-message" ng-if="!members.length">
-        This team has no members
+        <div class="description markdown-input" content="team.description"
+             can-write="organization.is_admin"
+             content-changed="updateForDescription"
+             field-title="'team description'"></div>
       </div>
 
-      <div class="empty-message" ng-if="members.length && !(members | filter:search).length">
-        No matching team members found
+      <div class="empty" ng-if="!members.length">
+        <div class="empty-primary-msg">This team has no members.</div>
+        <div class="empty-secondary-msg">
+          Click the "Add Team Member" button above to add or invite team members.
+        </div>
       </div>
 
-      <table class="member-listing" style="margin-top: -20px" ng-show="members.length">
-        <!-- Members -->
-        <tr ng-if="(members | filter:search | filter: filterFunction(false, false)).length">
-          <td colspan="2"><div class="section-header">Team Members</div></td>
+      <table class="co-table no-lines" ng-if="members.length">
+        <thead>
+          <tr>
+            <td>Team Member</td>
+            <td class="options-col"></td>
+          </tr>
+        </thead>
+
+        <!-- Team Members -->
+        <tr class="co-table-header-row"
+            ng-if="(members | filter: filterFunction(false, false)).length">
+          <td colspan="3"><i class="fa fa-user"></i> Team Members</td>
         </tr>
 
-        <tr ng-repeat="member in members | filter:search | filter: filterFunction(false, false) | orderBy: 'name'">
+        <tr class="indented-row"
+            ng-repeat="member in members | filter: filterFunction(false, false) | orderBy: 'name'">
           <td class="user entity">
-            <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
+            <span class="entity-reference" entity="member" namespace="organization.name"
+                  show-avatar="true" avatar-size="24"></span>
           </td>
           <td>
-            <span class="delete-ui" delete-title="'Remove ' + member.name  + ' from team'" button-title="'Remove'"
-                  perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
+            <span class="cor-options-menu" ng-if="canEditMembers">
+              <span class="cor-option" option-click="removeMember(member.name)">
+                <i class="fa fa-times"></i> Remove {{ member.name }}
+              </span>
+            </span>
           </td>
         </tr>
 
-        <!-- Robots -->
-        <tr ng-if="(members | filter:search | filter: filterFunction(false, true)).length">
-          <td colspan="2"><div class="section-header">Robot Accounts</div></td>
+        <!-- Robot Accounts -->
+        <tr class="co-table-header-row"
+            ng-if="(members | filter: filterFunction(false, true)).length">
+          <td colspan="3"><i class="fa fa-wrench"></i> Robot Accounts</td>
         </tr>
 
-        <tr ng-repeat="member in members | filter:search | filter: filterFunction(false, true) | orderBy: 'name'">
+        <tr class="indented-row"
+            ng-repeat="member in members | filter: filterFunction(false, true) | orderBy: 'name'">
           <td class="user entity">
             <span class="entity-reference" entity="member" namespace="organization.name"></span>
           </td>
           <td>
-            <span class="delete-ui" delete-title="'Remove ' + member.name  + ' from team'" button-title="'Remove'"
-                  perform-delete="removeMember(member.name)" ng-if="canEditMembers"></span>
+            <span class="cor-options-menu" ng-if="canEditMembers">
+              <span class="cor-option" option-click="removeMember(member.name)">
+                <i class="fa fa-times"></i> Remove {{ member.name }}
+              </span>
+            </span>
           </td>
         </tr>
 
-        <!-- Invited -->
-        <tr ng-if="(members | filter:search | filter: filterFunction(true, false)).length">
-          <td colspan="2"><div class="section-header">Invited To Join</div></td>
+        <!-- Invitations -->
+        <tr class="co-table-header-row"
+            ng-if="(members | filter: filterFunction(true, false)).length">
+          <td colspan="3"><i class="fa ci-invite"></i> Invited to Join</td>
         </tr>
 
-        <tr ng-repeat="member in members | filter:search | filter: filterFunction(true, false) | orderBy: 'name'">
+        <tr class="indented-row"
+            ng-repeat="member in members | filter: filterFunction(true, false) | orderBy: 'name'">
           <td class="user entity">
             <span ng-if="member.kind != 'invite'">
-              <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="32"></span>
+              <span class="entity-reference" entity="member" namespace="organization.name" show-avatar="true" avatar-size="24"></span>
             </span>
             <span class="invite-listing" ng-if="member.kind == 'invite'">
-              <span class="avatar" size="32" data="member.avatar"></span>
+              <span class="avatar" size="24" data="member.avatar" style="margin-right: 6px;"></span>
               {{ member.email }}
             </span>
           </td>
           <td>
-            <span class="delete-ui" delete-title="'Revoke invite to join team'" button-title="'Revoke'"
-                  perform-delete="revokeInvite(member)" ng-if="canEditMembers"></span>
+            <span class="cor-options-menu" ng-if="canEditMembers">
+              <span class="cor-option" option-click="revokeInvite(member)">
+                <i class="fa fa-times"></i> Revoke invite
+              </span>
+            </span>
           </td>
         </tr>
       </table>