diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss
index 8dab34b9f..4dbbe43d2 100644
--- a/app/assets/stylesheets/config/_import.scss
+++ b/app/assets/stylesheets/config/_import.scss
@@ -43,11 +43,13 @@ $breakpoint-xs: 480px;
 $breakpoint-s: 640px;
 $breakpoint-m: 768px;
 $breakpoint-l: 1024px;
+$breakpoint-xl: 1280px;
 
 $breakpoints: (
   's': $breakpoint-s,
   'm': $breakpoint-m,
   'l': $breakpoint-l,
+  'xl': $breakpoint-xl,
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
diff --git a/app/javascript/shared/components/useMediaQuery.js b/app/javascript/shared/components/useMediaQuery.js
index 093e5d40b..ab3e60e1d 100644
--- a/app/javascript/shared/components/useMediaQuery.js
+++ b/app/javascript/shared/components/useMediaQuery.js
@@ -9,6 +9,7 @@ export const BREAKPOINTS = Object.freeze({
   Small: 640,
   Medium: 768,
   Large: 1024,
+  ExtraLarge: 1280,
 });
 
 /**
diff --git a/app/views/admin/users/_member_index.html.erb b/app/views/admin/users/_member_index.html.erb
index ab96ffdf0..f9a6fa9ac 100644
--- a/app/views/admin/users/_member_index.html.erb
+++ b/app/views/admin/users/_member_index.html.erb
@@ -1,47 +1,74 @@
-<div class="crayons-card overflow-admin-main-layout-padding p-4 m:p-7">
+<div class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-7">
   <header class="flex flex-col l:flex-row justify-content-between l:items-center ">
     <h1 class="crayons-title ml-2 m:ml-0">Members</h1>
     <%= render "admin/users/index/tabs" %>
   </header>
     <%= render "admin/users/index/controls" %>
 
-    <!-- Small screen data view start -->
-    <div class="block m:hidden fs-s">
-      <h2 class="member-data-heading fs-s py-2 -mx-3 px-3 color-base-60">Members</h2>
-      <ul class="list-none">
+    <!-- Responsive screen (breakpoints below XL) data view start -->
+    <div class="block xl:hidden fs-s">
+      <h2 class="member-data-heading fs-s py-2 -mx-4 px-6 color-base-60">Members</h2>
+      <ul class="list-none mx-2">
         <% @users.includes([:organization_memberships]).each do |user| %>
           <li class="py-4">
             <article>
-              <header class="flex">
-                <a href="<%= admin_user_path(user.id) %>">
-                  <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
-                </a>
-                <div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
-                  <%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>
+              <header class="flex items-center justify-between m:justify-start mb-2">
+                <div class="flex grow-1 mr-4 m:w-50 m:max-w-50">
+                  <a href="<%= admin_user_path(user.id) %>" class="mr-2">
+                    <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
+                  </a>
+                  <div class="flex flex-col">
+                    <h3 class="fs-base"><%= link_to user.name, admin_user_path(user) %></h3>
+                    <div class="flex">
+                      <span class="color-base-60">@<%= user.username %></span>
+                      <span class="hidden m:block">
+                         &nbsp;
+                        <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
+                          <%= cascading_high_level_roles(user) %>
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex justify-between items-center grow-1">
+                  <div class="hidden m:block">
+                    <% if user.suspended? %>
+                      <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
+                    <% elsif user.warned? %>
+                      <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
+                    <% elsif user.comment_suspended? %>
+                      <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
+                    <% elsif user.trusted? %>
+                      <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
+                    <% else %>
+                      <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
+                    <% end %>
+                  </div>
+                  <button type="button" class="c-btn c-btn--icon-alone ml-auto" aria-label="User actions: #{user.name}">
+                    <%= crayons_icon_tag("overflow-vertical", aria_hidden: true) %>
+                  </button>
                 </div>
               </header>
-              <div class="flex justify-between py-2">
+              <div class="flex justify-between mb-2 block m:hidden">
                 <div>
-                <% if user.suspended? %>
-                  <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
-                <% elsif user.warned? %>
-                  <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
-                <% elsif user.comment_suspended? %>
-                  <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
-                <% elsif user.trusted? %>
-                  <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
-                <% else %>
-                  <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
-                <% end %>
+                  <% if user.suspended? %>
+                    <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Suspended
+                  <% elsif user.warned? %>
+                    <span class="c-indicator mr-2 inline-block" style="--bg: #F59E0B"></span>Warned
+                  <% elsif user.comment_suspended? %>
+                    <span class="c-indicator mr-2 inline-block" style="--bg: #DC2626"></span>Comment suspended
+                  <% elsif user.trusted? %>
+                    <span class="c-indicator mr-2 inline-block" style="--bg: #059669"></span>Trusted
+                  <% else %>
+                    <span class="c-indicator mr-2 inline-block" style="--bg: #A3A3A3"></span>Good standing
+                  <% end %>
                 </div>
-                <div>
                 <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
                   <%= cascading_high_level_roles(user) %>
                 </span>
-                </div>
               </div>
               <div class="flex justify-between items-end">
-                <dl class="flex gap-2">
+                <dl class="flex gap-4">
                   <div>
                     <dt class="color-base-60 fw-normal">Last activity</dt>
                     <dd><%= format_last_activity_timestamp(user.last_activity) %></dd>
@@ -66,33 +93,34 @@
         <% end %>
       </ul>
     </div>
-    <!-- Small screen data view end -->
+    <!-- Responsive screen (breakpoints below XL) data view end -->
 
-    <!-- Large screen data view start -->
-    <table class="crayons-table hidden m:block" width="100%">
+    <!-- XL screen data view start -->
+    <table class="crayons-table hidden xl:block" width="100%">
       <thead>
         <tr>
-          <th scope="col">Member</th>
+          <th scope="col" class="normal-case">Member</th>
           <th scope="col">Status</th>
           <th scope="col">Last activity & Joined on</th>
           <th scope="col">Organizations</th>
+          <th scope="col" class="screen-reader-only">Actions</div>
         </tr>
       </thead>
       <tbody class="crayons-card">
         <% @users.includes([:organization_memberships]).each do |user| %>
         <tr>
           <td>
-          <div class="flex s:items-start flex-col s:flex-row">
-            <a href="<%= admin_user_path(user.id) %>">
-              <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
-            </a>
-            <div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
-              <%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>&nbsp;
-              <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
-                <%= cascading_high_level_roles(user) %>
-              </span>
+            <div class="flex s:items-start flex-col s:flex-row">
+              <a href="<%= admin_user_path(user.id) %>">
+                <img class="radius-full align-middle" src="<%= user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= user.name %>" />
+              </a>
+              <div class="pl-3 flex-1 fs-s"><h3 class="fs-base"><%= link_to user.name, admin_user_path(user), class: "color-base-80" %></h3>
+                <%= link_to "@#{user.username}", admin_user_path(user), class: "color-base-60" %>&nbsp;
+                <span class="c-indicator ml-2 crayons-hover-tooltip" data-tooltip="<%= cascading_high_level_roles(user) %>">
+                  <%= cascading_high_level_roles(user) %>
+                </span>
+              </div>
             </div>
-          </div>
           </td>
           <td>
             <% if user.suspended? %>
@@ -124,11 +152,16 @@
               -
             <% end %>
           </td>
+          <td>
+            <button type="button" class="c-btn c-btn--icon-alone ml-auto" aria-label="User actions: #{user.name}">
+              <%= crayons_icon_tag("overflow-vertical", aria_hidden: true) %>
+            </button>
+          </td>
         </tr>
         <% end %>
       </tbody>
     </table>
-    <!-- Large screen data view end -->
+    <!-- XL screen data view end -->
 
     <div class="flex justify-end">
       <%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
diff --git a/app/views/admin/users/index/_controls.html.erb b/app/views/admin/users/index/_controls.html.erb
index b18cd3bc9..cb20eae0b 100644
--- a/app/views/admin/users/index/_controls.html.erb
+++ b/app/views/admin/users/index/_controls.html.erb
@@ -3,7 +3,7 @@
 <% if FeatureFlag.enabled?(:member_index_view) %>
   <% if params[:controller] == "admin/users" %>
     <!-- Small screen layout -->
-    <%= form_with url: admin_users_path, method: :get, local: true, class: "l:hidden" do |f| %>
+    <%= form_with url: admin_users_path, method: :get, local: true, class: "m:hidden" do |f| %>
       <div class="flex justify-between my-3">
         <div>
           <button type="button" id="expand-search-btn" class="relative c-btn c-btn--icon-alone indicator-btn" aria-label="Expand search" aria-expanded="false" aria-controls="search-users">
@@ -28,7 +28,7 @@
     <% end %>
 
     <!-- Larger screen layout -->
-    <div class="hidden l:flex justify-between">
+    <div class="hidden m:flex justify-between">
       <%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col m:flex-row gap-3 m:items-center py-3" do |f| %>
         <div class="crayons-field flex-1 flex-row items-center gap-2 relative">
           <%= render "admin/users/index/search_field", f: f %>