diff --git a/src/lib/e_app_sys_menu.svelte b/src/lib/e_app_sys_menu.svelte
index bb0fb035..8de68822 100644
--- a/src/lib/e_app_sys_menu.svelte
+++ b/src/lib/e_app_sys_menu.svelte
@@ -141,6 +141,7 @@ max-w-max -->
         relative
         *:hover:inline
         *:hover:visible
+        **:hover:visible
 
         opacity-50
         hover:opacity-100
@@ -182,7 +183,7 @@ max-w-max -->
                 $ae_loc.edit_mode = false;
                 // dispatch_edit_mode_changed();
             }}
-            class="btn btn-md px-2 preset-tonal-success border border-success-500 hover:preset-filled-success-500 transition-all
+            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
 
             "
             title="Edit mode is currently enabled. Click to disable."
@@ -202,7 +203,7 @@ max-w-max -->
                 $ae_loc.edit_mode = true;
                 // dispatch_edit_mode_changed();
             }}
-            class="btn btn-md px-2 preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition-all space-x-0 *:hover:inline"
+            class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
             title="Edit mode is currently disabled. Click to enable."
             >
             <span class="fas fa-toggle-off mx-1"></span>
@@ -212,140 +213,145 @@ max-w-max -->
             </span>
         </button>
     {/if}
-<span>
-    <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
-        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
-            <span
-                class="*:hover:inline flex flex-row gap-1 items-center justify-between"
-                title={`Current access type/level: ${$ae_loc.access_type}`}
-                >
-                <!-- <span class="fas fa-unlock mx-1"></span> -->
-                <!-- <ShieldPlus class="inline-block" /> -->
 
-
-                {#if $ae_loc.access_type == 'super'}
-                    <span class="fas fa-hat-wizard m-1"></span>
-                    <span class="hidden">Super</span>
-                {:else if $ae_loc.access_type == 'manager'}
-                    <span class="fas fa-user-shield m-1"></span>
-                    <span class="hidden">Manager</span>
-                {:else if $ae_loc.access_type == 'administrator'}
-                    <span class="fas fa-user-ninja m-1"></span>
-                    <span class="hidden">Administrator</span>
-                {:else if $ae_loc.access_type == 'trusted'}
-                    <span class="fas fa-user-check m-1"></span>
-                    <span class="hidden">Trusted Access</span>
-                {:else if $ae_loc.access_type == 'public'}
-                    Public
-                    <span class="hidden">Access</span>
-                {:else if $ae_loc.access_type == 'authenticated'}
-                    Authenticated
-                    <span class="hidden">Access</span>
-                {:else if $ae_loc.access_type == 'anonymous'}
-                    Anonymous Access
-                {:else}
-                    Unknown Access
-                {/if}
-            </span>
-
-            {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
-                <button
-                    type="button"
-                    onclick={() => {
-                        // handle_clear_access();
-                        // trigger_clear_access = true;
-                        // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
-
-                        if (!$ae_loc?.app_cfg?.show_element__menu) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            // $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            // $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                    }}
-                    class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all *:hover:inline"
-                    title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
+    <span>
+        <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
+            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
+                <span
+                    class="*:hover:inline flex flex-row gap-1 items-center justify-between"
+                    title={`Current access type/level: ${$ae_loc.access_type}`}
                     >
-                    <!-- <span class="fas fa-lock mx-1"></span> -->
-                    <!-- <ShieldMinus /> -->
-                    <ShieldEllipsis class="inline-block" />
-                    <span class="hidden">Passcode?</span>
+                    <!-- <span class="fas fa-unlock mx-1"></span> -->
+                    <!-- <ShieldPlus class="inline-block" /> -->
 
-                </button>
+
+                    {#if $ae_loc.access_type == 'super'}
+                        <span class="fas fa-hat-wizard m-1"></span>
+                        <span class="hidden">Super</span>
+                    {:else if $ae_loc.access_type == 'manager'}
+                        <span class="fas fa-user-shield m-1"></span>
+                        <span class="hidden">Manager</span>
+                    {:else if $ae_loc.access_type == 'administrator'}
+                        <span class="fas fa-user-ninja m-1"></span>
+                        <span class="hidden">Administrator</span>
+                    {:else if $ae_loc.access_type == 'trusted'}
+                        <span class="fas fa-user-check m-1"></span>
+                        <span class="hidden">Trusted Access</span>
+                    {:else if $ae_loc.access_type == 'public'}
+                        Public
+                        <span class="hidden">Access</span>
+                    {:else if $ae_loc.access_type == 'authenticated'}
+                        Authenticated
+                        <span class="hidden">Access</span>
+                    {:else if $ae_loc.access_type == 'anonymous'}
+                        Anonymous Access
+                    {:else}
+                        Unknown Access
+                    {/if}
+                </span>
+
+                {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
+                    <button
+                        type="button"
+                        onclick={() => {
+                            // handle_clear_access();
+                            // trigger_clear_access = true;
+                            // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
+
+                            if (!$ae_loc?.app_cfg?.show_element__menu) {
+                                $ae_loc.app_cfg.show_element__menu = true;
+                                // $ae_loc.app_cfg.show_element__menu_btn = false;
+                                $ae_loc.app_cfg.show_element__access_type = true;
+                                $ae_loc.app_cfg.show_element__passcode_input = true;
+                            } else {
+                                $ae_loc.app_cfg.show_element__menu = false;
+                                // $ae_loc.app_cfg.show_element__menu_btn = true;
+                            }
+                        }}
+                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
+                        title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
+                        >
+                        <!-- <span class="fas fa-lock mx-1"></span> -->
+                        <!-- <ShieldMinus /> -->
+                        <ShieldEllipsis class="inline-block" />
+                        <span class="hidden">Passcode?</span>
+
+                    </button>
+                {:else}
+                    <button
+                        type="button"
+                        onclick={() => {
+                            trigger_clear_access = true;
+
+                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                                $ae_loc.app_cfg.show_element__menu = true;
+                                $ae_loc.app_cfg.show_element__menu_btn = false;
+                                $ae_loc.app_cfg.show_element__access_type = true;
+                                $ae_loc.app_cfg.show_element__passcode_input = true;
+
+                                // await tick();
+                                // console.log('Layout button click: Focus on passcode input!');
+                                // /** @type {HTMLElement | null} */
+                                // const to_focus = document.getElementById('access_passcode_input');
+                                // to_focus?.focus();
+                            } else {
+                                $ae_loc.app_cfg.show_element__menu = false;
+                                $ae_loc.app_cfg.show_element__menu_btn = true;
+                            }
+                        }}
+                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
+                        title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
+                        >
+                        <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
+                        <ShieldMinus class="inline-block" />
+                        Clear?
+                    </button>
+                {/if}
             {:else}
                 <button
-                    type="button"
-                    onclick={() => {
-                        trigger_clear_access = true;
-
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-
-                            // await tick();
-                            // console.log('Layout button click: Focus on passcode input!');
-                            // /** @type {HTMLElement | null} */
-                            // const to_focus = document.getElementById('access_passcode_input');
-                            // to_focus?.focus();
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                    }}
-                    class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all hidden"
-                    title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
-                    >
-                    <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
-                    <ShieldMinus class="inline-block" />
-                    Clear?
+                        type="button"
+                        onclick={async () => {
+                            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                                $ae_loc.app_cfg.show_element__menu = true;
+                                $ae_loc.app_cfg.show_element__menu_btn = false;
+                                $ae_loc.app_cfg.show_element__access_type = true;
+                                $ae_loc.app_cfg.show_element__passcode_input = true;
+                                await tick();
+                                console.log('Layout button click: Focus on passcode input!');
+                                /** @type {HTMLElement | null} */
+                                const to_focus = document.getElementById('access_passcode_input');
+                                to_focus?.focus();
+                            } else {
+                                $ae_loc.app_cfg.show_element__menu = false;
+                                $ae_loc.app_cfg.show_element__menu_btn = true;
+                            }
+                            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+                        }}
+                        class="
+                            btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
+                            *:hover:inline
+                            "
+                        title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
+                        >
+                    <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
+                    <!-- <span class="">Unlock?</span> -->
+                    <ShieldUser class="inline-block" />
+                    <span class="hidden">Auth?</span>
                 </button>
             {/if}
-        {:else}
-            <button
-                    type="button"
-                    onclick={async () => {
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-                            await tick();
-                            console.log('Layout button click: Focus on passcode input!');
-                            /** @type {HTMLElement | null} */
-                            const to_focus = document.getElementById('access_passcode_input');
-                            to_focus?.focus();
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                        // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-                    }}
-                    class="
-                        btn btn-sm variant-outline-surface hover:preset-tonal-success border border-success-500 transition-all
-                        *:hover:inline
-                        "
-                    title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
-                    >
-                <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
-                <!-- <span class="">Unlock?</span> -->
-                <ShieldUser class="inline-block" />
-                <span class="hidden">Auth?</span>
-            </button>
-        {/if}
-    </div>
-</span>
+        </div>
+    </span>
+
     <!-- <div> -->
+    <!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
+    <!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
+    <!-- class:hover:visible={true} -->
+    <!-- invisible -->
     <button
         type="button"
         class:w-48={$ae_loc?.app_cfg?.show_element__menu}
-        class:visible={$ae_loc?.app_cfg?.show_element__menu}
-        class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
-        class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 px-6 py-1"
+
+        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success px-6 py-1  *:hover:inline"
         title="Show or hide the menu"
         onclick={async () => {
             if (!$ae_loc?.app_cfg?.show_element__menu) {
@@ -425,7 +431,7 @@ max-w-max -->
 
     <button
         type="button"
-        class="btn btn-sm variant-outline-tertiary hover:preset-tonal-success border border-success-500 *:hover:inline px-6 py-1"
+        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
         title="Sign In"
         onclick={() => {
             if (!$ae_loc?.app_cfg?.show_element__menu) {