diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
index 6d1f29db..d5f7d22e 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 interface Props {
     /** @type {import('./$types').PageData} */
     data: any;
@@ -7,10 +6,10 @@ interface Props {
 
 let { data }: Props = $props();
 
-let log_lvl: number = 0;
+let log_lvl: number = 1;
 
 // *** Import Svelte specific
-import { page } from '$app/state';
+import { onDestroy } from "svelte";
 import { browser } from '$app/environment';
 
 // *** Import other supporting libraries
@@ -64,6 +63,7 @@ $idaa_slct.archive_id = ae_acct.slct.archive_id;
 // $idaa_slct.archive_obj = ae_acct.slct.archive_obj;
 
 
+// Functions and Logic
 let lq__archive_obj = $derived(liveQuery(async () => {
     if (log_lvl) {
         console.log(`lq__archive_obj: archive_id = ${$idaa_slct?.archive_id}`);
@@ -71,6 +71,20 @@ let lq__archive_obj = $derived(liveQuery(async () => {
     let results = await db_archives.archive
         .get($idaa_slct?.archive_id ?? ''); // null or undefined does not reset things like '' does
 
+    // Check if results are different than the current $idaa_slct.archive_obj
+    if ($idaa_slct.archive_obj && results) {
+        if (JSON.stringify($idaa_slct.archive_obj) !== JSON.stringify(results)) {
+            $idaa_slct.archive_obj = { ...results};
+            if (log_lvl) {
+                console.log(`$idaa_slct.archive_obj = `, $idaa_slct.archive_obj);
+            }
+        } else {
+            if (log_lvl) {
+                console.log(`Archive object has not changed for archive_id: ${$idaa_slct.archive_id}`);
+            }
+        }
+    }
+
     return results;
 }));
 
@@ -169,7 +183,25 @@ if (browser) {
 
     let message = {'archive_id': $idaa_slct?.archive_id ?? null};
     window.parent.postMessage(message, "*");
+
+    if ($ae_loc?.iframe) {
+        console.log('In iframe, sending message to parent window to scroll to top as well');
+        window.parent.postMessage({'scroll_to': 0}, "*"); // This should be in pixels
+    }
 }
+
+onDestroy(() => {
+    log_lvl = 1;
+    if (log_lvl) {
+        console.log(`Destroying archives page for archive_id: ${$idaa_slct?.archive_id}`);
+    }
+
+    let message = {'archive_id': null};
+    window.parent.postMessage(message, "*");
+
+    // $idaa_slct.archive_id = null;
+    // $idaa_slct.archive_obj = null;
+});
 </script>
 
 
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
index 553b4c69..429045e5 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/+page.ts
@@ -1,11 +1,12 @@
-/** @type {import('./$types').PageLoad} */
-// import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
 console.log(`ae_p_idaa_archives [archive_id] +page.ts start`);
 
+import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
 import { archives_func } from '$lib/ae_archives/ae_archives_functions';
 
-export async function load({ params, parent }) { // route
+export const load = (async ({ params, parent }) => { // route
     let log_lvl: number = 0;
 
     let data = await parent();
@@ -15,71 +16,38 @@ export async function load({ params, parent }) { // route
     let ae_acct = data[account_id];
 
     let archive_id = params.archive_id;
-    // if (!archive_id) {
-    //     console.log(`ae_idaa_archives archives [archive_id] +page.ts: The archive_id was not found in the params!!!`);
-    //     error(404, {
-	// 		message: 'IDAA Archives - Archive ID not found'
-	// 	});
-    // }
+
     ae_acct.slct.archive_id = archive_id;
 
     if (browser) {
         if (log_lvl) {
             console.log(`ae_idaa_archives archives [archive_id] +page.ts: archive_id = `, archive_id);
         }
-        // Load event archive object
+        // Load archive object
         let load_archive_obj = await archives_func.load_ae_obj_id__archive({
             api_cfg: ae_acct.api,
             archive_id:  archive_id,
             inc_content_li: true,
-            try_cache: true,
             log_lvl: log_lvl
+        })
+        .then((results) => {
+            if (!results) {
+                error(404, {
+                    message: 'IDAA Archives - Archive not found'
+                });
+            } else {
+                // ae_acct.slct.post_obj = results;
+            }
         });
+
         if (log_lvl) {
             console.log(`load_archive_obj = `, load_archive_obj);
         }
         ae_acct.slct.archive_obj = load_archive_obj;
-
-        // Load archive contents for the archive
-        // let load_archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
-        //     api_cfg: ae_acct.api,
-        //     for_obj_type: 'archive',
-        //     for_obj_id: archive_id,
-        //     params: {qry__enabled: 'all', qry__limit: 99},
-        //     try_cache: true
-        // })
-        // .then((archive_content_obj_li) => {
-        //     if (log_lvl) {
-        //         console.log(`archive_content_obj_li = `, archive_content_obj_li);
-        //     }
-        //     for (let index = 0; index < archive_content_obj_li.length; index++) {
-        //         let archive_content_obj = archive_content_obj_li[index];
-        //         let archive_content_id = archive_content_obj.archive_content_id_random;
-
-        //         let load_archive_content_obj_li = archives_func.load_ae_obj_li__archive_content({
-        //             api_cfg: ae_acct.api,
-        //             for_obj_type: 'archive_content',
-        //             for_obj_id: archive_content_id,
-        //             params: {qry__enabled: 'all', qry__limit: 15},
-        //             try_cache: true
-        //         });
-        //         if (log_lvl) {
-        //             console.log(`load_archive_content_obj_li = `, load_archive_content_obj_li);
-        //         }
-        //         archive_content_obj_li[index].archive_content_li = load_archive_content_obj_li;
-        //     }
-
-        //     return archive_content_obj_li;
-        // });
-        // if (log_lvl) {
-        //     console.log(`load_archive_content_obj_li = `, load_archive_content_obj_li);
-        // }
-        // ae_acct.slct.archive_content_obj_li = load_archive_content_obj_li;
-
     }
 
     // WARNING: Precaution against shared data between sites and presentations.
     data[account_id] = ae_acct;
 
     return data;
-}
+}) satisfies PageLoad;
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
index 8159a351..066620c8 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
@@ -31,6 +31,10 @@ let upload__hosted_file_obj_promise: any;
 let prom_api__archive_content_obj: any = $state();
 let prom_api__archive_content_obj__hosted_file: any = $state();
 
+let description_new_html = $state('');
+let description_changed = $state(false);
+let notes_new_html = $state('');
+let notes_changed = $state(false);
 let disable_submit_btn = $state(false);
 
 let slct_hosted_file_kv: key_val = $state({});
@@ -139,9 +143,9 @@ async function handle_submit_form(event) {
     archive_content_do['name'] = archive_content_di.name;
 
     // Check if the description_new_html exists and is a string
-    if (typeof $idaa_slct.archive_content_obj.description_new_html === 'string') {
+    if (typeof description_new_html === 'string') {
         console.log('New description is a string');
-        archive_content_do['description'] = $idaa_slct.archive_content_obj.description_new_html;
+        archive_content_do['description'] = description_new_html;
     } else {
         console.log('New description is not a string. Do nothing.');
         // archive_content_do['description'] = event_meeting_fd.description;
@@ -193,9 +197,9 @@ async function handle_submit_form(event) {
     archive_content_do['enable'] = !!archive_content_di.enable;
 
     // Check if the notes_new_html exists and is a string
-    if (typeof $idaa_slct.archive_content_obj.notes_new_html === 'string') {
+    if (typeof notes_new_html === 'string') {
         console.log('New notes is a string');
-        archive_content_do['notes'] = $idaa_slct.archive_content_obj.notes_new_html;
+        archive_content_do['notes'] = notes_new_html;
     } else {
         console.log('New notes is not a string. Do nothing.');
         // archive_content_do['notes'] = event_meeting_fd.notes;
@@ -360,26 +364,45 @@ $effect(() => {
 
     <!-- <h3>Archive Content</h3> -->
 
-    <section class="ae_section archive_content__general border border-gray-200 rounded p-2 space-y-2">
-        <label for="name">Name of Content
-        <input
-            type="text" id="name" name="name"
-            required max="200"
-            value={$idaa_slct.archive_content_obj?.name ? $idaa_slct.archive_content_obj.name : '' }
-            class="input w-full"
-            placeholder="Content name"
-            >
+    <div class="ae_section archive_content__general border border-gray-200 rounded p-2 space-y-2">
+
+        <div>
+        <label for="name" class="w-full">
+            <span class="text-sm font-semibold">
+                Name of Content
+            </span>
+            <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                max="200"
+                value={$idaa_slct.archive_content_obj?.name ? $idaa_slct.archive_content_obj.name : '' }
+                autocomplete="off"
+                class="
+                    input w-full
+                    preset-tonal-surface hover:preset-filled-surface-100-900
+                    form-control
+                    "
+                placeholder="Content name"
+                >
         </label>
 
-        <label for="description" class="w-full">
-           Description
+        <label for="description" class="ae_label w-full">
+           <span class="legend text-sm font-semibold">
+                Description
+            </span>
             <Tiptap_editor
                 default_minimal={true}
-                bind:html_text={$idaa_slct.archive_content_obj.description}
+                html_text={$idaa_slct.archive_content_obj.description}
                 show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
-                bind:new_html={$idaa_slct.archive_content_obj.description_new_html}
+                bind:new_html={description_new_html}
+                bind:changed={description_changed}
+                classes="preset-tonal-surface hover:preset-filled-surface-100-900"
+                placeholder="Your content description here..."
                 />
         </label>
+        </div>
 
         <!-- <label for="content_html">Content (HTML)
         <Tiptap_editor
@@ -429,10 +452,10 @@ $effect(() => {
                     >
             </label>
         </fieldset> -->
-    </section>
+    </div>
 
     {#if $idaa_slct.archive_content_id}
-    <section
+    <div
         class="ae_section archive_content__hosted_file border border-gray-200 rounded p-2 space-y-2"
         class:hidden={$idaa_slct.archive_content_obj.archive_content_type !== 'hosted_file' && !$idaa_slct.archive_content_id}
         >
@@ -616,17 +639,17 @@ $effect(() => {
 
         {/if}
 
-    </section>
+        </div>
     {:else}
-    <section
+    <div
         class="ae_section archive_content__hosted_file border border-gray-200 rounded p-2 space-y-2"
         >
         <span class="fas fa-exclamation-triangle text-red-500"></span>
         Save the form first before uploading a file.
-    </section>
+    </div>
     {/if}
 
-    <section class="ae_section archive_content__original border border-gray-200 rounded p-2 space-y-2">
+    <div class="ae_section archive_content__original border border-gray-200 rounded p-2 space-y-2">
 
         <h3 class="h3">Original</h3>
 
@@ -664,24 +687,40 @@ $effect(() => {
             <input type="text" id="original_location" name="original_location" value={$idaa_slct.archive_content_obj.original_location} class="input w-96">
         </label>
 
-    </section>
+    </div>
 
 
     {#if $ae_loc.trusted_access}
     <button
         type="button"
-        class="novi_btn btn btn-sm preset-tonal-secondary float-right"
+        class="
+            novi_btn
+            btn btn-sm float-right
+            "
+        class:preset-filled-success-200-800={$idaa_loc.archives.show__admin_options}
+        class:preset-filled-tertiary-200-800={!$idaa_loc.archives.show__admin_options}
         onclick={() => {
             $idaa_loc.archives.show__admin_options = !$idaa_loc.archives.show__admin_options;
         }}
         >
+        {#if $idaa_loc.archives.show__admin_options}
+        <span class="fas fa-eye-slash m-1"></span>
+        {:else}
         <span class="fas fa-eye m-1"></span>
+        {/if}
         {$idaa_loc.archives.show__admin_options ? 'Hide' : 'Show'} Admin
     </button>
 
-    <!-- BEGIN: section post__admin_options -->
-    <section
-        class="ae_section post__admin_options border border-gray-200 rounded p-2 space-y-2 bg-red-100"
+    <!-- BEGIN: section archive_content__admin_options -->
+    <div
+        class="
+            ae_section archive_content__admin_options
+            space-y-1 p-2
+            border rounded
+            preset-filled-warning-100-900
+            preset-outlined-warning-400-600
+            transition
+            "
         class:hidden={!$idaa_loc.archives.show__admin_options}
         >
 
@@ -693,10 +732,10 @@ $effect(() => {
             class="flex flex-col md:flex-row flex-wrap gap-2 items-center justify-center md:justify-stretch w-full"
             >
             <span
-                class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
+                class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow"
                 >
-                <fieldset class="flex flex-row gap-1 items-center justify-center">
-                    <legend class="legend text-sm font-semibold">Hide</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Hide</legend>
                     <div>
                         <input
                             type="radio"
@@ -704,7 +743,7 @@ $effect(() => {
                             name="hide"
                             value={true}
                             bind:group={$idaa_slct.archive_content_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_yes">Yes</label>
                     </div>
@@ -715,14 +754,14 @@ $effect(() => {
                             name="hide"
                             value={false}
                             bind:group={$idaa_slct.archive_content_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_no">No</label>
                     </div>
                 </fieldset>
 
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Priority</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Priority</legend>
                     <div>
                         <input
                             type="radio"
@@ -730,7 +769,7 @@ $effect(() => {
                             name="priority"
                             value={true}
                             bind:group={$idaa_slct.archive_content_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_yes">Yes</label>
                     </div>
@@ -741,23 +780,29 @@ $effect(() => {
                             name="priority"
                             value={false}
                             bind:group={$idaa_slct.archive_content_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_no">No</label>
                     </div>
                 </fieldset>
             </span>
 
-            <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <label class="legend text-sm font-semibold">Sort <input type="number" name="sort" value={$idaa_slct.archive_content_obj.sort} class="input w-24" /></label>
+            <span
+                class="
+                    grow
+                    flex flex-row flex-wrap gap-1 items-center justify-evenly
+                    col-sm-1
+                    "
+                >
+                <label class="legend text-sm font-semibold input-group">Sort <input type="number" name="sort" value={$idaa_slct.archive_content_obj.sort} class="input w-24 preset-tonal-surface form-control" /></label>
 
-                <label class="legend text-sm font-semibold">Group <input type="text" name="group" value={$idaa_slct.archive_content_obj.group ?? ''} max="100" class="input w-40" /></label>
+                <label class="legend text-sm font-semibold input-group">Group <input type="text" name="group" value={$idaa_slct.archive_content_obj.group ?? ''} max="100" class="input w-40 preset-tonal-surface form-control" /></label>
             </span>
 
             {#if $ae_loc.administrator_access}
             <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Enable</legend>
+                <fieldset class="flex flex-row gap-1 items-center align-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Enable</legend>
                     <div>
                         <input
                             type="radio"
@@ -765,7 +810,7 @@ $effect(() => {
                             name="enable"
                             value={true}
                             bind:group={$idaa_slct.archive_content_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_yes">Yes</label>
                     </div>
@@ -776,7 +821,7 @@ $effect(() => {
                             name="enable"
                             value={false}
                             bind:group={$idaa_slct.archive_content_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_no">No</label>
                     </div>
@@ -792,12 +837,15 @@ $effect(() => {
             for="notes"
             class="w-full"
             >
-            <span class="legend text-sm font-semibold">Internal Staff Notes</span>
+            <span class="legend text-sm font-semibold text-surface-600-400">Internal Staff Notes</span>
             <Tiptap_editor
                 default_minimal={true}
-                bind:html_text={$idaa_slct.archive_content_obj.notes}
+                html_text={$idaa_slct.archive_content_obj.notes}
                 show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
-                bind:new_html={$idaa_slct.archive_content_obj.notes_new_html}
+                bind:new_html={notes_new_html}
+                bind:changed={notes_changed}
+                classes="preset-tonal-surface preset-filled-surface-100-900"
+                placeholder="Internal notes for staff only. Not shown to the public."
                 />
         </label>
         {/if}
@@ -807,18 +855,34 @@ $effect(() => {
             {$idaa_slct.archive_content_obj?.updated_on ? `SLCT Updated on: ${$idaa_slct.archive_content_obj?.updated_on}` : ''}
         </div>
 
-    </section> <!-- END: section post__admin_options -->
+    </div> <!-- END: section archive_content__admin_options -->
     {/if}
 
 
-    <section class="ae_section ae_options flex flex-row gap-1 items-center justify-center">
+    <div
+        class="
+            ae_section ae_options ae_row ae_actions post__options post__actions
+            flex flex-row gap-1 items-center justify-between w-full
+            d-flex align-items-center justify-content-between
+        "
+        >
         <button
             type="submit"
             disabled={disable_submit_btn}
-            class="novi_btn btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+            class="
+                novi_btn btn-warning
+                btn
+                preset-tonal-success hover:preset-filled-success-200-800
+                transition
+                "
             >
-            <span class="fas fa-check m-1"></span>
-            Save Archive Content
+            {#await prom_api__archive_content_obj}
+                <span class="fas fa-spinner fa-spin m-1"></span> Saving
+            {:then}
+                <span class="fas fa-save m-1"></span> Save Changes
+            {/await}
+            <!-- <span class="fas fa-check m-1"></span> -->
+            <!-- Save Archive Content -->
         </button>
 
         {#if $idaa_slct.archive_content_id && !$idaa_slct.archive_content_obj?.hosted_file_id}
@@ -839,7 +903,12 @@ $effect(() => {
                 $idaa_sess.archives.show__modal_edit__archive_content_id = false;
                 $idaa_sess.archives.show__modal_view__archive_content_id = false;
             }}
-            class="novi_btn btn btn-sm preset-tonal-warning"
+            class="
+                novi_btn
+                btn btn-sm
+                preset-filled-warning-200-800 hover:preset-filled-error-200-800
+                transition
+                "
             title="Disable this archive content"
             >
             <span class="fas fa-minus m-1"></span>
@@ -853,7 +922,7 @@ $effect(() => {
                 Can not delete. Remove hosted file first.
             {/if}
         {/if}
-    </section>
+    </div>
 
 </form>
 
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
index 448543a2..277d1279 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
@@ -28,6 +28,10 @@ let upload__hosted_file_obj_promise: any;
 let prom_api__archive_obj: any;
 let prom_api__archive_obj__hosted_file: any;
 
+let description_new_html = $state('');
+let description_changed = $state(false);
+let notes_new_html = $state('');
+let notes_changed = $state(false);
 let disable_submit_btn = true;
 
 let lu_time_zone_list:any = $state(localStorage.getItem('lu_time_zone_list') ? JSON.parse(localStorage.getItem('lu_time_zone_list')) : []);
@@ -102,9 +106,9 @@ async function handle_submit_form(event) {
     archive_do['name'] = archive_di.name;
 
     // Check if the description_new_html exists and is a string
-    if (typeof $idaa_slct.archive_obj.description_new_html === 'string') {
+    if (typeof description_new_html === 'string') {
         console.log('New description is a string');
-        archive_do['description'] = $idaa_slct.archive_obj.description_new_html;
+        archive_do['description'] = description_new_html;
     } else {
         console.log('New description is not a string. Do nothing.');
         // archive_do['description'] = event_meeting_fd.description;
@@ -157,9 +161,9 @@ async function handle_submit_form(event) {
     archive_do['enable'] = !!archive_di.enable;
 
     // Check if the notes_new_html exists and is a string
-    if (typeof $idaa_slct.archive_obj.notes_new_html === 'string') {
+    if (typeof notes_new_html === 'string') {
         console.log('New notes is a string');
-        archive_do['notes'] = $idaa_slct.archive_obj.notes_new_html;
+        archive_do['notes'] = notes_new_html;
     } else {
         console.log('New notes is not a string. Do nothing.');
         // archive_do['notes'] = event_meeting_fd.notes;
@@ -197,6 +201,7 @@ async function handle_submit_form(event) {
         return create_archive_obj_promise;
 
     } else {
+
         prom_api__archive_obj = archives_func.update_ae_obj__archive({
             api_cfg: $ae_api,
             archive_id: $idaa_slct.archive_id,
@@ -226,6 +231,7 @@ async function handle_submit_form(event) {
         });
 
         return prom_api__archive_obj;
+
     }
 }
 
@@ -293,23 +299,43 @@ async function handle_delete_archive_obj(
 
     <!-- <h2 class="h2">Archive</h2> -->
 
-    <section class="ae_section archive__general border border-gray-200 rounded p-2 space-y-2">
-        <label for="name">Name of Archive
+    <div class="ae_section archive__general border border-gray-200 rounded p-2 space-y-2">
+
+        <div>
+        <label for="name" class="w-full">
+            <span class="text-sm font-semibold">
+                Name of Archive
+            </span>
             <input
-                type="text" id="name" name="name"
-                required max="20" value={$idaa_slct.archive_obj.name ? $idaa_slct.archive_obj.name : 'Testing!' }
-                class="input w-full"
+                type="text"
+                id="name"
+                name="name"
+                required
+                max="20"
+                value={$idaa_slct.archive_obj.name ? $idaa_slct.archive_obj.name : 'Testing!' }
+                autocomplete="off"
+                class="
+                    input w-full
+                    preset-tonal-surface hover:preset-filled-surface-100-900
+                    form-control
+                    "
                 placeholder="Name of Archive"
                 >
         </label>
+        </div>
 
-        <label for="description" class="w-full">
-            Description
+        <label for="description" class="ae_label w-full">
+            <span class="legend text-sm font-semibold">
+                Description
+            </span>
             <Tiptap_editor
                 default_minimal={true}
-                bind:html_text={$idaa_slct.archive_obj.description}
+                html_text={$idaa_slct.archive_obj.description}
                 show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
-                bind:new_html={$idaa_slct.archive_obj.description_new_html}
+                bind:new_html={description_new_html}
+                bind:changed={description_changed}
+                classes="preset-tonal-surface hover:preset-filled-surface-100-900"
+                placeholder="Your archive description here..."
                 />
         </label>
 
@@ -322,9 +348,9 @@ async function handle_delete_archive_obj(
                 />
         </label> -->
 
-    </section>
+    </div>
 
-    <section class="ae_section archive__original border border-gray-200 rounded p-2 space-y-2">
+    <div class="ae_section archive__original border border-gray-200 rounded p-2 space-y-2">
 
         <h3 class="h3">Original</h3>
 
@@ -395,7 +421,7 @@ async function handle_delete_archive_obj(
             <input type="text" id="original_url_text" name="original_url_text" max="255" value={$idaa_slct.archive_obj.original_url_text ? $idaa_slct.archive_obj.original_url_text : '' } placeholder="URL text or title" class="input w-full">
         </label>
 
-    </section>
+    </div>
 
 
     <!-- <h3>Archiver's Options</h3> -->
@@ -437,18 +463,34 @@ async function handle_delete_archive_obj(
     {#if $ae_loc.trusted_access}
     <button
         type="button"
-        class="novi_btn btn btn-sm preset-tonal-secondary float-right"
+        class="
+            novi_btn
+            btn btn-sm float-right
+            "
+        class:preset-filled-success-200-800={$idaa_loc.archives.show__admin_options}
+        class:preset-filled-tertiary-200-800={!$idaa_loc.archives.show__admin_options}
         onclick={() => {
             $idaa_loc.archives.show__admin_options = !$idaa_loc.archives.show__admin_options;
         }}
         >
+        {#if $idaa_loc.archives.show__admin_options}
+        <span class="fas fa-eye-slash m-1"></span>
+        {:else}
         <span class="fas fa-eye m-1"></span>
+        {/if}
         {$idaa_loc.archives.show__admin_options ? 'Hide' : 'Show'} Admin
     </button>
 
-    <!-- BEGIN: section post__admin_options -->
-    <section
-        class="ae_section archive__admin_options border border-gray-200 rounded p-2 space-y-2 bg-red-100"
+    <!-- BEGIN: section archive__admin_options -->
+    <div
+        class="
+            ae_section archive__admin_options
+            space-y-1 p-2
+            border rounded
+            preset-filled-warning-100-900
+            preset-outlined-warning-400-600
+            transition
+            "
         class:hidden={!$idaa_loc.archives.show__admin_options}
         >
 
@@ -460,10 +502,10 @@ async function handle_delete_archive_obj(
             class="flex flex-col md:flex-row flex-wrap gap-2 items-center justify-center md:justify-stretch w-full"
             >
             <span
-                class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
+                class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow"
                 >
-                <fieldset class="flex flex-row gap-1 items-center justify-center">
-                    <legend class="legend text-sm font-semibold">Hide</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Hide</legend>
                     <div>
                         <input
                             type="radio"
@@ -471,7 +513,7 @@ async function handle_delete_archive_obj(
                             name="hide"
                             value={true}
                             bind:group={$idaa_slct.archive_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_yes">Yes</label>
                     </div>
@@ -482,14 +524,14 @@ async function handle_delete_archive_obj(
                             name="hide"
                             value={false}
                             bind:group={$idaa_slct.archive_obj.hide}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="hide_no">No</label>
                     </div>
                 </fieldset>
 
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Priority</legend>
+                <fieldset class="flex flex-row gap-1 items-center justify-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Priority</legend>
                     <div>
                         <input
                             type="radio"
@@ -497,7 +539,7 @@ async function handle_delete_archive_obj(
                             name="priority"
                             value={true}
                             bind:group={$idaa_slct.archive_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_yes">Yes</label>
                     </div>
@@ -508,23 +550,29 @@ async function handle_delete_archive_obj(
                             name="priority"
                             value={false}
                             bind:group={$idaa_slct.archive_obj.priority}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="priority_no">No</label>
                     </div>
                 </fieldset>
             </span>
 
-            <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <label class="legend text-sm font-semibold">Sort <input type="number" name="sort" value={$idaa_slct.archive_obj.sort} class="input w-24" /></label>
+            <span
+                class="
+                    grow
+                    flex flex-row flex-wrap gap-1 items-center justify-evenly
+                    col-sm-1
+                    "
+                >
+                <label class="legend text-sm font-semibold input-group">Sort <input type="number" name="sort" value={$idaa_slct.archive_obj.sort} class="input w-24 preset-tonal-surface form-control" /></label>
 
-                <label class="legend text-sm font-semibold">Group <input type="text" name="group" value={$idaa_slct.archive_obj.group ?? ''} max="100" class="input w-40" /></label>
+                <label class="legend text-sm font-semibold input-group">Group <input type="text" name="group" value={$idaa_slct.archive_obj.group ?? ''} max="100" class="input w-40 preset-tonal-surface form-control" /></label>
             </span>
 
             {#if $ae_loc.administrator_access}
             <span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
-                <fieldset class="flex flex-row gap-2">
-                    <legend class="legend text-sm font-semibold">Enable</legend>
+                <fieldset class="flex flex-row gap-1 items-center align-center form-check">
+                    <legend class="legend text-sm font-semibold form-check-label">Enable</legend>
                     <div>
                         <input
                             type="radio"
@@ -532,7 +580,7 @@ async function handle_delete_archive_obj(
                             name="enable"
                             value={true}
                             bind:group={$idaa_slct.archive_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_yes">Yes</label>
                     </div>
@@ -543,7 +591,7 @@ async function handle_delete_archive_obj(
                             name="enable"
                             value={false}
                             bind:group={$idaa_slct.archive_obj.enable}
-                            class="radio"
+                            class="radio form-check-input"
                         >
                         <label for="enable_no">No</label>
                     </div>
@@ -559,12 +607,15 @@ async function handle_delete_archive_obj(
             for="notes"
             class="w-full"
             >
-            <span class="legend text-sm font-semibold">Internal Staff Notes</span>
+            <span class="legend text-sm font-semibold text-surface-600-400">Internal Staff Notes</span>
             <Tiptap_editor
                 default_minimal={true}
-                bind:html_text={$idaa_slct.archive_obj.notes}
+                html_text={$idaa_slct.archive_obj.notes}
                 show_button_kv={{'heading__h1': false, 'heading__h2': false, 'heading__h3': false}}
-                bind:new_html={$idaa_slct.archive_obj.notes_new_html}
+                bind:new_html={notes_new_html}
+                bind:changed={notes_changed}
+                classes="preset-tonal-surface preset-filled-surface-100-900"
+                placeholder="Internal notes for staff only. Not shown to the public."
                 />
         </label>
         {/if}
@@ -574,11 +625,11 @@ async function handle_delete_archive_obj(
             {$idaa_slct.archive_obj?.updated_on ? `SLCT Updated on: ${$idaa_slct.archive_obj?.updated_on}` : ''}
         </div>
 
-    </section> <!-- END: section archive__admin_options -->
+    </div> <!-- END: section archive__admin_options -->
     {/if}
 
 
-    <section class="ae_section ae_options flex flex-row gap-1 items-center justify-center">
+    <div class="ae_section ae_options flex flex-row gap-1 items-center justify-center">
         <button
             type="submit"
             class="novi_btn btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
@@ -600,7 +651,7 @@ async function handle_delete_archive_obj(
             <span class="fas fa-minus m-1"></span> Delete
         </button>
         {/if}
-    </section>
+    </div>
 
 </form>
 
diff --git a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
index e42277f8..97941fdf 100644
--- a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__archive_obj_li.svelte
@@ -51,8 +51,17 @@ let { lq__archive_obj_li }: Props = $props();
 
         <div class="ae_options flex flex-row gap-2 items-center justify-center">
 
-            <a href="/idaa/archives/{idaa_archive_obj?.archive_id}" class="btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition" title={`View: ${idaa_archive_obj?.name}`}>
-                <span class="fas fa-envelope-open m-1"></span> Open
+            <a
+                href="/idaa/archives/{idaa_archive_obj?.archive_id}"
+                class="
+                    novi_btn btn-secondary
+                    btn btn-md preset-filled-primary-200-800
+                    transition
+                    "
+                title={`View: ${idaa_archive_obj?.name}`}>
+                <!-- <span class="fas fa-envelope-open m-1"></span> -->
+                <span class="fas fa-box-open m-1"></span>
+                Open
 
                 {#if idaa_archive_obj?.archive_content_count}
                     <span class="ae_badge ae_info archive__archive_content_count">
@@ -61,7 +70,7 @@ let { lq__archive_obj_li }: Props = $props();
                 {/if}
             </a>
 
-            {#if $ae_loc.administrator_access && $ae_loc.edit_mode}
+            {#if 1==3 && $ae_loc.administrator_access && $ae_loc.edit_mode}
                 <button
                     disabled={!$ae_loc.administrator_access}
                     onclick={() => {
diff --git a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
index 22a536d1..668cb36a 100644
--- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-import  type { PageData } from './$types';
+interface Props {
+    /** @type {import('./$types').PageData} */
+    data: any;
+}
 
-let { data }: { data: PageData } = $props();
+let { data }: Props = $props();
 
-let log_lvl: number = 1;
+let log_lvl: number = 0;
 
 // *** Import Svelte specific
 import { onDestroy } from "svelte";
diff --git a/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts b/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts
index e6dec651..e204e5f8 100644
--- a/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts
+++ b/src/routes/idaa/(idaa)/bb/[post_id]/+page.ts
@@ -23,7 +23,7 @@ export const load = (async ({ params, parent }) => { // route
         if (log_lvl) {
             console.log(`ae_idaa_posts posts [post_id] +page.ts: post_id = `, post_id);
         }
-        // Load post post object
+        // Load post object
         let load_post_obj = await posts_func.load_ae_obj_id__post({
             api_cfg: ae_acct.api,
             post_id:  post_id,
@@ -50,5 +50,4 @@ export const load = (async ({ params, parent }) => { // route
     data[account_id] = ae_acct;
 
     return data;
-    // return {};
 }) satisfies PageLoad;
\ No newline at end of file
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
index 56185bd6..efe94a54 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
@@ -404,7 +404,7 @@ $effect(() => {
         {/if}
     {/await}
 
-    <section class="text-center"> <!-- BEGIN: section post__options -->
+    <div class="text-center"> <!-- BEGIN: section post__options -->
         <button
             type="button"
             onclick={() => {
@@ -427,7 +427,7 @@ $effect(() => {
             <span class="fas fa-times m-1"></span>
             Cancel Edit
         </button>
-    </section> <!-- END: section post__options -->
+    </div> <!-- END: section post__options -->
 
     <!-- <h3 class="h3">Post</h3> -->
 
@@ -440,21 +440,21 @@ $effect(() => {
             <span class="text-sm font-semibold text-surface-600-400">
                 Title of BB post:
             </span>
-        <input
-            type="text"
-            id="title"
-            name="title"
-            required
-            max="200"
-            bind:value={$idaa_slct.post_obj.title}
-            placeholder="Title of Post"
-            autocomplete="off"
-            class="
-                input w-full
-                preset-tonal-surface hover:preset-filled-surface-100-900
-                form-control
-                "
-            />
+            <input
+                type="text"
+                id="title"
+                name="title"
+                required
+                max="200"
+                bind:value={$idaa_slct.post_obj.title}
+                autocomplete="off"
+                class="
+                    input w-full
+                    preset-tonal-surface hover:preset-filled-surface-100-900
+                    form-control
+                    "
+                placeholder="Title of Post"
+                />
         </label>
         </div>
 
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
index a2f623a3..87cd187e 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
@@ -63,7 +63,7 @@ onMount(() => {
                     btn btn-md preset-filled-primary-200-800
                     transition
                     "
-                title={`Open to see details: ${idaa_post_obj?.name}`}
+                title={`View: ${idaa_post_obj?.name}`}
                 >
                 <span class="fas fa-envelope-open m-1"></span>
                 <!-- <span class="fas fa-info-circle"></span> -->
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
index 91648c62..80efcaea 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-import type { PageData } from './$types';
+interface Props {
+    /** @type {import('./$types').PageData} */
+    data: any;
+}
 
-let { data }: { data: PageData } = $props();
+let { data }: Props = $props();
 
-let log_lvl: number = 1;
+let log_lvl: number = 0;
 
 // *** Import Svelte specific
 import { onDestroy } from "svelte";
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.ts b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.ts
index 7053dfa5..ef129611 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.ts
+++ b/src/routes/idaa/(idaa)/recovery_meetings/[event_id]/+page.ts
@@ -23,7 +23,7 @@ export const load = (async ({ params, parent }) => { // route
         if (log_lvl) {
             console.log(`ae_idaa_events events [event_id] +page.ts: event_id = `, event_id);
         }
-        // Load event event object
+        // Load event object
         let load_event_obj = await events_func.load_ae_obj_id__event({
             api_cfg: ae_acct.api,
             event_id:  event_id,
@@ -45,8 +45,8 @@ export const load = (async ({ params, parent }) => { // route
         ae_acct.slct.event_obj = load_event_obj;
     }
 
+    // WARNING: Precaution against shared data between sites and presentations.
     data[account_id] = ae_acct;
 
     return data;
-    // return {};
 }) satisfies PageLoad;
\ No newline at end of file
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
index 02cf8ed6..bd238570 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
@@ -710,21 +710,21 @@ $effect(() => {
             <span class="text-base font-semibold">
                 Name of Recovery Meeting
             </span>
-        <input
-            type="text"
-            id="name"
-            name="name"
-            required
-            max="200"
-            value={$lq__event_obj?.name ?? ''}
-            placeholder="Name of Recovery Meeting"
-            autocomplete="off"
-            class="
-                input w-full
-                preset-tonal-surface hover:preset-filled-surface-100-900
-                form-control
-                "
-            />
+            <input
+                type="text"
+                id="name"
+                name="name"
+                required
+                max="200"
+                value={$lq__event_obj?.name ?? ''}
+                placeholder="Name of Recovery Meeting"
+                autocomplete="off"
+                class="
+                    input w-full
+                    preset-tonal-surface hover:preset-filled-surface-100-900
+                    form-control
+                    "
+                />
         </label>
         </div>
 
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
index 620fe4d4..46a143ad 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
@@ -174,8 +174,12 @@ function add_activity_log(
         <div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center">
             <a
                 href="/idaa/recovery_meetings/{idaa_event_obj?.event_id}"
-                class="novi_btn btn btn-secondary btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
-                title={`Open to see details: ${idaa_event_obj?.name}`}
+                class="
+                    novi_btn btn-secondary
+                    btn btn-md preset-filled-primary-200-800
+                    transition
+                    "
+                title={`View: ${idaa_event_obj?.name}`}
                 >
                 <!-- <span class="fas fa-envelope-open m-1"></span> -->
                 <span class="fas fa-calendar-check m-1"></span>