diff --git a/src/lib/element_access_type.svelte b/src/lib/element_access_type.svelte
index 09369da0..1eb75e03 100644
--- a/src/lib/element_access_type.svelte
+++ b/src/lib/element_access_type.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-let log_lvl: number = 0;
-import { onMount, tick } from 'svelte';
+// let log_lvl: number = 1;
+import { onDestroy, onMount, tick } from 'svelte';
 
 // import { liveQuery } from "dexie";
 
@@ -10,48 +10,87 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc } from '$lib/ae_events_stores';
 // import { db_events } from "$lib/db_events";
 
-export let hidden: boolean = false;
+// export let hidden: boolean = false;
 
-let entered_passcode: null|string = null;
-let show_passcode_input: boolean = false;
+// *** Setup Svelte properties
+interface Props {
+    log_lvl?: number;
+    // data?: any;
+    hidden: null|boolean;
+}
 
-let trigger: null|string = null;
+let {
+    log_lvl = 0,
+    // data = null,
+    hidden = true,
+    }: Props = $props();
+
+
+let entered_passcode: null|string = $state(null);
+// let entered_passcode: null|string = '';
+let show_passcode_input: boolean = $state(false);
+// let show_passcode_input: boolean = false;
+
+// let trigger: null|string|boolean = null;
+let trigger: null|string|boolean = $state(null);
 
 // const dispatch = createEventDispatcher();
 
 
+// WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time.
 onMount(() => {
     if (log_lvl > 1) {
         console.log('** Element Mounted: ** Element Access Type');
     }
+    entered_passcode = '';
+    trigger = null;
 });
 
-
-$: if (entered_passcode && entered_passcode.length >= 5) {
-    if (log_lvl) {
-        console.log(`entered_passcode=${entered_passcode}`);
-    }
-    handle_check_access_type_passcode();
-}
-
-$: if (trigger && $ae_loc.access_type) {
-    if (log_lvl) {
-        console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
+onDestroy(() => {
+    if (log_lvl > 1) {
+        console.log('** Element Destroyed: ** Element Access Type');
     }
 
-    let access_checks_results =  ae_util.process_permission_checks($ae_loc.access_type);
+    // Clean up any references or listeners if needed
+    entered_passcode = null; // Clear the entered passcode
+    show_passcode_input = false;
 
-    $ae_loc = {...$ae_loc, ...access_checks_results};
-} else if (trigger) {
-    if (log_lvl) {
-        console.log(`$ae_loc.access_type=not set`);
+    // Reset trigger
+    trigger = null;
+});
+
+$effect(() => {
+    if (entered_passcode && entered_passcode.length >= 5) {
+        if (log_lvl) {
+            console.log(`entered_passcode=${entered_passcode}`);
+        }
+        handle_check_access_type_passcode();
     }
+});
 
-    // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
-    let access_checks_results =  ae_util.process_permission_checks('');
+$effect(() => {
+    if (trigger && $ae_loc.access_type) {
+        trigger = false;
+        if (log_lvl) {
+            console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
+        }
 
-    $ae_loc = {...$ae_loc, ...access_checks_results};
-}
+        let access_checks_results =  ae_util.process_permission_checks($ae_loc.access_type);
+
+        $ae_loc = {...$ae_loc, ...access_checks_results};
+        $ae_loc = $ae_loc;
+    } else if (trigger) {
+        trigger = false;
+        if (log_lvl) {
+            console.log(`$ae_loc.access_type=not set`);
+        }
+
+        // Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
+        let access_checks_results =  ae_util.process_permission_checks('');
+
+        $ae_loc = {...$ae_loc, ...access_checks_results};
+    }
+});
 
 
 function handle_check_access_type_passcode() {
@@ -117,7 +156,7 @@ function handle_check_access_type_passcode() {
             return false;
         }
 
-        entered_passcode = null;
+        entered_passcode = '';
         trigger = 'process_permission_check';
 
         // WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes.
@@ -156,6 +195,7 @@ function handle_clear_access() {
     $ae_loc.access_type = 'anonymous';
     trigger = 'process_permission_check';
 
+    entered_passcode = ''; // Clear the entered passcode
     show_passcode_input = false;
 
     // $ae_loc = $ae_loc; // Trigger Svelte just in case
@@ -171,7 +211,9 @@ function handle_clear_access() {
 
 <section
     id="AE-Quick-Access-Type"
-    class="ae_access_type bg-surface-100 text-surface-800 transition duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1"
+    class="
+        ae_access_type bg-surface-100 text-surface-800 duration-300 delay-150 hover:delay-1000 hover:ease-out transition-all hover:transition-all hidden-print flex flex-col items-end gap-1
+        "
     class:hidden={hidden}
     >
 
@@ -197,7 +239,7 @@ function handle_clear_access() {
             {#if $ae_loc?.sync_local_config}
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         $ae_loc.sync_local_config = false;
                         $events_loc.pres_mgmt.sync_local_config = false;
 
@@ -219,7 +261,7 @@ function handle_clear_access() {
             {:else}
                 <button
                     type="button"
-                    on:click={() => {
+                    onclick={() => {
                         $ae_loc.sync_local_config = true;
                         $events_loc.pres_mgmt.sync_local_config = true;
 
@@ -244,7 +286,7 @@ function handle_clear_access() {
         {#if $ae_loc.edit_mode}
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     $ae_loc.edit_mode = false;
                     // dispatch_edit_mode_changed();
                 }}
@@ -257,7 +299,7 @@ function handle_clear_access() {
         {:else}
             <button
                 type="button"
-                on:click={() => {
+                onclick={() => {
                     $ae_loc.edit_mode = true;
                     // dispatch_edit_mode_changed();
                 }}
@@ -305,7 +347,7 @@ function handle_clear_access() {
 
         <button
             type="button"
-            on:click={() => {
+            onclick={() => {
                 handle_clear_access();
             }}
             class="btn btn-sm variant-ghost-success hover:variant-filled-success access_type_lock_btn transition-all"
@@ -316,8 +358,9 @@ function handle_clear_access() {
     {:else}
         <button
             type="button"
-            on:click={async () => {
+            onclick={async () => {
                 show_passcode_input = !show_passcode_input;
+                entered_passcode = ''; // Clear the entered passcode when showing the input
                 await tick();
                 document.getElementById('access_passcode_input')?.focus();
                 // element.focus({preventScroll:false});
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3a38a103..862024e8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -455,7 +455,7 @@ $effect(() => {
 
 {#if $ae_loc.app_cfg?.show_element__access_type}
 <Element_access_type
-    hidden={$ae_loc.iframe  && !$ae_loc.trusted_access}
+    hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
     />
 {/if}