From 1414f087fc04df6d72359cb3c08797e21af67ef1 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sun, 1 Feb 2026 17:25:16 -0600
Subject: [PATCH] bug fix

---
 lib/towerops_web/live/user_settings_live.ex   | 2043 +----------------
 .../live/user_settings_live.html.heex         | 1660 ++++++++++++++
 .../user_settings_live/api_token_manager.ex   |   81 +
 .../live/user_settings_live/helpers.ex        |  115 +
 .../user_settings_live/session_manager.ex     |  121 +
 .../live/user_settings_live/totp_manager.ex   |  158 ++
 6 files changed, 2175 insertions(+), 2003 deletions(-)
 create mode 100644 lib/towerops_web/live/user_settings_live.html.heex
 create mode 100644 lib/towerops_web/live/user_settings_live/api_token_manager.ex
 create mode 100644 lib/towerops_web/live/user_settings_live/helpers.ex
 create mode 100644 lib/towerops_web/live/user_settings_live/session_manager.ex
 create mode 100644 lib/towerops_web/live/user_settings_live/totp_manager.ex

diff --git a/lib/towerops_web/live/user_settings_live.ex b/lib/towerops_web/live/user_settings_live.ex
index bd80c215..f5335f2f 100644
--- a/lib/towerops_web/live/user_settings_live.ex
+++ b/lib/towerops_web/live/user_settings_live.ex
@@ -8,9 +8,11 @@ defmodule ToweropsWeb.UserSettingsLive do
 
   alias Towerops.Accounts
   alias Towerops.Accounts.HIBP
-  alias Towerops.Accounts.UserTotpDevice
   alias Towerops.Admin.AuditLogger
-  alias Towerops.MobileSessions
+  alias ToweropsWeb.UserSettingsLive.ApiTokenManager
+  alias ToweropsWeb.UserSettingsLive.Helpers
+  alias ToweropsWeb.UserSettingsLive.SessionManager
+  alias ToweropsWeb.UserSettingsLive.TotpManager
 
   @impl true
   def mount(_params, session, socket) do
@@ -162,293 +164,95 @@ defmodule ToweropsWeb.UserSettingsLive do
   end
 
   @impl true
+  # Mobile session management - delegated to SessionManager
   def handle_event("revoke_mobile_device", %{"session-id" => session_id}, socket) do
-    case MobileSessions.revoke_session(session_id) do
-      {:ok, _} ->
-        socket =
-          socket
-          |> put_flash(:info, "Mobile device removed successfully.")
-          |> assign_mobile_sessions()
-
-        {:noreply, socket}
-
-      {:error, _} ->
-        {:noreply, put_flash(socket, :error, "Failed to remove mobile device.")}
-    end
+    {:noreply, SessionManager.revoke_mobile_device(socket, session_id)}
   end
 
   @impl true
   def handle_event("toggle_device_alerts", %{"session-id" => session_id, "enabled" => enabled}, socket) do
-    enabled_bool = enabled == "true"
-
-    case MobileSessions.update_alert_preferences(session_id, %{alerts_enabled: enabled_bool}) do
-      {:ok, _} ->
-        message = if enabled_bool, do: "Alerts enabled for device", else: "Alerts disabled for device"
-
-        socket =
-          socket
-          |> put_flash(:info, message)
-          |> assign_mobile_sessions()
-
-        {:noreply, socket}
-
-      {:error, _} ->
-        {:noreply, put_flash(socket, :error, "Failed to update alert preferences.")}
-    end
+    {:noreply, SessionManager.toggle_device_alerts(socket, session_id, enabled)}
   end
 
+  # API token management - delegated to ApiTokenManager
   @impl true
   def handle_event("create_api_token", params, socket) do
-    user = socket.assigns.current_scope.user
-
-    # Handle both nested token params and flat params
-    {name, org_id} =
-      case params do
-        %{"token" => %{"name" => n, "organization_id" => o}} -> {n, o}
-        %{"name" => n, "organization_id" => o} -> {n, o}
-        _ -> {nil, nil}
-      end
-
-    if name && org_id do
-      case Towerops.ApiTokens.create_api_token(%{
-             name: name,
-             organization_id: org_id,
-             user_id: user.id
-           }) do
-        {:ok, {_token, raw_token}} ->
-          socket =
-            socket
-            |> assign(:show_add_token_modal, false)
-            |> assign(:created_token, raw_token)
-            |> assign(:show_token_modal, true)
-            |> assign_api_tokens()
-
-          {:noreply, socket}
-
-        {:error, _changeset} ->
-          {:noreply, put_flash(socket, :error, "Failed to create API token.")}
-      end
-    else
-      {:noreply, put_flash(socket, :error, "Name and organization are required.")}
-    end
+    {:noreply, ApiTokenManager.create_api_token(socket, params)}
   end
 
   @impl true
   def handle_event("close_token_modal", _params, socket) do
-    socket =
-      socket
-      |> assign(:show_token_modal, false)
-      |> assign(:created_token, nil)
-
-    {:noreply, socket}
+    {:noreply, ApiTokenManager.close_token_modal(socket)}
   end
 
   @impl true
   def handle_event("delete_api_token", %{"token-id" => token_id}, socket) do
-    token = Towerops.ApiTokens.get_api_token!(token_id)
-    user = socket.assigns.current_scope.user
-
-    if token.user_id == user.id do
-      case Towerops.ApiTokens.delete_api_token(token) do
-        {:ok, _} ->
-          socket =
-            socket
-            |> put_flash(:info, "API token deleted successfully.")
-            |> assign_api_tokens()
-
-          {:noreply, socket}
-
-        {:error, _} ->
-          {:noreply, put_flash(socket, :error, "Failed to delete API token.")}
-      end
-    else
-      {:noreply, put_flash(socket, :error, "You can only delete your own tokens.")}
-    end
+    {:noreply, ApiTokenManager.delete_api_token(socket, token_id)}
   end
 
+  # Browser session management - delegated to SessionManager
   @impl true
   def handle_event("revoke_session", %{"session-id" => session_id}, socket) do
-    user = socket.assigns.current_scope.user
-    current_token_id = get_current_token_id(socket)
-
-    case Accounts.revoke_browser_session(session_id, user.id, current_token_id) do
-      {:ok, _} ->
-        socket =
-          socket
-          |> put_flash(:info, "Session revoked successfully.")
-          |> assign_browser_sessions()
-
-        {:noreply, socket}
-
-      {:error, :self_revoke} ->
-        {:noreply, put_flash(socket, :error, "You cannot revoke your current session.")}
-
-      {:error, :not_found} ->
-        {:noreply, put_flash(socket, :error, "Session not found.")}
-
-      {:error, _} ->
-        {:noreply, put_flash(socket, :error, "Failed to revoke session.")}
-    end
+    {:noreply, SessionManager.revoke_session(socket, session_id)}
   end
 
   @impl true
   def handle_event("show_revoke_all_modal", _params, socket) do
-    {:noreply, assign(socket, :show_revoke_all_modal, true)}
+    {:noreply, SessionManager.show_revoke_all_modal(socket)}
   end
 
   @impl true
   def handle_event("cancel_revoke_all", _params, socket) do
-    {:noreply, assign(socket, :show_revoke_all_modal, false)}
+    {:noreply, SessionManager.cancel_revoke_all(socket)}
   end
 
   @impl true
   def handle_event("confirm_revoke_all", _params, socket) do
-    user = socket.assigns.current_scope.user
-    current_token_id = get_current_token_id(socket)
-
-    {count, _} = Accounts.revoke_all_other_sessions(user.id, current_token_id)
-
-    socket =
-      socket
-      |> put_flash(:info, "Revoked #{count} other session(s) successfully.")
-      |> assign(:show_revoke_all_modal, false)
-      |> assign_browser_sessions()
-
-    {:noreply, socket}
+    {:noreply, SessionManager.confirm_revoke_all(socket)}
   end
 
   # Security tab - TOTP Device Management
 
   @impl true
+  # TOTP device management - delegated to TotpManager
   def handle_event("show_add_device_modal", _params, socket) do
-    {:noreply, assign(socket, :show_add_device_modal, true)}
+    {:noreply, TotpManager.show_add_device_modal(socket)}
   end
 
   @impl true
   def handle_event("cancel_add_device", _params, socket) do
-    {:noreply, assign(socket, :show_add_device_modal, false)}
+    {:noreply, TotpManager.cancel_add_device(socket)}
   end
 
   @impl true
   def handle_event("create_device", %{"name" => name}, socket) do
-    user = socket.assigns.current_scope.user
-
-    case Accounts.create_totp_device(user.id, name) do
-      {:ok, device, secret} ->
-        qr_code = Accounts.generate_totp_qr_code(user, secret)
-
-        socket =
-          socket
-          |> assign(:show_add_device_modal, false)
-          |> assign(:show_device_qr_modal, true)
-          |> assign(:new_device_id, device.id)
-          |> assign(:new_device_secret, secret)
-          |> assign(:new_device_qr_code, qr_code)
-
-        {:noreply, socket}
-
-      {:error, _changeset} ->
-        {:noreply, put_flash(socket, :error, "Failed to create device.")}
-    end
+    {:noreply, TotpManager.create_device(socket, name)}
   end
 
   @impl true
   def handle_event("verify_new_device", %{"code" => code}, socket) do
-    secret = socket.assigns.new_device_secret
-    device_id = socket.assigns.new_device_id
-
-    if Accounts.verify_totp(secret, code) do
-      # Device already created, just mark as verified by touching it
-      device = Towerops.Repo.get!(UserTotpDevice, device_id)
-
-      device
-      |> UserTotpDevice.touch_changeset()
-      |> Towerops.Repo.update!()
-
-      socket =
-        socket
-        |> put_flash(:info, "Device added successfully!")
-        |> assign(:show_device_qr_modal, false)
-        |> assign(:new_device_id, nil)
-        |> assign(:new_device_secret, nil)
-        |> assign(:new_device_qr_code, nil)
-        |> assign_totp_devices()
-
-      {:noreply, socket}
-    else
-      {:noreply, put_flash(socket, :error, "Invalid code. Please try again.")}
-    end
+    {:noreply, TotpManager.verify_new_device(socket, code)}
   end
 
   @impl true
   def handle_event("close_device_qr_modal", _params, socket) do
-    # Delete the unverified device if user cancels
-    if device_id = socket.assigns.new_device_id do
-      user = socket.assigns.current_scope.user
-      Accounts.delete_totp_device(device_id, user.id)
-    end
-
-    socket =
-      socket
-      |> assign(:show_device_qr_modal, false)
-      |> assign(:new_device_id, nil)
-      |> assign(:new_device_secret, nil)
-      |> assign(:new_device_qr_code, nil)
-      |> assign_totp_devices()
-
-    {:noreply, socket}
+    {:noreply, TotpManager.close_device_qr_modal(socket)}
   end
 
   @impl true
   def handle_event("delete_device", %{"device-id" => device_id}, socket) do
-    user = socket.assigns.current_scope.user
-
-    case Accounts.delete_totp_device(device_id, user.id) do
-      {:ok, _} ->
-        socket =
-          socket
-          |> put_flash(:info, "Device removed successfully.")
-          |> assign_totp_devices()
-
-        {:noreply, socket}
-
-      {:error, :last_device} ->
-        {:noreply, put_flash(socket, :error, "Cannot remove last device. You must have at least one.")}
-
-      {:error, _} ->
-        {:noreply, put_flash(socket, :error, "Failed to remove device.")}
-    end
+    {:noreply, TotpManager.delete_device(socket, device_id)}
   end
 
-  # Security tab - Recovery Codes
-
+  # Recovery codes - delegated to TotpManager
   @impl true
   def handle_event("regenerate_recovery_codes", _params, socket) do
-    user = socket.assigns.current_scope.user
-
-    case Accounts.generate_recovery_codes(user.id) do
-      {:ok, codes} ->
-        socket =
-          socket
-          |> assign(:show_recovery_codes_modal, true)
-          |> assign(:generated_recovery_codes, codes)
-          |> assign_recovery_codes_count()
-
-        {:noreply, socket}
-
-      {:error, _} ->
-        {:noreply, put_flash(socket, :error, "Failed to generate recovery codes.")}
-    end
+    {:noreply, TotpManager.regenerate_recovery_codes(socket)}
   end
 
   @impl true
   def handle_event("close_recovery_codes_modal", _params, socket) do
-    socket =
-      socket
-      |> assign(:show_recovery_codes_modal, false)
-      |> assign(:generated_recovery_codes, nil)
-
-    {:noreply, socket}
+    {:noreply, TotpManager.close_recovery_codes_modal(socket)}
   end
 
   defp get_current_token_id(%{current_token: token}) when is_binary(token) do
@@ -470,15 +274,12 @@ defmodule ToweropsWeb.UserSettingsLive do
     |> assign(:password_form, user |> Accounts.change_user_password() |> to_form())
   end
 
-  defp assign_mobile_sessions(socket) do
-    user = socket.assigns.current_scope.user
-    assign(socket, :mobile_sessions, MobileSessions.list_user_sessions(user.id))
-  end
-
-  defp assign_api_tokens(socket) do
-    user = socket.assigns.current_scope.user
-    assign(socket, :api_tokens, Towerops.ApiTokens.list_user_api_tokens(user.id))
-  end
+  # Assignment helpers delegated to helper modules
+  defdelegate assign_mobile_sessions(socket), to: SessionManager
+  defdelegate assign_api_tokens(socket), to: ApiTokenManager
+  defdelegate assign_browser_sessions(socket), to: SessionManager
+  defdelegate assign_totp_devices(socket), to: TotpManager
+  defdelegate assign_recovery_codes_count(socket), to: TotpManager
 
   defp assign_organizations(socket) do
     user = socket.assigns.current_scope.user
@@ -491,12 +292,6 @@ defmodule ToweropsWeb.UserSettingsLive do
     assign(socket, :default_organization, default_org)
   end
 
-  defp assign_browser_sessions(socket) do
-    user = socket.assigns.current_scope.user
-    sessions = Accounts.list_active_browser_sessions(user.id)
-    assign(socket, :browser_sessions, sessions)
-  end
-
   defp assign_login_history(socket) do
     user = socket.assigns.current_scope.user
     page = socket.assigns[:login_history_page] || 1
@@ -530,1772 +325,14 @@ defmodule ToweropsWeb.UserSettingsLive do
     |> assign(:show_security_alert, failed_count >= 3)
   end
 
-  defp assign_totp_devices(socket) do
-    user = socket.assigns.current_scope.user
-    devices = Accounts.list_user_totp_devices(user.id)
-    assign(socket, :totp_devices, devices)
-  end
-
-  defp assign_recovery_codes_count(socket) do
-    user = socket.assigns.current_scope.user
-    count = Accounts.count_unused_recovery_codes(user.id)
-    assign(socket, :unused_recovery_codes_count, count)
-  end
-
   # Sessions tab helper functions
 
-  defp current_session?(session, current_token_id) do
-    session.user_token_id == current_token_id
-  end
-
-  defp format_timestamp_in_timezone(datetime, timezone) do
-    case DateTime.shift_zone(datetime, timezone) do
-      {:ok, shifted} ->
-        Calendar.strftime(shifted, "%b %d, %Y %I:%M %p %Z")
-
-      {:error, _} ->
-        # Fallback to UTC if timezone conversion fails
-        Calendar.strftime(datetime, "%b %d, %Y %I:%M %p UTC")
-    end
-  end
-
-  defp format_browser_info(session) do
-    case {session.browser_name, session.browser_version, session.os_name} do
-      {nil, _, _} -> session.device_name || "Unknown Browser"
-      {browser, nil, nil} -> browser
-      {browser, version, nil} -> "#{browser} #{version}"
-      {browser, nil, os} -> "#{browser} on #{os}"
-      {browser, version, os} -> "#{browser} #{version} on #{os}"
-    end
-  end
-
-  defp format_location(record) do
-    case {record.city_name, record.subdivision_1_name, record.country_name} do
-      {nil, nil, nil} ->
-        "Unknown Location"
-
-      {city, state, country} when not is_nil(city) and not is_nil(state) and not is_nil(country) ->
-        "#{city}, #{state}, #{country}"
-
-      {city, nil, country} when not is_nil(city) and not is_nil(country) ->
-        "#{city}, #{country}"
-
-      {nil, nil, country} when not is_nil(country) ->
-        country
-
-      _ ->
-        "Unknown Location"
-    end
-  end
-
-  defp format_relative_time(datetime) do
-    now = DateTime.utc_now()
-    diff = DateTime.diff(now, datetime, :second)
-
-    cond do
-      diff < 60 -> "Just now"
-      diff < 3600 -> "#{div(diff, 60)} minutes ago"
-      diff < 86_400 -> "#{div(diff, 3600)} hours ago"
-      diff < 604_800 -> "#{div(diff, 86_400)} days ago"
-      true -> Calendar.strftime(datetime, "%b %d, %Y")
-    end
-  end
-
-  defp login_method_info(method) do
-    case method do
-      "password" -> {"hero-lock-closed", "Password"}
-      "magic_link" -> {"hero-envelope", "Magic Link"}
-      "webauthn" -> {"hero-key", "Passkey"}
-      "mobile_qr" -> {"hero-device-phone-mobile", "Mobile QR"}
-      _ -> {"hero-question-mark-circle", method}
-    end
-  end
-
-  # Generate pagination range with ellipsis for large page counts
-  # Shows: [1] ... [4] [5] [6] ... [20] when on page 5 of 20
-  defp pagination_range(current_page, total_pages) do
-    cond do
-      total_pages <= 7 ->
-        # Show all pages if 7 or fewer
-        Enum.to_list(1..total_pages)
-
-      current_page <= 4 ->
-        # Near the start
-        [1, 2, 3, 4, 5, :ellipsis, total_pages]
-
-      current_page >= total_pages - 3 ->
-        # Near the end
-        [1, :ellipsis, total_pages - 4, total_pages - 3, total_pages - 2, total_pages - 1, total_pages]
-
-      true ->
-        # In the middle
-        [1, :ellipsis, current_page - 1, current_page, current_page + 1, :ellipsis, total_pages]
-    end
-  end
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <Layouts.authenticated
-      flash={@flash}
-      current_scope={@current_scope}
-    >
-      <div class="border-b border-gray-200 pb-5 dark:border-white/5">
-        <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
-          Account Settings
-        </h1>
-        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
-          Manage your account email address, password, and security settings
-        </p>
-      </div>
-
-      <header class="border-b border-gray-200 dark:border-white/5">
-        <nav class="flex overflow-x-auto py-4">
-          <ul
-            role="list"
-            class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-gray-500 sm:px-6 lg:px-8 dark:text-gray-400"
-          >
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=personal"}
-                class={
-                  if @active_tab == "personal",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                Personal
-              </.link>
-            </li>
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=account"}
-                class={
-                  if @active_tab == "account",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                Account
-              </.link>
-            </li>
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=sessions"}
-                class={
-                  if @active_tab == "sessions",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                Sessions
-              </.link>
-            </li>
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=api"}
-                class={
-                  if @active_tab == "api",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                API
-              </.link>
-            </li>
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=notifications"}
-                class={
-                  if @active_tab == "notifications",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                Notifications
-              </.link>
-            </li>
-            <li>
-              <.link
-                patch={~p"/users/settings?tab=security"}
-                class={
-                  if @active_tab == "security",
-                    do: "text-indigo-600 dark:text-indigo-400",
-                    else: ""
-                }
-              >
-                Security
-              </.link>
-            </li>
-            <li>
-              <.link
-                navigate={~p"/users/my-data"}
-                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
-              >
-                My Data
-              </.link>
-            </li>
-          </ul>
-        </nav>
-      </header>
-
-      <div class="divide-y divide-gray-200 dark:divide-white/10">
-        <!-- Personal Information Section -->
-        <%= if @active_tab == "personal" do %>
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Personal Information
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Update your name and timezone preferences.
-              </p>
-            </div>
-
-            <.form
-              for={@profile_form}
-              phx-submit="update_profile"
-              id="update_profile"
-              class="md:col-span-2"
-            >
-              <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-                <div class="sm:col-span-3">
-                  <label
-                    for="first_name"
-                    class="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    First name
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="text"
-                      name={@profile_form[:first_name].name}
-                      id="first_name"
-                      value={@profile_form[:first_name].value}
-                      autocomplete="given-name"
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                    />
-                  </div>
-                </div>
-
-                <div class="sm:col-span-3">
-                  <label
-                    for="last_name"
-                    class="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    Last name
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="text"
-                      name={@profile_form[:last_name].name}
-                      id="last_name"
-                      value={@profile_form[:last_name].value}
-                      autocomplete="family-name"
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                    />
-                  </div>
-                </div>
-
-                <div class="col-span-full">
-                  <label
-                    for="timezone"
-                    class="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    Timezone
-                  </label>
-                  <div class="mt-2 grid grid-cols-1">
-                    <select
-                      name={@profile_form[:timezone].name}
-                      id="timezone"
-                      class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
-                    >
-                      <option value="UTC" selected={@profile_form[:timezone].value == "UTC"}>
-                        UTC (Coordinated Universal Time)
-                      </option>
-                      <option
-                        value="America/New_York"
-                        selected={@profile_form[:timezone].value == "America/New_York"}
-                      >
-                        Eastern Time (US & Canada)
-                      </option>
-                      <option
-                        value="America/Chicago"
-                        selected={@profile_form[:timezone].value == "America/Chicago"}
-                      >
-                        Central Time (US & Canada)
-                      </option>
-                      <option
-                        value="America/Denver"
-                        selected={@profile_form[:timezone].value == "America/Denver"}
-                      >
-                        Mountain Time (US & Canada)
-                      </option>
-                      <option
-                        value="America/Los_Angeles"
-                        selected={@profile_form[:timezone].value == "America/Los_Angeles"}
-                      >
-                        Pacific Time (US & Canada)
-                      </option>
-                      <option
-                        value="Europe/London"
-                        selected={@profile_form[:timezone].value == "Europe/London"}
-                      >
-                        London
-                      </option>
-                      <option
-                        value="Europe/Paris"
-                        selected={@profile_form[:timezone].value == "Europe/Paris"}
-                      >
-                        Paris
-                      </option>
-                      <option
-                        value="Europe/Berlin"
-                        selected={@profile_form[:timezone].value == "Europe/Berlin"}
-                      >
-                        Berlin
-                      </option>
-                      <option
-                        value="Asia/Tokyo"
-                        selected={@profile_form[:timezone].value == "Asia/Tokyo"}
-                      >
-                        Tokyo
-                      </option>
-                      <option
-                        value="Asia/Shanghai"
-                        selected={@profile_form[:timezone].value == "Asia/Shanghai"}
-                      >
-                        Shanghai
-                      </option>
-                      <option
-                        value="Australia/Sydney"
-                        selected={@profile_form[:timezone].value == "Australia/Sydney"}
-                      >
-                        Sydney
-                      </option>
-                    </select>
-                    <svg
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                      data-slot="icon"
-                      aria-hidden="true"
-                      class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
-                    >
-                      <path
-                        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-                        clip-rule="evenodd"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-
-              <div class="mt-8 flex">
-                <button
-                  type="submit"
-                  phx-disable-with="Saving..."
-                  class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
-                >
-                  Save
-                </button>
-              </div>
-            </.form>
-          </div>
-        <% end %>
-        
-    <!-- Account Tab -->
-        <%= if @active_tab == "account" do %>
-          <!-- Email Address Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Email Address</h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Update your email address. You'll receive a confirmation link to verify the new address.
-              </p>
-            </div>
-
-            <.form
-              for={@email_form}
-              phx-submit="update_email"
-              id="update_email"
-              class="md:col-span-2"
-            >
-              <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-                <div class="col-span-full">
-                  <label for="email" class="block text-sm/6 font-medium text-gray-900 dark:text-white">
-                    Email address
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="email"
-                      name={@email_form[:email].name}
-                      id="email"
-                      value={@email_form[:email].value}
-                      autocomplete="email"
-                      required
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div class="mt-8 flex">
-                <button
-                  type="submit"
-                  phx-disable-with="Changing..."
-                  class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
-                >
-                  Change Email
-                </button>
-              </div>
-            </.form>
-          </div>
-          
-    <!-- Password Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Change Password
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Update your password. You'll be logged out and need to sign in again with your new password.
-              </p>
-            </div>
-
-            <.form
-              for={@password_form}
-              phx-submit="update_password"
-              id="update_password"
-              class="md:col-span-2"
-            >
-              <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-                <div class="col-span-full">
-                  <label
-                    for="new-password"
-                    class="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    New password
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="password"
-                      name={@password_form[:password].name}
-                      id="new-password"
-                      autocomplete="new-password"
-                      phx-blur="check_password_breach"
-                      required
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                    />
-                  </div>
-
-                  <%= if @password_breach_count && @password_breach_count > 0 do %>
-                    <div class="mt-2 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
-                      <div class="flex">
-                        <div class="flex-shrink-0">
-                          <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
-                        </div>
-                        <div class="ml-3">
-                          <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                            Password found in data breaches
-                          </h3>
-                          <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
-                            <p>
-                              This password has appeared {@password_breach_count}
-                              {if @password_breach_count == 1, do: "time", else: "times"} in known data breaches. We strongly recommend choosing a different,
-                              more unique password to protect your account.
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  <% end %>
-                </div>
-
-                <div class="col-span-full">
-                  <label
-                    for="confirm-password"
-                    class="block text-sm/6 font-medium text-gray-900 dark:text-white"
-                  >
-                    Confirm password
-                  </label>
-                  <div class="mt-2">
-                    <input
-                      type="password"
-                      name={@password_form[:password_confirmation].name}
-                      id="confirm-password"
-                      autocomplete="new-password"
-                      required
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div class="mt-8 flex">
-                <button
-                  type="submit"
-                  phx-disable-with="Changing..."
-                  class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
-                >
-                  Save Password
-                </button>
-              </div>
-            </.form>
-          </div>
-        <% end %>
-        
-    <!-- API Tab -->
-        <%= if @active_tab == "api" do %>
-          <!-- API Tokens Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">API Tokens</h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Create API tokens to access Towerops programmatically. Tokens are scoped to a specific organization.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <%= if Enum.empty?(@api_tokens) do %>
-                <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
-                  <.icon name="hero-code-bracket" class="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-                    No API tokens
-                  </h3>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                    Get started by creating a new API token.
-                  </p>
-                  <div class="mt-6">
-                    <button
-                      type="button"
-                      phx-click="show_add_token_modal"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                    >
-                      <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
-                    </button>
-                  </div>
-                </div>
-              <% else %>
-                <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
-                  <%= for token <- @api_tokens do %>
-                    <li class="flex items-center justify-between gap-x-6 py-5">
-                      <div class="min-w-0">
-                        <div class="flex items-start gap-x-3">
-                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
-                            {token.name}
-                          </p>
-                        </div>
-                        <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
-                          <p class="whitespace-nowrap">{token.organization.name}</p>
-                          <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
-                            <circle r="1" cx="1" cy="1" />
-                          </svg>
-                          <p class="whitespace-nowrap">
-                            <%= if token.last_used_at do %>
-                              Last used {Calendar.strftime(token.last_used_at, "%B %d, %Y")}
-                            <% else %>
-                              Never used
-                            <% end %>
-                          </p>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        phx-click="delete_api_token"
-                        phx-value-token-id={token.id}
-                        data-confirm="Are you sure you want to delete this API token? This action cannot be undone."
-                        class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
-                      >
-                        Delete
-                      </button>
-                    </li>
-                  <% end %>
-                </ul>
-
-                <div class="mt-6 flex">
-                  <button
-                    type="button"
-                    phx-click="show_add_token_modal"
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                  >
-                    <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
-                  </button>
-                </div>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-        
-    <!-- Notifications Tab -->
-        <%= if @active_tab == "notifications" do %>
-          <!-- Mobile Devices Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Mobile Devices
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Manage mobile devices that receive push notifications for alerts.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <%= if Enum.empty?(@mobile_sessions) do %>
-                <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
-                  <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-                    No mobile devices
-                  </h3>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                    Add a mobile device to receive push notifications for alerts.
-                  </p>
-                  <div class="mt-6">
-                    <.link
-                      navigate={~p"/mobile/qr-login"}
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                    >
-                      <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
-                    </.link>
-                  </div>
-                </div>
-              <% else %>
-                <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
-                  <%= for session <- @mobile_sessions do %>
-                    <li class="flex items-center justify-between gap-x-6 py-5">
-                      <div class="min-w-0 flex-1">
-                        <div class="flex items-start gap-x-3">
-                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
-                            {session.device_name || "Unknown Device"}
-                          </p>
-                          <%= if session.alerts_enabled do %>
-                            <span class="inline-flex items-center gap-x-0.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
-                              <.icon name="hero-bell" class="h-3 w-3" /> Alerts On
-                            </span>
-                          <% else %>
-                            <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 inset-ring-1 inset-ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:inset-ring-gray-400/20">
-                              <.icon name="hero-bell-slash" class="h-3 w-3" /> Alerts Off
-                            </span>
-                          <% end %>
-                        </div>
-                        <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
-                          <p>{session.device_os} • {session.app_version}</p>
-                          <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
-                            <circle r="1" cx="1" cy="1" />
-                          </svg>
-                          <p>Last used {Calendar.strftime(session.last_used_at, "%B %d, %Y")}</p>
-                        </div>
-                      </div>
-                      <div class="flex flex-none items-center gap-x-4">
-                        <button
-                          type="button"
-                          phx-click="toggle_device_alerts"
-                          phx-value-session-id={session.id}
-                          phx-value-enabled={if session.alerts_enabled, do: "false", else: "true"}
-                          class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
-                        >
-                          Toggle
-                        </button>
-                        <button
-                          type="button"
-                          phx-click="revoke_mobile_device"
-                          phx-value-session-id={session.id}
-                          data-confirm="Are you sure you want to remove this device?"
-                          class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
-                        >
-                          Remove
-                        </button>
-                      </div>
-                    </li>
-                  <% end %>
-                </ul>
-
-                <div class="mt-6 flex">
-                  <.link
-                    navigate={~p"/mobile/qr-login"}
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                  >
-                    <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
-                  </.link>
-                </div>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-        
-    <!-- Sessions Tab -->
-        <%= if @active_tab == "sessions" do %>
-          <!-- Security Alert Banner -->
-          <%= if @show_security_alert do %>
-            <div class="px-4 py-6 sm:px-6 lg:px-8">
-              <div class="rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
-                  </div>
-                  <div class="ml-3">
-                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
-                      Security Alert
-                    </h3>
-                    <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
-                      <p>
-                        We detected {@failed_login_count} failed login attempts in the last 24 hours.
-                        Please review your login history below and ensure all activity is authorized.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          <% end %>
-          
-    <!-- Active Sessions Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Active Sessions
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Manage browser sessions where you're currently logged in.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <%= if Enum.empty?(@browser_sessions) do %>
-                <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
-                  <.icon name="hero-computer-desktop" class="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-                    No active sessions
-                  </h3>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                    Your current session will appear here after your next login.
-                  </p>
-                </div>
-              <% else %>
-                <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
-                  <%= for session <- @browser_sessions do %>
-                    <% is_current = current_session?(session, get_current_token_id(assigns)) %>
-                    <li class="flex items-center justify-between gap-x-6 py-5">
-                      <div class="min-w-0 flex-1">
-                        <div class="flex items-start gap-x-3">
-                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
-                            {format_browser_info(session)}
-                          </p>
-                          <%= if is_current do %>
-                            <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
-                              Current Session
-                            </span>
-                          <% end %>
-                        </div>
-                        <div class="mt-1 flex flex-col gap-y-1 text-xs/5 text-gray-500 dark:text-gray-400">
-                          <div class="flex items-center gap-x-2">
-                            <.icon name="hero-map-pin" class="h-3 w-3" />
-                            <span>{format_location(session)}</span>
-                            <span class="text-gray-400 dark:text-gray-600">•</span>
-                            <span class="font-mono">{session.ip_address}</span>
-                          </div>
-                          <div class="flex items-center gap-x-2">
-                            <.icon name="hero-clock" class="h-3 w-3" />
-                            <span>Last active {format_relative_time(session.last_activity_at)}</span>
-                          </div>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        phx-click="revoke_session"
-                        phx-value-session-id={session.id}
-                        disabled={is_current}
-                        data-confirm={
-                          unless is_current,
-                            do:
-                              "Are you sure you want to revoke this session? You will be logged out from that device."
-                        }
-                        class={"rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
-                          if is_current do
-                            "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
-                          else
-                            "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
-                          end
-                        }
-                      >
-                        Revoke
-                      </button>
-                    </li>
-                  <% end %>
-                </ul>
-
-                <%= if length(@browser_sessions) > 1 do %>
-                  <div class="mt-6 flex">
-                    <button
-                      type="button"
-                      phx-click="show_revoke_all_modal"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:hover:bg-red-400"
-                    >
-                      <.icon name="hero-x-mark" class="-ml-0.5 h-5 w-5" /> Revoke All Other Sessions
-                    </button>
-                  </div>
-                <% end %>
-              <% end %>
-            </div>
-          </div>
-          
-    <!-- Login History Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Login History
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Recent login attempts to your account, including successful and failed attempts.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <%= if Enum.empty?(@login_history) do %>
-                <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
-                  <.icon name="hero-clock" class="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-                    No login history
-                  </h3>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                    Your login attempts will appear here.
-                  </p>
-                </div>
-              <% else %>
-                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 dark:ring-white/10 sm:rounded-lg">
-                  <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
-                    <thead class="bg-gray-50 dark:bg-gray-800/50">
-                      <tr>
-                        <th
-                          scope="col"
-                          class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6"
-                        >
-                          Date & Time
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
-                        >
-                          Status
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
-                        >
-                          Method
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
-                        >
-                          Location
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
-                        >
-                          IP Address
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900">
-                      <%= for attempt <- @login_history do %>
-                        <tr>
-                          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-white sm:pl-6">
-                            {format_timestamp_in_timezone(
-                              attempt.inserted_at,
-                              @current_scope.timezone
-                            )}
-                          </td>
-                          <td class="whitespace-nowrap px-3 py-4 text-sm">
-                            <%= if attempt.success do %>
-                              <span class="inline-flex items-center gap-x-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
-                                <.icon name="hero-check-circle" class="h-3 w-3" /> Success
-                              </span>
-                            <% else %>
-                              <span class="inline-flex items-center gap-x-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 inset-ring-1 inset-ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:inset-ring-red-500/20">
-                                <.icon name="hero-x-circle" class="h-3 w-3" /> Failed
-                              </span>
-                            <% end %>
-                          </td>
-                          <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
-                            <% {icon, text} = login_method_info(attempt.method) %>
-                            <span class="inline-flex items-center gap-x-1">
-                              <.icon name={icon} class="h-3 w-3" /> {text}
-                            </span>
-                          </td>
-                          <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
-                            {format_location(attempt)}
-                          </td>
-                          <td class="whitespace-nowrap px-3 py-4 text-sm font-mono text-gray-500 dark:text-gray-400">
-                            {attempt.ip_address}
-                          </td>
-                        </tr>
-                      <% end %>
-                    </tbody>
-                  </table>
-                </div>
-
-                <%= if @login_history_pagination.total_pages > 1 do %>
-                  <div class="mt-6 flex items-center justify-between border-t border-gray-200 dark:border-white/10 pt-6">
-                    <!-- Mobile: Previous/Next only -->
-                    <div class="flex flex-1 justify-between sm:hidden">
-                      <.link
-                        :if={@login_history_pagination.page > 1}
-                        patch={
-                          ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
-                        }
-                        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                      >
-                        Previous
-                      </.link>
-                      <.link
-                        :if={@login_history_pagination.page < @login_history_pagination.total_pages}
-                        patch={
-                          ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
-                        }
-                        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-                      >
-                        Next
-                      </.link>
-                    </div>
-                    
-    <!-- Desktop: Full pagination with page numbers -->
-                    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-                      <div>
-                        <p class="text-sm text-gray-700 dark:text-gray-400">
-                          Showing
-                          <span class="font-medium">
-                            {(@login_history_pagination.page - 1) * @login_history_pagination.per_page +
-                              1}
-                          </span>
-                          to
-                          <span class="font-medium">
-                            {min(
-                              @login_history_pagination.page * @login_history_pagination.per_page,
-                              @login_history_pagination.total_count
-                            )}
-                          </span>
-                          of <span class="font-medium">{@login_history_pagination.total_count}</span>
-                          results
-                        </p>
-                      </div>
-                      <div>
-                        <nav
-                          class="isolate inline-flex -space-x-px rounded-md shadow-sm"
-                          aria-label="Pagination"
-                        >
-                          <!-- Previous button -->
-                          <.link
-                            :if={@login_history_pagination.page > 1}
-                            patch={
-                              ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
-                            }
-                            class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
-                          >
-                            <span class="sr-only">Previous</span>
-                            <.icon name="hero-chevron-left" class="h-5 w-5" />
-                          </.link>
-                          <!-- Page numbers with ellipsis -->
-                          <%= for page_num <- pagination_range(@login_history_pagination.page, @login_history_pagination.total_pages) do %>
-                            <%= if page_num == :ellipsis do %>
-                              <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-400 dark:ring-white/10">
-                                ...
-                              </span>
-                            <% else %>
-                              <.link
-                                patch={~p"/users/settings?tab=#{@active_tab}&page=#{page_num}"}
-                                class={[
-                                  "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 dark:ring-white/10",
-                                  if @login_history_pagination.page == page_num do
-                                    "z-10 bg-blue-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-                                  else
-                                    "text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
-                                  end
-                                ]}
-                              >
-                                {page_num}
-                              </.link>
-                            <% end %>
-                          <% end %>
-                          <!-- Next button -->
-                          <.link
-                            :if={
-                              @login_history_pagination.page < @login_history_pagination.total_pages
-                            }
-                            patch={
-                              ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
-                            }
-                            class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
-                          >
-                            <span class="sr-only">Next</span>
-                            <.icon name="hero-chevron-right" class="h-5 w-5" />
-                          </.link>
-                        </nav>
-                      </div>
-                    </div>
-                  </div>
-                <% end %>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-        
-    <!-- Security Tab -->
-        <%= if @active_tab == "security" do %>
-          <!-- Authenticator Apps Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Authenticator Apps
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Manage TOTP devices for two-factor authentication. You must have at least one device configured.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <%= if Enum.empty?(@totp_devices) do %>
-                <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
-                  <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
-                  <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
-                    No authenticator apps
-                  </h3>
-                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                    Add your first authenticator app to enable two-factor authentication.
-                  </p>
-                  <div class="mt-6">
-                    <button
-                      type="button"
-                      phx-click="show_add_device_modal"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                    >
-                      <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
-                    </button>
-                  </div>
-                </div>
-              <% else %>
-                <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
-                  <%= for device <- @totp_devices do %>
-                    <li class="flex items-center justify-between gap-x-6 py-5">
-                      <div class="min-w-0 flex-1">
-                        <div class="flex items-start gap-x-3">
-                          <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
-                            {device.name}
-                          </p>
-                        </div>
-                        <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
-                          <p class="whitespace-nowrap">
-                            Added {Calendar.strftime(device.inserted_at, "%B %d, %Y")}
-                          </p>
-                          <%= if device.last_used_at do %>
-                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
-                              <circle r="1" cx="1" cy="1" />
-                            </svg>
-                            <p class="whitespace-nowrap">
-                              Last used {format_relative_time(device.last_used_at)}
-                            </p>
-                          <% end %>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        phx-click="delete_device"
-                        phx-value-device-id={device.id}
-                        disabled={length(@totp_devices) == 1}
-                        data-confirm={
-                          if length(@totp_devices) > 1,
-                            do: "Are you sure you want to remove this device?"
-                        }
-                        class={
-                          "rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
-                            if length(@totp_devices) == 1 do
-                              "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
-                            else
-                              "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
-                            end
-                        }
-                      >
-                        Remove
-                      </button>
-                    </li>
-                  <% end %>
-                </ul>
-
-                <div class="mt-6 flex">
-                  <button
-                    type="button"
-                    phx-click="show_add_device_modal"
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                  >
-                    <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
-                  </button>
-                </div>
-              <% end %>
-            </div>
-          </div>
-          
-    <!-- Recovery Codes Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
-            <div>
-              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
-                Recovery Codes
-              </h2>
-              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
-                Single-use backup codes for account access if you lose your authenticator app.
-              </p>
-            </div>
-
-            <div class="md:col-span-2">
-              <div class="rounded-lg border border-gray-200 bg-white px-6 py-5 dark:border-white/10 dark:bg-white/5">
-                <div class="flex items-center justify-between">
-                  <div class="flex-1">
-                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
-                      Available Recovery Codes
-                    </h3>
-                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-                      <%= if @unused_recovery_codes_count == 0 do %>
-                        <span class="text-red-600 dark:text-red-400 font-medium">
-                          No recovery codes available
-                        </span>
-                        - Generate new codes immediately
-                      <% else %>
-                        You have
-                        <span class="font-medium text-gray-900 dark:text-white">
-                          {@unused_recovery_codes_count}
-                        </span>
-                        unused recovery code{if @unused_recovery_codes_count != 1, do: "s"}
-                      <% end %>
-                    </p>
-                  </div>
-                  <div class="ml-4">
-                    <button
-                      type="button"
-                      phx-click="regenerate_recovery_codes"
-                      data-confirm="This will invalidate all existing unused recovery codes. Continue?"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-                    >
-                      <.icon name="hero-arrow-path" class="-ml-0.5 h-5 w-5" /> Regenerate
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <%= if @unused_recovery_codes_count == 0 do %>
-                <div class="mt-4 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
-                  <div class="flex">
-                    <div class="flex-shrink-0">
-                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
-                    </div>
-                    <div class="ml-3">
-                      <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
-                        No Recovery Codes
-                      </h3>
-                      <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
-                        <p>
-                          You have no recovery codes available. If you lose access to your authenticator app,
-                          you won't be able to log in. Generate new codes now.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-      </div>
-      
-    <!-- Revoke All Sessions Confirmation Modal -->
-      <%= if @show_revoke_all_modal do %>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="revoke-all-modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              phx-click="cancel_revoke_all"
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-              <div>
-                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
-                  <.icon
-                    name="hero-exclamation-triangle"
-                    class="h-6 w-6 text-red-600 dark:text-red-400"
-                  />
-                </div>
-                <div class="mt-3 text-center sm:mt-5">
-                  <h3
-                    class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                    id="revoke-all-modal-title"
-                  >
-                    Revoke All Other Sessions?
-                  </h3>
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-500 dark:text-gray-400">
-                      This will log you out from all other browsers and devices. Your current session will remain active.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                <button
-                  type="button"
-                  phx-click="confirm_revoke_all"
-                  class="inline-flex w-full justify-center rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:col-start-2"
-                >
-                  Revoke All
-                </button>
-                <button
-                  type="button"
-                  phx-click="cancel_revoke_all"
-                  class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- API Token Creation Modal -->
-      <%= if @show_add_token_modal do %>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              phx-click="cancel_add_token"
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-              <.form for={%{}} as={:token} phx-submit="create_api_token">
-                <div>
-                  <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-                    <.icon name="hero-code-bracket" class="h-6 w-6 text-blue-600 dark:text-blue-400" />
-                  </div>
-                  <div class="mt-3 text-center sm:mt-5">
-                    <h3
-                      class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                      id="create-api-token-modal-title"
-                    >
-                      Create API Token
-                    </h3>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-500 dark:text-gray-400">
-                        Give this token a name and select the organization it will have access to.
-                      </p>
-                    </div>
-                    <div class="mt-4 space-y-4">
-                      <input
-                        type="text"
-                        name="name"
-                        placeholder="e.g., Production API"
-                        required
-                        class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                      />
-                      <div class="grid grid-cols-1">
-                        <select
-                          name="organization_id"
-                          required
-                          class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
-                        >
-                          <%= for org <- @organizations do %>
-                            <option value={org.id}>{org.name}</option>
-                          <% end %>
-                        </select>
-                        <svg
-                          viewBox="0 0 16 16"
-                          fill="currentColor"
-                          data-slot="icon"
-                          aria-hidden="true"
-                          class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
-                        >
-                          <path
-                            d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-                            clip-rule="evenodd"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <button
-                    type="submit"
-                    class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
-                  >
-                    Create Token
-                  </button>
-                  <button
-                    type="button"
-                    phx-click="cancel_add_token"
-                    class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </.form>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- Token Created Success Modal -->
-      <%= if @show_token_modal && @created_token do %>
-        <div
-          id="token-success-modal"
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="token-success-modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              phx-click="close_token_modal"
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-              <div>
-                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
-                  <.icon name="hero-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
-                </div>
-                <div class="mt-3 text-center sm:mt-5">
-                  <h3
-                    id="token-success-modal-title"
-                    class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                  >
-                    API Token Created
-                  </h3>
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-500 dark:text-gray-400">
-                      Copy this token now. You won't be able to see it again.
-                    </p>
-                  </div>
-                  <div class="mt-4">
-                    <div class="relative">
-                      <input
-                        type="text"
-                        readonly
-                        value={String.trim(@created_token)}
-                        class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
-                        id="api-token-input"
-                        onclick="this.select()"
-                      />
-                      <button
-                        type="button"
-                        phx-hook="CopyToClipboard"
-                        data-target="#api-token-input"
-                        id="copy-api-token"
-                        class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
-                      >
-                        <.icon name="hero-clipboard" class="h-3.5 w-3.5" />
-                        <span>Copy</span>
-                      </button>
-                    </div>
-                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
-                      Click the token to select all, or use the Copy button
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-6">
-                <button
-                  type="button"
-                  phx-click="close_token_modal"
-                  class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-                >
-                  Done
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- Add TOTP Device Modal -->
-      <%= if @show_add_device_modal do %>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="add-device-modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              phx-click="cancel_add_device"
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-              <.form for={%{}} as={:device} phx-submit="create_device">
-                <div>
-                  <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
-                    <.icon
-                      name="hero-device-phone-mobile"
-                      class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
-                    />
-                  </div>
-                  <div class="mt-3 text-center sm:mt-5">
-                    <h3
-                      class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                      id="add-device-modal-title"
-                    >
-                      Add Authenticator Device
-                    </h3>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-500 dark:text-gray-400">
-                        Give this device a name to help you identify it (e.g., "iPhone 15", "iPad Pro").
-                      </p>
-                    </div>
-                    <div class="mt-4">
-                      <input
-                        type="text"
-                        name="name"
-                        placeholder="e.g., iPhone 15"
-                        required
-                        autofocus
-                        class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-                  <button
-                    type="submit"
-                    class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
-                  >
-                    Continue
-                  </button>
-                  <button
-                    type="button"
-                    phx-click="cancel_add_device"
-                    class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </.form>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- Device QR Code Modal -->
-      <%= if @show_device_qr_modal && @new_device_qr_code do %>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="device-qr-modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              phx-click="close_device_qr_modal"
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-              <div>
-                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
-                  <.icon name="hero-qr-code" class="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
-                </div>
-                <div class="mt-3 text-center sm:mt-5">
-                  <h3
-                    class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                    id="device-qr-modal-title"
-                  >
-                    Scan QR Code
-                  </h3>
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-500 dark:text-gray-400">
-                      Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.).
-                    </p>
-                  </div>
-                  
-    <!-- QR Code -->
-                  <div class="mt-6 flex justify-center">
-                    <div class="inline-block rounded-lg bg-white p-4">
-                      <img src={@new_device_qr_code} alt="TOTP QR Code" class="h-48 w-48" />
-                    </div>
-                  </div>
-                  
-    <!-- Verification Code Input -->
-                  <div class="mt-6">
-                    <p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
-                      Enter the 6-digit code from your app to verify
-                    </p>
-                    <.form for={%{}} as={:verification} phx-submit="verify_new_device">
-                      <div class="flex justify-center gap-3">
-                        <input
-                          type="text"
-                          name="code"
-                          placeholder="000000"
-                          maxlength="6"
-                          pattern="[0-9]{6}"
-                          inputmode="numeric"
-                          autocomplete="one-time-code"
-                          required
-                          autofocus
-                          class="block w-32 rounded-md bg-white px-3 py-2 text-center text-lg font-mono text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
-                        />
-                        <button
-                          type="submit"
-                          class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                        >
-                          Verify
-                        </button>
-                      </div>
-                    </.form>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-6">
-                <button
-                  type="button"
-                  phx-click="close_device_qr_modal"
-                  class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- Recovery Codes Display Modal -->
-      <%= if @show_recovery_codes_modal && @generated_recovery_codes do %>
-        <div
-          class="fixed inset-0 z-50 overflow-y-auto"
-          aria-labelledby="recovery-codes-modal-title"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-            <div
-              class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-              aria-hidden="true"
-            >
-            </div>
-            <span
-              class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-              aria-hidden="true"
-            >
-              &#8203;
-            </span>
-
-            <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-2xl sm:p-6 sm:align-middle">
-              <div>
-                <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
-                  <.icon name="hero-shield-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
-                </div>
-                <div class="mt-3 text-center sm:mt-5">
-                  <h3
-                    class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                    id="recovery-codes-modal-title"
-                  >
-                    Recovery Codes Generated
-                  </h3>
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-500 dark:text-gray-400">
-                      Save these codes in a secure location. Each code can only be used once.
-                    </p>
-                  </div>
-                  
-    <!-- Recovery Codes Grid -->
-                  <div class="mt-6">
-                    <div class="rounded-lg bg-gray-50 p-6 dark:bg-gray-900/50">
-                      <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
-                        <%= for code <- @generated_recovery_codes do %>
-                          <div class="rounded-md bg-white px-3 py-2 font-mono text-sm text-gray-900 shadow-xs dark:bg-gray-800 dark:text-white">
-                            {code}
-                          </div>
-                        <% end %>
-                      </div>
-                    </div>
-                  </div>
-                  
-    <!-- Copy to Clipboard -->
-                  <div class="mt-4 flex justify-center gap-3">
-                    <button
-                      type="button"
-                      phx-hook="CopyToClipboard"
-                      data-target="#recovery-codes-text"
-                      id="copy-recovery-codes"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                    >
-                      <.icon name="hero-clipboard" class="-ml-0.5 h-5 w-5" /> Copy All
-                    </button>
-                  </div>
-                  
-    <!-- Hidden textarea for copy functionality -->
-                  <textarea
-                    id="recovery-codes-text"
-                    class="sr-only"
-                    readonly
-                  >{Enum.join(@generated_recovery_codes, "\n")}</textarea>
-                  
-    <!-- Warning -->
-                  <div class="mt-6 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
-                    <div class="flex">
-                      <div class="flex-shrink-0">
-                        <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
-                      </div>
-                      <div class="ml-3">
-                        <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
-                          Important
-                        </h3>
-                        <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
-                          <p>
-                            These codes won't be shown again. Store them securely (password manager, encrypted file, etc.).
-                            If you lose your authenticator and these codes, you won't be able to access your account.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-6">
-                <button
-                  type="button"
-                  phx-click="close_recovery_codes_modal"
-                  class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                >
-                  I've Saved These Codes
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      <% end %>
-      
-    <!-- Passkey Registration Modal -->
-      <div
-        id="passkey-modal"
-        class="hidden fixed inset-0 z-50 overflow-y-auto"
-        aria-labelledby="modal-title"
-        role="dialog"
-        aria-modal="true"
-      >
-        <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
-          <div
-            class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
-            aria-hidden="true"
-          >
-          </div>
-          <span
-            class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
-
-          <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-            <div>
-              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-                <.icon name="hero-key" class="h-6 w-6 text-blue-600 dark:text-blue-400" />
-              </div>
-              <div class="mt-3 text-center sm:mt-5">
-                <h3
-                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
-                  id="add-passkey-modal-title"
-                >
-                  Add Passkey
-                </h3>
-                <div class="mt-2">
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
-                    Give this passkey a name to help you identify it later (e.g., "MacBook Touch ID", "iPhone").
-                  </p>
-                </div>
-                <div class="mt-4">
-                  <input
-                    type="text"
-                    id="passkey-name-input"
-                    placeholder="e.g., MacBook Touch ID"
-                    class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-white/10 dark:bg-gray-800/50 dark:text-white sm:text-sm"
-                  />
-                </div>
-                <div
-                  id="passkey-error"
-                  class="mt-3 hidden rounded-lg bg-red-50 p-3 dark:bg-red-900/20"
-                >
-                  <p class="text-sm text-red-800 dark:text-red-200"></p>
-                </div>
-              </div>
-            </div>
-            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
-              <button
-                type="button"
-                id="confirm-add-passkey"
-                class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
-              >
-                Continue
-              </button>
-              <button
-                type="button"
-                id="cancel-add-passkey"
-                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Layouts.authenticated>
-    """
-  end
+  # Formatting helpers delegated to ToweropsWeb.UserSettingsLive.Helpers module
+  defdelegate current_session?(session, current_token_id), to: Helpers
+  defdelegate format_timestamp_in_timezone(datetime, timezone), to: Helpers
+  defdelegate format_browser_info(session), to: Helpers
+  defdelegate format_location(record), to: Helpers
+  defdelegate format_relative_time(datetime), to: Helpers
+  defdelegate login_method_info(method), to: Helpers
+  defdelegate pagination_range(current_page, total_pages), to: Helpers
 end
diff --git a/lib/towerops_web/live/user_settings_live.html.heex b/lib/towerops_web/live/user_settings_live.html.heex
new file mode 100644
index 00000000..609f33e4
--- /dev/null
+++ b/lib/towerops_web/live/user_settings_live.html.heex
@@ -0,0 +1,1660 @@
+<Layouts.authenticated
+  flash={@flash}
+  current_scope={@current_scope}
+>
+  <div class="border-b border-gray-200 pb-5 dark:border-white/5">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
+      Account Settings
+    </h1>
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+      Manage your account email address, password, and security settings
+    </p>
+  </div>
+
+  <header class="border-b border-gray-200 dark:border-white/5">
+    <nav class="flex overflow-x-auto py-4">
+      <ul
+        role="list"
+        class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-gray-500 sm:px-6 lg:px-8 dark:text-gray-400"
+      >
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=personal"}
+            class={
+              if @active_tab == "personal",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            Personal
+          </.link>
+        </li>
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=account"}
+            class={
+              if @active_tab == "account",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            Account
+          </.link>
+        </li>
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=sessions"}
+            class={
+              if @active_tab == "sessions",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            Sessions
+          </.link>
+        </li>
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=api"}
+            class={
+              if @active_tab == "api",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            API
+          </.link>
+        </li>
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=notifications"}
+            class={
+              if @active_tab == "notifications",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            Notifications
+          </.link>
+        </li>
+        <li>
+          <.link
+            patch={~p"/users/settings?tab=security"}
+            class={
+              if @active_tab == "security",
+                do: "text-indigo-600 dark:text-indigo-400",
+                else: ""
+            }
+          >
+            Security
+          </.link>
+        </li>
+        <li>
+          <.link
+            navigate={~p"/users/my-data"}
+            class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+          >
+            My Data
+          </.link>
+        </li>
+      </ul>
+    </nav>
+  </header>
+
+  <div class="divide-y divide-gray-200 dark:divide-white/10">
+    <!-- Personal Information Section -->
+    <%= if @active_tab == "personal" do %>
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Personal Information
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Update your name and timezone preferences.
+          </p>
+        </div>
+
+        <.form
+          for={@profile_form}
+          phx-submit="update_profile"
+          id="update_profile"
+          class="md:col-span-2"
+        >
+          <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+            <div class="sm:col-span-3">
+              <label
+                for="first_name"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
+              >
+                First name
+              </label>
+              <div class="mt-2">
+                <input
+                  type="text"
+                  name={@profile_form[:first_name].name}
+                  id="first_name"
+                  value={@profile_form[:first_name].value}
+                  autocomplete="given-name"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+
+            <div class="sm:col-span-3">
+              <label
+                for="last_name"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
+              >
+                Last name
+              </label>
+              <div class="mt-2">
+                <input
+                  type="text"
+                  name={@profile_form[:last_name].name}
+                  id="last_name"
+                  value={@profile_form[:last_name].value}
+                  autocomplete="family-name"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+
+            <div class="col-span-full">
+              <label
+                for="timezone"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
+              >
+                Timezone
+              </label>
+              <div class="mt-2 grid grid-cols-1">
+                <select
+                  name={@profile_form[:timezone].name}
+                  id="timezone"
+                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
+                >
+                  <option value="UTC" selected={@profile_form[:timezone].value == "UTC"}>
+                    UTC (Coordinated Universal Time)
+                  </option>
+                  <option
+                    value="America/New_York"
+                    selected={@profile_form[:timezone].value == "America/New_York"}
+                  >
+                    Eastern Time (US & Canada)
+                  </option>
+                  <option
+                    value="America/Chicago"
+                    selected={@profile_form[:timezone].value == "America/Chicago"}
+                  >
+                    Central Time (US & Canada)
+                  </option>
+                  <option
+                    value="America/Denver"
+                    selected={@profile_form[:timezone].value == "America/Denver"}
+                  >
+                    Mountain Time (US & Canada)
+                  </option>
+                  <option
+                    value="America/Los_Angeles"
+                    selected={@profile_form[:timezone].value == "America/Los_Angeles"}
+                  >
+                    Pacific Time (US & Canada)
+                  </option>
+                  <option
+                    value="Europe/London"
+                    selected={@profile_form[:timezone].value == "Europe/London"}
+                  >
+                    London
+                  </option>
+                  <option
+                    value="Europe/Paris"
+                    selected={@profile_form[:timezone].value == "Europe/Paris"}
+                  >
+                    Paris
+                  </option>
+                  <option
+                    value="Europe/Berlin"
+                    selected={@profile_form[:timezone].value == "Europe/Berlin"}
+                  >
+                    Berlin
+                  </option>
+                  <option
+                    value="Asia/Tokyo"
+                    selected={@profile_form[:timezone].value == "Asia/Tokyo"}
+                  >
+                    Tokyo
+                  </option>
+                  <option
+                    value="Asia/Shanghai"
+                    selected={@profile_form[:timezone].value == "Asia/Shanghai"}
+                  >
+                    Shanghai
+                  </option>
+                  <option
+                    value="Australia/Sydney"
+                    selected={@profile_form[:timezone].value == "Australia/Sydney"}
+                  >
+                    Sydney
+                  </option>
+                </select>
+                <svg
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                  data-slot="icon"
+                  aria-hidden="true"
+                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
+                >
+                  <path
+                    d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                    clip-rule="evenodd"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-8 flex">
+            <button
+              type="submit"
+              phx-disable-with="Saving..."
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
+            >
+              Save
+            </button>
+          </div>
+        </.form>
+      </div>
+    <% end %>
+    
+<!-- Account Tab -->
+    <%= if @active_tab == "account" do %>
+      <!-- Email Address Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Email Address</h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Update your email address. You'll receive a confirmation link to verify the new address.
+          </p>
+        </div>
+
+        <.form
+          for={@email_form}
+          phx-submit="update_email"
+          id="update_email"
+          class="md:col-span-2"
+        >
+          <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+            <div class="col-span-full">
+              <label for="email" class="block text-sm/6 font-medium text-gray-900 dark:text-white">
+                Email address
+              </label>
+              <div class="mt-2">
+                <input
+                  type="email"
+                  name={@email_form[:email].name}
+                  id="email"
+                  value={@email_form[:email].value}
+                  autocomplete="email"
+                  required
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-8 flex">
+            <button
+              type="submit"
+              phx-disable-with="Changing..."
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
+            >
+              Change Email
+            </button>
+          </div>
+        </.form>
+      </div>
+      
+<!-- Password Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Change Password
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Update your password. You'll be logged out and need to sign in again with your new password.
+          </p>
+        </div>
+
+        <.form
+          for={@password_form}
+          phx-submit="update_password"
+          id="update_password"
+          class="md:col-span-2"
+        >
+          <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
+            <div class="col-span-full">
+              <label
+                for="new-password"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
+              >
+                New password
+              </label>
+              <div class="mt-2">
+                <input
+                  type="password"
+                  name={@password_form[:password].name}
+                  id="new-password"
+                  autocomplete="new-password"
+                  phx-blur="check_password_breach"
+                  required
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+
+              <%= if @password_breach_count && @password_breach_count > 0 do %>
+                <div class="mt-2 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
+                  <div class="flex">
+                    <div class="flex-shrink-0">
+                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
+                    </div>
+                    <div class="ml-3">
+                      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                        Password found in data breaches
+                      </h3>
+                      <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
+                        <p>
+                          This password has appeared {@password_breach_count}
+                          {if @password_breach_count == 1, do: "time", else: "times"} in known data breaches. We strongly recommend choosing a different,
+                          more unique password to protect your account.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+
+            <div class="col-span-full">
+              <label
+                for="confirm-password"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
+              >
+                Confirm password
+              </label>
+              <div class="mt-2">
+                <input
+                  type="password"
+                  name={@password_form[:password_confirmation].name}
+                  id="confirm-password"
+                  autocomplete="new-password"
+                  required
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-8 flex">
+            <button
+              type="submit"
+              phx-disable-with="Changing..."
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
+            >
+              Save Password
+            </button>
+          </div>
+        </.form>
+      </div>
+    <% end %>
+    
+<!-- API Tab -->
+    <%= if @active_tab == "api" do %>
+      <!-- API Tokens Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">API Tokens</h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Create API tokens to access Towerops programmatically. Tokens are scoped to a specific organization.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <%= if Enum.empty?(@api_tokens) do %>
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-code-bracket" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+                No API tokens
+              </h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Get started by creating a new API token.
+              </p>
+              <div class="mt-6">
+                <button
+                  type="button"
+                  phx-click="show_add_token_modal"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                >
+                  <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
+                </button>
+              </div>
+            </div>
+          <% else %>
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
+              <%= for token <- @api_tokens do %>
+                <li class="flex items-center justify-between gap-x-6 py-5">
+                  <div class="min-w-0">
+                    <div class="flex items-start gap-x-3">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
+                        {token.name}
+                      </p>
+                    </div>
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
+                      <p class="whitespace-nowrap">{token.organization.name}</p>
+                      <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                        <circle r="1" cx="1" cy="1" />
+                      </svg>
+                      <p class="whitespace-nowrap">
+                        <%= if token.last_used_at do %>
+                          Last used {Calendar.strftime(token.last_used_at, "%B %d, %Y")}
+                        <% else %>
+                          Never used
+                        <% end %>
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    phx-click="delete_api_token"
+                    phx-value-token-id={token.id}
+                    data-confirm="Are you sure you want to delete this API token? This action cannot be undone."
+                    class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                  >
+                    Delete
+                  </button>
+                </li>
+              <% end %>
+            </ul>
+
+            <div class="mt-6 flex">
+              <button
+                type="button"
+                phx-click="show_add_token_modal"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+              >
+                <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
+              </button>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    
+<!-- Notifications Tab -->
+    <%= if @active_tab == "notifications" do %>
+      <!-- Mobile Devices Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Mobile Devices
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Manage mobile devices that receive push notifications for alerts.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <%= if Enum.empty?(@mobile_sessions) do %>
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+                No mobile devices
+              </h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Add a mobile device to receive push notifications for alerts.
+              </p>
+              <div class="mt-6">
+                <.link
+                  navigate={~p"/mobile/qr-login"}
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                >
+                  <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
+                </.link>
+              </div>
+            </div>
+          <% else %>
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
+              <%= for session <- @mobile_sessions do %>
+                <li class="flex items-center justify-between gap-x-6 py-5">
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-start gap-x-3">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
+                        {session.device_name || "Unknown Device"}
+                      </p>
+                      <%= if session.alerts_enabled do %>
+                        <span class="inline-flex items-center gap-x-0.5 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
+                          <.icon name="hero-bell" class="h-3 w-3" /> Alerts On
+                        </span>
+                      <% else %>
+                        <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 inset-ring-1 inset-ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:inset-ring-gray-400/20">
+                          <.icon name="hero-bell-slash" class="h-3 w-3" /> Alerts Off
+                        </span>
+                      <% end %>
+                    </div>
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
+                      <p>{session.device_os} • {session.app_version}</p>
+                      <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                        <circle r="1" cx="1" cy="1" />
+                      </svg>
+                      <p>Last used {Calendar.strftime(session.last_used_at, "%B %d, %Y")}</p>
+                    </div>
+                  </div>
+                  <div class="flex flex-none items-center gap-x-4">
+                    <button
+                      type="button"
+                      phx-click="toggle_device_alerts"
+                      phx-value-session-id={session.id}
+                      phx-value-enabled={if session.alerts_enabled, do: "false", else: "true"}
+                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                    >
+                      Toggle
+                    </button>
+                    <button
+                      type="button"
+                      phx-click="revoke_mobile_device"
+                      phx-value-session-id={session.id}
+                      data-confirm="Are you sure you want to remove this device?"
+                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+
+            <div class="mt-6 flex">
+              <.link
+                navigate={~p"/mobile/qr-login"}
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+              >
+                <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
+              </.link>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    
+<!-- Sessions Tab -->
+    <%= if @active_tab == "sessions" do %>
+      <!-- Security Alert Banner -->
+      <%= if @show_security_alert do %>
+        <div class="px-4 py-6 sm:px-6 lg:px-8">
+          <div class="rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
+              </div>
+              <div class="ml-3">
+                <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
+                  Security Alert
+                </h3>
+                <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
+                  <p>
+                    We detected {@failed_login_count} failed login attempts in the last 24 hours.
+                    Please review your login history below and ensure all activity is authorized.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      <% end %>
+      
+<!-- Active Sessions Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Active Sessions
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Manage browser sessions where you're currently logged in.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <%= if Enum.empty?(@browser_sessions) do %>
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-computer-desktop" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+                No active sessions
+              </h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Your current session will appear here after your next login.
+              </p>
+            </div>
+          <% else %>
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
+              <%= for session <- @browser_sessions do %>
+                <% is_current = current_session?(session, get_current_token_id(assigns)) %>
+                <li class="flex items-center justify-between gap-x-6 py-5">
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-start gap-x-3">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
+                        {format_browser_info(session)}
+                      </p>
+                      <%= if is_current do %>
+                        <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
+                          Current Session
+                        </span>
+                      <% end %>
+                    </div>
+                    <div class="mt-1 flex flex-col gap-y-1 text-xs/5 text-gray-500 dark:text-gray-400">
+                      <div class="flex items-center gap-x-2">
+                        <.icon name="hero-map-pin" class="h-3 w-3" />
+                        <span>{format_location(session)}</span>
+                        <span class="text-gray-400 dark:text-gray-600">•</span>
+                        <span class="font-mono">{session.ip_address}</span>
+                      </div>
+                      <div class="flex items-center gap-x-2">
+                        <.icon name="hero-clock" class="h-3 w-3" />
+                        <span>Last active {format_relative_time(session.last_activity_at)}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    phx-click="revoke_session"
+                    phx-value-session-id={session.id}
+                    disabled={is_current}
+                    data-confirm={
+                      unless is_current,
+                        do:
+                          "Are you sure you want to revoke this session? You will be logged out from that device."
+                    }
+                    class={"rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
+                          if is_current do
+                            "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
+                          else
+                            "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                          end
+                        }
+                  >
+                    Revoke
+                  </button>
+                </li>
+              <% end %>
+            </ul>
+
+            <%= if length(@browser_sessions) > 1 do %>
+              <div class="mt-6 flex">
+                <button
+                  type="button"
+                  phx-click="show_revoke_all_modal"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:hover:bg-red-400"
+                >
+                  <.icon name="hero-x-mark" class="-ml-0.5 h-5 w-5" /> Revoke All Other Sessions
+                </button>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      
+<!-- Login History Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Login History
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Recent login attempts to your account, including successful and failed attempts.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <%= if Enum.empty?(@login_history) do %>
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-clock" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+                No login history
+              </h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Your login attempts will appear here.
+              </p>
+            </div>
+          <% else %>
+            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 dark:ring-white/10 sm:rounded-lg">
+              <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-800/50">
+                  <tr>
+                    <th
+                      scope="col"
+                      class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6"
+                    >
+                      Date & Time
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
+                    >
+                      Status
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
+                    >
+                      Method
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
+                    >
+                      Location
+                    </th>
+                    <th
+                      scope="col"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
+                    >
+                      IP Address
+                    </th>
+                  </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900">
+                  <%= for attempt <- @login_history do %>
+                    <tr>
+                      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-white sm:pl-6">
+                        {format_timestamp_in_timezone(
+                          attempt.inserted_at,
+                          @current_scope.timezone
+                        )}
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-4 text-sm">
+                        <%= if attempt.success do %>
+                          <span class="inline-flex items-center gap-x-1 rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 inset-ring-1 inset-ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:inset-ring-green-500/20">
+                            <.icon name="hero-check-circle" class="h-3 w-3" /> Success
+                          </span>
+                        <% else %>
+                          <span class="inline-flex items-center gap-x-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 inset-ring-1 inset-ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:inset-ring-red-500/20">
+                            <.icon name="hero-x-circle" class="h-3 w-3" /> Failed
+                          </span>
+                        <% end %>
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                        <% {icon, text} = login_method_info(attempt.method) %>
+                        <span class="inline-flex items-center gap-x-1">
+                          <.icon name={icon} class="h-3 w-3" /> {text}
+                        </span>
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                        {format_location(attempt)}
+                      </td>
+                      <td class="whitespace-nowrap px-3 py-4 text-sm font-mono text-gray-500 dark:text-gray-400">
+                        {attempt.ip_address}
+                      </td>
+                    </tr>
+                  <% end %>
+                </tbody>
+              </table>
+            </div>
+
+            <%= if @login_history_pagination.total_pages > 1 do %>
+              <div class="mt-6 flex items-center justify-between border-t border-gray-200 dark:border-white/10 pt-6">
+                <!-- Mobile: Previous/Next only -->
+                <div class="flex flex-1 justify-between sm:hidden">
+                  <.link
+                    :if={@login_history_pagination.page > 1}
+                    patch={
+                      ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
+                    }
+                    class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                  >
+                    Previous
+                  </.link>
+                  <.link
+                    :if={@login_history_pagination.page < @login_history_pagination.total_pages}
+                    patch={
+                      ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
+                    }
+                    class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                  >
+                    Next
+                  </.link>
+                </div>
+                
+<!-- Desktop: Full pagination with page numbers -->
+                <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+                  <div>
+                    <p class="text-sm text-gray-700 dark:text-gray-400">
+                      Showing
+                      <span class="font-medium">
+                        {(@login_history_pagination.page - 1) * @login_history_pagination.per_page +
+                          1}
+                      </span>
+                      to
+                      <span class="font-medium">
+                        {min(
+                          @login_history_pagination.page * @login_history_pagination.per_page,
+                          @login_history_pagination.total_count
+                        )}
+                      </span>
+                      of <span class="font-medium">{@login_history_pagination.total_count}</span>
+                      results
+                    </p>
+                  </div>
+                  <div>
+                    <nav
+                      class="isolate inline-flex -space-x-px rounded-md shadow-sm"
+                      aria-label="Pagination"
+                    >
+                      <!-- Previous button -->
+                      <.link
+                        :if={@login_history_pagination.page > 1}
+                        patch={
+                          ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
+                        }
+                        class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
+                      >
+                        <span class="sr-only">Previous</span>
+                        <.icon name="hero-chevron-left" class="h-5 w-5" />
+                      </.link>
+                      <!-- Page numbers with ellipsis -->
+                      <%= for page_num <- pagination_range(@login_history_pagination.page, @login_history_pagination.total_pages) do %>
+                        <%= if page_num == :ellipsis do %>
+                          <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-400 dark:ring-white/10">
+                            ...
+                          </span>
+                        <% else %>
+                          <.link
+                            patch={~p"/users/settings?tab=#{@active_tab}&page=#{page_num}"}
+                            class={[
+                              "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 dark:ring-white/10",
+                              if @login_history_pagination.page == page_num do
+                                "z-10 bg-blue-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                              else
+                                "text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
+                              end
+                            ]}
+                          >
+                            {page_num}
+                          </.link>
+                        <% end %>
+                      <% end %>
+                      <!-- Next button -->
+                      <.link
+                        :if={
+                          @login_history_pagination.page < @login_history_pagination.total_pages
+                        }
+                        patch={
+                          ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
+                        }
+                        class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
+                      >
+                        <span class="sr-only">Next</span>
+                        <.icon name="hero-chevron-right" class="h-5 w-5" />
+                      </.link>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+    
+<!-- Security Tab -->
+    <%= if @active_tab == "security" do %>
+      <!-- Authenticator Apps Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Authenticator Apps
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Manage TOTP devices for two-factor authentication. You must have at least one device configured.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <%= if Enum.empty?(@totp_devices) do %>
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
+                No authenticator apps
+              </h3>
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Add your first authenticator app to enable two-factor authentication.
+              </p>
+              <div class="mt-6">
+                <button
+                  type="button"
+                  phx-click="show_add_device_modal"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                >
+                  <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
+                </button>
+              </div>
+            </div>
+          <% else %>
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
+              <%= for device <- @totp_devices do %>
+                <li class="flex items-center justify-between gap-x-6 py-5">
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-start gap-x-3">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
+                        {device.name}
+                      </p>
+                    </div>
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
+                      <p class="whitespace-nowrap">
+                        Added {Calendar.strftime(device.inserted_at, "%B %d, %Y")}
+                      </p>
+                      <%= if device.last_used_at do %>
+                        <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
+                          <circle r="1" cx="1" cy="1" />
+                        </svg>
+                        <p class="whitespace-nowrap">
+                          Last used {format_relative_time(device.last_used_at)}
+                        </p>
+                      <% end %>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    phx-click="delete_device"
+                    phx-value-device-id={device.id}
+                    disabled={length(@totp_devices) == 1}
+                    data-confirm={
+                      if length(@totp_devices) > 1,
+                        do: "Are you sure you want to remove this device?"
+                    }
+                    class={
+                          "rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
+                            if length(@totp_devices) == 1 do
+                              "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
+                            else
+                              "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                            end
+                        }
+                  >
+                    Remove
+                  </button>
+                </li>
+              <% end %>
+            </ul>
+
+            <div class="mt-6 flex">
+              <button
+                type="button"
+                phx-click="show_add_device_modal"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+              >
+                <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
+              </button>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      
+<!-- Recovery Codes Section -->
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            Recovery Codes
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            Single-use backup codes for account access if you lose your authenticator app.
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <div class="rounded-lg border border-gray-200 bg-white px-6 py-5 dark:border-white/10 dark:bg-white/5">
+            <div class="flex items-center justify-between">
+              <div class="flex-1">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+                  Available Recovery Codes
+                </h3>
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                  <%= if @unused_recovery_codes_count == 0 do %>
+                    <span class="text-red-600 dark:text-red-400 font-medium">
+                      No recovery codes available
+                    </span>
+                    - Generate new codes immediately
+                  <% else %>
+                    You have
+                    <span class="font-medium text-gray-900 dark:text-white">
+                      {@unused_recovery_codes_count}
+                    </span>
+                    unused recovery code{if @unused_recovery_codes_count != 1, do: "s"}
+                  <% end %>
+                </p>
+              </div>
+              <div class="ml-4">
+                <button
+                  type="button"
+                  phx-click="regenerate_recovery_codes"
+                  data-confirm="This will invalidate all existing unused recovery codes. Continue?"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+                >
+                  <.icon name="hero-arrow-path" class="-ml-0.5 h-5 w-5" /> Regenerate
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <%= if @unused_recovery_codes_count == 0 do %>
+            <div class="mt-4 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
+              <div class="flex">
+                <div class="flex-shrink-0">
+                  <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
+                </div>
+                <div class="ml-3">
+                  <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
+                    No Recovery Codes
+                  </h3>
+                  <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
+                    <p>
+                      You have no recovery codes available. If you lose access to your authenticator app,
+                      you won't be able to log in. Generate new codes now.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  
+<!-- Revoke All Sessions Confirmation Modal -->
+  <%= if @show_revoke_all_modal do %>
+    <div
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="revoke-all-modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          phx-click="cancel_revoke_all"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <div>
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
+              <.icon
+                name="hero-exclamation-triangle"
+                class="h-6 w-6 text-red-600 dark:text-red-400"
+              />
+            </div>
+            <div class="mt-3 text-center sm:mt-5">
+              <h3
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+                id="revoke-all-modal-title"
+              >
+                Revoke All Other Sessions?
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  This will log you out from all other browsers and devices. Your current session will remain active.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+            <button
+              type="button"
+              phx-click="confirm_revoke_all"
+              class="inline-flex w-full justify-center rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:col-start-2"
+            >
+              Revoke All
+            </button>
+            <button
+              type="button"
+              phx-click="cancel_revoke_all"
+              class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- API Token Creation Modal -->
+  <%= if @show_add_token_modal do %>
+    <div
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          phx-click="cancel_add_token"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <.form for={%{}} as={:token} phx-submit="create_api_token">
+            <div>
+              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                <.icon name="hero-code-bracket" class="h-6 w-6 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div class="mt-3 text-center sm:mt-5">
+                <h3
+                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+                  id="create-api-token-modal-title"
+                >
+                  Create API Token
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Give this token a name and select the organization it will have access to.
+                  </p>
+                </div>
+                <div class="mt-4 space-y-4">
+                  <input
+                    type="text"
+                    name="name"
+                    placeholder="e.g., Production API"
+                    required
+                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                  />
+                  <div class="grid grid-cols-1">
+                    <select
+                      name="organization_id"
+                      required
+                      class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
+                    >
+                      <%= for org <- @organizations do %>
+                        <option value={org.id}>{org.name}</option>
+                      <% end %>
+                    </select>
+                    <svg
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                      data-slot="icon"
+                      aria-hidden="true"
+                      class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
+                    >
+                      <path
+                        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+                        clip-rule="evenodd"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+              <button
+                type="submit"
+                class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
+              >
+                Create Token
+              </button>
+              <button
+                type="button"
+                phx-click="cancel_add_token"
+                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
+              >
+                Cancel
+              </button>
+            </div>
+          </.form>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- Token Created Success Modal -->
+  <%= if @show_token_modal && @created_token do %>
+    <div
+      id="token-success-modal"
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="token-success-modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          phx-click="close_token_modal"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <div>
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+              <.icon name="hero-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
+            </div>
+            <div class="mt-3 text-center sm:mt-5">
+              <h3
+                id="token-success-modal-title"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+              >
+                API Token Created
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  Copy this token now. You won't be able to see it again.
+                </p>
+              </div>
+              <div class="mt-4">
+                <div class="relative">
+                  <input
+                    type="text"
+                    readonly
+                    value={String.trim(@created_token)}
+                    class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
+                    id="api-token-input"
+                    onclick="this.select()"
+                  />
+                  <button
+                    type="button"
+                    phx-hook="CopyToClipboard"
+                    data-target="#api-token-input"
+                    id="copy-api-token"
+                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
+                  >
+                    <.icon name="hero-clipboard" class="h-3.5 w-3.5" />
+                    <span>Copy</span>
+                  </button>
+                </div>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  Click the token to select all, or use the Copy button
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="mt-5 sm:mt-6">
+            <button
+              type="button"
+              phx-click="close_token_modal"
+              class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- Add TOTP Device Modal -->
+  <%= if @show_add_device_modal do %>
+    <div
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="add-device-modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          phx-click="cancel_add_device"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <.form for={%{}} as={:device} phx-submit="create_device">
+            <div>
+              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
+                <.icon
+                  name="hero-device-phone-mobile"
+                  class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
+                />
+              </div>
+              <div class="mt-3 text-center sm:mt-5">
+                <h3
+                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+                  id="add-device-modal-title"
+                >
+                  Add Authenticator Device
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                    Give this device a name to help you identify it (e.g., "iPhone 15", "iPad Pro").
+                  </p>
+                </div>
+                <div class="mt-4">
+                  <input
+                    type="text"
+                    name="name"
+                    placeholder="e.g., iPhone 15"
+                    required
+                    autofocus
+                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+              <button
+                type="submit"
+                class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+              >
+                Continue
+              </button>
+              <button
+                type="button"
+                phx-click="cancel_add_device"
+                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
+              >
+                Cancel
+              </button>
+            </div>
+          </.form>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- Device QR Code Modal -->
+  <%= if @show_device_qr_modal && @new_device_qr_code do %>
+    <div
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="device-qr-modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          phx-click="close_device_qr_modal"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <div>
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
+              <.icon name="hero-qr-code" class="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
+            </div>
+            <div class="mt-3 text-center sm:mt-5">
+              <h3
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+                id="device-qr-modal-title"
+              >
+                Scan QR Code
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.).
+                </p>
+              </div>
+              
+<!-- QR Code -->
+              <div class="mt-6 flex justify-center">
+                <div class="inline-block rounded-lg bg-white p-4">
+                  <img src={@new_device_qr_code} alt="TOTP QR Code" class="h-48 w-48" />
+                </div>
+              </div>
+              
+<!-- Verification Code Input -->
+              <div class="mt-6">
+                <p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
+                  Enter the 6-digit code from your app to verify
+                </p>
+                <.form for={%{}} as={:verification} phx-submit="verify_new_device">
+                  <div class="flex justify-center gap-3">
+                    <input
+                      type="text"
+                      name="code"
+                      placeholder="000000"
+                      maxlength="6"
+                      pattern="[0-9]{6}"
+                      inputmode="numeric"
+                      autocomplete="one-time-code"
+                      required
+                      autofocus
+                      class="block w-32 rounded-md bg-white px-3 py-2 text-center text-lg font-mono text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+                    />
+                    <button
+                      type="submit"
+                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    >
+                      Verify
+                    </button>
+                  </div>
+                </.form>
+              </div>
+            </div>
+          </div>
+          <div class="mt-5 sm:mt-6">
+            <button
+              type="button"
+              phx-click="close_device_qr_modal"
+              class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- Recovery Codes Display Modal -->
+  <%= if @show_recovery_codes_modal && @generated_recovery_codes do %>
+    <div
+      class="fixed inset-0 z-50 overflow-y-auto"
+      aria-labelledby="recovery-codes-modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+        <div
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+          aria-hidden="true"
+        >
+        </div>
+        <span
+          class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-2xl sm:p-6 sm:align-middle">
+          <div>
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
+              <.icon name="hero-shield-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
+            </div>
+            <div class="mt-3 text-center sm:mt-5">
+              <h3
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+                id="recovery-codes-modal-title"
+              >
+                Recovery Codes Generated
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
+                  Save these codes in a secure location. Each code can only be used once.
+                </p>
+              </div>
+              
+<!-- Recovery Codes Grid -->
+              <div class="mt-6">
+                <div class="rounded-lg bg-gray-50 p-6 dark:bg-gray-900/50">
+                  <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
+                    <%= for code <- @generated_recovery_codes do %>
+                      <div class="rounded-md bg-white px-3 py-2 font-mono text-sm text-gray-900 shadow-xs dark:bg-gray-800 dark:text-white">
+                        {code}
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              </div>
+              
+<!-- Copy to Clipboard -->
+              <div class="mt-4 flex justify-center gap-3">
+                <button
+                  type="button"
+                  phx-hook="CopyToClipboard"
+                  data-target="#recovery-codes-text"
+                  id="copy-recovery-codes"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  <.icon name="hero-clipboard" class="-ml-0.5 h-5 w-5" /> Copy All
+                </button>
+              </div>
+              
+<!-- Hidden textarea for copy functionality -->
+              <textarea
+                id="recovery-codes-text"
+                class="sr-only"
+                readonly
+              >{Enum.join(@generated_recovery_codes, "\n")}</textarea>
+              
+<!-- Warning -->
+              <div class="mt-6 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
+                      Important
+                    </h3>
+                    <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
+                      <p>
+                        These codes won't be shown again. Store them securely (password manager, encrypted file, etc.).
+                        If you lose your authenticator and these codes, you won't be able to access your account.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-5 sm:mt-6">
+            <button
+              type="button"
+              phx-click="close_recovery_codes_modal"
+              class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              I've Saved These Codes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  
+<!-- Passkey Registration Modal -->
+  <div
+    id="passkey-modal"
+    class="hidden fixed inset-0 z-50 overflow-y-auto"
+    aria-labelledby="modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
+      <div
+        class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
+        aria-hidden="true"
+      >
+      </div>
+      <span
+        class="relative z-10 hidden sm:inline-block sm:h-screen sm:align-middle"
+        aria-hidden="true"
+      >
+        &#8203;
+      </span>
+
+      <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+            <.icon name="hero-key" class="h-6 w-6 text-blue-600 dark:text-blue-400" />
+          </div>
+          <div class="mt-3 text-center sm:mt-5">
+            <h3
+              class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
+              id="add-passkey-modal-title"
+            >
+              Add Passkey
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500 dark:text-gray-400">
+                Give this passkey a name to help you identify it later (e.g., "MacBook Touch ID", "iPhone").
+              </p>
+            </div>
+            <div class="mt-4">
+              <input
+                type="text"
+                id="passkey-name-input"
+                placeholder="e.g., MacBook Touch ID"
+                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-white/10 dark:bg-gray-800/50 dark:text-white sm:text-sm"
+              />
+            </div>
+            <div
+              id="passkey-error"
+              class="mt-3 hidden rounded-lg bg-red-50 p-3 dark:bg-red-900/20"
+            >
+              <p class="text-sm text-red-800 dark:text-red-200"></p>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
+          <button
+            type="button"
+            id="confirm-add-passkey"
+            class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
+          >
+            Continue
+          </button>
+          <button
+            type="button"
+            id="cancel-add-passkey"
+            class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</Layouts.authenticated>
diff --git a/lib/towerops_web/live/user_settings_live/api_token_manager.ex b/lib/towerops_web/live/user_settings_live/api_token_manager.ex
new file mode 100644
index 00000000..9e50d6fd
--- /dev/null
+++ b/lib/towerops_web/live/user_settings_live/api_token_manager.ex
@@ -0,0 +1,81 @@
+defmodule ToweropsWeb.UserSettingsLive.ApiTokenManager do
+  @moduledoc """
+  Handles API token management for user settings.
+  """
+
+  alias Towerops.ApiTokens
+
+  @doc """
+  Creates a new API token for the user.
+  """
+  def create_api_token(socket, params) do
+    user = socket.assigns.current_scope.user
+
+    # Handle both nested token params and flat params
+    {name, org_id} =
+      case params do
+        %{"token" => %{"name" => n, "organization_id" => o}} -> {n, o}
+        %{"name" => n, "organization_id" => o} -> {n, o}
+        _ -> {nil, nil}
+      end
+
+    if name && org_id do
+      case ApiTokens.create_api_token(%{
+             name: name,
+             organization_id: org_id,
+             user_id: user.id
+           }) do
+        {:ok, {_token, raw_token}} ->
+          socket
+          |> Phoenix.Component.assign(:show_add_token_modal, false)
+          |> Phoenix.Component.assign(:created_token, raw_token)
+          |> Phoenix.Component.assign(:show_token_modal, true)
+          |> assign_api_tokens()
+
+        {:error, _changeset} ->
+          Phoenix.LiveView.put_flash(socket, :error, "Failed to create API token.")
+      end
+    else
+      Phoenix.LiveView.put_flash(socket, :error, "Name and organization are required.")
+    end
+  end
+
+  @doc """
+  Closes the token display modal.
+  """
+  def close_token_modal(socket) do
+    socket
+    |> Phoenix.Component.assign(:show_token_modal, false)
+    |> Phoenix.Component.assign(:created_token, nil)
+  end
+
+  @doc """
+  Deletes an API token.
+  """
+  def delete_api_token(socket, token_id) do
+    token = ApiTokens.get_api_token!(token_id)
+    user = socket.assigns.current_scope.user
+
+    if token.user_id == user.id do
+      case ApiTokens.delete_api_token(token) do
+        {:ok, _} ->
+          socket
+          |> Phoenix.LiveView.put_flash(:info, "API token deleted successfully.")
+          |> assign_api_tokens()
+
+        {:error, _} ->
+          Phoenix.LiveView.put_flash(socket, :error, "Failed to delete API token.")
+      end
+    else
+      Phoenix.LiveView.put_flash(socket, :error, "You can only delete your own tokens.")
+    end
+  end
+
+  @doc """
+  Assigns API tokens to socket.
+  """
+  def assign_api_tokens(socket) do
+    user = socket.assigns.current_scope.user
+    Phoenix.Component.assign(socket, :api_tokens, ApiTokens.list_user_api_tokens(user.id))
+  end
+end
diff --git a/lib/towerops_web/live/user_settings_live/helpers.ex b/lib/towerops_web/live/user_settings_live/helpers.ex
new file mode 100644
index 00000000..7d59c083
--- /dev/null
+++ b/lib/towerops_web/live/user_settings_live/helpers.ex
@@ -0,0 +1,115 @@
+defmodule ToweropsWeb.UserSettingsLive.Helpers do
+  @moduledoc """
+  Helper functions for formatting and displaying user settings data.
+  """
+
+  @doc """
+  Checks if a session matches the current token ID.
+  """
+  def current_session?(session, current_token_id) do
+    session.user_token_id == current_token_id
+  end
+
+  @doc """
+  Formats a UTC datetime in the user's timezone.
+  """
+  def format_timestamp_in_timezone(datetime, timezone) do
+    case DateTime.shift_zone(datetime, timezone) do
+      {:ok, shifted} ->
+        Calendar.strftime(shifted, "%b %d, %Y %I:%M %p %Z")
+
+      {:error, _} ->
+        # Fallback to UTC if timezone conversion fails
+        Calendar.strftime(datetime, "%b %d, %Y %I:%M %p UTC")
+    end
+  end
+
+  @doc """
+  Formats browser information from a session for display.
+  """
+  def format_browser_info(session) do
+    case {session.browser_name, session.browser_version, session.os_name} do
+      {nil, _, _} -> session.device_name || "Unknown Browser"
+      {browser, nil, nil} -> browser
+      {browser, version, nil} -> "#{browser} #{version}"
+      {browser, nil, os} -> "#{browser} on #{os}"
+      {browser, version, os} -> "#{browser} #{version} on #{os}"
+    end
+  end
+
+  @doc """
+  Formats location information from GeoIP data.
+  """
+  def format_location(record) do
+    case {record.city_name, record.subdivision_1_name, record.country_name} do
+      {nil, nil, nil} ->
+        "Unknown Location"
+
+      {city, state, country} when not is_nil(city) and not is_nil(state) and not is_nil(country) ->
+        "#{city}, #{state}, #{country}"
+
+      {city, nil, country} when not is_nil(city) and not is_nil(country) ->
+        "#{city}, #{country}"
+
+      {nil, nil, country} when not is_nil(country) ->
+        country
+
+      _ ->
+        "Unknown Location"
+    end
+  end
+
+  @doc """
+  Formats a datetime as a relative time string (e.g., "5 minutes ago").
+  """
+  def format_relative_time(datetime) do
+    now = DateTime.utc_now()
+    diff = DateTime.diff(now, datetime, :second)
+
+    cond do
+      diff < 60 -> "Just now"
+      diff < 3600 -> "#{div(diff, 60)} minutes ago"
+      diff < 86_400 -> "#{div(diff, 3600)} hours ago"
+      diff < 604_800 -> "#{div(diff, 86_400)} days ago"
+      true -> Calendar.strftime(datetime, "%b %d, %Y")
+    end
+  end
+
+  @doc """
+  Returns icon name and display label for a login method.
+  """
+  def login_method_info(method) do
+    case method do
+      "password" -> {"hero-lock-closed", "Password"}
+      "magic_link" -> {"hero-envelope", "Magic Link"}
+      "webauthn" -> {"hero-key", "Passkey"}
+      "mobile_qr" -> {"hero-device-phone-mobile", "Mobile QR"}
+      _ -> {"hero-question-mark-circle", method}
+    end
+  end
+
+  @doc """
+  Generates pagination range with ellipsis for large page counts.
+
+  Shows: [1] ... [4] [5] [6] ... [20] when on page 5 of 20
+  """
+  def pagination_range(current_page, total_pages) do
+    cond do
+      total_pages <= 7 ->
+        # Show all pages if 7 or fewer
+        Enum.to_list(1..total_pages)
+
+      current_page <= 4 ->
+        # Near the start
+        [1, 2, 3, 4, 5, :ellipsis, total_pages]
+
+      current_page >= total_pages - 3 ->
+        # Near the end
+        [1, :ellipsis, total_pages - 4, total_pages - 3, total_pages - 2, total_pages - 1, total_pages]
+
+      true ->
+        # In the middle
+        [1, :ellipsis, current_page - 1, current_page, current_page + 1, :ellipsis, total_pages]
+    end
+  end
+end
diff --git a/lib/towerops_web/live/user_settings_live/session_manager.ex b/lib/towerops_web/live/user_settings_live/session_manager.ex
new file mode 100644
index 00000000..8f752ddd
--- /dev/null
+++ b/lib/towerops_web/live/user_settings_live/session_manager.ex
@@ -0,0 +1,121 @@
+defmodule ToweropsWeb.UserSettingsLive.SessionManager do
+  @moduledoc """
+  Handles browser session and mobile device session management.
+  """
+
+  alias Towerops.Accounts
+  alias Towerops.MobileSessions
+
+  @doc """
+  Revokes a mobile device session.
+  """
+  def revoke_mobile_device(socket, session_id) do
+    case MobileSessions.revoke_session(session_id) do
+      {:ok, _} ->
+        socket
+        |> Phoenix.LiveView.put_flash(:info, "Mobile device removed successfully.")
+        |> assign_mobile_sessions()
+
+      {:error, _} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to remove mobile device.")
+    end
+  end
+
+  @doc """
+  Toggles alert preferences for a mobile device.
+  """
+  def toggle_device_alerts(socket, session_id, enabled) do
+    enabled_bool = enabled == "true"
+
+    case MobileSessions.update_alert_preferences(session_id, %{alerts_enabled: enabled_bool}) do
+      {:ok, _} ->
+        message = if enabled_bool, do: "Alerts enabled for device", else: "Alerts disabled for device"
+
+        socket
+        |> Phoenix.LiveView.put_flash(:info, message)
+        |> assign_mobile_sessions()
+
+      {:error, _} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to update alert preferences.")
+    end
+  end
+
+  @doc """
+  Revokes a browser session.
+  """
+  def revoke_session(socket, session_id) do
+    user = socket.assigns.current_scope.user
+    current_token_id = get_current_token_id(socket)
+
+    case Accounts.revoke_browser_session(session_id, user.id, current_token_id) do
+      {:ok, _} ->
+        socket
+        |> Phoenix.LiveView.put_flash(:info, "Session revoked successfully.")
+        |> assign_browser_sessions()
+
+      {:error, :self_revoke} ->
+        Phoenix.LiveView.put_flash(socket, :error, "You cannot revoke your current session.")
+
+      {:error, :not_found} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Session not found.")
+
+      {:error, _} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to revoke session.")
+    end
+  end
+
+  @doc """
+  Shows the revoke all sessions confirmation modal.
+  """
+  def show_revoke_all_modal(socket) do
+    Phoenix.Component.assign(socket, :show_revoke_all_modal, true)
+  end
+
+  @doc """
+  Cancels revoking all sessions.
+  """
+  def cancel_revoke_all(socket) do
+    Phoenix.Component.assign(socket, :show_revoke_all_modal, false)
+  end
+
+  @doc """
+  Confirms and revokes all other sessions except the current one.
+  """
+  def confirm_revoke_all(socket) do
+    user = socket.assigns.current_scope.user
+    current_token_id = get_current_token_id(socket)
+
+    {count, _} = Accounts.revoke_all_other_sessions(user.id, current_token_id)
+
+    socket
+    |> Phoenix.LiveView.put_flash(:info, "Revoked #{count} other session(s) successfully.")
+    |> Phoenix.Component.assign(:show_revoke_all_modal, false)
+    |> assign_browser_sessions()
+  end
+
+  @doc """
+  Assigns mobile sessions to socket.
+  """
+  def assign_mobile_sessions(socket) do
+    user = socket.assigns.current_scope.user
+    Phoenix.Component.assign(socket, :mobile_sessions, MobileSessions.list_user_sessions(user.id))
+  end
+
+  @doc """
+  Assigns browser sessions to socket.
+  """
+  def assign_browser_sessions(socket) do
+    user = socket.assigns.current_scope.user
+    sessions = Accounts.list_active_browser_sessions(user.id)
+    Phoenix.Component.assign(socket, :browser_sessions, sessions)
+  end
+
+  @doc """
+  Gets the current token ID from socket assigns.
+  """
+  def get_current_token_id(%{assigns: %{current_token: token}}) when is_binary(token) do
+    Accounts.get_user_token_id_by_value(token)
+  end
+
+  def get_current_token_id(_), do: nil
+end
diff --git a/lib/towerops_web/live/user_settings_live/totp_manager.ex b/lib/towerops_web/live/user_settings_live/totp_manager.ex
new file mode 100644
index 00000000..7878a470
--- /dev/null
+++ b/lib/towerops_web/live/user_settings_live/totp_manager.ex
@@ -0,0 +1,158 @@
+defmodule ToweropsWeb.UserSettingsLive.TotpManager do
+  @moduledoc """
+  Handles TOTP (Time-based One-Time Password) device and recovery code management.
+  """
+
+  alias Towerops.Accounts
+  alias Towerops.Accounts.UserTotpDevice
+
+  @doc """
+  Shows the modal for adding a new TOTP device.
+  """
+  def show_add_device_modal(socket) do
+    Phoenix.Component.assign(socket, :show_add_device_modal, true)
+  end
+
+  @doc """
+  Cancels adding a new TOTP device.
+  """
+  def cancel_add_device(socket) do
+    Phoenix.Component.assign(socket, :show_add_device_modal, false)
+  end
+
+  @doc """
+  Creates a new TOTP device and displays the QR code.
+  """
+  def create_device(socket, name) do
+    user = socket.assigns.current_scope.user
+
+    case Accounts.create_totp_device(user.id, name) do
+      {:ok, device, secret} ->
+        qr_code = Accounts.generate_totp_qr_code(user, secret)
+
+        socket
+        |> Phoenix.Component.assign(:show_add_device_modal, false)
+        |> Phoenix.Component.assign(:show_device_qr_modal, true)
+        |> Phoenix.Component.assign(:new_device_id, device.id)
+        |> Phoenix.Component.assign(:new_device_secret, secret)
+        |> Phoenix.Component.assign(:new_device_qr_code, qr_code)
+
+      {:error, _changeset} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to create device.")
+    end
+  end
+
+  @doc """
+  Verifies a new TOTP device with a code from the authenticator app.
+  """
+  def verify_new_device(socket, code) do
+    secret = socket.assigns.new_device_secret
+    device_id = socket.assigns.new_device_id
+
+    if Accounts.verify_totp(secret, code) do
+      # Device already created, just mark as verified by touching it
+      device = Towerops.Repo.get!(UserTotpDevice, device_id)
+
+      device
+      |> UserTotpDevice.touch_changeset()
+      |> Towerops.Repo.update!()
+
+      socket
+      |> Phoenix.LiveView.put_flash(:info, "Device added successfully!")
+      |> Phoenix.Component.assign(:show_device_qr_modal, false)
+      |> Phoenix.Component.assign(:new_device_id, nil)
+      |> Phoenix.Component.assign(:new_device_secret, nil)
+      |> Phoenix.Component.assign(:new_device_qr_code, nil)
+      |> assign_totp_devices()
+    else
+      Phoenix.LiveView.put_flash(socket, :error, "Invalid code. Please try again.")
+    end
+  end
+
+  @doc """
+  Closes the QR code modal and deletes the unverified device.
+  """
+  def close_device_qr_modal(socket) do
+    # Delete the unverified device if user cancels
+    if device_id = socket.assigns.new_device_id do
+      user = socket.assigns.current_scope.user
+      Accounts.delete_totp_device(device_id, user.id)
+    end
+
+    socket
+    |> Phoenix.Component.assign(:show_device_qr_modal, false)
+    |> Phoenix.Component.assign(:new_device_id, nil)
+    |> Phoenix.Component.assign(:new_device_secret, nil)
+    |> Phoenix.Component.assign(:new_device_qr_code, nil)
+    |> assign_totp_devices()
+  end
+
+  @doc """
+  Deletes a TOTP device.
+  """
+  def delete_device(socket, device_id) do
+    user = socket.assigns.current_scope.user
+
+    case Accounts.delete_totp_device(device_id, user.id) do
+      {:ok, _} ->
+        socket
+        |> Phoenix.LiveView.put_flash(:info, "Device removed successfully.")
+        |> assign_totp_devices()
+
+      {:error, :last_device} ->
+        Phoenix.LiveView.put_flash(
+          socket,
+          :error,
+          "Cannot remove last device. You must have at least one."
+        )
+
+      {:error, _} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to remove device.")
+    end
+  end
+
+  @doc """
+  Regenerates recovery codes for the user.
+  """
+  def regenerate_recovery_codes(socket) do
+    user = socket.assigns.current_scope.user
+
+    case Accounts.generate_recovery_codes(user.id) do
+      {:ok, codes} ->
+        socket
+        |> Phoenix.Component.assign(:show_recovery_codes_modal, true)
+        |> Phoenix.Component.assign(:generated_recovery_codes, codes)
+        |> assign_recovery_codes_count()
+
+      {:error, _} ->
+        Phoenix.LiveView.put_flash(socket, :error, "Failed to generate recovery codes.")
+    end
+  end
+
+  @doc """
+  Closes the recovery codes modal.
+  """
+  def close_recovery_codes_modal(socket) do
+    socket
+    |> Phoenix.Component.assign(:show_recovery_codes_modal, false)
+    |> Phoenix.Component.assign(:generated_recovery_codes, nil)
+  end
+
+  @doc """
+  Assigns TOTP devices to socket.
+  """
+  def assign_totp_devices(socket) do
+    user = socket.assigns.current_scope.user
+    devices = Accounts.list_user_totp_devices(user.id)
+    Phoenix.Component.assign(socket, :totp_devices, devices)
+  end
+
+  @doc """
+  Assigns recovery codes count to socket.
+  """
+  def assign_recovery_codes_count(socket) do
+    user = socket.assigns.current_scope.user
+    count = Accounts.count_unused_recovery_codes(user.id)
+    Phoenix.Component.assign(socket, :unused_recovery_codes_count, count)
+  end
+end