From 99df20476362f639ea18665f526170ec0e3ffb3a Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 16 Mar 2026 11:53:07 -0400
Subject: [PATCH] =?UTF-8?q?style:=20Phase=201+2=20=E2=80=94=20FA=E2=86=92L?=
 =?UTF-8?q?ucide,=20variant-*=20=E2=86=92=20preset-*,=20dark=20mode=20form?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 1 (global quick wins):
- app.css: add global dark mode utility for .input/.select/.textarea
- events menu nav + layout: replace all FontAwesome icons with Lucide
- events settings: replace FA icons, standardize variant-* → preset-*

Phase 2 (module-by-module migration):
- root +layout.svelte: fix hardcoded banner colors → preset-filled-error/warning
- journals entry list: replace slate-* with gray-*, HSL eye colors → CSS tokens
- pres mgmt presenter view: variant-soft-warning → preset-tonal-warning, FA edit → Lucide
- badges (4 files): variant-* → preset-*, FA spinner → Lucide Loader2, dynamic alert fix
- events session list + event hub: variant-soft/filled → preset-tonal/filled
- leads module (12 files): complete variant-* → preset-* migration across all
  exhibitor sign-in, QR scanner, manual search, tracking list, manage tab,
  custom questions, license list, exhibit page, lead detail page + form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app.css                                   | 31 +++++++++++++++++++
 src/routes/+layout.svelte                     | 10 +++---
 src/routes/events/+layout.svelte              | 12 ++++---
 .../badges/ae_comp__badge_create_form.svelte  |  7 +++--
 .../badges/ae_comp__badge_upload_form.svelte  | 13 ++++----
 .../(badges)/templates/+page.svelte           |  9 +++---
 .../ae_comp__badge_template_form.svelte       |  7 +++--
 .../leads/exhibit/[exhibit_id]/+page.svelte   | 12 +++----
 .../ae_comp__exhibit_custom_questions.svelte  | 12 +++----
 .../ae_comp__exhibit_license_list.svelte      |  6 ++--
 .../ae_comp__exhibit_signin.svelte            | 12 +++----
 .../ae_comp__exhibit_tracking_obj_li.svelte   |  8 +++--
 .../ae_comp__lead_manual_search.svelte        |  6 ++--
 .../ae_comp__lead_qr_scanner.svelte           | 12 +++----
 .../exhibit/[exhibit_id]/ae_tab__add.svelte   |  6 ++--
 .../[exhibit_id]/ae_tab__manage.svelte        | 22 ++++++-------
 .../exhibit/[exhibit_id]/ae_tab__start.svelte |  6 ++--
 .../lead/[exhibit_tracking_id]/+page.svelte   | 12 +++----
 .../ae_comp__lead_detail_form.svelte          | 10 +++---
 .../[presenter_id]/presenter_view.svelte      |  7 +++--
 src/routes/events/[event_id]/+page.svelte     |  5 +--
 .../events/[event_id]/settings/+page.svelte   | 24 +++++++-------
 .../ae_comp__event_session_obj_li.svelte      |  2 +-
 .../events/ae_comp__events_menu_nav.svelte    | 20 ++++++------
 .../ae_comp__journal_entry_obj_li.svelte      | 10 +++---
 25 files changed, 159 insertions(+), 122 deletions(-)

diff --git a/src/app.css b/src/app.css
index d6bb39d5..c311db8b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -137,6 +137,37 @@ html.light { color-scheme: light; }
     }
 }
 
+/* ============================================================
+ * Global dark mode fix for Skeleton UI form elements.
+ *
+ * Skeleton v3 form classes (.input, .select, .textarea) do not
+ * include dark mode styles — browser renders them light even when
+ * html.dark is active, producing white text on white backgrounds.
+ *
+ * This eliminates the need for per-component <style> patches.
+ * Components that previously had local overrides for this can
+ * remove them and rely on this rule instead.
+ *
+ * Matches the gray-700 bg / gray-100 text palette used throughout
+ * the app for dark mode neutral surfaces.
+ * ============================================================ */
+.dark .input:not([type='checkbox']):not([type='radio']):not([type='range']),
+.dark .select,
+.dark .textarea {
+    color: rgb(243 244 246);         /* gray-100 */
+    background-color: rgb(55 65 81); /* gray-700 */
+    border-color: rgb(75 85 99);     /* gray-600 */
+}
+.dark .input::placeholder,
+.dark .textarea::placeholder {
+    color: rgb(156 163 175);         /* gray-400 — legible at reduced opacity */
+}
+/* Option elements in dark selects — forces browser native dark chrome */
+.dark .select option {
+    color: rgb(243 244 246);
+    background-color: rgb(55 65 81);
+}
+
 /* There are no more Tailwind layers. */
 
 html,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0aa82a2d..e97ca68b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -291,18 +291,18 @@
 </svelte:head>
 
 {#if browser && (is_offline || api_unreachable)}
-    <div class="print:hidden fixed top-0 left-0 right-0 z-100 p-4 bg-orange-600/90 text-white text-center shadow-2xl flex items-center justify-center gap-4">
+    <div class="print:hidden fixed top-0 left-0 right-0 z-100 p-4 preset-filled-error-500 text-center shadow-2xl flex items-center justify-center gap-4">
         <span class="text-xl font-bold">{is_offline ? 'Offline' : api_error_msg}</span>
-        <button class="btn btn-sm variant-filled-white text-orange-600" onclick={() => window.location.reload()}>Retry</button>
+        <button class="btn btn-sm preset-tonal-surface" onclick={() => window.location.reload()}>Retry</button>
     </div>
 {/if}
 
 {#if browser && flag_expired}
-    <div class="print:hidden fixed top-0 left-0 right-0 z-50 px-4 py-2 bg-amber-500 text-white shadow-xl flex items-center justify-between gap-4">
+    <div class="print:hidden fixed top-0 left-0 right-0 z-50 px-4 py-2 preset-filled-warning-500 shadow-xl flex items-center justify-between gap-4">
         <p class="text-sm font-semibold">Your session has expired. Please reload or sign in again.</p>
         <div class="flex gap-2 items-center shrink-0">
-            <button class="btn btn-sm variant-filled-white text-amber-700" onclick={() => window.location.reload()}>Reload</button>
-            <button class="btn btn-sm" onclick={() => { flag_expired = false; ae_auth_error.set({ type: null, ts: null }); }}>✕</button>
+            <button class="btn btn-sm preset-tonal-surface" onclick={() => window.location.reload()}>Reload</button>
+            <button class="btn btn-sm preset-outlined-surface" onclick={() => { flag_expired = false; ae_auth_error.set({ type: null, ts: null }); }}>✕</button>
         </div>
     </div>
 {/if}
diff --git a/src/routes/events/+layout.svelte b/src/routes/events/+layout.svelte
index cf9a5852..b3f7096e 100644
--- a/src/routes/events/+layout.svelte
+++ b/src/routes/events/+layout.svelte
@@ -14,7 +14,9 @@
         House,
         Library,
         RefreshCw,
-        Satellite
+        Satellite,
+        ArrowUp,
+        ArrowDown
     } from '@lucide/svelte';
 
     // *** Import Aether specific variables and functions
@@ -171,7 +173,7 @@
             }}
             title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version."
         >
-            <span class="fas fa-sync-alt fa-spin m-1"></span>
+            <RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
             <span class="m-4 sm:mx-8 text-wrap">
                 New Events Module Version Available!<br />
                 Click to Reload<br />
@@ -179,7 +181,7 @@
                     You may need to sign in again.
                 </div>
             </span>
-            <span class="fas fa-sync-alt fa-spin m-1"></span>
+            <RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
 
             <!-- <span class="text-xs">
             $events_loc.ver=${$events_loc?.ver}<br>
@@ -317,7 +319,7 @@
             }}
             title="Scroll to top"
         >
-            <span class="fas fa-arrow-up"></span>
+            <ArrowUp size="1em" aria-hidden="true" />
             Scroll to Top
         </button>
 
@@ -346,7 +348,7 @@
             }}
             title="Scroll to bottom"
         >
-            <span class="fas fa-arrow-down"></span>
+            <ArrowDown size="1em" aria-hidden="true" />
             Scroll to Bottom
             <!-- yTop={yTop} yScroll={yScroll} yHeight={yHeight} scroll_y={scroll_y} scrollTop={scroll_container().scrollTop} total={scroll_container().scrollTop + yHeight} -->
         </button>
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
index 6e699ee8..d60b42ce 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_create_form.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     // import { createEventDispatcher } from 'svelte';
+    import { Loader2 } from '@lucide/svelte';
     import type { key_val } from '$lib/stores/ae_stores';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
@@ -126,16 +127,16 @@
     <div class="flex justify-end gap-2">
         <button
             type="button"
-            class="btn variant-filled-tertiary"
+            class="btn preset-tonal-surface"
             onclick={handle_cancel}>Cancel</button
         >
         <button
             type="submit"
-            class="btn variant-filled-primary"
+            class="btn preset-filled-primary"
             disabled={submit_status === 'loading'}
         >
             {#if submit_status === 'loading'}
-                <span class="fas fa-spinner fa-spin mr-2"></span>
+                <Loader2 size="1em" class="animate-spin" aria-hidden="true" />
             {/if}
             Create Badge
         </button>
diff --git a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
index 694bd89e..e19b0ad6 100644
--- a/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_upload_form.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     // import { createEventDispatcher } from 'svelte';
+    import { Loader2 } from '@lucide/svelte';
     import type { key_val } from '$lib/stores/ae_stores';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
@@ -159,9 +160,9 @@
 
     {#if upload_status !== 'idle'}
         <div
-            class="alert variant-soft-{upload_status === 'error'
-                ? 'error'
-                : 'info'}"
+            class="alert"
+            class:preset-tonal-error={upload_status === 'error'}
+            class:preset-tonal-surface={upload_status !== 'error'}
         >
             <p>{upload_message}</p>
             {#if upload_status === 'processing' || upload_status === 'loading'}
@@ -180,20 +181,20 @@
     <div class="flex justify-end gap-2">
         <button
             type="button"
-            class="btn variant-filled-tertiary"
+            class="btn preset-tonal-surface"
             onclick={handle_cancel}
             disabled={upload_status === 'loading' ||
                 upload_status === 'processing'}>Cancel</button
         >
         <button
             type="submit"
-            class="btn variant-filled-primary"
+            class="btn preset-filled-primary"
             disabled={!selected_file ||
                 upload_status === 'loading' ||
                 upload_status === 'processing'}
         >
             {#if upload_status === 'loading' || upload_status === 'processing'}
-                <span class="fas fa-spinner fa-spin mr-2"></span>
+                <Loader2 size="1em" class="animate-spin" aria-hidden="true" />
             {/if}
             Upload Badges
         </button>
diff --git a/src/routes/events/[event_id]/(badges)/templates/+page.svelte b/src/routes/events/[event_id]/(badges)/templates/+page.svelte
index 9e3df4ee..b59fd919 100644
--- a/src/routes/events/[event_id]/(badges)/templates/+page.svelte
+++ b/src/routes/events/[event_id]/(badges)/templates/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { liveQuery } from 'dexie';
+    import { Pencil, Trash2 } from '@lucide/svelte';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
     import { events_slct } from '$lib/stores/ae_events_stores';
@@ -103,23 +104,23 @@
                             <div>
                                 <button
                                     type="button"
-                                    class="btn btn-sm variant-filled-primary"
+                                    class="btn btn-sm preset-filled-primary"
                                     onclick={() =>
                                         edit_template(
                                             template.event_badge_template_id
                                         )}
                                 >
-                                    <span class="fas fa-edit"></span> Edit
+                                    <Pencil size="1em" aria-hidden="true" /> Edit
                                 </button>
                                 <button
                                     type="button"
-                                    class="btn btn-sm variant-filled-error ml-2"
+                                    class="btn btn-sm preset-filled-error ml-2"
                                     onclick={() =>
                                         delete_template(
                                             template.event_badge_template_id
                                         )}
                                 >
-                                    <span class="fas fa-trash"></span> Delete
+                                    <Trash2 size="1em" aria-hidden="true" /> Delete
                                 </button>
                             </div>
                         </li>
diff --git a/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte b/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
index 3fcd66d6..0e937fab 100644
--- a/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
+++ b/src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { untrack } from 'svelte';
+    import { Loader2 } from '@lucide/svelte';
     import type { key_val } from '$lib/stores/ae_stores';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
@@ -217,17 +218,17 @@
     <div class="flex justify-end gap-2">
         <button
             type="button"
-            class="btn variant-filled-tertiary"
+            class="btn preset-tonal-surface"
             onclick={handle_cancel}
             disabled={submit_status === 'loading'}>Cancel</button
         >
         <button
             type="submit"
-            class="btn variant-filled-primary"
+            class="btn preset-filled-primary"
             disabled={submit_status === 'loading'}
         >
             {#if submit_status === 'loading'}
-                <span class="fas fa-spinner fa-spin mr-2"></span>
+                <Loader2 size="1em" class="animate-spin" aria-hidden="true" />
             {/if}
             {template_id ? 'Save Changes' : 'Create Template'}
         </button>
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/+page.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/+page.svelte
index c7aac759..e93fa120 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/+page.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/+page.svelte
@@ -398,7 +398,7 @@
                 <!-- Add Lead / Lead List Toggle -->
                 <button
                     type="button"
-                    class="btn btn-sm variant-filled-primary font-bold shadow-sm px-2 sm:px-4"
+                    class="btn btn-sm preset-filled-primary font-bold shadow-sm px-2 sm:px-4"
                     onclick={toggle_main_tab}
                 >
                     {#if active_tab === 'add'}
@@ -415,8 +415,8 @@
                     <button
                         type="button"
                         class="btn btn-sm transition-colors px-2 sm:px-3"
-                        class:variant-filled-success={active_tab === 'payment'}
-                        class:variant-ghost-success={active_tab !== 'payment'}
+                        class:preset-filled-success={active_tab === 'payment'}
+                        class:preset-outlined-success={active_tab !== 'payment'}
                         onclick={() => set_active_tab('payment')}
                         title="Payment & Upgrades"
                     >
@@ -428,8 +428,8 @@
                 <button
                     type="button"
                     class="btn btn-sm transition-colors px-2 sm:px-3"
-                    class:variant-filled-surface={active_tab === 'manage'}
-                    class:variant-ghost-surface={active_tab !== 'manage'}
+                    class:preset-tonal-surface={active_tab === 'manage'}
+                    class:preset-outlined-surface={active_tab !== 'manage'}
                     onclick={toggle_manage_tab}
                     title="Manage Exhibit"
                 >
@@ -459,7 +459,7 @@
                         <h2 class="text-xl sm:text-2xl font-bold">Lead List</h2>
                         <button
                             type="button"
-                            class="btn btn-sm variant-ghost-secondary"
+                            class="btn btn-sm preset-outlined-secondary"
                             onclick={handle_export}
                         >
                             <Download size="1.2em" class="mr-2" /> Export
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_custom_questions.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_custom_questions.svelte
index b5120c22..5705976f 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_custom_questions.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_custom_questions.svelte
@@ -100,12 +100,12 @@
 
     <div class="space-y-3">
         {#each questions as q, i (i)}
-            <div class="card p-4 variant-soft border border-surface-500/10 space-y-3 animate-in fade-in slide-in-from-right-2">
+            <div class="card p-4 preset-tonal-surface border border-surface-500/10 space-y-3 animate-in fade-in slide-in-from-right-2">
                 <!-- Question header row: number + delete (always visible for mobile) -->
                 <div class="flex items-center justify-between">
                     <span class="text-[10px] uppercase font-black opacity-30 tracking-widest">Question {i + 1}</span>
                     <button
-                        class="btn btn-sm variant-ghost-error px-2 py-1"
+                        class="btn btn-sm preset-outlined-error px-2 py-1"
                         onclick={() => remove_question(i)}
                         title="Remove question"
                     >
@@ -133,7 +133,7 @@
                 <!-- Response Type -->
                 <div class="space-y-1">
                     <label class="text-[10px] uppercase font-bold opacity-40" for="custom-q-{i}-type">Response Type</label>
-                    <select id="custom-q-{i}-type" bind:value={q.type} class="select variant-filled-surface text-xs p-1 rounded w-full">
+                    <select id="custom-q-{i}-type" bind:value={q.type} class="select preset-tonal-surface text-xs p-1 rounded w-full">
                         <option value="text">Short Text</option>
                         <option value="textarea">Long Text</option>
                         <option value="toggle">Yes / No (Toggle)</option>
@@ -174,13 +174,13 @@
     {/if}
 
     <div class="flex gap-2 pt-2">
-        <button class="btn btn-sm variant-filled-secondary flex-1" onclick={add_question}>
+        <button class="btn btn-sm preset-filled-secondary flex-1" onclick={add_question}>
             <Plus size="1.2em" class="mr-2" /> Add Question
         </button>
         <button
             class="btn btn-sm flex-1 transition-all"
-            class:variant-filled-primary={is_dirty}
-            class:variant-ghost-surface={!is_dirty}
+            class:preset-filled-primary={is_dirty}
+            class:preset-outlined-surface={!is_dirty}
             onclick={save_questions}
             disabled={is_saving || !is_dirty}
         >
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_license_list.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_license_list.svelte
index cd4c369c..a2f56bf8 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_license_list.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_license_list.svelte
@@ -98,7 +98,7 @@
 
     <div class="space-y-3">
         {#each local_license_li as license, i (i)}
-            <div class="card p-4 variant-soft border border-surface-500/10 space-y-3 relative group animate-in fade-in slide-in-from-right-2">
+            <div class="card p-4 preset-tonal-surface border border-surface-500/10 space-y-3 relative group animate-in fade-in slide-in-from-right-2">
                 <button 
                     class="absolute top-2 right-2 p-2 text-error-500 opacity-0 group-hover:opacity-100 transition-opacity"
                     onclick={() => remove_license(i)}
@@ -152,7 +152,7 @@
 
     <div class="flex gap-2 pt-2">
         <button 
-            class="btn btn-sm variant-filled-secondary flex-1" 
+            class="btn btn-sm preset-filled-secondary flex-1" 
             onclick={add_license}
             disabled={local_license_li.length >= (license_max || 1)}
         >
@@ -160,7 +160,7 @@
         </button>
 
         <button 
-            class="btn btn-sm variant-filled-primary flex-1" 
+            class="btn btn-sm preset-filled-primary flex-1" 
             onclick={save_licenses}
             disabled={is_saving}
         >
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_signin.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_signin.svelte
index 3d64a89c..d27030a7 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_signin.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_signin.svelte
@@ -101,7 +101,7 @@
     }
 </script>
 
-<div class="exhibit-signin card p-6 variant-filled-surface shadow-xl border border-surface-500/20 space-y-6">
+<div class="exhibit-signin card p-6 preset-tonal-surface shadow-xl border border-surface-500/20 space-y-6">
 
     <!-- Tab Toggle -->
     <div class="flex p-1 bg-surface-500/10 rounded-xl">
@@ -132,7 +132,7 @@
             <div class="space-y-2 animate-in fade-in slide-in-from-left-2">
                 <label class="label">
                     <span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Booth Passcode</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-xl overflow-hidden border border-surface-500/20">
                         <div class="input-group-shim"><Key size="1.2em" /></div>
                         <input
                             type="text"
@@ -148,7 +148,7 @@
             <div class="space-y-4 animate-in fade-in slide-in-from-right-2">
                 <label class="label">
                     <span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Email Address</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-xl overflow-hidden border border-surface-500/20">
                         <div class="input-group-shim"><Mail size="1.2em" /></div>
                         <input
                             type="email"
@@ -161,7 +161,7 @@
 
                 <label class="label">
                     <span class="text-[10px] uppercase font-bold opacity-50 ml-1 tracking-widest">Personal Passcode</span>
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] variant-soft rounded-xl overflow-hidden border border-surface-500/20">
+                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-xl overflow-hidden border border-surface-500/20">
                         <div class="input-group-shim"><Key size="1.2em" /></div>
                         <input
                             type="text"
@@ -176,7 +176,7 @@
         {/if}
 
         {#if status === 'error'}
-            <div class="p-3 rounded-lg variant-soft-error flex items-start gap-3 animate-shake">
+            <div class="p-3 rounded-lg preset-tonal-error flex items-start gap-3 animate-shake">
                 <CircleAlert size="1.2em" class="shrink-0 mt-0.5" />
                 <p class="text-xs font-bold leading-tight">{error_msg}</p>
             </div>
@@ -184,7 +184,7 @@
 
         <button
             type="submit"
-            class="btn btn-lg variant-filled-primary w-full font-bold shadow-lg shadow-primary-500/20 group"
+            class="btn btn-lg preset-filled-primary w-full font-bold shadow-lg shadow-primary-500/20 group"
             disabled={status === 'submitting'}
         >
             {#if status === 'submitting'}
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_obj_li.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_obj_li.svelte
index 910182d5..989e1724 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_obj_li.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_tracking_obj_li.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { Loader2 } from '@lucide/svelte';
+
     interface Props {
         lq__event_exhibit_tracking_obj_li: any;
         log_lvl?: number;
@@ -64,10 +66,10 @@
 <div class="ae_comp__exhibit_tracking_obj_li w-full px-2 sm:px-4">
     {#if !lq__event_exhibit_tracking_obj_li}
         <div class="flex justify-center p-10">
-            <span class="fas fa-spinner fa-spin fa-2x opacity-20"></span>
+            <Loader2 size="2rem" class="animate-spin opacity-20" aria-hidden="true" />
         </div>
     {:else if lq__event_exhibit_tracking_obj_li.length === 0}
-        <div class="card p-8 text-center variant-soft-surface">
+        <div class="card p-8 text-center preset-tonal-surface">
             <p class="text-xl opacity-50">No leads found yet.</p>
             <p class="text-sm opacity-50 mt-2">
                 Start scanning badges to collect leads!
@@ -85,7 +87,7 @@
                 {#each lq__event_exhibit_tracking_obj_li as event_tracking_obj (event_tracking_obj.event_exhibit_tracking_id)}
                     <a
                         href={`/events/${page.params.event_id}/leads/exhibit/${event_tracking_obj.event_exhibit_id}/lead/${event_tracking_obj.event_exhibit_tracking_id}`}
-                        class="card card-hover p-4 variant-filled-surface border-l-4 border-primary-500 flex flex-col md:flex-row gap-4 items-start md:items-center"
+                        class="card card-hover p-4 preset-tonal-surface border-l-4 border-primary-500 flex flex-col md:flex-row gap-4 items-start md:items-center"
                     >
                         <div class="flex-grow space-y-1">
                             <div class="flex items-center gap-2">
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_manual_search.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_manual_search.svelte
index eb536b57..6a037d6d 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_manual_search.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_manual_search.svelte
@@ -142,7 +142,7 @@
             {#each results as badge (badge.event_badge_id_random ?? badge.event_badge_id)}
                 {@const badge_id = badge.event_badge_id_random || badge.event_badge_id}
                 {@const existing_id = $existing_leads_map?.get(badge_id) ?? (last_added_badge_id === badge_id ? last_added_tracking_id : '')}
-                <div class="card p-3 flex justify-between items-center variant-soft shadow-sm">
+                <div class="card p-3 flex justify-between items-center preset-tonal-surface shadow-sm">
                     <div>
                         <div class="font-bold">{badge.full_name}</div>
                         <div class="text-xs opacity-70">{badge.affiliations || badge.email || ''}</div>
@@ -151,14 +151,14 @@
                     {#if existing_id}
                         <a
                             href={`/events/${page.params.event_id}/leads/exhibit/${exhibit_id}/lead/${existing_id}`}
-                            class="btn btn-sm variant-filled-secondary"
+                            class="btn btn-sm preset-filled-secondary"
                         >
                             <Eye size="1em" class="mr-1" />
                             View
                         </a>
                     {:else if add_error_id === badge_id}
                         <span class="text-xs text-error-500 font-bold">Add failed — retry?
-                            <button type="button" class="btn btn-sm variant-ghost-error ml-1" onclick={() => add_as_lead(badge)}>
+                            <button type="button" class="btn btn-sm preset-outlined-error ml-1" onclick={() => add_as_lead(badge)}>
                                 Retry
                             </button>
                         </span>
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_qr_scanner.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_qr_scanner.svelte
index e5f1a96b..67579e9b 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_qr_scanner.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__lead_qr_scanner.svelte
@@ -140,7 +140,7 @@
         <p class="text-center opacity-70 italic text-sm">Point camera at the badge QR code</p>
 
     {:else if scanning_status === 'already_added'}
-        <div class="card p-6 w-full max-w-md space-y-4 variant-soft-secondary shadow-xl border-2 border-secondary-500 animate-in zoom-in">
+        <div class="card p-6 w-full max-w-md space-y-4 preset-tonal-secondary shadow-xl border-2 border-secondary-500 animate-in zoom-in">
             <div class="text-center space-y-2">
                 <CheckCircle size="3em" class="mx-auto text-secondary-500" />
                 <h3 class="h3 font-bold">Already Captured</h3>
@@ -150,7 +150,7 @@
 
             <a
                 href={`/events/${page.params.event_id}/leads/exhibit/${exhibit_id}/lead/${existing_tracking_id}`}
-                class="btn btn-xl w-full variant-filled-secondary font-bold py-6"
+                class="btn btn-xl w-full preset-filled-secondary font-bold py-6"
             >
                 <Eye size="1.5em" class="mr-2" />
                 View Lead Details
@@ -166,7 +166,7 @@
         </div>
 
     {:else if scanning_status === 'found' || scanning_status === 'adding'}
-        <div class="card p-6 w-full max-w-md space-y-4 variant-soft-primary shadow-xl border-2 border-primary-500">
+        <div class="card p-6 w-full max-w-md space-y-4 preset-tonal-primary shadow-xl border-2 border-primary-500">
             <div class="text-center">
                 <h3 class="h3 font-bold">{found_badge?.full_name || 'Badge Found'}</h3>
                 <p class="opacity-70">{found_badge?.affiliations || ''}</p>
@@ -198,7 +198,7 @@
         </div>
 
     {:else if scanning_status === 'success'}
-        <div class="card p-10 w-full max-w-md flex flex-col items-center space-y-4 variant-soft-success shadow-xl">
+        <div class="card p-10 w-full max-w-md flex flex-col items-center space-y-4 preset-tonal-success shadow-xl">
             <CheckCircle size="4em" class="text-success-500 animate-bounce" />
             <div class="text-center">
                 <h3 class="h4 font-bold">Lead Added!</h3>
@@ -208,7 +208,7 @@
             {#if new_tracking_id}
                 <a
                     href={`/events/${page.params.event_id}/leads/exhibit/${exhibit_id}/lead/${new_tracking_id}`}
-                    class="btn btn-sm variant-ghost-surface w-full"
+                    class="btn btn-sm preset-outlined-surface w-full"
                 >
                     <Eye size="1em" class="mr-1" /> View Details
                 </a>
@@ -217,7 +217,7 @@
         </div>
 
     {:else if scanning_status === 'error'}
-        <div class="card p-6 w-full max-w-md flex flex-col items-center space-y-4 variant-soft-error">
+        <div class="card p-6 w-full max-w-md flex flex-col items-center space-y-4 preset-tonal-error">
             <CircleAlert size="3em" class="text-error-500" />
             <p class="text-center font-bold">{error_msg}</p>
             <button type="button" class="btn btn-sm preset-filled-error" onclick={reset_scanner}>
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__add.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__add.svelte
index 89629e2b..23948770 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__add.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__add.svelte
@@ -49,7 +49,7 @@
         <!-- QR / Search toggle (takes remaining space) -->
         <button
             type="button"
-            class="btn btn-sm variant-filled-secondary font-bold shadow-sm px-4 py-2.5 flex items-center gap-2 flex-1 transition-all"
+            class="btn btn-sm preset-filled-secondary font-bold shadow-sm px-4 py-2.5 flex items-center gap-2 flex-1 transition-all"
             onclick={() => set_mode(mode === 'qr' ? 'search' : 'qr')}
         >
             {#if mode === 'qr'}
@@ -68,7 +68,7 @@
                     type="button"
                     class="btn btn-sm px-3 py-2.5 rounded-none transition-all"
                     class:preset-filled-primary={scan_qualify === 'rapid'}
-                    class:variant-ghost-surface={scan_qualify !== 'rapid'}
+                    class:preset-outlined-surface={scan_qualify !== 'rapid'}
                     onclick={() => set_scan_qualify('rapid')}
                     title="Rapid Scan — reset immediately and scan the next person"
                 >
@@ -78,7 +78,7 @@
                     type="button"
                     class="btn btn-sm px-3 py-2.5 rounded-none border-l border-surface-500/20 transition-all"
                     class:preset-filled-secondary={scan_qualify === 'qualify'}
-                    class:variant-ghost-surface={scan_qualify !== 'qualify'}
+                    class:preset-outlined-surface={scan_qualify !== 'qualify'}
                     onclick={() => set_scan_qualify('qualify')}
                     title="Qualify Mode — open lead detail after adding to fill in notes"
                 >
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
index a4b97754..c498d741 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
@@ -65,7 +65,7 @@
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <!-- Priority / Payment Toggle -->
-                <div class="card p-3 variant-soft flex items-center justify-between">
+                <div class="card p-3 preset-tonal-surface flex items-center justify-between">
                     <div class="text-[10px] uppercase font-black opacity-40">Payment Status</div>
                     <Element_ae_obj_field_editor_v3
                         object_type="event_exhibit"
@@ -80,7 +80,7 @@
                 </div>
 
                 <!-- Max Licenses -->
-                <div class="card p-3 variant-soft flex items-center justify-between">
+                <div class="card p-3 preset-tonal-surface flex items-center justify-between">
                     <div class="text-[10px] uppercase font-black opacity-40">Max Licenses</div>
                     <Element_ae_obj_field_editor_v3
                         object_type="event_exhibit"
@@ -94,7 +94,7 @@
                 </div>
 
                 <!-- Small Devices -->
-                <div class="card p-3 variant-soft flex items-center justify-between">
+                <div class="card p-3 preset-tonal-surface flex items-center justify-between">
                     <div class="text-[10px] uppercase font-black opacity-40">Small Devices</div>
                     <Element_ae_obj_field_editor_v3
                         object_type="event_exhibit"
@@ -108,7 +108,7 @@
                 </div>
 
                 <!-- Large Devices -->
-                <div class="card p-3 variant-soft flex items-center justify-between">
+                <div class="card p-3 preset-tonal-surface flex items-center justify-between">
                     <div class="text-[10px] uppercase font-black opacity-40">Large Devices</div>
                     <Element_ae_obj_field_editor_v3
                         object_type="event_exhibit"
@@ -133,7 +133,7 @@
 
         <div class="grid grid-cols-1 gap-6">
             <!-- Name -->
-            <div class="card p-4 variant-soft shadow-sm">
+            <div class="card p-4 preset-tonal-surface shadow-sm">
                 <div class="label mb-2">
                     <span class="text-xs uppercase font-black opacity-40 tracking-widest">Exhibitor Name</span>
                 </div>
@@ -151,7 +151,7 @@
             </div>
 
             <!-- Description -->
-            <div class="card p-4 variant-soft shadow-sm">
+            <div class="card p-4 preset-tonal-surface shadow-sm">
                 <div class="label mb-2">
                     <span class="text-xs uppercase font-black opacity-40 tracking-widest">Booth Description / Promo</span>
                 </div>
@@ -222,7 +222,7 @@
         <!-- Sign Out -->
         {#if !$ae_loc.manager_access}
             <button
-                class="btn variant-ghost-error w-full mt-2"
+                class="btn preset-outlined-error w-full mt-2"
                 onclick={handle_signout}
             >
                 <LogOut size="1.2em" class="mr-2" /> Sign Out of Booth
@@ -339,7 +339,7 @@
             <h3 class="text-lg font-bold uppercase tracking-wider">App Settings</h3>
         </div>
 
-        <div class="card p-4 space-y-6 variant-soft shadow-inner">
+        <div class="card p-4 space-y-6 preset-tonal-surface shadow-inner">
             <!-- Interface Prefs -->
             <div class="space-y-3">
                 <div class="text-[10px] uppercase font-black opacity-40 tracking-widest">Interface Preferences</div>
@@ -396,17 +396,17 @@
             <div class="space-y-3">
                 <div class="text-[10px] uppercase font-black opacity-40 tracking-widest">Maintenance & Reset</div>
                 <div class="grid grid-cols-2 gap-2">
-                    <button class="btn btn-sm variant-filled-warning" onclick={() => window.location.reload()}>
+                    <button class="btn btn-sm preset-filled-warning" onclick={() => window.location.reload()}>
                         <span class="fas fa-sync mr-2"></span> Reload App
                     </button>
-                    <button class="btn btn-sm variant-ghost-error" onclick={() => {
+                    <button class="btn btn-sm preset-outlined-error" onclick={() => {
                         if(confirm('Clear all local cached data (IDB)?')) {
                             db_events.delete().then(() => window.location.reload());
                         }
                     }}>
                         <span class="fas fa-database mr-2"></span> Clear IDB
                     </button>
-                    <button class="btn btn-sm variant-ghost-error col-span-2" onclick={() => {
+                    <button class="btn btn-sm preset-outlined-error col-span-2" onclick={() => {
                         if(confirm('Reset all local app settings and sign out?')) {
                             localStorage.clear();
                             window.location.reload();
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__start.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__start.svelte
index d2bf87d0..b2fe8513 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__start.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__start.svelte
@@ -37,15 +37,15 @@
 
     <!-- Features Grid (Compact) -->
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl mx-auto px-4">
-        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
+        <div class="flex flex-col items-center text-center p-4 rounded-xl preset-tonal-surface">
             <CircleCheck size="1.5em" class="text-success-500 mb-2" />
             <span class="text-xs font-bold uppercase tracking-wider">Fast Capture</span>
         </div>
-        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
+        <div class="flex flex-col items-center text-center p-4 rounded-xl preset-tonal-surface">
             <UserCheck size="1.5em" class="text-secondary-500 mb-2" />
             <span class="text-xs font-bold uppercase tracking-wider">Staff IDs</span>
         </div>
-        <div class="flex flex-col items-center text-center p-4 rounded-xl variant-soft-surface">
+        <div class="flex flex-col items-center text-center p-4 rounded-xl preset-tonal-surface">
             <ShieldCheck size="1.5em" class="text-primary-500 mb-2" />
             <span class="text-xs font-bold uppercase tracking-wider">Secure Sync</span>
         </div>
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/+page.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/+page.svelte
index 450da580..698351ff 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/+page.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/+page.svelte
@@ -63,7 +63,7 @@
         <div class="flex items-center gap-4">
             <a
                 href={`/events/${page.params.event_id}/leads/exhibit/${page.params.exhibit_id}`}
-                class="btn btn-sm variant-ghost-surface"
+                class="btn btn-sm preset-outlined-surface"
             >
                 <ChevronLeft size="1.2em" />
                 <span class="hidden sm:inline ml-1">Back</span>
@@ -75,8 +75,8 @@
             {#if $lq__lead_obj}
                 <button 
                     class="btn btn-sm"
-                    class:variant-filled-primary={is_edit_mode}
-                    class:variant-ghost-surface={!is_edit_mode}
+                    class:preset-filled-primary={is_edit_mode}
+                    class:preset-outlined-surface={!is_edit_mode}
                     onclick={() => is_edit_mode = !is_edit_mode}
                 >
                     {#if is_edit_mode}
@@ -88,7 +88,7 @@
             {/if}
 
             {#if $lq__lead_obj?.priority}
-                <span class="badge variant-filled-warning font-bold flex items-center gap-1">
+                <span class="badge preset-filled-warning font-bold flex items-center gap-1">
                     <Star size="1em" fill="currentColor" />
                     Priority
                 </span>
@@ -109,7 +109,7 @@
                 <!-- Left: Profile Info -->
                 <div class="lg:col-span-2 space-y-6">
                     <!-- Attendee Core Identity -->
-                    <div class="card p-4 variant-soft shadow-lg border-l-4 border-primary-500 space-y-2">
+                    <div class="card p-4 preset-tonal-surface shadow-lg border-l-4 border-primary-500 space-y-2">
                         <!-- Name row: small inline icon -->
                         <div class="flex items-center gap-2">
                             <User size="1.4em" class="text-primary-500 flex-none" />
@@ -255,7 +255,7 @@
                     </div>
 
                     <!-- Status Indicator -->
-                    <div class="card p-4 flex items-center gap-3 variant-soft shadow-sm">
+                    <div class="card p-4 flex items-center gap-3 preset-tonal-surface shadow-sm">
                         {#if is_edit_mode}
                             <div class="flex-1 flex items-center justify-between">
                                 <div class="font-bold text-sm">Enabled</div>
diff --git a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/ae_comp__lead_detail_form.svelte b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/ae_comp__lead_detail_form.svelte
index 1eb596a5..33b274c7 100644
--- a/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/ae_comp__lead_detail_form.svelte
+++ b/src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/lead/[exhibit_tracking_id]/ae_comp__lead_detail_form.svelte
@@ -108,13 +108,13 @@
                     {#if q.type === 'textarea'}
                         <textarea
                             bind:value={flat_responses[key]}
-                            class="textarea variant-filled-surface rounded-lg p-3 text-sm"
+                            class="textarea rounded-lg p-3 text-sm"
                             rows="3"
                             placeholder="Type response..."
                         ></textarea>
 
                     {:else if q.type === 'toggle'}
-                        <div class="flex items-center gap-4 p-3 variant-soft rounded-lg">
+                        <div class="flex items-center gap-4 p-3 preset-tonal-surface rounded-lg">
                             <input
                                 type="checkbox"
                                 bind:checked={flat_responses[key]}
@@ -127,7 +127,7 @@
                         <!-- type 'option' is the current schema; 'select' is legacy compat -->
                         <select
                             bind:value={flat_responses[key]}
-                            class="select variant-filled-surface rounded-lg p-3 text-sm"
+                            class="select rounded-lg p-3 text-sm"
                         >
                             {#if Array.isArray(q.option_li)}
                                 {#each q.option_li as opt (opt)}
@@ -146,7 +146,7 @@
                         <input
                             type="text"
                             bind:value={flat_responses[key]}
-                            class="input variant-filled-surface rounded-lg p-3 text-sm"
+                            class="input rounded-lg p-3 text-sm"
                             placeholder="Type response..."
                         />
                     {/if}
@@ -160,7 +160,7 @@
     {/if}
 
     <button
-        class="btn variant-filled-primary w-full font-bold shadow-lg"
+        class="btn preset-filled-primary w-full font-bold shadow-lg"
         disabled={status === 'saving'}
         onclick={handle_save}
     >
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
index 69fadc60..b84aa007 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_view.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { Pencil } from '@lucide/svelte';
+
     interface Props {
         log_lvl?: number;
         // export let event_presenter_id: string;
@@ -866,11 +868,10 @@
 
         <button type="button"
             title="Edit your passcode"
-            class="btn btn-sm variant-soft-warning"
+            class="btn btn-sm preset-tonal-warning"
             class:hidden={!$ae_loc.trusted_access}
             >
-            <span class="fas fa-edit">
-            </span>
+            <Pencil size="1em" aria-hidden="true" />
             Edit
         </button> -->
             </li>
diff --git a/src/routes/events/[event_id]/+page.svelte b/src/routes/events/[event_id]/+page.svelte
index 1c739f41..d2884699 100644
--- a/src/routes/events/[event_id]/+page.svelte
+++ b/src/routes/events/[event_id]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { liveQuery } from 'dexie';
+    import { Wrench } from '@lucide/svelte';
     import { db_events } from '$lib/ae_events/db_events';
     import { ae_util } from '$lib/ae_utils/ae_utils';
     import { events_slct } from '$lib/stores/ae_events_stores';
@@ -93,9 +94,9 @@
     </div>
 
     {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
-        <section class="card p-6 variant-soft-warning border-l-4 border-warning-500 mt-12 bg-surface-100 dark:bg-surface-800 shadow-lg">
+        <section class="card p-6 preset-tonal-warning border-l-4 border-warning-500 mt-12 shadow-lg">
             <div class="flex items-center gap-4">
-                <span class="fas fa-tools text-3xl"></span>
+                <Wrench size="2rem" class="shrink-0" aria-hidden="true" />
                 <div>
                     <h3 class="text-xl font-bold">Event Admin Settings</h3>
                     <p>You have elevated privileges. Use the menu above to access advanced settings and reports.</p>
diff --git a/src/routes/events/[event_id]/settings/+page.svelte b/src/routes/events/[event_id]/settings/+page.svelte
index 03760a0d..b46542ff 100644
--- a/src/routes/events/[event_id]/settings/+page.svelte
+++ b/src/routes/events/[event_id]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { goto } from '$app/navigation';
-    import { Lock } from '@lucide/svelte';
+    import { Lock, Printer, Plus, Upload, FileText, BarChart2 } from '@lucide/svelte';
     import { liveQuery } from 'dexie';
     import { db_events, type Event } from '$lib/ae_events/db_events';
     import { onMount } from 'svelte';
@@ -111,14 +111,14 @@
                             class="btn btn-primary"
                             onclick={() => (show_create_badge_modal = true)}
                         >
-                            <span class="fas fa-plus mr-2"></span> Add New Badge
+                            <Plus size="1em" aria-hidden="true" /> Add New Badge
                         </button>
                         <button
                             type="button"
                             class="btn btn-primary ml-2"
                             onclick={() => (show_upload_badge_modal = true)}
                         >
-                            <span class="fas fa-upload mr-2"></span> Upload Badge
+                            <Upload size="1em" aria-hidden="true" /> Upload Badge
                             List
                         </button>
                     </div>
@@ -129,22 +129,22 @@
                     <div class="flex flex-wrap justify-center gap-2 mt-2">
                         <a
                             href={`/events/${event_id}/badges/print_list?printed_status=not_printed`}
-                            class="btn variant-filled-secondary"
+                            class="btn preset-filled-secondary"
                         >
-                            <span class="fas fa-print mr-2"></span> Print All Unprinted
+                            <Printer size="1em" aria-hidden="true" /> Print All Unprinted
                         </a>
                         <a
                             href={`/events/${event_id}/badges/print_list?badge_type_code=guest&printed_status=not_printed`}
-                            class="btn variant-filled-secondary"
+                            class="btn preset-filled-secondary"
                         >
-                            <span class="fas fa-print mr-2"></span> Print Unprinted
+                            <Printer size="1em" aria-hidden="true" /> Print Unprinted
                             Guests
                         </a>
                         <a
                             href={`/events/${event_id}/badges/print_list`}
-                            class="btn variant-filled-secondary"
+                            class="btn preset-filled-secondary"
                         >
-                            <span class="fas fa-print mr-2"></span> Print All
+                            <Printer size="1em" aria-hidden="true" /> Print All
                         </a>
                     </div>
                 </div>
@@ -154,13 +154,13 @@
                         href={`/events/${event_id}/templates`}
                         class="btn btn-tertiary"
                     >
-                        <span class="fas fa-file-alt mr-2"></span> Manage Badge Templates
+                        <FileText size="1em" aria-hidden="true" /> Manage Badge Templates
                     </a>
                     <a
                         href={`/events/${event_id}/badges/stats`}
                         class="btn btn-tertiary"
                     >
-                        <span class="fas fa-chart-bar mr-2"></span> Badge Printing
+                        <BarChart2 size="1em" aria-hidden="true" /> Badge Printing
                         Stats
                     </a>
                 </div>
@@ -443,6 +443,6 @@
         </div>
         <h1 class="h1 font-black">Access Restricted</h1>
         <p class="max-w-md opacity-70">Event settings require administrator access. Redirecting…</p>
-        <a href={`/events/${event_id}`} class="btn variant-filled-primary">Return to Event</a>
+        <a href={`/events/${event_id}`} class="btn preset-filled-primary">Return to Event</a>
     </section>
 {/if}
diff --git a/src/routes/events/ae_comp__event_session_obj_li.svelte b/src/routes/events/ae_comp__event_session_obj_li.svelte
index 66ce7aca..8bb4bb8d 100644
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -187,7 +187,7 @@
                                     {#if (show__session_presentations || show__session_files) && $ae_loc.manager_access}
                                         <button
                                             type="button"
-                                            class="btn btn-icon btn-sm variant-soft-surface"
+                                            class="btn btn-icon btn-sm preset-tonal-surface"
                                             onclick={() =>
                                                 toggle_details(
                                                     session_obj.event_session_id
diff --git a/src/routes/events/ae_comp__events_menu_nav.svelte b/src/routes/events/ae_comp__events_menu_nav.svelte
index 3d98a6b5..9f723588 100644
--- a/src/routes/events/ae_comp__events_menu_nav.svelte
+++ b/src/routes/events/ae_comp__events_menu_nav.svelte
@@ -8,6 +8,7 @@
         slct,
         slct_trigger
     } from '$lib/stores/ae_stores';
+    import { TrendingUp, MapPin, Wrench, Search, GraduationCap, Plane, Settings } from '@lucide/svelte';
 
     interface Props {
         // import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
@@ -64,7 +65,7 @@
             class="btn btn-sm mx-1 ae_btn_warning"
             class:hidden={!ae_core}
         >
-            <span class="fas fa-cogs m-1"></span>
+            <Settings size="1em" aria-hidden="true" />
             Æ Core
         </a>
 
@@ -73,7 +74,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!events__reports}
         >
-            <span class="fas fa-chart-line m-1"></span>
+            <TrendingUp size="1em" aria-hidden="true" />
             Pres Mgmt Reports
         </a>
         <a
@@ -81,8 +82,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!events__locations}
         >
-            <!-- <span class="fas fa-map-marker-alt m-1"></span> -->
-            <span class="fas fa-map-marked-alt m-1"></span>
+            <MapPin size="1em" aria-hidden="true" />
             Locations
         </a>
         <a
@@ -90,7 +90,7 @@
             class="btn btn-sm mx-1 ae_btn_warning"
             class:hidden={!events__settings}
         >
-            <span class="fas fa-tools m-1"></span>
+            <Wrench size="1em" aria-hidden="true" />
             Admin Tools
         </a>
     </span>
@@ -103,7 +103,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!events__session_search}
         >
-            <span class="fas fa-search m-1"></span>
+            <Search size="1em" aria-hidden="true" />
             Session Search
         </a>
         <a
@@ -111,8 +111,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!events__session_id}
         >
-            <!-- <span class="fas fa-arrow-left m-1"></span> -->
-            <span class="fas fa-chalkboard-teacher m-1"></span>
+            <GraduationCap size="1em" aria-hidden="true" />
             Back to Session
         </a>
         <!-- eslint-disable-next-line svelte/valid-compile -->
@@ -121,7 +120,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!event_id}
         >
-            <span class="fas fa-plane m-1"></span>
+            <Plane size="1em" aria-hidden="true" />
             Launcher
         </a>
         <a
@@ -129,8 +128,7 @@
             class="btn btn-sm mx-1 ae_btn_info"
             class:hidden={!events__location_id}
         >
-            <!-- <span class="fas fa-map m-1"></span> -->
-            <span class="fas fa-map-marker-alt m-1"></span>
+            <MapPin size="1em" aria-hidden="true" />
             Session Location
         </a>
     </span>
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index 56795d61..5e68f670 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -602,8 +602,8 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
                                     .hide_professional)}
                         class="journal__content
                     w-full p-1
-                    bg-slate-100 text-gray-900
-                    dark:bg-slate-900 dark:text-gray-100
+                    bg-gray-100 text-gray-900
+                    dark:bg-gray-900 dark:text-gray-100
                     shadow-lg rounded-lg
                     border border-gray-200 dark:border-gray-700
                     text-wrap text-sm font-mono whitespace-pre-wrap
@@ -730,15 +730,13 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
                         {#if journals_journal_entry_obj.hide}
                             <EyeOff
                                 strokeWidth="1"
-                                color="hsla( 0, 100%, 50%, .5)"
-                                class="inline-block"
+                                class="inline-block text-error-500/60"
                             />
                             <span class="hidden md:inline">Hidden</span>
                         {:else}
                             <Eye
                                 strokeWidth="2.5"
-                                color="hsla( 120, 100%, 25%, .5)"
-                                class="inline-block"
+                                class="inline-block text-success-700 dark:text-success-400"
                             />
                             <span class="hidden lg:inline">Visible</span>
                         {/if}