diff --git a/CLAUDE.md b/CLAUDE.md
index 355760a668..dca010377f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -73,6 +73,10 @@ Hotwire-first: Turbo for navigation/forms, Stimulus controllers in `app/javascri
 ## Style
 This project uses **Standard.rb** (not vanilla RuboCop). Don't fight it on spacing/quotes/trailing commas. There is also a `.standard_todo.yml` of grandfathered violations — leave older files alone unless touching them substantively. Older migration files (2020–2024) are intentionally excluded from linting.
 
+## Design system (casadesign branch)
+
+This branch introduces a Tailwind CSS v4 design system, documented in **`design.md`** (repo root) — the source of truth for the new aesthetic. Read it before UI work and keep it updated. New pages use Tailwind-only layouts and coexist with the legacy Bootstrap UI (migrate page-by-page). **On every page, show user names without honorific prefixes (first + last only) — `display_person` for new UI, `formatted_name` at existing `.display_name` sites — never mutate the stored `display_name`.** **Workflow: on `casadesign`, commit and push to the `casadesign` branch at every checkpoint.** **Buttons come from the `button_classes(:primary|:secondary|:danger)` helper (one shared 40px height token, never hand-written class strings). Native-dialog modals use the `Dialog::` ViewComponent suite (`Dialog::GroupComponent` + `Dialog::HeaderComponent`/`BodyComponent`/`FooterComponent`), not the legacy Bootstrap `Modal::*`. Page headers use one primary CTA plus a `More` overflow menu (native `<details>` + the `dropdown` controller): keep core actions visible and overflow only occasional ones, never bury a core action (also breaks non-JS specs, which can't open `<details>`). On mobile, collapse the remaining visible secondaries into `More` too (render twice with `hidden sm:contents` / `sm:hidden`) so only the primary CTA and `More` share the top line. Leading icons on menu/list items top-align to the first line (`items-start`), never centered against wrapped text.**
+
 ## Where to look for more
 - `.github/instructions/ruby.instructions.md` and `.github/instructions/copilot-review.instructions.md` — the project's own review checklist; the source of truth for "what is a bug-shaped change here."
 - `doc/architecture-decisions/` — ADRs (especially 0002 no-UI-signup, 0003 two-user-tables, 0006 few-controller-tests, 0007 inline-email-CSS).
diff --git a/Procfile.dev b/Procfile.dev
index 9164cb4634..a87f94a87e 100644
--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,3 +1,4 @@
 web: bin/rails server -p 3000 -b 0.0.0.0
 js: npm run build:dev --watch
 css: npm run build:css:dev --watch
+tw: npm run build:tailwind:dev
diff --git a/app/assets/stylesheets/tailwind.css b/app/assets/stylesheets/tailwind.css
new file mode 100644
index 0000000000..50b95ef6f7
--- /dev/null
+++ b/app/assets/stylesheets/tailwind.css
@@ -0,0 +1,91 @@
+@import "tailwindcss";
+@import "tom-select/dist/css/tom-select.css";
+
+/* Where Tailwind should look for class names (paths are relative to this file). */
+@source "../../components/**/*.{erb,rb}";
+@source "../../views/**/*.erb";
+@source "../../helpers/**/*.rb";
+@source "../../javascript/**/*.js";
+
+/* ------------------------------------------------------------------
+   CASA design system (Tailwind v4 CSS-first config).
+   A calm, professional indigo palette + Figtree — the visual direction
+   for the casadesign redesign.
+------------------------------------------------------------------ */
+@theme {
+  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+  --color-brand-50:  #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
+}
+
+/* ------------------------------------------------------------------
+   TomSelect (the `multiple-select` Stimulus controller) restyled to the
+   design system. tom-select.css above provides the structure; these rules
+   theme it to match our inputs (slate border, rounded-lg, brand focus +
+   brand-50 pills). Only loaded on casa_app; Bootstrap pages keep the
+   tom-select.bootstrap5 theme from application.scss.
+------------------------------------------------------------------ */
+.ts-wrapper { font-size: 0.875rem; }
+.ts-control {
+  border-radius: 0.5rem;
+  border: 1px solid #cbd5e1; /* slate-300 */
+  padding: 0.375rem 0.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  background-color: #fff;
+  gap: 0.375rem;
+}
+.ts-wrapper.focus .ts-control {
+  border-color: #6366f1; /* brand-500 */
+  box-shadow: 0 0 0 2px rgb(99 102 241 / 0.3);
+}
+.ts-control > .item {
+  border-radius: 9999px;
+  background-color: #eef2ff; /* brand-50 */
+  color: #4338ca; /* brand-700 */
+  padding: 0.125rem 0.625rem;
+  font-weight: 500;
+  border: none;
+}
+.ts-control > .item .remove {
+  border-left: none;
+  color: #6366f1;
+  padding: 0 0.35rem;
+}
+.ts-control > .item .remove:hover { background: transparent; color: #4338ca; }
+.ts-control input::placeholder { color: #64748b; } /* slate-500 */
+.ts-dropdown {
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0; /* slate-200 */
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  margin-top: 0.25rem;
+}
+.ts-dropdown .option { padding: 0.5rem 0.75rem; color: #334155; } /* slate-700 */
+.ts-dropdown .active { background-color: #eef2ff; color: #4338ca; } /* brand-50 / brand-700 */
+
+/* ------------------------------------------------------------------
+   Native <dialog> modals (the `modal` Stimulus controller). Tailwind's reset
+   zeroes the `margin: auto` the UA uses to center a modal dialog, which pins it
+   to the top-left. Position it explicitly: horizontally centered and sitting
+   about a third of the way down, capped so tall modals stay on screen.
+------------------------------------------------------------------ */
+dialog[data-modal-target="dialog"] {
+  position: fixed;
+  left: 50%;
+  top: 24vh;
+  transform: translateX(-50%);
+  margin: 0;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+@media (max-width: 640px) {
+  dialog[data-modal-target="dialog"] { top: 18vh; }
+}
diff --git a/app/components/dialog/body_component.html.erb b/app/components/dialog/body_component.html.erb
new file mode 100644
index 0000000000..6597c6602f
--- /dev/null
+++ b/app/components/dialog/body_component.html.erb
@@ -0,0 +1 @@
+<div class="<%= body_classes %>"><%= content %></div>
diff --git a/app/components/dialog/body_component.rb b/app/components/dialog/body_component.rb
new file mode 100644
index 0000000000..1ced93841d
--- /dev/null
+++ b/app/components/dialog/body_component.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+# The body region of a design-system dialog. `centered` switches to the status
+# layout (centered hero badge + title + text). Pass extra `classes` (e.g.
+# "space-y-4") for form bodies with several stacked fields.
+class Dialog::BodyComponent < ViewComponent::Base
+  def initialize(centered: false, classes: nil)
+    @centered = centered
+    @classes = classes
+  end
+
+  def body_classes
+    base = @centered ? "px-5 pt-6 pb-4 text-center" : "px-5 py-4"
+    "#{base} #{@classes}".strip
+  end
+end
diff --git a/app/components/dialog/footer_component.html.erb b/app/components/dialog/footer_component.html.erb
new file mode 100644
index 0000000000..cffc5f3ad8
--- /dev/null
+++ b/app/components/dialog/footer_component.html.erb
@@ -0,0 +1 @@
+<div class="<%= footer_classes %>"><%= content %></div>
diff --git a/app/components/dialog/footer_component.rb b/app/components/dialog/footer_component.rb
new file mode 100644
index 0000000000..1689ce3042
--- /dev/null
+++ b/app/components/dialog/footer_component.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# The footer region of a design-system dialog: a divided action row. Actions are
+# right-aligned by default (`:end`); use `:center` for a single-action status modal.
+# Build the actions with the `button_classes` helper.
+class Dialog::FooterComponent < ViewComponent::Base
+  def initialize(align: :end)
+    @align = align
+  end
+
+  def footer_classes
+    justify = (@align == :center) ? "justify-center" : "justify-end"
+    "flex items-center #{justify} gap-2 border-t border-slate-100 px-5 py-4"
+  end
+end
diff --git a/app/components/dialog/group_component.html.erb b/app/components/dialog/group_component.html.erb
new file mode 100644
index 0000000000..52727bf437
--- /dev/null
+++ b/app/components/dialog/group_component.html.erb
@@ -0,0 +1,6 @@
+<%= tag.div class: @wrapper_class, data: wrapper_data do %>
+  <%= trigger %>
+  <%= tag.dialog id: @id, class: panel_classes, aria: {label: @label}, data: {modal_target: "dialog", action: "click->modal#backdropClose"} do %>
+    <%= content %>
+  <% end %>
+<% end %>
diff --git a/app/components/dialog/group_component.rb b/app/components/dialog/group_component.rb
new file mode 100644
index 0000000000..dd6610e192
--- /dev/null
+++ b/app/components/dialog/group_component.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# The native-<dialog> shell for the design-system modal. Pairs with the `modal`
+# Stimulus controller (`showModal()` gives a focus trap, Escape-to-close, and an
+# inert background for free). Compose the inside from Dialog::Header / Dialog::Body
+# / Dialog::Footer so the template cannot drift. This is the Tailwind replacement
+# for the legacy Bootstrap Modal::* suite; do not restyle Bootstrap `.modal` markup.
+class Dialog::GroupComponent < ViewComponent::Base
+  renders_one :trigger
+
+  SIZES = {sm: "max-w-sm", md: "max-w-md", lg: "max-w-lg"}.freeze
+
+  # size:            panel max-width (:sm | :md | :lg)
+  # label:           accessible name for the dialog (usually the title text)
+  # id:              optional id on the <dialog> (e.g. a JS / test hook)
+  # open_on_connect: auto-open on connect via the modal controller
+  # controllers:     extra Stimulus controllers on the wrapper (e.g. "court-report")
+  # data:            extra wrapper data attributes (e.g. local-storage-reset-key-value)
+  # wrapper_class:   layout for the wrapper div; default "inline-flex". Use "contents"
+  #                  to dissolve the wrapper so the trigger and dialog sit directly in
+  #                  a parent such as a dropdown menu (the trigger becomes a menu item).
+  def initialize(size: :md, label: nil, id: nil, open_on_connect: false, controllers: nil, data: {}, wrapper_class: "inline-flex")
+    @size = size
+    @label = label
+    @id = id
+    @open_on_connect = open_on_connect
+    @controllers = controllers
+    @data = data
+    @wrapper_class = wrapper_class
+  end
+
+  def wrapper_data
+    merged = @data.merge(controller: ["modal", @controllers].compact.join(" ").strip)
+    merged[:modal_open_on_connect_value] = true if @open_on_connect
+    merged
+  end
+
+  def panel_classes
+    "w-[calc(100vw-2rem)] #{SIZES.fetch(@size)} overflow-hidden rounded-2xl p-0 text-left shadow-xl backdrop:bg-slate-900/40"
+  end
+end
diff --git a/app/components/dialog/header_component.html.erb b/app/components/dialog/header_component.html.erb
new file mode 100644
index 0000000000..745629d50e
--- /dev/null
+++ b/app/components/dialog/header_component.html.erb
@@ -0,0 +1,9 @@
+<div class="flex items-center gap-3 border-b border-slate-100 px-5 py-4">
+  <% if @icon %><span class="<%= badge_classes %>"><i class="<%= @icon %>" aria-hidden="true"></i></span><% end %>
+  <h2 class="min-w-0 flex-1 text-base font-semibold text-slate-900"><%= @title %></h2>
+  <% if @closable %>
+    <button type="button" data-action="modal#close" aria-label="Close" class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
+      <i class="bi bi-x-lg" aria-hidden="true"></i>
+    </button>
+  <% end %>
+</div>
diff --git a/app/components/dialog/header_component.rb b/app/components/dialog/header_component.rb
new file mode 100644
index 0000000000..e696e16a89
--- /dev/null
+++ b/app/components/dialog/header_component.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# The header row of a design-system dialog: an optional status badge, the title,
+# and a close button. Render it inside Dialog::GroupComponent (it may sit inside a
+# form for form-driven modals).
+class Dialog::HeaderComponent < ViewComponent::Base
+  BADGE = {
+    danger: "bg-rose-100 text-rose-600",
+    success: "bg-emerald-50 text-emerald-600",
+    info: "bg-brand-50 text-brand-600"
+  }.freeze
+
+  # title:    heading text
+  # icon:     optional bi-* class for a 32px status badge
+  # variant:  badge color when an icon is shown (:danger | :success | :info)
+  # closable: render the close (X) button (default true)
+  def initialize(title:, icon: nil, variant: :info, closable: true)
+    @title = title
+    @icon = icon
+    @variant = variant
+    @closable = closable
+  end
+
+  def badge_classes
+    "grid h-8 w-8 shrink-0 place-items-center rounded-full #{BADGE.fetch(@variant, BADGE[:info])}"
+  end
+end
diff --git a/app/components/notification_component.html.erb b/app/components/notification_component.html.erb
index 9394d3c2f8..aa3b8c86e0 100644
--- a/app/components/notification_component.html.erb
+++ b/app/components/notification_component.html.erb
@@ -1,21 +1,22 @@
+<% read = notification.read? %>
 <a
   href="<%= mark_as_read_notification_path(notification) %>"
-  class="<%= muted_display %> list-group-item list-group-item-action flex-column align-items-start"
-  data-method="post">
-  <div class="d-flex flex-row">
-    <div class="d-flex-shrink-0">
-      <% unless notification.read? %>
-        <i class='fas fa-bell'></i>
-      <% end %>
-    </div>
-    <div class="ml-2 flex-grow-1">
-      <div class="d-flex justify-content-between">
-        <h5 class="mb-1"><%= notification.event.title %></h5>
-        <small><%= time_ago_in_words(notification.created_at) %> ago</small>
-      </div>
-      <div class="my-1">
-        <%= simple_format notification.event.message %>
-      </div>
+  data-method="post"
+  data-notification-list-item
+  <%= "data-read" if read %>
+  class="group flex items-start gap-3.5 px-4 py-3.5 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500">
+  <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl <%= read ? "bg-slate-100 text-slate-400" : "bg-brand-50 text-brand-600" %>">
+    <i class="bi <%= read ? "bi-bell" : "bi-bell-fill" %> text-sm" aria-hidden="true"></i>
+  </span>
+  <div class="min-w-0 flex-1">
+    <div class="flex items-baseline justify-between gap-3">
+      <p class="truncate text-sm font-semibold <%= read ? "text-slate-500" : "text-slate-900" %>"><%= notification.event.title %></p>
+      <span class="shrink-0 text-xs text-slate-500"><%= time_ago_in_words(notification.created_at) %> ago</span>
     </div>
+    <div class="mt-0.5 text-sm text-slate-600"><%= simple_format notification.event.message %></div>
   </div>
+  <% unless read %>
+    <span data-unread-dot class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-brand-500" aria-hidden="true"></span>
+    <span class="sr-only">Unread</span>
+  <% end %>
 </a>
diff --git a/app/components/notification_component.rb b/app/components/notification_component.rb
index 7641538115..f3606e875d 100644
--- a/app/components/notification_component.rb
+++ b/app/components/notification_component.rb
@@ -6,8 +6,4 @@ class NotificationComponent < ViewComponent::Base
   def initialize(notification:)
     @notification = notification
   end
-
-  def muted_display
-    "bg-light text-muted" if notification.read?
-  end
 end
diff --git a/app/controllers/all_casa_admins/sessions_controller.rb b/app/controllers/all_casa_admins/sessions_controller.rb
index 1c41a5ec44..fac114086c 100644
--- a/app/controllers/all_casa_admins/sessions_controller.rb
+++ b/app/controllers/all_casa_admins/sessions_controller.rb
@@ -2,5 +2,6 @@
 
 class AllCasaAdmins::SessionsController < Devise::SessionsController
   include Accessible
+  layout "casa_auth"
   skip_before_action :check_user, only: :destroy
 end
diff --git a/app/controllers/casa_cases_controller.rb b/app/controllers/casa_cases_controller.rb
index a486a2be33..d8a8e9ef3f 100644
--- a/app/controllers/casa_cases_controller.rb
+++ b/app/controllers/casa_cases_controller.rb
@@ -4,19 +4,26 @@ class CasaCasesController < ApplicationController
   before_action :require_organization!
   after_action :verify_authorized
 
+  SORT_COLUMNS = %w[case_number next_court_date status transition assigned].freeze
+
   def index
     authorize CasaCase
-    org_cases = current_user.casa_org.casa_cases.includes(:assigned_volunteers, :casa_case_emancipation_categories)
-    @casa_cases = policy_scope(org_cases).includes([:hearing_type, :judge])
-    @casa_cases_filter_id = policy(CasaCase).can_see_filters? ? "casa-cases" : ""
-    @duties = OtherDuty.where(creator_id: current_user.id)
+    @active_nav = "cases"
+    @sort = SORT_COLUMNS.include?(params[:sort]) ? params[:sort] : "case_number"
+    @direction = (params[:direction] == "desc") ? "desc" : "asc"
+    org_cases = current_user.casa_org.casa_cases.includes(:assigned_volunteers, :court_dates)
+    scope = policy_scope(org_cases)
+    scope = filter_casa_cases(scope) if policy(CasaCase).can_see_filters?
+    @pagy, @casa_cases = pagy(order_casa_cases(scope))
+    render :index, layout: "casa_app"
   end
 
   def show
     authorize @casa_case
+    @active_nav = "cases"
 
     respond_to do |format|
-      format.html {}
+      format.html { render layout: "casa_app" }
       format.csv do
         case_contacts = @casa_case.decorate.case_contacts_ordered_by_occurred_at
         csv = CaseContactsExportCsvService.new(case_contacts, CaseContactReport::COLUMNS).perform
@@ -140,6 +147,64 @@ def copy_court_orders
 
   private
 
+  # Orders the cases index by the whitelisted ?sort= column and ?direction=. Derived
+  # columns (next court date, assigned volunteer) use correlated subqueries; a secondary
+  # sort by case number keeps pagination stable.
+  def order_casa_cases(scope)
+    today = ActiveRecord::Base.connection.quote(Date.current)
+    clause =
+      case @sort
+      when "status" then "casa_cases.active"
+      when "transition" then "casa_cases.birth_month_year_youth"
+      when "next_court_date"
+        "(SELECT MIN(court_dates.date) FROM court_dates WHERE court_dates.casa_case_id = casa_cases.id AND court_dates.date >= #{today})"
+      when "assigned"
+        "(SELECT MIN(users.display_name) FROM case_assignments JOIN users ON users.id = case_assignments.volunteer_id WHERE case_assignments.casa_case_id = casa_cases.id AND case_assignments.active)"
+      else "casa_cases.case_number"
+      end
+    scope = scope.order(Arel.sql("#{clause} #{@direction} NULLS LAST"))
+    scope = scope.order(case_number: :asc) unless @sort == "case_number"
+    scope
+  end
+
+  # Server-side filtering for the cases index (admins/supervisors). Params come from the
+  # filter bar selects; volunteers never reach this. Status defaults to active.
+  def filter_casa_cases(scope)
+    if params[:search].present?
+      term = "%#{ActiveRecord::Base.sanitize_sql_like(params[:search].strip)}%"
+      scope = scope.where(
+        "casa_cases.case_number ILIKE :term OR EXISTS (SELECT 1 FROM case_assignments ca " \
+        "JOIN users u ON u.id = ca.volunteer_id WHERE ca.casa_case_id = casa_cases.id AND ca.active " \
+        "AND u.display_name ILIKE :term)",
+        term: term
+      )
+    end
+
+    scope = case params[:status]
+    when "inactive" then scope.inactive
+    when "all" then scope
+    else scope.active
+    end
+
+    case params[:assigned]
+    when "assigned" then scope = scope.where(id: CaseAssignment.active.select(:casa_case_id))
+    when "unassigned" then scope = scope.where.not(id: CaseAssignment.active.select(:casa_case_id))
+    end
+
+    case params[:transition]
+    when "yes" then scope = scope.is_transitioned
+    when "no" then scope = scope.where.not(id: current_user.casa_org.casa_cases.is_transitioned.select(:id))
+    end
+
+    case params[:prefix]
+    when "CINA" then scope = scope.where("case_number ILIKE ?", "CINA%")
+    when "TPR" then scope = scope.where("case_number ILIKE ?", "TPR%")
+    when "None" then scope = scope.where.not("case_number ILIKE ? OR case_number ILIKE ?", "CINA%", "TPR%")
+    end
+
+    scope
+  end
+
   # Use callbacks to share common setup or constraints between actions.
   def set_casa_case
     @casa_case = current_organization.casa_cases.friendly.find(params[:id])
diff --git a/app/controllers/case_groups_controller.rb b/app/controllers/case_groups_controller.rb
index 2a9c06e684..1db2a384e3 100644
--- a/app/controllers/case_groups_controller.rb
+++ b/app/controllers/case_groups_controller.rb
@@ -1,5 +1,7 @@
 class CaseGroupsController < ApplicationController
+  layout "casa_app"
   before_action :require_organization!
+  before_action -> { @active_nav = "cases" }
   before_action :set_case_group, only: %i[edit update destroy]
 
   def index
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 087f370a9d..f332fc81fd 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -7,11 +7,17 @@ def show
     if volunteer_with_only_one_active_case?
       redirect_to new_case_contact_path
     elsif current_user.volunteer?
-      redirect_to casa_cases_path
+      @active_nav = "dashboard"
+      @dashboard = VolunteerDashboard.new(current_user)
+      render "dashboard/volunteer", layout: "casa_app"
     elsif current_user.supervisor?
-      redirect_to volunteers_path
+      @active_nav = "dashboard"
+      @dashboard = SupervisorDashboard.new(current_user)
+      render "dashboard/supervisor", layout: "casa_app"
     elsif current_user.casa_admin?
-      redirect_to supervisors_path
+      @active_nav = "dashboard"
+      @dashboard = AdminDashboard.new(current_organization)
+      render "dashboard/admin", layout: "casa_app"
     end
   end
 
diff --git a/app/controllers/health_controller.rb b/app/controllers/health_controller.rb
index bbc16f505c..1597f858e5 100644
--- a/app/controllers/health_controller.rb
+++ b/app/controllers/health_controller.rb
@@ -6,10 +6,16 @@ class HealthController < ApplicationController
   skip_after_action :verify_policy_scoped # TODO: index should call policy_scope; remove this skip once it does
   before_action :verify_token_for_old_object_stats, only: [:old_objects]
 
+  ALLOWED_RANGES = [3, 6, 12].freeze
+
   def index
     respond_to do |format|
       format.html do
-        render :index
+        @range = ALLOWED_RANGES.include?(params[:range].to_i) ? params[:range].to_i : 12
+        @case_contacts = monthly_case_contacts(@range)
+        @active_users = monthly_active_users(@range)
+        @contact_heatmap = contact_creation_heatmap(@range)
+        render :index, layout: "metrics"
       end
 
       format.json { render json: {latest_deploy_time: Health.instance.latest_deploy_time} }
@@ -85,6 +91,58 @@ def monthly_unique_users_graph_data
 
   private
 
+  def last_month_starts(months_back)
+    (0..months_back - 1).map { |i| (months_back - 1 - i).months.ago.beginning_of_month }
+  end
+
+  def monthly_case_contacts(months_back)
+    months = last_month_starts(months_back)
+    pick = ->(counts) { months.map { |m| counts.find { |k, _| k.year == m.year && k.month == m.month }&.last || 0 } }
+    total = CaseContact.group_by_month(:created_at, last: months_back).count
+    with_notes = CaseContact.where.not(notes: [nil, ""]).group_by_month(:created_at, last: months_back).count
+    loggers = CaseContact.group_by_month(:created_at, last: months_back).distinct.count(:creator_id)
+    {
+      labels: months.map { |m| m.strftime("%b") },
+      series: [
+        {name: "Total contacts", data: pick.call(total)},
+        {name: "With notes", data: pick.call(with_notes)},
+        {name: "Unique loggers", data: pick.call(loggers)}
+      ],
+      distinct_loggers: CaseContact.where(created_at: months.first..).distinct.count(:creator_id)
+    }
+  end
+
+  def monthly_active_users(months_back)
+    months = last_month_starts(months_back)
+    keys = months.map { |m| m.strftime("%b %Y") }
+    by_type = ->(type) {
+      LoginActivity
+        .joins("INNER JOIN users ON users.id = login_activities.user_id AND login_activities.user_type = 'User'")
+        .where(users: {type: type}, success: true)
+        .group_by_month(:created_at, format: "%b %Y").distinct.count(:user_id)
+    }
+    volunteers = by_type.call("Volunteer")
+    supervisors = by_type.call("Supervisor")
+    admins = by_type.call("CasaAdmin")
+    logged = CaseContact.joins(supervisor_volunteer: :volunteer).group_by_month(:created_at, format: "%b %Y").distinct.count(:creator_id)
+    {
+      labels: months.map { |m| m.strftime("%b") },
+      series: [
+        {name: "Volunteers", data: keys.map { |k| volunteers[k] || 0 }},
+        {name: "Supervisors", data: keys.map { |k| supervisors[k] || 0 }},
+        {name: "Admins", data: keys.map { |k| admins[k] || 0 }},
+        {name: "Active loggers", data: keys.map { |k| logged[k] || 0 }}
+      ]
+    }
+  end
+
+  def contact_creation_heatmap(months_back)
+    grid = CaseContact.where(created_at: months_back.months.ago.beginning_of_month..)
+      .group("EXTRACT(DOW FROM created_at)::int")
+      .group("EXTRACT(HOUR FROM created_at)::int").count
+    {grid: grid, max: grid.values.max || 0}
+  end
+
   def each_old_object
     ObjectSpace.each_object do |obj|
       next unless ObjectSpace.dump(obj).include?('"old":true')
diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
index 8726d2d21f..d2d55bbfcf 100644
--- a/app/controllers/notifications_controller.rb
+++ b/app/controllers/notifications_controller.rb
@@ -1,4 +1,6 @@
 class NotificationsController < ApplicationController
+  layout "casa_app"
+
   after_action :verify_authorized
   skip_after_action :verify_policy_scoped # TODO: index should call policy_scope; remove this skip once it does
   before_action :set_notification, only: %i[mark_as_read]
diff --git a/app/controllers/users/invitations_controller.rb b/app/controllers/users/invitations_controller.rb
index 7dbdbc8352..44df716590 100644
--- a/app/controllers/users/invitations_controller.rb
+++ b/app/controllers/users/invitations_controller.rb
@@ -4,6 +4,6 @@ def edit
     self.resource = resource_class.new
     set_minimum_password_length if respond_to?(:set_minimum_password_length, true)
     resource.invitation_token = params[:invitation_token]
-    render :edit
+    render :edit, layout: "casa_auth"
   end
 end
diff --git a/app/controllers/users/passwords_controller.rb b/app/controllers/users/passwords_controller.rb
index f1c2ea6a90..faf852acbc 100644
--- a/app/controllers/users/passwords_controller.rb
+++ b/app/controllers/users/passwords_controller.rb
@@ -3,6 +3,8 @@ class Users::PasswordsController < Devise::PasswordsController
   include PhoneNumberHelper
   include SmsBodyHelper
 
+  layout "casa_auth"
+
   def create
     @email = params.dig(resource_name, :email)
     @phone_number = params.dig(resource_name, :phone_number)
diff --git a/app/controllers/users/sessions_controller.rb b/app/controllers/users/sessions_controller.rb
index a1afeb575d..ae8b49d324 100644
--- a/app/controllers/users/sessions_controller.rb
+++ b/app/controllers/users/sessions_controller.rb
@@ -2,5 +2,6 @@
 
 class Users::SessionsController < Devise::SessionsController
   include Accessible
+  layout "casa_auth"
   skip_before_action :check_user, only: :destroy
 end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 7ad32b2109..2d83cf7c5a 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -1,4 +1,6 @@
 class UsersController < ApplicationController
+  layout "casa_app"
+
   before_action :get_user
   before_action :authorize_user_with_policy
   before_action :set_active_casa_admins
diff --git a/app/datatables/case_contact_datatable.rb b/app/datatables/case_contact_datatable.rb
index 7240caf1a9..cdcdd95147 100644
--- a/app/datatables/case_contact_datatable.rb
+++ b/app/datatables/case_contact_datatable.rb
@@ -33,7 +33,7 @@ def data
         medium_type: case_contact.medium_type&.titleize,
         creator: {
           id: case_contact.creator_id,
-          display_name: case_contact.creator&.display_name,
+          display_name: NamePresentation.strip_honorific(case_contact.creator&.display_name),
           email: case_contact.creator&.email,
           role: case_contact.creator&.role
         },
diff --git a/app/datatables/reimbursement_datatable.rb b/app/datatables/reimbursement_datatable.rb
index edf82ffb31..0738127316 100644
--- a/app/datatables/reimbursement_datatable.rb
+++ b/app/datatables/reimbursement_datatable.rb
@@ -23,7 +23,7 @@ def data
         occurred_at: case_contact.occurred_at,
         volunteer: {
           address: case_contact.creator.address&.content,
-          display_name: case_contact.creator.display_name,
+          display_name: NamePresentation.strip_honorific(case_contact.creator.display_name),
           email: case_contact.creator.email,
           id: case_contact.creator.id
         }
diff --git a/app/datatables/supervisor_datatable.rb b/app/datatables/supervisor_datatable.rb
index 62425a202d..df85529f18 100644
--- a/app/datatables/supervisor_datatable.rb
+++ b/app/datatables/supervisor_datatable.rb
@@ -12,7 +12,7 @@ def data
       {
         id: supervisor.id,
         active: supervisor.active?,
-        display_name: supervisor.display_name,
+        display_name: NamePresentation.strip_honorific(supervisor.display_name),
         email: supervisor.email,
         volunteer_assignments: supervisor.volunteers.count,
         transitions_volunteers: supervisor.volunteers_serving_transition_aged_youth,
diff --git a/app/datatables/volunteer_datatable.rb b/app/datatables/volunteer_datatable.rb
index ffb8c7de5e..4d0eba266d 100644
--- a/app/datatables/volunteer_datatable.rb
+++ b/app/datatables/volunteer_datatable.rb
@@ -18,7 +18,7 @@ def data
         active: volunteer.active?,
         casa_cases: volunteer.casa_cases.map { |cc| {id: cc.id, case_number: cc.case_number} },
         contacts_made_in_past_days: volunteer.contacts_made_in_past_days,
-        display_name: volunteer.display_name,
+        display_name: NamePresentation.strip_honorific(volunteer.display_name),
         email: volunteer.email,
         has_transition_aged_youth_cases: volunteer.has_transition_aged_youth_cases?,
         id: volunteer.id,
@@ -27,7 +27,7 @@ def data
           case_id: volunteer.most_recent_attempt_case_id,
           occurred_at: I18n.l(volunteer.most_recent_attempt_occurred_at, format: :full, default: nil)
         },
-        supervisor: {id: volunteer.supervisor_id, name: volunteer.supervisor_name},
+        supervisor: {id: volunteer.supervisor_id, name: NamePresentation.strip_honorific(volunteer.supervisor_name)},
         hours_spent_in_days: volunteer.hours_spent_in_days(30),
         extra_languages: volunteer.languages&.map { |lang| {id: lang.id, name: lang.name} }
       }
diff --git a/app/decorators/casa_case_decorator.rb b/app/decorators/casa_case_decorator.rb
index 096944b00c..03638a708c 100644
--- a/app/decorators/casa_case_decorator.rb
+++ b/app/decorators/casa_case_decorator.rb
@@ -71,6 +71,12 @@ def formatted_updated_at
     I18n.l(object.updated_at, format: :standard, default: nil)
   end
 
+  def formatted_next_court_date
+    upcoming = object.court_dates.select { |court_date| court_date.date.to_date >= Date.current }.min_by(&:date)
+    return nil unless upcoming
+    I18n.l(upcoming.date, format: :full, default: nil)
+  end
+
   def inactive_class
     (!object.active) ? "table-secondary" : ""
   end
diff --git a/app/decorators/case_contact_decorator.rb b/app/decorators/case_contact_decorator.rb
index 3b40bd22f0..d2a4afd2be 100644
--- a/app/decorators/case_contact_decorator.rb
+++ b/app/decorators/case_contact_decorator.rb
@@ -90,6 +90,19 @@ def medium_icon_classes
     end
   end
 
+  # Bootstrap Icons variant of medium_icon_classes, for the Tailwind (casa_app)
+  # views, which load bootstrap-icons rather than the legacy LineIcons font.
+  def medium_icon
+    case object.medium_type
+    when CaseContact::IN_PERSON then "bi bi-people"
+    when CaseContact::TEXT_EMAIL then "bi bi-envelope"
+    when CaseContact::VIDEO then "bi bi-camera-video"
+    when CaseContact::VOICE_ONLY then "bi bi-telephone"
+    when CaseContact::LETTER then "bi bi-envelope-paper"
+    else "bi bi-question-circle"
+    end
+  end
+
   def contact_groups
     groups = contact_groups_with_types.keys
     if groups.count > 0
diff --git a/app/helpers/design_system_helper.rb b/app/helpers/design_system_helper.rb
new file mode 100644
index 0000000000..642a57d1e2
--- /dev/null
+++ b/app/helpers/design_system_helper.rb
@@ -0,0 +1,51 @@
+module DesignSystemHelper
+  # Strip an honorific prefix (Mr./Mrs./...) from a name for display. Use at any
+  # existing `.display_name` call site that shows a person's name.
+  def formatted_name(name)
+    NamePresentation.strip_honorific(name.to_s)
+  end
+
+  # A person's display name (honorific-free) with an email fallback. Prefer this for
+  # new UI where you have the user object.
+  def display_person(user)
+    formatted_name(user.display_name.presence || user.email)
+  end
+
+  # Two-letter initials for avatars: first + last name, ignoring honorific prefixes.
+  # Falls back to a single letter for one-word names / emails.
+  def avatar_initials(name)
+    tokens = NamePresentation.strip_honorific(name.to_s).gsub(/[^a-zA-Z ]/, " ").split
+    initials =
+      if tokens.size >= 2
+        "#{tokens.first[0]}#{tokens.last[0]}"
+      else
+        tokens.first.to_s[0, 1]
+      end
+    initials.upcase.presence || "?"
+  end
+
+  # Single source of truth for design-system button styling. These used to be
+  # copy-pasted class strings across views, which is how the variants drifted
+  # (mismatched heights, ad hoc padding). Repoint every button here instead.
+  #
+  # All variants are the same size by construction: the fixed `h-10` (40px) height
+  # token means `box-sizing: border-box` absorbs the outlined variant's 1px border,
+  # so a filled button (no border) and the outlined secondary render identically
+  # tall. Do NOT add a `border border-transparent` compensation to the filled
+  # variants; the height token already handles it.
+  #
+  # Keep every class a literal string per variant: Tailwind's source scan
+  # (`app/helpers/**/*.rb` is a @source) only sees class names written out in full.
+  # Never build them by interpolation (e.g. "bg-#{color}-600") or they won't compile.
+  def button_classes(variant = :primary)
+    base = "inline-flex h-10 items-center justify-center gap-2 rounded-lg px-4 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-60"
+    variant_classes =
+      case variant
+      when :primary then "bg-brand-600 font-semibold text-white hover:bg-brand-700 focus-visible:ring-brand-500"
+      when :secondary then "border border-slate-200 bg-white font-medium text-slate-700 hover:bg-slate-50 focus-visible:ring-brand-500"
+      when :danger then "bg-rose-600 font-semibold text-white hover:bg-rose-700 focus-visible:ring-rose-500"
+      else raise ArgumentError, "unknown button variant: #{variant.inspect}"
+      end
+    "#{base} #{variant_classes}"
+  end
+end
diff --git a/app/helpers/health_helper.rb b/app/helpers/health_helper.rb
new file mode 100644
index 0000000000..dd924dcad7
--- /dev/null
+++ b/app/helpers/health_helper.rb
@@ -0,0 +1,231 @@
+module HealthHelper
+  SERIES_COLORS = %w[#4f46e5 #059669 #d97706 #e11d48].freeze
+  SERIES_DASH = ["", "7 4", "1.5 4", "10 4 1.5 4"].freeze
+  SERIES_SHAPE = %i[circle square triangle diamond].freeze
+  HEATMAP_RAMP = %w[#eef2ff #c7d2fe #a5b4fc #818cf8 #6366f1 #4338ca].freeze
+  DAY_LABELS = %w[Sun Mon Tue Wed Thu Fri Sat].freeze
+
+  def metric_tiles(items)
+    tag.div(safe_join(items.map { |item| metric_tile(item) }), class: "grid grid-cols-2 gap-3 sm:flex sm:flex-wrap")
+  end
+
+  def metric_empty_state(heading, body)
+    tag.div(class: "rounded-2xl border border-dashed border-slate-300 bg-white px-6 py-10 text-center") do
+      safe_join([
+        tag.div(empty_chart_icon, class: "mx-auto mb-3 flex justify-center text-slate-400"),
+        tag.p(heading, class: "text-[15px] font-bold text-slate-900"),
+        tag.p(body, class: "mx-auto mt-1 max-w-[46ch] text-sm text-slate-600")
+      ])
+    end
+  end
+
+  def metric_legend(series)
+    items = series.each_with_index.map do |ser, i|
+      tag.span(class: "inline-flex items-center gap-1.5 text-[13px] text-slate-600") do
+        safe_join([line_key_svg(i), tag.span(ser[:name])])
+      end
+    end
+    tag.div(safe_join(items), class: "mt-3 flex flex-wrap gap-x-4 gap-y-2")
+  end
+
+  def metric_line_chart(id, labels, series, title:, desc:)
+    svg, config = build_line_chart(id, labels, series, title, desc)
+    tag.div(
+      safe_join([
+        raw(svg),
+        tag.div("", class: "pointer-events-none absolute left-0 top-0 z-10 rounded-lg bg-slate-900 px-2.5 py-2 text-xs text-white opacity-0 shadow-lg transition-opacity", data: {"chart-hover-target": "tip"})
+      ]),
+      class: "relative",
+      data: {controller: "chart-hover", "chart-hover-config-value": config.to_json}
+    )
+  end
+
+  def metric_range_filter(active)
+    presets = {3 => "Last 3 months", 6 => "Last 6 months", 12 => "Last 12 months"}
+    links = presets.map do |months, label|
+      current = (months == active)
+      classes = "rounded-lg border px-3 py-1.5 text-[13px] font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 " +
+        (current ? "border-brand-200 bg-brand-50 text-brand-700" : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50")
+      link_to(label, health_index_path(range: months), class: classes, "aria-current": (current ? "page" : nil))
+    end
+    tag.div(safe_join([tag.span("Range", class: "mr-1 text-[13px] text-slate-500")] + links),
+      class: "mb-5 flex flex-wrap items-center gap-2", role: "group", "aria-label": "Date range")
+  end
+
+  def metric_data_table(labels, series, caption:, foot: nil, footnote: nil)
+    th = "px-2.5 py-1.5 text-right text-xs font-semibold text-slate-500"
+    th_row = "px-2.5 py-1.5 text-left text-xs font-semibold text-slate-700"
+    td = "px-2.5 py-1.5 text-right text-xs tabular-nums text-slate-700"
+    header = tag.tr(class: "border-b border-slate-200") do
+      safe_join([tag.th("Month", scope: "col", class: "#{th} text-left")] +
+        series.map { |ser| tag.th(ser[:name], scope: "col", class: th) })
+    end
+    rows = labels.each_with_index.map do |lab, i|
+      tag.tr(class: (i.zero? ? "" : "border-t border-slate-50")) do
+        safe_join([tag.th(lab, scope: "row", class: th_row)] +
+          series.map { |ser| tag.td(ser[:data][i], class: td) })
+      end
+    end
+    foot_html = if foot
+      tag.tfoot(tag.tr(safe_join(
+        [tag.th(foot[:label], scope: "row", class: "#{th_row} border-t-2 border-slate-200 text-slate-900")] +
+        foot[:cells].map { |c| tag.td(c, class: "#{td} border-t-2 border-slate-200 font-bold text-slate-900") }
+      )))
+    else
+      "".html_safe
+    end
+    table = tag.table(class: "w-full") do
+      safe_join([tag.caption(caption, class: "sr-only"), tag.thead(header), tag.tbody(safe_join(rows)), foot_html])
+    end
+    tag.details(class: "mt-3 border-t border-slate-100 pt-2.5") do
+      safe_join([
+        tag.summary("View as table", class: "w-max cursor-pointer text-[13px] font-medium text-brand-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"),
+        tag.div(table, class: "mt-2.5 overflow-x-auto"),
+        (footnote ? tag.p(footnote, class: "mt-2 text-[11px] text-slate-500") : "".html_safe)
+      ])
+    end
+  end
+
+  def metric_heatmap(grid, max)
+    hours = (0..23).to_a
+    header = tag.tr do
+      safe_join([tag.th(tag.span("Day of week", class: "sr-only"), scope: "col", class: "sticky left-0 z-10 bg-white px-1 py-1")] +
+        hours.map { |hr| tag.th(hr, scope: "col", class: "px-1 py-1 text-center text-[10px] font-medium text-slate-500") })
+    end
+    rows = DAY_LABELS.each_with_index.map do |day, di|
+      cells = hours.map do |hr|
+        count = grid[[di, hr]] || 0
+        tag.td(count.positive? ? count : "",
+          style: "background:#{heat_color(count, max)};color:#{heat_ink(count, max)}",
+          class: "w-[30px] min-w-[30px] rounded border-2 border-white py-1 text-center text-[11px]",
+          title: "#{day} #{hr}:00, #{count} #{"contact".pluralize(count)}")
+      end
+      tag.tr(safe_join([tag.th(day, scope: "row", class: "sticky left-0 z-10 bg-white px-1 py-1 pr-2.5 text-right text-[11px] font-semibold text-slate-700")] + cells))
+    end
+    tag.div(class: "overflow-x-auto") do
+      tag.table(class: "border-collapse") do
+        safe_join([
+          tag.caption("Case contacts created by day of week (rows) and hour of day (columns, 0 to 23). Cell shade and number both encode the count.", class: "sr-only"),
+          tag.thead(header),
+          tag.tbody(safe_join(rows))
+        ])
+      end
+    end
+  end
+
+  private
+
+  def metric_tile(item)
+    value = item[:value]
+    value_html =
+      if value.nil?
+        tag.div("No data", class: "pt-1 text-[15px] font-semibold leading-tight text-slate-600")
+      elsif value.zero?
+        tag.div("0", class: "text-2xl font-bold leading-none text-slate-500")
+      else
+        tag.div(value, class: "text-2xl font-bold leading-none text-slate-900")
+      end
+    tag.div(class: "rounded-xl bg-slate-50 px-3.5 py-3 sm:min-w-[130px] sm:flex-1") do
+      safe_join([
+        value_html,
+        tag.div(item[:label], class: "mt-1 text-sm text-slate-600"),
+        tag.div(item[:sub], class: "text-[11px] text-slate-500")
+      ])
+    end
+  end
+
+  def build_line_chart(id, labels, series, title, desc)
+    w = 720
+    h = 300
+    pad_l = 42
+    pad_r = 40
+    pad_t = 16
+    pad_b = 34
+    plot_w = w - pad_l - pad_r
+    plot_h = h - pad_t - pad_b
+    ymax = nice_ceiling(series.flat_map { |s| s[:data] }.max.to_i)
+    n = labels.size
+    xx = ->(i) { (pad_l + plot_w * i.to_f / [n - 1, 1].max).round(1) }
+    yy = ->(v) { (pad_t + plot_h * (1 - v.to_f / ymax)).round(1) }
+    out = %(<svg viewBox="0 0 #{w} #{h}" width="100%" class="block h-auto w-full" role="img" aria-labelledby="#{id}-t #{id}-d" preserveAspectRatio="xMidYMid meet">)
+    out << %(<title id="#{id}-t">#{h(title)}</title><desc id="#{id}-d">#{h(desc)}</desc>)
+    4.downto(0) do |t|
+      frac = t / 4.0
+      y = (pad_t + plot_h * (1 - frac)).round(1)
+      out << %(<line x1="#{pad_l}" y1="#{y}" x2="#{pad_l + plot_w}" y2="#{y}" stroke="#e2e8f0" stroke-width="1"/>)
+      out << %(<text x="#{pad_l - 8}" y="#{y + 4}" text-anchor="end" font-size="11" fill="#64748b">#{(ymax * frac).round}</text>)
+    end
+    labels.each_with_index do |lab, i|
+      out << %(<text x="#{xx.call(i)}" y="#{h - 12}" text-anchor="middle" font-size="11" fill="#64748b">#{h(lab)}</text>)
+    end
+    out << %(<line x1="#{pad_l}" y1="#{pad_t + plot_h}" x2="#{pad_l + plot_w}" y2="#{pad_t + plot_h}" stroke="#cbd5e1" stroke-width="1"/>)
+    series.each_with_index do |ser, si|
+      color = series_color(si)
+      dash = series_dash(si)
+      dash_attr = dash.empty? ? "" : %( stroke-dasharray="#{dash}")
+      pts = ser[:data].each_with_index.map { |v, i| "#{xx.call(i)},#{yy.call(v)}" }.join(" ")
+      out << %(<polyline points="#{pts}" fill="none" stroke="#{color}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"#{dash_attr}/>)
+      ser[:data].each_with_index do |v, i|
+        out << %(<g><title>#{h(ser[:name])}, #{h(labels[i])}: #{v}</title>#{metric_marker(SERIES_SHAPE[si], xx.call(i), yy.call(v), color)}</g>)
+      end
+      out << %(<text x="#{xx.call(n - 1) + 8}" y="#{yy.call(ser[:data].last) + 4}" font-size="11" font-weight="700" fill="#0f172a">#{ser[:data].last}</text>)
+    end
+    out << %(<rect x="#{pad_l}" y="#{pad_t}" width="#{plot_w}" height="#{plot_h}" fill="transparent"/>)
+    out << "</svg>"
+    config = {
+      plotTop: pad_t,
+      plotBottom: pad_t + plot_h,
+      xs: (0...n).map { |i| xx.call(i) },
+      labels: labels,
+      series: series.each_with_index.map { |ser, si| {name: ser[:name], color: series_color(si), values: ser[:data], ys: ser[:data].map { |v| yy.call(v) }} }
+    }
+    [out, config]
+  end
+
+  def line_key_svg(i)
+    color = series_color(i)
+    dash = series_dash(i)
+    dash_attr = dash.empty? ? "" : %( stroke-dasharray="#{dash}")
+    raw(%(<svg width="36" height="12" aria-hidden="true"><line x1="1" y1="6" x2="35" y2="6" stroke="#{color}" stroke-width="2"#{dash_attr}/>#{metric_marker(SERIES_SHAPE[i], 18, 6, color, 3.1)}</svg>))
+  end
+
+  def metric_marker(shape, cx, cy, color, r = 3.6)
+    case shape
+    when :circle
+      %(<circle cx="#{cx}" cy="#{cy}" r="#{r}" fill="#{color}" stroke="#ffffff" stroke-width="2"/>)
+    when :square
+      s = r * 1.8
+      %(<rect x="#{(cx - s / 2).round(1)}" y="#{(cy - s / 2).round(1)}" width="#{s.round(1)}" height="#{s.round(1)}" rx="1" fill="#{color}" stroke="#ffffff" stroke-width="2"/>)
+    when :triangle
+      s = r * 2.2
+      %(<polygon points="#{cx},#{(cy - s * 0.6).round(1)} #{(cx - s * 0.55).round(1)},#{(cy + s * 0.45).round(1)} #{(cx + s * 0.55).round(1)},#{(cy + s * 0.45).round(1)}" fill="#{color}" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>)
+    else
+      s = r * 1.5
+      %(<polygon points="#{cx},#{(cy - s).round(1)} #{(cx + s).round(1)},#{cy} #{cx},#{(cy + s).round(1)} #{(cx - s).round(1)},#{cy}" fill="#{color}" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>)
+    end
+  end
+
+  def nice_ceiling(v)
+    return 5 if v <= 5
+    mag = 10**Math.log10(v).floor
+    [1, 2, 2.5, 5, 10].map { |f| f * mag }.find { |c| c >= v } || 10 * mag
+  end
+
+  def heat_color(count, max)
+    return "#f8fafc" if count <= 0 || max <= 0
+    idx = [((count.to_f / max) * (HEATMAP_RAMP.size - 1)).round, HEATMAP_RAMP.size - 1].min
+    HEATMAP_RAMP[idx]
+  end
+
+  def heat_ink(count, max)
+    (max.positive? && count.to_f / max > 0.55) ? "#ffffff" : "#334155"
+  end
+
+  def empty_chart_icon
+    raw(%(<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 3v18h18" stroke-linecap="round"/><path d="M7 15l3-3 3 2 4-5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/></svg>))
+  end
+
+  def series_color(i) = SERIES_COLORS[i % SERIES_COLORS.size]
+
+  def series_dash(i) = SERIES_DASH[i % SERIES_DASH.size]
+end
diff --git a/app/helpers/table_helper.rb b/app/helpers/table_helper.rb
new file mode 100644
index 0000000000..7276fe249e
--- /dev/null
+++ b/app/helpers/table_helper.rb
@@ -0,0 +1,29 @@
+module TableHelper
+  # A sortable column header: an <th aria-sort> containing a link that toggles the
+  # sort direction, plus a double-caret indicator whose active half is brand-coloured.
+  # Sorting is server-side, so the link preserves the current query (filters) and
+  # resets the page. `column` must be whitelisted by the controller.
+  def sortable_header(label, column, sort:, direction:)
+    active = column.to_s == sort.to_s
+    state = active ? direction : "none"
+    aria = {"asc" => "ascending", "desc" => "descending"}.fetch(state, "none")
+    next_direction = (active && direction == "asc") ? "desc" : "asc"
+    href = url_for(request.query_parameters.merge("sort" => column.to_s, "direction" => next_direction).except("page"))
+    link_class = "inline-flex items-center rounded text-xs font-semibold #{active ? "text-slate-900" : "text-slate-600"} hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+    content_tag(:th, class: "px-4 py-3 text-left", "aria-sort": aria) do
+      link_to(href, class: link_class) { safe_join([label, sort_caret(state)]) }
+    end
+  end
+
+  def sort_caret(state)
+    up = caret_color(state, "asc")
+    down = caret_color(state, "desc")
+    raw(%(<span class="inline-flex" style="margin-left:4px" aria-hidden="true"><svg width="8" height="12" viewBox="0 0 8 12" fill="none"><path d="M0.75 5 L4 2 L7.25 5" stroke="#{up}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M0.75 7 L4 10 L7.25 7" stroke="#{down}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>))
+  end
+
+  # Brand for the active half, light for the other half of a sorted column, mid when unsorted.
+  def caret_color(state, half)
+    return "#94a3b8" if state == "none"
+    (state == half) ? "#4f46e5" : "#cbd5e1"
+  end
+end
diff --git a/app/javascript/__tests__/add_to_calendar_controller.test.js b/app/javascript/__tests__/add_to_calendar_controller.test.js
new file mode 100644
index 0000000000..80a3dda870
--- /dev/null
+++ b/app/javascript/__tests__/add_to_calendar_controller.test.js
@@ -0,0 +1,50 @@
+/* eslint-env jest */
+/**
+ * @jest-environment jsdom
+ */
+import { Application } from '@hotwired/stimulus'
+import AddToCalendarController from '../controllers/add_to_calendar_controller'
+
+// The web component itself is browser-only; stub it out so importing the
+// controller has no side effects and createElement makes an inert element.
+jest.mock('add-to-calendar-button', () => ({}))
+
+describe('add_to_calendar_controller', () => {
+  let application
+
+  const mount = async (html) => {
+    document.body.innerHTML = html
+    application = Application.start()
+    application.register('add-to-calendar', AddToCalendarController)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  }
+
+  afterEach(() => {
+    if (application) application.stop()
+    document.body.innerHTML = ''
+  })
+
+  test('replaces its content with a configured add-to-calendar-button', async () => {
+    await mount(`
+      <div data-controller="add-to-calendar"
+           data-add-to-calendar-title-value="Court Hearing"
+           data-add-to-calendar-start-value="2025-11-15"
+           data-add-to-calendar-end-value="2025-11-15"
+           data-add-to-calendar-tooltip-value="Add to calendar">stale content</div>
+    `)
+
+    const host = document.querySelector('[data-controller="add-to-calendar"]')
+    const button = host.querySelector('add-to-calendar-button')
+
+    expect(button).not.toBeNull()
+    expect(host.textContent).not.toContain('stale content')
+    expect(button.getAttribute('name')).toBe('Court Hearing')
+    expect(button.getAttribute('startDate')).toBe('2025-11-15')
+    expect(button.getAttribute('endDate')).toBe('2025-11-15')
+    expect(button.getAttribute('description')).toBe('Court Hearing')
+    expect(button.getAttribute('options')).toBe("'Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo'")
+    expect(button.getAttribute('timeZone')).toBe('currentBrowser')
+    expect(button.getAttribute('lightMode')).toBe('bodyScheme')
+    expect(button.title).toBe('Add to calendar')
+  })
+})
diff --git a/app/javascript/__tests__/local_storage_reset_controller.test.js b/app/javascript/__tests__/local_storage_reset_controller.test.js
new file mode 100644
index 0000000000..81cd32c7da
--- /dev/null
+++ b/app/javascript/__tests__/local_storage_reset_controller.test.js
@@ -0,0 +1,35 @@
+/* eslint-env jest */
+/**
+ * @jest-environment jsdom
+ */
+import { Application } from '@hotwired/stimulus'
+import LocalStorageResetController from '../controllers/local_storage_reset_controller'
+
+describe('local_storage_reset_controller', () => {
+  let application
+
+  const mount = async (html) => {
+    document.body.innerHTML = html
+    application = Application.start()
+    application.register('local-storage-reset', LocalStorageResetController)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  }
+
+  afterEach(() => {
+    if (application) application.stop()
+    document.body.innerHTML = ''
+    window.localStorage.clear()
+  })
+
+  test('removes the configured key on connect', async () => {
+    window.localStorage.setItem('casa-contact-form', 'draft')
+    await mount('<div data-controller="local-storage-reset" data-local-storage-reset-key-value="casa-contact-form"></div>')
+    expect(window.localStorage.getItem('casa-contact-form')).toBeNull()
+  })
+
+  test('leaves other keys untouched', async () => {
+    window.localStorage.setItem('keep-me', 'yes')
+    await mount('<div data-controller="local-storage-reset" data-local-storage-reset-key-value="casa-contact-form"></div>')
+    expect(window.localStorage.getItem('keep-me')).toBe('yes')
+  })
+})
diff --git a/app/javascript/all_casa_admin.js b/app/javascript/all_casa_admin.js
index 6324ded939..b0723b43f9 100644
--- a/app/javascript/all_casa_admin.js
+++ b/app/javascript/all_casa_admin.js
@@ -1,4 +1,3 @@
 require('./src/all_casa_admin/tables')
 require('./src/all_casa_admin/patch_notes')
 require('./src/session_timeout_poller.js')
-require('./src/display_app_metric.js')
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 88f9aef317..3a9d5904b9 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -31,7 +31,6 @@ require('./src/select')
 require('./src/tooltip')
 require('./src/time_zone')
 require('./src/session_timeout_poller.js')
-require('./src/display_app_metric.js')
 require('./src/casa_org')
 require('./src/sms_reactivation_toggle')
 require('./src/validated_form')
diff --git a/app/javascript/controllers/add_to_calendar_controller.js b/app/javascript/controllers/add_to_calendar_controller.js
new file mode 100644
index 0000000000..7f2eab374b
--- /dev/null
+++ b/app/javascript/controllers/add_to_calendar_controller.js
@@ -0,0 +1,29 @@
+import { Controller } from '@hotwired/stimulus'
+import 'add-to-calendar-button'
+
+// Hydrates an "Add to Calendar" web component from data values, so a court date
+// (or the next court date) can be saved to a personal calendar. This is the
+// Stimulus replacement for the legacy jQuery `div.cal-btn` scan
+// (src/add_to_calendar_button.js): it hydrates on connect, so it also survives
+// Turbo navigation, and each button owns its own data instead of a global sweep.
+export default class extends Controller {
+  static values = {
+    title: String,
+    start: String,
+    end: String,
+    tooltip: String
+  }
+
+  connect () {
+    const button = document.createElement('add-to-calendar-button')
+    button.setAttribute('name', this.titleValue)
+    button.setAttribute('startDate', this.startValue)
+    button.setAttribute('endDate', this.endValue)
+    button.setAttribute('description', this.titleValue)
+    button.setAttribute('options', "'Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo'")
+    button.setAttribute('timeZone', 'currentBrowser')
+    button.setAttribute('lightMode', 'bodyScheme')
+    button.title = this.tooltipValue
+    this.element.replaceChildren(button)
+  }
+}
diff --git a/app/javascript/controllers/auto_submit_controller.js b/app/javascript/controllers/auto_submit_controller.js
new file mode 100644
index 0000000000..fb64329686
--- /dev/null
+++ b/app/javascript/controllers/auto_submit_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Submits the form when a control changes (e.g. the table filter selects). Turbo Drive
+// keeps the navigation smooth, so filtering has no full-page flash.
+export default class extends Controller {
+  submit () {
+    this.element.requestSubmit()
+  }
+}
diff --git a/app/javascript/controllers/chart_hover_controller.js b/app/javascript/controllers/chart_hover_controller.js
new file mode 100644
index 0000000000..7524f93339
--- /dev/null
+++ b/app/javascript/controllers/chart_hover_controller.js
@@ -0,0 +1,107 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Crosshair + tooltip for a server-rendered SVG line chart. Reads the chart
+// geometry from the config value; every value is also in the table twin, so this
+// is progressive enhancement, not the only way to read the data.
+export default class extends Controller {
+  static values = { config: Object }
+  static targets = ['tip']
+
+  connect () {
+    this.cfg = this.configValue
+    this.svg = this.element.querySelector('svg')
+    if (!this.svg || !this.cfg || !this.cfg.series) return
+    const ns = 'http://www.w3.org/2000/svg'
+    this.cross = document.createElementNS(ns, 'line')
+    this.cross.setAttribute('stroke', '#94a3b8')
+    this.cross.setAttribute('stroke-width', '1')
+    this.cross.setAttribute('stroke-dasharray', '3 3')
+    this.cross.setAttribute('y1', this.cfg.plotTop)
+    this.cross.setAttribute('y2', this.cfg.plotBottom)
+    this.cross.style.opacity = '0'
+    this.cross.style.pointerEvents = 'none'
+    this.svg.appendChild(this.cross)
+    this.dots = this.cfg.series.map((s) => {
+      const dot = document.createElementNS(ns, 'circle')
+      dot.setAttribute('r', '4.5')
+      dot.setAttribute('fill', s.color)
+      dot.setAttribute('stroke', '#fff')
+      dot.setAttribute('stroke-width', '2')
+      dot.style.opacity = '0'
+      dot.style.pointerEvents = 'none'
+      this.svg.appendChild(dot)
+      return dot
+    })
+    this.onMove = this.onMove.bind(this)
+    this.onLeave = this.onLeave.bind(this)
+    this.svg.addEventListener('pointermove', this.onMove)
+    this.svg.addEventListener('pointerleave', this.onLeave)
+  }
+
+  disconnect () {
+    if (!this.svg) return
+    this.svg.removeEventListener('pointermove', this.onMove)
+    this.svg.removeEventListener('pointerleave', this.onLeave)
+  }
+
+  onMove (event) {
+    const point = this.svg.createSVGPoint()
+    point.x = event.clientX
+    point.y = event.clientY
+    const x = point.matrixTransform(this.svg.getScreenCTM().inverse()).x
+    let index = 0
+    let best = Infinity
+    this.cfg.xs.forEach((xv, idx) => {
+      const distance = Math.abs(xv - x)
+      if (distance < best) {
+        best = distance
+        index = idx
+      }
+    })
+    const cx = this.cfg.xs[index]
+    this.cross.setAttribute('x1', cx)
+    this.cross.setAttribute('x2', cx)
+    this.cross.style.opacity = '1'
+    this.cfg.series.forEach((s, si) => {
+      this.dots[si].setAttribute('cx', cx)
+      this.dots[si].setAttribute('cy', s.ys[index])
+      this.dots[si].style.opacity = '1'
+    })
+    if (!this.hasTipTarget) return
+    const tip = this.tipTarget
+    tip.replaceChildren()
+    const month = document.createElement('div')
+    month.className = 'mb-1 text-[11px] font-bold text-slate-300'
+    month.textContent = this.cfg.labels[index]
+    tip.appendChild(month)
+    this.cfg.series.forEach((s) => {
+      const row = document.createElement('div')
+      row.className = 'flex items-center gap-1.5 leading-relaxed'
+      const key = document.createElement('span')
+      key.className = 'h-0.5 w-3.5 flex-none rounded'
+      key.style.background = s.color
+      const value = document.createElement('span')
+      value.className = 'font-bold tabular-nums'
+      value.textContent = s.values[index]
+      const name = document.createElement('span')
+      name.className = 'text-slate-300'
+      name.textContent = s.name
+      row.append(key, value, name)
+      tip.appendChild(row)
+    })
+    tip.style.opacity = '1'
+    const rect = this.element.getBoundingClientRect()
+    let left = event.clientX - rect.left + 14
+    if (left + tip.offsetWidth > rect.width) {
+      left = event.clientX - rect.left - tip.offsetWidth - 14
+    }
+    tip.style.left = `${left}px`
+    tip.style.top = `${event.clientY - rect.top + 14}px`
+  }
+
+  onLeave () {
+    this.cross.style.opacity = '0'
+    this.dots.forEach((dot) => { dot.style.opacity = '0' })
+    if (this.hasTipTarget) this.tipTarget.style.opacity = '0'
+  }
+}
diff --git a/app/javascript/controllers/court_report_controller.js b/app/javascript/controllers/court_report_controller.js
new file mode 100644
index 0000000000..ed099c7c32
--- /dev/null
+++ b/app/javascript/controllers/court_report_controller.js
@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Generates a court report (docx) from the case-show modal. It posts the date
+// range to the JSON endpoint (Rails wraps the flat body under case_court_report),
+// shows a spinner while the docx is built, then opens the download in a new tab.
+// The Tailwind + Stimulus replacement for the legacy jQuery handleGenerateReport.
+export default class extends Controller {
+  static targets = ['form', 'timeZone', 'spinner', 'submit', 'error']
+
+  connect () {
+    if (this.hasTimeZoneTarget) {
+      this.timeZoneTarget.value = Intl.DateTimeFormat().resolvedOptions().timeZone
+    }
+  }
+
+  async generate (event) {
+    event.preventDefault()
+    const form = this.formTarget
+    if (!form.reportValidity()) return
+
+    this.setBusy(true)
+    try {
+      const response = await window.fetch(form.action, {
+        method: 'POST',
+        headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+        body: JSON.stringify(Object.fromEntries(new window.FormData(form)))
+      })
+      const data = await response.json()
+      if (data.status !== 'ok') {
+        this.showError(data.error_messages)
+        return
+      }
+      window.open(data.link, '_blank')
+    } catch (error) {
+      this.showError('Something went wrong generating the report. Please try again.')
+    } finally {
+      this.setBusy(false)
+    }
+  }
+
+  setBusy (busy) {
+    if (this.hasSpinnerTarget) this.spinnerTarget.classList.toggle('hidden', !busy)
+    if (this.hasSubmitTarget) this.submitTarget.disabled = busy
+  }
+
+  showError (html) {
+    if (this.hasErrorTarget) {
+      this.errorTarget.innerHTML = html
+      this.errorTarget.classList.remove('hidden')
+    }
+  }
+}
diff --git a/app/javascript/controllers/disclosure_controller.js b/app/javascript/controllers/disclosure_controller.js
new file mode 100644
index 0000000000..7dcec9cbda
--- /dev/null
+++ b/app/javascript/controllers/disclosure_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Progressive disclosure for a collapsible panel (e.g. the Change Password /
+// Change Email sections on the edit-profile page). The panel starts hidden and
+// the trigger button toggles it.
+export default class extends Controller {
+  static targets = ['panel', 'trigger']
+
+  toggle () {
+    const hidden = this.panelTarget.classList.toggle('hidden')
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute('aria-expanded', String(!hidden))
+    }
+  }
+}
diff --git a/app/javascript/controllers/dismiss_controller.js b/app/javascript/controllers/dismiss_controller.js
index fecbf7353e..b2972e95ce 100644
--- a/app/javascript/controllers/dismiss_controller.js
+++ b/app/javascript/controllers/dismiss_controller.js
@@ -13,7 +13,7 @@ export default class extends Controller {
       .then(response => response.json())
       .then(data => {
         if (data.status === 'ok') {
-          this.elementTarget.classList.add('d-none')
+          this.elementTarget.classList.add('d-none', 'hidden')
         }
       })
   }
diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js
new file mode 100644
index 0000000000..6a5c37d747
--- /dev/null
+++ b/app/javascript/controllers/dropdown_controller.js
@@ -0,0 +1,44 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Enhances a native <details> disclosure used as a menu:
+// - only one dropdown is open at a time (opening one closes the others),
+// - it closes on an outside click and on Escape (returning focus to the summary).
+// Opening/closing is still the browser's native <details> toggle, so this is
+// progressive enhancement — the menu works without JS.
+export default class extends Controller {
+  connect () {
+    this.closeSiblings = this.closeSiblings.bind(this)
+    this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this)
+    this.closeOnEscape = this.closeOnEscape.bind(this)
+    this.element.addEventListener('toggle', this.closeSiblings)
+    document.addEventListener('click', this.closeOnOutsideClick)
+    this.element.addEventListener('keydown', this.closeOnEscape)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('toggle', this.closeSiblings)
+    document.removeEventListener('click', this.closeOnOutsideClick)
+    this.element.removeEventListener('keydown', this.closeOnEscape)
+  }
+
+  // When this menu opens, close every other open dropdown so only one is open.
+  closeSiblings () {
+    if (!this.element.open) return
+    document.querySelectorAll('details[data-controller~="dropdown"][open]').forEach((other) => {
+      if (other !== this.element) other.open = false
+    })
+  }
+
+  closeOnOutsideClick (event) {
+    if (this.element.open && !this.element.contains(event.target)) {
+      this.element.open = false
+    }
+  }
+
+  closeOnEscape (event) {
+    if (event.key === 'Escape' && this.element.open) {
+      this.element.open = false
+      this.element.querySelector('summary')?.focus()
+    }
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 7bb572bdfb..5d0e5beda5 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -5,24 +5,38 @@ import RailsNestedForm from '@stimulus-components/rails-nested-form'
 
 import { application } from './application'
 
+import AddToCalendarController from './add_to_calendar_controller'
+
 import AlertController from './alert_controller'
 
 import AutosaveController from './autosave_controller'
 
+import AutoSubmitController from './auto_submit_controller'
+
 import CasaNestedFormController from './casa_nested_form_controller'
 
 import CaseContactFormController from './case_contact_form_controller'
 
 import CourtOrderFormController from './court_order_form_controller'
 
+import CourtReportController from './court_report_controller'
+
 import DisableFormController from './disable_form_controller'
 
+import DisclosureController from './disclosure_controller'
+
 import DismissController from './dismiss_controller'
 
+import DropdownController from './dropdown_controller'
+
 import HelloController from './hello_controller'
 
 import IconToggleController from './icon_toggle_controller'
 
+import LocalStorageResetController from './local_storage_reset_controller'
+
+import ModalController from './modal_controller'
+
 import MultipleSelectController from './multiple_select_controller'
 
 import NavbarController from './navbar_controller'
@@ -36,15 +50,22 @@ import SidebarGroupController from './sidebar_group_controller'
 import TruncatedTextController from './truncated_text_controller'
 
 application.register('nested-form', RailsNestedForm)
+application.register('add-to-calendar', AddToCalendarController)
 application.register('alert', AlertController)
 application.register('autosave', AutosaveController)
+application.register('auto-submit', AutoSubmitController)
 application.register('casa-nested-form', CasaNestedFormController)
 application.register('case-contact-form', CaseContactFormController)
 application.register('court-order-form', CourtOrderFormController)
+application.register('court-report', CourtReportController)
 application.register('disable-form', DisableFormController)
+application.register('disclosure', DisclosureController)
 application.register('dismiss', DismissController)
+application.register('dropdown', DropdownController)
 application.register('hello', HelloController)
 application.register('icon-toggle', IconToggleController)
+application.register('local-storage-reset', LocalStorageResetController)
+application.register('modal', ModalController)
 application.register('multiple-select', MultipleSelectController)
 application.register('navbar', NavbarController)
 application.register('select-all', SelectAllController)
diff --git a/app/javascript/controllers/local_storage_reset_controller.js b/app/javascript/controllers/local_storage_reset_controller.js
new file mode 100644
index 0000000000..146c6ed843
--- /dev/null
+++ b/app/javascript/controllers/local_storage_reset_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Removes a localStorage key on connect, e.g. discarding a saved case-contact
+// draft once the contact has been created (this controller is rendered only on
+// the success redirect).
+export default class extends Controller {
+  static values = { key: String }
+
+  connect () {
+    if (this.keyValue) window.localStorage.removeItem(this.keyValue)
+  }
+}
diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
new file mode 100644
index 0000000000..2ddf7f4a4f
--- /dev/null
+++ b/app/javascript/controllers/modal_controller.js
@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+// A modal built on the native <dialog> element. `open` calls showModal(), which
+// traps focus, wires Escape-to-close, and makes the background inert; `close`
+// closes it; a click on the backdrop (the <dialog> itself, outside its panel)
+// also closes it. No custom focus-trap or key handling to maintain.
+export default class extends Controller {
+  static targets = ['dialog']
+  static values = { openOnConnect: Boolean }
+
+  connect () {
+    if (this.openOnConnectValue) this.open()
+  }
+
+  open () {
+    this.dialogTarget.showModal()
+  }
+
+  close () {
+    this.dialogTarget.close()
+  }
+
+  backdropClose (event) {
+    if (event.target === this.dialogTarget) {
+      this.close()
+    }
+  }
+}
diff --git a/app/javascript/metrics.js b/app/javascript/metrics.js
new file mode 100644
index 0000000000..16a1e1986c
--- /dev/null
+++ b/app/javascript/metrics.js
@@ -0,0 +1,4 @@
+import { application } from './controllers/application'
+import ChartHoverController from './controllers/chart_hover_controller'
+
+application.register('chart-hover', ChartHoverController)
diff --git a/app/javascript/src/display_app_metric.js b/app/javascript/src/display_app_metric.js
deleted file mode 100644
index 4df412b94c..0000000000
--- a/app/javascript/src/display_app_metric.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import { Chart, registerables } from 'chart.js'
-import 'chartjs-adapter-luxon'
-
-const { Notifier } = require('./notifier')
-
-Chart.register(...registerables)
-
-const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-
-$(() => { // JQuery's callback for the DOM loading
-  const caseContactCreationTimesBubbleChart = document.getElementById('caseContactCreationTimeBubbleChart')
-  const monthLineChart = document.getElementById('monthLineChart')
-  const uniqueUsersMonthLineChart = document.getElementById('uniqueUsersMonthLineChart')
-
-  const notificationsElement = $('#notifications')
-  const pageNotifier = notificationsElement.length ? new Notifier(notificationsElement) : null
-
-  if (caseContactCreationTimesBubbleChart) {
-    fetchDataAndCreateChart('/health/case_contacts_creation_times_in_last_week', caseContactCreationTimesBubbleChart, function (data) {
-      const timestamps = data.timestamps
-      const graphData = formatTimestampsAsBubbleChartData(timestamps)
-      createChart(caseContactCreationTimesBubbleChart, graphData)
-    })
-  }
-
-  if (monthLineChart) {
-    fetchDataAndCreateChart('/health/monthly_line_graph_data', monthLineChart, function (data) {
-      console.log(data)
-      createLineChartForCaseContacts(monthLineChart, data)
-    })
-  }
-
-  if (uniqueUsersMonthLineChart) {
-    fetchDataAndCreateChart('/health/monthly_unique_users_graph_data', uniqueUsersMonthLineChart, function (data) {
-      console.log(data)
-      createLineChartForUniqueUsersMonthly(uniqueUsersMonthLineChart, data)
-    })
-  }
-
-  function fetchDataAndCreateChart (url, chartElement, successCallback) {
-    $.ajax({
-      type: 'GET',
-      url,
-      success: successCallback,
-      error: handleAjaxError
-    })
-  }
-
-  function handleAjaxError (xhr, status, error) {
-    console.error('Failed to fetch data for case contact entry times chart display')
-    console.error(error)
-    pageNotifier?.notify('Failed to display metric chart. Check the console for error details.', 'error')
-  }
-})
-
-function formatTimestampsAsBubbleChartData (timestamps) {
-  const bubbleDataAsObject = {}
-
-  for (const timestamp of timestamps) {
-    const contactCreationTime = new Date(timestamp * 1000)
-    const day = contactCreationTime.getDay()
-    const hour = contactCreationTime.getHours()
-
-    // Group case contacts with the same hour and day creation time into the same data point
-
-    let dayData
-
-    if (!(day in bubbleDataAsObject)) {
-      dayData = {}
-      bubbleDataAsObject[day] = dayData
-    } else {
-      dayData = bubbleDataAsObject[day]
-    }
-
-    if (!(hour in dayData)) {
-      dayData[hour] = 1
-    } else {
-      dayData[hour]++
-    }
-  }
-
-  // Flatten data points
-
-  const bubbleDataAsArray = []
-
-  for (const day in bubbleDataAsObject) {
-    const hours = bubbleDataAsObject[day]
-
-    for (const hour in hours) {
-      bubbleDataAsArray.push({
-        x: hour,
-        y: day,
-        r: Math.sqrt(hours[hour]) * 4
-      })
-    }
-  }
-
-  return bubbleDataAsArray
-}
-
-function createChart (chartElement, dataset) {
-  const ctx = chartElement.getContext('2d')
-
-  return new Chart(ctx, {
-    type: 'bubble',
-    data: {
-      datasets: [
-        {
-          label: 'Case Contact Creation Times',
-          data: dataset,
-          backgroundColor: 'rgba(255, 99, 132, 0.2)',
-          borderColor: 'rgba(255, 99, 132, 1)'
-        }
-      ]
-    },
-    options: {
-      scales: {
-        x: {
-          min: 0,
-          max: 23,
-          ticks: {
-            beginAtZero: true,
-            stepSize: 1
-          }
-        },
-        y: {
-          min: 0,
-          max: 6,
-          ticks: {
-            beginAtZero: true,
-            callback: getYTickCallback,
-            stepSize: 1
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          display: false
-        },
-        title: {
-          display: true,
-          font: {
-            size: 18
-          },
-          text: 'Case Contact Creation Times in the Past Week'
-        },
-        tooltip: {
-          callbacks: {
-            label: getTooltipLabelCallback
-          }
-        }
-      }
-    }
-  })
-}
-
-function getYTickCallback (value) {
-  return days[value]
-}
-
-function getTooltipLabelCallback (context) {
-  const bubbleData = context.dataset.data[context.dataIndex]
-  const caseContactCountSqrt = bubbleData.r / 4
-  return `${Math.round(caseContactCountSqrt * caseContactCountSqrt)} case contacts created on ${days[bubbleData.y]} at ${bubbleData.x}:00`
-}
-
-function createLineChartForCaseContacts (chartElement, dataset) {
-  const datasetLabels = ['Total Case Contacts', 'Total Case Contacts with Notes', 'Total Case Contact Users']
-  return createLineChart(chartElement, dataset, 'Case Contact Creation', datasetLabels)
-}
-
-function createLineChartForUniqueUsersMonthly (chartElement, dataset) {
-  const datasetLabels = ['Total Volunteers', 'Total Supervisors', 'Total Admins', 'Total logged Volunteers']
-  return createLineChart(chartElement, dataset, 'Monthly Active Users', datasetLabels)
-}
-
-function createLineChart (chartElement, dataset, chartTitle, datasetLabels) {
-  const ctx = chartElement.getContext('2d')
-  const allMonths = extractChartData(dataset, 0)
-  const datasets = []
-  const colors = ['#308af3', '#48ba16', '#FF0000', '#FFA500']
-
-  for (let i = 1; i < dataset[0].length; i++) {
-    const data = extractChartData(dataset, i)
-    const label = datasetLabels[i - 1]
-    const color = colors[i - 1]
-    datasets.push(createLineChartDataset(label, data, color, color))
-  }
-
-  return new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels: allMonths,
-      datasets
-    },
-    options: createChartOptions(chartTitle)
-  })
-}
-
-function extractChartData (dataset, index) {
-  return dataset.map(data => data[index])
-}
-
-function createLineChartDataset (label, data, borderColor, pointBackgroundColor) {
-  return {
-    label,
-    data,
-    fill: false,
-    borderColor,
-    pointBackgroundColor,
-    pointBorderWidth: 2,
-    pointHoverBackgroundColor: '#fff',
-    pointHoverBorderWidth: 2,
-    lineTension: 0.05
-  }
-}
-
-function createChartOptions (label) {
-  return {
-    legend: { display: true },
-    plugins: {
-      legend: { display: true, position: 'bottom' },
-      title: {
-        display: true,
-        font: { size: 18 },
-        text: label
-      },
-      tooltips: {
-        callbacks: {
-          label: function (tooltipItem, data) {
-            let label = data.datasets[tooltipItem.datasetIndex].label || ''
-            if (label) {
-              label += ': '
-            }
-            label += Math.round(tooltipItem.yLabel * 100) / 100
-            return label
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/models/case_contact.rb b/app/models/case_contact.rb
index 3e73ea490e..32a02dc3ba 100644
--- a/app/models/case_contact.rb
+++ b/app/models/case_contact.rb
@@ -16,8 +16,10 @@ class CaseContact < ApplicationRecord
     allow_nil: true
   }
   # NOTE: 'extra' day is a temporary fix for user selecting current date, but this validation failing
+  # NOTE: a lambda so the cutoff is evaluated per-validation, not frozen at class-load time (which
+  # made specs flaky when the class first loaded under travel_to a past date).
   validates :occurred_at, comparison: {
-    less_than: Time.zone.tomorrow + 1.day,
+    less_than: -> { Time.zone.tomorrow + 1.day },
     message: :cant_be_future,
     allow_nil: true
   }
diff --git a/app/models/concerns/name_presentation.rb b/app/models/concerns/name_presentation.rb
new file mode 100644
index 0000000000..0f7ffc93db
--- /dev/null
+++ b/app/models/concerns/name_presentation.rb
@@ -0,0 +1,17 @@
+# Shared name-formatting helpers. User display names should never show an
+# honorific prefix (Mr./Mrs./Ms./...) anywhere in the app — see User#display_name.
+module NamePresentation
+  HONORIFICS = %w[mr mrs ms miss mx dr prof rev sir madam].freeze
+
+  module_function
+
+  # "Mrs. Hung Bergstrom" -> "Hung Bergstrom"; names without a leading
+  # honorific are returned unchanged.
+  def strip_honorific(name)
+    parts = name.to_s.split(" ")
+    return name.to_s if parts.size <= 1
+
+    leading = parts.first.sub(/\.\z/, "").downcase
+    HONORIFICS.include?(leading) ? parts.drop(1).join(" ") : name.to_s
+  end
+end
diff --git a/app/services/admin_dashboard.rb b/app/services/admin_dashboard.rb
new file mode 100644
index 0000000000..6b9bdcfc53
--- /dev/null
+++ b/app/services/admin_dashboard.rb
@@ -0,0 +1,65 @@
+# Builds an admin's org-wide landing dashboard: chapter-level stats plus the cases that
+# need action (unassigned, or not contacted recently). Queries are aggregate/batched
+# (active cases + one grouped contact lookup + count queries) so this stays cheap at org
+# scale — do not reintroduce per-case/per-volunteer queries here.
+class AdminDashboard
+  FOLLOWUP_DAYS = Volunteer::CONTACT_MADE_IN_DAYS_NUM
+  ATTENTION_LIMIT = 6
+
+  def initialize(casa_org)
+    @casa_org = casa_org
+  end
+
+  def active_cases
+    @active_cases ||= @casa_org.casa_cases.active.order(:case_number).to_a
+  end
+
+  def unassigned_cases
+    @unassigned_cases ||= active_cases.reject { |casa_case| assigned_case_ids.include?(casa_case.id) }
+  end
+
+  def cases_needing_contact
+    @cases_needing_contact ||= active_cases.select do |casa_case|
+      last = last_contacts[casa_case.id]
+      last.nil? || (Date.current - last.to_date).to_i > FOLLOWUP_DAYS
+    end
+  end
+
+  def needs_attention
+    unassigned_cases.first(ATTENTION_LIMIT)
+  end
+
+  def empty?
+    active_cases.empty? && active_volunteers.zero?
+  end
+
+  def stats
+    {
+      volunteers: active_volunteers,
+      cases: active_cases.size,
+      unassigned: unassigned_cases.size,
+      needs_contact: cases_needing_contact.size
+    }
+  end
+
+  private
+
+  def active_volunteers
+    @active_volunteers ||= Volunteer.in_organization(@casa_org).active.count
+  end
+
+  def assigned_case_ids
+    @assigned_case_ids ||= CaseAssignment.active
+      .where(casa_case_id: active_cases.map(&:id))
+      .distinct
+      .pluck(:casa_case_id)
+      .to_set
+  end
+
+  def last_contacts
+    @last_contacts ||= CaseContact
+      .where(contact_made: true, casa_case_id: active_cases.map(&:id))
+      .group(:casa_case_id)
+      .maximum(:occurred_at)
+  end
+end
diff --git a/app/services/supervisor_dashboard.rb b/app/services/supervisor_dashboard.rb
new file mode 100644
index 0000000000..fff99a3b90
--- /dev/null
+++ b/app/services/supervisor_dashboard.rb
@@ -0,0 +1,96 @@
+# Builds the data for a supervisor's landing dashboard: the volunteers assigned to
+# them, each volunteer's contact-follow-up status, and the summary stats up top.
+#
+# NOTE: runs a few queries per volunteer. Fine for a supervisor's assigned volunteers
+# (typically a handful); revisit with a batched query (see VolunteerDatatable) if a
+# supervisor ever carries a very large roster.
+class SupervisorDashboard
+  AVATAR_COLORS = %w[sky violet emerald amber rose teal indigo].freeze
+  RECENT_CONTACT_DAYS = 60
+  RECENT_HOURS_DAYS = 30
+
+  Row = Struct.new(:volunteer, :cases_count, :status, :last_contact_on, :contacts_recent, :minutes_recent, keyword_init: true) do
+    def needs_followup?
+      status == :follow_up
+    end
+
+    def no_cases?
+      status == :no_cases
+    end
+
+    def avatar_color
+      AVATAR_COLORS[volunteer.id % AVATAR_COLORS.size]
+    end
+
+    def last_contact_label
+      return "No contact logged" unless last_contact_on
+
+      days = (Date.current - last_contact_on.to_date).to_i
+      case days
+      when 0 then "Today"
+      when 1 then "Yesterday"
+      else "#{days} days ago"
+      end
+    end
+
+    def hours_label
+      return "—" if minutes_recent.zero?
+
+      hours, minutes = minutes_recent.divmod(60)
+      [("#{hours}h" if hours.positive?), ("#{minutes}m" if minutes.positive?)].compact.join(" ")
+    end
+  end
+
+  def initialize(supervisor)
+    @supervisor = supervisor
+  end
+
+  def volunteers
+    @volunteers ||= @supervisor.volunteers.to_a
+  end
+
+  def rows
+    @rows ||= volunteers.map { |volunteer| build_row(volunteer) }
+  end
+
+  def needs_attention
+    @needs_attention ||= rows.select(&:needs_followup?)
+  end
+
+  def stats
+    {
+      active: rows.size,
+      needs_followup: needs_attention.size,
+      no_cases: rows.count(&:no_cases?),
+      hours_label: format_hours(rows.sum(&:minutes_recent))
+    }
+  end
+
+  private
+
+  def build_row(volunteer)
+    cases_count = volunteer.actively_assigned_and_active_cases.size
+    made = CaseContact.where(creator_id: volunteer.id, contact_made: true)
+
+    Row.new(
+      volunteer: volunteer,
+      cases_count: cases_count,
+      status: status_for(volunteer, cases_count),
+      last_contact_on: made.maximum(:occurred_at),
+      contacts_recent: made.where(occurred_at: RECENT_CONTACT_DAYS.days.ago.to_date..).count,
+      minutes_recent: made.where(occurred_at: RECENT_HOURS_DAYS.days.ago.to_date..).sum(:duration_minutes).to_i
+    )
+  end
+
+  def status_for(volunteer, cases_count)
+    return :no_cases if cases_count.zero?
+
+    volunteer.made_contact_with_all_cases_in_days? ? :on_track : :follow_up
+  end
+
+  def format_hours(minutes)
+    return "0h" if minutes.zero?
+
+    "#{(minutes / 60.0).round(1)}h"
+  end
+end
diff --git a/app/services/volunteer_dashboard.rb b/app/services/volunteer_dashboard.rb
new file mode 100644
index 0000000000..71cdf1fbdf
--- /dev/null
+++ b/app/services/volunteer_dashboard.rb
@@ -0,0 +1,62 @@
+# Builds a volunteer's landing dashboard: their actively-assigned active cases, each
+# case's contact-follow-up status, and the summary stats up top. Per-case last-contact
+# lookups are batched into one query, so this is safe for a volunteer's roster of cases.
+class VolunteerDashboard
+  RECENT_HOURS_DAYS = 30
+
+  Row = Struct.new(:casa_case, :last_contact_on, keyword_init: true) do
+    def needs_contact?
+      last_contact_on.nil? || (Date.current - last_contact_on.to_date).to_i > Volunteer::CONTACT_MADE_IN_DAYS_NUM
+    end
+
+    def status
+      needs_contact? ? :needs_contact : :on_track
+    end
+
+    def last_contact_label
+      return "No contact logged" unless last_contact_on
+
+      days = (Date.current - last_contact_on.to_date).to_i
+      case days
+      when 0 then "Today"
+      when 1 then "Yesterday"
+      else "#{days} days ago"
+      end
+    end
+  end
+
+  def initialize(volunteer)
+    @volunteer = volunteer
+  end
+
+  def cases
+    @cases ||= @volunteer.actively_assigned_and_active_cases.to_a
+  end
+
+  def rows
+    @rows ||= cases
+      .map { |casa_case| Row.new(casa_case: casa_case, last_contact_on: last_contacts[casa_case.id]) }
+      .sort_by { |row| [row.needs_contact? ? 0 : 1, row.last_contact_on || Date.new(0)] }
+  end
+
+  def needs_attention
+    @needs_attention ||= rows.select(&:needs_contact?)
+  end
+
+  def stats
+    {
+      cases: rows.size,
+      needs_contact: needs_attention.size,
+      hours_label: @volunteer.hours_spent_in_days(RECENT_HOURS_DAYS).presence || "0h"
+    }
+  end
+
+  private
+
+  def last_contacts
+    @last_contacts ||= CaseContact
+      .where(creator_id: @volunteer.id, contact_made: true, casa_case_id: cases.map(&:id))
+      .group(:casa_case_id)
+      .maximum(:occurred_at)
+  end
+end
diff --git a/app/views/banners/index.html.erb b/app/views/banners/index.html.erb
index fdfa86d7f8..c8a92d5141 100644
--- a/app/views/banners/index.html.erb
+++ b/app/views/banners/index.html.erb
@@ -48,7 +48,7 @@
                   <%= banner_expiration_time_in_words(banner) %>
                 </td>
                 <td class="min-width">
-                  <%= banner.user.display_name %>
+                  <%= formatted_name(banner.user.display_name) %>
                 </td>
                 <td class="min-width">
                   <%= time_ago_in_words(banner.updated_at) %> ago
diff --git a/app/views/casa_cases/_case_contact_card.html.erb b/app/views/casa_cases/_case_contact_card.html.erb
new file mode 100644
index 0000000000..9ac22c13c4
--- /dev/null
+++ b/app/views/casa_cases/_case_contact_card.html.erb
@@ -0,0 +1,73 @@
+<%# Tailwind case-contact card for the case-show page. Show-specific (the shared
+    case_contacts/_case_contact partial is still Bootstrap and used by un-migrated
+    pages); consolidate when the contacts index migrates. `data-case-contact` is the
+    count hook the show spec targets. %>
+<article data-case-contact class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
+  <div class="flex items-start gap-3">
+    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600">
+      <i class="<%= contact.decorate.medium_icon %>" aria-hidden="true"></i>
+    </span>
+    <div class="min-w-0 flex-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <h3 class="text-sm font-semibold text-slate-900">
+          <%= "[DELETE] " if policy(contact).restore? && contact.deleted? %><%= contact.decorate.contact_groups %>
+        </h3>
+        <% unless contact.active? %>
+          <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">Draft</span>
+        <% end %>
+        <% if policy(contact).restore? && contact.deleted? %>
+          <%= link_to "Undelete", restore_case_contact_path(contact.id), method: :post, data: {turbo: false},
+                class: "text-xs font-medium text-brand-600 hover:text-brand-700 focus-visible:underline focus-visible:outline-none" %>
+        <% end %>
+      </div>
+      <p class="mt-1 text-sm text-slate-600"><%= contact.decorate.contact_types %></p>
+      <p class="mt-0.5 text-xs text-slate-500"><%= contact.decorate.subheading %></p>
+
+      <% answers = contact.contact_topic_answers.reject { |answer| answer.value.blank? } %>
+      <% if answers.any? || contact.notes.present? %>
+        <dl class="mt-3 space-y-2 text-sm">
+          <% answers.each do |answer| %>
+            <div>
+              <dt class="font-medium text-slate-700"><%= answer.contact_topic.question %></dt>
+              <dd class="whitespace-pre-line text-slate-600"><%= answer.value %></dd>
+            </div>
+          <% end %>
+          <% if contact.notes.present? %>
+            <div>
+              <dt class="font-medium text-slate-700">Additional Notes</dt>
+              <dd class="whitespace-pre-line text-slate-600"><%= contact.notes %></dd>
+            </div>
+          <% end %>
+        </dl>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-3">
+    <p class="text-xs text-slate-500">
+      Created by
+      <% creator = contact.creator %>
+      <% if policy(contact).edit? && !current_user.volunteer? && creator %>
+        <% creator_path = creator.supervisor? ? edit_supervisor_path(creator) : (creator.casa_admin? ? edit_users_path : edit_volunteer_path(creator)) %>
+        <%= link_to formatted_name(creator.display_name), creator_path, data: {turbo: false}, class: "font-medium text-brand-600 hover:text-brand-700" %>
+      <% else %>
+        <span class="font-medium text-slate-700"><%= formatted_name(creator&.display_name) %></span>
+      <% end %>
+    </p>
+    <div class="flex flex-wrap items-center gap-2">
+      <% if policy(contact).update? %>
+        <%= render "casa_cases/case_contact_followup", contact: contact, followup: contact.requested_followup %>
+        <%= link_to edit_case_contact_path(contact), data: {turbo: false},
+              class: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+          <i class="bi bi-pencil" aria-hidden="true"></i> Edit
+        <% end %>
+      <% end %>
+      <% if policy(contact).destroy? && !contact.deleted? %>
+        <%= link_to case_contact_path(contact.id), method: :delete, data: {turbo: false},
+              class: "inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-white px-3 py-1.5 text-sm font-medium text-rose-700 shadow-sm hover:bg-rose-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500" do %>
+          <i class="bi bi-trash" aria-hidden="true"></i> Delete
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</article>
diff --git a/app/views/casa_cases/_case_contact_followup.html.erb b/app/views/casa_cases/_case_contact_followup.html.erb
new file mode 100644
index 0000000000..9a40bdbf55
--- /dev/null
+++ b/app/views/casa_cases/_case_contact_followup.html.erb
@@ -0,0 +1,16 @@
+<%# Follow-up control for a case contact on the Tailwind case-show card. Keeps the
+    .followup-button class + followup-button-<id> id so the existing jQuery handler
+    (src/case_contact.js) binds the "Make Reminder" prompt. Labels stay Title Case
+    because system specs click them by exact text. %>
+<% if followup %>
+  <%= button_to resolve_followup_path(followup), method: :patch, id: "resolve", data: {turbo: false},
+        form_class: "inline",
+        class: "inline-flex items-center gap-1.5 rounded-lg bg-emerald-700 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-emerald-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2" do %>
+    <i class="bi bi-calendar-check" aria-hidden="true"></i> Resolve Reminder
+  <% end %>
+<% else %>
+  <button type="button" id="followup-button-<%= contact.id %>" data-turbo="false"
+          class="followup-button inline-flex items-center gap-1.5 rounded-lg border border-brand-200 bg-white px-3 py-1.5 text-sm font-medium text-brand-700 shadow-sm hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
+    <i class="bi bi-calendar-plus" aria-hidden="true"></i> Make Reminder
+  </button>
+<% end %>
diff --git a/app/views/casa_cases/_court_report_modal.html.erb b/app/views/casa_cases/_court_report_modal.html.erb
new file mode 100644
index 0000000000..35d0de1198
--- /dev/null
+++ b/app/views/casa_cases/_court_report_modal.html.erb
@@ -0,0 +1,40 @@
+<%# Court report generator (design-system dialog + court-report Stimulus controller).
+    Locals:
+      casa_case      the case (required)
+      trigger_class  classes for the trigger button (required)
+      wrapper_class  wrapper layout (default "inline-flex"; use "contents" in a dropdown menu) %>
+<%= render Dialog::GroupComponent.new(id: "generate-court-report", label: "Download court report", controllers: "court-report", wrapper_class: local_assigns.fetch(:wrapper_class, "inline-flex")) do |dialog| %>
+  <% dialog.with_trigger do %>
+    <button type="button" data-action="modal#open" class="<%= trigger_class %>">
+      <i class="bi bi-file-earmark-word" aria-hidden="true"></i> Generate Court Report
+    </button>
+  <% end %>
+  <%= form_with url: generate_case_court_reports_path, local: false, data: {court_report_target: "form"} do |form| %>
+    <%= render Dialog::HeaderComponent.new(title: "Download court report") %>
+    <%= render Dialog::BodyComponent.new(classes: "space-y-4") do %>
+      <p class="text-sm text-slate-600">Choose a date range for <span class="font-medium text-slate-900"><%= casa_case.case_number %></span>.</p>
+      <div data-court-report-target="error" class="hidden rounded-lg bg-rose-50 px-3 py-2 text-sm text-rose-700" role="alert"></div>
+      <%= form.hidden_field :case_number, value: casa_case.case_number %>
+      <%= form.hidden_field :time_zone, data: {court_report_target: "timeZone"} %>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div>
+          <%= form.label :start_date, "Starting from", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+          <%= form.date_field :start_date, value: (casa_case.most_recent_past_court_date&.date || Date.current), required: true,
+                class: "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+        </div>
+        <div>
+          <%= form.label :end_date, "Ending at", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+          <%= form.date_field :end_date, value: Date.current, required: true,
+                class: "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+        </div>
+      </div>
+    <% end %>
+    <%= render Dialog::FooterComponent.new do %>
+      <button type="button" data-action="modal#close" class="<%= button_classes(:secondary) %>">Cancel</button>
+      <button type="submit" data-action="court-report#generate" data-court-report-target="submit" class="<%= button_classes(:primary) %>">
+        <i class="bi bi-arrow-repeat hidden animate-spin" data-court-report-target="spinner" aria-hidden="true"></i>
+        <i class="bi bi-download" aria-hidden="true"></i> Generate Report
+      </button>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/casa_cases/_filter.html.erb b/app/views/casa_cases/_filter.html.erb
index aac24684da..9a7c864722 100644
--- a/app/views/casa_cases/_filter.html.erb
+++ b/app/views/casa_cases/_filter.html.erb
@@ -1,143 +1,50 @@
-<div>
-  <div class="row casa-case-filters">
-    <div class="col-sm-12 flex align-items-center">
-      <h4 class="pull-left my-1 mr-2">Filter by:</h4>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Status
-        </button>
-        <div class="dropdown-menu status-options" aria-labelledby="dropdownMenuButton1">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_active", "Active", true,
-                              class: "form-check-input",
-                              data: { value: "Active" } %>
-            <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_inactive", "Inactive", false,
-                              class: "form-check-input",
-                              data: { value: "Inactive" } %>
-            <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
-          </div>
-        </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to Volunteer
-        </button>
-        <div class="dropdown-menu assigned-to-volunteer-options" aria-labelledby="dropdownMenuButton2">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true,
-                              class: "form-check-input",
-                              data: { value: "Yes" } %>
-            <%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check form-check checkbox-style">
-            <%= check_box_tag "assigned_to_volunteer_option_no", "No", true,
-                              class: "form-check-input",
-                              data: { value: "No" } %>
-            <%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %>
-          </div>
-        </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to more than 1 Volunteer
-        </button>
-        <div class="dropdown-menu more-than-one-volunteer-options" aria-labelledby="dropdownMenuButton3">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true,
-                              class: "form-check-input",
-                              data: { value: "Yes" } %>
-            <%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "more_than_one_volunteer_option_no", "No", true,
-                              class: "form-check-input",
-                              data: { value: "No" } %>
-            <%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %>
-          </div>
-        </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to Transition Aged Youth
-        </button>
-        <div class="dropdown-menu transition-youth-options" aria-labelledby="dropdownMenuButton4">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true,
-                              class: "form-check-input",
-                              data: { value: "Yes 🦋" } %>
-            <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_no", "No", true,
-                              class: "form-check-input",
-                              data: { value: "No 🐛" } %>
-            <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
-          </div>
-        </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <% unless current_user.volunteer? %>
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Casa Case Prefix
-          </button>
-        <% end %>
-        <div class="dropdown-menu case-number-prefix-options" aria-labelledby="dropdownMenuButton5">
-          <% ["CINA", "None", "TPR"].each do |option| %>
-            <div class="dropdown-item form-check checkbox-style">
-              <% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%>
-              <% tag_name = "case_case_prefix_option_#{option_for_name}" -%>
-              <%= check_box_tag tag_name, option, true,
-                                class: "form-check-input",
-                                data: { value: option } %>
-              <%= label_tag tag_name, option, class: "form-check-label" %>
-            </div>
-          <% end %>
-        </div>
-      </div>
+<%# Casa case filter bar (casadesign, bespoke). Clear server-side selects that submit on
+    change (auto-submit controller; Turbo Drive keeps it smooth). Volunteers never reach
+    this — the view gates it on can_see_filters?. %>
+<% select_class = "block w-full appearance-none rounded-lg border border-slate-300 bg-white py-2 pl-3 pr-9 text-sm text-slate-900 shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+<% label_class = "mb-1 block text-xs font-medium text-slate-500" %>
+<% chevron_class = "bi bi-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400" %>
+
+<%= form_with url: casa_cases_path, method: :get, data: {controller: "auto-submit", action: "change->auto-submit#submit"}, class: "mb-4 grid grid-cols-2 items-end gap-3 lg:flex lg:flex-wrap" do %>
+  <div class="col-span-2 lg:min-w-[16rem] lg:max-w-sm lg:flex-1">
+    <%= label_tag :search, "Search", class: label_class %>
+    <div class="relative">
+      <i class="bi bi-search pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400" aria-hidden="true"></i>
+      <%= search_field_tag :search, params[:search], placeholder: "Search case number or volunteer", autocomplete: "off", class: "block w-full rounded-lg border border-slate-300 bg-white py-2 pl-9 #{params[:search].present? ? 'pr-9' : 'pr-3'} text-sm text-slate-900 shadow-sm placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none [&::-webkit-search-cancel-button]:hidden" %>
+      <% if params[:search].present? %>
+        <%= link_to casa_cases_path(request.query_parameters.except("search", "page")), "aria-label": "Clear search", class: "absolute right-2.5 top-1/2 -translate-y-1/2 grid h-5 w-5 place-items-center rounded text-slate-400 hover:text-slate-600" do %><i class="bi bi-x-lg text-[11px]" aria-hidden="true"></i><% end %>
+      <% end %>
     </div>
   </div>
-</div>
-
-<div class="warning-modal">
-  <div class="modal fade" id="visibleColumns" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content card-style">
-        <div class="modal-header px-0 border-0">
-          <h5 class="text-bold">Pick Displayed Columns</h5>
-          <button
-            class="border-0 bg-transparent h1"
-            data-bs-dismiss="modal">
-            <i class="lni lni-cross-circle"></i>
-          </button>
-        </div>
-        <div class="modal-body px-0">
-          <div class="mb-30">
-            <h6 class="mb-20">
-              Select columns:
-  </h6>
-            <% CasaCase::TABLE_COLUMNS.each_with_index do |column, index| %>
-              <div class="form-check checkbox-style m-2">
-                <%= check_box_tag "pick-#{column}",
-                                  "1",
-                                  false,
-                                  class: "form-check-input toggle-visibility",
-                                  data: { column: index } %>
-                <%= label_tag "pick-#{column}", column.titleize, class: "form-check-label" %>
-              </div>
-            <% end %>
-          </div>
-          <div class="action d-flex flex-wrap justify-content-end">
-            <button
-              data-bs-dismiss="modal"
-              class="main-btn danger-btn-outline btn-hover m-1"><i class="lni lni-ban mr-10"></i>
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
+  <div class="lg:min-w-[10rem]">
+    <%= label_tag :status, "Status", class: label_class %>
+    <div class="relative">
+      <%= select_tag :status, options_for_select([["Active", "active"], ["Inactive", "inactive"], ["All", "all"]], params[:status].presence || "active"), class: select_class %>
+      <i class="<%= chevron_class %>" aria-hidden="true"></i>
+    </div>
+  </div>
+  <div class="lg:min-w-[10rem]">
+    <%= label_tag :assigned, "Assignment", class: label_class %>
+    <div class="relative">
+      <%= select_tag :assigned, options_for_select([["All volunteers", ""], ["Assigned", "assigned"], ["Unassigned", "unassigned"]], params[:assigned]), class: select_class %>
+      <i class="<%= chevron_class %>" aria-hidden="true"></i>
+    </div>
+  </div>
+  <div class="lg:min-w-[10rem]">
+    <%= label_tag :transition, "Transition-aged youth", class: label_class %>
+    <div class="relative">
+      <%= select_tag :transition, options_for_select([["All", ""], ["Yes", "yes"], ["No", "no"]], params[:transition]), class: select_class %>
+      <i class="<%= chevron_class %>" aria-hidden="true"></i>
+    </div>
+  </div>
+  <div class="lg:min-w-[10rem]">
+    <%= label_tag :prefix, "Case number prefix", class: label_class %>
+    <div class="relative">
+      <%= select_tag :prefix, options_for_select([["All", ""], ["CINA", "CINA"], ["TPR", "TPR"], ["None", "None"]], params[:prefix]), class: select_class %>
+      <i class="<%= chevron_class %>" aria-hidden="true"></i>
     </div>
   </div>
-</div>
+  <noscript>
+    <%= submit_tag "Filter", class: "rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white" %>
+  </noscript>
+<% end %>
diff --git a/app/views/casa_cases/_placements.html.erb b/app/views/casa_cases/_placements.html.erb
index be1545446c..7d9ac89ffd 100644
--- a/app/views/casa_cases/_placements.html.erb
+++ b/app/views/casa_cases/_placements.html.erb
@@ -1,18 +1,13 @@
 <% current_placement = casa_case.placements.order(placement_started_at: :desc).first %>
-
-<% if current_placement %>
-  <h6>
-    <strong>Current Placement:</strong>
-    <%= current_placement.placement_type.name %>
-  </h6>
-
-  <p>Placed since: <%= current_placement.decorate.formatted_date %></p>
-  <p><%= link_to "See All Placements", casa_case_placements_path(casa_case), class: 'text-primary hover-underline' %></p>
-<% elsif casa_case.casa_org.placement_types.present? %>
-  <h6>
-    <strong>Current Placement:</strong>
-    Unknown
-  </h6>
-
-  <p><%= link_to "See All Placements", casa_case_placements_path(casa_case), class: 'text-primary hover-underline' %></p>
+<% if current_placement || casa_case.casa_org.placement_types.present? %>
+  <div class="mt-6 border-t border-slate-100 pt-4">
+    <h3 class="text-sm font-semibold text-slate-900">Current Placement:</h3>
+    <% if current_placement %>
+      <p class="mt-1 text-sm text-slate-700"><%= current_placement.placement_type.name %></p>
+      <p class="mt-0.5 text-xs text-slate-500">Placed since: <%= current_placement.decorate.formatted_date %></p>
+    <% else %>
+      <p class="mt-1 text-sm text-slate-500">Unknown</p>
+    <% end %>
+    <p class="mt-2"><%= link_to "See All Placements", casa_case_placements_path(casa_case), class: "text-sm font-medium text-brand-600 hover:text-brand-700" %></p>
+  </div>
 <% end %>
diff --git a/app/views/casa_cases/_volunteer_assignment.html.erb b/app/views/casa_cases/_volunteer_assignment.html.erb
index 0a26121283..0b93ecd3dd 100644
--- a/app/views/casa_cases/_volunteer_assignment.html.erb
+++ b/app/views/casa_cases/_volunteer_assignment.html.erb
@@ -14,7 +14,7 @@
     <% @casa_case.case_assignments.each do |assignment| %>
       <tr>
         <td data-test="volunteer-name">
-          <%= link_to assignment.volunteer.display_name, edit_volunteer_path(assignment.volunteer) %>
+          <%= link_to formatted_name(assignment.volunteer.display_name), edit_volunteer_path(assignment.volunteer) %>
         </td>
         <td data-test="volunteer-email"><%= assignment&.volunteer&.email %></td>
         <td data-test="assigned">
diff --git a/app/views/casa_cases/_volunteer_reminder_form.html.erb b/app/views/casa_cases/_volunteer_reminder_form.html.erb
new file mode 100644
index 0000000000..d710bd76a6
--- /dev/null
+++ b/app/views/casa_cases/_volunteer_reminder_form.html.erb
@@ -0,0 +1,13 @@
+<%# Show-specific Tailwind reminder form (the shared volunteers/_volunteer_reminder_form is
+    still Bootstrap and used by the un-migrated volunteers/edit page). Keeps the exact
+    "Send Reminder" button + "Send CC to Supervisor and Admin" text the system spec asserts. %>
+<%= form_with url: reminder_volunteer_path(volunteer), method: :patch, class: "flex flex-wrap items-center gap-3" do %>
+  <label class="flex items-center gap-2 text-sm text-slate-600">
+    <%= check_box_tag "with_cc", 1, false, id: "with_cc_#{volunteer.id}", class: "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" %>
+    Send CC to Supervisor and Admin
+  </label>
+  <%= button_tag type: "submit", title: "Remind volunteer to input case contacts",
+        class: "inline-flex items-center gap-1.5 rounded-lg border border-brand-200 bg-white px-3 py-1.5 text-sm font-medium text-brand-700 shadow-sm hover:bg-brand-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+    <i class="bi bi-bell" aria-hidden="true"></i> Send Reminder
+  <% end %>
+<% end %>
diff --git a/app/views/casa_cases/index.html.erb b/app/views/casa_cases/index.html.erb
index e75fb79924..963f8cbad6 100644
--- a/app/views/casa_cases/index.html.erb
+++ b/app/views/casa_cases/index.html.erb
@@ -1,108 +1,160 @@
-<% if Rails.env.development? %>
-  <div data-controller="hello">
-  </div>
-<% end %>
+<% content_for :page_title, current_user.volunteer? ? "My cases" : "Cases" %>
+<% btn_primary = button_classes(:primary) %>
+<% btn_secondary = button_classes(:secondary) %>
+<% th = "px-4 py-3 text-left text-xs font-semibold text-slate-600" %>
+<% td = "px-4 py-3 text-slate-700" %>
+<% col_count = current_user.volunteer? ? 5 : 6 %>
 
-<div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-    <div class="col-md-6">
-      <div class="title mb-30">
-        <% if current_user.volunteer? %>
-          <h1>My <%= "Case".pluralize(@casa_cases.count) %></h1>
-        <% else %>
-          <h1><%= "Case".pluralize(@casa_cases.count) %></h1>
-        <% end %>
-      </div>
-    </div>
-    <!-- end col -->
-    <div class="col-md-6">
-      <div class="breadcrumb-wrapper mb-30">
-        <span class="ml-5">
-          <% if policy(:dashboard).see_volunteers_section? %>
-            <%= link_to new_casa_case_path, class: "main-btn btn-sm primary-btn btn-hover ml-3" do %>
-              <i class="lni lni-plus"></i>
-              New Case
-            <% end %>
-          <% end %>
-        </span>
-        <% if policy(:application).admin_or_supervisor? %>
-          <span class="ml-5">
-            <%= link_to case_groups_path, class: "main-btn btn-sm primary-btn btn-hover ml-3" do %>
-              Case Groups
-            <% end %>
-          </span>
-          <span class="ml-5">
-            <%= link_to new_bulk_court_date_path, class: "main-btn btn-sm primary-btn btn-hover ml-3" do %>
-              <i class="lni lni-plus"></i>
-              New Bulk Court Date
-            <% end %>
-          </span>
-        <% end %>
-        <span class="ml-5">
-          <% if policy(CasaCase).can_see_filters? %>
-            <button
-              type="button"
-              class="main-btn btn-sm primary-btn btn-hover"
-              data-bs-toggle="modal"
-              data-bs-target="#visibleColumns"><i class="lni lni-pin mr-10"></i>
-              Pick displayed columns
-            </button>
-          <% end %>
-          </span>
-      </div>
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+    <h1 class="text-2xl font-bold tracking-tight text-slate-900">
+      <% if current_user.volunteer? %>My <%= "Case".pluralize(@pagy.count) %><% else %><%= "Case".pluralize(@pagy.count) %><% end %>
+    </h1>
+    <div class="flex flex-wrap items-center gap-2">
+      <% if policy(:dashboard).see_volunteers_section? %>
+        <%= link_to new_casa_case_path, class: btn_primary do %><i class="bi bi-plus-lg" aria-hidden="true"></i> New Case<% end %>
+      <% end %>
+      <% if policy(:application).admin_or_supervisor? %>
+        <details class="relative" data-controller="dropdown">
+          <summary class="<%= btn_secondary %> cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+            More <i class="bi bi-chevron-down text-xs text-slate-500" aria-hidden="true"></i>
+          </summary>
+          <div class="absolute right-0 z-20 mt-2 w-56 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
+            <%= link_to case_groups_path, class: "flex items-center gap-2 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none" do %><i class="bi bi-collection text-slate-400" aria-hidden="true"></i> Case Groups<% end %>
+            <%= link_to new_bulk_court_date_path, class: "flex items-center gap-2 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none" do %><i class="bi bi-calendar-plus text-slate-400" aria-hidden="true"></i> New Bulk Court Date<% end %>
+          </div>
+        </details>
+      <% end %>
     </div>
   </div>
-</div>
-<% if policy(CasaCase).can_see_filters? %>
-  <%= render 'filter' %>
-<% end %>
-<div class="row">
-  <div class="col-lg-12">
-    <div class="card-style">
-      <div class="table-wrapper table-responsive">
-        <table class="table striped-table" id="<%= @casa_cases_filter_id %>">
-          <thead>
-            <tr>
-              <th>Case Number</th>
-              <th>Hearing Type</th>
-              <th>Judge</th>
-              <th>Status</th>
-              <th>Transition Aged Youth</th>
-              <% unless current_user.volunteer? %>
-                <th>Assigned To</th>
-              <% end %>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
+
+  <% if policy(CasaCase).can_see_filters? %>
+    <%= render "filter" %>
+  <% end %>
+
+  <% if params[:search].present? %>
+    <p class="mb-4 text-sm text-slate-500">Showing <%= @pagy.count %> <%= "case".pluralize(@pagy.count) %> matching &ldquo;<%= params[:search] %>&rdquo;</p>
+  <% end %>
+
+  <%# Desktop: full table (md and up) %>
+  <div class="hidden overflow-hidden rounded-2xl border border-slate-200 bg-white py-2 shadow-sm md:block">
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-slate-100">
+            <%= sortable_header("Case number", "case_number", sort: @sort, direction: @direction) %>
+            <%= sortable_header("Next court date", "next_court_date", sort: @sort, direction: @direction) %>
+            <%= sortable_header("Status", "status", sort: @sort, direction: @direction) %>
+            <%= sortable_header("Transition aged youth", "transition", sort: @sort, direction: @direction) %>
+            <% unless current_user.volunteer? %>
+              <%= sortable_header("Assigned to", "assigned", sort: @sort, direction: @direction) %>
+            <% end %>
+            <th class="<%= th %>"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-50">
+          <% if @casa_cases.any? %>
             <% @casa_cases.each do |casa_case| %>
-              <tr class="<%= casa_case.decorate.inactive_class %>">
-                <td class="min-width"><%= link_to(casa_case.case_number, casa_case) %>
+              <tr class="hover:bg-slate-50/70">
+                <td class="<%= td %>"><%= link_to casa_case.case_number, casa_case, class: "font-medium text-brand-600 hover:text-brand-700" %></td>
+                <td class="<%= td %>"><%= casa_case.decorate.formatted_next_court_date || tag.span("—", class: "text-slate-500") %></td>
+                <td class="<%= td %>"><%= casa_case.decorate.status %></td>
+                <td class="<%= td %>">
+                  <% if casa_case.in_transition_age? %>
+                    <span class="inline-flex items-center rounded-full bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-700">Yes</span>
+                  <% else %>
+                    <span class="text-slate-500">No</span>
+                  <% end %>
                 </td>
-                <td class="min-width"><%= casa_case.hearing_type_name %></td>
-                <td class="min-width"><%= casa_case.judge_name %></td>
-                <td class="min-width"><%= casa_case.decorate.status %></td>
-                <td class="min-width"><%= casa_case.decorate.transition_aged_youth %></td>
                 <% unless current_user.volunteer? %>
-                  <td class="min-width">
+                  <td class="<%= td %>">
                     <% if casa_case.active? %>
                       <%= safe_join(casa_case.assigned_volunteers.map { |vol|
-                    link_to(vol.display_name, edit_volunteer_path(vol)) },
-                                ", ") %>
+                        link_to(formatted_name(vol.display_name), edit_volunteer_path(vol), class: "text-brand-600 hover:text-brand-700") }, ", ") %>
                     <% else %>
                       Case was deactivated on: <%= I18n.l(casa_case.updated_at, format: :standard, default: nil) %>
                     <% end %>
                   </td>
                 <% end %>
-                <td class="min-width">
-                  <i class="lni lni-pencil-alt text-danger"></i>
-                  <%= link_to "Edit", edit_casa_case_path(casa_case), class: 'text-danger' %>
+                <td class="py-3 pl-4 pr-6 text-right">
+                  <%= link_to edit_casa_case_path(casa_case), "aria-label": "Edit #{casa_case.case_number}", class: "inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+                    <i class="bi bi-pencil" aria-hidden="true"></i>Edit
+                  <% end %>
                 </td>
               </tr>
             <% end %>
-          </tbody>
-        </table>
-      </div>
+          <% else %>
+            <tr>
+              <td colspan="<%= col_count %>" class="px-4 py-14 text-center">
+                <div class="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-folder2-open text-xl" aria-hidden="true"></i></div>
+                <p class="mt-3 text-sm font-semibold text-slate-900">No cases found</p>
+                <p class="mt-1 text-sm text-slate-500"><%= policy(CasaCase).can_see_filters? ? "Try adjusting your filters." : "Cases assigned to you will appear here." %></p>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
     </div>
   </div>
+
+  <%# Mobile: stacked cards (below md) %>
+  <div class="md:hidden">
+    <% if @casa_cases.any? %>
+      <ul class="space-y-3">
+        <% @casa_cases.each do |casa_case| %>
+          <li class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+            <div class="flex items-start justify-between gap-3">
+              <%= link_to casa_case.case_number, casa_case, class: "text-base font-semibold text-brand-600 hover:text-brand-700" %>
+              <%= link_to edit_casa_case_path(casa_case), "aria-label": "Edit #{casa_case.case_number}", class: "-mr-1 -mt-1 inline-flex flex-none items-center gap-1.5 rounded-lg px-2 py-1 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %><i class="bi bi-pencil" aria-hidden="true"></i>Edit<% end %>
+            </div>
+            <dl class="mt-3 grid grid-cols-2 gap-x-4 gap-y-3">
+              <div>
+                <dt class="text-xs text-slate-500">Next court date</dt>
+                <dd class="mt-0.5 text-sm text-slate-700"><%= casa_case.decorate.formatted_next_court_date || tag.span("—", class: "text-slate-500") %></dd>
+              </div>
+              <div>
+                <dt class="text-xs text-slate-500">Status</dt>
+                <dd class="mt-0.5 text-sm text-slate-700"><%= casa_case.decorate.status %></dd>
+              </div>
+              <div>
+                <dt class="text-xs text-slate-500">Transition aged youth</dt>
+                <dd class="mt-0.5">
+                  <% if casa_case.in_transition_age? %>
+                    <span class="inline-flex items-center rounded-full bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-700">Yes</span>
+                  <% else %>
+                    <span class="text-sm text-slate-500">No</span>
+                  <% end %>
+                </dd>
+              </div>
+              <% unless current_user.volunteer? %>
+                <div>
+                  <dt class="text-xs text-slate-500">Assigned to</dt>
+                  <dd class="mt-0.5 text-sm text-slate-700">
+                    <% if casa_case.active? %>
+                      <%= safe_join(casa_case.assigned_volunteers.map { |vol|
+                        link_to(formatted_name(vol.display_name), edit_volunteer_path(vol), class: "text-brand-600 hover:text-brand-700") }, ", ").presence || tag.span("—", class: "text-slate-500") %>
+                    <% else %>
+                      <span class="text-slate-500">Deactivated <%= I18n.l(casa_case.updated_at, format: :standard, default: nil) %></span>
+                    <% end %>
+                  </dd>
+                </div>
+              <% end %>
+            </dl>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <div class="rounded-2xl border border-slate-200 bg-white px-4 py-14 text-center">
+        <div class="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-folder2-open text-xl" aria-hidden="true"></i></div>
+        <p class="mt-3 text-sm font-semibold text-slate-900">No cases found</p>
+        <p class="mt-1 text-sm text-slate-500"><%= policy(CasaCase).can_see_filters? ? "Try adjusting your filters." : "Cases assigned to you will appear here." %></p>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @casa_cases.any? %>
+    <div class="mt-4">
+      <%= render "shared/pagination", pagy: @pagy %>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/casa_cases/show.html.erb b/app/views/casa_cases/show.html.erb
index e69cdb3864..1a15fbca73 100644
--- a/app/views/casa_cases/show.html.erb
+++ b/app/views/casa_cases/show.html.erb
@@ -1,201 +1,228 @@
-<div class="row">
-  <%= render "thank_you_modal" %>
-  <div class="col-sm-12 form-header d-flex flex-wrap justify-content-between">
-    <h1 class="pull-left my-4"><%= @casa_case.decorate.transition_aged_youth_icon %>CASA Case Details</h1>
-    <div class="d-inline-flex flex-wrap my-4 gap-3">
-      <%- if @casa_case.active? %>
-        <%= link_to new_case_contact_path(case_contact: {casa_case_id: @casa_case.id}), class: "main-btn primary-btn btn-sm btn-hover pull-left" do %>
-          <i class="lni lni-plus mr-10"></i>
-          New Case Contact
-        <% end %>
-      <%- end %>
-      <% if @casa_case.active? %>
-        <%= link_to edit_casa_case_path(@casa_case), class: "main-btn primary-btn btn-sm btn-hover pull-left" do %>
-          <i class="lni lni-pencil mr-10"></i>
-          Edit Case Details
-        <% end %>
-      <% end %>
-      <% if @casa_case.in_transition_age? %>
-        <%= link_to(casa_case_emancipation_path(@casa_case),
-                class: "main-btn primary-btn btn-sm") do %>
-          Emancipation
-          <%= render BadgeComponent.new(text: @casa_case.decorate.emancipation_checklist_count,
-                                        type: :light,
-                                        margin: false) %>
-        <% end %>
-      <% end %>
-      <% if @casa_case.casa_org.show_fund_request %>
-        <%= link_to("New Fund Request", new_casa_case_fund_request_path(@casa_case),
-  class: "main-btn primary-btn btn-sm") %>
-      <% end %>
-      <%= render "casa_cases/generate_report_modal" %>
-    </div>
-  </div>
-</div>
-<div class="card card-container">
-  <div class="card-body">
-    <% if !@casa_case.active %>
-      <%= render "inactive_case", casa_case: @casa_case %>
-    <% end %>
-    <div>
-      <h6><strong>Case number:</strong> <%= @casa_case.case_number %>
-        <%= volunteer_badge(@casa_case, current_user) %>
-      </h6>
-    </div>
-    <% if @casa_case.hearing_type %>
+<% content_for :page_title, "Case #{@casa_case.case_number}" %>
+<% btn_primary = button_classes(:primary) %>
+<% btn_secondary = button_classes(:secondary) %>
+<% card = "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6" %>
+<% section_title = "text-base font-semibold text-slate-900" %>
+<% fact_label = "text-sm font-medium text-slate-500" %>
+<% fact_value = "text-sm text-slate-800" %>
+<% menu_item = "flex items-start gap-2 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none" %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-5xl space-y-6">
+    <%# Header %>
+    <div class="flex flex-wrap items-start justify-between gap-3">
       <div>
-        <h6><strong>Hearing Type:</strong> <%= @casa_case.hearing_type_name %></h6>
+        <p class="text-sm font-medium text-brand-600"><%= link_to "Cases", casa_cases_path, class: "hover:text-brand-700" %></p>
+        <h1 class="mt-1 text-2xl font-bold tracking-tight text-slate-900">Case <%= @casa_case.case_number %></h1>
       </div>
-    <% end %>
-    <% if @casa_case.has_judge_name? %>
-      <div>
-        <h6><strong>Judge:</strong> <%= @casa_case.judge_name %></h6>
+      <div class="flex flex-wrap items-center gap-2">
+        <% if @casa_case.active? %>
+          <%= link_to new_case_contact_path(case_contact: {casa_case_id: @casa_case.id}), class: btn_primary do %>
+            <i class="bi bi-plus-lg" aria-hidden="true"></i> New Case Contact
+          <% end %>
+          <%# Edit is a visible button on sm+ and collapses into the More menu on mobile %>
+          <span class="hidden sm:contents">
+            <%= link_to edit_casa_case_path(@casa_case), class: btn_secondary do %>
+              <i class="bi bi-pencil" aria-hidden="true"></i> Edit Case Details
+            <% end %>
+          </span>
+        <% end %>
+        <%# Overflow menu (matches the cases index). On mobile it also holds Edit. %>
+        <details class="relative" data-controller="dropdown">
+          <summary class="<%= btn_secondary %> cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+            More <i class="bi bi-chevron-down text-xs text-slate-500" aria-hidden="true"></i>
+          </summary>
+          <div class="absolute right-0 z-20 mt-2 w-60 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
+            <% if @casa_case.active? %>
+              <%= link_to edit_casa_case_path(@casa_case), class: "#{menu_item} w-full sm:hidden" do %>
+                <i class="bi bi-pencil text-slate-400" aria-hidden="true"></i> Edit Case Details
+              <% end %>
+            <% end %>
+            <%= render "casa_cases/court_report_modal", casa_case: @casa_case, trigger_class: "#{menu_item} w-full text-left", wrapper_class: "contents" %>
+            <% if @casa_case.in_transition_age? %>
+              <%= link_to casa_case_emancipation_path(@casa_case), class: "#{menu_item} justify-between" do %>
+                <span class="flex items-start gap-2"><i class="bi bi-mortarboard text-slate-400" aria-hidden="true"></i> Emancipation</span>
+                <span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-700"><%= @casa_case.decorate.emancipation_checklist_count %></span>
+              <% end %>
+            <% end %>
+            <% if @casa_case.casa_org.show_fund_request %>
+              <%= link_to new_casa_case_fund_request_path(@casa_case), class: menu_item do %>
+                <i class="bi bi-cash-coin text-slate-400" aria-hidden="true"></i> New Fund Request
+              <% end %>
+            <% end %>
+          </div>
+        </details>
       </div>
-    <% end %>
-    <div>
-      <h6><strong>Transition Aged Youth:</strong> <%= @casa_case.decorate.transition_aged_youth %></h6>
-    </div>
-    <div>
-      <h6>
-        <strong>
-          Youth's Date in Care:
-        </strong>
-        <%= @casa_case.decorate.date_in_care %>
-        <%= @casa_case.decorate.duration_in_care %>
-      </h6>
-    </div>
-    <div>
-      <h6>
-        <strong>Next Court Date:</strong>
-        <%= I18n.l(@casa_case.next_court_date&.date, format: :day_and_date, default: '') %>
-        <%= render "calendar_button", date: @casa_case.decorate.calendar_next_court_date,
-                 id: "btnNextCourtDate",
-                 tooltip: "Add Next Court Date to Calendar",
-                 title: "Next Court Date for [#{@casa_case.case_number}]" %>
-      </h6>
-    </div>
-    <div>
-      <h6>
-        <strong>Court Report Status:</strong>
-        <%= @casa_case.decorate.court_report_submission %></h6>
     </div>
-    <% unless @casa_case.court_report_not_submitted? %>
-      <% if @casa_case.court_report_submitted? && @casa_case.court_reports.attached? %>
-        <%= link_to('Click to download',
-                    rails_blob_path(@casa_case.latest_court_report, disposition: 'attachment')) %>
-      <% end %>
-      <div>
-        <h6>
-          <strong>Court Report Submitted Date:</strong>
-          <%= @casa_case.decorate.court_report_submitted_date %></h6>
+
+    <%# Inactive banner %>
+    <% unless @casa_case.active? %>
+      <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3">
+        <p class="text-sm text-rose-800">Case was deactivated on <%= I18n.l(@casa_case.updated_at, format: :standard, default: nil) %>.</p>
+        <% if Pundit.policy(current_user, @casa_case).update_case_status? %>
+          <%= link_to "Reactivate CASA Case", reactivate_casa_case_path(@casa_case), method: :patch,
+                class: "inline-flex items-center gap-2 rounded-lg bg-rose-600 px-3 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-rose-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2" %>
+        <% end %>
       </div>
     <% end %>
-    <% if @casa_case.case_court_orders.exists? %>
-      <h6><strong>Court Orders:</strong></h6>
-      <% @casa_case.case_court_orders.each do |court_order| %>
-        <p><%= court_order.implementation_status_symbol %> <%= court_order.text %></p>
-      <% end %>
-    <% end %>
-    <%= render "court_dates", casa_case: @casa_case %>
-    <%= render "placements", casa_case: @casa_case %>
-    <div>
-      <h6><strong>Assigned Volunteers:</strong></h6>
-      <div class="container">
-        <% Pundit.policy_scope(current_user, @casa_case.assigned_volunteers).each do |volunteer| %>
-          <div class="row mb-3">
-            <% if current_user.volunteer? %>
-              <div class="col-12"><%= volunteer.display_name %></div>
-            <% else %>
-              <div class="col-2">
-                <%= link_to "#{volunteer.display_name} ", edit_volunteer_path(volunteer) %>
-              </div>
-              <div class="col-10">
-                <%= render "volunteers/volunteer_reminder_form", volunteer: volunteer %>
-              </div>
+
+    <%# Case details %>
+    <section class="<%= card %>">
+      <h2 class="<%= section_title %>">Case details</h2>
+      <dl class="mt-4 grid grid-cols-1 gap-x-8 gap-y-3 text-sm sm:grid-cols-2">
+        <div>
+          <dt class="inline font-medium text-slate-500">Transition Aged Youth:</dt>
+          <dd class="inline text-slate-800"><%= @casa_case.in_transition_age? ? "Yes" : "No" %></dd>
+        </div>
+        <div>
+          <dt class="inline font-medium text-slate-500">Youth's Date in Care:</dt>
+          <dd class="inline text-slate-800">
+            <%= @casa_case.decorate.date_in_care || tag.span("Not set", class: "text-slate-500") %>
+            <% if @casa_case.decorate.duration_in_care %><span class="text-slate-500"><%= @casa_case.decorate.duration_in_care %></span><% end %>
+          </dd>
+        </div>
+        <div>
+          <dt class="inline font-medium text-slate-500">Next Court Date:</dt>
+          <dd class="inline text-slate-800">
+            <%= I18n.l(@casa_case.next_court_date&.date, format: :day_and_date, default: "None set") %>
+            <% if (cal = @casa_case.decorate.calendar_next_court_date) %>
+              <span class="ml-1 inline-block align-middle" data-controller="add-to-calendar"
+                    data-add-to-calendar-title-value="Next Court Date for <%= @casa_case.case_number %>"
+                    data-add-to-calendar-start-value="<%= cal[:start] %>"
+                    data-add-to-calendar-end-value="<%= cal[:end] %>"
+                    data-add-to-calendar-tooltip-value="Add Next Court Date to Calendar"></span>
             <% end %>
-          </div>
+          </dd>
+        </div>
+        <div>
+          <dt class="inline font-medium text-slate-500">Court Report Status:</dt>
+          <dd class="inline text-slate-800">
+            <%= @casa_case.decorate.court_report_submission %>
+            <% unless @casa_case.court_report_not_submitted? %>
+              <% if @casa_case.court_report_submitted? && @casa_case.court_reports.attached? %>
+                &middot; <%= link_to "Click to download", rails_blob_path(@casa_case.latest_court_report, disposition: "attachment"), class: "font-medium text-brand-600 hover:text-brand-700" %>
+              <% end %>
+              <span class="text-slate-500">&middot; Submitted <%= @casa_case.decorate.court_report_submitted_date %></span>
+            <% end %>
+          </dd>
+        </div>
+      </dl>
+
+      <% if @casa_case.case_court_orders.exists? %>
+        <div class="mt-6 border-t border-slate-100 pt-4">
+          <h3 class="text-sm font-semibold text-slate-900">Court Orders</h3>
+          <ul class="mt-2 space-y-1.5">
+            <% @casa_case.case_court_orders.each do |court_order| %>
+              <li class="flex items-start gap-2 text-sm text-slate-700">
+                <span aria-hidden="true"><%= court_order.implementation_status_symbol %></span>
+                <span><%= court_order.text %></span>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+      <%= render "placements", casa_case: @casa_case %>
+    </section>
+
+    <%# Court dates %>
+    <% court_dates = @casa_case.court_dates.includes(:hearing_type).ordered_ascending.load %>
+    <section class="<%= card %>">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <h2 class="<%= section_title %>">Court dates</h2>
+        <%= link_to new_casa_case_court_date_path(@casa_case), class: btn_secondary do %>
+          <i class="bi bi-calendar-plus" aria-hidden="true"></i> Add a court date
         <% end %>
       </div>
-      <br>
-      <% if @casa_case.case_contacts.present? %>
-        <div class="text-right mb-2">
-          <%= link_to casa_case_path(params[:id], format: :xlsx), class: "main-btn primary-btn btn-sm btn-hover" do %>
-            <i class="lni lni-download mr-10"></i>
-            Download All
+      <% if court_dates.empty? %>
+        <p class="mt-3 text-sm text-slate-500">No Court Dates</p>
+      <% else %>
+        <ul class="mt-3 divide-y divide-slate-100">
+          <% court_dates.each do |pcd| %>
+            <li class="flex flex-wrap items-center justify-between gap-2 py-2.5">
+              <div class="flex items-center gap-3">
+                <%= link_to pcd.decorate.court_date_info, casa_case_court_date_path(@casa_case, pcd), class: "text-sm font-medium text-brand-600 hover:text-brand-700" %>
+                <% if (report = pcd.latest_associated_report) %>
+                  <%= link_to "Attached report", rails_blob_path(report, disposition: "attachment"), class: "text-xs text-slate-500 hover:text-slate-700" %>
+                <% end %>
+              </div>
+              <span data-controller="add-to-calendar"
+                    data-add-to-calendar-title-value="Court Date <%= @casa_case.case_number %>"
+                    data-add-to-calendar-start-value="<%= pcd.date.strftime("%Y-%m-%d") %>"
+                    data-add-to-calendar-end-value="<%= pcd.date.strftime("%Y-%m-%d") %>"
+                    data-add-to-calendar-tooltip-value="Add court date to calendar"></span>
+            </li>
           <% end %>
-        </div>
+        </ul>
+      <% end %>
+    </section>
+
+    <%# Assigned volunteers %>
+    <section class="<%= card %>">
+      <h2 class="<%= section_title %>">Assigned Volunteers:</h2>
+      <% assigned = Pundit.policy_scope(current_user, @casa_case.assigned_volunteers) %>
+      <% if assigned.any? %>
+        <ul class="mt-3 space-y-3">
+          <% assigned.each do |volunteer| %>
+            <li class="flex flex-wrap items-center justify-between gap-3">
+              <% if current_user.volunteer? %>
+                <span class="text-sm font-medium text-slate-800"><%= formatted_name(volunteer.display_name) %></span>
+              <% else %>
+                <%= link_to formatted_name(volunteer.display_name), edit_volunteer_path(volunteer), class: "text-sm font-medium text-brand-600 hover:text-brand-700" %>
+                <%= render "casa_cases/volunteer_reminder_form", volunteer: volunteer %>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <p class="mt-3 text-sm text-slate-500">No volunteers assigned.</p>
       <% end %>
-      <div id="case_contacts_list">
-        <% if current_user.supervisor? || current_user.casa_admin? %>
-          <%= render(partial: "case_contacts/case_contact",
-                    collection: @casa_case.decorate
-                      .case_contacts_ordered_by_occurred_at
-                      .includes(
-                        :creator,
-                        :followups,
-                        :contact_types,
-                        contact_topic_answers: [:contact_topic]
-                      )
-                      .grab_all(current_user),
-                    as: :contact) %>
+    </section>
+
+    <%# Case contacts %>
+    <section class="<%= card %>">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <h2 class="<%= section_title %>">Case contacts</h2>
+        <% if @casa_case.case_contacts.present? %>
+          <%= link_to casa_case_path(@casa_case, format: :xlsx), class: btn_secondary do %>
+            <i class="bi bi-download" aria-hidden="true"></i> Download All
+          <% end %>
+        <% end %>
+      </div>
+      <% contacts = if current_user.supervisor? || current_user.casa_admin?
+           @casa_case.decorate.case_contacts_ordered_by_occurred_at
+         else
+           @casa_case.decorate.case_contacts_filtered_by_active_assignment_ordered_by_occurred_at
+         end.includes(:creator, :followups, :contact_types, contact_topic_answers: [:contact_topic]).grab_all(current_user) %>
+      <div id="case_contacts_list" class="mt-4 space-y-3">
+        <% if contacts.any? %>
+          <%= render partial: "casa_cases/case_contact_card", collection: contacts, as: :contact %>
         <% else %>
-          <%= render(partial: "case_contacts/case_contact",
-                    collection: @casa_case.decorate
-                      .case_contacts_filtered_by_active_assignment_ordered_by_occurred_at
-                      .includes(
-                        :creator,
-                        :followups,
-                        :contact_types,
-                        contact_topic_answers: [:contact_topic]
-                      )
-                      .grab_all(current_user),
-                    as: :contact) %>
+          <p class="text-sm text-slate-500">No case contacts logged yet.</p>
         <% end %>
       </div>
-    </div>
+    </section>
   </div>
 </div>
 
-<%# clear local storage when successfully created case_contacts %>
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    if (/\/casa_cases\/.*\?.*success=true/.test(window.location.href)) {
-      window.localStorage.removeItem('casa-contact-form')
-    }
-  });
-  const ELEMENTS = {
-    'caseSelect': '#case-selection',
-    'generateBtn': '#btnGenerateReport',
-  }
-  const showBtn = el => el.classList.remove('d-none')
-  const enableBtn = (el) => {
-    el.disabled = false
-    el.classList.remove('disabled')
-    el.removeAttribute('aria-disabled')
-  }
-
-  const handleSelect = (e) => {
-    const selectEl = e.target
-    const generateBtn = selectEl.form.querySelector(ELEMENTS.generateBtn)
-
-    // when selecting a case, reset buttons to initial state
-    enableBtn(generateBtn)
-    showBtn(generateBtn)
-  }
-
-  const bindElements = () => {
-    const caseSelectEl = document.querySelector(ELEMENTS.caseSelect)
-
-    if (caseSelectEl)
-      caseSelectEl.addEventListener('change', handleSelect)
-  }
-
-  const setTimeZone = () => {
-    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-    document.getElementById("user-time-zone").value = timeZone
-  }
-
-  window.onload = function () {
-    bindElements()
-  }
-</script>
+<%# Thank-you dialog (auto-opens on the success redirect; also clears the saved draft) %>
+<% if params[:success].present? %>
+  <%= render Dialog::GroupComponent.new(label: "Case contact created", open_on_connect: true, controllers: "local-storage-reset", data: {local_storage_reset_key_value: "casa-contact-form"}) do %>
+    <%= render Dialog::BodyComponent.new(centered: true) do %>
+      <div class="mx-auto grid h-12 w-12 place-items-center rounded-full bg-emerald-50 text-emerald-600"><i class="bi bi-check-lg text-xl" aria-hidden="true"></i></div>
+      <h2 class="mt-3 text-base font-semibold text-slate-900">Case contact created</h2>
+      <p class="mt-1 text-sm text-slate-600"><%= thank_you_message %></p>
+      <% case when_do_we_have_court_dates(@casa_case)
+         when "future" %>
+        <p class="mt-3 text-sm text-slate-500">Please enter the previous court date if you know it so court reports can be generated with the correct case contacts.</p>
+      <% when "past" %>
+        <p class="mt-3 text-sm text-slate-500">Please enter the next court date if you know it so court reports can be generated with the correct case contacts.</p>
+      <% when "none" %>
+        <p class="mt-3 text-sm text-slate-500">Please enter any past or future court dates if you know them so court reports can be generated with the correct case contacts.</p>
+      <% end %>
+    <% end %>
+    <%= render Dialog::FooterComponent.new(align: :center) do %>
+      <button type="button" data-action="modal#close" class="<%= btn_secondary %>">Close</button>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/case_assignments/index.html.erb b/app/views/case_assignments/index.html.erb
index ddcef964a5..4af9616366 100644
--- a/app/views/case_assignments/index.html.erb
+++ b/app/views/case_assignments/index.html.erb
@@ -1,4 +1,4 @@
-<h1><%= "Editing #{@volunteer.display_name}" %></h1>
+<h1><%= "Editing #{formatted_name(@volunteer.display_name)}" %></h1>
 
 <br>
 
diff --git a/app/views/case_contacts/_case_contact.html.erb b/app/views/case_contacts/_case_contact.html.erb
index fbabde64af..a81a3c564d 100644
--- a/app/views/case_contacts/_case_contact.html.erb
+++ b/app/views/case_contacts/_case_contact.html.erb
@@ -56,18 +56,18 @@
       Created by:
       <% if policy(contact).edit? %>
         <% if current_user.volunteer? %>
-          <%= contact.creator&.display_name %>
+          <%= formatted_name(contact.creator&.display_name) %>
         <% else %>
           <% if contact.creator&.supervisor? %>
-            <%= link_to contact.creator&.display_name, edit_supervisor_path(contact.creator), data: { turbo: false } %>
+            <%= link_to formatted_name(contact.creator&.display_name), edit_supervisor_path(contact.creator), data: { turbo: false } %>
           <% elsif contact.creator&.casa_admin? %>
-            <%= link_to contact.creator&.display_name, edit_users_path, data: { turbo: false } %>
+            <%= link_to formatted_name(contact.creator&.display_name), edit_users_path, data: { turbo: false } %>
           <% else %>
-            <%= link_to contact.creator&.display_name, edit_volunteer_path(contact.creator), data: { turbo: false } %>
+            <%= link_to formatted_name(contact.creator&.display_name), edit_volunteer_path(contact.creator), data: { turbo: false } %>
           <% end %>
         <% end %>
       <% else %>
-        <%= contact.creator&.display_name %>
+        <%= formatted_name(contact.creator&.display_name) %>
       <% end %>
     </h6>
   </div>
diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
index f9da61b526..c934015896 100644
--- a/app/views/case_contacts/case_contacts_new_design/index.html.erb
+++ b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -182,18 +182,18 @@
               <td>
                 <% if policy(case_contact).edit? %>
                   <% if current_user.volunteer? %>
-                    <%= case_contact.creator&.display_name %>
+                    <%= formatted_name(case_contact.creator&.display_name) %>
                   <% else %>
                     <% if case_contact.creator&.supervisor? %>
-                      <%= link_to case_contact.creator&.display_name, edit_supervisor_path(case_contact.creator), data: { turbo: false } %>
+                      <%= link_to formatted_name(case_contact.creator&.display_name), edit_supervisor_path(case_contact.creator), data: { turbo: false } %>
                     <% elsif case_contact.creator&.casa_admin? %>
-                      <%= link_to case_contact.creator&.display_name, edit_users_path, data: { turbo: false } %>
+                      <%= link_to formatted_name(case_contact.creator&.display_name), edit_users_path, data: { turbo: false } %>
                     <% else %>
-                      <%= link_to case_contact.creator&.display_name, edit_volunteer_path(case_contact.creator), data: { turbo: false } %>
+                      <%= link_to formatted_name(case_contact.creator&.display_name), edit_volunteer_path(case_contact.creator), data: { turbo: false } %>
                     <% end %>
                   <% end %>
                 <% else %>
-                  <%= case_contact.creator&.display_name %>
+                  <%= formatted_name(case_contact.creator&.display_name) %>
                 <% end %>
               </td>
               <td>
diff --git a/app/views/case_groups/_form.html.erb b/app/views/case_groups/_form.html.erb
index 125957f11f..9c114c8c45 100644
--- a/app/views/case_groups/_form.html.erb
+++ b/app/views/case_groups/_form.html.erb
@@ -1,43 +1,41 @@
-<div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-    <div class="col-md-6">
-      <div class="title mb-30">
-        <h1>
-          <% if case_group.persisted? %>
-            Edit Case Group
-          <% else %>
-            New Case Group
-          <% end %>
-        </h1>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="card-style mb-30">
-  <%= form_with model: case_group do |form| %>
-    <%= render "shared/error_messages", resource: case_group %>
+<% content_for :page_title, case_group.persisted? ? "Edit case group" : "New case group" %>
+<% input_class = "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+<% btn_primary = button_classes(:primary) %>
 
-    <div class="input-style-1">
-      <%= form.label :name %>
-      <%= form.text_field :name, required: true %>
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-2xl">
+    <div class="mb-6">
+      <p class="text-sm font-medium text-brand-600"><%= link_to "Case groups", case_groups_path, class: "hover:text-brand-700" %></p>
+      <h1 class="mt-1 text-2xl font-bold tracking-tight text-slate-900"><%= case_group.persisted? ? "Edit Case Group" : "New Case Group" %></h1>
     </div>
 
-    <div class="input-style-1" data-controller="multiple-select">
-      <%= form.label :casa_case_ids, 'Cases' %>
-      <%= form.select(
-        :casa_case_ids,
-        current_organization.casa_cases.map { |casa_case| [sanitize("#{casa_case.case_number} - #{volunteer_badge(casa_case, current_user)}"), casa_case.id] },
-        { include_hidden: false, autocomplete: "off" },
-        { class: "form-control", multiple: true,
-          data: { "multiple-select-target": "select" }
-        }
-      ) %>
-    </div>
+    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <%= form_with model: case_group do |form| %>
+        <%= render "shared/form_errors", resource: case_group %>
+        <div class="space-y-5">
+          <div>
+            <%= form.label :name, class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+            <%= form.text_field :name, required: true, class: input_class %>
+          </div>
+
+          <div data-controller="multiple-select">
+            <%= form.label :casa_case_ids, "Cases", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+            <%= form.select(
+              :casa_case_ids,
+              current_organization.casa_cases.map { |casa_case| ["#{casa_case.case_number} - #{casa_case.assigned_volunteers.map(&:display_name).join(", ").presence || "Unassigned"}", casa_case.id] },
+              {include_hidden: false, autocomplete: "off"},
+              {multiple: true, data: {"multiple-select-target": "select"}}
+            ) %>
+          </div>
 
-    <div class="actions mb-10">
-      <%= button_tag(type: "submit", class: "btn-sm main-btn primary-btn btn-hover") do %>
-        <i class="lni lni-checkmark-circle mr-10"></i> Submit
+          <div class="flex items-center gap-3">
+            <%= button_tag(type: "submit", class: btn_primary) do %>
+              <i class="bi bi-check-lg" aria-hidden="true"></i> Submit
+            <% end %>
+            <%= link_to "Cancel", case_groups_path, class: "text-sm font-medium text-slate-600 hover:text-slate-900" %>
+          </div>
+        </div>
       <% end %>
     </div>
-  <% end %>
+  </div>
 </div>
diff --git a/app/views/case_groups/index.html.erb b/app/views/case_groups/index.html.erb
index dc4949992c..fc7db14492 100644
--- a/app/views/case_groups/index.html.erb
+++ b/app/views/case_groups/index.html.erb
@@ -1,71 +1,110 @@
-<div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-    <div class="col-md-6">
-      <div class="title mb-30">
-        <h1>Case Groups</h1>
-      </div>
+<% content_for :page_title, "Case groups" %>
+<% btn_primary = button_classes(:primary) %>
+<% action_link = "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" %>
+<% th = "px-4 py-3 text-left text-xs font-semibold text-slate-600" %>
+<% td = "px-4 py-3 align-top text-slate-700" %>
+<% case_links = ->(cg) { safe_join(cg.casa_cases.map { |c| tag.li(link_to(c.case_number, casa_case_path(c), class: "text-brand-600 hover:text-brand-700")) }) } %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mb-6 flex flex-wrap items-start justify-between gap-3">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Case Groups</h1>
+      <p class="mt-1 max-w-2xl text-sm text-slate-500">
+        Case groups bulk-create court dates for every case in the group. For example, if siblings share a court date, group them and use the
+        <%= link_to "Bulk Court Date", new_bulk_court_date_path, class: "font-medium text-brand-600 hover:text-brand-700" %> form to add a court date for all of them at once.
+      </p>
     </div>
+    <%= link_to new_case_group_path, class: btn_primary do %>
+      <i class="bi bi-plus-lg" aria-hidden="true"></i> New Case Group
+    <% end %>
   </div>
-</div>
-<div class="tables-wrapper">
-  <div class="row">
-    <div class="col-lg-12">
-      <div class="card-style mb-30">
-        <h3 class="mb-10">Case Groups</h3>
-        <p class="text-sm mb-20">
-          Case groups are used to bulk create court dates for all cases in a group. For example, if siblings attend the same court data you can create a case group for them and then use the
-          <%= link_to 'Bulk Court Date', new_bulk_court_date_path %>
-          form to create a court date for all of them.
-        </p>
-        <%= link_to new_case_group_path, class: "btn-sm main-btn primary-btn btn-hover" do %>
-          <i class="lni lni-plus mr-10"></i>
-          New Case Group
-        <% end %>
-        <div class="table-wrapper table-responsive">
-          <table class="table striped-table" id="case-groups">
-            <thead>
-            <tr>
-              <th>Name</th>
-              <th>Case Numbers</th>
-              <th>Updated At</th>
-              <th>Actions</th>
-            </tr>
-            </thead>
-            <tbody>
-            <% @case_groups.each do |case_group| %>
-              <tr>
-                <td class="min-width">
-                  <%= case_group.name %>
-                </td>
-                <td class="min-width">
-                  <ul>
-                    <% case_group.casa_cases.each do |casa_case| %>
-                      <li>
-                        <%= link_to casa_case.case_number, casa_case_path(casa_case) %>
-                        <%= volunteer_badge(casa_case, current_user) %>
-                      </li>
-                    <% end %>
-                  </ul>
-                </td>
-                <td class="min-width">
-                  <%= time_ago_in_words(case_group.updated_at) %> ago
-                </td>
-                <td>
-                  <%= link_to edit_case_group_path(case_group) do %>
-                    <div class="action">
-                      <button class="text-danger">
-                        <i class="lni lni-pencil-alt"></i> Edit
-                      </button>
-                    </div>
+
+  <% if @case_groups.any? %>
+    <%# Desktop: table (md and up) %>
+    <div class="hidden overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm md:block">
+      <table id="case-groups" class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-slate-100">
+            <th class="<%= th %>">Name</th>
+            <th class="<%= th %>">Case numbers</th>
+            <th class="<%= th %>">Updated</th>
+            <th class="<%= th %>"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-50">
+          <% @case_groups.each do |case_group| %>
+            <tr class="hover:bg-slate-50/70">
+              <td class="<%= td %> font-medium text-slate-900"><%= case_group.name %></td>
+              <td class="<%= td %>">
+                <% if case_group.casa_cases.any? %>
+                  <ul class="space-y-1"><%= case_links.call(case_group) %></ul>
+                <% else %>
+                  <span class="text-slate-500">No cases</span>
+                <% end %>
+              </td>
+              <td class="<%= td %> whitespace-nowrap text-slate-500"><%= time_ago_in_words(case_group.updated_at) %> ago</td>
+              <td class="px-4 py-3 align-top text-right">
+                <div class="flex items-center justify-end gap-1">
+                  <%= link_to edit_case_group_path(case_group), class: "#{action_link} text-slate-600 hover:bg-slate-100 hover:text-slate-900" do %>
+                    <i class="bi bi-pencil" aria-hidden="true"></i> Edit
                   <% end %>
-                  <%= link_to 'Delete', case_group_path(case_group), class: 'btn btn-danger', method: :delete, data: { confirm: "Are you sure that you want to delete this case group?" } %>
-                </td>
-              </tr>
-            <% end %>
-            </tbody>
-          </table>
-        </div>
-      </div>
+                  <%= render "shared/confirm_button",
+                        url: case_group_path(case_group),
+                        title: "Delete case group?",
+                        message: "\"#{case_group.name}\" will be deleted. The cases in it are not affected.",
+                        trigger_icon: "bi bi-trash", trigger_label: "Delete",
+                        trigger_class: "#{action_link} text-rose-600 hover:bg-rose-50 hover:text-rose-700" %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
     </div>
-  </div>
+
+    <%# Mobile: stacked cards (below md) %>
+    <ul class="space-y-3 md:hidden">
+      <% @case_groups.each do |case_group| %>
+        <li class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
+          <div class="flex items-start justify-between gap-3">
+            <h2 class="text-base font-semibold text-slate-900"><%= case_group.name %></h2>
+            <div class="flex flex-none items-center gap-1">
+              <%= link_to edit_case_group_path(case_group), "aria-label": "Edit #{case_group.name}", class: "#{action_link} text-slate-600 hover:bg-slate-100 hover:text-slate-900" do %>
+                <i class="bi bi-pencil" aria-hidden="true"></i> Edit
+              <% end %>
+              <%= render "shared/confirm_button",
+                    url: case_group_path(case_group),
+                    title: "Delete case group?",
+                    message: "\"#{case_group.name}\" will be deleted. The cases in it are not affected.",
+                    trigger_icon: "bi bi-trash",
+                    aria_label: "Delete #{case_group.name}",
+                    trigger_class: "#{action_link} text-rose-600 hover:bg-rose-50 hover:text-rose-700" %>
+            </div>
+          </div>
+          <dl class="mt-3 space-y-2 text-sm">
+            <div>
+              <dt class="text-xs text-slate-500">Case numbers</dt>
+              <dd class="mt-0.5">
+                <% if case_group.casa_cases.any? %>
+                  <ul class="space-y-1"><%= case_links.call(case_group) %></ul>
+                <% else %>
+                  <span class="text-slate-500">No cases</span>
+                <% end %>
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-slate-500">Updated</dt>
+              <dd class="mt-0.5 text-slate-600"><%= time_ago_in_words(case_group.updated_at) %> ago</dd>
+            </div>
+          </dl>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <div class="rounded-2xl border border-slate-200 bg-white px-4 py-14 text-center shadow-sm">
+      <div class="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-collection text-xl" aria-hidden="true"></i></div>
+      <p class="mt-3 text-sm font-semibold text-slate-900">No case groups yet</p>
+      <p class="mt-1 text-sm text-slate-500">Group related cases to bulk-create court dates for them.</p>
+    </div>
+  <% end %>
 </div>
diff --git a/app/views/dashboard/admin.html.erb b/app/views/dashboard/admin.html.erb
new file mode 100644
index 0000000000..487d611fec
--- /dev/null
+++ b/app/views/dashboard/admin.html.erb
@@ -0,0 +1,87 @@
+<%#
+  Admin org-wide landing dashboard (casadesign). Rendered by DashboardController#show
+  inside the casa_app (Tailwind) layout. Data comes from AdminDashboard.
+%>
+<% content_for :page_title, "Dashboard" %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h1>
+      <p class="mt-1 text-sm text-slate-500"><%= @dashboard.empty? ? "Let's get your chapter set up." : "Your chapter at a glance." %></p>
+    </div>
+    <%= link_to new_volunteer_path, class: "inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2" do %>
+      <i class="bi bi-person-plus" aria-hidden="true"></i> Invite a volunteer
+    <% end %>
+  </div>
+
+  <% if @dashboard.empty? %>
+    <div class="mx-auto max-w-lg py-16 text-center">
+      <div class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-brand-50 text-brand-600"><i class="bi bi-buildings text-3xl" aria-hidden="true"></i></div>
+      <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-900">Welcome to your chapter</h2>
+      <p class="mx-auto mt-2 max-w-md text-sm text-slate-500">Invite volunteers and add cases to get started. Once your chapter is active, this is where you'll see what needs attention.</p>
+      <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+        <%= link_to "Invite a volunteer", new_volunteer_path, class: "inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2" %>
+        <%= link_to "Add a case", new_casa_case_path, class: "inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" %>
+      </div>
+    </div>
+  <% else %>
+    <% stats = @dashboard.stats %>
+
+    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-brand-50 text-brand-600"><i class="bi bi-people" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:volunteers] %></div>
+        <div class="text-sm text-slate-500">Active volunteers</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-sky-50 text-sky-600"><i class="bi bi-folder2" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:cases] %></div>
+        <div class="text-sm text-slate-500">Active cases</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm <%= "ring-1 ring-rose-100" if stats[:unassigned].positive? %>">
+        <span class="grid h-9 w-9 place-items-center rounded-xl <%= stats[:unassigned].positive? ? "bg-rose-50 text-rose-600" : "bg-emerald-50 text-emerald-600" %>"><i class="bi <%= stats[:unassigned].positive? ? "bi-person-dash" : "bi-check2-circle" %>" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight <%= stats[:unassigned].positive? ? "text-rose-600" : "text-slate-900" %>"><%= stats[:unassigned] %></div>
+        <div class="text-sm text-slate-500">Unassigned cases</div>
+        <div class="mt-1 text-xs text-slate-500">No active volunteer</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl <%= stats[:needs_contact].positive? ? "bg-amber-50 text-amber-600" : "bg-emerald-50 text-emerald-600" %>"><i class="bi <%= stats[:needs_contact].positive? ? "bi-clock-history" : "bi-check2-circle" %>" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:needs_contact] %></div>
+        <div class="text-sm text-slate-500">Need a contact</div>
+        <div class="mt-1 text-xs text-slate-500">Not contacted in <%= Volunteer::CONTACT_MADE_IN_DAYS_NUM %>+ days</div>
+      </div>
+    </div>
+
+    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" aria-labelledby="attention-heading">
+      <div class="mb-4 flex items-center justify-between">
+        <h2 id="attention-heading" class="text-base font-semibold text-slate-900">Needs your attention</h2>
+        <% if @dashboard.unassigned_cases.any? %><%= link_to "All cases", casa_cases_path, class: "text-sm font-medium text-brand-600 hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %><% end %>
+      </div>
+      <% if @dashboard.needs_attention.any? %>
+        <p class="mb-3 text-sm text-slate-500"><%= pluralize(@dashboard.stats[:unassigned], "active case") %> with no volunteer assigned.</p>
+        <ul class="space-y-2.5">
+          <% @dashboard.needs_attention.each do |casa_case| %>
+            <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-rose-100 bg-rose-50/40 px-4 py-3">
+              <div class="flex items-center gap-3">
+                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-600"><i class="bi bi-person-dash" aria-hidden="true"></i></span>
+                <div class="font-semibold text-slate-800"><%= link_to casa_case.case_number, casa_case_path(casa_case), class: "hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %></div>
+              </div>
+              <%= link_to casa_case_path(casa_case), class: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+                <i class="bi bi-person-plus" aria-hidden="true"></i> Assign a volunteer
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <div class="flex items-center gap-4 rounded-xl border border-emerald-100 bg-emerald-50/40 p-4">
+          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-600"><i class="bi bi-check2-circle text-xl" aria-hidden="true"></i></span>
+          <div>
+            <h3 class="text-sm font-semibold text-slate-900">Every case has a volunteer</h3>
+            <p class="mt-0.5 text-sm text-slate-600">Nice — no active cases are waiting for an assignment right now.</p>
+          </div>
+        </div>
+      <% end %>
+    </section>
+  <% end %>
+</div>
diff --git a/app/views/dashboard/supervisor.html.erb b/app/views/dashboard/supervisor.html.erb
new file mode 100644
index 0000000000..1f016bc051
--- /dev/null
+++ b/app/views/dashboard/supervisor.html.erb
@@ -0,0 +1,190 @@
+<%#
+  Supervisor landing dashboard (casadesign). Rendered by DashboardController#show
+  inside the casa_app (Tailwind) layout. Data comes from SupervisorDashboard.
+%>
+<% content_for :page_title, "Dashboard" %>
+<% avatar_classes = {
+  "sky" => "bg-sky-100 text-sky-700",
+  "violet" => "bg-violet-100 text-violet-700",
+  "emerald" => "bg-emerald-100 text-emerald-700",
+  "amber" => "bg-amber-100 text-amber-700",
+  "rose" => "bg-rose-100 text-rose-700",
+  "teal" => "bg-teal-100 text-teal-700",
+  "indigo" => "bg-indigo-100 text-indigo-700"
+} %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h1>
+      <p class="mt-1 text-sm text-slate-500"><%= @dashboard.rows.any? ? "Track volunteer progress at a glance." : "Let's get your volunteers set up." %></p>
+    </div>
+    <% if @dashboard.rows.any? %>
+      <%= link_to volunteers_path, class: "inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+        Manage all volunteers <i class="bi bi-arrow-right" aria-hidden="true"></i>
+      <% end %>
+    <% end %>
+  </div>
+
+  <% if @dashboard.volunteers.empty? %>
+    <div class="mx-auto max-w-lg py-16 text-center">
+      <div class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-brand-50 text-brand-600"><i class="bi bi-people text-3xl" aria-hidden="true"></i></div>
+      <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-900">No volunteers assigned to you yet</h2>
+      <p class="mx-auto mt-2 max-w-md text-sm text-slate-500">Once volunteers are assigned to you, this is where you'll track their case-contact activity, follow-ups, and hours — so you can see who needs support at a glance.</p>
+      <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+        <%= link_to new_volunteer_path, class: "inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2" do %>
+          <i class="bi bi-plus-lg" aria-hidden="true"></i> Invite a volunteer
+        <% end %>
+        <%= link_to volunteers_path, class: "inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+          <i class="bi bi-person-plus" aria-hidden="true"></i> Assign existing volunteers
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+    <% stats = @dashboard.stats %>
+    <% follow = stats[:needs_followup] %>
+
+    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-brand-50 text-brand-600"><i class="bi bi-people" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:active] %></div>
+        <div class="text-sm text-slate-500">Volunteers you supervise</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm <%= "ring-1 ring-rose-100" if follow.positive? %>">
+        <span class="grid h-9 w-9 place-items-center rounded-xl <%= follow.positive? ? "bg-rose-50 text-rose-600" : "bg-emerald-50 text-emerald-600" %>"><i class="bi <%= follow.positive? ? "bi-exclamation-triangle" : "bi-check2-circle" %>" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight <%= follow.positive? ? "text-rose-600" : "text-slate-900" %>"><%= follow %></div>
+        <div class="text-sm text-slate-500">Need follow-up</div>
+        <div class="mt-1 text-xs text-slate-500">A case not contacted in 14+ days</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-slate-100 text-slate-600"><i class="bi bi-dash-circle" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:no_cases] %></div>
+        <div class="text-sm text-slate-500">No active cases</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-emerald-50 text-emerald-600"><i class="bi bi-clock-history" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:hours_label] %></div>
+        <div class="text-sm text-slate-500">Hours logged (30d)</div>
+      </div>
+    </div>
+
+    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" aria-labelledby="attention-heading">
+      <div class="mb-4 flex items-center justify-between">
+        <h2 id="attention-heading" class="text-base font-semibold text-slate-900">Needs your attention</h2>
+        <% if @dashboard.needs_attention.any? %><span class="text-sm text-slate-500"><%= pluralize(@dashboard.needs_attention.size, "volunteer") %></span><% end %>
+      </div>
+      <% if @dashboard.needs_attention.any? %>
+        <ul class="space-y-2.5">
+          <% @dashboard.needs_attention.each do |row| %>
+            <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-rose-100 bg-rose-50/40 px-4 py-3">
+              <div class="flex items-center gap-3">
+                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-600"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i></span>
+                <div>
+                  <div class="font-semibold text-slate-800"><%= display_person(row.volunteer) %></div>
+                  <div class="text-xs text-slate-500"><%= pluralize(row.cases_count, "active case") %> · last contact <%= row.last_contact_label.downcase %></div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <%= link_to edit_volunteer_path(row.volunteer), class: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+                  <i class="bi bi-bell" aria-hidden="true"></i> Send reminder
+                <% end %>
+                <%= link_to "View", edit_volunteer_path(row.volunteer), "aria-label": "View #{display_person(row.volunteer)}", class: "rounded-lg px-2 py-1.5 text-sm font-medium text-brand-600 hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" %>
+              </div>
+            </li>
+          <% end %>
+        </ul>
+      <% else %>
+        <div class="flex items-center gap-4 rounded-xl border border-emerald-100 bg-emerald-50/40 p-4">
+          <span class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-emerald-100 text-emerald-600"><i class="bi bi-check2-circle text-xl" aria-hidden="true"></i></span>
+          <div>
+            <h3 class="text-sm font-semibold text-slate-900">You're all caught up</h3>
+            <p class="mt-0.5 text-sm text-slate-600">Every volunteer has logged contact with their active cases in the last 14 days. Nice work.</p>
+          </div>
+        </div>
+      <% end %>
+    </section>
+
+    <section class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white pb-2 shadow-sm" aria-labelledby="roster-heading">
+      <div class="border-b border-slate-100 p-4"><h2 id="roster-heading" class="text-base font-semibold text-slate-900">Your volunteers</h2></div>
+      <div class="hidden overflow-x-auto md:block">
+        <table class="w-full text-sm">
+          <caption class="sr-only">Your assigned volunteers with case counts, contact-follow-up status, and recent activity.</caption>
+          <thead class="text-left text-xs font-semibold text-slate-500">
+            <tr class="border-b border-slate-100">
+              <th scope="col" class="px-4 py-3 font-semibold">Volunteer</th>
+              <th scope="col" class="px-4 py-3 text-center font-semibold">Cases</th>
+              <th scope="col" class="px-4 py-3 font-semibold">Contact status</th>
+              <th scope="col" class="px-4 py-3 font-semibold">Activity (60d)</th>
+              <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-50">
+            <% @dashboard.rows.each do |row| %>
+              <tr class="hover:bg-slate-50/70">
+                <td class="px-4 py-3">
+                  <div class="flex items-center gap-3">
+                    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full text-xs font-semibold <%= avatar_classes[row.avatar_color] %>" aria-hidden="true"><%= avatar_initials(display_person(row.volunteer)) %></span>
+                    <div>
+                      <div class="font-medium text-slate-800"><%= display_person(row.volunteer) %></div>
+                      <div class="text-xs text-slate-500"><%= row.volunteer.email %></div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-3 text-center text-slate-700"><%= row.cases_count %></td>
+                <td class="px-4 py-3">
+                  <% if row.status == :on_track %>
+                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> On track</span>
+                  <% elsif row.status == :follow_up %>
+                    <span class="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Needs follow-up</span>
+                  <% else %>
+                    <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600"><i class="bi bi-dash-circle" aria-hidden="true"></i> No active cases</span>
+                  <% end %>
+                  <div class="mt-1 text-xs text-slate-500"><%= row.last_contact_label %></div>
+                </td>
+                <td class="px-4 py-3 text-slate-600">
+                  <% if row.cases_count.positive? %>
+                    <%= pluralize(row.contacts_recent, "contact") %> · <%= row.hours_label %>
+                  <% else %>
+                    <span class="text-slate-400" aria-hidden="true">—</span><span class="sr-only">No recent activity</span>
+                  <% end %>
+                </td>
+                <td class="px-4 py-3 text-right">
+                  <%= link_to edit_volunteer_path(row.volunteer), "aria-label": "View #{display_person(row.volunteer)}", class: "inline-grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <div class="divide-y divide-slate-100 md:hidden">
+        <% @dashboard.rows.each do |row| %>
+          <div class="flex items-start gap-3 p-4">
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full text-xs font-semibold <%= avatar_classes[row.avatar_color] %>" aria-hidden="true"><%= avatar_initials(display_person(row.volunteer)) %></span>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-start justify-between gap-2">
+                <div class="min-w-0">
+                  <div class="font-medium text-slate-800"><%= display_person(row.volunteer) %></div>
+                  <div class="truncate text-xs text-slate-500"><%= row.volunteer.email %></div>
+                </div>
+                <%= link_to edit_volunteer_path(row.volunteer), "aria-label": "View #{display_person(row.volunteer)}", class: "-mr-1 grid h-8 w-8 flex-none place-items-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %><i class="bi bi-chevron-right" aria-hidden="true"></i><% end %>
+              </div>
+              <div class="mt-2 flex flex-wrap items-center gap-2">
+                <% if row.status == :on_track %>
+                  <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> On track</span>
+                <% elsif row.status == :follow_up %>
+                  <span class="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Needs follow-up</span>
+                <% else %>
+                  <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600"><i class="bi bi-dash-circle" aria-hidden="true"></i> No active cases</span>
+                <% end %>
+                <span class="text-xs text-slate-500"><%= row.cases_count %> <%= "case".pluralize(row.cases_count) %></span>
+              </div>
+              <div class="mt-1 text-xs text-slate-500"><%= row.last_contact_label %><% if row.cases_count.positive? %> · <%= pluralize(row.contacts_recent, "contact") %> · <%= row.hours_label %><% end %></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+</div>
diff --git a/app/views/dashboard/volunteer.html.erb b/app/views/dashboard/volunteer.html.erb
new file mode 100644
index 0000000000..422db0a8d7
--- /dev/null
+++ b/app/views/dashboard/volunteer.html.erb
@@ -0,0 +1,125 @@
+<%#
+  Volunteer landing dashboard (casadesign). Rendered by DashboardController#show inside
+  the casa_app (Tailwind) layout. Data comes from VolunteerDashboard.
+%>
+<% content_for :page_title, "Dashboard" %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Dashboard</h1>
+      <p class="mt-1 text-sm text-slate-500"><%= @dashboard.rows.any? ? "Stay on top of your cases and contacts." : "Your cases will appear here." %></p>
+    </div>
+    <% if @dashboard.rows.any? %>
+      <%= link_to new_case_contact_path, class: "inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2" do %>
+        <i class="bi bi-plus-lg" aria-hidden="true"></i> Log a contact
+      <% end %>
+    <% end %>
+  </div>
+
+  <% if @dashboard.cases.empty? %>
+    <div class="mx-auto max-w-lg py-16 text-center">
+      <div class="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-brand-50 text-brand-600"><i class="bi bi-folder2-open text-3xl" aria-hidden="true"></i></div>
+      <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-900">No cases assigned to you yet</h2>
+      <p class="mx-auto mt-2 max-w-md text-sm text-slate-500">When a supervisor assigns you to a case, it'll show up here so you can log contacts and track your work.</p>
+    </div>
+  <% else %>
+    <% stats = @dashboard.stats %>
+    <% needs = stats[:needs_contact] %>
+
+    <div class="grid grid-cols-2 gap-4 lg:grid-cols-3">
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-brand-50 text-brand-600"><i class="bi bi-folder2" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:cases] %></div>
+        <div class="text-sm text-slate-500">Active cases</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm <%= "ring-1 ring-rose-100" if needs.positive? %>">
+        <span class="grid h-9 w-9 place-items-center rounded-xl <%= needs.positive? ? "bg-rose-50 text-rose-600" : "bg-emerald-50 text-emerald-600" %>"><i class="bi <%= needs.positive? ? "bi-exclamation-triangle" : "bi-check2-circle" %>" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight <%= needs.positive? ? "text-rose-600" : "text-slate-900" %>"><%= needs %></div>
+        <div class="text-sm text-slate-500">Need a contact</div>
+        <div class="mt-1 text-xs text-slate-500">Not contacted in <%= Volunteer::CONTACT_MADE_IN_DAYS_NUM %>+ days</div>
+      </div>
+      <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+        <span class="grid h-9 w-9 place-items-center rounded-xl bg-emerald-50 text-emerald-600"><i class="bi bi-clock-history" aria-hidden="true"></i></span>
+        <div class="mt-3 text-3xl font-bold tracking-tight text-slate-900"><%= stats[:hours_label] %></div>
+        <div class="text-sm text-slate-500">Hours logged (30d)</div>
+      </div>
+    </div>
+
+    <% if @dashboard.needs_attention.any? %>
+      <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm" aria-labelledby="attention-heading">
+        <div class="mb-4 flex items-center justify-between">
+          <h2 id="attention-heading" class="text-base font-semibold text-slate-900">Needs your attention</h2>
+          <span class="text-sm text-slate-500"><%= pluralize(@dashboard.needs_attention.size, "case") %></span>
+        </div>
+        <ul class="space-y-2.5">
+          <% @dashboard.needs_attention.each do |row| %>
+            <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-rose-100 bg-rose-50/40 px-4 py-3">
+              <div class="flex items-center gap-3">
+                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-600"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i></span>
+                <div>
+                  <div class="font-semibold text-slate-800"><%= link_to row.casa_case.case_number, casa_case_path(row.casa_case), class: "hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %></div>
+                  <div class="text-xs text-slate-500"><%= row.last_contact_label %></div>
+                </div>
+              </div>
+              <%= link_to new_case_contact_path, class: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+                <i class="bi bi-plus-lg" aria-hidden="true"></i> Log a contact
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </section>
+    <% end %>
+
+    <section class="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white pb-2 shadow-sm" aria-labelledby="cases-heading">
+      <div class="border-b border-slate-100 p-4"><h2 id="cases-heading" class="text-base font-semibold text-slate-900">Your cases</h2></div>
+      <div class="hidden overflow-x-auto md:block">
+        <table class="w-full text-sm">
+          <caption class="sr-only">Your active cases with contact-follow-up status and most recent contact.</caption>
+          <thead class="text-left text-xs font-semibold text-slate-500">
+            <tr class="border-b border-slate-100">
+              <th scope="col" class="px-4 py-3">Case</th>
+              <th scope="col" class="px-4 py-3">Contact status</th>
+              <th scope="col" class="px-4 py-3">Last contact</th>
+              <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-50">
+            <% @dashboard.rows.each do |row| %>
+              <tr class="hover:bg-slate-50/70">
+                <td class="px-4 py-3"><%= link_to row.casa_case.case_number, casa_case_path(row.casa_case), class: "font-medium text-slate-800 hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %></td>
+                <td class="px-4 py-3">
+                  <% if row.needs_contact? %>
+                    <span class="inline-flex items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Needs a contact</span>
+                  <% else %>
+                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> On track</span>
+                  <% end %>
+                </td>
+                <td class="px-4 py-3 text-slate-600"><%= row.last_contact_label %></td>
+                <td class="px-4 py-3 text-right"><%= link_to "Log contact", new_case_contact_path, class: "text-sm font-medium text-brand-600 hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <div class="divide-y divide-slate-100 md:hidden">
+        <% @dashboard.rows.each do |row| %>
+          <div class="p-4">
+            <div class="flex items-center justify-between gap-3">
+              <%= link_to row.casa_case.case_number, casa_case_path(row.casa_case), class: "font-medium text-slate-800 hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %>
+              <% if row.needs_contact? %>
+                <span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-rose-50 px-2.5 py-1 text-xs font-medium text-rose-700"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i> Needs a contact</span>
+              <% else %>
+                <span class="inline-flex flex-none items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> On track</span>
+              <% end %>
+            </div>
+            <div class="mt-2 flex items-center justify-between gap-3">
+              <span class="text-xs text-slate-500"><%= row.last_contact_label %></span>
+              <%= link_to "Log contact", new_case_contact_path, class: "text-sm font-medium text-brand-600 hover:text-brand-700 focus-visible:outline-none focus-visible:underline" %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+</div>
diff --git a/app/views/devise/invitations/edit.html.erb b/app/views/devise/invitations/edit.html.erb
index 666d34b104..5f1b963c39 100644
--- a/app/views/devise/invitations/edit.html.erb
+++ b/app/views/devise/invitations/edit.html.erb
@@ -1,29 +1,32 @@
-<div class="password-box px-4 pb-3">
-  <h2 class="my-3">Set password</h2>
+<% content_for :page_title, "Accept your invitation" %>
+<% field = "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm transition placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
 
-  <%= form_with(model: resource, as: resource_name, url: invitation_path(resource_name), local: true, html: {method: :put}) do |f| %>
-    <%= render "/shared/error_messages", resource: resource %>
-    <%= f.hidden_field :invitation_token, readonly: true %>
+<div class="mb-8">
+  <h2 class="text-2xl font-bold tracking-tight text-slate-900">Set your password</h2>
+  <p class="mt-2 text-sm text-slate-500">Welcome to CASA — choose a password to activate your account.</p>
+</div>
 
-    <% if f.object.class.require_password_on_accepting %>
-      <div class="input-style-1">
-        <%= f.label :password %>
-        <%= f.password_field :password, placeholder: "Password", required: true %>
-      </div>
+<% if resource.errors.any? %>
+  <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <ul class="list-inside list-disc space-y-1">
+      <% resource.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
+    </ul>
+  </div>
+<% end %>
 
-      <div class="input-style-1">
-        <%= f.label :password_confirmation %>
-        <%= f.password_field :password_confirmation, placeholder: "Password Confirmation", required: true %>
-      </div>
-    <% end %>
+<%= form_with(model: resource, as: resource_name, url: invitation_path(resource_name), local: true, html: {method: :put}, class: "space-y-5") do |f| %>
+  <%= f.hidden_field :invitation_token, readonly: true %>
 
-    <div class="actions mt-3">
-      <%= button_tag(
-        type: "submit",
-        class: "main-btn primary-btn btn-hover btn-sm"
-      ) do %>
-        <i class="lni lni-lock-alt mr-10"></i>Set my password
-      <% end %>
+  <% if f.object.class.require_password_on_accepting %>
+    <div>
+      <%= f.label :password, class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+      <%= f.password_field :password, autofocus: true, autocomplete: "new-password", required: true, placeholder: "••••••••", class: field %>
+    </div>
+    <div>
+      <%= f.label :password_confirmation, "Confirm password", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+      <%= f.password_field :password_confirmation, autocomplete: "new-password", required: true, placeholder: "••••••••", class: field %>
     </div>
   <% end %>
-</div>
+
+  <%= f.submit "Activate account", class: "w-full cursor-pointer rounded-lg bg-brand-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:ring-offset-2" %>
+<% end %>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index 9fa2313dbb..557758bd7e 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,55 +1,40 @@
-<div class="row">
-  <div class="col-lg-9 col-md-12 vertically-center">
-    <div class="container">
-      <div class="row">
-        <div class="offset-xl-2 col-xl-8 col-lg-12 col-sm-8 col-md-8 pb-4">
-          <h2 class="my-4">Change your password</h2>
+<% content_for :page_title, "Choose a new password" %>
+<% field = "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm transition placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
 
-              <%= form_with(model: resource, as: resource_name, url: password_path(resource_name), method: :put) do |f| %>
-                <%= render "/shared/error_messages", resource: resource %>
-                <%= f.hidden_field :reset_password_token %>
-
-                <div class="input-style-1">
-                  <%= f.label :password, "New password" %>
-                  <% if @minimum_password_length %>
-                    <em>(<%= @minimum_password_length %> characters minimum)</em>
-                  <% end %>
-                  <%= f.password_field :password,
-                    autofocus: true,
-                    autocomplete: "new-password",
-                    class: "password-new",
-                    placeholder: "New Password",
-                    required: true,
-                    minlength: @minimum_password_length %>
-                </div>
-
-                <div class="input-style-1">
-                  <%= f.label :password_confirmation, "Confirm new password" %>
-                  <%= f.password_field :password_confirmation,
-                    autocomplete: "new-password",
-                    class: "password-confirmation",
-                    placeholder: "Confirm Password",
-                    required: true,
-                    minlength: @minimum_password_length %>
-                </div>
+<div class="mb-8">
+  <h2 class="text-2xl font-bold tracking-tight text-slate-900">Choose a new password</h2>
+  <p class="mt-2 text-sm text-slate-500">Pick a new password for your account.</p>
+</div>
 
-                <div class="actions my-2">
-                  <%= button_tag(
-                    type: "submit",
-                    class: "main-btn primary-btn btn-hover btn-sm submit-password"
-                  ) do %>
-                    <i class="lni lni-save mr-10"></i>Change my password
-                  <% end %>
-                </div>
-              <% end %>
+<% flash.each do |type, message| %>
+  <% next if message.blank? %>
+  <div class="mb-5 rounded-lg border px-4 py-3 text-sm <%= type.to_s == "notice" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-amber-200 bg-amber-50 text-amber-800" %>"><%= message %></div>
+<% end %>
 
-          <%= render "devise/shared/links" %>
-        </div>
-      </div>
-    </div>
+<% if resource.errors.any? %>
+  <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <ul class="list-inside list-disc space-y-1">
+      <% resource.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
+    </ul>
   </div>
+<% end %>
 
-  <div class="col-lg-7 d-none d-lg-block">
-    <aside class="display-image"></aside>
+<%= form_with(model: resource, as: resource_name, url: password_path(resource_name), method: :put, class: "space-y-5") do |f| %>
+  <%= f.hidden_field :reset_password_token %>
+  <div>
+    <%= f.label :password, "New password", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+    <%= f.password_field :password, autofocus: true, autocomplete: "new-password", required: true, minlength: @minimum_password_length, placeholder: "••••••••", class: field %>
+    <% if @minimum_password_length %>
+      <p class="mt-1.5 text-xs text-slate-500"><%= @minimum_password_length %> characters minimum</p>
+    <% end %>
   </div>
-</div>
+  <div>
+    <%= f.label :password_confirmation, "Confirm new password", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+    <%= f.password_field :password_confirmation, autocomplete: "new-password", required: true, minlength: @minimum_password_length, placeholder: "••••••••", class: field %>
+  </div>
+  <%= f.submit "Update password", class: "w-full cursor-pointer rounded-lg bg-brand-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:ring-offset-2" %>
+<% end %>
+
+<p class="mt-8 text-center text-sm text-slate-500">
+  <%= link_to "← Back to sign in", new_session_path(resource_name), class: "font-medium text-brand-600 hover:text-brand-700" %>
+</p>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 00c6551700..fae9013699 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,42 +1,41 @@
-<div class="row">
-  <div class="col-lg-9 col-md-12 vertically-center">
-    <div class="container">
-      <div class="row">
-        <div class="offset-xl-2 col-xl-8 col-lg-12 col-sm-8 col-md-8 pb-4">
-          <h2 class="my-4">Forgot your password?</h2>
+<% content_for :page_title, "Reset your password" %>
+<% field = "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm transition placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
 
-          <%= form_with(model: resource, as: resource_name, url: password_path(resource_name), html: {method: :post}) do |f| %>
-            <%= render "/shared/error_messages", resource: resource %>
-
-            <h4 class="mb-3">Please enter email or phone number to receive reset instructions.</h4>
-
-            <div class="input-style-1">
-              <%= f.label :email %>
-              <%= f.email_field :email, placeholder: "Email", autofocus: true, autocomplete: "email" %>
-            </div>
-
-            <div class="input-style-1">
-              <%= f.label :phone_number %>
-              <%= f.text_field :phone_number, placeholder: "Phone Number", autofocus: true, autocomplete: "phone number" %>
-            </div>
+<div class="mb-8">
+  <h2 class="text-2xl font-bold tracking-tight text-slate-900">Reset your password</h2>
+  <p class="mt-2 text-sm text-slate-500">Enter your email or phone number and we'll send reset instructions.</p>
+</div>
 
-            <div class="actions my-2">
-              <%= button_tag(
-                type: "submit",
-                class: "main-btn primary-btn btn-hover btn-sm"
-              ) do %>
-                <i class="lni lni-telegram-original mr-10"></i>Send me reset password instructions
-              <% end %>
-            </div>
-          <% end %>
+<% flash.each do |type, message| %>
+  <% next if message.blank? %>
+  <div class="mb-5 rounded-lg border px-4 py-3 text-sm <%= type.to_s == "notice" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-amber-200 bg-amber-50 text-amber-800" %>"><%= message %></div>
+<% end %>
 
-          <%= render "devise/shared/links" %>
-        </div>
-      </div>
-    </div>
+<% if resource.errors.any? %>
+  <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <ul class="list-inside list-disc space-y-1">
+      <% resource.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
+    </ul>
   </div>
+<% end %>
 
-  <div class="col-lg-7 d-none d-lg-block">
-    <aside class="display-image"></aside>
+<%= form_with(model: resource, as: resource_name, url: password_path(resource_name), html: {method: :post}, class: "space-y-5") do |f| %>
+  <div>
+    <%= f.label :email, class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "you@example.com", class: field %>
   </div>
-</div>
+  <div class="flex items-center gap-3">
+    <span class="h-px flex-1 bg-slate-200"></span>
+    <span class="text-xs font-medium text-slate-500">or</span>
+    <span class="h-px flex-1 bg-slate-200"></span>
+  </div>
+  <div>
+    <%= f.label :phone_number, "Phone number", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+    <%= f.telephone_field :phone_number, autocomplete: "tel", placeholder: "+1 555 123 4567", class: field %>
+  </div>
+  <%= f.submit "Send reset instructions", class: "w-full cursor-pointer rounded-lg bg-brand-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:ring-offset-2" %>
+<% end %>
+
+<p class="mt-8 text-center text-sm text-slate-500">
+  <%= link_to "← Back to sign in", new_session_path(resource_name), class: "font-medium text-brand-600 hover:text-brand-700" %>
+</p>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 9e2e3ffaf9..1a2dba0376 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,80 +1,51 @@
-<div class="signin-wrapper">
-  <div class="form-wrapper">
-    <h6 class="mb-15">Sign In</h6>
-    <p class="text-sm mb-25">
-      Not registered but want to join?
-      <a class='text-blue-500' href="mailto:casa@rubyforgood.org?Subject=Application%20Interest" target="_top">casa@rubyforgood.org</a>
-    </p>
-    <div class="row">
-      <%= form_with(model: resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-      <div class="alert-box">
-        <% if resource.errors.any? %>
-          <%= render "/shared/error_messages", resource: resource %>
-        <% else %>
-          <%= render "layouts/flash_messages" %>
-        <% end %>
-      </div>
-        <div class="col-12">
-          <div class="input-style-1" id="email-input">
-            <%= f.label "Email", for: "email" %>
-            <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email", class: "form-control", required: true, id:"email" %>
-          </div>
-        </div>
-        <!-- end col -->
-        <div class="col-12">
-          <div class="input-style-1">
-            <%= f.label :password %>
-            <%= f.password_field :password, autocomplete: "current-password", placeholder: "Password", class: "form-control", required: true %>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="input-style-1">
-            <%= link_to new_password_path(resource_name), class: "hover-underline" do %>
-              <i class="lni lni-lock mr-10"></i>Forgot your password?
-            <% end %>
-          </div>
-        </div>
-        <!-- end col -->
-        <div class="col-xxl-6 col-lg-12 col-md-6">
-          <div class="form-check checkbox-style mb-30">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              value=""
-              id="checkbox-remember">
-            <label
-              class="form-check-label"
-              for="checkbox-remember">
-              Remember me next time</label>
-          </div>
-        </div>
-        <!-- end col -->
-        <!-- end col -->
-        <div class="col-12">
-          <div
-            class="
-                            button-group
-                            d-flex
-                            justify-content-center
-                            flex-wrap
-                            actions
-                          ">
-            <%= button_tag(
-              type: "submit",
-              class: "main-btn primary-btn btn-hover w-100 text-center",
-              id: "log-in"
-            ) do %>
-              <i class="lni lni-chevron-right-circle mr-10"></i>Log In
-            <% end %>
-          </div>
-        </div>
+<% content_for :page_title, "Sign in" %>
+
+<div class="mb-8">
+  <h2 class="text-2xl font-bold tracking-tight text-slate-900">Welcome back</h2>
+  <p class="mt-2 text-sm text-slate-500">Sign in to your CASA account to continue.</p>
+</div>
+
+<% flash.each do |type, message| %>
+  <div class="mb-5 rounded-lg border px-4 py-3 text-sm <%= type.to_s == "notice" ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-amber-200 bg-amber-50 text-amber-800" %>">
+    <%= message %>
+  </div>
+<% end %>
+
+<% if resource.errors.any? %>
+  <div class="mb-5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+    <ul class="list-inside list-disc space-y-1">
+      <% resource.errors.full_messages.each do |msg| %>
+        <li><%= msg %></li>
       <% end %>
-      <div class="col-xxl-6 col-lg-12 col-md-6">
-        <div class="text-start text-md-end text-lg-start text-xxl-end mb-30">
-        </div>
-      </div>
-      <div class="col-xxl-6 col-lg-12 col-md-6">
-      </div>
+    </ul>
+  </div>
+<% end %>
+
+<%= form_with(model: resource, as: resource_name, url: session_path(resource_name), class: "space-y-5") do |f| %>
+  <div>
+    <%= f.label :email, "Email", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+    <%= f.email_field :email, autofocus: true, autocomplete: "email", required: true, placeholder: "you@example.com",
+          class: "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm transition placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+  </div>
+
+  <div>
+    <div class="mb-1.5 flex items-center justify-between">
+      <%= f.label :password, "Password", class: "block text-sm font-medium text-slate-700" %>
+      <%= link_to "Forgot password?", new_password_path(resource_name), class: "text-sm font-medium text-brand-600 hover:text-brand-700" %>
     </div>
+    <%= f.password_field :password, autocomplete: "current-password", required: true, placeholder: "••••••••",
+          class: "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm transition placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
   </div>
-</div>
+
+  <label class="flex items-center gap-2 text-sm text-slate-600">
+    <%= f.check_box :remember_me, class: "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500" %>
+    Remember me on this device
+  </label>
+
+  <%= f.submit "Sign in", class: "w-full cursor-pointer rounded-lg bg-brand-600 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:ring-offset-2" %>
+<% end %>
+
+<p class="mt-8 text-center text-sm text-slate-500">
+  Not registered but want to join your local CASA?
+  <a href="mailto:casa@rubyforgood.org?Subject=Application%20Interest" class="font-medium text-brand-600 hover:text-brand-700">Get in touch →</a>
+</p>
diff --git a/app/views/fund_requests/new.html.erb b/app/views/fund_requests/new.html.erb
index 7ed36397bd..c54d74e44c 100644
--- a/app/views/fund_requests/new.html.erb
+++ b/app/views/fund_requests/new.html.erb
@@ -51,7 +51,7 @@
     <div class="input-style-1">
       <%= form.label :requested_by_and_relationship, "Requested by & relationship to youth" %>
       <%= form.text_field :requested_by_and_relationship, class: "form-control", required: false,
-value: "#{current_user.display_name} CASA Volunteer" %>
+value: "#{formatted_name(current_user.display_name)} CASA Volunteer" %>
     </div>
 
     <div class="input-style-1">
diff --git a/app/views/health/index.html.erb b/app/views/health/index.html.erb
index 527e380204..936acd17e4 100644
--- a/app/views/health/index.html.erb
+++ b/app/views/health/index.html.erb
@@ -1,5 +1,55 @@
-<div id="health">
-  <canvas id="caseContactCreationTimeBubbleChart"></canvas>
-  <canvas id="monthLineChart" class="mt-5"></canvas>
-  <canvas id="uniqueUsersMonthLineChart" class="mt-5"></canvas>
+<div class="mx-auto max-w-4xl px-4 py-8 sm:px-6">
+  <h1 class="text-2xl font-bold tracking-tight text-slate-900">Health</h1>
+  <p class="mt-1 text-sm text-slate-500">Chapter activity and data quality. Hover a chart for details.</p>
+  <%= metric_range_filter(@range) %>
+
+  <% cc = @case_contacts %>
+  <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+    <h2 class="text-base font-bold text-slate-900">Case contacts logged</h2>
+    <p class="mb-4 mt-1.5 text-sm text-slate-500">Monthly volume, how many carried notes, and how many distinct volunteers logged them.</p>
+    <% if cc[:series].first[:data].sum.zero? %>
+      <%= metric_empty_state("No contacts logged in this range", "Once volunteers log case contacts, the trend and totals appear here.") %>
+    <% else %>
+      <%= metric_tiles([
+            {value: cc[:series][0][:data].sum, label: "Total contacts", sub: "last #{@range} months"},
+            {value: cc[:series][1][:data].sum, label: "With notes", sub: "last #{@range} months"},
+            {value: cc[:distinct_loggers], label: "Unique loggers", sub: "distinct, #{@range} months"}
+          ]) %>
+      <div class="mt-4">
+        <%= metric_line_chart("cc", cc[:labels], cc[:series],
+              title: "Case contacts logged per month",
+              desc: "Line chart of total case contacts, contacts with notes, and unique loggers over the last 12 months.") %>
+      </div>
+      <%= metric_legend(cc[:series]) %>
+      <%= metric_data_table(cc[:labels], cc[:series],
+            caption: "Case contacts logged per month",
+            foot: {label: "#{@range}-month total", cells: [cc[:series][0][:data].sum, cc[:series][1][:data].sum, "#{cc[:distinct_loggers]} †"]},
+            footnote: "† Unique loggers is the distinct number of volunteers over the whole period, not the sum of the monthly counts.") %>
+    <% end %>
+  </section>
+
+  <section class="mt-5 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+    <h2 class="text-base font-bold text-slate-900">When contacts are logged</h2>
+    <p class="mb-4 mt-1.5 text-sm text-slate-500">Contacts by day of week and hour of day. Darker cells mean more activity.</p>
+    <% if @contact_heatmap[:max].zero? %>
+      <%= metric_empty_state("No contacts logged in this range", "Once volunteers log case contacts, their timing appears here.") %>
+    <% else %>
+      <%= metric_heatmap(@contact_heatmap[:grid], @contact_heatmap[:max]) %>
+    <% end %>
+  </section>
+
+  <% au = @active_users %>
+  <section class="mt-5 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+    <h2 class="text-base font-bold text-slate-900">Monthly active users</h2>
+    <p class="mb-4 mt-1.5 text-sm text-slate-500">Distinct volunteers, supervisors, and admins who signed in each month.</p>
+    <% if au[:series].sum { |ser| ser[:data].sum }.zero? %>
+      <%= metric_empty_state("No sign-in activity in this range", "Active-user counts appear once volunteers, supervisors, or admins sign in during the selected range.") %>
+    <% else %>
+      <%= metric_line_chart("au", au[:labels], au[:series],
+            title: "Monthly active users",
+            desc: "Line chart of active volunteers, supervisors, admins, and loggers per month.") %>
+      <%= metric_legend(au[:series]) %>
+      <%= metric_data_table(au[:labels], au[:series], caption: "Monthly active users") %>
+    <% end %>
+  </section>
 </div>
diff --git a/app/views/layouts/_casa_banner.html.erb b/app/views/layouts/_casa_banner.html.erb
new file mode 100644
index 0000000000..70950e5a0d
--- /dev/null
+++ b/app/views/layouts/_casa_banner.html.erb
@@ -0,0 +1,9 @@
+<%# Org announcement banner for the casa_app (Tailwind) shell. Uses the same
+    @active_banner + dismiss controller as the legacy layout. %>
+<% if @active_banner %>
+  <div data-controller="dismiss" data-dismiss-target="element" data-dismiss-url-value="<%= dismiss_banner_path(@active_banner) %>" class="flex items-start gap-3 border-b border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 sm:px-6">
+    <i class="bi bi-megaphone mt-0.5 shrink-0 text-amber-500" aria-hidden="true"></i>
+    <div class="min-w-0 flex-1"><%= @active_banner.content %></div>
+    <a href="#" data-action="click->dismiss#dismiss" class="shrink-0 font-medium text-amber-700 hover:text-amber-900 focus-visible:outline-none focus-visible:underline">Dismiss</a>
+  </div>
+<% end %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 75ccef2185..438eb97f0c 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -3,7 +3,7 @@
 
   <% if current_user != true_user %>
     <%= link_to stop_impersonating_volunteers_path, method: :post, class: "pt-4 pb-4 bg-danger", style: "padding-left: 15px; display: block;" do %>
-      You (<%= true_user.display_name %>) are signed in as <%= current_user.display_name %>.
+      You (<%= formatted_name(true_user.display_name) %>) are signed in as <%= formatted_name(current_user.display_name) %>.
       Click here to stop impersonating.
     <% end %>
   <% end %>
@@ -49,7 +49,7 @@
               aria-expanded="false">
               <div class="profile-info">
                 <div class="info">
-                  <h6><%= current_user.display_name %>
+                  <h6><%= formatted_name(current_user.display_name) %>
                   </h6>
                   <div class="image">
                     <img
diff --git a/app/views/layouts/casa_app.html.erb b/app/views/layouts/casa_app.html.erb
new file mode 100644
index 0000000000..fad0228e82
--- /dev/null
+++ b/app/views/layouts/casa_app.html.erb
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= content_for?(:page_title) ? "#{content_for(:page_title)} · CASA Volunteer Tracker" : "CASA Volunteer Tracker" %></title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+
+  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+</head>
+<body class="h-full bg-slate-50 font-sans text-slate-800 antialiased">
+  <% initials = avatar_initials(display_person(current_user)) %>
+  <% unread = current_user.notifications.unread.count %>
+  <% role_badge_class = {"Volunteer" => "bg-sky-50 text-sky-700", "Supervisor" => "bg-violet-50 text-violet-700", "Casa Admin" => "bg-amber-50 text-amber-700"}[current_role] || "bg-slate-100 text-slate-600" %>
+
+  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-lg focus:bg-brand-600 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white">Skip to main content</a>
+
+  <div class="flex min-h-full">
+    <div id="nav-backdrop" class="fixed inset-0 z-30 hidden bg-slate-900/50 lg:hidden" aria-hidden="true"></div>
+
+    <aside id="app-sidebar" aria-label="Primary" class="fixed inset-y-0 left-0 z-40 flex w-64 shrink-0 -translate-x-full flex-col border-r border-slate-200 bg-white transition-transform duration-200 motion-reduce:transition-none lg:static lg:translate-x-0">
+      <div class="flex items-center px-5 py-5">
+        <span class="truncate text-[15px] font-bold tracking-tight text-slate-900"><%= current_organization&.name.presence || "CASA Tracker" %></span>
+      </div>
+
+      <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-2 text-sm" aria-label="Main navigation">
+        <% nav_items = [
+          ["Dashboard", "bi-grid-1x2", authenticated_user_root_path, "dashboard", true],
+          ["Volunteers", "bi-people", volunteers_path, "volunteers", policy(Volunteer).index?],
+          ["Supervisors", "bi-diagram-3", supervisors_path, "supervisors", policy(Supervisor).index?],
+          [cases_index_title, "bi-folder2", casa_cases_path, "cases", true],
+          ["Case contacts", "bi-chat-square-text", case_contacts_path, "contacts", true],
+          ["Learning hours", "bi-mortarboard", learning_hours_path, "learning", policy(LearningHour).index?],
+          ["Reports", "bi-bar-chart", reports_path, "reports", policy(:application).see_reports_page?],
+          ["Settings", "bi-gear", edit_casa_org_path(current_organization), "settings", policy(:application).modify_organization?]
+        ] %>
+        <% nav_items.each do |title, icon, path, key, allowed| %>
+          <% next unless allowed %>
+          <% active = (@active_nav == key) %>
+          <%= link_to path, "aria-current": (active ? "page" : nil), class: "flex items-center gap-3 rounded-lg px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500 #{active ? "bg-brand-50 font-semibold text-brand-700" : "text-slate-600 hover:bg-slate-100"}" do %>
+            <i class="bi <%= icon %> text-base" aria-hidden="true"></i> <%= title %>
+          <% end %>
+        <% end %>
+      </nav>
+    </aside>
+
+    <div class="flex min-w-0 flex-1 flex-col">
+      <header class="flex items-center gap-3 border-b border-slate-200 bg-white/80 px-4 py-3 backdrop-blur sm:px-6">
+        <button type="button" id="nav-toggle" aria-label="Open navigation menu" aria-controls="app-sidebar" aria-expanded="false" class="grid h-9 w-9 place-items-center rounded-lg text-slate-600 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 lg:hidden">
+          <i class="bi bi-list text-xl" aria-hidden="true"></i>
+        </button>
+        <span class="text-base font-bold tracking-tight text-slate-900 lg:hidden"><%= current_organization&.name.presence || "CASA" %></span>
+        <div class="ml-auto flex items-center gap-1.5">
+          <%= link_to notifications_path, "aria-label": "Notifications#{unread.positive? ? " (#{unread} unread)" : ""}", class: "relative grid h-9 w-9 place-items-center rounded-lg text-slate-500 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" do %>
+            <i class="bi bi-bell text-lg" aria-hidden="true"></i>
+            <% if unread.positive? %>
+              <span class="absolute right-1 top-1 grid h-4 min-w-[1rem] place-items-center rounded-full bg-rose-500 px-1 text-[10px] font-semibold text-white" aria-hidden="true"><%= unread %></span>
+            <% end %>
+          <% end %>
+          <details class="relative" data-controller="dropdown">
+            <summary aria-label="Account menu" class="flex cursor-pointer list-none items-center gap-1.5 rounded-lg p-0.5 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 [&::-webkit-details-marker]:hidden">
+              <span class="grid h-9 w-9 place-items-center rounded-full bg-emerald-100 text-sm font-semibold text-emerald-700"><%= initials %></span>
+              <i class="bi bi-chevron-down text-xs text-slate-500" aria-hidden="true"></i>
+            </summary>
+            <div class="absolute right-0 z-20 mt-2 w-56 overflow-hidden rounded-xl border border-slate-200 bg-white py-1 shadow-lg">
+              <div class="border-b border-slate-100 px-4 py-3">
+                <div class="text-sm font-semibold text-slate-800"><%= display_person(current_user) %></div>
+                <div class="truncate text-xs text-slate-500"><%= current_user.email %></div>
+                <span class="mt-1.5 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium <%= role_badge_class %>"><%= current_role %></span>
+              </div>
+              <%= link_to "Edit profile", edit_users_path, class: "block px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none" %>
+              <%= link_to "Messages", notifications_path, class: "block px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none" %>
+              <%= link_to "Sign out", destroy_user_session_path, class: "block px-4 py-2 text-sm text-rose-600 hover:bg-rose-50 focus-visible:bg-rose-50 focus-visible:outline-none" %>
+            </div>
+          </details>
+        </div>
+      </header>
+
+      <main id="main-content" class="flex-1">
+        <%= render "layouts/casa_banner" %>
+        <% if flash.any? { |_, message| message.present? } %>
+          <div class="space-y-2 px-4 pt-4 sm:px-6 lg:px-8">
+            <% flash.each do |type, message| %>
+              <% next if message.blank? %>
+              <div role="<%= type.to_s == "notice" ? "status" : "alert" %>" class="rounded-lg border px-4 py-3 text-sm <%= type.to_s == "notice" ? "border-emerald-200 bg-emerald-50 text-emerald-800" : "border-amber-200 bg-amber-50 text-amber-800" %>"><%= message %></div>
+            <% end %>
+          </div>
+        <% end %>
+        <%= yield %>
+      </main>
+    </div>
+  </div>
+
+  <script>
+    (function () {
+      var btn = document.getElementById("nav-toggle");
+      var sidebar = document.getElementById("app-sidebar");
+      var backdrop = document.getElementById("nav-backdrop");
+      if (!btn || !sidebar || !backdrop) return;
+      function setOpen(open) {
+        sidebar.classList.toggle("-translate-x-full", !open);
+        backdrop.classList.toggle("hidden", !open);
+        btn.setAttribute("aria-expanded", open ? "true" : "false");
+        document.body.classList.toggle("overflow-hidden", open);
+      }
+      btn.addEventListener("click", function () { setOpen(sidebar.classList.contains("-translate-x-full")); });
+      backdrop.addEventListener("click", function () { setOpen(false); });
+      document.addEventListener("keydown", function (event) { if (event.key === "Escape") setOpen(false); });
+    })();
+  </script>
+</body>
+</html>
diff --git a/app/views/layouts/casa_auth.html.erb b/app/views/layouts/casa_auth.html.erb
new file mode 100644
index 0000000000..c71f01aaf7
--- /dev/null
+++ b/app/views/layouts/casa_auth.html.erb
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= content_for?(:page_title) ? "#{content_for(:page_title)} · CASA Volunteer Tracker" : "CASA Volunteer Tracker" %></title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
+  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+</head>
+<body class="h-full bg-white font-sans text-slate-800 antialiased">
+  <div class="flex min-h-full flex-col lg:flex-row">
+
+    <aside class="relative hidden overflow-hidden bg-gradient-to-br from-brand-700 via-brand-600 to-indigo-500 text-white lg:flex lg:w-1/2 lg:flex-col lg:justify-between lg:p-14">
+      <div class="pointer-events-none absolute -right-24 -top-24 h-96 w-96 rounded-full bg-white/10 blur-3xl"></div>
+      <div class="pointer-events-none absolute -bottom-32 -left-16 h-96 w-96 rounded-full bg-indigo-300/20 blur-3xl"></div>
+
+      <div class="relative flex items-center gap-3">
+        <span class="grid h-10 w-10 place-items-center rounded-xl bg-white/15 text-sm font-bold ring-1 ring-white/25 backdrop-blur">CV</span>
+        <span class="text-base font-semibold tracking-tight">CASA Volunteer Tracker</span>
+      </div>
+
+      <div class="relative max-w-md">
+        <h1 class="text-4xl font-bold leading-tight tracking-tight">Advocating for every child in care.</h1>
+        <p class="mt-5 text-lg leading-relaxed text-white/80">Track volunteers, log case contacts, and keep your chapter moving — all in one calm, organized place.</p>
+        <ul class="mt-8 space-y-3 text-white/90">
+          <li class="flex items-center gap-3"><svg class="h-5 w-5 flex-none text-white/70" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 10.7a1 1 0 111.4-1.4l3.3 3.3 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd" /></svg> Manage volunteers &amp; case assignments</li>
+          <li class="flex items-center gap-3"><svg class="h-5 w-5 flex-none text-white/70" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 10.7a1 1 0 111.4-1.4l3.3 3.3 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd" /></svg> Log and review case contacts</li>
+          <li class="flex items-center gap-3"><svg class="h-5 w-5 flex-none text-white/70" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 10.7a1 1 0 111.4-1.4l3.3 3.3 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd" /></svg> Court reports, ready in minutes</li>
+        </ul>
+      </div>
+
+      <p class="relative text-sm text-white/80">© <%= Date.current.year %> CASA · Built with care by Ruby for Good</p>
+    </aside>
+
+    <main class="flex flex-1 items-center justify-center px-6 py-12 sm:px-10">
+      <div class="w-full max-w-sm">
+        <div class="mb-10 flex items-center gap-3 lg:hidden">
+          <span class="grid h-10 w-10 place-items-center rounded-xl bg-brand-600 text-sm font-bold text-white">CV</span>
+          <span class="text-base font-semibold tracking-tight text-slate-900">CASA Volunteer Tracker</span>
+        </div>
+        <%= yield %>
+      </div>
+    </main>
+
+  </div>
+</body>
+</html>
diff --git a/app/views/layouts/metrics.html.erb b/app/views/layouts/metrics.html.erb
new file mode 100644
index 0000000000..9582b1270e
--- /dev/null
+++ b/app/views/layouts/metrics.html.erb
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><%= content_for?(:page_title) ? yield(:page_title) : "Health" %></title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= javascript_include_tag "metrics", defer: true %>
+  </head>
+  <body class="min-h-screen bg-slate-50 font-sans text-slate-900 antialiased">
+    <%= yield %>
+  </body>
+</html>
diff --git a/app/views/learning_hours/_supervisor_admin_learning_hours.html.erb b/app/views/learning_hours/_supervisor_admin_learning_hours.html.erb
index 3eb8ee3140..49ab7bb8f6 100644
--- a/app/views/learning_hours/_supervisor_admin_learning_hours.html.erb
+++ b/app/views/learning_hours/_supervisor_admin_learning_hours.html.erb
@@ -25,7 +25,7 @@
             <tbody>
             <% @learning_hours.each do |learning_hour| %>
               <tr>
-                <td><%= link_to(learning_hour.display_name, learning_hours_volunteer_path(learning_hour.user_id)) %></td>
+                <td><%= link_to(formatted_name(learning_hour.display_name), learning_hours_volunteer_path(learning_hour.user_id)) %></td>
                 <td><%= format_time(learning_hour.total_time_spent) %></td>
               </tr>
             <% end %>
diff --git a/app/views/learning_hours/volunteers/show.html.erb b/app/views/learning_hours/volunteers/show.html.erb
index 01ac267ba5..9cf50106b0 100644
--- a/app/views/learning_hours/volunteers/show.html.erb
+++ b/app/views/learning_hours/volunteers/show.html.erb
@@ -1,6 +1,6 @@
 <div class="row my-3">
   <div class="col-sm-12 dashboard-table-header">
-    <h1><%= @volunteer.display_name %>'s Learning Hours</h1>
+    <h1><%= formatted_name(@volunteer.display_name) %>'s Learning Hours</h1>
   </div>
 </div>
 
diff --git a/app/views/notifications/_patch_notes.html.erb b/app/views/notifications/_patch_notes.html.erb
index 8876caa2b4..47fc44a7d7 100644
--- a/app/views/notifications/_patch_notes.html.erb
+++ b/app/views/notifications/_patch_notes.html.erb
@@ -1,23 +1,21 @@
-<div id="patch-note-notification" class="list-group-item">
-  <div class="d-flex flex-row">
-    <div class="d-flex-shrink-0">
-      <i class='fas fa-bell'></i>
+<div data-notification-list-item class="flex items-start gap-3.5 px-4 py-3.5">
+  <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-50 text-violet-600">
+    <i class="bi bi-stars text-sm" aria-hidden="true"></i>
+  </span>
+  <div class="min-w-0 flex-1">
+    <div class="flex items-baseline justify-between gap-3">
+      <p class="text-sm font-semibold text-slate-900">Patch Notes</p>
+      <span class="shrink-0 text-xs text-slate-500"><%= time_ago_in_words(deploy_time) %> ago</span>
     </div>
-    <div class="ml-2 flex-grow-1">
-      <div class="d-flex justify-content-between">
-        <h4 class="mb-1">Patch Notes</h4>
-        <small><%= time_ago_in_words(deploy_time) %> ago</small>
+    <% patch_notes.each do |type, notes_per_type| %>
+      <div class="mt-2">
+        <h3 class="text-xs font-semibold text-slate-500"><%= type %></h3>
+        <ul class="mt-1 list-disc space-y-1 pl-5 text-sm text-slate-600 marker:text-slate-300">
+          <% notes_per_type.each do |note_text| %>
+            <li><%= simple_format note_text %></li>
+          <% end %>
+        </ul>
       </div>
-      <% patch_notes.each do |type, notes_per_type| %>
-        <div class="my-1">
-          <h5 class="ml-4 fw-bold"><%= type %></h5>
-          <ul>
-            <% notes_per_type.each do |note_text| %>
-              <li><%= simple_format note_text %></li>
-            <% end %>
-          </ul>
-        </div>
-      <% end %>
-    </div>
+    <% end %>
   </div>
 </div>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 6f221b38e7..fd0c67eb50 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,30 +1,39 @@
-<div class="title-wrapper pt-30">
-  <div class="row">
-    <div class="col-md-6">
-      <div class="title mb-30">
-        <h1>Notifications</h1>
-      </div>
+<% content_for :page_title, "Notifications" %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-3xl">
+    <div class="mb-6">
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Notifications</h1>
+      <p class="mt-1 text-sm text-slate-500">Follow-up requests, reminders, and product updates.</p>
     </div>
-  </div>
-</div>
-<div class="list-group">
-  <% notifications_after_and_including_deploy(@notifications).each do | notification | %>
-    <%= render NotificationComponent.new(notification: notification) %>
-  <% end %>
-  <% unless (@deploy_time.nil? or @patch_notes.empty?) %>
-    <%= render partial: "patch_notes", locals: {deploy_time: @deploy_time, patch_notes: patch_notes_as_hash_keyed_by_type_name(@patch_notes)} %>
-  <% end %>
-  <% notifications_before_deploy(@notifications).each do | notification | %>
-    <%= render NotificationComponent.new(notification: notification) %>
-  <% end %>
 
-  <% if @notifications.empty? and (@patch_notes.empty? or @deploy_time.nil?) %>
-    <div class="card-style my-4">
-      <div class="card-body">
-        You currently don't have any notifications. Notifications are generated when someone requests follow-up on a case contact.
+    <% has_notifications = @notifications.any? %>
+    <% has_patch_notes = !(@deploy_time.nil? || @patch_notes.empty?) %>
+
+    <% if has_notifications || has_patch_notes %>
+      <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white py-2 shadow-sm">
+        <div class="divide-y divide-slate-100">
+          <% notifications_after_and_including_deploy(@notifications).each do |notification| %>
+            <%= render NotificationComponent.new(notification: notification) %>
+          <% end %>
+          <% if has_patch_notes %>
+            <%= render partial: "patch_notes", locals: {deploy_time: @deploy_time, patch_notes: patch_notes_as_hash_keyed_by_type_name(@patch_notes)} %>
+          <% end %>
+          <% notifications_before_deploy(@notifications).each do |notification| %>
+            <%= render NotificationComponent.new(notification: notification) %>
+          <% end %>
+        </div>
       </div>
-    </div>
-  <% end %>
+    <% else %>
+      <div class="rounded-2xl border border-slate-200 bg-white p-10 text-center shadow-sm">
+        <div class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-slate-100 text-slate-400">
+          <i class="bi bi-bell-slash text-2xl" aria-hidden="true"></i>
+        </div>
+        <h2 class="mt-4 text-base font-semibold text-slate-900">You're all caught up</h2>
+        <p class="mx-auto mt-1 max-w-sm text-sm text-slate-500">You currently don't have any notifications. Notifications are generated when someone requests follow-up on a case contact.</p>
+      </div>
+    <% end %>
+  </div>
 </div>
 
 <% @notifications.each do |notification| %>
diff --git a/app/views/other_duties/index.html.erb b/app/views/other_duties/index.html.erb
index 3a57593464..6fa0f09af7 100644
--- a/app/views/other_duties/index.html.erb
+++ b/app/views/other_duties/index.html.erb
@@ -23,7 +23,7 @@
           <% @volunteer_duties.each do |volunteer| %>
             <% if volunteer[:other_duties].any? %>
                 <% unless current_user.id == volunteer[:volunteer].id %>
-                  <%= link_to(volunteer[:volunteer].display_name, volunteer_path(volunteer[:volunteer].id)) %>
+                  <%= link_to(formatted_name(volunteer[:volunteer].display_name), volunteer_path(volunteer[:volunteer].id)) %>
                 <% end %>
                 <div class="table-wrapper table-responsive">
                   <table class="table">
diff --git a/app/views/reimbursements/_table.html.erb b/app/views/reimbursements/_table.html.erb
index 0597967324..4705c343c6 100644
--- a/app/views/reimbursements/_table.html.erb
+++ b/app/views/reimbursements/_table.html.erb
@@ -19,7 +19,7 @@
           <tr>
             <td id="volunteer-<%= reimbursement.id %>">
               <span class="mobile-label">Volunteer</span>
-              <%= link_to(reimbursement.creator.display_name, volunteer_path(reimbursement.creator)) %>
+              <%= link_to(formatted_name(reimbursement.creator.display_name), volunteer_path(reimbursement.creator)) %>
             </td>
 
             <td id="case-number-<%= reimbursement.id %>">
diff --git a/app/views/shared/_confirm_button.html.erb b/app/views/shared/_confirm_button.html.erb
new file mode 100644
index 0000000000..9da6d1f7ac
--- /dev/null
+++ b/app/views/shared/_confirm_button.html.erb
@@ -0,0 +1,33 @@
+<%# Destructive action gated behind an on-brand confirmation dialog (native <dialog> +
+    the `modal` Stimulus controller: focus-trapped, Escape-to-close). The trigger opens the
+    dialog; confirming submits the real request via button_to. Replaces native `confirm()`
+    and SweetAlert for deletes as pages migrate.
+
+    Locals:
+      url            destructive action path (required)
+      message        dialog body text (required)
+      method         HTTP method (default :delete)
+      title          dialog heading (default "Are you sure?")
+      confirm_label  confirm button text (default "Delete")
+      trigger_icon   bi-* class for the trigger (optional)
+      trigger_label  trigger text (optional; omit for an icon-only trigger)
+      trigger_class  classes for the trigger button (optional)
+      aria_label     accessible name for an icon-only trigger (optional) %>
+<% method = local_assigns.fetch(:method, :delete) %>
+<% title = local_assigns.fetch(:title, "Are you sure?") %>
+<% confirm_label = local_assigns.fetch(:confirm_label, "Delete") %>
+<%= render Dialog::GroupComponent.new(label: title) do |dialog| %>
+  <% dialog.with_trigger do %>
+    <%= tag.button type: "button", data: {action: "modal#open"}, class: local_assigns[:trigger_class], "aria-label": local_assigns[:aria_label] do %>
+      <% if local_assigns[:trigger_icon] %><i class="<%= trigger_icon %>" aria-hidden="true"></i><% end %><% if local_assigns[:trigger_label] %> <%= trigger_label %><% end %>
+    <% end %>
+  <% end %>
+  <%= render Dialog::HeaderComponent.new(title: title, icon: "bi bi-exclamation-triangle", variant: :danger) %>
+  <%= render Dialog::BodyComponent.new do %>
+    <p class="text-sm text-slate-600"><%= message %></p>
+  <% end %>
+  <%= render Dialog::FooterComponent.new do %>
+    <button type="button" data-action="modal#close" class="<%= button_classes(:secondary) %>">Cancel</button>
+    <%= button_to confirm_label, url, method: method, form_class: "contents", class: button_classes(:danger) %>
+  <% end %>
+<% end %>
diff --git a/app/views/shared/_edit_form.html.erb b/app/views/shared/_edit_form.html.erb
index 8ecd08120a..b68702fd91 100644
--- a/app/views/shared/_edit_form.html.erb
+++ b/app/views/shared/_edit_form.html.erb
@@ -15,7 +15,7 @@
 
     <%= f.text_field :display_name, placeholder: "Display Name" %>
   <% else %>
-    <input type="text" placeholder="<%= resource.display_name %>" autocomplete="off" readonly>
+    <input type="text" placeholder="<%= formatted_name(resource.display_name) %>" autocomplete="off" readonly>
   <% end %>
 </div>
 
diff --git a/app/views/shared/_form_errors.html.erb b/app/views/shared/_form_errors.html.erb
new file mode 100644
index 0000000000..f6253b6379
--- /dev/null
+++ b/app/views/shared/_form_errors.html.erb
@@ -0,0 +1,10 @@
+<%# Tailwind form-error summary for casadesign pages. The legacy shared/_error_messages
+    stays for Bootstrap pages. %>
+<% if resource.errors.any? %>
+  <div id="error_explanation" role="alert" class="flex items-center gap-3 rounded-xl border border-rose-200 bg-rose-50 p-4">
+    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-rose-100 text-rose-600">
+      <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
+    </span>
+    <p class="text-sm text-rose-800"><span class="font-semibold">Unable to save:</span> <%= resource.errors.full_messages.to_sentence %></p>
+  </div>
+<% end %>
diff --git a/app/views/shared/_manage_volunteers.html.erb b/app/views/shared/_manage_volunteers.html.erb
index 58ac5a0152..bd09e54bc8 100644
--- a/app/views/shared/_manage_volunteers.html.erb
+++ b/app/views/shared/_manage_volunteers.html.erb
@@ -39,7 +39,7 @@
             <select id="<%= select_id %>" name="<%= select_name %>" class='form-control select-style-2 mt-1'>
               <option value="">Please Select Volunteer</option>
               <% available_volunteers.each do |volunteer| %>
-                <option value="<%= volunteer.id %>"><%= volunteer.display_name %></option>
+                <option value="<%= volunteer.id %>"><%= formatted_name(volunteer.display_name) %></option>
               <% end %>
             </select>
           </div>
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
new file mode 100644
index 0000000000..01b5a6f82f
--- /dev/null
+++ b/app/views/shared/_pagination.html.erb
@@ -0,0 +1,32 @@
+<%# Tailwind pagination bar for bespoke tables. Pass the Pagy instance as `pagy`.
+    Row-count summary on the left, page controls on the right (industry standard). %>
+<% if pagy.count.positive? %>
+  <% link = "grid h-8 min-w-[2rem] place-items-center rounded-lg border border-slate-200 bg-white px-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" %>
+  <% disabled = "grid h-8 min-w-[2rem] place-items-center rounded-lg border border-transparent px-2 text-slate-300" %>
+  <nav class="mt-1 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 px-4 pt-3 text-sm" aria-label="Pagination">
+    <p class="text-slate-500">Showing <span class="font-medium text-slate-700"><%= pagy.from %></span>&ndash;<span class="font-medium text-slate-700"><%= pagy.to %></span> of <span class="font-medium text-slate-700"><%= pagy.count %></span></p>
+    <% if pagy.pages > 1 %>
+      <div class="flex items-center gap-1">
+        <% if pagy.prev %>
+          <%= link_to url_for(request.query_parameters.merge(page: pagy.prev)), rel: "prev", "aria-label": "Previous page", class: link do %><i class="bi bi-chevron-left" aria-hidden="true"></i><% end %>
+        <% else %>
+          <span class="<%= disabled %>" aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
+        <% end %>
+        <% pagy.series.each do |item| %>
+          <% if item == :gap %>
+            <span class="grid h-8 min-w-[2rem] place-items-center px-1 text-slate-400" aria-hidden="true">&hellip;</span>
+          <% elsif item.is_a?(String) %>
+            <span class="grid h-8 min-w-[2rem] place-items-center rounded-lg border border-brand-600 bg-brand-600 px-2 text-sm font-semibold text-white" aria-current="page"><%= item %></span>
+          <% else %>
+            <%= link_to item, url_for(request.query_parameters.merge(page: item)), "aria-label": "Page #{item}", class: link %>
+          <% end %>
+        <% end %>
+        <% if pagy.next %>
+          <%= link_to url_for(request.query_parameters.merge(page: pagy.next)), rel: "next", "aria-label": "Next page", class: link do %><i class="bi bi-chevron-right" aria-hidden="true"></i><% end %>
+        <% else %>
+          <span class="<%= disabled %>" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
+        <% end %>
+      </div>
+    <% end %>
+  </nav>
+<% end %>
diff --git a/app/views/supervisors/edit.html.erb b/app/views/supervisors/edit.html.erb
index e360439231..cd4adfb44a 100644
--- a/app/views/supervisors/edit.html.erb
+++ b/app/views/supervisors/edit.html.erb
@@ -56,11 +56,11 @@
   <tbody>
     <% (@all_volunteers_ever_assigned || @supervisor.volunteers).each do |volunteer| %>
       <tr>
-        <td><%= link_to volunteer.display_name, edit_volunteer_path(volunteer) %></td>
+        <td><%= link_to formatted_name(volunteer.display_name), edit_volunteer_path(volunteer) %></td>
         <td><%= volunteer.email %></td>
         <% if button_text == "Hide unassigned" %>
           <td>
-            <%= volunteer.has_supervisor? ? volunteer.supervisor.display_name : "No One" %>
+            <%= volunteer.has_supervisor? ? formatted_name(volunteer.supervisor.display_name) : "No One" %>
           </td>
         <% end %>
         <td>
diff --git a/app/views/supervisors/index.html.erb b/app/views/supervisors/index.html.erb
index e6425910f2..4342cb3e3b 100644
--- a/app/views/supervisors/index.html.erb
+++ b/app/views/supervisors/index.html.erb
@@ -69,7 +69,7 @@
             <% @supervisors.each do |supervisor| %>
               <tr>
                 <td id="name-<%= supervisor.id %>" class="min-width">
-                  <%= link_to(supervisor.display_name, edit_supervisor_path(supervisor)) %>
+                  <%= link_to(formatted_name(supervisor.display_name), edit_supervisor_path(supervisor)) %>
                 </td>
                 <td class="min-width">
                   <% no_attempt_volunteers = supervisor.no_attempt_for_two_weeks %>
@@ -140,7 +140,7 @@
               <% @available_volunteers.each do |volunteer| %>
                 <tr>
                   <td>
-                    <%= link_to volunteer.display_name, edit_volunteer_path(volunteer) %>
+                    <%= link_to formatted_name(volunteer.display_name), edit_volunteer_path(volunteer) %>
                   </td>
                   <td>
                     <% volunteer.casa_cases.map do |casa_case| %>
@@ -191,10 +191,10 @@
                     <% if casa_case.active? %>
                       <% if current_user.volunteer? %>
                         <%= safe_join(casa_case.assigned_volunteers.map { |vol|
-                      vol.display_name }, ", ") %>
+                      formatted_name(vol.display_name) }, ", ") %>
                       <% else %>
                         <%= safe_join(casa_case.assigned_volunteers.map { |vol|
-                      link_to(vol.display_name, edit_volunteer_path(vol)) },
+                      link_to(formatted_name(vol.display_name), edit_volunteer_path(vol)) },
                                   ", ") %>
                       <% end %>
                     <% else %>
diff --git a/app/views/users/_edit_profile.erb b/app/views/users/_edit_profile.erb
index 48e4f75fdf..1940a10f20 100644
--- a/app/views/users/_edit_profile.erb
+++ b/app/views/users/_edit_profile.erb
@@ -1,45 +1,46 @@
-<div class="mb-1">
-  <strong class="text-dark">CASA organization </strong>
-  <%= resource&.casa_org&.name %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Added to system </strong>
-  <%= resource&.decorate(context: {format: :edit_profile})&.formatted_created_at %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Email</strong>
-  <%= resource&.email %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Email confirmation status </strong>
-  <%= resource&.decorate&.email_confirmation_status %>
-</div>
-<% if resource&.unconfirmed_email.present? %>
-  <div class="mb-1">
-    <strong class="text-dark">Pending email confirmation </strong>
-    <%= resource.unconfirmed_email %>
-  </div>
-<% end %>
-<div class="mb-1">
-  <strong class="text-dark">Invitation email sent </strong>
-  <%= resource&.decorate(context: {format: :edit_profile})&.formatted_invitation_sent_at || "never" %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Last logged in </strong>
-  <%= resource&.decorate(context: {format: :edit_profile})&.formatted_current_sign_in_at || "never" %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Invitation accepted </strong>
-  <%= resource&.decorate(context: {format: :edit_profile})&.formatted_invitation_accepted_at || "never" %>
-</div>
-<div class="mb-1">
-  <strong class="text-dark">Password reset last sent </strong>
-  <%= resource&.decorate(context: {format: :edit_profile})&.formatted_reset_password_sent_at || "never" %>
-</div>
-
-<% if resource.is_a?(Volunteer) %>
-  <div class="mb-1">
-    <strong class="text-dark">Learning Hours This Year</strong>
-    <%= resource.learning_hours_spent_in_one_year %>
-  </div>
-<% end %>
+<dl class="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
+  <div>
+    <dt class="text-xs font-medium text-slate-500">CASA organization</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.casa_org&.name %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Added to system</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate(context: {format: :edit_profile})&.formatted_created_at %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Email</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.email %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Email confirmation status</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate&.email_confirmation_status %></dd>
+  </div>
+  <% if resource&.unconfirmed_email.present? %>
+    <div>
+      <dt class="text-xs font-medium text-slate-500">Pending email confirmation</dt>
+      <dd class="mt-0.5 text-sm text-slate-700"><%= resource.unconfirmed_email %></dd>
+    </div>
+  <% end %>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Invitation email sent</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate(context: {format: :edit_profile})&.formatted_invitation_sent_at || "never" %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Last logged in</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate(context: {format: :edit_profile})&.formatted_current_sign_in_at || "never" %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Invitation accepted</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate(context: {format: :edit_profile})&.formatted_invitation_accepted_at || "never" %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium text-slate-500">Password reset last sent</dt>
+    <dd class="mt-0.5 text-sm text-slate-700"><%= resource&.decorate(context: {format: :edit_profile})&.formatted_reset_password_sent_at || "never" %></dd>
+  </div>
+  <% if resource.is_a?(Volunteer) %>
+    <div>
+      <dt class="text-xs font-medium text-slate-500">Learning hours this year</dt>
+      <dd class="mt-0.5 text-sm text-slate-700"><%= resource.learning_hours_spent_in_one_year %></dd>
+    </div>
+  <% end %>
+</dl>
diff --git a/app/views/users/_languages.html.erb b/app/views/users/_languages.html.erb
index c4e302557d..0656a375f9 100644
--- a/app/views/users/_languages.html.erb
+++ b/app/views/users/_languages.html.erb
@@ -1,58 +1,40 @@
-<div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-    <div class="col-lg-12">
-      <div class="title mb-30">
-        <h2>My Languages</h2>
-      </div>
-    </div>
-    <div class="col-lg-12">
-      <div class="card-style mb-30">
-        <div class="table-wrapper table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th><h4>Languages</h4></th>
-                <th><h4>Actions</h4></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>English (default language)</td>
-                <td></td>
-              </tr>
-            <% volunteer.languages.each do |lang| %>
-              <tr>
-                <td><%= lang.name %></td>
-                <td>
-                  <%= link_to "Delete", remove_language_users_path(language_id: lang.id), class: "btn btn-danger",
-  method: :delete %>
-                </td>
-              </tr>
-            <% end %>
-            </tbody>
-          </table>
-        </div>
-
-        <%= form_with(model: volunteer, url: add_language_users_path) do |form| %>
-          <div class="row select-style-1 mt-3">
-            <div class="col-lg-12">
-              <h5><%= form.label :languages, "Add Language" %></h5>
-            </div>
-            <div class="col-lg-4">
-              <div class="select-position">
-                <%= form.select :languages,
-                          current_organization.languages.map { |lang| [lang.name, lang.id] },
-                          {include_blank: true},
-                          {name: :language_id} %>
-              </div>
-            </div>
-            <div class="col-lg-8">
-              <%= button_tag "Add", type: :submit, class: "main-btn primary-btn btn-hover", id: "add-language-button" %>
-            </div>
-          </div>
+<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+  <h2 class="text-base font-semibold text-slate-900">My languages</h2>
+  <div class="mt-4 overflow-hidden rounded-xl border border-slate-200">
+    <table class="w-full text-sm">
+      <thead class="bg-slate-50 text-left text-xs font-semibold text-slate-600">
+        <tr>
+          <th scope="col" class="px-4 py-2.5 font-semibold">Languages</th>
+          <th scope="col" class="px-4 py-2.5 font-semibold">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-slate-100">
+        <tr>
+          <td class="px-4 py-2.5 text-slate-700">English (default language)</td>
+          <td class="px-4 py-2.5"></td>
+        </tr>
+        <% volunteer.languages.each do |lang| %>
+          <tr>
+            <td class="px-4 py-2.5 text-slate-700"><%= lang.name %></td>
+            <td class="px-4 py-2.5">
+              <%= link_to "Delete", remove_language_users_path(language_id: lang.id), method: :delete, class: "text-sm font-medium text-rose-600 hover:text-rose-700 focus-visible:underline focus-visible:outline-none" %>
+            </td>
+          </tr>
         <% end %>
+      </tbody>
+    </table>
+  </div>
 
+  <%= form_with(model: volunteer, url: add_language_users_path) do |form| %>
+    <div class="mt-4 flex flex-wrap items-end gap-3">
+      <div>
+        <%= form.label :languages, "Add Language", class: "mb-1.5 block text-sm font-medium text-slate-700" %>
+        <%= form.select :languages,
+              current_organization.languages.map { |lang| [lang.name, lang.id] },
+              {include_blank: true},
+              {name: :language_id, class: "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none sm:w-64"} %>
       </div>
+      <%= button_tag "Add", type: :submit, id: "add-language-button", class: "inline-flex items-center justify-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2" %>
     </div>
-  </div>
-</div>
+  <% end %>
+</section>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 766568ad7d..0b228e453f 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,167 +1,160 @@
-<div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-    <div class="col-lg-12">
-      <div class="title mb-30">
-        <h1>Edit Profile</h1>
-      </div>
+<% content_for :page_title, "Edit profile" %>
+
+<% input_class = "block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none" %>
+<% label_class = "mb-1.5 block text-sm font-medium text-slate-700" %>
+<% btn_primary = button_classes(:primary) %>
+<% disclosure_trigger = "flex w-full items-center justify-between gap-3 rounded-xl px-4 py-3 text-left text-sm font-medium text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500" %>
+<% checkbox_class = "h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 focus:ring-offset-0" %>
+<% address = current_user.address || Address.new %>
+
+<div class="px-4 py-6 sm:px-6 lg:px-8">
+  <div class="mx-auto max-w-3xl space-y-6">
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight text-slate-900">Edit profile</h1>
+      <p class="mt-1 text-sm text-slate-500">Manage your personal details, security, and how we reach you.</p>
     </div>
-    <div class="col-lg-12">
-      <div class="card-style mb-30">
-        <div class="card-body">
-          <%= form_with(model: @user, scope: :user, url: users_path, method: :patch) do |form| %>
-            <div class="mb-30">
-              <%= render "/shared/error_messages", resource: @user %>
-            </div>
-
-            <div class="input-style-1">
-              <%= form.label :display_name, "Display name" %>
-              <%= form.text_field :display_name, class: "form-control" %>
-            </div>
 
-            <div class="input-style-1">
-              <%= form.label :phone_number, "Phone number" %>
-              <%= form.text_field :phone_number, class: "form-control" %>
-            </div>
-
-            <div class="input-style-1">
-              <%= form.label :date_of_birth, "Date of birth" %>
-              <%= form.date_field :date_of_birth,
-                                  value: @user.date_of_birth,
-                                  class: "form-control label-font-weight" %>
-            </div>
+    <%= render "shared/form_errors", resource: @user %>
 
-            <% if current_user.address %>
-              <% address = current_user.address %>
-            <% else %>
-              <% address = Address.new %>
+    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <h2 class="text-base font-semibold text-slate-900">Your details</h2>
+      <%= form_with(model: @user, scope: :user, url: users_path, method: :patch) do |form| %>
+        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <%= form.label :display_name, "Display name", class: label_class %>
+            <%= form.text_field :display_name, class: input_class %>
+          </div>
+          <div>
+            <%= form.label :phone_number, "Phone number", class: label_class %>
+            <%= form.text_field :phone_number, class: input_class %>
+          </div>
+          <div>
+            <%= form.label :date_of_birth, "Date of birth", class: label_class %>
+            <%= form.date_field :date_of_birth, value: @user.date_of_birth, class: input_class %>
+          </div>
+          <div>
+            <%= form.fields_for :address, address do |address_form| %>
+              <%= address_form.label :content, "Address", class: label_class %>
+              <%= address_form.text_field :content, class: input_class %>
             <% end %>
+          </div>
+        </div>
 
-            <div class="input-style-1">
-              <%= form.fields_for :address, address do |f| %>
-                <%= f.label :content, "Address" %>
-                <%= f.text_field :content, class: "form-control" %>
-              <% end %>
-            </div>
-
-            <%= form.hidden_field :casa_org_id, value: current_user.casa_org_id %>
-
-            <%= render "edit_profile", resource: current_user %>
-
-            <br>
-          <div class="actions" id="accordionExample">
-
-              <%= form.button "Update Profile", type: "submit", class: "main-btn primary-btn btn-hover mb-3" %>
-              <button class="main-btn primary-btn btn-hover accordion mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                Change Password
-              </button>
-
-              <button class="main-btn primary-btn btn-hover accordion mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
-                Change Email
-              </button>
+        <%= form.hidden_field :casa_org_id, value: current_user.casa_org_id %>
 
-            <% if policy(CasaAdmin).see_deactivate_option? %>
-              <% if @active_casa_admins.length > 1 %>
-                <%= link_to "Deactivate",
-                            deactivate_casa_admin_path(current_user),
-                            method: :patch,
-                            class: "btn btn-outline-danger mb-3",
-                            data: {confirm: "WARNING: Marking an admin inactive will make them unable to login. Are you sure you want to do this?"} %>
-              <% else %>
-                <%= link_to "Deactivate",
-                            "#",
-                            class: "main-btn danger-btn-outline btn-hover mb-3",
-                            data: {confirm: "Contact your administrator at Ruby For Good to deactivate this account."} %>
-              <% end %>
+        <div class="mt-5 flex flex-wrap items-center gap-3">
+          <%= form.button "Update Profile", type: "submit", class: btn_primary %>
+          <% if policy(CasaAdmin).see_deactivate_option? %>
+            <% deactivate_class = "inline-flex items-center justify-center gap-2 rounded-lg border border-rose-200 bg-white px-4 py-2.5 text-sm font-medium text-rose-700 shadow-sm hover:bg-rose-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500" %>
+            <% if @active_casa_admins.length > 1 %>
+              <%= link_to "Deactivate", deactivate_casa_admin_path(current_user), method: :patch, class: deactivate_class, data: {confirm: "WARNING: Marking an admin inactive will make them unable to login. Are you sure you want to do this?"} %>
+            <% else %>
+              <%= link_to "Deactivate", "#", class: deactivate_class, data: {confirm: "Contact your administrator at Ruby For Good to deactivate this account."} %>
             <% end %>
-          </div>
           <% end %>
-          <div class="accordionGroup">
-            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-              <br>
-              <%= form_with(model: @user, scope: :user, url: {action: "update_password"}, method: :patch) do |f| %>
-                <div class="input-style-1">
-                  <%= f.label :current_password, "Current Password" %><br>
-                  <%= f.password_field :current_password, autocomplete: "off", class: "form-control" %>
-                </div>
-                <div class="input-style-1">
-                  <%= f.label :password, "New Password" %><br>
-                  <%= f.password_field :password, autocomplete: "off", class: "form-control password-new",
-        minlength: User.password_length.min %>
-                </div>
-                <div class="input-style-1">
-                  <%= f.label :password_confirmation, "New Password Confirmation" %><br>
-                  <%= f.password_field :password_confirmation, class: "form-control password-confirmation",
-        minlength: User.password_length.min %>
+        </div>
+      <% end %>
+    </section>
+
+    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <h2 class="text-base font-semibold text-slate-900">Account</h2>
+      <div class="mt-4">
+        <%= render "edit_profile", resource: current_user %>
+      </div>
+    </section>
+
+    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <h2 class="text-base font-semibold text-slate-900">Security</h2>
+      <div class="mt-4 space-y-3">
+        <div data-controller="disclosure" class="rounded-xl border border-slate-200">
+          <button type="button" data-action="disclosure#toggle" data-disclosure-target="trigger" aria-expanded="false" aria-controls="change-password-panel" class="<%= disclosure_trigger %>">
+            <span class="flex items-center gap-2.5"><i class="bi bi-key text-base text-slate-400" aria-hidden="true"></i> Change Password</span>
+            <i class="bi bi-chevron-down text-slate-400" aria-hidden="true"></i>
+          </button>
+          <div id="change-password-panel" data-disclosure-target="panel" class="hidden border-t border-slate-100 p-4">
+            <%= form_with(model: @user, scope: :user, url: {action: "update_password"}, method: :patch) do |f| %>
+              <div class="space-y-4">
+                <div>
+                  <%= f.label :current_password, "Current Password", class: label_class %>
+                  <%= f.password_field :current_password, autocomplete: "off", class: input_class %>
                 </div>
-                <div class="actions mb-10">
-                  <%= f.submit "Update Password", class: "btn btn-danger submit-password" %>
+                <div>
+                  <%= f.label :password, "New Password", class: label_class %>
+                  <%= f.password_field :password, autocomplete: "off", class: "#{input_class} password-new", minlength: User.password_length.min %>
                 </div>
-              <% end %>
-            </div>
-            <div id="collapseTwo" class="collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-              <br>
-              <%= form_with(model: @user, scope: :user, url: {action: "update_email"}, method: :patch) do |f| %>
-                <div class="input-style-1">
-                  <%= f.label :current_password, "Current Password" %><br>
-                  <%= f.password_field :current_password, autocomplete: "off", class: "form-control", id: "current_password_email", required: true %>
+                <div>
+                  <%= f.label :password_confirmation, "New Password Confirmation", class: label_class %>
+                  <%= f.password_field :password_confirmation, class: "#{input_class} password-confirmation", minlength: User.password_length.min %>
                 </div>
-                <div class="input-style-1">
-                  <%= f.label :email, "New Email" %><br>
-                  <%= f.text_field :email, type: "email", class: "form-control email-new", autocomplete: "off", value: nil, required: true %>
+                <%= f.submit "Update Password", class: "#{btn_primary} submit-password" %>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <div data-controller="disclosure" class="rounded-xl border border-slate-200">
+          <button type="button" data-action="disclosure#toggle" data-disclosure-target="trigger" aria-expanded="false" aria-controls="change-email-panel" class="<%= disclosure_trigger %>">
+            <span class="flex items-center gap-2.5"><i class="bi bi-envelope text-base text-slate-400" aria-hidden="true"></i> Change Email</span>
+            <i class="bi bi-chevron-down text-slate-400" aria-hidden="true"></i>
+          </button>
+          <div id="change-email-panel" data-disclosure-target="panel" class="hidden border-t border-slate-100 p-4">
+            <%= form_with(model: @user, scope: :user, url: {action: "update_email"}, method: :patch) do |f| %>
+              <div class="space-y-4">
+                <div>
+                  <%= f.label :current_password, "Current Password", class: label_class %>
+                  <%= f.password_field :current_password, autocomplete: "off", class: input_class, id: "current_password_email", required: true %>
                 </div>
-                <div class="actions mb-10">
-                  <%= f.submit "Update Email", class: "btn btn-danger submit-email" %>
+                <div>
+                  <%= f.label :email, "New Email", class: label_class %>
+                  <%= f.text_field :email, type: "email", class: "#{input_class} email-new", autocomplete: "off", value: nil, required: true %>
                 </div>
-              <% end %>
+                <%= f.submit "Update Email", class: "#{btn_primary} submit-email" %>
               </div>
-            </div>
+            <% end %>
           </div>
         </div>
       </div>
-    </div>
-  </div>
-
-<div>
-  <%= form_with(model: @user, scope: :user, url: users_path, method: :patch) do |form| %>
-    <div class="title mb-30">
-      <h2>Communication Preferences</h2>
-    </div>
-
-    <div class="card-style">
-      <p>Tell us how you'd like to receive notifications.</p>
-      <div class="form-check checkbox-style mb-20">
-        <%= form.check_box :receive_email_notifications, class: "toggle-email-notifications form-check-input" %>
-        <%= form.label :receive_email_notifications, "Email Me", class: "form-check-label" %>
-      </div>
-
-      <% if @user.casa_org.twilio_enabled? %>
-        <div class="form-check checkbox-style mb-20">
-            <%= form.check_box :receive_sms_notifications, class: "toggle-sms-notifications form-check-input" %>
-            <%= form.label :receive_sms_notifications, "Text Me", class: "form-check-label" %>
-        </div>
-        <div class="ps-4 pb-4">
-          <%= form.collection_check_boxes("sms_notification_event_ids", SmsNotificationEvent.where(user_type: @user.type),
-    :id, :name) do |event| %>
-            <div class="form-check checkbox-style mb-20">
-              <%= event.check_box(class: "form-check-input form-check-input", id: "toggle-sms-notification-event") %>
-              <%= event.label(class: "form-check-label") %>
+    </section>
+
+    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <h2 class="text-base font-semibold text-slate-900">Communication preferences</h2>
+      <p class="mt-1 text-sm text-slate-500">Tell us how you'd like to receive notifications.</p>
+      <%= form_with(model: @user, scope: :user, url: users_path, method: :patch) do |form| %>
+        <div class="mt-4 space-y-3">
+          <label class="flex items-center gap-3 text-sm text-slate-700">
+            <%= form.check_box :receive_email_notifications, class: "toggle-email-notifications #{checkbox_class}" %>
+            Email Me
+          </label>
+
+          <% if @user.casa_org.twilio_enabled? %>
+            <label class="flex items-center gap-3 text-sm text-slate-700">
+              <%= form.check_box :receive_sms_notifications, class: "toggle-sms-notifications #{checkbox_class}" %>
+              Text Me
+            </label>
+            <div class="mt-1 space-y-2 border-l-2 border-slate-100 pl-4">
+              <%= form.collection_check_boxes("sms_notification_event_ids", SmsNotificationEvent.where(user_type: @user.type), :id, :name) do |event| %>
+                <label class="flex items-center gap-3 text-sm text-slate-700">
+                  <%= event.check_box(class: checkbox_class, id: "toggle-sms-notification-event") %>
+                  <%= event.text %>
+                </label>
+              <% end %>
             </div>
+          <% else %>
+            <label class="flex items-center gap-3 text-sm text-slate-500">
+              <%= form.check_box :receive_sms_notifications, class: "toggle-sms-notifications #{checkbox_class}", disabled: true %>
+              Enable Twilio For Text Messaging
+            </label>
           <% end %>
         </div>
-      <% else %>
-        <div class="form-check checkbox-style mb-20">
-            <%= form.check_box :receive_sms_notifications, class: "toggle-sms-notifications form-check-input", disabled: true %>
-            <%= form.label :receive_sms_notifications, "Enable Twilio For Text Messaging", class: "form-check-label" %>
+
+        <div class="mt-5">
+          <%= form.submit "Save Preferences", class: "#{btn_primary} save-preference" %>
         </div>
       <% end %>
+    </section>
 
-      <div class="actions mb-10">
-        <%= form.submit "Save Preferences", class: "main-btn primary-btn btn-hover mb-3 save-preference" %>
-      </div>
-    </div>
-  <% end %>
+    <% if current_user.volunteer? %>
+      <%= render partial: "languages", locals: {volunteer: current_user} %>
+    <% end %>
+  </div>
 </div>
-
-<% if current_user.volunteer? %>
-    <%= render partial: "languages", locals: { volunteer: current_user } %>
-<% end %>
diff --git a/app/views/volunteers/_manage_supervisor.erb b/app/views/volunteers/_manage_supervisor.erb
index 107f3f42b9..4635445d5d 100644
--- a/app/views/volunteers/_manage_supervisor.erb
+++ b/app/views/volunteers/_manage_supervisor.erb
@@ -8,7 +8,7 @@
           <span class="font-weight-bold">
             Current Supervisor:
           </span>
-          <%= link_to(@volunteer.supervisor.display_name, edit_supervisor_path(@volunteer.supervisor.id)) %>
+          <%= link_to(formatted_name(@volunteer.supervisor.display_name), edit_supervisor_path(@volunteer.supervisor.id)) %>
         </h5>
         <%= button_to unassign_supervisor_volunteer_path(@volunteer),
                       method: :patch,
@@ -23,7 +23,7 @@
             <label for='supervisor_volunteer_supervisor_id'>Select a Supervisor</label>
             <select name='supervisor_volunteer[supervisor_id]' id="supervisor_volunteer_supervisor_id" class='form-control select2'>
               <% @supervisors.each do |supervisor| %>
-                <option value="<%= supervisor.id %>"><%= supervisor.display_name %></option>
+                <option value="<%= supervisor.id %>"><%= formatted_name(supervisor.display_name) %></option>
               <% end %>
             </select>
           </div>
diff --git a/app/views/volunteers/_notes.html.erb b/app/views/volunteers/_notes.html.erb
index ebab0d7876..2f613c8064 100644
--- a/app/views/volunteers/_notes.html.erb
+++ b/app/views/volunteers/_notes.html.erb
@@ -19,7 +19,7 @@
               <% @volunteer.notes.each do |note| %>
                 <tr>
                   <td class="min-width"><%= note.content %></td>
-                  <td class="min-width"><%= note.creator.display_name %></td>
+                  <td class="min-width"><%= formatted_name(note.creator.display_name) %></td>
                   <td class="min-width"><%= l(note.created_at, format: :standard) %></td>
                   <td class="min-width">
                     <%= link_to edit_volunteer_note_path(@volunteer, note), class: "main-btn primary-btn btn-hover btn-sm" do %>
diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb
index 841e3a2c5d..c12c613543 100644
--- a/app/views/volunteers/index.html.erb
+++ b/app/views/volunteers/index.html.erb
@@ -49,7 +49,7 @@
                                 policy(User).edit_name?(supervisor), # checked?
                                 class: "form-check-input",
                                 data: { value: supervisor.id } %>
-              <%= label_tag tag_name, supervisor.display_name, class: "form-check-label" %>
+              <%= label_tag tag_name, formatted_name(supervisor.display_name), class: "form-check-label" %>
             </div>
           <% end %>
         </div>
@@ -218,7 +218,7 @@
                           <option value="unselected">Choose a supervisor</option>
                           <option value="">None</option>
                           <% @supervisors&.active&.each do |supervisor| %>
-                            <option value="<%= supervisor.id %>"><%= supervisor.display_name %></option>
+                            <option value="<%= supervisor.id %>"><%= formatted_name(supervisor.display_name) %></option>
                           <% end %>
                        </select>
                        </div>
diff --git a/bin/asset_bundling_scripts/build_js.js b/bin/asset_bundling_scripts/build_js.js
index 303fca4b7a..4da650f421 100755
--- a/bin/asset_bundling_scripts/build_js.js
+++ b/bin/asset_bundling_scripts/build_js.js
@@ -28,7 +28,7 @@ const watchingConsoleLogger = [{
 
 async function main () {
   const context = await esbuild.context({
-    entryPoints: ['app/javascript/application.js', 'app/javascript/all_casa_admin.js'],
+    entryPoints: ['app/javascript/application.js', 'app/javascript/all_casa_admin.js', 'app/javascript/metrics.js'],
     outdir: 'app/assets/builds',
     bundle: true,
     plugins: watchingConsoleLogger
diff --git a/bin/measure-responsive.mjs b/bin/measure-responsive.mjs
new file mode 100755
index 0000000000..b6cdd921a4
--- /dev/null
+++ b/bin/measure-responsive.mjs
@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+// Measure horizontal overflow of local HTML pages at true viewport widths.
+//
+// Why this exists: headless Chrome clamps its minimum window to ~500px, so
+// `--window-size=375` silently measures 500px and media queries never reach
+// phone width. This drives Chrome over the DevTools Protocol and uses
+// Emulation.setDeviceMetricsOverride, which forces the real viewport width, so
+// `md:`/`lg:` breakpoints evaluate exactly as they do on a device.
+//
+// For each page it reports `documentElement.scrollWidth / innerWidth` (the
+// page-fit authority) and, if any element's rendered right edge exceeds the
+// viewport, the widest offender (clipped sub-2px boxes such as sr-only captions
+// are skipped, and elements inside their own `overflow-x-auto` scroller still
+// surface so a data table that only scrolls horizontally is caught).
+//
+// Usage:
+//   bin/measure-responsive.mjs <width,width,...> <file.html> [file.html ...]
+//   bin/measure-responsive.mjs tmp/design-preview/*.html            # default widths
+//
+// Requires: a `google-chrome` on PATH and Node >= 22 (built-in WebSocket).
+import { spawn } from 'node:child_process'
+
+/* global WebSocket */
+
+const args = process.argv.slice(2)
+const DEFAULT_WIDTHS = [375, 414, 768, 1024, 1280]
+const widths = /^[\d,]+$/.test(args[0] ?? '') ? args.shift().split(',').map(Number) : DEFAULT_WIDTHS
+const files = args
+if (files.length === 0) {
+  console.error('usage: bin/measure-responsive.mjs [width,width,...] <file.html> [file.html ...]')
+  process.exit(1)
+}
+const PORT = 9222
+const HOST = `127.0.0.1:${PORT}`
+
+const EXPR = '(function(){var m=0,t="";var e=document.body.getElementsByTagName("*");for(var i=0;i<e.length;i++){var x=e[i];var r=x.getBoundingClientRect();if(r.width<2)continue;if(r.right>innerWidth+2&&r.right>m){m=r.right;t=x.tagName+"."+((x.className&&x.className.split)?x.className.split(" ").slice(0,2).join("."):"");}}return "W"+document.documentElement.scrollWidth+"/"+innerWidth+(m?" OVERFLOW "+t+" "+Math.round(m):" ok");})()'
+
+function cdp (wsUrl) {
+  const ws = new WebSocket(wsUrl)
+  let id = 0
+  const pending = new Map()
+  const waiters = []
+  ws.onmessage = (ev) => {
+    const msg = JSON.parse(ev.data)
+    if (msg.id && pending.has(msg.id)) { pending.get(msg.id)(msg.result); pending.delete(msg.id) }
+    if (msg.method) waiters.forEach((w) => w(msg.method))
+  }
+  const ready = new Promise((resolve) => { ws.onopen = resolve })
+  return {
+    ready,
+    send: (method, params = {}) => new Promise((resolve) => { id++; pending.set(id, resolve); ws.send(JSON.stringify({ id, method, params })) }),
+    waitFor: (method) => new Promise((resolve) => waiters.push((m) => { if (m === method) resolve() })),
+    close: () => ws.close()
+  }
+}
+
+async function measure (fileUrl, width) {
+  const res = await fetch(`http://${HOST}/json/new?about:blank`, { method: 'PUT' })
+  const target = await res.json()
+  const c = cdp(target.webSocketDebuggerUrl)
+  await c.ready
+  await c.send('Page.enable')
+  await c.send('Emulation.setDeviceMetricsOverride', { width, height: 900, deviceScaleFactor: 1, mobile: false })
+  const loaded = c.waitFor('Page.loadEventFired')
+  await c.send('Page.navigate', { url: fileUrl })
+  await Promise.race([loaded, new Promise((resolve) => setTimeout(resolve, 4000))])
+  await new Promise((resolve) => setTimeout(resolve, 400))
+  const { result } = await c.send('Runtime.evaluate', { expression: EXPR, returnByValue: true })
+  c.close()
+  await fetch(`http://${HOST}/json/close/${target.id}`)
+  return result.value
+}
+
+async function waitForChrome () {
+  for (let i = 0; i < 40; i++) {
+    try { await fetch(`http://${HOST}/json/version`); return } catch { await new Promise((resolve) => setTimeout(resolve, 250)) }
+  }
+  throw new Error('Chrome did not open a debugging port')
+}
+
+const chrome = spawn('google-chrome', [
+  '--headless=new', '--no-sandbox', '--disable-gpu',
+  `--remote-debugging-port=${PORT}`, '--remote-allow-origins=*', 'about:blank'
+], { stdio: 'ignore' })
+process.on('exit', () => chrome.kill())
+
+try {
+  await waitForChrome()
+  for (const f of files) {
+    const abs = f.startsWith('/') ? f : `${process.cwd()}/${f}`
+    const name = f.split('/').pop().replace(/\.html$/, '')
+    for (const w of widths) {
+      const out = await measure('file://' + abs, w).catch((e) => 'ERR ' + e.message)
+      console.log(`  ${name} @${w}px -> ${out}`)
+    }
+  }
+} finally {
+  chrome.kill()
+}
diff --git a/design-todo.md b/design-todo.md
new file mode 100644
index 0000000000..dde9953da3
--- /dev/null
+++ b/design-todo.md
@@ -0,0 +1,137 @@
+# CASA design migration — backlog
+
+The live "what's left" list for moving the CASA UI off Bootstrap and onto the Tailwind
+design system on the `casadesign` branch.
+
+- **How** to build anything here is defined in [`design.md`](design.md) — the permanent
+  source of truth. This file is only the ordered **what's-left**.
+- Roughly ordered by value ÷ effort. Check items off, then commit + push at every
+  checkpoint (see the workflow in `design.md`).
+- `[x]` done · `[~]` in progress · `[ ]` not started.
+
+## Phase 0 — Stabilize what's shipped
+- [x] Fix stale supervisor dashboard request spec (it still asserted a redirect after
+  the dashboard began rendering).
+- [ ] Add a `SupervisorDashboard` service spec (stats, per-volunteer status,
+  `needs_attention`).
+- [ ] Sweep shipped pages for Font Awesome `fas fa-*` icons (they don't render on
+  Tailwind layouts) and for stray Bootstrap classes doing layout work.
+- [ ] Fix a latent, order-dependent test flake (pre-existing, not design work):
+  `CaseContact` validates `occurred_at` with `less_than: Time.zone.tomorrow + 1.day`
+  in `app/models/case_contact.rb` — a value captured at class-load time, so if the
+  class first loads while a spec is time-traveled to the past, the "future" cutoff
+  freezes and later specs fail with "Date can't be in the future". Make it a lambda
+  (`less_than: -> { Time.zone.tomorrow + 1.day }`).
+
+## Phase 1 — App-shell coherence (leaf pages reached from the new shell)
+- [x] Notifications (`notifications#index`).
+- [x] Edit profile (`users#edit`) — profile, change password, change email, languages.
+  Rebuilt the Bootstrap collapse accordions with a `disclosure` Stimulus controller.
+- [ ] Impersonation banner inside `casa_app` (currently only in the legacy header).
+- [ ] Help link + sign-out in the account menu reach a consistent destination.
+- [ ] Flash / notifier parity — reconcile the `casa_app` flash strip with the legacy
+  SweetAlert notifier.
+
+## Phase 2 — Role landing dashboards
+- [x] Volunteer dashboard / landing — triage (active cases, cases needing a contact,
+  hours), keeping the single-active-case fast-path to "log a contact". Added an org
+  announcement banner to the shell so it isn't lost on dashboard pages.
+- [x] Admin dashboard — org-wide triage (active volunteers/cases, unassigned cases,
+  cases needing a contact) using batched/aggregate queries, not per-row.
+
+## Phase 3 — Core workflows (highest traffic)
+- [x] Cases index (`casa_cases#index`) — bespoke table + server-side filter selects + Pagy
+  pagination. Replaced the two always-empty Hearing Type / Judge columns (their case-level
+  columns were removed in 2023 — that data lives on court dates now) with a single
+  "Next court date" column (preloaded, no N+1); sentence-cased the column headers.
+  Follow-ups: column-visibility picker intentionally not planned (only 6 columns; a responsive layout is the
+  better mobile investment); free-text search shipped (case number + active
+  volunteer name, submit-on-Enter) with live as-you-type search as a follow-up; sortable headers shipped
+  (server-side ?sort=, aria-sort, double-caret indicator); action-button
+  labels kept Title Case (spec-coupled).
+- [x] Case show (`casa_cases#show`) on `casa_app`: Tailwind fact card, court dates,
+  assigned volunteers + reminder, and the case-contact list (new `casa_cases/_case_contact_card`).
+  Report generation is a native `<dialog>` (modal + court-report Stimulus controllers, no
+  Bootstrap modal / jQuery), the thank-you dialog auto-opens on the success redirect, and
+  Add-to-Calendar uses the `add-to-calendar` controller. Infra added: modal / add-to-calendar /
+  court-report / local-storage-reset controllers and `CaseContactDecorator#medium_icon`.
+  Follow-ups: consolidate the show-specific contact card + reminder form with the shared
+  Bootstrap partials when the contacts index / volunteers-edit migrate. Verified responsive
+  (375-1280) and WCAG AA.
+- [ ] Case new / edit.
+- [ ] Case contacts index (server-side DataTable — also needs the `dashboard.js`
+  `columns.render` rewrite) + the case-contact form (multi-step).
+- [ ] Case contacts "new design" table (`case_contacts/case_contacts_new_design`).
+
+## Phase 4 — Management & rosters
+- [ ] Volunteers index + edit.
+- [ ] Supervisors index + edit.
+- [ ] Case assignments.
+- [ ] Learning hours (volunteer + supervisor/admin views).
+- [ ] Reimbursements.
+- [ ] Reports hub + individual reports / exports.
+- [ ] Organization settings (`casa_org#edit`).
+
+## Phase 5 — Admin long-tail CRUD
+- [ ] Contact types, contact type groups, contact topics.
+- [ ] Hearing types, judges, languages.
+- [ ] Mileage rates, placement types, placements.
+- [ ] Banners, custom org links, checklist items.
+- [ ] Imports, court dates / bulk court dates, emancipation.
+- [x] Health / metrics page (`health#index`): rebuilt as bespoke server-rendered SVG
+  (line charts with a distinct line-style + marker per series, heatmap-as-table, table
+  twins, stat tiles with correct totals, and zero / no-data / empty states) on a minimal
+  `metrics` layout; retired the Chart.js + jQuery `display_app_metric.js`. Follow-ups (date-range filter, Stimulus hover, and the unused chart.js deps removal now shipped): a validated dark-mode
+  palette.
+
+## Phase 6 — Edges
+- [ ] All-CASA-admin area (its own sidebar / shell).
+- [ ] Devise edge pages (unlock / confirmation, if enabled) and error pages.
+- [ ] Static / marketing pages.
+
+## Cross-cutting / infrastructure
+- [ ] Finish the sentence-case pass on interactive copy that is shared across pages —
+  button/field labels like "Update Profile", "Change Password", "New Password",
+  "Enable Twilio For Text Messaging" live on the users / volunteers / all-CASA-admin
+  edit pages and a shared spec example, so rename them (and their
+  `click_on` / `fill_in` / `have_field` specs) holistically, not page-by-page.
+- [ ] Contrast audit of shipped pages: replace remaining `text-slate-400` body/meta text
+  with `slate-500` for WCAG AA; re-check pills and badges.
+- [ ] **Vendor Bootstrap Icons** into the asset pipeline; drop the CDN link.
+- [ ] Move the inline nav-toggle `<script>` in `casa_app.html.erb` to a Stimulus
+  controller (aligns with the jQuery -> Stimulus migration, issue #5016).
+- [x] Table strategy (revised) — build tables bespoke in Tailwind (server-side filters +
+  Pagy pagination + Turbo Drive), matching the dashboard; retire jQuery DataTables
+  page-by-page. Theming DataTables was rejected (couldn't meet WCAG/design). Cases index
+  is the reference pattern (`shared/_pagination`, `auto-submit` controller).
+- [ ] Per-page accessibility pass (axe) as each screen migrates.
+- [x] Responsive pass on each migrated page: verify mobile / tablet / desktop; give data
+  tables a stacked / card layout on small screens rather than horizontal scroll. Complete:
+  cases index, health metrics, supervisor + volunteer dashboards, notifications, edit profile,
+  and the casa_auth pages (sign-in, forgot / reset password, accept invitation). All verified by
+  measurement at true 375 / 414 / 768 / 1024 / 1280 widths via a CDP device-metrics override
+  (`bin/measure-responsive.mjs`), which bypasses headless Chrome's 500px minimum-window clamp so media
+  queries evaluate at real phone width. The health heatmap is a density matrix, so it keeps
+  horizontal scroll + a sticky day-of-week axis rather than card-stacking (which would destroy
+  the visualization); its chart-twin data tables are months-as-rows (narrow) inside a collapsed
+  `<details>`. A contrast pass over the swept pages fixed three AA misses: notification /
+  patch-note timestamps and all input placeholders slate-400 -> slate-500, and the auth aside
+  footer white/60 -> white/80.
+- [ ] Remove dead legacy code once confirmed unused (e.g. the unrendered
+  `app/views/notifications/_notification.html.erb` + its `notification_row_class` /
+  `notification_icon` helpers; `casa_cases/_generate_report_modal` (orphaned now that Case show
+  uses the native-dialog report modal); the vestigial `CasaCase#hearing_type` / `#judge`
+  `belongs_to` + `hearing_type_name` / `judge_name` delegates whose columns were dropped
+  in 2023 — still referenced by `supervisors/index` and the legacy case pages).
+- [ ] Decommission the Bootstrap `application` layout + `application.scss` once the last
+  page is migrated.
+
+## Stakeholder / product questions (confirm before finalizing)
+- [ ] **Hearing type & judge on case lists.** The old cases index (and `supervisors/index`)
+  showed per-case "Hearing Type" and "Judge" columns, but their backing columns were removed
+  from `casa_cases` in 2023 (migration `20230729213608`) — that data moved to court dates, so
+  those columns have rendered blank for every case since. The migrated cases index now shows
+  "Next court date" instead. Ask stakeholders: is next court date the right thing to surface on
+  the roster, or do they want the upcoming hearing's type/judge (sourced from court dates)? The
+  answer decides whether we also fix `supervisors/index` and whether to delete the dead
+  `CasaCase` associations.
diff --git a/design.md b/design.md
new file mode 100644
index 0000000000..ef0b95b3cd
--- /dev/null
+++ b/design.md
@@ -0,0 +1,405 @@
+# CASA Design System
+
+> **Permanent, living record** of the CASA UI refresh (`casadesign` branch) — the
+> **single source of truth** for the new design system and the decisions behind it.
+> **Refer to it for all UI work** so this direction never has to be rediscovered or
+> rebuilt. Read it before building UI, and keep it current as patterns solidify.
+> The live "what's left" backlog lives in [`design-todo.md`](design-todo.md).
+
+## Status & approach
+
+Migrating the UI to **Tailwind CSS v4** with a clean, modern look (reference points:
+Stripe, Airbnb — calm, trustworthy, generous whitespace).
+
+Tailwind runs **alongside the legacy Bootstrap 5 UI**. Migrate **page-by-page**:
+new/redesigned screens use a Tailwind-only layout; untouched screens keep the
+Bootstrap `application` layout. Never load both CSS resets on the same page.
+
+- Tailwind source: `app/assets/stylesheets/tailwind.css` (CSS-first `@theme`).
+- Build: `npm run build:tailwind` (one-off) / `build:tailwind:dev` (watch); the `tw`
+  process in `Procfile.dev` runs the watcher. Output -> `app/assets/builds/`.
+
+## Foundations
+
+### Typography
+- **Figtree** (Google Fonts), weights 400/500/600/700/800. Warm humanist sans.
+- Scale:
+  - Page title (h1): `text-2xl font-bold tracking-tight text-slate-900`
+  - Section title (h2): `text-base font-semibold text-slate-900`
+  - Body: `text-sm text-slate-600`
+  - Label: `text-sm font-medium text-slate-700`
+  - Muted / meta: `text-xs text-slate-500` (never `text-slate-400` for text — fails AA)
+
+### Sentence case
+All UI copy — page titles, section headings, subtitles, table headers, field labels,
+buttons, badges and nav — uses **sentence case**: capitalise only the first word and
+proper nouns (CASA, Twilio, people's names). So "Track volunteer progress", not "Track
+Volunteer Progress" and never the shouty all-caps "TRACK…". Do **not** apply the
+`uppercase` CSS transform to labels; use size, weight and colour for hierarchy instead.
+
+### Color
+Brand = indigo. Neutrals = slate. Semantic colors below.
+
+| Token | Value | Use |
+|---|---|---|
+| brand-50…900 | indigo `#eef2ff`…`#312e81` | primary actions, active nav, accents |
+| slate-50…900 | neutrals | text, borders, surfaces |
+| emerald | — | success / "on track" |
+| amber | — | warning / notices |
+| rose | — | danger / "needs follow-up" |
+| sky, violet, teal | — | avatar / accent variety |
+
+Brand scale lives in `tailwind.css` `@theme` as `--color-brand-*`.
+
+### Spacing, radius, elevation
+- 4px spacing base (Tailwind default).
+- Radius: controls `rounded-lg`; cards/panels `rounded-2xl`; icon tiles `rounded-xl`.
+- Surfaces: white, `border border-slate-200`, `shadow-sm`.
+- Page background: `bg-slate-50`.
+
+### Iconography
+- **Bootstrap Icons** (`bi-*`), loaded via CDN in the shell layout for now — matches the
+  approved mockups. Vendor into the asset pipeline before production.
+- **Icon tile pattern** — icons representing a *stat or status* sit on a soft
+  colored rounded background:
+  `grid place-items-center h-9 w-9 rounded-xl bg-{semantic}-50 text-{semantic}-600`.
+  Use for KPI cards, section headers, and list-item leading icons.
+  **Do not** use bare floating icons or ringed white "avatar" circles for status
+  contexts — reserve initial-avatars for representing *people* only.
+- **Leading-icon alignment** — an icon that precedes a label (menu items, list rows) is
+  **top-aligned to the first line** (`items-start`), like a list marker, never centered
+  against a wrapped block. Single-line labels look identical either way; `items-start` keeps
+  it correct once a label wraps. (Material and Primer both top-align multi-line leading
+  elements.)
+
+### Accessibility (WCAG 2.1 AA)
+Everything ships to **WCAG 2.1 AA** — it's part of "done", not a follow-up.
+- **Contrast** ≥ 4.5:1 for text (3:1 for large ≥24px/bold text and for UI borders/icons).
+  Muted text is `slate-500` on white — **not `slate-400`, which fails AA** — and
+  `slate-600` on tinted surfaces. Never signal meaning by colour alone; pair a status
+  colour with an icon or word.
+- **Structure**: one `h1` per page, in-order headings, landmarks (`main`/`nav`/`aside`),
+  real lists, and `<caption>` + `scope` on tables.
+- **Forms**: every control has a real `<label>`; the error summary uses `role="alert"`
+  and names the field; invalid/required state is never colour-only.
+- **Keyboard & focus**: fully keyboard-operable, visible `focus-visible` rings, a skip
+  link, logical order; icon-only controls carry an `aria-label`, decorative icons are
+  `aria-hidden`.
+- **Motion**: respect `prefers-reduced-motion` (`motion-reduce:` variants).
+
+## Components
+
+### Buttons
+Use the **`button_classes(:variant)`** helper (`DesignSystemHelper`) as the single source of
+truth. Never hand-write button class strings in views; they drift (that is how the variants
+ended up mismatched). Variants:
+- `:primary` (filled brand): `bg-brand-600 text-white font-semibold hover:bg-brand-700`
+- `:secondary` (outlined): `border border-slate-200 bg-white text-slate-700 font-medium hover:bg-slate-50`
+- `:danger` (filled rose): `bg-rose-600 text-white font-semibold hover:bg-rose-700`
+
+Every variant shares a base of `inline-flex h-10 items-center justify-center gap-2 rounded-lg
+px-4 text-sm shadow-sm` plus a `focus-visible` brand ring and `disabled:` states. The fixed
+**`h-10` (40px) height token** is deliberate: with `box-sizing: border-box` it absorbs the
+outlined variant's 1px border, so filled and outlined buttons are the same height by
+construction (40px is the mainstream medium-button height: Material 3, Chakra, shadcn). **Do
+not** re-equalize sizes with `border border-transparent` on the filled variants; that is a
+fragile compensation pinned to the secondary's exact border width, and the height token
+already handles it.
+
+- Tertiary (ghost): `rounded-lg px-2 py-1 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900`.
+  No border, fill, or shadow: the lowest-emphasis action, for repeated row / toolbar actions so they recede from brand
+  links. Not part of `button_classes` (it is a low-emphasis action, not a CTA). Neutral ink stays at or above AA
+  (slate-600 is about 7:1; never `slate-400` under visible text). Leading icon via `gap-1.5` plus a `bi-*` glyph.
+  Right-aligned in a table's trailing actions cell, give that cell extra end padding (`pr-6`) so the control clears the
+  card edge rather than skewing the button's own padding.
+
+### Inputs
+`block w-full rounded-lg border border-slate-300 px-3.5 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30 focus:outline-none`
+
+### Card / panel
+`rounded-2xl border border-slate-200 bg-white shadow-sm` (pad `p-5`).
+
+### Table (in a card)
+Full-bleed table inside an `overflow-hidden rounded-2xl` card: a header row
+(`border-b border-slate-100 p-4`), then `thead`/`tbody` with cells `px-4 py-3` and
+`divide-y divide-slate-50` between rows. Add `pb-2` to the card so the last row clears
+the rounded bottom corner instead of butting against it (use `py-2` for a header-less
+list card — e.g. notifications — so the first row clears the top corner too). Keep rows
+a uniform height (a taller last row reads as a bug).
+
+### Tables (bespoke) + pagination
+Hand-built Tailwind (dashboard tables + cases index), not DataTables. `overflow-hidden
+rounded-2xl` card (+ `py-2` inset), full-bleed table, `thead th` = `text-xs font-semibold
+text-slate-600`, cells `px-4 py-3`, `divide-y divide-slate-50`, `hover:bg-slate-50/70`.
+Keep the `thead` even when empty and put an empty-state row in the `tbody`. Filtering /
+sort / pagination are **server-side** (params + Pagy); the filter bar is plain selects that
+submit on change (`auto-submit` controller). Pagination: the `shared/_pagination` partial
+renders a Pagy instance as a bottom bar — "Showing X–Y of Z" left, page controls right
+(`nav` + `aria-label`, `aria-current`, `rel=prev/next`), preserving filter params. Don't render
+decorative emoji as data (e.g. the 🦋/🐛 transition-aged icons) — use a plain label or pill.
+Verify a column's data source before carrying one forward: the legacy cases index kept
+Hearing Type / Judge columns that had rendered blank for every case since a 2023 migration
+moved that data onto court dates — drop dead columns or re-source them (the migrated index
+shows "Next court date" instead).
+
+**Responsive:** render the full table in `hidden md:block` and a stacked-card list below `md`
+(`md:hidden`, one card per row with a `<dl>` of labeled fields). A data table never relies on
+horizontal scroll alone. The exception is a density **matrix** (the health heatmap), which keeps
+horizontal scroll with a sticky axis column (`sticky left-0 z-10 bg-white`); stacking a 2D matrix
+into cards would destroy the visualization.
+
+### Charts (data viz)
+Charts are **bespoke server-rendered SVG** (no canvas, no Chart.js), built in `HealthHelper`
+and rendered on the metrics page. Validated with the data-viz method:
+- **Series identity is never color alone.** Each line carries a distinct **line style**
+  (solid, dashed, dotted, dash-dot) **and marker shape** (circle, square, triangle, diamond)
+  on top of a validated categorical palette (indigo, emerald, amber, rose; worst adjacent
+  CVD deltaE 31.3, all AA on white). The legend shows the line + marker key, not a swatch.
+- **A table twin per chart:** a `<details>` "View as table" with a real `<table>` (scope
+  headers); the SVG carries `role="img"` + `<title>` / `<desc>`; no value is color-only.
+- **Heatmaps are accessible tables:** a day x hour grid as a `<table>` with a sequential
+  single-hue background and the count in every cell (color plus number).
+- **Marks:** 2px lines, hairline solid gridlines, markers with a 2px surface ring, direct
+  end-value labels, muted axis ink (slate-500 / 600, AA).
+- **Totals live in stat tiles, never a row sum.** Correct range totals only (sums for
+  additive metrics, a distinct count for unique loggers, footnoted). Never sum
+  non-additive columns.
+- **States:** a genuine zero shows a muted `0`; a missing value shows "No data" (never a
+  fake 0); a section with no data swaps in an empty state; loading uses skeletons; error is
+  distinct with a retry.
+- Palette checked with the data-viz skill's `validate_palette.js`. Dark mode is deferred
+  (off-the-shelf Tailwind steps miss the dark lightness band; needs hand-tuned OKLCH).
+
+### KPI stat card
+Icon tile (semantic) -> number (`text-3xl font-bold`) -> label (`text-sm text-slate-500`)
+-> optional meta (`text-xs text-slate-400`). Danger stats use a rose number + `ring-1 ring-rose-100`.
+
+### Status pill
+Base: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium`
+- On track: `bg-emerald-50 text-emerald-700` + check icon
+- Needs follow-up: `bg-rose-50 text-rose-700` + exclamation icon
+- No active cases: `bg-slate-100 text-slate-500` + minus icon
+
+### Person avatar (initials)
+`grid place-items-center h-9 w-9 rounded-full text-xs font-semibold` with a soft color
+pair (e.g. `bg-sky-100 text-sky-700`). **People only — never for status.**
+
+### Names
+User names render **without honorific prefixes** (Mrs./Mr./…), first + last only, on
+**every page**. Use `display_person(user)` (new UI) or `formatted_name(name)` (existing `.display_name`
+call sites) for the name, and `avatar_initials` for initials (all backed by
+`NamePresentation`). This is presentation-only — the
+stored `display_name` is never mutated (it must round-trip raw input for security).
+
+### Tag
+"mine" etc.: `rounded bg-brand-50 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-brand-600`.
+
+### Empty states (3 patterns)
+1. **Cold start** (no data yet): centered icon tile + heading + one-line explainer +
+   primary/secondary CTAs. Never show all-zero stat cards.
+2. **Success / all caught up**: positive confirmation panel
+   (`border-emerald-100 bg-emerald-50/40`, check icon) instead of a blank section.
+3. **No results** (filters/search): centered search icon + message tied to the active
+   filters + a "Clear filters" action.
+
+### Form errors
+Streamlined single-line `role="alert"` card shown above a form when saving fails:
+`rounded-xl border border-rose-200 bg-rose-50 p-4` with a rose danger **icon tile** (same
+style as the dashboard) and one sentence — **"Unable to save:"** followed by the messages
+joined with `to_sentence`, no bulleted list. Use the `shared/_form_errors` partial on
+Tailwind pages; the legacy `shared/_error_messages` stays for Bootstrap pages.
+
+### Dropdown / popover
+Menus (the header account menu, the cases-page "More" actions menu) are a native
+`<details>/<summary>` disclosure: the `<summary>` is the trigger (styled as a button,
+`[&::-webkit-details-marker]:hidden`), the panel an `absolute right-0 z-20 mt-2 w-56
+rounded-xl border border-slate-200 bg-white py-1 shadow-lg` card of links. The `dropdown`
+Stimulus controller enhances it — native toggle plus close on outside-click and Escape
+(focus returns to the summary) — and degrades to the plain native toggle without JS. Keep
+menus a disclosure-of-links (not a full ARIA `menu` widget) unless a screen needs arrow-key
+roving. (Distinct from `disclosure`, which is for inline panels like the edit-profile forms
+that should stay open.)
+
+The `<summary>` wears `button_classes(:secondary)` so the trigger matches the primary CTA's
+40px height. Menu items are `flex items-start gap-2 px-4 py-2 text-sm`: the leading icon is
+**top-aligned to the first line** (`items-start`), never centered, so a label that wraps
+still reads with its icon (see Iconography). A form-driven modal can be a menu item by
+rendering `Dialog::GroupComponent(wrapper_class: "contents")` so its trigger and dialog sit
+directly in the menu.
+
+**Header action pattern.** A page header shows **one primary CTA plus a `More` overflow
+disclosure**, not a flat row of equal buttons. Keep frequently-used, core actions visible and
+overflow only the occasional ones: the cases index overflows admin navigation (Case Groups,
+Bulk Court Date); the case show keeps New Case Contact and Edit visible and overflows
+Generate Court Report, Emancipation, and New Fund Request. Do not bury a core action in `More`, it
+is both a UX cost (an extra click on a common action) and a testability cost (rack_test
+cannot open a native `<details>`, so non-JS specs that click it break).
+
+On **mobile**, collapse the remaining visible secondaries into `More` too, so only the primary
+CTA and `More` share the top line. Render such an action twice with responsive visibility: a
+button wrapped in `hidden sm:contents` (shown `sm+`) and a `sm:hidden` menu item (shown on
+mobile). This keeps it no-JS and unambiguous, and a non-JS click still finds the visible
+button (rack_test ignores the `hidden` class but respects the closed `<details>`).
+
+### Disclosure (collapsible panel)
+Secondary actions (e.g. Change Password / Change Email) hide behind a full-width trigger
+button; the `disclosure` Stimulus controller toggles a `hidden` panel and keeps
+`aria-expanded` in sync. Keep the trigger a real `<button>` so it stays keyboard- and
+test-reachable.
+
+### Modal (native dialog)
+Built on the native `<dialog>` element driven by the `modal` Stimulus controller: `open`
+calls `showModal()` (focus-trapping, Escape-to-close, and an inert background for free),
+`close` closes it, a backdrop click closes it, and an `openOnConnect` value auto-opens on
+load (e.g. the case-show thank-you dialog on the `?success` redirect). Tailwind's reset zeroes
+the UA centering margin, so `tailwind.css` re-centers `dialog[data-modal-target="dialog"]`
+(fixed, horizontally centered, `top: 24vh`, and `18vh` under 640px).
+
+**One template for every task/confirm modal.** Panel: `w-[calc(100vw-2rem)] max-w-md
+overflow-hidden rounded-2xl p-0 shadow-xl backdrop:bg-slate-900/40`, then three regions:
+1. **Header** `flex items-center gap-3 border-b border-slate-100 px-5 py-4`: an optional 32px
+   status badge, the `<h2>` title (`flex-1`), then a 32px close button (`bi-x-lg`,
+   `text-slate-500`, `aria-label="Close"`).
+2. **Body** `px-5 py-4`.
+3. **Footer** `flex items-center justify-end gap-2 border-t border-slate-100 px-5 py-4`:
+   `button_classes(:secondary)` (Cancel) then the primary or `:danger` action, right-aligned.
+
+The template is the **`Dialog::` ViewComponent suite**: `Dialog::GroupComponent` (the
+<dialog> shell plus the trigger slot, size, aria label, and controller wiring) composed with
+`Dialog::HeaderComponent`, `Dialog::BodyComponent`, and `Dialog::FooterComponent`. Compose
+those (they work even inside a `form_with`) so the three regions cannot drift. This is the
+native-dialog replacement for the Bootstrap `Modal::*` suite.
+
+Shipped instances: the court-report generator (form modal; submit posts via the
+`court-report` controller) and `shared/_confirm_button` (destructive confirm; the danger
+action posts via `button_to`, and the trigger, title, message, and labels are locals). A
+separate **status variant** (the success/thank-you dialog) centers a 48px hero badge + title
++ single Close instead of a header bar. This replaces the legacy Bootstrap `Modal::*`
+components on Tailwind pages; do not restyle Bootstrap `.modal` markup (its CSS is not loaded
+on `casa_app`).
+
+**Status badge token** (the modal icon): one shape, `rounded-full`, two sizes: **32px**
+(`h-8 w-8`) inline in a header, **48px** (`h-12 w-12`) centered as a hero. Colored by intent
+(`bg-rose-100 text-rose-600` destructive, `bg-emerald-50 text-emerald-600` success). This is
+distinct from the stat/KPI **icon tile** (`rounded-xl`).
+
+## App shell
+- **Sidebar** (256px, `border-r border-slate-200 bg-white`): org **name only** in the
+  header (no logo/brand mark — not a value-add at this size, and avoids image/variant
+  infrastructure), then nav links (active = `bg-brand-50 text-brand-700`, idle =
+  `text-slate-600 hover:bg-slate-100`). Nav visibility follows Pundit policies.
+  Collapses to an off-canvas drawer below `lg`.
+- **Top bar** (`border-b border-slate-200 bg-white/80 backdrop-blur`): mobile nav
+  toggle, notifications, and the avatar **account menu** — the single place for identity
+  + account actions (no duplicate identity block in the sidebar). Its header shows name,
+  email, and a **role badge** — `current_role` as a soft pill colour-coded by role
+  (Volunteer = sky, Supervisor = violet, Casa Admin = amber) — the single place the
+  user's role is surfaced.
+- **Content**: `bg-slate-50`, generous padding, cards. Org announcement banners render
+  at the top of the content area (`layouts/_casa_banner`). Full org logo is reserved for
+  contexts with room (sign-in, court reports / exports), not the shell.
+
+## Key patterns
+- **Triage dashboard** (supervisor landing): greeting -> KPI row -> "Needs your
+  attention" list -> roster table. Lead with what needs action; power tools live in a
+  "More" menu.
+
+## Design decisions (rationale)
+
+The *why* behind the system, so choices aren't re-litigated or lost.
+
+- **Tailwind v4 runs alongside legacy Bootstrap, migrated page-by-page.** A big-bang
+  rewrite is too risky for a volunteer-run app; each page is moved wholesale onto one
+  system so the two CSS resets never collide. A page is "migrated" only when it renders
+  on a Tailwind layout with no Bootstrap classes doing layout work.
+- **Pages opt in to the new UI at the controller.** Render with `layout: "casa_app"`
+  (in-app shell) or set `layout "casa_auth"` (split auth). The default
+  `ApplicationController` layout stays the Bootstrap `application` layout, so untouched
+  screens are unaffected. Set `@active_nav` to the sidebar key (e.g. `"volunteers"`) to
+  light up the matching nav item. There is no global flag — the switch is
+  per-controller-action and reversible.
+- **Brand = indigo, neutrals = slate.** Calm, professional, high-contrast and
+  accessible; visibly distinct from the old teal/lineicons look so progress is legible.
+- **Figtree** as the typeface — a warm humanist sans that reads friendly but credible,
+  and is free via Google Fonts.
+- **Bootstrap Icons (`bi-*`), loaded by CDN — temporary.** They match the approved
+  mockups and were fast to adopt, but MUST be vendored into the asset pipeline before
+  production (tracked in `design-todo.md`). Font Awesome (`fas fa-*`) is **not** loaded
+  on Tailwind pages — using it renders nothing. Use `bi-*`.
+- **Icon tiles for status, initial-avatars for people — never mixed.** A soft colored
+  rounded tile behind an icon means "a stat/status"; a colored initials circle means
+  "a person". Keeping these disjoint avoids visual ambiguity.
+- **Sidebar shows the org name only (no logo mark); identity lives in one top-bar
+  account menu.** Dropping the logo avoids image/variant infrastructure that adds little
+  at 256px, and consolidating identity removes the duplicate sidebar identity block. The
+  full org logo is reserved for roomy contexts (sign-in, reports).
+- **Honorific-free names are presentation-only.** Show first + last (no Mr./Mrs./…) on
+  every page via `display_person` (new UI), `formatted_name` (legacy `.display_name`
+  sites) and `avatar_initials`, all backed by `NamePresentation`. The stored
+  `display_name` is **never** mutated — it must round-trip raw input for security.
+- **Landing pages use the triage pattern.** Greeting -> KPI row -> "needs your attention"
+  -> roster/table. Lead with what needs action, not vanity metrics; push power tools into
+  a "More" menu. (See the supervisor dashboard for the reference implementation.)
+- **Every screen designs its empty state** using one of the three patterns (cold-start /
+  all-caught-up / no-results). Never ship all-zero stat cards or a blank section.
+- **Accessibility is part of "done".** Skip link, `aria-current` on the active nav,
+  `aria-label` on icon-only controls, visible `focus-visible` rings, `sr-only` table
+  captions/labels, `role="status"`/`"alert"` on flashes, and `motion-reduce` on the
+  drawer. The shell already meets this bar — keep new pages there.
+- **Build:** `npm run build:tailwind` (minified) or `build:tailwind:dev` (watch, the `tw`
+  process in `Procfile.dev`). Class names are discovered via the `@source` globs in
+  `tailwind.css`. The output `app/assets/builds/tailwind.css` is **gitignored** and built
+  on deploy — don't commit it.
+- **Tables are bespoke, not jQuery DataTables (reversed).** Theming DataTables couldn't
+  match the dashboard tables or meet WCAG — its generated chrome fights the design system.
+  Build tables in Tailwind instead (matching the dashboard): server-side filtering +
+  **Pagy** pagination + optional sortable header links, with **Turbo Drive** smoothing the
+  GET navigations. Reuse each `*Datatable` class's query logic server-side; retire the
+  DataTables JS as each page migrates. See the cases index for the reference pattern.
+
+## Migrating a page (playbook)
+
+Repeatable steps for moving one screen off Bootstrap:
+
+1. **Read first** — this doc, plus the page's existing specs (know what behavior is
+   pinned before you touch markup). Confirm each column / field you plan to keep still has a
+   live data source; don't carry blank legacy columns forward (see Tables, above).
+2. **Opt the action into a Tailwind layout** — `render ..., layout: "casa_app"` (or
+   `layout "casa_auth"`), and set `@active_nav` when it maps to a sidebar item.
+3. **Rebuild the view with the components above.** Wrap page content in
+   `px-4 py-6 sm:px-6 lg:px-8`; use the h1/section-title scale; reuse the card, button,
+   input, pill, KPI, and empty-state patterns instead of inventing new ones.
+4. **Names:** `display_person` / `formatted_name` / `avatar_initials` — never raw
+   `display_name`. **Icons:** `bi-*` only. **Status vs people:** icon tile vs avatar.
+5. **Design the empty state** (pick the right one of the three).
+6. **Keep behavior specs green.** When a spec is coupled to a presentational class, move
+   it to a semantic hook (a `data-*` attribute) rather than weakening the assertion.
+   Prefer system specs for new UI behavior (ADR 0006).
+7. **Verify:** `npm run build:tailwind`, run the page's specs, then `bin/lint`. Confirm the
+   page fits at true 375 / 414 / 768 / 1024 / 1280 widths, measured with a CDP device-metrics
+   override (`bin/measure-responsive.mjs`) rather than `--window-size` (headless Chrome clamps its minimum
+   window to ~500px, so `--window-size=375` silently measures 500).
+8. **Checkpoint:** commit and push to `casadesign`, tick the item off in
+   `design-todo.md`, and update the status below.
+
+## Migration status
+
+High-level progress; the granular, prioritized backlog lives in
+[`design-todo.md`](design-todo.md).
+
+- [x] Tailwind v4 foundation + design tokens
+- [x] Typeface: Figtree
+- [x] Auth pages (sign-in, forgot/reset password, invitation accept)
+- [x] App shell — sidebar + top bar (`casa_app` layout)
+- [x] Supervisor dashboard (triage-pattern reference)
+- [x] Notifications
+- [x] Edit profile
+- [ ] Other app-shell leaf pages (impersonation banner, help link, flash parity)
+- [x] Volunteer dashboard (triage: cases, follow-ups, hours)
+- [x] Admin dashboard (org triage: unassigned & stale cases)
+- [x] Cases index (bespoke table + server-side filter selects + Pagy pagination)
+- [ ] Case show/new/edit, case contacts, reports, settings
+- [ ] Management rosters, admin CRUD long-tail, all-CASA-admin area
+
+## Workflow
+- On the `casadesign` branch: **commit and push at every checkpoint.**
diff --git a/package-lock.json b/package-lock.json
index 891c9b1a2d..653c6d74a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,15 +22,12 @@
         "bootstrap": "5.3.6",
         "bootstrap-datepicker": "^1.10.1",
         "bootstrap-scss": "^5.3.8",
-        "chart.js": "^4.5.1",
-        "chartjs-adapter-luxon": "^1.3.1",
         "datatables.net-dt": "^1.13.11",
         "esbuild": "^0.28.0",
         "jquery": "^3.7.1",
         "js-cookie": "^3.0.8",
         "jstz": "^2.1.1",
         "lodash": "^4.18.1",
-        "luxon": "^3.6.1",
         "popper.js": "^1.16.1",
         "sass": "1.77.6",
         "select2": "^4.1.0",
@@ -42,12 +39,14 @@
       },
       "devDependencies": {
         "@babel/preset-env": "^7.29.7",
+        "@tailwindcss/cli": "^4.3.2",
         "faker": "^5.5.3",
         "jest": "^30.4.2",
         "jest-environment-jsdom": "^30.4.1",
         "markdown-toc": "^1.2.0",
         "standard": "^17.1.2",
-        "start-server-and-test": "^2.1.5"
+        "start-server-and-test": "^2.1.5",
+        "tailwindcss": "^4.3.2"
       },
       "engines": {
         "node": "24.x"
@@ -3199,9 +3198,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -3213,12 +3212,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
@@ -3291,6 +3284,333 @@
       "integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==",
       "license": "Apache-2.0"
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -3404,8 +3724,296 @@
       "resolved": "https://registry.npmjs.org/@stimulus-components/rails-nested-form/-/rails-nested-form-5.0.0.tgz",
       "integrity": "sha512-qrmmurT+KBPrz9iBlyrgJa6Di8i0j328kSk2SUR53nK5W0kDhw1YxVC91aUR+7EsFKiwJT1iB7oDSwpDhDQPeA==",
       "license": "MIT",
-      "peerDependencies": {
-        "@hotwired/stimulus": "^3.0.0"
+      "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/cli": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.3.2.tgz",
+      "integrity": "sha512-Fzt+HrIZHDlkRYKdLMBeufaroaPvwCBG70sMLdmurdeadNMO/LxbmT8Sbb+P83ep0iAlAImettb7Y+rO+37rXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/watcher": "2.5.1",
+        "@tailwindcss/node": "4.3.2",
+        "@tailwindcss/oxide": "4.3.2",
+        "enhanced-resolve": "5.21.6",
+        "mri": "^1.2.0",
+        "picocolors": "^1.1.1",
+        "tailwindcss": "4.3.2"
+      },
+      "bin": {
+        "tailwindcss": "dist/index.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
+      "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
+      "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-x64": "4.3.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
+      "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
+      "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
+      "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
+      "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
+      "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
+      "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
+      "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
+      "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
+      "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
+      "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
+      "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
+      "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -4676,28 +5284,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
-    "node_modules/chartjs-adapter-luxon": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.3.1.tgz",
-      "integrity": "sha512-yxHov3X8y+reIibl1o+j18xzrcdddCLqsXhriV2+aQ4hCR66IYFchlRXUvrJVoxglJ380pgytU7YWtoqdIgqhg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "chart.js": ">=3.0.0",
-        "luxon": ">=1.0.0"
-      }
-    },
     "node_modules/check-more-types": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
@@ -5114,6 +5700,19 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -5211,6 +5810,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -8350,6 +8963,16 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/joi": {
       "version": "18.0.2",
       "resolved": "https://registry.npmjs.org/joi/-/joi-18.0.2.tgz",
@@ -8594,6 +9217,289 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss/node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -8752,13 +9658,14 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/luxon": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
-      "integrity": "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==",
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/make-dir": {
@@ -8867,6 +9774,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -8960,6 +9881,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8989,6 +9920,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -10845,6 +11783,27 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
+      "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
diff --git a/package.json b/package.json
index 01c65bb4b8..48177d1bd0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
     "build": "./bin/asset_bundling_scripts/build_js.js",
     "build:dev": "./bin/asset_bundling_scripts/build_js.js --watch",
     "build:css": "sass app/assets/stylesheets/application.scss app/assets/builds/application.css --load-path=node_modules",
-    "build:css:dev": "sass app/assets/stylesheets/application.scss app/assets/builds/application.css --load-path=node_modules --watch"
+    "build:css:dev": "sass app/assets/stylesheets/application.scss app/assets/builds/application.css --load-path=node_modules --watch",
+    "build:tailwind": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css --minify",
+    "build:tailwind:dev": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css --watch"
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
@@ -26,15 +28,12 @@
     "bootstrap": "5.3.6",
     "bootstrap-datepicker": "^1.10.1",
     "bootstrap-scss": "^5.3.8",
-    "chart.js": "^4.5.1",
-    "chartjs-adapter-luxon": "^1.3.1",
     "datatables.net-dt": "^1.13.11",
     "esbuild": "^0.28.0",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.8",
     "jstz": "^2.1.1",
     "lodash": "^4.18.1",
-    "luxon": "^3.6.1",
     "popper.js": "^1.16.1",
     "sass": "1.77.6",
     "select2": "^4.1.0",
@@ -47,12 +46,14 @@
   "version": "0.1.0",
   "devDependencies": {
     "@babel/preset-env": "^7.29.7",
+    "@tailwindcss/cli": "^4.3.2",
     "faker": "^5.5.3",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "markdown-toc": "^1.2.0",
     "standard": "^17.1.2",
-    "start-server-and-test": "^2.1.5"
+    "start-server-and-test": "^2.1.5",
+    "tailwindcss": "^4.3.2"
   },
   "standard": {
     "globals": [
diff --git a/spec/components/dialog/body_component_spec.rb b/spec/components/dialog/body_component_spec.rb
new file mode 100644
index 0000000000..0407f675f3
--- /dev/null
+++ b/spec/components/dialog/body_component_spec.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Dialog::BodyComponent, type: :component do
+  it "uses the panel padding by default" do
+    render_inline(described_class.new) { "hi" }
+
+    expect(page).to have_css("div.px-5.py-4", text: "hi")
+  end
+
+  it "centers for the status layout and merges extra classes" do
+    render_inline(described_class.new(centered: true, classes: "space-y-4")) { "hi" }
+
+    expect(page).to have_css("div.text-center.space-y-4")
+  end
+end
diff --git a/spec/components/dialog/footer_component_spec.rb b/spec/components/dialog/footer_component_spec.rb
new file mode 100644
index 0000000000..28adfaf6ee
--- /dev/null
+++ b/spec/components/dialog/footer_component_spec.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Dialog::FooterComponent, type: :component do
+  it "right-aligns actions by default" do
+    render_inline(described_class.new) { "btns" }
+
+    expect(page).to have_css("div.justify-end.border-t", text: "btns")
+  end
+
+  it "can center a single action" do
+    render_inline(described_class.new(align: :center)) { "btns" }
+
+    expect(page).to have_css("div.justify-center")
+  end
+end
diff --git a/spec/components/dialog/group_component_spec.rb b/spec/components/dialog/group_component_spec.rb
new file mode 100644
index 0000000000..eee2cd01d6
--- /dev/null
+++ b/spec/components/dialog/group_component_spec.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Dialog::GroupComponent, type: :component do
+  it "renders a native dialog wired to the modal controller" do
+    render_inline(described_class.new(label: "Delete this?")) { "body" }
+
+    expect(page).to have_css("div[data-controller='modal'] > dialog[data-modal-target='dialog']")
+    expect(page).to have_css("dialog[aria-label='Delete this?']", text: "body")
+  end
+
+  it "defaults to the medium panel and centering-friendly panel classes" do
+    render_inline(described_class.new) { "x" }
+
+    expect(page).to have_css("dialog.max-w-md.rounded-2xl.p-0")
+  end
+
+  it "accepts a size, id, and a trigger slot" do
+    render_inline(described_class.new(size: :lg, id: "my-dialog")) do |c|
+      c.with_trigger { "<button type=\"button\">Open</button>".html_safe }
+      "body"
+    end
+
+    expect(page).to have_css("dialog#my-dialog.max-w-lg")
+    expect(page).to have_button("Open")
+  end
+
+  it "can dissolve its wrapper with display: contents for menu placement" do
+    render_inline(described_class.new(wrapper_class: "contents")) { "x" }
+
+    expect(page).to have_css("div.contents[data-controller='modal'] > dialog")
+  end
+
+  it "wires extra controllers, auto-open, and extra data onto the wrapper" do
+    render_inline(described_class.new(open_on_connect: true, controllers: "local-storage-reset", data: {local_storage_reset_key_value: "k"})) { "x" }
+
+    wrapper = page.find("div[data-controller]")
+    expect(wrapper["data-controller"]).to eq("modal local-storage-reset")
+    expect(wrapper["data-modal-open-on-connect-value"]).to eq("true")
+    expect(wrapper["data-local-storage-reset-key-value"]).to eq("k")
+  end
+end
diff --git a/spec/components/dialog/header_component_spec.rb b/spec/components/dialog/header_component_spec.rb
new file mode 100644
index 0000000000..20d87b5066
--- /dev/null
+++ b/spec/components/dialog/header_component_spec.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Dialog::HeaderComponent, type: :component do
+  it "renders the title and a close button by default" do
+    render_inline(described_class.new(title: "Download court report"))
+
+    expect(page).to have_css("h2", text: "Download court report")
+    expect(page).to have_css("button[aria-label='Close']")
+  end
+
+  it "renders a danger status badge when an icon is given" do
+    render_inline(described_class.new(title: "Delete?", icon: "bi bi-exclamation-triangle", variant: :danger))
+
+    expect(page).to have_css("span.rounded-full.bg-rose-100 i.bi-exclamation-triangle")
+  end
+
+  it "can omit the close button" do
+    render_inline(described_class.new(title: "x", closable: false))
+
+    expect(page).to have_no_css("button[aria-label='Close']")
+  end
+end
diff --git a/spec/components/notification_component_spec.rb b/spec/components/notification_component_spec.rb
index 300a8efec9..2d1e4235eb 100644
--- a/spec/components/notification_component_spec.rb
+++ b/spec/components/notification_component_spec.rb
@@ -33,8 +33,8 @@
     component = described_class.new(notification: followup_read)
 
     render_inline(component)
-    expect(page).to have_css("a.bg-light.text-muted")
-    expect(page).not_to have_css("i.fas.fa-bell")
+    expect(page).to have_css("a[data-read]")
+    expect(page).not_to have_css("[data-unread-dot]")
   end
 
   it "renders an emancipation checklist reminder" do
diff --git a/spec/decorators/casa_case_decorator_spec.rb b/spec/decorators/casa_case_decorator_spec.rb
index e47742f53c..28d75a6e30 100644
--- a/spec/decorators/casa_case_decorator_spec.rb
+++ b/spec/decorators/casa_case_decorator_spec.rb
@@ -55,6 +55,34 @@
     it { is_expected.to eq "12-09-2020" }
   end
 
+  describe "#formatted_next_court_date" do
+    subject { casa_case.decorate.formatted_next_court_date }
+
+    let(:casa_case) { create(:casa_case) }
+
+    context "with no court dates" do
+      it { is_expected.to be_nil }
+    end
+
+    context "with only past court dates" do
+      before { create(:court_date, casa_case: casa_case, date: 1.week.ago) }
+
+      it { is_expected.to be_nil }
+    end
+
+    context "with upcoming court dates" do
+      before do
+        create(:court_date, casa_case: casa_case, date: 3.weeks.from_now)
+        create(:court_date, casa_case: casa_case, date: 1.week.from_now)
+        create(:court_date, casa_case: casa_case, date: 2.weeks.ago)
+      end
+
+      it "returns the earliest upcoming date, formatted" do
+        expect(subject).to eq(I18n.l(1.week.from_now, format: :full))
+      end
+    end
+  end
+
   describe "#transition_age_youth" do
     it "returns transition age youth status with icon if not transition age youth && birthday is nil" do
       casa_case = build(:casa_case, birth_month_year_youth: nil)
diff --git a/spec/decorators/case_contact_decorator_spec.rb b/spec/decorators/case_contact_decorator_spec.rb
index 9ee95352bf..adf3e30146 100644
--- a/spec/decorators/case_contact_decorator_spec.rb
+++ b/spec/decorators/case_contact_decorator_spec.rb
@@ -145,6 +145,23 @@
     end
   end
 
+  describe "#medium_icon" do
+    {
+      "in-person" => "bi bi-people",
+      "text/email" => "bi bi-envelope",
+      "video" => "bi bi-camera-video",
+      "voice-only" => "bi bi-telephone",
+      "letter" => "bi bi-envelope-paper",
+      "something-else" => "bi bi-question-circle"
+    }.each do |medium, icon|
+      it "maps #{medium} to the bootstrap-icons class #{icon}" do
+        case_contact.medium_type = medium
+
+        expect(case_contact.decorate.medium_icon).to eq(icon)
+      end
+    end
+  end
+
   describe "#subheading" do
     let(:contact_group) { build_stubbed(:contact_type_group, name: "Group X") }
     let(:contact_type) { build_stubbed(:contact_type, contact_type_group: contact_group, name: "Type X") }
diff --git a/spec/helpers/design_system_helper_spec.rb b/spec/helpers/design_system_helper_spec.rb
new file mode 100644
index 0000000000..5919fea41e
--- /dev/null
+++ b/spec/helpers/design_system_helper_spec.rb
@@ -0,0 +1,38 @@
+require "rails_helper"
+
+RSpec.describe DesignSystemHelper, type: :helper do
+  describe "#button_classes" do
+    it "defaults to the primary variant" do
+      expect(helper.button_classes).to eq(helper.button_classes(:primary))
+    end
+
+    it "gives every variant the same fixed height token so they cannot drift" do
+      %i[primary secondary danger].each do |variant|
+        expect(helper.button_classes(variant)).to include("h-10")
+      end
+    end
+
+    it "styles the primary variant as a filled brand button" do
+      expect(helper.button_classes(:primary)).to include("bg-brand-600", "text-white")
+    end
+
+    it "styles the secondary variant as an outlined button" do
+      classes = helper.button_classes(:secondary)
+      expect(classes).to include("border", "border-slate-200", "bg-white", "text-slate-700")
+    end
+
+    it "styles the danger variant as a filled rose button" do
+      expect(helper.button_classes(:danger)).to include("bg-rose-600", "text-white")
+    end
+
+    it "does not compensate the filled variants with a transparent border" do
+      # The height token equalizes sizes; a transparent-border hack would be fragile.
+      expect(helper.button_classes(:primary)).not_to include("border-transparent")
+      expect(helper.button_classes(:danger)).not_to include("border-transparent")
+    end
+
+    it "raises for an unknown variant" do
+      expect { helper.button_classes(:bogus) }.to raise_error(ArgumentError, /unknown button variant/)
+    end
+  end
+end
diff --git a/spec/models/case_contact_spec.rb b/spec/models/case_contact_spec.rb
index 9af02c5137..de42067556 100644
--- a/spec/models/case_contact_spec.rb
+++ b/spec/models/case_contact_spec.rb
@@ -43,6 +43,17 @@
       expect(case_contact.errors[:occurred_at]).to eq(["can't be in the future"])
     end
 
+    it "evaluates the future cutoff at validation time, not class-load time" do
+      # Regression guard: the cutoff is a lambda, so it tracks the current clock. With the old
+      # class-load-time value, a date "future" relative to a travelled clock would pass.
+      travel_to Time.zone.local(2020, 6, 15) do
+        expect(build_stubbed(:case_contact, occurred_at: Time.zone.local(2020, 6, 15))).to be_valid
+        future = build_stubbed(:case_contact, occurred_at: Time.zone.local(2020, 6, 20))
+        expect(future).not_to be_valid
+        expect(future.errors[:occurred_at]).to eq(["can't be in the future"])
+      end
+    end
+
     it "verifies occurred at is not before 1/1/1989" do
       case_contact = build_stubbed(:case_contact, occurred_at: "1984-01-01".to_date)
       expect(case_contact).not_to be_valid
diff --git a/spec/requests/dashboard_spec.rb b/spec/requests/dashboard_spec.rb
index aa0235ba3b..e581f074e1 100644
--- a/spec/requests/dashboard_spec.rb
+++ b/spec/requests/dashboard_spec.rb
@@ -23,15 +23,14 @@
       context "more than one active case" do
         let!(:active_case_assignment) { create :case_assignment, volunteer: volunteer }
 
-        it "renders a successful response" do
+        it "renders the volunteer dashboard" do
           get root_url
 
-          expect(response).to redirect_to(casa_cases_path)
+          expect(response).to have_http_status(:ok)
         end
 
         it "shows my cases" do
           get root_url
-          follow_redirect!
 
           expect(response.body).to include(active_case_assignment.casa_case.case_number)
           expect(response.body).to include(case_assignment.casa_case.case_number)
@@ -42,7 +41,6 @@
           create(:case_assignment, volunteer: not_logged_in_volunteer)
 
           get root_url
-          follow_redirect!
 
           expect(response.body).to include(active_case_assignment.casa_case.case_number)
           expect(response.body).to include(case_assignment.casa_case.case_number)
@@ -54,7 +52,6 @@
           not_my_case_assignment = create(:case_assignment, casa_org: different_org)
 
           get root_url
-          follow_redirect!
 
           expect(response.body).to include(active_case_assignment.casa_case.case_number)
           expect(response.body).to include(case_assignment.casa_case.case_number)
@@ -66,32 +63,39 @@
 
   context "as a supervisor" do
     let(:supervisor) { create(:supervisor, casa_org: organization) }
+    let(:volunteer) { create(:volunteer, casa_org: organization, display_name: "Wanda Volunteer") }
+    let!(:supervisor_volunteer) { create(:supervisor_volunteer, supervisor: supervisor, volunteer: volunteer) }
 
     before do
       sign_in supervisor
     end
 
     describe "GET /show" do
-      it "redirects to the volunteers overview" do
+      it "renders the supervisor dashboard with the assigned volunteer" do
         get root_url
 
-        expect(response).to redirect_to(volunteers_url)
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include("Dashboard")
+        expect(response.body).to include("Wanda Volunteer")
       end
     end
   end
 
   context "as an admin" do
     let(:admin) { create(:casa_admin, casa_org: organization) }
+    let!(:unassigned_case) { create(:casa_case, casa_org: organization) }
 
     before do
       sign_in admin
     end
 
     describe "GET /show" do
-      it "renders a successful response" do
+      it "renders the admin dashboard with cases needing attention" do
         get root_url
 
-        expect(response).to redirect_to(supervisors_path)
+        expect(response).to have_http_status(:ok)
+        expect(response.body).to include("Dashboard")
+        expect(response.body).to include(unassigned_case.case_number)
       end
     end
   end
diff --git a/spec/requests/health_spec.rb b/spec/requests/health_spec.rb
index d924a5e0e7..be10c38411 100644
--- a/spec/requests/health_spec.rb
+++ b/spec/requests/health_spec.rb
@@ -10,9 +10,27 @@
       get "/health"
     end
 
-    it "renders an html file" do
-      # delete this test when there are more specific tests about the page
+    it "renders the metrics page" do
       expect(response.header["Content-Type"]).to include("text/html")
+      expect(response.body).to include("Case contacts logged")
+      expect(response.body).to include("When contacts are logged")
+      expect(response.body).to include("Monthly active users")
+    end
+  end
+
+  describe "date-range filter" do
+    it "renders presets and defaults to the 12-month range" do
+      get "/health"
+      expect(response.body).to include("Last 3 months")
+      expect(response.body).to include("Last 6 months")
+      expect(response.body).to include("Last 12 months")
+      expect(response.body).to include(%(aria-current="page"))
+    end
+
+    it "ignores an out-of-range value" do
+      get "/health", params: {range: 999}
+      expect(response).to have_http_status(:ok)
+      expect(response.body).to include("Last 12 months")
     end
   end
 
diff --git a/spec/services/supervisor_dashboard_spec.rb b/spec/services/supervisor_dashboard_spec.rb
new file mode 100644
index 0000000000..aa9aba5051
--- /dev/null
+++ b/spec/services/supervisor_dashboard_spec.rb
@@ -0,0 +1,140 @@
+require "rails_helper"
+
+RSpec.describe SupervisorDashboard do
+  let(:organization) { create(:casa_org) }
+  let(:supervisor) { create(:supervisor, casa_org: organization) }
+
+  def assign(volunteer)
+    create(:supervisor_volunteer, supervisor: supervisor, volunteer: volunteer)
+  end
+
+  def active_case_for(volunteer)
+    casa_case = create(:casa_case, casa_org: organization, active: true)
+    create(:case_assignment, volunteer: volunteer, casa_case: casa_case, active: true)
+    casa_case
+  end
+
+  describe "#volunteers" do
+    it "returns the supervisor's actively-assigned volunteers" do
+      assigned = create(:volunteer, casa_org: organization)
+      assign(assigned)
+      create(:volunteer, casa_org: organization) # assigned to no supervisor
+
+      expect(described_class.new(supervisor).volunteers).to contain_exactly(assigned)
+    end
+
+    it "excludes volunteers whose supervisor assignment is inactive" do
+      volunteer = create(:volunteer, casa_org: organization)
+      create(:supervisor_volunteer, :inactive, supervisor: supervisor, volunteer: volunteer)
+
+      expect(described_class.new(supervisor).volunteers).to be_empty
+    end
+  end
+
+  describe "#rows" do
+    it "marks a volunteer with no active cases as :no_cases" do
+      assign(create(:volunteer, casa_org: organization))
+
+      row = described_class.new(supervisor).rows.first
+      expect(row.status).to eq(:no_cases)
+      expect(row).to be_no_cases
+      expect(row.cases_count).to eq(0)
+    end
+
+    it "marks a volunteer who has recently contacted all their cases as :on_track" do
+      volunteer = create(:volunteer, casa_org: organization)
+      assign(volunteer)
+      casa_case = active_case_for(volunteer)
+      create(:case_contact, creator: volunteer, casa_case: casa_case,
+        contact_made: true, occurred_at: Time.zone.today, duration_minutes: 60)
+
+      row = described_class.new(supervisor).rows.first
+      expect(row.status).to eq(:on_track)
+      expect(row).not_to be_needs_followup
+      expect(row.cases_count).to eq(1)
+      expect(row.last_contact_on.to_date).to eq(Time.zone.today)
+      expect(row.minutes_recent).to eq(60)
+    end
+
+    it "marks a volunteer with an un-contacted case as :follow_up" do
+      volunteer = create(:volunteer, casa_org: organization)
+      assign(volunteer)
+      active_case_for(volunteer) # no contact logged
+
+      row = described_class.new(supervisor).rows.first
+      expect(row.status).to eq(:follow_up)
+      expect(row).to be_needs_followup
+    end
+  end
+
+  describe "#needs_attention" do
+    it "returns only the rows that need follow-up" do
+      follow_up = create(:volunteer, casa_org: organization)
+      assign(follow_up)
+      active_case_for(follow_up)
+
+      on_track = create(:volunteer, casa_org: organization)
+      assign(on_track)
+      contacted = active_case_for(on_track)
+      create(:case_contact, creator: on_track, casa_case: contacted, contact_made: true, occurred_at: Time.zone.today)
+
+      needs = described_class.new(supervisor).needs_attention
+      expect(needs.map(&:volunteer)).to contain_exactly(follow_up)
+    end
+  end
+
+  describe "#stats" do
+    it "summarizes roster counts and recent hours" do
+      on_track = create(:volunteer, casa_org: organization)
+      assign(on_track)
+      contacted = active_case_for(on_track)
+      create(:case_contact, creator: on_track, casa_case: contacted,
+        contact_made: true, occurred_at: Time.zone.today, duration_minutes: 90)
+
+      follow_up = create(:volunteer, casa_org: organization)
+      assign(follow_up)
+      active_case_for(follow_up)
+
+      assign(create(:volunteer, casa_org: organization)) # no cases
+
+      stats = described_class.new(supervisor).stats
+      expect(stats[:active]).to eq(3)
+      expect(stats[:needs_followup]).to eq(1)
+      expect(stats[:no_cases]).to eq(1)
+      expect(stats[:hours_label]).to eq("1.5h")
+    end
+
+    it "reports 0h when there are no recent contact minutes" do
+      assign(create(:volunteer, casa_org: organization))
+      expect(described_class.new(supervisor).stats[:hours_label]).to eq("0h")
+    end
+  end
+
+  describe SupervisorDashboard::Row do
+    def build_row(**attrs)
+      defaults = {
+        volunteer: build_stubbed(:volunteer), cases_count: 1, status: :on_track,
+        last_contact_on: nil, contacts_recent: 0, minutes_recent: 0
+      }
+      described_class.new(**defaults.merge(attrs))
+    end
+
+    it "labels the last contact relative to today" do
+      expect(build_row(last_contact_on: nil).last_contact_label).to eq("No contact logged")
+      expect(build_row(last_contact_on: Time.zone.today).last_contact_label).to eq("Today")
+      expect(build_row(last_contact_on: 1.day.ago).last_contact_label).to eq("Yesterday")
+      expect(build_row(last_contact_on: 5.days.ago).last_contact_label).to eq("5 days ago")
+    end
+
+    it "formats recent hours, showing an em dash for zero" do
+      expect(build_row(minutes_recent: 0).hours_label).to eq("\u2014") # em dash
+      expect(build_row(minutes_recent: 45).hours_label).to eq("45m")
+      expect(build_row(minutes_recent: 60).hours_label).to eq("1h")
+      expect(build_row(minutes_recent: 90).hours_label).to eq("1h 30m")
+    end
+
+    it "picks a deterministic avatar color from the palette" do
+      expect(SupervisorDashboard::AVATAR_COLORS).to include(build_row.avatar_color)
+    end
+  end
+end
diff --git a/spec/system/bulk_court_dates/new_spec.rb b/spec/system/bulk_court_dates/new_spec.rb
index 8162e21c53..e1912cf813 100644
--- a/spec/system/bulk_court_dates/new_spec.rb
+++ b/spec/system/bulk_court_dates/new_spec.rb
@@ -20,6 +20,7 @@
     travel_to now
     sign_in admin
     visit casa_cases_path
+    find("summary", text: "More").click
     click_on "New Bulk Court Date"
 
     select case_group.name, from: "Case Group"
diff --git a/spec/system/casa_cases/additional_index_spec.rb b/spec/system/casa_cases/additional_index_spec.rb
index 78e435e811..1f7f107e7b 100644
--- a/spec/system/casa_cases/additional_index_spec.rb
+++ b/spec/system/casa_cases/additional_index_spec.rb
@@ -2,8 +2,6 @@
 
 RSpec.describe "casa_cases/index", type: :system do
   # TODO combine with other casa cases index system spec
-  let(:user) { build_stubbed :casa_admin }
-
   let(:organization) { create(:casa_org) }
   let(:volunteer) { build :volunteer, casa_org: organization }
   let(:admin) { create(:casa_admin, casa_org: organization) }
@@ -17,36 +15,80 @@
     it "has content" do
       expect(page).to have_text("Cases")
       expect(page).to have_link("New Case", href: new_casa_case_path)
-      expect(page).to have_selector("button", text: "Casa Case Prefix")
-      expect(page).to have_selector("th", text: "Case Number")
-      expect(page).to have_selector("th", text: "Hearing Type")
-      expect(page).to have_selector("th", text: "Judge")
+      expect(page).to have_select("Status")
+      expect(page).to have_select("Case number prefix")
+      expect(page).to have_selector("th", text: "Case number")
+      expect(page).to have_selector("th", text: "Next court date")
       expect(page).to have_selector("th", text: "Status")
-      expect(page).to have_selector("th", text: "Transition Aged Youth")
-      expect(page).to have_selector("th", text: "Assigned To")
+      expect(page).to have_selector("th", text: "Transition aged youth")
+      expect(page).to have_selector("th", text: "Assigned to")
     end
 
-    it "filters active/inactive", :js do
-      active_case = build(:casa_case, active: true, casa_org: organization)
-      active_case1 = build(:casa_case, active: true, casa_org: organization)
-      inactive_case = build(:casa_case, active: false, casa_org: organization)
+    it "opens only one header dropdown at a time", :js do
+      find("summary", text: "More").click
+      expect(page).to have_link("Case Groups")
 
-      create(:case_assignment, volunteer: volunteer, casa_case: active_case)
-      create(:case_assignment, volunteer: volunteer, casa_case: active_case1)
-      create(:case_assignment, volunteer: volunteer, casa_case: inactive_case)
+      find("summary[aria-label='Account menu']").click
+      expect(page).to have_link("Sign out")
+      expect(page).to have_no_link("Case Groups")
+    end
 
+    it "sorts cases by clicking a column header" do
+      create(:casa_case, casa_org: organization, case_number: "CINA-AAA")
+      create(:casa_case, casa_org: organization, case_number: "CINA-ZZZ")
       visit casa_cases_path
-      expect(page).to have_selector(".casa-case-filters")
 
-      # by default, only active casa cases are shown
-      expect(page.all("table#casa-cases tbody tr").count).to eq [active_case, active_case1].size
+      expect(page).to have_selector("th[aria-sort='ascending']", text: "Case number")
+      expect(page.text.index("CINA-AAA")).to be < page.text.index("CINA-ZZZ")
+
+      click_on "Case number"
+      expect(page).to have_selector("th[aria-sort='descending']", text: "Case number")
+      expect(page.text.index("CINA-ZZZ")).to be < page.text.index("CINA-AAA")
+    end
+
+    it "ignores an unknown sort parameter" do
+      create(:casa_case, casa_org: organization, case_number: "CINA-1")
+      visit casa_cases_path(sort: "bogus", direction: "sideways")
+      expect(page).to have_selector("th[aria-sort='ascending']", text: "Case number")
+    end
+
+    it "renders every sortable column without error" do
+      create(:casa_case, casa_org: organization)
+      %w[case_number next_court_date status transition assigned].each do |column|
+        visit casa_cases_path(sort: column, status: "all")
+        expect(page).to have_selector("table")
+      end
+    end
+
+    it "searches by case number and volunteer name" do
+      zelda = create(:volunteer, casa_org: organization, display_name: "Zelda Fitzgerald")
+      create(:casa_case, casa_org: organization, case_number: "CINA-FINDME-1")
+      by_volunteer = create(:casa_case, casa_org: organization, case_number: "TPR-OTHER-2")
+      create(:case_assignment, volunteer: zelda, casa_case: by_volunteer)
+      create(:casa_case, casa_org: organization, case_number: "TPR-NOPE-9")
 
-      click_on "Status"
-      find(:css, 'input[data-value="Active"]').click
-      expect(page).to have_text("No matching records found")
+      visit casa_cases_path(search: "FINDME")
+      expect(page).to have_content("CINA-FINDME-1")
+      expect(page).to have_no_content("TPR-NOPE-9")
+      expect(page).to have_content("matching")
+
+      visit casa_cases_path(search: "Zelda")
+      expect(page).to have_content("TPR-OTHER-2")
+      expect(page).to have_no_content("TPR-NOPE-9")
+    end
+
+    it "filters by status", :js do
+      active_case = create(:casa_case, active: true, casa_org: organization, case_number: "CINA-ACTIVE")
+      inactive_case = create(:casa_case, active: false, casa_org: organization, case_number: "CINA-INACTIVE")
+
+      visit casa_cases_path
+      # active by default
+      expect(page).to have_content(active_case.case_number)
+      expect(page).to have_no_content(inactive_case.case_number)
 
-      find(:css, 'input[data-value="Inactive"]').click
-      expect(page.all("table#casa-cases tbody tr").count).to eq [inactive_case].size
+      select "Inactive", from: "Status"
+      expect(page).to have_content(inactive_case.case_number)
+      expect(page).to have_no_content(active_case.case_number)
     end
 
     it "Only displays cases belonging to user's org" do
@@ -68,12 +110,9 @@
     end
 
     it "hides filters" do
-      expect(page).not_to have_text("Assigned to Volunteer")
-      expect(page).not_to have_text("Assigned to more than 1 Volunteer")
-      expect(page).not_to have_text("Assigned to Transition Aged Youth")
-      expect(page).not_to have_text("Casa Case Prefix")
-      expect(page).not_to have_text("Select columns")
-      expect(page).not_to have_selector(".casa-case-filters")
+      expect(page).not_to have_select("Status")
+      expect(page).not_to have_text("Assignment")
+      expect(page).not_to have_text("Case number prefix")
     end
   end
 end
diff --git a/spec/system/casa_cases/index_spec.rb b/spec/system/casa_cases/index_spec.rb
index 77526779c5..06abb835e5 100644
--- a/spec/system/casa_cases/index_spec.rb
+++ b/spec/system/casa_cases/index_spec.rb
@@ -22,11 +22,9 @@
     expect(page).to have_link("TPR-100", href: "/casa_cases/#{tpr.case_number.parameterize}")
     expect(page).to have_link("123-12-123", href: "/casa_cases/#{no_prefix.case_number.parameterize}")
 
-    click_on "Status"
-    click_on "Assigned to Volunteer"
-    click_on "Assigned to more than 1 Volunteer"
-    click_on "Assigned to Transition Aged Youth"
-    click_on "Casa Case Prefix"
+    # filters are server-side selects now
+    expect(page).to have_select("Status")
+    expect(page).to have_select("Case number prefix")
   end
 
   it "has a usable dropdown in sidebar" do
@@ -41,7 +39,7 @@
       click_on case_number
     end
 
-    expect(page).to have_text("CASA Case Details")
-    expect(page).to have_text("Case number: CINA-1")
+    expect(page).to have_text("Case details")
+    expect(page).to have_text("Case CINA-1")
   end
 end
diff --git a/spec/system/casa_cases/show_spec.rb b/spec/system/casa_cases/show_spec.rb
index 6e01855420..3e8929a0b7 100644
--- a/spec/system/casa_cases/show_spec.rb
+++ b/spec/system/casa_cases/show_spec.rb
@@ -24,7 +24,8 @@
 
   shared_examples "shows emancipation checklist link" do
     context "when youth is in transition age" do
-      it "sees link to emancipation" do
+      it "sees link to emancipation", :js do
+        find("summary", text: "More").click
         expect(page).to have_link("Emancipation 0 / #{emancipation_categories.size}")
       end
     end
@@ -42,7 +43,6 @@
   end
 
   describe "Report Generation", :js do
-    let(:modal_selector) { '[data-bs-target="#generate-docx-report-modal"]' }
     let(:user) { volunteer }
 
     before do
@@ -51,44 +51,24 @@
       visit casa_case_path(casa_case.id)
     end
 
-    context "when first arriving to 'Generate Court Report' page" do
-      it "generation modal hidden" do
-        expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: false
-        expect(page).not_to have_selector ".select2"
-      end
+    it "keeps the generate button inside the closed modal" do
+      expect(page).to have_button("Generate Report", visible: false)
     end
 
-    context "after opening 'Download Court Report' modal" do
-      before do
-        page.find(modal_selector).click
-      end
-
-      # putting all this in the same system test shaves 3 seconds off the test suite
-      it "modal has correct contents" do
-        start_date = page.find("#start_date").value
-        expect(start_date).to eq("January 01, 2021") # default date
-
-        end_date = page.find("#end_date").value
-        expect(end_date).to eq("January 01, 2021") # default date
+    it "generates a court report for the case's date range" do
+      find("summary", text: "More").click
+      click_button "Generate Court Report"
 
-        expect(page).to have_selector "#btnGenerateReport", text: "Generate Report", visible: true
-        expect(page).not_to have_selector ".select2"
+      within("#generate-court-report") do
+        expect(page).to have_content(casa_case.case_number)
+        expect(page.find("#start_date").value).to eq("2021-01-01") # default: today, no past court dates
+        expect(page.find("#end_date").value).to eq("2021-01-01")
 
-        expect(page).to have_selector("#btnGenerateReport .lni-download", visible: true)
-        expect(page).not_to have_selector("#btnGenerateReport[disabled]")
-        expect(page).to have_selector("#spinner", visible: :hidden)
-
-        within("#generate-docx-report-modal") do
-          expect(page).to have_content(casa_case.case_number)
-
-          # when choosing the prompt option (value is empty) and click on 'Generate Report' button, nothing should happen"
-          # should have disabled generate button, download icon and no spinner
-          click_button "Generate Report"
-        end
-
-        wait_for_download
-        expect(download_file_name).to match(/#{casa_case.case_number}.docx/)
+        click_button "Generate Report"
       end
+
+      wait_for_download
+      expect(download_file_name).to match(/#{casa_case.case_number}.docx/)
     end
   end
 
@@ -107,7 +87,8 @@
     end
 
     it "sees link to profile page" do
-      expect(page).to have_link(href: "/users/edit")
+      # the profile link lives in the account menu dropdown (closed by default)
+      expect(page).to have_link(href: "/users/edit", visible: false)
     end
 
     it "can see court orders" do
@@ -117,15 +98,13 @@
     end
 
     it "can see next court date", :js do
-      expect(page).to have_content(
-        "Next Court Date: #{I18n.l(future_court_date.date, format: :day_and_date)}"
-      )
+      expect(page).to have_content("Next Court Date:")
+      expect(page).to have_content(I18n.l(future_court_date.date, format: :day_and_date))
     end
 
     it "can see the youth's Date In Care", :js do
-      expect(page).to have_content(
-        "Youth's Date in Care: #{I18n.l(date_in_care, format: :youth_date_of_birth)}"
-      )
+      expect(page).to have_content("Youth's Date in Care:")
+      expect(page).to have_content(I18n.l(date_in_care, format: :youth_date_of_birth))
     end
 
     it "can see the time since the youth's Date In Care", :js do
@@ -187,7 +166,7 @@
 
         visit casa_case_path(casa_case.id)
 
-        expect(page).to have_css("#case_contacts_list .card-content", count: 2)
+        expect(page).to have_css("#case_contacts_list [data-case-contact]", count: 2)
       end
     end
   end
@@ -257,7 +236,7 @@
 
         visit casa_case_path(casa_case.id)
 
-        expect(page).to have_css("#case_contacts_list .card-content", count: 2)
+        expect(page).to have_css("#case_contacts_list [data-case-contact]", count: 2)
       end
     end
   end
@@ -282,7 +261,7 @@
 
       it "displays only visible cases to volunteer", :js do
         visit casa_case_path(casa_case.id)
-        expect(page).to have_css("#case_contacts_list .card-content", count: 1)
+        expect(page).to have_css("#case_contacts_list [data-case-contact]", count: 1)
       end
     end
 
@@ -295,7 +274,7 @@
 
       it "displays all cases to the volunteer" do
         visit casa_case_path(casa_case.id)
-        expect(page).to have_css("#case_contacts_list .card-content", count: 2)
+        expect(page).to have_css("#case_contacts_list [data-case-contact]", count: 2)
       end
     end
   end
diff --git a/spec/system/case_contacts/index_spec.rb b/spec/system/case_contacts/index_spec.rb
index a0ab7e5f1c..f12e2b9dfd 100644
--- a/spec/system/case_contacts/index_spec.rb
+++ b/spec/system/case_contacts/index_spec.rb
@@ -184,29 +184,17 @@
       create(:case_contact, creator: volunteer, casa_case: another_case, notes: "Case 2 Notes", occurred_at: today)
 
       # showing all cases
-      visit root_path
-      click_on "Case Contacts"
-      within "#ddmenu_case-contacts" do
-        click_on "All"
-      end
+      visit case_contacts_path
       expect(page).to have_text("Case 1 Notes")
       expect(page).to have_text("Case 2 Notes")
 
       # showing case 1
-      visit root_path
-      click_on "Case Contacts"
-      within "#ddmenu_case-contacts" do
-        click_on case_number
-      end
+      visit case_contacts_path(casa_case_id: casa_case.id)
       expect(page).to have_text("Case 1 Notes")
       expect(page).to have_no_text("Case 2 Notes")
 
       # showing case 2
-      visit root_path
-      click_on "Case Contacts"
-      within "#ddmenu_case-contacts" do
-        click_on another_case_number
-      end
+      visit case_contacts_path(casa_case_id: another_case.id)
       expect(page).to have_text("Case 2 Notes")
       expect(page).to have_no_text("Case 1 Notes")
 
@@ -218,11 +206,7 @@
       expect(page).to have_text("Case 2 Notes")
       expect(page).to have_no_text("Case 1 Notes")
 
-      visit root_path
-      click_on "Case Contacts"
-      within "#ddmenu_case-contacts" do
-        click_on case_number
-      end
+      visit case_contacts_path(casa_case_id: casa_case.id)
       click_on "Expand / Hide"
       fill_in "filterrific_occurred_starting_at", with: yesterday
       fill_in "filterrific_occurred_ending_at", with: Time.zone.tomorrow
diff --git a/spec/system/case_contacts/new_spec.rb b/spec/system/case_contacts/new_spec.rb
index 771ada243a..0970178db4 100644
--- a/spec/system/case_contacts/new_spec.rb
+++ b/spec/system/case_contacts/new_spec.rb
@@ -448,8 +448,8 @@
 
       click_on "Submit"
       # update should redirect to the original referrer, casa_case_path(casa_case)
-      expect(page).to have_text "CASA Case Details"
-      expect(page).to have_text "Case number: #{case_number}"
+      expect(page).to have_text "Case details"
+      expect(page).to have_text "Case #{case_number}"
     end
 
     context "when multiple cases selected" do
diff --git a/spec/system/case_groups/case_groups_spec.rb b/spec/system/case_groups/case_groups_spec.rb
index e406035da5..ec4bc60f53 100644
--- a/spec/system/case_groups/case_groups_spec.rb
+++ b/spec/system/case_groups/case_groups_spec.rb
@@ -90,4 +90,22 @@
     visit case_groups_path
     expect(page).to have_text("A family").once
   end
+
+  it "deletes a case group through the confirmation dialog" do
+    create(:case_group, casa_org: organization, name: "Doomed group")
+
+    sign_in admin
+
+    visit case_groups_path
+    expect(page).to have_text("Doomed group")
+
+    click_on "Delete"
+    within("dialog[open]") do
+      expect(page).to have_text("Delete case group?")
+      click_button "Delete"
+    end
+
+    expect(page).to have_text("Case group deleted!")
+    expect(page).to have_no_text("Doomed group")
+  end
 end
diff --git a/spec/system/other_duties/new_spec.rb b/spec/system/other_duties/new_spec.rb
index 45eba9baac..778f6649eb 100644
--- a/spec/system/other_duties/new_spec.rb
+++ b/spec/system/other_duties/new_spec.rb
@@ -37,7 +37,7 @@
     end
 
     it "has an error if a new duty is attempted to be created without any notes" do
-      click_on "Other Duties"
+      visit other_duties_path
       click_on "New Duty"
 
       click_on "Submit"
diff --git a/spec/system/users/edit_spec.rb b/spec/system/users/edit_spec.rb
index 1763fa71c5..f1e7ed6719 100644
--- a/spec/system/users/edit_spec.rb
+++ b/spec/system/users/edit_spec.rb
@@ -16,7 +16,7 @@
       fill_in "New Password Confirmation", with: "123456789"
 
       click_on "Update Password"
-      expect(page).to have_content "1 error prohibited this password change from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Current password is incorrect")
     end
 
@@ -34,7 +34,7 @@
       fill_in "New Password Confirmation", with: "1234"
 
       click_on "Update Password"
-      expect(page).to have_content "2 errors prohibited this password change from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Password confirmation doesn't match Password")
       expect(page).to have_text("Password is too short (minimum is #{User.password_length.min} characters)")
     end
@@ -133,7 +133,7 @@
       fill_in "New Email", with: "new_volunteer@example.com"
 
       click_on "Update Email"
-      expect(page).to have_content "1 error prohibited this Volunteer from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Current password is incorrect")
     end
 
@@ -164,7 +164,7 @@
 
       uncheck "user_receive_email_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Volunteer from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("At least one communication preference must be selected.")
     end
 
@@ -178,7 +178,7 @@
       uncheck "user_receive_email_notifications"
       check "user_receive_sms_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Volunteer from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Must add a valid phone number to receive SMS notifications.")
     end
 
@@ -308,7 +308,7 @@
       fill_in "New Email", with: "new_supervisor@example"
 
       click_on "Update Email"
-      expect(page).to have_content "1 error prohibited this Supervisor from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Current password is incorrect")
     end
 
@@ -338,7 +338,7 @@
 
       uncheck "user_receive_email_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Supervisor from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("At least one communication preference must be selected.")
     end
 
@@ -352,7 +352,7 @@
       uncheck "user_receive_email_notifications"
       check "user_receive_sms_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Supervisor from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Must add a valid phone number to receive SMS notifications.")
     end
 
@@ -365,7 +365,7 @@
 
       fill_in "Date of birth", with: 8.days.from_now.strftime("%Y/%m/%d")
       click_on "Update Profile"
-      expect(page).to have_content "1 error prohibited this Supervisor from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Date of birth must be in the past.")
     end
   end
@@ -469,7 +469,7 @@
       fill_in "New Email", with: "new_admin@example.com"
 
       click_on "Update Email"
-      expect(page).to have_content "1 error prohibited this Casa admin from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Current password is incorrect")
     end
 
@@ -487,7 +487,7 @@
       fill_in "Password Confirmation", with: "1234"
 
       click_on "Update Password"
-      expect(page).to have_content "2 errors prohibited this password change from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Password confirmation doesn't match Password")
       expect(page).to have_text("Password is too short (minimum is #{User.password_length.min} characters)")
     end
@@ -559,7 +559,7 @@
 
       uncheck "user_receive_email_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Casa admin from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("At least one communication preference must be selected.")
     end
 
@@ -573,7 +573,7 @@
       uncheck "user_receive_email_notifications"
       check "user_receive_sms_notifications"
       click_on "Save Preferences"
-      expect(page).to have_content "1 error prohibited this Casa admin from being saved:"
+      expect(page).to have_content "Unable to save"
       expect(page).to have_text("Must add a valid phone number to receive SMS notifications.")
     end
 
diff --git a/spec/system/volunteers/index_spec.rb b/spec/system/volunteers/index_spec.rb
index a86d1fa258..62684dc7b3 100644
--- a/spec/system/volunteers/index_spec.rb
+++ b/spec/system/volunteers/index_spec.rb
@@ -24,8 +24,8 @@
           click_on volunteer.casa_cases.first.case_number
         end
 
-        expect(page).to have_text("CASA Case Details")
-        expect(page).to have_text("Case number: #{casa_case.case_number}")
+        expect(page).to have_text("Case details")
+        expect(page).to have_text("Case #{casa_case.case_number}")
         expect(page).to have_text("Transition Aged Youth: Yes")
         expect(page).to have_text("Next Court Date:")
         expect(page).to have_text("Court Report Status: Not submitted")
diff --git a/spec/views/notifications/index.html.erb_spec.rb b/spec/views/notifications/index.html.erb_spec.rb
index 6ae325606b..fe6a8ad84f 100644
--- a/spec/views/notifications/index.html.erb_spec.rb
+++ b/spec/views/notifications/index.html.erb_spec.rb
@@ -39,7 +39,7 @@
       it "has all notifications created after and including the deploy date above the patch note" do
         render template: "notifications/index"
 
-        notifications_html = Nokogiri::HTML5(rendered).css(".list-group-item")
+        notifications_html = Nokogiri::HTML5(rendered).css("[data-notification-list-item]")
         patch_note_index = notifications_html.index { |node| node.text.include?("Patch Notes") }
 
         aggregate_failures do
@@ -53,7 +53,7 @@
       it "has all notifications created before the deploy date below the patch note" do
         render template: "notifications/index"
 
-        notifications_html = Nokogiri::HTML5(rendered).css(".list-group-item")
+        notifications_html = Nokogiri::HTML5(rendered).css("[data-notification-list-item]")
         patch_note_index = notifications_html.index { |node| node.text.include?("Patch Notes") }
 
         expect(patch_note_index).to eq(3)
@@ -107,13 +107,13 @@
     it "shows the correct number of notifications" do
       render template: "notifications/index"
 
-      expect(rendered).to have_css(".list-group-item", count: 4)
+      expect(rendered).to have_css("[data-notification-list-item]", count: 4)
     end
 
     it "does not display patch notes" do
       render template: "notifications/index"
 
-      notifications_html = Nokogiri::HTML5(rendered).css(".list-group-item")
+      notifications_html = Nokogiri::HTML5(rendered).css("[data-notification-list-item]")
       view_patch_notes = notifications_html.select { |node| node.text.include?("Patch Notes") }
 
       expect(PatchNote.all.size).to eql(2)