From 572ce1841b49f0c4591a70dabdb5b03e78a36a73 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 15 Jan 2026 17:40:46 -0500
Subject: [PATCH] feat(core): standardized form inputs and buttons across core
 modules

- Updated Person, Address, Contact forms with consistent Skeleton UI styling.
- Standardized Account, Site, and User detail pages.
- Modernized People, Address, and Contact list pages with improved headers and action buttons.
- Applied 'variant-filled-surface' and 'rounded-lg' patterns from Journals module for UI consistency.
---
 .../core/accounts/[account_id]/+page.svelte   | 113 +++++++------
 src/routes/core/addresses/+page.svelte        |  95 ++++++-----
 .../addresses/ae_comp__address_form.svelte    | 138 ++++++++--------
 src/routes/core/contacts/+page.svelte         | 123 ++++++++------
 .../contacts/ae_comp__contact_form.svelte     | 114 ++++++-------
 src/routes/core/people/+page.svelte           |  32 ++--
 .../core/people/ae_comp__person_form.svelte   | 132 +++++++--------
 .../core/people/ae_comp__person_search.svelte |  61 +++----
 src/routes/core/sites/[site_id]/+page.svelte  | 119 ++++++++------
 src/routes/core/users/[user_id]/+page.svelte  | 153 ++++++++++--------
 10 files changed, 593 insertions(+), 487 deletions(-)

diff --git a/src/routes/core/accounts/[account_id]/+page.svelte b/src/routes/core/accounts/[account_id]/+page.svelte
index 5107b777..e4b3e01f 100644
--- a/src/routes/core/accounts/[account_id]/+page.svelte
+++ b/src/routes/core/accounts/[account_id]/+page.svelte
@@ -70,79 +70,100 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft" href="/core/accounts">
+            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/accounts">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
-                <Building size={24} />
-                <h1 class="h2">{account?.name ?? 'Loading Account...'}</h1>
+                <div class="p-2 bg-primary-500/10 rounded-lg">
+                    <Building size={24} class="text-primary-500" />
+                </div>
+                <h1 class="h2 font-black tracking-tight">{account?.name ?? 'Loading...'}</h1>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn variant-filled-error" onclick={handle_delete} disabled={loading || saving}>
+            <button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn variant-filled-primary" onclick={handle_save} disabled={loading || saving}>
-                <Save size={16} class="mr-2" /> Save Changes
+            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
+                {#if saving}
+                    <span class="animate-spin mr-2">⏳</span>
+                {:else}
+                    <Save size={16} class="mr-2" />
+                {/if}
+                Save Changes
             </button>
         </div>
     </header>
 
     {#if loading}
-        <div class="placeholder animate-pulse w-full h-64"></div>
+        <div class="card p-8 flex justify-center items-center h-64">
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+        </div>
     {:else if account}
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2">Basic Information</h3>
-                <label class="label">
-                    <span>Account Name</span>
-                    <input class="input" type="text" bind:value={account.name} />
-                </label>
-                <label class="label">
-                    <span>Short Name</span>
-                    <input class="input" type="text" bind:value={account.short_name} />
-                </label>
-                <label class="label">
-                    <span>Account Code</span>
-                    <input class="input" type="text" bind:value={account.code} />
-                </label>
-                <label class="label">
-                    <span>Description</span>
-                    <textarea class="textarea" rows="3" bind:value={account.description}></textarea>
-                </label>
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <span class="text-primary-500">◆</span> Basic Information
+                </h3>
+                <div class="space-y-4">
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Account Name</label>
+                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.name} />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Short Name</label>
+                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.short_name} />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Account Code</label>
+                        <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={account.code} />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Description</label>
+                        <textarea class="textarea variant-filled-surface rounded-lg" rows="3" bind:value={account.description}></textarea>
+                    </div>
+                </div>
             </div>
 
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2">Settings & Status</h3>
-                <div class="flex flex-col gap-4">
-                    <label class="flex items-center space-x-2">
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <span class="text-secondary-500">◆</span> Settings & Status
+                </h3>
+                <div class="flex flex-col gap-4 py-2">
+                    <label class="flex items-center space-x-2 cursor-pointer">
                         <input class="checkbox" type="checkbox" bind:checked={account.enable} />
-                        <p>Enabled</p>
+                        <span class="text-sm font-medium">Enabled</span>
                     </label>
-                    <label class="flex items-center space-x-2">
+                    <label class="flex items-center space-x-2 cursor-pointer">
                         <input class="checkbox" type="checkbox" bind:checked={account.hide} />
-                        <p>Hidden</p>
+                        <span class="text-sm font-medium">Hidden</span>
                     </label>
-                    <label class="flex items-center space-x-2">
+                    <label class="flex items-center space-x-2 cursor-pointer">
                         <input class="checkbox" type="checkbox" bind:checked={account.priority} />
-                        <p>Priority Account</p>
+                        <span class="text-sm font-medium">Priority Account</span>
                     </label>
                 </div>
-                <label class="label">
-                    <span>Group</span>
-                    <input class="input" type="text" bind:value={account.group} />
-                </label>
-                <label class="label">
-                    <span>Sort Order</span>
-                    <input class="input" type="number" bind:value={account.sort} />
-                </label>
+                <div class="space-y-4 border-t border-surface-500/30 pt-4">
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Group</label>
+                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={account.group} />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Sort Order</label>
+                        <input class="input variant-filled-surface rounded-lg" type="number" bind:value={account.sort} />
+                    </div>
+                </div>
             </div>
 
-            <div class="card p-4 space-y-4 md:col-span-2">
-                <h3 class="h4 border-b border-surface-500/30 pb-2">Internal Notes</h3>
-                <textarea class="textarea" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+            <div class="card p-6 space-y-4 md:col-span-2 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <span class="text-tertiary-500">◆</span> Internal Notes
+                </h3>
+                <div class="space-y-1">
+                    <textarea class="textarea variant-filled-surface rounded-lg" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+                </div>
             </div>
         </div>
     {/if}
diff --git a/src/routes/core/addresses/+page.svelte b/src/routes/core/addresses/+page.svelte
index 188dec6f..52867d5b 100644
--- a/src/routes/core/addresses/+page.svelte
+++ b/src/routes/core/addresses/+page.svelte
@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { MapPin, Plus, Search, ExternalLink, X } from 'lucide-svelte';
+    import { MapPin, Plus, Search, ExternalLink, X, ListFilter, MapPinned } from 'lucide-svelte';
     import { load_ae_obj_li__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
     import Address_form from './ae_comp__address_form.svelte';
 
@@ -33,12 +33,17 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
-            <MapPin size={24} />
-            <h1 class="h2">Address Management</h1>
+            <div class="p-2 bg-primary-500/10 rounded-lg">
+                <MapPin size={24} class="text-primary-500" />
+            </div>
+            <h1 class="h2 font-black tracking-tight">Address Management</h1>
         </div>
-        <button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
+        <button 
+            class="btn btn-sm variant-filled-primary font-bold shadow-lg" 
+            onclick={() => show_add_form = !show_add_form}
+        >
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -48,7 +53,7 @@
     </header>
 
     {#if show_add_form}
-        <div class="mb-8">
+        <div class="animate-fade-in">
             <Address_form 
                 onSave={(new_addr) => {
                     show_add_form = false;
@@ -63,43 +68,55 @@
     {/if}
 
     {#if loading}
-        <div class="placeholder animate-pulse h-64 w-full"></div>
+        <div class="card p-8 flex justify-center items-center h-64">
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+        </div>
     {:else if address_li.length === 0}
-        <div class="card p-8 text-center variant-soft">
-            <p class="opacity-60">No addresses found for this account.</p>
+        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+            <MapPinned size={48} class="mx-auto mb-4 opacity-20" />
+            <h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
         </div>
     {:else}
-        <div class="table-container">
-            <table class="table table-hover">
-                <thead>
-                    <tr>
-                        <th>City</th>
-                        <th>State/Province</th>
-                        <th>Country</th>
-                        <th>Status</th>
-                        <th class="text-right">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {#each address_li as addr}
-                        <tr>
-                            <td>{addr.city || '--'}</td>
-                            <td>{addr.state_province || '--'}</td>
-                            <td>{addr.country || '--'}</td>
-                            <td>
-                                <span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'}">
-                                    {addr.enable ? 'Enabled' : 'Disabled'}
-                                </span>
-                            </td>
-                            <td class="text-right">
-                                <a class="btn btn-sm variant-soft-primary" href="/core/addresses/{addr.address_id_random}">
-                                    Manage <ExternalLink size={12} class="ml-2" />
-                                </a>
-                            </td>
+        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-4 flex items-center gap-2">
+                <ListFilter size={18} class="text-secondary-500" />
+                Linked Addresses
+                <span class="badge variant-soft-secondary ml-auto">{address_li.length} entries</span>
+            </h3>
+            
+            <div class="table-container">
+                <table class="table table-hover">
+                    <thead>
+                        <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                            <th>City</th>
+                            <th>State/Province</th>
+                            <th>Country</th>
+                            <th>Status</th>
+                            <th class="text-right">Actions</th>
                         </tr>
-                    {/each}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                        {#each address_li as addr}
+                            <tr class="transition-colors">
+                                <td class="font-bold">{addr.city || '--'}</td>
+                                <td>{addr.state_province || '--'}</td>
+                                <td><span class="badge variant-soft-surface font-mono">{addr.country || '--'}</span></td>
+                                <td>
+                                    <span class="badge {addr.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
+                                        {addr.enable ? 'Active' : 'Disabled'}
+                                    </span>
+                                </td>
+                                <td class="text-right">
+                                    <a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/addresses/{addr.address_id_random}">
+                                        Manage <ExternalLink size={12} class="ml-2 opacity-50" />
+                                    </a>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
         </div>
     {/if}
 </div>
diff --git a/src/routes/core/addresses/ae_comp__address_form.svelte b/src/routes/core/addresses/ae_comp__address_form.svelte
index 2828baaf..cfb9fd40 100644
--- a/src/routes/core/addresses/ae_comp__address_form.svelte
+++ b/src/routes/core/addresses/ae_comp__address_form.svelte
@@ -100,11 +100,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
+                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -128,30 +128,30 @@
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
 
-            <label class="label">
-                <span>Attention To / Name</span>
-                <input class="input" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Attention To / Name</label>
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
+            </div>
 
-            <label class="label">
-                <span>Organization Name</span>
-                <input class="input" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Organization Name</label>
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
+            </div>
 
-            <label class="label">
-                <span>Address Line 1</span>
-                <input class="input" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Address Line 1</label>
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
+            </div>
 
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>Line 2</span>
-                    <input class="input" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
-                </label>
-                <label class="label">
-                    <span>Line 3</span>
-                    <input class="input" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
-                </label>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Line 2</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Line 3</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
+                </div>
             </div>
         </fieldset>
 
@@ -160,64 +160,58 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Region & Code</legend>
 
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>City</span>
-                    <input class="input" type="text" bind:value={formData.city} required placeholder="Metropolis" />
-                </label>
-                <label class="label">
-                    <span>State / Province</span>
-                    <input class="input" type="text" bind:value={formData.state_province} placeholder="NY" />
-                </label>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">City</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.city} required placeholder="Metropolis" />
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">State / Province</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.state_province} placeholder="NY" />
+                </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>Postal Code</span>
-                    <input class="input" type="text" bind:value={formData.postal_code} placeholder="12345" />
-                </label>
-                <label class="label">
-                    <span>Country (Code)</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Postal Code</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.postal_code} placeholder="12345" />
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Country (Code)</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Globe size={16} /></div>
-                        <input type="text" bind:value={formData.country} placeholder="USA" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.country} placeholder="USA" />
                     </div>
-                </label>
+                </div>
             </div>
-
-            <!-- DO NOT USE - Scott 2026-01-09 -->
-            <!-- <label class="label">
-                <span>Country Name</span>
-                <input class="input" type="text" bind:value={formData.country_name} placeholder="United States" />
-            </label> -->
         </fieldset>
 
         <!-- Technical Section -->
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
 
-            <label class="label">
-                <span>Timezone</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Timezone</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Clock size={16} /></div>
-                    <input type="text" bind:value={formData.timezone} placeholder="America/New_York" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
                 </div>
-            </label>
+            </div>
 
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>Latitude</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Latitude</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
-                        <input type="text" bind:value={formData.latitude} placeholder="40.7128" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.latitude} placeholder="40.7128" />
                     </div>
-                </label>
-                <label class="label">
-                    <span>Longitude</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Longitude</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Navigation size={16} /></div>
-                        <input type="text" bind:value={formData.longitude} placeholder="-74.0060" />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
                     </div>
-                </label>
+                </div>
             </div>
         </fieldset>
 
@@ -226,33 +220,33 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
 
             <div class="flex flex-wrap gap-4 pt-2">
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
-                    <span>Enabled</span>
+                    <span class="text-sm font-medium">Enabled</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
-                    <span>Hidden</span>
+                    <span class="text-sm font-medium">Hidden</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
-                    <span>Priority</span>
+                    <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
-            <label class="label">
-                <span>Internal Notes</span>
-                <textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Internal Notes</label>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
+            </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
-            {address ? 'Update Address' : 'Create Address'}
+            {address ? 'Update Address Record' : 'Create Address Record'}
         </button>
     </footer>
 </form>
diff --git a/src/routes/core/contacts/+page.svelte b/src/routes/core/contacts/+page.svelte
index d133f42d..c8d1baa1 100644
--- a/src/routes/core/contacts/+page.svelte
+++ b/src/routes/core/contacts/+page.svelte
@@ -2,7 +2,7 @@
     import { onMount } from 'svelte';
     import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { Phone, Plus, Search, Mail, User, ExternalLink, X } from 'lucide-svelte';
+    import { Phone, Plus, Search, Mail, User, ExternalLink, X, ListFilter, Contact } from 'lucide-svelte';
     import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
     import Contact_form from './ae_comp__contact_form.svelte';
 
@@ -33,12 +33,17 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
-            <Phone size={24} />
-            <h1 class="h2">Contact Management</h1>
+            <div class="p-2 bg-primary-500/10 rounded-lg">
+                <Phone size={24} class="text-primary-500" />
+            </div>
+            <h1 class="h2 font-black tracking-tight">Contact Management</h1>
         </div>
-        <button class="btn variant-filled-primary" onclick={() => show_add_form = !show_add_form}>
+        <button 
+            class="btn btn-sm variant-filled-primary font-bold shadow-lg" 
+            onclick={() => show_add_form = !show_add_form}
+        >
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -48,7 +53,7 @@
     </header>
 
     {#if show_add_form}
-        <div class="mb-8">
+        <div class="animate-fade-in">
             <Contact_form 
                 onSave={(new_con) => {
                     show_add_form = false;
@@ -63,53 +68,73 @@
     {/if}
 
     {#if loading}
-        <div class="placeholder animate-pulse h-64 w-full"></div>
+        <div class="card p-8 flex justify-center items-center h-64">
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+        </div>
     {:else if contact_li.length === 0}
-        <div class="card p-8 text-center variant-soft">
-            <p class="opacity-60">No contacts found for this account.</p>
+        <div class="card p-12 text-center variant-glass-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+            <Contact size={48} class="mx-auto mb-4 opacity-20" />
+            <h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
         </div>
     {:else}
-        <div class="table-container">
-            <table class="table table-hover">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Email</th>
-                        <th>Phone</th>
-                        <th>Status</th>
-                        <th class="text-right">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {#each contact_li as con}
-                        <tr>
-                            <td>
-                                <div class="flex items-center gap-2">
-                                    <User size={14} class="opacity-60" />
-                                    {con.name || '--'}
-                                </div>
-                            </td>
-                            <td>
-                                <div class="flex items-center gap-2">
-                                    <Mail size={14} class="opacity-60" />
-                                    {con.email || '--'}
-                                </div>
-                            </td>
-                            <td>{con.phone || '--'}</td>
-                            <td>
-                                <span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'}">
-                                    {con.enable ? 'Enabled' : 'Disabled'}
-                                </span>
-                            </td>
-                            <td class="text-right">
-                                <a class="btn btn-sm variant-soft-primary" href="/core/contacts/{con.contact_id_random}">
-                                    Manage <ExternalLink size={12} class="ml-2" />
-                                </a>
-                            </td>
+        <div class="card p-6 variant-glass-surface shadow-xl border border-surface-500/10">
+            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-4 flex items-center gap-2">
+                <ListFilter size={18} class="text-secondary-500" />
+                Directory Results
+                <span class="badge variant-soft-secondary ml-auto">{contact_li.length} entries</span>
+            </h3>
+            
+            <div class="table-container">
+                <table class="table table-hover">
+                    <thead>
+                        <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                            <th>Name / Title</th>
+                            <th>Email</th>
+                            <th>Phone</th>
+                            <th>Status</th>
+                            <th class="text-right">Actions</th>
                         </tr>
-                    {/each}
-                </tbody>
-            </table>
+                    </thead>
+                    <tbody>
+                        {#each contact_li as con}
+                            <tr class="transition-colors">
+                                <td class="font-bold">
+                                    <div class="flex items-center gap-2">
+                                        <div class="avatar variant-soft-surface w-8 h-8 flex items-center justify-center rounded-full">
+                                            <User size={14} class="opacity-60" />
+                                        </div>
+                                        {con.title || con.name || '--'}
+                                    </div>
+                                </td>
+                                <td>
+                                    {#if con.email}
+                                        <div class="flex items-center gap-2">
+                                            <Mail size={14} class="opacity-40" />
+                                            <span class="text-sm">{con.email}</span>
+                                        </div>
+                                    {:else}
+                                        <span class="opacity-20 text-xs italic">No Email</span>
+                                    {/if}
+                                </td>
+                                <td>
+                                    <span class="font-mono text-sm opacity-80">{con.phone_office || con.phone_mobile || '--'}</span>
+                                </td>
+                                <td>
+                                    <span class="badge {con.enable ? 'variant-filled-success' : 'variant-filled-error'} text-[10px] uppercase font-bold">
+                                        {con.enable ? 'Active' : 'Disabled'}
+                                    </span>
+                                </td>
+                                <td class="text-right">
+                                    <a class="btn btn-sm variant-soft-primary font-bold shadow-sm" href="/core/contacts/{con.contact_id_random}">
+                                        Manage <ExternalLink size={12} class="ml-2 opacity-50" />
+                                    </a>
+                                </td>
+                            </tr>
+                        {/each}
+                    </tbody>
+                </table>
+            </div>
         </div>
     {/if}
 </div>
diff --git a/src/routes/core/contacts/ae_comp__contact_form.svelte b/src/routes/core/contacts/ae_comp__contact_form.svelte
index d4a430bf..b225debd 100644
--- a/src/routes/core/contacts/ae_comp__contact_form.svelte
+++ b/src/routes/core/contacts/ae_comp__contact_form.svelte
@@ -96,11 +96,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
+                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -124,23 +124,23 @@
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
             
-            <label class="label">
-                <span>Title / Name</span>
-                <input class="input" type="text" bind:value={formData.title} required placeholder="Business Office" />
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Title / Name</label>
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.title} required placeholder="Business Office" />
+            </div>
 
-            <label class="label">
-                <span>Tagline</span>
-                <input class="input" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Tagline</label>
+                <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
+            </div>
 
-            <label class="label">
-                <span>Email Address</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Email Address</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input type="email" bind:value={formData.email} placeholder="contact@example.com" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.email} placeholder="contact@example.com" />
                 </div>
-            </label>
+            </div>
         </fieldset>
 
         <!-- Communication Section -->
@@ -148,58 +148,58 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
             
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>Mobile Phone</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Mobile Phone</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
                     </div>
-                </label>
-                <label class="label">
-                    <span>Office Phone</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Office Phone</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input type="tel" bind:value={formData.phone_office} placeholder="+1..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
                     </div>
-                </label>
+                </div>
             </div>
 
-            <label class="label">
-                <span>Website URL</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Website URL</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Globe size={16} /></div>
-                    <input type="url" bind:value={formData.website_url} placeholder="https://..." />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.website_url} placeholder="https://..." />
                 </div>
-            </label>
+            </div>
         </fieldset>
 
         <!-- Social Media Section -->
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
             
-            <label class="label">
-                <span>LinkedIn URL</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Linkedin size={16} /></div>
-                    <input type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
                 </div>
-            </label>
+            </div>
 
             <div class="grid grid-cols-2 gap-2">
-                <label class="label">
-                    <span>Facebook URL</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Facebook URL</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Facebook size={16} /></div>
-                        <input type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
                     </div>
-                </label>
-                <label class="label">
-                    <span>Instagram URL</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                </div>
+                <div class="space-y-1">
+                    <label class="label text-xs font-bold opacity-75">Instagram URL</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Instagram size={16} /></div>
-                        <input type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
+                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
                     </div>
-                </label>
+                </div>
             </div>
         </fieldset>
 
@@ -208,33 +208,33 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
             
             <div class="flex flex-wrap gap-4 pt-2">
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
-                    <span>Enabled</span>
+                    <span class="text-sm font-medium">Enabled</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
-                    <span>Hidden</span>
+                    <span class="text-sm font-medium">Hidden</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
-                    <span>Priority</span>
+                    <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
-            <label class="label">
-                <span>Internal Notes</span>
-                <textarea class="textarea" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Internal Notes</label>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+            </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
-            {contact ? 'Update Contact' : 'Create Contact'}
+            {contact ? 'Update Contact Record' : 'Create Contact Record'}
         </button>
     </footer>
 </form>
diff --git a/src/routes/core/people/+page.svelte b/src/routes/core/people/+page.svelte
index 254308de..f453ae35 100644
--- a/src/routes/core/people/+page.svelte
+++ b/src/routes/core/people/+page.svelte
@@ -4,7 +4,7 @@
     import { X } from 'lucide-svelte';
     import { ae_loc, ae_sess, slct, ae_api } from '$lib/stores/ae_stores';
     import { core_func } from '$lib/ae_core/ae_core_functions';
-    import { Users, Plus } from 'lucide-svelte';
+    import { Users, Plus, ListFilter } from 'lucide-svelte';
     import Comp_person_search from './ae_comp__person_search.svelte';
     import Comp_person_obj_tbl from '../ae_comp__person_obj_tbl.svelte';
     import Person_form from './ae_comp__person_form.svelte';
@@ -21,15 +21,17 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
-            <Users size={24} />
-            <h1 class="h2">People Management</h1>
+            <div class="p-2 bg-primary-500/10 rounded-lg">
+                <Users size={24} class="text-primary-500" />
+            </div>
+            <h1 class="h2 font-black tracking-tight">People Management</h1>
         </div>
         <button
             type="button"
             onclick={() => show_add_form = !show_add_form}
-            class="btn variant-filled-primary"
+            class="btn btn-sm variant-filled-primary font-bold shadow-lg"
             class:hidden={!$ae_loc.edit_mode}
         >
             {#if show_add_form}
@@ -41,7 +43,7 @@
     </header>
 
     {#if show_add_form}
-        <div class="mb-8">
+        <div class="animate-fade-in">
             <Person_form
                 onSave={(new_person) => {
                     show_add_form = false;
@@ -58,12 +60,18 @@
     }} />
 
     {#if $ae_sess.person.show_report__person_li}
-        <div class="card p-4 variant-soft space-y-4">
-            <h3 class="h4 border-b border-surface-500/30 pb-2">Results ({person_id_random_li.length})</h3>
-            <Comp_person_obj_tbl
-                bind:person_id_random_li
-                show_user_fields={$ae_loc.administrator_access}
-            ></Comp_person_obj_tbl>
+        <div class="card p-6 variant-glass-surface shadow-xl space-y-4 border border-surface-500/10">
+            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                <ListFilter size={18} class="text-secondary-500" />
+                Search Results 
+                <span class="badge variant-soft-secondary ml-auto">{person_id_random_li.length} found</span>
+            </h3>
+            <div class="overflow-x-auto">
+                <Comp_person_obj_tbl
+                    bind:person_id_random_li
+                    show_user_fields={$ae_loc.administrator_access}
+                ></Comp_person_obj_tbl>
+            </div>
         </div>
     {/if}
 </div>
diff --git a/src/routes/core/people/ae_comp__person_form.svelte b/src/routes/core/people/ae_comp__person_form.svelte
index 148304e6..bff4e51c 100644
--- a/src/routes/core/people/ae_comp__person_form.svelte
+++ b/src/routes/core/people/ae_comp__person_form.svelte
@@ -118,11 +118,11 @@
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm variant-soft" onclick={onCancel}>
+                <button type="button" class="btn btn-sm variant-soft-surface" onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm variant-filled-primary" disabled={is_loading}>
+            <button type="submit" class="btn btn-sm variant-filled-primary font-bold shadow-lg" disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -147,85 +147,85 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity</legend>
 
             <div class="grid grid-cols-4 gap-2">
-                <label class="label col-span-1">
-                    <span>Prefix</span>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.prefix} placeholder="Mr." />
-                </label>
-                <label class="label col-span-3">
-                    <span>Given Name</span>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.given_name} required placeholder="Jane" />
-                </label>
+                <div class="space-y-1 col-span-1">
+                    <label class="label text-xs font-bold opacity-75">Prefix</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.prefix} placeholder="Mr." />
+                </div>
+                <div class="space-y-1 col-span-3">
+                    <label class="label text-xs font-bold opacity-75">Given Name</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.given_name} required placeholder="Jane" />
+                </div>
             </div>
 
             <div class="grid grid-cols-4 gap-2">
-                <label class="label col-span-3">
-                    <span>Family Name</span>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.family_name} required placeholder="Doe" />
-                </label>
-                <label class="label col-span-1">
-                    <span>Suffix</span>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.suffix} placeholder="PhD" />
-                </label>
+                <div class="space-y-1 col-span-3">
+                    <label class="label text-xs font-bold opacity-75">Family Name</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.family_name} required placeholder="Doe" />
+                </div>
+                <div class="space-y-1 col-span-1">
+                    <label class="label text-xs font-bold opacity-75">Suffix</label>
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.suffix} placeholder="PhD" />
+                </div>
             </div>
 
-            <label class="label">
-                <span>Middle Name / Informal Name (Nickname)</span>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Middle Name / Informal Name (Nickname)</label>
                 <div class="grid grid-cols-2 gap-2">
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.middle_name} placeholder="Middle" />
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.nickname} placeholder="Nickname" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.middle_name} placeholder="Middle" />
+                    <input class="input variant-filled-surface rounded-lg placeholder-surface-400" type="text" bind:value={formData.nickname} placeholder="Nickname" />
                 </div>
-            </label>
+            </div>
         </fieldset>
 
         <!-- Contact Section -->
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Contact Information</legend>
 
-            <label class="label">
-                <span>Primary Email</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Primary Email</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input class="input placeholder-surface-400" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
                 </div>
-            </label>
+            </div>
 
-            <label class="label">
-                <span>Phone Number</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Phone Number</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Phone size={16} /></div>
-                    <input class="input placeholder-surface-400" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
                 </div>
-                <small class="opacity-60 text-xs">(Saved only locally until Contact created)</small>
-            </label>
+                <small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
+            </div>
 
-            <label class="label">
-                <span>Tagline</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Tagline</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Tag size={16} /></div>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
                 </div>
-            </label>
+            </div>
         </fieldset>
 
         <!-- Professional Section -->
         <fieldset class="space-y-4">
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Professional</legend>
 
-            <label class="label">
-                <span>Professional Title</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Professional Title</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Briefcase size={16} /></div>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
                 </div>
-            </label>
+            </div>
 
-            <label class="label">
-                <span>Affiliations</span>
-                <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Affiliations</label>
+                <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Building size={16} /></div>
-                    <input class="input placeholder-surface-400" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
+                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
                 </div>
-            </label>
+            </div>
         </fieldset>
 
         <!-- Metadata Section -->
@@ -233,24 +233,24 @@
             <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status & Flags</legend>
 
             <div class="flex flex-wrap gap-4 pt-2">
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
-                    <span>Enabled</span>
+                    <span class="text-sm font-medium">Enabled</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
-                    <span>Hidden</span>
+                    <span class="text-sm font-medium">Hidden</span>
                 </label>
-                <label class="flex items-center space-x-2">
+                <label class="flex items-center space-x-2 cursor-pointer">
                     <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
-                    <span>Priority</span>
+                    <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
-            <label class="label">
-                <span>Notes (Internal)</span>
-                <textarea class="textarea placeholder-surface-400" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
-            </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75">Notes (Internal)</label>
+                <textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+            </div>
         </fieldset>
 
         {#if $ae_loc.manager_access}
@@ -258,25 +258,25 @@
             <fieldset class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
                 <legend class="text-sm font-bold uppercase tracking-widest opacity-60">System Linking (Managers Only)</legend>
                 
-                <label class="label max-w-md">
-                    <span>Linked User ID (Random)</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr]">
+                <div class="space-y-1 max-w-md">
+                    <label class="label text-xs font-bold opacity-75">Linked User ID (Random)</label>
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Link size={16} /></div>
                         <input 
-                            class="input font-mono placeholder-surface-400" 
+                            class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400" 
                             type="text" 
                             bind:value={formData.user_id_random} 
                             placeholder="e.g. AB12CD34" 
                         />
                     </div>
-                    <small class="opacity-60 text-xs">Enter the unique random ID of the user account to link to this person.</small>
-                </label>
+                    <small class="opacity-60 text-[10px] uppercase px-1 tracking-tighter">Enter the unique random ID of the user account to link to this person.</small>
+                </div>
             </fieldset>
         {/if}
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn variant-filled-primary w-full md:w-auto" disabled={is_loading}>
+        <button type="submit" class="btn variant-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}
diff --git a/src/routes/core/people/ae_comp__person_search.svelte b/src/routes/core/people/ae_comp__person_search.svelte
index 747b01f0..028b6968 100644
--- a/src/routes/core/people/ae_comp__person_search.svelte
+++ b/src/routes/core/people/ae_comp__person_search.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Search, Plus, Filter, User } from 'lucide-svelte';
+    import { Search, Plus, Filter, User, SearchCode } from 'lucide-svelte';
     import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
     import { load_ae_obj_li__person } from '$lib/ae_core/ae_core__person';
     
@@ -42,40 +42,47 @@
     }
 </script>
 
-<div class="card p-4 variant-soft-surface space-y-4">
-    <div class="flex flex-wrap gap-4 items-end">
-        <label class="label flex-1 min-w-[200px]">
-            <span>Search People</span>
-            <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
-                <div class="input-group-shim"><Search size={16} /></div>
+<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
+    <div class="flex flex-wrap gap-6 items-end">
+        <div class="flex-1 min-w-[280px] space-y-1">
+            <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</label>
+            <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] variant-filled-surface rounded-lg overflow-hidden border border-surface-500/20 shadow-inner">
+                <div class="input-group-shim"><Search size={18} class="opacity-50" /></div>
                 <input 
+                    class="bg-transparent border-0 ring-0 focus:ring-0"
                     type="search" 
                     bind:value={qry_str} 
-                    placeholder="Name, email, or ID..." 
+                    placeholder="Search by name, email, or ID..." 
                     onkeydown={(e) => e.key === 'Enter' && handle_search()} 
                 />
-                <button class="variant-filled-primary" onclick={handle_search} disabled={loading}>
-                    {loading ? '...' : 'Search'}
+                <button class="variant-filled-primary font-bold px-6 hover:brightness-110 transition-all" onclick={handle_search} disabled={loading}>
+                    {#if loading}
+                        <span class="animate-spin mr-1">⏳</span>
+                    {:else}
+                        Go
+                    {/if}
                 </button>
             </div>
-        </label>
+        </div>
 
-        <label class="label">
-            <span>Enabled</span>
-            <select class="select w-32" bind:value={qry_enabled} onchange={handle_search}>
-                <option value="all">All</option>
-                <option value="enabled">Enabled</option>
-                <option value="not_enabled">Disabled</option>
-            </select>
-        </label>
+        <div class="grid grid-cols-2 gap-4">
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</label>
+                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_enabled} onchange={handle_search}>
+                    <option value="all">All Records</option>
+                    <option value="enabled">Enabled Only</option>
+                    <option value="not_enabled">Disabled Only</option>
+                </select>
+            </div>
 
-        <label class="label">
-            <span>Hidden</span>
-            <select class="select w-32" bind:value={qry_hidden} onchange={handle_search}>
-                <option value="all">All</option>
-                <option value="not_hidden">Visible</option>
-                <option value="hidden">Hidden</option>
-            </select>
-        </label>
+            <div class="space-y-1">
+                <label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
+                <select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20" bind:value={qry_hidden} onchange={handle_search}>
+                    <option value="all">All Visible</option>
+                    <option value="not_hidden">Publicly Visible</option>
+                    <option value="hidden">System Hidden</option>
+                </select>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/src/routes/core/sites/[site_id]/+page.svelte b/src/routes/core/sites/[site_id]/+page.svelte
index 92b7a68e..50fe0c3c 100644
--- a/src/routes/core/sites/[site_id]/+page.svelte
+++ b/src/routes/core/sites/[site_id]/+page.svelte
@@ -14,7 +14,7 @@
     import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
     import { ae_api, ae_loc } from '$lib/stores/ae_stores';
     import { goto } from '$app/navigation';
-    import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink } from 'lucide-svelte';
+    import { Save, Trash2, ArrowLeft, Globe, Plus, ExternalLink, Key, Settings, Activity } from 'lucide-svelte';
 
     let site_id = $page.params.site_id;
     let site: any = $state(null);
@@ -103,61 +103,74 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft" href="/core/sites">
+            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/sites">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
-                <Globe size={24} />
-                <h1 class="h2">{site?.name ?? 'Loading Site...'}</h1>
+                <div class="p-2 bg-primary-500/10 rounded-lg">
+                    <Globe size={24} class="text-primary-500" />
+                </div>
+                <h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
             </div>
         </div>
-        <button class="btn variant-filled-primary" onclick={handle_save_site} disabled={loading || saving}>
-            <Save size={16} class="mr-2" /> Save Site Changes
+        <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
+            {#if saving}
+                <span class="animate-spin mr-2">⏳</span>
+            {:else}
+                <Save size={16} class="mr-2" />
+            {/if}
+            Save Site Changes
         </button>
     </header>
 
     {#if loading}
-        <div class="placeholder animate-pulse w-full h-64"></div>
+        <div class="card p-8 flex justify-center items-center h-64">
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+        </div>
     {:else if site}
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Site Config -->
             <div class="lg:col-span-2 space-y-6">
-                <div class="card p-4 space-y-4">
-                    <h3 class="h4 border-b border-surface-500/30 pb-2">Site Configuration</h3>
+                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        <Settings size={18} class="text-primary-500" /> Site Configuration
+                    </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <label class="label">
-                            <span>Site Name</span>
-                            <input class="input" type="text" bind:value={site.name} />
-                        </label>
-                        <label class="label">
-                            <span>Site Code</span>
-                            <input class="input" type="text" bind:value={site.code} />
-                        </label>
-                        <label class="label md:col-span-2">
-                            <span>Tagline</span>
-                            <input class="input" type="text" bind:value={site.tagline} />
-                        </label>
-                        <label class="label md:col-span-2">
-                            <span>Description</span>
-                            <textarea class="textarea" rows="2" bind:value={site.description}></textarea>
-                        </label>
+                        <div class="space-y-1">
+                            <label class="label text-xs font-bold opacity-75">Site Name</label>
+                            <input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.name} />
+                        </div>
+                        <div class="space-y-1">
+                            <label class="label text-xs font-bold opacity-75">Site Code</label>
+                            <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.code} />
+                        </div>
+                        <div class="space-y-1 md:col-span-2">
+                            <label class="label text-xs font-bold opacity-75">Tagline</label>
+                            <input class="input variant-filled-surface rounded-lg" type="text" bind:value={site.tagline} />
+                        </div>
+                        <div class="space-y-1 md:col-span-2">
+                            <label class="label text-xs font-bold opacity-75">Description</label>
+                            <textarea class="textarea variant-filled-surface rounded-lg" rows="2" bind:value={site.description}></textarea>
+                        </div>
                     </div>
                 </div>
 
-                <div class="card p-4 space-y-4">
-                    <h3 class="h4 border-b border-surface-500/30 pb-2">Access Control</h3>
+                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        <Key size={18} class="text-secondary-500" /> Access Control
+                    </h3>
                     <div class="flex flex-col gap-4">
-                        <label class="flex items-center space-x-2">
+                        <label class="flex items-center space-x-2 cursor-pointer">
                             <input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
-                            <p>Restrict Access</p>
+                            <span class="text-sm font-medium">Restrict Access</span>
                         </label>
                         {#if site.restrict_access}
-                            <label class="label">
-                                <span>Access Key</span>
-                                <input class="input" type="text" bind:value={site.access_key} />
-                            </label>
+                            <div class="space-y-1 max-w-md animate-fade-in">
+                                <label class="label text-xs font-bold opacity-75">Access Key</label>
+                                <input class="input variant-filled-surface rounded-lg font-mono" type="text" bind:value={site.access_key} />
+                            </div>
                         {/if}
                     </div>
                 </div>
@@ -165,29 +178,31 @@
 
             <!-- Domains Management -->
             <div class="space-y-6">
-                <div class="card p-4 space-y-4">
+                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
                     <header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
-                        <h3 class="h4">Site Domains</h3>
-                        <button class="btn btn-sm variant-filled-secondary" onclick={handle_add_domain}>
+                        <h3 class="h4 font-bold flex items-center gap-2">
+                            <Globe size={18} class="text-tertiary-500" /> Site Domains
+                        </h3>
+                        <button class="btn btn-icon btn-sm variant-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
                             <Plus size={14} />
                         </button>
                     </header>
 
                     {#if domain_li.length === 0}
-                        <p class="text-sm opacity-60 text-center py-4">No domains configured.</p>
+                        <p class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">No domains configured.</p>
                     {:else}
-                        <div class="space-y-2">
+                        <div class="space-y-3">
                             {#each domain_li as dom}
-                                <div class="card p-3 variant-soft flex justify-between items-center">
+                                <div class="card p-3 variant-soft shadow-sm border border-surface-500/10 flex justify-between items-center group">
                                     <div class="flex flex-col">
-                                        <span class="font-medium flex items-center gap-1">
+                                        <span class="font-bold text-sm flex items-center gap-1">
                                             {dom.fqdn}
-                                            <a href="https://{dom.fqdn}" target="_blank" class="opacity-50 hover:opacity-100">
+                                            <a href="https://{dom.fqdn}" target="_blank" class="opacity-30 group-hover:opacity-100 transition-opacity">
                                                 <ExternalLink size={12} />
                                             </a>
                                         </span>
-                                        <span class="text-xs opacity-60">
-                                            Key: <code class="code text-[10px]">{dom.access_key || '--'}</code> | {dom.enable ? 'Active' : 'Disabled'}
+                                        <span class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
+                                            Key: <code class="text-primary-500">{dom.access_key || '--'}</code> &bull; {dom.enable ? 'Active' : 'Disabled'}
                                         </span>
                                     </div>
                                     <div class="flex gap-1">
@@ -204,16 +219,18 @@
                     {/if}
                 </div>
 
-                <div class="card p-4 space-y-4">
-                    <h3 class="h4 border-b border-surface-500/30 pb-2">System Status</h3>
-                    <div class="space-y-4">
-                        <label class="flex items-center space-x-2">
+                <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        <Activity size={18} class="text-error-500" /> System Status
+                    </h3>
+                    <div class="space-y-4 py-2">
+                        <label class="flex items-center space-x-2 cursor-pointer">
                             <input class="checkbox" type="checkbox" bind:checked={site.enable} />
-                            <p>Site Enabled</p>
+                            <span class="text-sm font-medium">Site Enabled</span>
                         </label>
-                        <label class="flex items-center space-x-2">
+                        <label class="flex items-center space-x-2 cursor-pointer">
                             <input class="checkbox" type="checkbox" bind:checked={site.hide} />
-                            <p>Hidden</p>
+                            <span class="text-sm font-medium">Hidden from Public</span>
                         </label>
                     </div>
                 </div>
diff --git a/src/routes/core/users/[user_id]/+page.svelte b/src/routes/core/users/[user_id]/+page.svelte
index f83a11db..53a1bb1e 100644
--- a/src/routes/core/users/[user_id]/+page.svelte
+++ b/src/routes/core/users/[user_id]/+page.svelte
@@ -15,7 +15,10 @@
         Clock,
         Key,
         CheckCircle2,
-        XCircle
+        XCircle,
+        Fingerprint,
+        Activity,
+        Settings
     } from 'lucide-svelte';
 
     interface Props {
@@ -71,27 +74,32 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center">
+    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm variant-soft" href="/core/users">
+            <a class="btn btn-sm variant-soft-surface shadow-sm" href="/core/users">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
-                <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
+                <div class="avatar variant-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
                     <UserIcon size={24} />
                 </div>
                 <div>
-                    <h1 class="h2">{user.username}</h1>
-                    <p class="text-sm opacity-60">ID: {user.user_id_random}</p>
+                    <h1 class="h2 font-black tracking-tight">{user.username}</h1>
+                    <p class="text-[10px] uppercase font-bold tracking-widest opacity-50">UID: {user.user_id_random}</p>
                 </div>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn variant-filled-error" onclick={handle_delete} disabled={saving}>
+            <button class="btn btn-sm variant-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn variant-filled-primary" onclick={handle_save} disabled={saving}>
-                <Save size={16} class="mr-2" /> Save Changes
+            <button class="btn btn-sm variant-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
+                {#if saving}
+                    <span class="animate-spin mr-2">⏳</span>
+                {:else}
+                    <Save size={16} class="mr-2" />
+                {/if}
+                Save Changes
             </button>
         </div>
     </header>
@@ -99,58 +107,61 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Main Info -->
         <div class="lg:col-span-2 space-y-6">
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <UserIcon size={18} /> Basic Profile
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <UserIcon size={18} class="text-primary-500" /> Basic Profile
                 </h3>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <label class="label">
-                        <span>Display Name</span>
-                        <input class="input" type="text" bind:value={user.name} placeholder="Full Name" />
-                    </label>
-                    <label class="label">
-                        <span>Email Address</span>
-                        <input class="input" type="email" bind:value={user.email} />
-                    </label>
-                    <label class="label md:col-span-2">
-                        <span>Username</span>
-                        <input class="input font-mono variant-soft" type="text" bind:value={user.username} disabled />
-                        <p class="text-xs opacity-60 mt-1 italic">Username changes are currently restricted.</p>
-                    </label>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Display Name</label>
+                        <input class="input variant-filled-surface rounded-lg" type="text" bind:value={user.name} placeholder="Full Name" />
+                    </div>
+                    <div class="space-y-1">
+                        <label class="label text-xs font-bold opacity-75">Email Address</label>
+                        <input class="input variant-filled-surface rounded-lg" type="email" bind:value={user.email} />
+                    </div>
+                    <div class="space-y-1 md:col-span-2">
+                        <label class="label text-xs font-bold opacity-75">Username</label>
+                        <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-lg overflow-hidden border border-surface-500/20">
+                            <div class="input-group-shim"><Fingerprint size={16} /></div>
+                            <input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60" type="text" bind:value={user.username} disabled />
+                        </div>
+                        <p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
+                    </div>
                 </div>
             </div>
 
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <ShieldCheck size={18} /> System Permissions
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <ShieldCheck size={18} class="text-secondary-500" /> System Permissions
                 </h3>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
-                    <label class="flex items-center space-x-3 card p-3 variant-soft-error cursor-pointer">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <label class="flex items-center space-x-3 card p-4 variant-soft-error cursor-pointer border border-error-500/20 hover:variant-filled-error transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.super} />
                         <div class="flex flex-col">
-                            <span class="font-bold">Super User</span>
-                            <span class="text-xs opacity-70">Full system access</span>
+                            <span class="font-black uppercase text-xs tracking-widest">Super User</span>
+                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-3 variant-soft-warning cursor-pointer">
+                    <label class="flex items-center space-x-3 card p-4 variant-soft-warning cursor-pointer border border-warning-500/20 hover:variant-filled-warning transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.manager} />
                         <div class="flex flex-col">
-                            <span class="font-bold">Manager</span>
-                            <span class="text-xs opacity-70">Global account & user mgmt</span>
+                            <span class="font-black uppercase text-xs tracking-widest">Manager</span>
+                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-3 variant-soft-primary cursor-pointer">
+                    <label class="flex items-center space-x-3 card p-4 variant-soft-primary cursor-pointer border border-primary-500/20 hover:variant-filled-primary transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.administrator} />
                         <div class="flex flex-col">
-                            <span class="font-bold">Administrator</span>
-                            <span class="text-xs opacity-70">Account-level admin access</span>
+                            <span class="font-black uppercase text-xs tracking-widest">Administrator</span>
+                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-3 variant-soft-secondary cursor-pointer">
+                    <label class="flex items-center space-x-3 card p-4 variant-soft-secondary cursor-pointer border border-secondary-500/20 hover:variant-filled-secondary transition-all group">
                         <input class="checkbox" type="checkbox" bind:checked={user.verified} />
                         <div class="flex flex-col">
-                            <span class="font-bold">Verified User</span>
-                            <span class="text-xs opacity-70">Identity confirmed</span>
+                            <span class="font-black uppercase text-xs tracking-widest">Verified User</span>
+                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Identity confirmed by staff</span>
                         </div>
                     </label>
                 </div>
@@ -159,36 +170,36 @@
 
         <!-- Sidebar / Meta -->
         <div class="space-y-6">
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <Clock size={18} /> Account Status
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <Activity size={18} class="text-tertiary-500" /> Account Status
                 </h3>
-                <div class="space-y-4">
-                    <label class="flex items-center space-x-2">
+                <div class="space-y-4 py-2">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={user.enable} />
-                        <p>Login Enabled</p>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Login Enabled</span>
                     </label>
-                    <label class="flex items-center space-x-2">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={user.hide} />
-                        <p>Hidden from Lists</p>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Lists</span>
                     </label>
-                    <label class="flex items-center space-x-2">
+                    <label class="flex items-center space-x-3 cursor-pointer group">
                         <input class="checkbox" type="checkbox" bind:checked={user.allow_auth_key} />
-                        <p>Allow Email Auth Key</p>
+                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Allow Email Auth Key</span>
                     </label>
                 </div>
             </div>
 
-            <div class="card p-4 space-y-4 variant-soft-surface">
-                <h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <Lock size={18} /> Linking Info
+            <div class="card p-6 space-y-4 shadow-xl variant-soft-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <Lock size={18} class="text-surface-500" /> Linking Info
                 </h3>
-                <div class="space-y-2 text-sm">
-                    <div class="flex justify-between">
-                        <span class="opacity-60">Linked Person:</span>
-                        <span class="font-mono">
+                <div class="space-y-3 text-xs">
+                    <div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
+                        <span class="font-bold opacity-50 uppercase tracking-tighter">Linked Person</span>
+                        <span class="font-mono font-bold">
                             {#if user.person_id_random}
-                                <a href="/core/people/{user.person_id_random}" class="text-primary-500 underline">
+                                <a href="/core/people/{user.person_id_random}" class="text-primary-500 hover:underline">
                                     {user.person_id_random}
                                 </a>
                             {:else}
@@ -196,21 +207,27 @@
                             {/if}
                         </span>
                     </div>
-                    <div class="flex justify-between">
-                        <span class="opacity-60">Account ID:</span>
-                        <span class="font-mono">{user.account_id_random || '--'}</span>
+                    <div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
+                        <span class="font-bold opacity-50 uppercase tracking-tighter">Account Context</span>
+                        <span class="font-mono font-bold">{user.account_id_random || '--'}</span>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-4 space-y-4">
-                <h3 class="h4 border-b border-surface-500/30 pb-2 flex items-center gap-2">
-                    <Clock size={18} /> Timestamps
+            <div class="card p-6 space-y-4 shadow-xl variant-glass-surface border border-surface-500/10">
+                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    <Clock size={18} class="text-surface-500" /> Timestamps
                 </h3>
-                <div class="space-y-2 text-xs">
-                    <p><span class="opacity-60">Created:</span> {new Date(user.created_on).toLocaleString()}</p>
+                <div class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
+                    <div class="flex flex-col gap-1 opacity-60">
+                        <span>Created On</span>
+                        <span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.created_on).toLocaleString()}</span>
+                    </div>
                     {#if user.updated_on}
-                        <p><span class="opacity-60">Updated:</span> {new Date(user.updated_on).toLocaleString()}</p>
+                        <div class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
+                            <span>Last Updated</span>
+                            <span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.updated_on).toLocaleString()}</span>
+                        </div>
                     {/if}
                 </div>
             </div>