I should have saved this long ago. Lots of changes. Learning a lot as well!

src/routes/+layout.svelte

@@ -5,18 +5,28 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
 // Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
 initializeStores();
 import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
-// import type {
-//     DrawerSettings, DrawerComponent, DrawerStore,
-//     // ModalSettings, ModalComponent, ModalStore
-//     } from '@skeletonlabs/skeleton';
+import type {
+    // DrawerSettings, DrawerComponent, DrawerStore,
+    ModalSettings, ModalComponent, ModalStore
+    } from '@skeletonlabs/skeleton';
 const drawerStore = getDrawerStore();
 
+import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
+
+const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
+	// modalComponentTwo: { ref: ModalComponentTwo },
+	// ...
+};
+
 
 // Highlight JS
 import hljs from 'highlight.js/lib/core';
 import 'highlight.js/styles/github-dark.css';
 import type { Writable } from 'svelte/store';
 import { get } from 'svelte/store';
+import { page } from "$app/stores";
 import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
 import xml from 'highlight.js/lib/languages/xml'; // for HTML
 import css from 'highlight.js/lib/languages/css';
@@ -111,7 +121,7 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
 </script>
 
 
-<Modal />
+<Modal components={modalRegistry} />
 
 
 <Drawer>
@@ -122,10 +132,10 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
     {:else if $drawerStore.id === 'sponsorships__edit'}
 		(show 'sponsorships__edit__sponsorship_obj' contents)
         <section class="sponsorships_editing">
-            {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
+            <!-- {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
                 <p>Edit!</p>
                 <Edit_sponsorship_obj />
-            {/if}
+            {/if} -->
         </section>
 	{:else}
 		(fallback contents)
@@ -151,10 +161,12 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
 
                 <a
                     class="btn btn-sm variant-ghost-surface"
+                    class:active={$page.url.pathname==='/sponsorships'}
                     href="/sponsorships">Sponsorships</a>
 
                 <a
                     class="btn btn-sm variant-ghost-surface"
+                    class:active={$page.url.pathname==='/event_speakers'}
                     href="/event_speakers">Speakers</a>
             </svelte:fragment>
         </AppBar>
@@ -191,6 +203,9 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
             </svelte:fragment>
         </AppBar> -->
     </svelte:fragment>
+
+
+
     <!-- Page Route Content -->
     <slot />