diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 147c667..08f4593 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -21,7 +21,7 @@ jobs:
       - name: configure aws credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
-          role-to-assume: arn:aws:iam::654654236858:role/GithubActions
+          role-to-assume: ${{ secrets.ACTIONS_ROLE_ARN }}
           role-session-name: GitHub_to_AWS_via_FederatedOIDC
           aws-region: us-east-2
 
@@ -31,10 +31,14 @@ jobs:
 
       - name: Build and Push Docker image
         env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry}}
-          REPOSITORY: hch
-          IMAGE_TAG: ${{ github.sha}}
-          DATABASE_URL: 'file:./dev.db'
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.REPOSITORY }}
+          IMAGE_TAG: ${{ github.sha }}
+          DATABASE_URL: "file:./dev.db"
+          CLUSTER_NAME: ${{ secrets.CLUSTER_NAME }}
+          SERVICE_NAME: ${{ vars.REPOSITORY }}-prod-service
         run: |
           docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
           docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:prod .
+          aws ecs update-service --cluster $CLUSTER_NAME --service $SERVICE_NAME --force-new-deployment --output text --query "service.serviceName" >/dev/null
+          echo "The container will update now"
diff --git a/.github/workflows/stage.yml b/.github/workflows/stage.yml
index ddd08ac..72a7398 100644
--- a/.github/workflows/stage.yml
+++ b/.github/workflows/stage.yml
@@ -21,7 +21,7 @@ jobs:
       - name: configure aws credentials
         uses: aws-actions/configure-aws-credentials@v4
         with:
-          role-to-assume: arn:aws:iam::654654236858:role/GithubActions
+          role-to-assume: ${{ secrets.ACTIONS_ROLE_ARN }}
           role-session-name: GitHub_to_AWS_via_FederatedOIDC
           aws-region: us-east-2
 
@@ -31,10 +31,14 @@ jobs:
 
       - name: Build and Push Docker image
         env:
-          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry}}
-          REPOSITORY: hch
-          IMAGE_TAG: ${{ github.sha}}
-          DATABASE_URL: 'file:./dev.db'
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          REPOSITORY: ${{ vars.REPOSITORY }}
+          IMAGE_TAG: ${{ github.sha }}
+          DATABASE_URL: "file:./dev.db"
+          CLUSTER_NAME: ${{ secrets.CLUSTER_NAME }}
+          SERVICE_NAME: ${{ vars.REPOSITORY }}-stage-service
         run: |
           docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:$IMAGE_TAG .
           docker build --output type=image,push=true --platform linux/arm64 -t $ECR_REGISTRY/$REPOSITORY:stage .
+          aws ecs update-service --cluster $CLUSTER_NAME --service $SERVICE_NAME --force-new-deployment --output text --query "service.serviceName" >/dev/null
+          echo "The container will update now"
diff --git a/app/pages/calendar.vue b/app/pages/calendar.vue
index 2752169..85108a3 100644
--- a/app/pages/calendar.vue
+++ b/app/pages/calendar.vue
@@ -692,14 +692,30 @@
           Session name will be auto-generated as <strong>Firstname_Lastname_##</strong>.
         </p>
 
-        <UTextarea v-model="form.description" placeholder="Description" />
+        <div>
+          <label class="mb-2 block text-sm font-medium" for="create-description">Description</label>
+          <UTextarea
+            id="create-description"
+            v-model="form.description"
+            placeholder="Optional notes for this session"
+          />
+        </div>
 
         <div class="grid grid-cols-3 gap-4">
-          <UInput v-model="form.date" type="date" />
+          <div>
+            <label class="mb-2 block text-sm font-medium" for="create-date">Date</label>
+            <UInput id="create-date" v-model="form.date" type="date" />
+          </div>
 
-          <UInput v-model="form.startTime" type="time" />
+          <div>
+            <label class="mb-2 block text-sm font-medium" for="create-start-time">Start Time</label>
+            <UInput id="create-start-time" v-model="form.startTime" type="time" />
+          </div>
 
-          <UInput v-model="form.endTime" type="time" />
+          <div>
+            <label class="mb-2 block text-sm font-medium" for="create-end-time">End Time</label>
+            <UInput id="create-end-time" v-model="form.endTime" type="time" />
+          </div>
         </div>
         <p v-if="createTimeRangeError" class="text-sm text-red-500">
           {{ createTimeRangeError }}
diff --git a/app/pages/clients/index.vue b/app/pages/clients/index.vue
index 6f099bf..00afe37 100644
--- a/app/pages/clients/index.vue
+++ b/app/pages/clients/index.vue
@@ -1,348 +1,348 @@
-<script setup lang="ts">
-  import type { TableColumn, TableRow } from '@nuxt/ui'
-  import { capitalizeName } from '~/utils/name'
-
-  definePageMeta({ middleware: 'clients-admin' })
-
-  type ClientStatus = 'Prospective' | 'Waitlist' | 'Active' | 'Archived'
-
-  const FORM_LABELS: Record<string, string> = {
-    application: 'Application',
-    physicianStatement: 'Physician Statement (PDF Upload)',
-    releaseOfInformationAuthorization: 'ROI Authorization (PDF Upload)',
-    ace: 'ACE',
-    gad: 'GAD-7',
-    phq: 'PHQ-9',
-    pcl: 'PCL-5',
-  }
-
-  type Client = {
-    id: string
-    fname: string
-    lname: string
-    name: string
-    email: string
-    status: ClientStatus
-    allFormsComplete: boolean
-    therapyWeek: number | null
-    missedSessions: number
-    incompleteForms: string[]
-  }
-
-  const ALL_STATUS = '__all__'
-  const statusFilter = ref<string>(ALL_STATUS)
-
-  type ClientTabCounts = {
-    __all__: number
-    Prospective: number
-    Waitlist: number
-    Active: number
-    Archived: number
-  }
-
-  const { data: clientCounts, refresh: refreshCounts } = await useFetch<ClientTabCounts>(
-    '/api/clients/counts',
-    {
-      getCachedData: () => undefined,
+<script setup lang="ts">
+    import type { TableColumn, TableRow } from '@nuxt/ui'
+    import { capitalizeName } from '~/utils/name'
+
+    definePageMeta({ middleware: 'clients-admin' })
+
+    type ClientStatus = 'Prospective' | 'Waitlist' | 'Active' | 'Archived'
+
+    const FORM_LABELS: Record<string, string> = {
+      application: 'Application',
+      physicianStatement: 'Physician Statement (PDF Upload)',
+      releaseOfInformationAuthorization: 'ROI Authorization (PDF Upload)',
+      ace: 'ACE',
+      gad: 'GAD-7',
+      phq: 'PHQ-9',
+      pcl: 'PCL-5',
     }
-  )
-
-  const statusTabs = computed(() => {
-    const c = clientCounts.value
-    const n = (key: keyof ClientTabCounts) => c?.[key] ?? 0
-    return [
-      { value: ALL_STATUS, label: 'All', count: n('__all__') },
-      { value: 'Prospective', label: 'Prospective', count: n('Prospective') },
-      { value: 'Waitlist', label: 'Waitlist', count: n('Waitlist') },
-      { value: 'Active', label: 'Active', count: n('Active') },
-      { value: 'Archived', label: 'Archived', count: n('Archived') },
-    ] as const
-  })
-
-  const queryParams = computed(() => {
-    const params: Record<string, string> = {}
-    if (statusFilter.value && statusFilter.value !== ALL_STATUS) params.status = statusFilter.value
-    return params
-  })
-
-  const {
-    data: clients,
-    pending,
-    error,
-    refresh: refreshClients,
-  } = await useFetch<Client[]>('/api/clients', {
-    query: queryParams,
-    watch: [queryParams],
-    getCachedData: () => undefined,
-  })
-
-  type PendingNoteRequest = {
-    id: string
-    clientUserId: string
-    approvalWindowDays: number
-    approvalExpiresAt: string
-  }
-
-  const { data: pendingNoteRequests } = await useFetch<PendingNoteRequest[]>(
-    '/api/session-notes-requests',
-    {
-      getCachedData: () => undefined,
+
+    type Client = {
+      id: string
+      fname: string
+      lname: string
+      name: string
+      email: string
+      status: ClientStatus
+      allFormsComplete: boolean
+      therapyWeek: number | null
+      missedSessions: number
+      incompleteForms: string[]
     }
-  )
-  const pendingNoteRequestCount = computed(() => pendingNoteRequests.value?.length ?? 0)
-
-  /** Per-client most-urgent pending records request (earliest expiry wins). */
-  const pendingByClient = computed(() => {
-    const map = new Map<string, PendingNoteRequest>()
-    for (const r of pendingNoteRequests.value ?? []) {
-      const existing = map.get(r.clientUserId)
-      if (!existing || new Date(r.approvalExpiresAt) < new Date(existing.approvalExpiresAt)) {
-        map.set(r.clientUserId, r)
-      }
+
+    const ALL_STATUS = '__all__'
+    const statusFilter = ref<string>(ALL_STATUS)
+
+    type ClientTabCounts = {
+      __all__: number
+      Prospective: number
+      Waitlist: number
+      Active: number
+      Archived: number
     }
-    return map
-  })
-
-  const showRecordsRequestColumn = computed(() => (pendingNoteRequests.value?.length ?? 0) > 0)
-
-  /** Ticking "now" so the Time-Left countdowns update live. */
-  const nowMs = ref(Date.now())
-  let recordsRequestTickTimer: ReturnType<typeof setInterval> | null = null
-  onMounted(() => {
-    recordsRequestTickTimer = setInterval(() => {
-      nowMs.value = Date.now()
-    }, 1000)
-  })
-  onBeforeUnmount(() => {
-    if (recordsRequestTickTimer) clearInterval(recordsRequestTickTimer)
-  })
-
-  function recordsMsLeft(r: PendingNoteRequest): number {
-    return new Date(r.approvalExpiresAt).getTime() - nowMs.value
-  }
-
-  /** e.g. "12d 03:47:12" or "Expired" */
-  function formatRecordsCountdown(r: PendingNoteRequest): string {
-    const ms = recordsMsLeft(r)
-    if (ms <= 0) return 'Expired'
-    const totalSec = Math.floor(ms / 1000)
-    const days = Math.floor(totalSec / 86400)
-    const hours = Math.floor((totalSec % 86400) / 3600)
-    const mins = Math.floor((totalSec % 3600) / 60)
-    const secs = totalSec % 60
-    const pad = (n: number) => String(n).padStart(2, '0')
-    return `${days}d ${pad(hours)}:${pad(mins)}:${pad(secs)}`
-  }
-
-  function recordsCountdownColor(r: PendingNoteRequest): 'success' | 'warning' | 'error' {
-    const ms = recordsMsLeft(r)
-    if (ms <= 0) return 'error'
-    const dayMs = 24 * 60 * 60 * 1000
-    if (ms < 3 * dayMs) return 'warning'
-    return 'success'
-  }
-
-  async function refreshClientsAndCounts() {
-    await Promise.all([refreshClients(), refreshCounts()])
-  }
-
-  function displayName(c: Client) {
-    const raw = c.lname ? `${c.fname} ${c.lname}` : c.fname || c.name || ''
-    const trimmed = raw.trim()
-    if (!trimmed) {
-      return c.status === 'Prospective' ? 'New inquiry' : 'Unknown name'
+
+    const { data: clientCounts, refresh: refreshCounts } = await useFetch<ClientTabCounts>(
+      '/api/clients/counts',
+      {
+        getCachedData: () => undefined,
+      }
+    )
+
+    const statusTabs = computed(() => {
+      const c = clientCounts.value
+      const n = (key: keyof ClientTabCounts) => c?.[key] ?? 0
+      return [
+        { value: ALL_STATUS, label: 'All', count: n('__all__') },
+        { value: 'Prospective', label: 'Prospective', count: n('Prospective') },
+        { value: 'Waitlist', label: 'Waitlist', count: n('Waitlist') },
+        { value: 'Active', label: 'Active', count: n('Active') },
+        { value: 'Archived', label: 'Archived', count: n('Archived') },
+      ] as const
+    })
+
+    const queryParams = computed(() => {
+      const params: Record<string, string> = {}
+      if (statusFilter.value && statusFilter.value !== ALL_STATUS) params.status = statusFilter.value
+      return params
+    })
+
+    const {
+      data: clients,
+      pending,
+      error,
+      refresh: refreshClients,
+    } = await useFetch<Client[]>('/api/clients', {
+      query: queryParams,
+      watch: [queryParams],
+      getCachedData: () => undefined,
+    })
+
+    type PendingNoteRequest = {
+      id: string
+      clientUserId: string
+      approvalWindowDays: number
+      approvalExpiresAt: string
     }
-    return capitalizeName(trimmed)
-  }
-
-  function isPlaceholderDisplayName(c: Client) {
-    const raw = c.lname ? `${c.fname} ${c.lname}` : c.fname || c.name || ''
-    return raw.trim().length === 0
-  }
-
-  function statusLabel(status: ClientStatus): string {
-    const labels: Record<ClientStatus, string> = {
-      Prospective: 'Prospective',
-      Waitlist: 'Waitlist',
-      Active: 'Active',
-      Archived: 'Archived',
+
+    const { data: pendingNoteRequests } = await useFetch<PendingNoteRequest[]>(
+      '/api/session-notes-requests',
+      {
+        getCachedData: () => undefined,
+      }
+    )
+    const pendingNoteRequestCount = computed(() => pendingNoteRequests.value?.length ?? 0)
+
+    /** Per-client most-urgent pending records request (earliest expiry wins). */
+    const pendingByClient = computed(() => {
+      const map = new Map<string, PendingNoteRequest>()
+      for (const r of pendingNoteRequests.value ?? []) {
+        const existing = map.get(r.clientUserId)
+        if (!existing || new Date(r.approvalExpiresAt) < new Date(existing.approvalExpiresAt)) {
+          map.set(r.clientUserId, r)
+        }
+      }
+      return map
+    })
+
+    const showRecordsRequestColumn = computed(() => (pendingNoteRequests.value?.length ?? 0) > 0)
+
+    /** Ticking "now" so the Time-Left countdowns update live. */
+    const nowMs = ref(Date.now())
+    let recordsRequestTickTimer: ReturnType<typeof setInterval> | null = null
+    onMounted(() => {
+      recordsRequestTickTimer = setInterval(() => {
+        nowMs.value = Date.now()
+      }, 1000)
+    })
+    onBeforeUnmount(() => {
+      if (recordsRequestTickTimer) clearInterval(recordsRequestTickTimer)
+    })
+
+    function recordsMsLeft(r: PendingNoteRequest): number {
+      return new Date(r.approvalExpiresAt).getTime() - nowMs.value
     }
-    return labels[status]
-  }
-
-  function statusColor(status: ClientStatus): 'warning' | 'primary' | 'success' | 'neutral' {
-    const colors: Record<ClientStatus, 'warning' | 'primary' | 'success' | 'neutral'> = {
-      Prospective: 'warning',
-      Waitlist: 'primary',
-      Active: 'success',
-      Archived: 'neutral',
+
+    /** e.g. "12d 03:47:12" or "Expired" */
+    function formatRecordsCountdown(r: PendingNoteRequest): string {
+      const ms = recordsMsLeft(r)
+      if (ms <= 0) return 'Expired'
+      const totalSec = Math.floor(ms / 1000)
+      const days = Math.floor(totalSec / 86400)
+      const hours = Math.floor((totalSec % 86400) / 3600)
+      const mins = Math.floor((totalSec % 3600) / 60)
+      const secs = totalSec % 60
+      const pad = (n: number) => String(n).padStart(2, '0')
+      return `${days}d ${pad(hours)}:${pad(mins)}:${pad(secs)}`
     }
-    return colors[status]
-  }
-
-  function statusVariant(status: ClientStatus): 'soft' | 'outline' {
-    return status === 'Archived' ? 'outline' : 'soft'
-  }
-
-  function statusIcon(status: ClientStatus): string {
-    const icons: Record<ClientStatus, string> = {
-      Prospective: 'i-heroicons-clock',
-      Waitlist: 'i-heroicons-queue-list',
-      Active: 'i-heroicons-check-circle',
-      Archived: 'i-heroicons-archive-box',
+
+    function recordsCountdownColor(r: PendingNoteRequest): 'success' | 'warning' | 'error' {
+      const ms = recordsMsLeft(r)
+      if (ms <= 0) return 'error'
+      const dayMs = 24 * 60 * 60 * 1000
+      if (ms < 3 * dayMs) return 'warning'
+      return 'success'
     }
-    return icons[status]
-  }
 
-  /** Muted warning text — easier on dark UIs than default amber-400 */
-  const WARNING_TEXT_MUTED = 'text-amber-700 dark:text-amber-500/75'
+    async function refreshClientsAndCounts() {
+      await Promise.all([refreshClients(), refreshCounts()])
+    }
 
-  /** Prospective badge: softer than UBadge `warning` on dark backgrounds */
-  const PROSPECTIVE_BADGE_CLASS =
-    '!bg-amber-500/10 !text-amber-900 !ring-1 !ring-inset !ring-amber-600/15 dark:!bg-amber-950/40 dark:!text-amber-400/85 dark:!ring-amber-500/25 dark:[&_svg]:text-amber-400/80'
+    function displayName(c: Client) {
+      const raw = c.lname ? `${c.fname} ${c.lname}` : c.fname || c.name || ''
+      const trimmed = raw.trim()
+      if (!trimmed) {
+        return c.status === 'Prospective' ? 'New inquiry' : 'Unknown name'
+      }
+      return capitalizeName(trimmed)
+    }
 
-  function statusHint(c: Client): string {
-    if (c.status === 'Prospective' && !c.allFormsComplete) {
-      return 'To move to waitlist, the client needs to complete all forms'
+    function isPlaceholderDisplayName(c: Client) {
+      const raw = c.lname ? `${c.fname} ${c.lname}` : c.fname || c.name || ''
+      return raw.trim().length === 0
     }
-    return ''
-  }
 
-  const showFormsRemainingColumn = computed(
-    () => clients.value?.some((c) => c.status === 'Prospective' || c.status === 'Waitlist') ?? false
-  )
+    function statusLabel(status: ClientStatus): string {
+      const labels: Record<ClientStatus, string> = {
+        Prospective: 'Prospective',
+        Waitlist: 'Waitlist',
+        Active: 'Active',
+        Archived: 'Archived',
+      }
+      return labels[status]
+    }
 
-  const showWeekNoColumn = computed(
-    () => clients.value?.some((c) => c.status === 'Active') ?? false
-  )
+    function statusColor(status: ClientStatus): 'warning' | 'primary' | 'success' | 'neutral' {
+      const colors: Record<ClientStatus, 'warning' | 'primary' | 'success' | 'neutral'> = {
+        Prospective: 'warning',
+        Waitlist: 'primary',
+        Active: 'success',
+        Archived: 'neutral',
+      }
+      return colors[status]
+    }
 
-  function formatIncompleteForms(c: Client): string {
-    if (c.status !== 'Prospective' && c.status !== 'Waitlist') return ''
-    if (!c.incompleteForms?.length || c.allFormsComplete) {
-      return 'User has completed all forms'
+    function statusVariant(status: ClientStatus): 'soft' | 'outline' {
+      return status === 'Archived' ? 'outline' : 'soft'
     }
-    const count = c.incompleteForms.length
-    const names = c.incompleteForms.map((k) => FORM_LABELS[k] ?? k).join(', ')
-    return `${count} remaining: ${names}`
-  }
-
-  const toast = useToast()
-  const updatingId = ref<string | null>(null)
-
-  type StatusTransition = { from: ClientStatus; to: ClientStatus; label: string }
-
-  const STATUS_TRANSITIONS: StatusTransition[] = [
-    { from: 'Prospective', to: 'Waitlist', label: '-> Waitlist' },
-    { from: 'Waitlist', to: 'Prospective', label: '-> Prospective' },
-    { from: 'Waitlist', to: 'Active', label: '-> Active' },
-    { from: 'Active', to: 'Archived', label: '-> Archive' },
-    { from: 'Archived', to: 'Active', label: '-> Active' },
-  ]
-
-  function getAvailableTransitions(client: Client): StatusTransition[] {
-    return STATUS_TRANSITIONS.filter((t) => {
-      if (t.from !== client.status) return false
-      if (t.from === 'Prospective' && t.to === 'Waitlist' && !client.allFormsComplete) {
-        return false
+
+    function statusIcon(status: ClientStatus): string {
+      const icons: Record<ClientStatus, string> = {
+        Prospective: 'i-heroicons-clock',
+        Waitlist: 'i-heroicons-queue-list',
+        Active: 'i-heroicons-check-circle',
+        Archived: 'i-heroicons-archive-box',
       }
-      if (t.from === 'Waitlist' && t.to === 'Active' && !client.allFormsComplete) {
-        return false
+      return icons[status]
+    }
+
+  /** Muted warning text — easier on dark UIs than default amber-400 */
+    const WARNING_TEXT_MUTED = 'text-amber-700 dark:text-amber-500/75'
+
+    /** Prospective badge: softer than UBadge `warning` on dark backgrounds */
+    const PROSPECTIVE_BADGE_CLASS =
+      '!bg-amber-500/10 !text-amber-900 !ring-1 !ring-inset !ring-amber-600/15 dark:!bg-amber-950/40 dark:!text-amber-400/85 dark:!ring-amber-500/25 dark:[&_svg]:text-amber-400/80'
+
+    function statusHint(c: Client): string {
+      if (c.status === 'Prospective' && !c.allFormsComplete) {
+        return 'To move to waitlist, the client needs to complete all forms'
       }
-      return true
-    })
-  }
+      return ''
+    }
 
-  const confirmModalOpen = ref(false)
-  const pendingClient = ref<Client | null>(null)
-  const pendingNextStatus = ref<ClientStatus | null>(null)
+    const showFormsRemainingColumn = computed(
+      () => clients.value?.some((c) => c.status === 'Prospective' || c.status === 'Waitlist') ?? false
+    )
 
-  const clientDetailModalOpen = ref(false)
-  const selectedClientId = ref<string | null>(null)
+    const showWeekNoColumn = computed(
+      () => clients.value?.some((c) => c.status === 'Active') ?? false
+    )
 
-  function openClientDetail(client: Client) {
-    selectedClientId.value = client.id
-    clientDetailModalOpen.value = true
-  }
+    function formatIncompleteForms(c: Client): string {
+      if (c.status !== 'Prospective' && c.status !== 'Waitlist') return ''
+      if (!c.incompleteForms?.length || c.allFormsComplete) {
+        return 'User has completed all forms'
+      }
+      const count = c.incompleteForms.length
+      const names = c.incompleteForms.map((k) => FORM_LABELS[k] ?? k).join(', ')
+      return `${count} remaining: ${names}`
+    }
 
-  function onTableRowSelect(_e: Event, row: TableRow<Client>) {
-    openClientDetail(row.original)
-  }
+    const toast = useToast()
+    const updatingId = ref<string | null>(null)
 
-  const columns = computed<TableColumn<Client>[]>(() => {
-    const cols: TableColumn<Client>[] = [
-      { accessorKey: 'status', header: 'Status' },
-      { id: 'name', header: 'Name' },
-      { accessorKey: 'email', header: 'Email' },
+    type StatusTransition = { from: ClientStatus; to: ClientStatus; label: string }
+
+    const STATUS_TRANSITIONS: StatusTransition[] = [
+      { from: 'Prospective', to: 'Waitlist', label: '-> Waitlist' },
+      { from: 'Waitlist', to: 'Prospective', label: '-> Prospective' },
+      { from: 'Waitlist', to: 'Active', label: '-> Active' },
+      { from: 'Active', to: 'Archived', label: '-> Archive' },
+      { from: 'Archived', to: 'Active', label: '-> Active' },
     ]
-    if (showFormsRemainingColumn.value) {
-      cols.push({ id: 'formsRemaining', header: 'Forms remaining' })
+
+    function getAvailableTransitions(client: Client): StatusTransition[] {
+      return STATUS_TRANSITIONS.filter((t) => {
+        if (t.from !== client.status) return false
+        if (t.from === 'Prospective' && t.to === 'Waitlist' && !client.allFormsComplete) {
+          return false
+        }
+        if (t.from === 'Waitlist' && t.to === 'Active' && !client.allFormsComplete) {
+          return false
+        }
+        return true
+      })
     }
-    if (showWeekNoColumn.value) {
-      cols.push({ id: 'weekNo', header: 'Week no' })
+
+    const confirmModalOpen = ref(false)
+    const pendingClient = ref<Client | null>(null)
+    const pendingNextStatus = ref<ClientStatus | null>(null)
+
+    const clientDetailModalOpen = ref(false)
+    const selectedClientId = ref<string | null>(null)
+
+    function openClientDetail(client: Client) {
+      selectedClientId.value = client.id
+      clientDetailModalOpen.value = true
     }
-    if (showRecordsRequestColumn.value) {
-      cols.push({ id: 'recordsRequest', header: 'Records request' })
+
+    function onTableRowSelect(_e: Event, row: TableRow<Client>) {
+      openClientDetail(row.original)
     }
-    cols.push({
-      id: 'actions',
-      header: 'Actions',
-      meta: {
-        class: {
-          th: 'text-right',
-          td: 'text-right',
+
+    const columns = computed<TableColumn<Client>[]>(() => {
+      const cols: TableColumn<Client>[] = [
+        { accessorKey: 'status', header: 'Status' },
+        { id: 'name', header: 'Name' },
+        { accessorKey: 'email', header: 'Email' },
+      ]
+      if (showFormsRemainingColumn.value) {
+        cols.push({ id: 'formsRemaining', header: 'Forms remaining' })
+      }
+      if (showWeekNoColumn.value) {
+        cols.push({ id: 'weekNo', header: 'Week no' })
+      }
+      if (showRecordsRequestColumn.value) {
+        cols.push({ id: 'recordsRequest', header: 'Records request' })
+      }
+      cols.push({
+        id: 'actions',
+        header: 'Actions',
+        meta: {
+          class: {
+            th: 'text-right',
+            td: 'text-right',
+          },
         },
-      },
+      })
+      return cols
     })
-    return cols
-  })
-
-  function openConfirmModal(client: Client, nextStatus: ClientStatus) {
-    pendingClient.value = client
-    pendingNextStatus.value = nextStatus
-    confirmModalOpen.value = true
-  }
-
-  function closeConfirmModal() {
-    confirmModalOpen.value = false
-    pendingClient.value = null
-    pendingNextStatus.value = null
-  }
-
-  async function confirmStatusUpdate() {
-    if (!pendingClient.value || !pendingNextStatus.value) {
+
+    function openConfirmModal(client: Client, nextStatus: ClientStatus) {
+      pendingClient.value = client
+      pendingNextStatus.value = nextStatus
+      confirmModalOpen.value = true
+    }
+
+    function closeConfirmModal() {
+      confirmModalOpen.value = false
+      pendingClient.value = null
+      pendingNextStatus.value = null
+    }
+
+    async function confirmStatusUpdate() {
+      if (!pendingClient.value || !pendingNextStatus.value) {
+        closeConfirmModal()
+        return
+      }
+      await updateStatus(pendingClient.value.id, pendingNextStatus.value)
       closeConfirmModal()
-      return
     }
-    await updateStatus(pendingClient.value.id, pendingNextStatus.value)
-    closeConfirmModal()
-  }
-
-  async function updateStatus(clientId: string, newStatus: ClientStatus) {
-    if (updatingId.value) return
-    try {
-      updatingId.value = clientId
-      await $fetch(`/api/clients/${clientId}`, {
-        method: 'PATCH',
-        body: { status: newStatus },
-      })
-      clearNuxtData('client-metrics')
-      toast.add({
-        title: 'Status Updated',
-        description: `Client moved to ${statusLabel(newStatus)}`,
-        color: 'success',
-      })
-      await refreshClientsAndCounts()
-    } catch (error: any) {
-      const msg = error?.data?.statusMessage || error?.statusMessage || 'Failed to update status'
-      toast.add({
-        title: 'Update Failed',
-        description: msg,
-        color: 'error',
-      })
-    } finally {
-      updatingId.value = null
+
+    async function updateStatus(clientId: string, newStatus: ClientStatus) {
+      if (updatingId.value) return
+      try {
+        updatingId.value = clientId
+        await $fetch(`/api/clients/${clientId}`, {
+          method: 'PATCH',
+          body: { status: newStatus },
+        })
+        clearNuxtData('client-metrics')
+        toast.add({
+          title: 'Status Updated',
+          description: `Client moved to ${statusLabel(newStatus)}`,
+          color: 'success',
+        })
+        await refreshClientsAndCounts()
+      } catch (error: any) {
+        const msg = error?.data?.statusMessage || error?.statusMessage || 'Failed to update status'
+        toast.add({
+          title: 'Update Failed',
+          description: msg,
+          color: 'error',
+        })
+      } finally {
+        updatingId.value = null
+      }
     }
-  }
 </script>
 
 <template>
@@ -491,47 +491,47 @@
                 row.original.status === 'Active' && row.original.therapyWeek !== null
                   ? `${row.original.therapyWeek} / 26`
                   : row.original.status === 'Active'
-                    ? '—'
+                    ? '?'
                     : ''
               }}
             </span>
           </template>
           <template #recordsRequest-cell="{ row }">
-          <template v-if="pendingByClient.get(row.original.id)">
-            <NuxtLink
-              to="/clients/session-notes-requests"
-              class="inline-flex items-center gap-1"
-              :title="`Expires ${new Date(pendingByClient.get(row.original.id)!.approvalExpiresAt).toLocaleString()}`"
-              @click.stop
-            >
-              <UBadge
-                :color="recordsCountdownColor(pendingByClient.get(row.original.id)!)"
-                variant="subtle"
-                size="sm"
+            <template v-if="pendingByClient.get(row.original.id)">
+              <NuxtLink
+                to="/clients/session-notes-requests"
+                class="inline-flex items-center gap-1"
+                :title="`Expires ${new Date(pendingByClient.get(row.original.id)!.approvalExpiresAt).toLocaleString()}`"
+                @click.stop
               >
-                <UIcon name="i-heroicons-clock" class="mr-1 h-3.5 w-3.5" />
-                {{ formatRecordsCountdown(pendingByClient.get(row.original.id)!) }}
-              </UBadge>
-            </NuxtLink>
+                <UBadge
+                  :color="recordsCountdownColor(pendingByClient.get(row.original.id)!)"
+                  variant="subtle"
+                  size="sm"
+                >
+                  <UIcon name="i-heroicons-clock" class="mr-1 h-3.5 w-3.5" />
+                  {{ formatRecordsCountdown(pendingByClient.get(row.original.id)!) }}
+                </UBadge>
+              </NuxtLink>
+            </template>
+            <span v-else class="text-sm text-gray-400 dark:text-gray-600">—</span>
+          </template>
+          <template #actions-cell="{ row }">
+            <div v-if="updatingId !== row.original.id" class="flex flex-wrap justify-end gap-1.5">
+              <UButton
+                v-for="t in getAvailableTransitions(row.original)"
+                :key="`${t.from}-${t.to}`"
+                size="xs"
+                variant="outline"
+                color="primary"
+                :label="t.label"
+                @click="openConfirmModal(row.original, t.to)"
+              />
+            </div>
+            <div v-else class="flex justify-end">
+              <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin text-gray-400" />
+            </div>
           </template>
-          <span v-else class="text-sm text-gray-400 dark:text-gray-600">—</span>
-        </template>
-        <template #actions-cell="{ row }">
-          <div v-if="updatingId !== row.original.id" class="flex flex-wrap justify-end gap-1.5">
-            <UButton
-              v-for="t in getAvailableTransitions(row.original)"
-              :key="`${t.from}-${t.to}`"
-              size="xs"
-              variant="outline"
-              color="primary"
-              :label="t.label"
-              @click="openConfirmModal(row.original, t.to)"
-            />
-          </div>
-          <div v-else class="flex justify-end">
-            <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin text-gray-400" />
-          </div>
-        </template>
         </UTable>
       </div>
     </div>