diff --git a/lib/bones73k_web/live/user/registration.html.leex b/lib/bones73k_web/live/user/registration.html.leex
index 22416c1..e70560b 100644
--- a/lib/bones73k_web/live/user/registration.html.leex
+++ b/lib/bones73k_web/live/user/registration.html.leex
@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
+  <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
 
   <h2>
     <%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %>
diff --git a/lib/bones73k_web/live/user/reset_password.html.leex b/lib/bones73k_web/live/user/reset_password.html.leex
index 049d15a..2a9f963 100644
--- a/lib/bones73k_web/live/user/reset_password.html.leex
+++ b/lib/bones73k_web/live/user/reset_password.html.leex
@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
+  <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
 
   <h2>
     <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
diff --git a/lib/bones73k_web/live/user/settings.html.leex b/lib/bones73k_web/live/user/settings.html.leex
index 31b344d..2450570 100644
--- a/lib/bones73k_web/live/user/settings.html.leex
+++ b/lib/bones73k_web/live/user/settings.html.leex
@@ -1,9 +1,15 @@
-<h2 class="mb-3">
-  <%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
-  User Settings
-</h2>
+<div class="row justify-content-center">
+  <div class="col-11">
 
-<div class="row">
-  <%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>
-  <%= live_component @socket, Bones73kWeb.UserLive.Settings.Password, id: "password-#{@current_user.id}", current_user: @current_user %>
+    <h2 class="mb-3">
+      <%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
+      User Settings
+    </h2>
+
+    <div class="row justify-content-center justify-content-md-start">
+      <%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>
+      <%= live_component @socket, Bones73kWeb.UserLive.Settings.Password, id: "password-#{@current_user.id}", current_user: @current_user %>
+    </div>
+
+  </div>
 </div>
diff --git a/lib/bones73k_web/live/user/settings/email.html.leex b/lib/bones73k_web/live/user/settings/email.html.leex
index a3e773a..477059c 100644
--- a/lib/bones73k_web/live/user/settings/email.html.leex
+++ b/lib/bones73k_web/live/user/settings/email.html.leex
@@ -1,4 +1,4 @@
-<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4  mt-1">
+<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
 
   <h3>Change email</h3>
 
diff --git a/lib/bones73k_web/live/user/settings/password.html.leex b/lib/bones73k_web/live/user/settings/password.html.leex
index 9815074..cb9217b 100644
--- a/lib/bones73k_web/live/user/settings/password.html.leex
+++ b/lib/bones73k_web/live/user/settings/password.html.leex
@@ -1,4 +1,4 @@
-<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
+<div id="<%= @id %>" class="col-12 col-sm-10 col-md-6 col-lg-5 col-xl-4 col-xxl-3 mt-1">
 
   <h3>Change password</h3>
 
diff --git a/lib/bones73k_web/live/user_management/index.html.leex b/lib/bones73k_web/live/user_management/index.html.leex
index 31f390f..cb38f2d 100644
--- a/lib/bones73k_web/live/user_management/index.html.leex
+++ b/lib/bones73k_web/live/user_management/index.html.leex
@@ -22,20 +22,20 @@
 </h2>
 
 <%# filtering and new item creation %>
-<div class="row justify-content-between align-items-start align-items-sm-end mb-3">
+<div class="row justify-content-between align-items-start align-items-md-end mb-3">
 
-  <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
+  <div class="col-12 col-md-6 col-lg-4 col-xl-3">
   <%= live_patch to: Routes.user_management_index_path(@socket, :new, Enum.into(@query, [])),
-      class: "btn btn-primary mb-3 mb-sm-0" do %>
+      class: "btn btn-primary mb-3 mb-md-0" do %>
     <%= icon_div @socket, "bi-person-plus", [class: "icon baseline me-1"] %>
     New User
   <% end %>
   </div>
 
-  <div class="col-12 d-block d-sm-none">
+  <div class="col-12 col-sm-5 d-block d-md-none">
   <%= form_for :sort, "#", [phx_change: "sort-by-change"], fn srt -> %>
     <%= label srt, :sort_by, class: "visually-hidden" %>
-    <div class="input-group inner-addon left-addon mb-3 mb-sm-0">
+    <div class="input-group inner-addon left-addon mb-3 mb-md-0">
       <%= icon_div @socket, "bi-arrow-down-up", [class: "icon is-left text-muted fs-5", style: "z-index:1001;"], [style: "padding: 1px;"] %>
       <%= Phoenix.HTML.Form.select srt, :sort_by, ["Email": "email", "Role": "role", "Created at": "inserted_at"], value: @query.sort_by, class: "form-select" %>
       <button class="btn btn-primary" type="button" aria-label="Change sort order" phx-click="sort-order-change">
@@ -45,7 +45,7 @@
   <% end %>
   </div>
 
-  <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
+  <div class="col-12 col-sm-7 col-md-6 col-lg-4 col-xl-3">
   <%= form_for :filter, "#", [phx_change: "filter-change"], fn flt -> %>
     <%= label flt, :filter, class: "visually-hidden" %>
     <div class="inner-addon left-addon right-addon">
@@ -66,9 +66,9 @@
 </div>
 
 <%# mobile data cards %>
-<div class="d-block d-sm-none">
-
+<div class="d-block d-md-none">
 
+  <div class="row justify-content-center">
   <%= if !@page do %>
     <div class="card">
       <div class="spinner-border text-primary my-5 mx-auto" role="status">
@@ -77,24 +77,27 @@
     </div>
   <% else %>
     <%= for user <- @page.entries do %>
+      <div class="col-12 col-sm-10">
       <div class="card mb-3">
         <div class="card-body">
           <dl class="row">
-            <dt class="col-sm-3">Email</dt>
+            <dt class="col-sm-3 text-sm-end">Email</dt>
             <dd class="col-sm-9"><%= user.email %></dd>
-            <dt class="col-sm-3">Role</dt>
+            <dt class="col-sm-3 text-sm-end">Role</dt>
             <dd class="col-sm-9"><%= user.role |> Atom.to_string() |> String.capitalize() %></dd>
-            <dt class="col-sm-3">Created at</dt>
+            <dt class="col-sm-3 text-sm-end">Created at</dt>
             <dd class="col-sm-9"><%= dt_out(user.inserted_at) %></dd>
-            <dt class="col-sm-3">
-              Confirmed?
-              <span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
-              <input type="checkbox" class="form-check-input ms-1" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
+            <dt class="d-inline d-sm-block col-auto text-sm-end">
+              <span>Confirmed?</span>
             </dt>
+            <dd class="d-inline d-sm-block col-auto">
+              <span class="visually-hidden"><%= user.confirmed_at && "Yes" || "No" %></span>
+              <input type="checkbox" class="form-check-input" aria-hidden="true" <%= user.confirmed_at && "checked" || "" %>>
+            </dd>
           </dl>
 
           <%= if Roles.can?(@current_user, user, :edit) do %>
-            <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-outline-primary btn-sm text-nowrap" do %>
+            <%= live_patch to: Routes.user_management_index_path(@socket, :edit, user.id, Enum.into(@query, [])), class: "btn btn-primary btn-sm text-nowrap" do %>
               <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
               Edit
             <% end %>
@@ -109,13 +112,15 @@
 
         </div>
       </div>
+      </div>
     <% end %>
   <% end %>
+  </div>
 
 </div>
 
 <%# non-mobile main data table %>
-<div class="table-responsive d-none d-sm-block">
+<div class="table-responsive d-none d-md-block">
   <table class="table">
 
     <thead>
diff --git a/lib/bones73k_web/templates/layout/app.html.eex b/lib/bones73k_web/templates/layout/app.html.eex
index 032b065..7bb9fee 100644
--- a/lib/bones73k_web/templates/layout/app.html.eex
+++ b/lib/bones73k_web/templates/layout/app.html.eex
@@ -2,7 +2,7 @@
 
   <%# phoenix flash alerts: %>
   <div class="row justify-content-center">
-    <div class="col-md-12 col-lg-10 col-xl-9 ">
+    <div class="col-md-12 col-lg-10 col-xxl-8 ">
       <%= for {kind, class} <- alert_kinds() do %>
         <%= if flash_content = get_flash(@conn, kind) do %>
           <div class="alert <%= class %> alert-dismissible fade show" role="alert">
diff --git a/lib/bones73k_web/templates/layout/live.html.leex b/lib/bones73k_web/templates/layout/live.html.leex
index 7d8e82e..6249568 100644
--- a/lib/bones73k_web/templates/layout/live.html.leex
+++ b/lib/bones73k_web/templates/layout/live.html.leex
@@ -2,7 +2,7 @@
 
   <%# liveview flash alerts: %>
   <div class="row justify-content-center">
-    <div class="col-md-12 col-lg-10 col-xl-9 ">
+    <div class="col-md-12 col-lg-10 col-xxl-8 ">
       <%= for {kind, class} <- alert_kinds() do %>
         <%= if flash_content = live_flash(@flash, kind) do %>
           <div class="alert <%= class %> alert-dismissible fade show" role="alert" id="lv-alert-<%= kind %>" phx-hook="AlertRemover" data-key="<%= kind %>">
diff --git a/lib/bones73k_web/templates/user_confirmation/new.html.eex b/lib/bones73k_web/templates/user_confirmation/new.html.eex
index 1fb18e7..3a48d08 100644
--- a/lib/bones73k_web/templates/user_confirmation/new.html.eex
+++ b/lib/bones73k_web/templates/user_confirmation/new.html.eex
@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
+  <div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
 
   <h2>
     <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
diff --git a/lib/bones73k_web/templates/user_reset_password/new.html.eex b/lib/bones73k_web/templates/user_reset_password/new.html.eex
index 06aefbc..b6e6d41 100644
--- a/lib/bones73k_web/templates/user_reset_password/new.html.eex
+++ b/lib/bones73k_web/templates/user_reset_password/new.html.eex
@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
+  <div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">
 
   <h2>
     <%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
diff --git a/lib/bones73k_web/templates/user_session/new.html.eex b/lib/bones73k_web/templates/user_session/new.html.eex
index 310f089..f21f72b 100644
--- a/lib/bones73k_web/templates/user_session/new.html.eex
+++ b/lib/bones73k_web/templates/user_session/new.html.eex
@@ -1,5 +1,5 @@
 <div class="row justify-content-center">
-  <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
+  <div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4 col-xxl-3">
 
   <h2>
     <%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %>