diff --git a/app/scripts/controllers/membership.js b/app/scripts/controllers/membership.js
index 663271d36c..c051b7f219 100644
--- a/app/scripts/controllers/membership.js
+++ b/app/scripts/controllers/membership.js
@@ -70,6 +70,24 @@ angular
         $scope.newBinding.newRole = null;
       };
 
+      var refreshServiceAccountsList = function(ctx) {
+        DataService
+          .list('serviceaccounts', ctx)
+          .then(function(resp) {
+            var serviceAccounts = _.keys(resp.by('metadata.name')).sort();
+            angular.extend($scope, {
+              serviceAccounts: serviceAccounts,
+              refreshServiceAccounts: function(search) {
+                if(search && !_.includes($scope.serviceAccounts, search)) {
+                  $scope.serviceAccounts = [search].concat(serviceAccounts);
+                } else {
+                  $scope.serviceAccounts = serviceAccounts;
+                }
+              }
+            });
+          });
+      };
+
       var refreshRoleBindingList = function(toUpdateOnError) {
         DataService
           .list('rolebindings', requestContext, null , {
@@ -159,6 +177,7 @@ angular
         },
         selectTab: function(selected) {
           $scope.newBinding.kind = selected;
+          $scope.newBinding.name = '';
         }
       });
 
@@ -219,15 +238,18 @@ angular
           $scope.user = resp;
         });
 
-
       DataService
         .list('projects', {})
         .then(function(resp) {
-          var projects = _.map(resp.by('metadata.name'), function(project) {
-            return project.metadata.name;
-          });
+          var projects = _.keys(resp.by('metadata.name')).sort();
           angular.extend($scope, {
             projects: projects,
+            selectProject: function(projectName) {
+              $scope.newBinding.name = '';
+              refreshServiceAccountsList({
+                namespace: projectName
+              });
+            },
             refreshProjects: function(search) {
               if(search && !_.includes($scope.projects, search)) {
                 $scope.projects = [search].concat(projects);
@@ -243,6 +265,7 @@ angular
         .then(_.spread(function(project, context) {
           requestContext = context;
           refreshRoleBindingList();
+          refreshServiceAccountsList(requestContext);
           angular.extend($scope, {
             project: project,
             subjectKinds: subjectKinds,
@@ -364,5 +387,6 @@ angular
                 }
               });
             });
+
         }));
     });
diff --git a/app/styles/_membership.less b/app/styles/_membership.less
index 2e98ff40bb..dc4838074b 100644
--- a/app/styles/_membership.less
+++ b/app/styles/_membership.less
@@ -41,9 +41,8 @@
         min-width: 50%;
       }
       .word-break-all;
-      min-width: 225px;
-      max-width: 30%;
-      padding: 0 5px 10px 0;
+      width: 100%;
+      padding: 0 0px 10px 0;
       input {
         max-width: 150px;
       }
@@ -71,7 +70,6 @@
       width: 150px;
     }
     .select-role {
-      width: 150px;
       small {
         color: #999;
       }
@@ -124,7 +122,9 @@
         }
       }
       .col-name {
-        width: 30%;
+        min-width: 225px;
+        max-width: 30%;
+        padding: 0 5px 10px 0;
         input {
           max-width: 175px;
         }
@@ -134,6 +134,9 @@
           display: block;
         }
       }
+      .select-role {
+        width: 150px;
+      }
     }
   }
 }
diff --git a/app/views/membership.html b/app/views/membership.html
index 32bfae2266..72e4e13489 100644
--- a/app/views/membership.html
+++ b/app/views/membership.html
@@ -167,13 +167,16 @@ <h3>
                   <div
                     ng-if="mode.edit"
                     class="item-row form-new-role" row mobile="column">
-                    <div class="col-name" column>
+                    <div class="col-name pad-bottom-none" row mobile="column" tablet="column">
                       <label
                         ng-attr-for="newBindingName"
                         class="sr-only">
                         Name
                       </label>
+
+                      <!-- name entry field for everything but service accounts -->
                       <input
+                        ng-if="newBinding.kind !== 'ServiceAccount'"
                         type="text"
                         class="form-control input-name"
                         placeholder="Name"
@@ -181,25 +184,54 @@ <h3>
                         autocorrect="off"
                         autocapitalize="off"
                         spellcheck="false">
+                      <!-- namespace entry/picker for service accounts -->
                       <div
                         ng-if="newBinding.kind === 'ServiceAccount'"
-                        class="service-account-namespace hidden-sm hidden-md hidden-lg"
+                        class="service-account-namespace"
                         aria-hidden="true">
                         <ui-select
                           ng-model="newBinding.namespace"
+                          on-select="selectProject($item, $model)"
                           theme="bootstrap"
                           search-enabled="true"
                           title="Select a project"
-                          class="select-role">
+                          class="select-role pad-bottom-sm">
                           <ui-select-match
                             placeholder="Select a project">
-                            <span ng-bind="newBinding.namespace"></span>
+                            <span>{{newBinding.namespace}}</span>
                           </ui-select-match>
                           <ui-select-choices
                             repeat="projectName in projects | filter: $select.search"
                             refresh="refreshProjects($select.search)"
                             refresh-delay="200">
-                            <div>{{projectName}}</div>
+                            <div ng-bind-html="projectName | highlight : $select.search"></div>
+                          </ui-select-choices>
+                        </ui-select>
+                      </div>
+
+                      <span
+                        ng-if="newBinding.kind === 'ServiceAccount'"
+                        class="mar-left-md mar-right-md hidden-xs">/</span>
+
+                      <!-- name entry/picker for service accounts -->
+                      <div
+                        ng-if="newBinding.kind === 'ServiceAccount'"
+                        class="service-account-name">
+                        <ui-select
+                          ng-model="newBinding.name"
+                          theme="bootstrap"
+                          search-enabled="true"
+                          title="Select a service account"
+                          class="select-role">
+                          <ui-select-match
+                            placeholder="Service account">
+                            <span>{{newBinding.name}}</span>
+                          </ui-select-match>
+                          <ui-select-choices
+                            repeat="saName in serviceAccounts | filter: $select.search"
+                            refresh="refreshServiceAccounts($select.search)"
+                            refresh-delay="200">
+                            <div ng-bind-html="saName | highlight : $select.search"></div>
                           </ui-select-choices>
                         </ui-select>
                       </div>
@@ -207,31 +239,7 @@ <h3>
                     <div
                       class="action-set"
                       flex row tablet="column" mobile="column">
-                      <div
-                        class="col-roles"
-                        row tablet="column" flex wrap axis="start">
-                        <div
-                          ng-if="newBinding.kind === 'ServiceAccount'"
-                          class="service-account-namespace hidden-xs">
-                          <ui-select
-                            ng-model="newBinding.namespace"
-                            theme="bootstrap"
-                            search-enabled="true"
-                            title="Select a project"
-                            class="select-project">
-                            <ui-select-match
-                              placeholder="Select a project">
-                              <span ng-bind="newBinding.namespace"></span>
-                            </ui-select-match>
-                            <ui-select-choices
-                              repeat="projectName in projects | filter: $select.search"
-                              refresh="refreshProjects($select.search)"
-                              refresh-delay="200">
-                              <div>{{projectName}}</div>
-                            </ui-select-choices>
-                          </ui-select>
-                        </div>
-                      </div>
+                      <div class="col-roles" flex row tablet="column">&nbsp;</div>
                       <div class="col-add-role">
                         <div ng-show="mode.edit" row>
                           <ui-select
diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
index fd76234d80..12de25cc1a 100644
--- a/dist/scripts/scripts.js
+++ b/dist/scripts/scripts.js
@@ -5343,6 +5343,16 @@ details:e
 }, v = function() {
 d.disableAddForm = !1, d.newBinding.name = "", d.newBinding.namespace = o, d.newBinding.newRole = null;
 }, w = function(a) {
+i.list("serviceaccounts", a).then(function(a) {
+var b = _.keys(a.by("metadata.name")).sort();
+angular.extend(d, {
+serviceAccounts:b,
+refreshServiceAccounts:function(a) {
+a && !_.includes(d.serviceAccounts, a) ? d.serviceAccounts = [ a ].concat(b) :d.serviceAccounts = b;
+}
+});
+});
+}, x = function(a) {
 i.list("rolebindings", n, null, {
 errorNotification:!1
 }).then(function(a) {
@@ -5354,9 +5364,9 @@ subjectKindsForUI:k.mapRolebindingsForUI(a.by("metadata.name"), s)
 }, function() {
 a && (d.roleBindings[a.metadata.name] = a, d.subjectKindsForUI = k.mapRolebindingsForUI(d.roleBindings, s)), v();
 });
-}, x = function(b, c) {
+}, y = function(b, c) {
 d.disableAddForm = !0, l.create(b, c, o, n).then(function() {
-w(), u("rolebindingCreate", "success", t.update.subject.success({
+x(), u("rolebindingCreate", "success", t.update.subject.success({
 roleName:b.metadata.name,
 subjectName:c.name
 }));
@@ -5368,9 +5378,9 @@ subjectName:c.name
 httpErr:a("getErrorDetails")(d)
 }));
 });
-}, y = function(b, c, e) {
+}, z = function(b, c, e) {
 d.disableAddForm = !0, l.addSubject(b, c, e, n).then(function() {
-w(), u("rolebindingUpdate", "success", t.update.subject.success({
+x(), u("rolebindingUpdate", "success", t.update.subject.success({
 roleName:b.roleRef.name,
 subjectName:c.name
 }));
@@ -5382,16 +5392,16 @@ subjectName:c.name
 httpErr:a("getErrorDetails")(d)
 }));
 });
-}, z = {};
-c.tab && (z[c.tab] = !0);
-var A = k.getSubjectKinds();
+}, A = {};
+c.tab && (A[c.tab] = !0);
+var B = k.getSubjectKinds();
 angular.extend(d, {
-selectedTab:z,
+selectedTab:A,
 projectName:o,
 alerts:{},
 forms:{},
 emptyMessage:"Loading...",
-subjectKinds:A,
+subjectKinds:B,
 newBinding:{
 role:"",
 kind:c.tab || "User",
@@ -5404,7 +5414,7 @@ mode:{
 edit:!1
 },
 selectTab:function(a) {
-d.newBinding.kind = a;
+d.newBinding.kind = a, d.newBinding.name = "";
 }
 }), angular.extend(d, {
 excludeExistingRoles:function(a) {
@@ -5424,7 +5434,7 @@ return a ? e + (q(a, "description") || b) :b;
 }
 }
 });
-var B = function(a, b, c, e) {
+var C = function(a, b, c, e) {
 var f = {
 alerts:{},
 detailsMarkup:t.remove.areYouSure.html.subject({
@@ -5446,22 +5456,25 @@ roleName:c
 g.withUser().then(function(a) {
 d.user = a;
 }), i.list("projects", {}).then(function(a) {
-var b = _.map(a.by("metadata.name"), function(a) {
-return a.metadata.name;
-});
+var b = _.keys(a.by("metadata.name")).sort();
 angular.extend(d, {
 projects:b,
+selectProject:function(a) {
+d.newBinding.name = "", w({
+namespace:a
+});
+},
 refreshProjects:function(a) {
 a && !_.includes(d.projects, a) ? d.projects = [ a ].concat(b) :d.projects = b;
 }
 });
 }), j.get(c.project).then(_.spread(function(c, e) {
-n = e, w(), angular.extend(d, {
+n = e, x(), w(n), angular.extend(d, {
 project:c,
-subjectKinds:A,
+subjectKinds:B,
 canUpdateRolebindings:r("rolebindings", "update", o),
 confirmRemove:function(c, e, g) {
-var i = null, j = B(c, e, g, d.user.metadata.name);
+var i = null, j = C(c, e, g, d.user.metadata.name);
 _.isEqual(c, d.user.metadata.name) && k.isLastRole(d.user.metadata.name, d.roleBindings) && (i = !0), f.open({
 animation:!0,
 templateUrl:"views/modals/confirm.html",
@@ -5474,7 +5487,7 @@ return j;
 }).result.then(function() {
 l.removeSubject(c, g, d.roleBindings, n).then(function(a) {
 i ? b.url("./") :(h.getProjectRules(o, !0).then(function() {
-w(a[0]);
+x(a[0]);
 var b = r("rolebindings", "update", o);
 angular.extend(d, {
 canUpdateRolebindings:b,
@@ -5511,7 +5524,7 @@ name:a
 }) ? u("rolebindingUpdate", "info", t.update.subject.exists({
 roleName:c.metadata.name,
 subjectName:a
-})) :g ? y(g, f, e) :x(c, f, e);
+})) :g ? z(g, f, e) :y(c, f, e);
 }
 }), m.listAllRoles(n, {
 errorNotification:!1
@@ -5524,7 +5537,7 @@ name:a
 }
 });
 };
-w(), angular.extend(d, {
+x(), angular.extend(d, {
 toggle:{
 roles:!1
 },
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index d27f70c0fb..17cde357bd 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -10328,35 +10328,38 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<ng-form class=\"new-binding\" novalidate name=\"forms.newBindingForm\" ng-if=\"newBinding\">\n" +
     "<div ng-if=\"mode.edit\" class=\"item-row form-new-role\" row mobile=\"column\">\n" +
-    "<div class=\"col-name\" column>\n" +
+    "<div class=\"col-name pad-bottom-none\" row mobile=\"column\" tablet=\"column\">\n" +
     "<label ng-attr-for=\"newBindingName\" class=\"sr-only\">\n" +
     "Name\n" +
     "</label>\n" +
-    "<input type=\"text\" class=\"form-control input-name\" placeholder=\"Name\" ng-model=\"newBinding.name\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
-    "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace hidden-sm hidden-md hidden-lg\" aria-hidden=\"true\">\n" +
-    "<ui-select ng-model=\"newBinding.namespace\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role\">\n" +
+    "\n" +
+    "<input ng-if=\"newBinding.kind !== 'ServiceAccount'\" type=\"text\" class=\"form-control input-name\" placeholder=\"Name\" ng-model=\"newBinding.name\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\">\n" +
+    "\n" +
+    "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace\" aria-hidden=\"true\">\n" +
+    "<ui-select ng-model=\"newBinding.namespace\" on-select=\"selectProject($item, $model)\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role pad-bottom-sm\">\n" +
     "<ui-select-match placeholder=\"Select a project\">\n" +
-    "<span ng-bind=\"newBinding.namespace\"></span>\n" +
+    "<span>{{newBinding.namespace}}</span>\n" +
     "</ui-select-match>\n" +
     "<ui-select-choices repeat=\"projectName in projects | filter: $select.search\" refresh=\"refreshProjects($select.search)\" refresh-delay=\"200\">\n" +
-    "<div>{{projectName}}</div>\n" +
+    "<div ng-bind-html=\"projectName | highlight : $select.search\"></div>\n" +
     "</ui-select-choices>\n" +
     "</ui-select>\n" +
     "</div>\n" +
-    "</div>\n" +
-    "<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
-    "<div class=\"col-roles\" row tablet=\"column\" flex wrap axis=\"start\">\n" +
-    "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace hidden-xs\">\n" +
-    "<ui-select ng-model=\"newBinding.namespace\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-project\">\n" +
-    "<ui-select-match placeholder=\"Select a project\">\n" +
-    "<span ng-bind=\"newBinding.namespace\"></span>\n" +
+    "<span ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"mar-left-md mar-right-md hidden-xs\">/</span>\n" +
+    "\n" +
+    "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-name\">\n" +
+    "<ui-select ng-model=\"newBinding.name\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a service account\" class=\"select-role\">\n" +
+    "<ui-select-match placeholder=\"Service account\">\n" +
+    "<span>{{newBinding.name}}</span>\n" +
     "</ui-select-match>\n" +
-    "<ui-select-choices repeat=\"projectName in projects | filter: $select.search\" refresh=\"refreshProjects($select.search)\" refresh-delay=\"200\">\n" +
-    "<div>{{projectName}}</div>\n" +
+    "<ui-select-choices repeat=\"saName in serviceAccounts | filter: $select.search\" refresh=\"refreshServiceAccounts($select.search)\" refresh-delay=\"200\">\n" +
+    "<div ng-bind-html=\"saName | highlight : $select.search\"></div>\n" +
     "</ui-select-choices>\n" +
     "</ui-select>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
+    "<div class=\"col-roles\" flex row tablet=\"column\">&nbsp;</div>\n" +
     "<div class=\"col-add-role\">\n" +
     "<div ng-show=\"mode.edit\" row>\n" +
     "<ui-select ng-if=\"filteredRoles.length\" ng-model=\"newBinding.newRole\" theme=\"bootstrap\" search-enabled=\"true\" title=\"new {{subjectKind.name}} role\" class=\"select-role\" flex>\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 31be2475fd..4a6394c299 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -5269,13 +5269,13 @@ a.subtle-link:active,a.subtle-link:focus,a.subtle-link:hover{color:#00659c;borde
 .membership .content-pane .col-heading h3,.membership .content-pane .item-row h3{margin:0}
 .membership .content-pane .item-row{padding:5px 10px 5px 5px;margin-bottom:20px}
 .membership .content-pane .col-heading{margin-bottom:20px}
-.membership .content-pane .col-name{word-break:break-all;word-break:break-word;overflow-wrap:break-word;min-width:225px;max-width:30%;padding:0 5px 10px 0}
+.membership .content-pane .col-name{word-break:break-all;word-break:break-word;overflow-wrap:break-word;width:100%;padding:0 0px 10px 0}
 .membership .content-pane .col-name.half-width{min-width:50%}
 .membership .content-pane .col-name input{max-width:150px}
 .membership .content-pane .col-name .new-project{margin-top:2px}
 .membership .content-pane .content-serviceaccount .form-new-role .col-roles{display:block}
 .membership .content-pane .input-name{width:150px;margin-bottom:5px}
-.membership .content-pane .select-project,.membership .content-pane .select-role{width:150px}
+.membership .content-pane .select-project{width:150px}
 .membership .content-pane .select-role small{color:#999}
 .membership .content-pane .select-role .active small{color:#c0e0f0}
 .membership .content-pane .col-add-role,.membership .content-pane .col-heading,.membership .content-pane .col-name,.membership .content-pane .col-roles,.membership .content-pane .item-row,.membership .content-pane [flex-collapse-fix],.membership .content-pane [flex]{flex-shrink:0;flex-basis:auto}
@@ -5284,8 +5284,9 @@ a.subtle-link:active,a.subtle-link:focus,a.subtle-link:hover{color:#00659c;borde
 .membership .content-pane .col-heading,.membership .content-pane .item-row{border-bottom:none;margin-bottom:none}
 .membership .content-pane .item-row.highlight-hover:hover{background-color:#fafafa}
 .membership .content-pane .col-heading .col-add-role a{display:block;padding-left:10px}
-.membership .content-pane .col-name{width:30%}
+.membership .content-pane .col-name{min-width:225px;max-width:30%;padding:0 5px 10px 0}
 .membership .content-pane .col-name input{max-width:175px}
+.membership .content-pane .select-role{width:150px}
 }
 .action-chip{margin:0 5px 2px 0;font-size:12px;display:flex;flex-direction:row}
 .action-chip .item{padding:.2em .6em .3em}