diff --git a/app/assets/stylesheets/access_permissions/access_modal.scss b/app/assets/stylesheets/access_permissions/access_modal.scss
index e06c73fa7..cc859429a 100644
--- a/app/assets/stylesheets/access_permissions/access_modal.scss
+++ b/app/assets/stylesheets/access_permissions/access_modal.scss
@@ -1,12 +1,69 @@
 #user_assignments_modal {
   .modal-body {
     max-height: 400px;
+    min-height: 250px;
     overflow: auto;
+    padding-top: 0;
+  }
+
+  .member-item {
+    border-bottom: 1px solid $modal-header-border-color;
+
+    margin: 0 .5em;
+    padding: .5em;
+  }
+
+  .user-assignment-role .dropdown-toggle,
+  .user-assignment-remove .btn {
+    border-width: 0;
+  }
+
+  .new-member-item .user-assignment-role .dropdown-toggle {
+    border-width: 1px;
+    border-color: $color-volcano;
+    width: 200px;
+  }
+
+  .member-item,
+  .user-assignment-info,
+  .user-assignment-controls {
+    align-items: center;
+    display: flex;
+  }
+
+  .user-assignment-controls {
+    margin-left: auto;
+  }
+
+  .global-avatar-container {
+    margin-right: 1em;
+  }
+
+  .user-assignment-remove {
+    margin-left: 1em;
+  }
+
+  a {
+    color: $color-volcano;
+  }
+
+  .sci-checkbox-container {
+    margin-right: 1em;
   }
 
   .sci-input-container {
+    margin-top: 1em;
+
     .fa-search {
       color: $color-alto;
     }
   }
+
+  .user-assignments-description {
+    margin: 1em .5em;
+  }
+
+  hr {
+    margin: 1em 0;
+  }
 }
diff --git a/app/assets/stylesheets/access_permissions/member.scss b/app/assets/stylesheets/access_permissions/member.scss
deleted file mode 100644
index 379cc9b5b..000000000
--- a/app/assets/stylesheets/access_permissions/member.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "constants";
-
-.member-item {
-  border-bottom: .1rem solid $btn-default-border;
-  margin: 10px 0;
-  padding: 10px;
-
-  &:last-child {
-    border: 0;
-  }
-}
diff --git a/app/views/access_permissions/experiments/modals/_edit_modal.html.erb b/app/views/access_permissions/experiments/modals/_edit_modal.html.erb
index 84758c46f..fdd6c7f90 100644
--- a/app/views/access_permissions/experiments/modals/_edit_modal.html.erb
+++ b/app/views/access_permissions/experiments/modals/_edit_modal.html.erb
@@ -8,7 +8,7 @@
         <h4 class="modal-title"><%= t '.title', resource_name: experiment.name %></h4>
       </div>
       <div class="modal-body">
-        <p>
+        <p class="user-assignments-description">
           <%= t '.description' %>
         </p>
         <hr />
diff --git a/app/views/access_permissions/my_modules/modals/_edit_modal.html.erb b/app/views/access_permissions/my_modules/modals/_edit_modal.html.erb
index 6f0a5777c..d85e73e7f 100644
--- a/app/views/access_permissions/my_modules/modals/_edit_modal.html.erb
+++ b/app/views/access_permissions/my_modules/modals/_edit_modal.html.erb
@@ -8,7 +8,7 @@
         <h4 class="modal-title"><%= t '.title', resource_name: my_module.name %></h4>
       </div>
       <div class="modal-body">
-        <p>
+        <p class="user-assignments-description">
           <%= t '.description' %>
         </p>
         <hr />
diff --git a/app/views/access_permissions/partials/_experiment_member_field.html.erb b/app/views/access_permissions/partials/_experiment_member_field.html.erb
index 1a6cb5a7a..fcbadc50a 100644
--- a/app/views/access_permissions/partials/_experiment_member_field.html.erb
+++ b/app/views/access_permissions/partials/_experiment_member_field.html.erb
@@ -7,24 +7,21 @@
 
 <%= form_with(model: experiment_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form' } }) do |f| %>
   <%= f.hidden_field :user_id, value: f.object.user.id %>
-  <div class="col-xs-1">
-      <span class="global-avatar-container">
-        <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
-      </span>
-  </div>
-  <div class="col-xs-6">
-    <span><%= current_assignee_name(user) %></span>
-    <br>
-    <small class="text-muted"><%= user_assignment_resource_role_name(experiment_member, user, experiment) %></small>
+  <div class="user-assignment-info">
+    <div class="global-avatar-container">
+      <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
+    </div>
+    <div>
+      <%= current_assignee_name(user) %>
+      <br>
+      <small class="text-muted"><%= user_assignment_resource_role_name(experiment_member, user, experiment) %></small>
+    </div>
   </div>
   <% unless user == current_user %>
-    <div class="col-xs-5">
-      <%= f.select :user_role_id,
-                   options_for_select(user_roles_collection, selected: f.object.user_role&.id),
-                   {},
-                   class: 'form-control selectpicker',
-                   title: t('user_assignment.change_experiment_role'),
-                   data: { 'selected-text-format' => 'static' }  %>
+    <div class="user-assignment-controls">
+      <div class="user-assignment-role">
+        <%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_experiment_role'), data: { 'selected-text-format' => 'static' } %>
+      </div>
     </div>
   <% end %>
 <% end %>
diff --git a/app/views/access_permissions/partials/_my_module_member_field.html.erb b/app/views/access_permissions/partials/_my_module_member_field.html.erb
index d8f79367e..b40473c43 100644
--- a/app/views/access_permissions/partials/_my_module_member_field.html.erb
+++ b/app/views/access_permissions/partials/_my_module_member_field.html.erb
@@ -7,24 +7,21 @@
 
 <%= form_with(model: my_module_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form' } }) do |f| %>
   <%= f.hidden_field :user_id, value: f.object.user.id %>
-  <div class="col-xs-1">
-      <span class="global-avatar-container">
-        <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
-      </span>
-  </div>
-  <div class="col-xs-6">
-    <span><%= current_assignee_name(user) %></span>
-    <br>
-    <small class="text-muted"><%= user_assignment_resource_role_name(my_module_member, user, my_module) %></small>
+  <div class="user-assignment-info">
+    <div class="global-avatar-container">
+      <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
+    </div>
+    <div>
+      <%= current_assignee_name(user) %>
+      <br>
+      <small class="text-muted"><%= user_assignment_resource_role_name(my_module_member, user, my_module) %></small>
+    </div>
   </div>
   <% unless user == current_user %>
-    <div class="col-xs-5">
-      <%= f.select :user_role_id,
-                   options_for_select(user_roles_collection, selected: f.object.user_role&.id),
-                   {},
-                   class: 'form-control selectpicker',
-                   title: t('user_assignment.change_my_module_role'),
-                   data: { 'selected-text-format' => 'static' } %>
+    <div class="user-assignment-controls">
+      <div class="user-assignment-role">
+        <%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_my_module_role'), data: { 'selected-text-format' => 'static' } %>
+      </div>
     </div>
   <% end %>
 <% end %>
diff --git a/app/views/access_permissions/partials/_project_member_field.html.erb b/app/views/access_permissions/partials/_project_member_field.html.erb
index b7360bb23..a27baf878 100644
--- a/app/views/access_permissions/partials/_project_member_field.html.erb
+++ b/app/views/access_permissions/partials/_project_member_field.html.erb
@@ -7,30 +7,28 @@
 
 <%= form_with(model: project_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form', object_type: :project } }) do |f| %>
   <%= f.hidden_field :user_id, value: f.object.user.id %>
-    <div class="col-xs-2">
-      <span class="global-avatar-container">
+    <div class="user-assignment-info">
+      <div class="global-avatar-container">
         <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
-      </span>
-    </div>
-    <div class="col-xs-3">
-      <span><%= current_assignee_name(user) %></span>
-      <br>
-      <small class="text-muted"><%= user_assignment_resource_role_name(project_member, user, project) %></small>
+      </div>
+      <div>
+        <%= current_assignee_name(user) %>
+        <br>
+        <small class="text-muted"><%= user_assignment_resource_role_name(project_member, user, project) %></small>
+      </div>
     </div>
     <% unless user == current_user %>
-      <div class="col-xs-7">
-        <div class="row">
-          <div class="col-xs-7">
-            <%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_project_role'), data: { 'selected-text-format' => 'static' } %>
-          </div>
-          <div class="col-xs-5">
-            <% unless project_member.last_project_owner? %>
-              <%= link_to access_permissions_project_path(project, user_id: user), remote: true, method: :delete, class: 'btn btn-link', data: { action: 'remote-destroy', target: "##{item_id}" } do %>
-                <span class="fas fa-times"></span>
-                <%= t 'general.remove' %>
-              <% end %>
+      <div class="user-assignment-controls">
+        <div class="user-assignment-role">
+          <%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_project_role'), data: { 'selected-text-format' => 'static' } %>
+        </div>
+        <div class="user-assignment-remove">
+          <% unless project_member.last_project_owner? %>
+            <%= link_to access_permissions_project_path(project, user_id: user), remote: true, method: :delete, class: 'btn btn-secondary', data: { action: 'remote-destroy', target: "##{item_id}" } do %>
+              <span class="fas fa-times"></span>
+              <%= t 'general.remove' %>
             <% end %>
-          </div>
+          <% end %>
         </div>
       </div>
     <% end %>
diff --git a/app/views/access_permissions/partials/_user_assignment_field.html.erb b/app/views/access_permissions/partials/_user_assignment_field.html.erb
index be64f197d..4b5370df1 100644
--- a/app/views/access_permissions/partials/_user_assignment_field.html.erb
+++ b/app/views/access_permissions/partials/_user_assignment_field.html.erb
@@ -6,31 +6,32 @@
   id = dom_id(user, :new_project_member)
 %>
 
-<div class="row member-item" data-filter-item="<%= user.full_name %>">
+<div class="row member-item new-member-item" data-filter-item="<%= user.full_name %>">
   <%= f.hidden_field :user_id, value: user.id, name:"access_permissions_new_user_project_form[resource_members][#{user.id}][user_id]"  %>
-  <div class="col-xs-1 checkbox text-center">
-    <label>
+  <div class="user-assignment-info">
+    <div class="sci-checkbox-container">
       <%= f.check_box :assign,
-                      name: "access_permissions_new_user_project_form[resource_members][#{user.id}][assign]",
-                      data: { action: 'toggle-visibility', target: id}
-      %>
-    </label>
-  </div>
-  <div class="col-xs-1">
-    <span class="global-avatar-container">
+                        name: "access_permissions_new_user_project_form[resource_members][#{user.id}][assign]",
+                        data: { action: 'toggle-visibility', target: id },
+                        class: "sci-checkbox"
+        %>
+      <span class="sci-checkbox-label"></span>
+    </div>
+    <div class="global-avatar-container">
       <%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
-    </span>
+    </div>
+    <div>
+      <%= current_assignee_name(user) %>
+    </div>
   </div>
-  <div class="col-xs-6">
-    <span><%= current_assignee_name(user) %></span>
-  </div>
-
-  <div class="col-xs-4 form-group hidden" id="<%= id %>">
-    <%= f.select :user_role_id,
-                 options_for_select(user_roles_collection),
-                 {},
-                 name: "access_permissions_new_user_project_form[resource_members][#{user.id}][user_role_id]",
-                 class: 'form-control selectpicker pull-right',
-                 title: t('user_assignment.select_role')  %>
+  <div class="user-assignment-controls">
+    <div class="user-assignment-role hidden" id="<%= id %>">
+      <%= f.select :user_role_id,
+                options_for_select(user_roles_collection),
+                {},
+                name: "access_permissions_new_user_project_form[resource_members][#{user.id}][user_role_id]",
+                class: 'form-control selectpicker pull-right',
+                title: t('user_assignment.select_role')  %>
+    </div>
   </div>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 2df2df328..a79294a2c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2515,7 +2515,7 @@ en:
       failure: "Something went wrong"
     partials:
       edit_assignments_content:
-        title: "Manage access for to %{resource_name}"
+        title: "Manage access for %{resource_name}"
         new_resource_assignments: "Grant new access to %{resource}"
       new_assignments_form:
         title: "Select members"