diff --git a/nuxt/layers/core/.playground/app/app.config.ts b/nuxt/layers/core/.playground/app/app.config.ts
index 2e818ca..fdd5837 100644
--- a/nuxt/layers/core/.playground/app/app.config.ts
+++ b/nuxt/layers/core/.playground/app/app.config.ts
@@ -1,5 +1,5 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
+  // myLayer: {
+  //   name: 'My amazing Nuxt layer (overwritten)'
+  // }
 })
diff --git a/nuxt/layers/core/.playground/app/pages/index.vue b/nuxt/layers/core/.playground/app/pages/index.vue
index c557dcf..092bf0e 100644
--- a/nuxt/layers/core/.playground/app/pages/index.vue
+++ b/nuxt/layers/core/.playground/app/pages/index.vue
@@ -2,17 +2,19 @@
 const { isAuthenticated, login, logout } = useKeycloak()
 const ldStore = useConnectLaunchdarklyStore()
 
-// setBreadcrumbs([
-//   { label: 'test', to: useRuntimeConfig().public.registryHomeURL },
-//   { label: 'test 2', to: useRuntimeConfig().public.registryHomeURL },
-//   { label: 'test 3' }
-// ])
+setBreadcrumbs([
+  { label: 'test', to: useRuntimeConfig().public.registryHomeURL },
+  { label: 'test 2', to: useRuntimeConfig().public.registryHomeURL },
+  { label: 'test 3' }
+])
 
 onMounted(() => {
   const test = ldStore.getStoredFlag('allowable-business-passcode-types')
   console.log('test: ', test)
   const route = useRoute()
   console.log(route)
+  const toast = useToast()
+  toast.add({ description: 'testing' })
 })
 </script>
 <template>
@@ -25,5 +27,11 @@ onMounted(() => {
       <UButton v-else-if="isAuthenticated" label="Logout" @click="logout()" />
       <div> {{ isAuthenticated }} </div>
     </ClientOnly>
+
+    <ConnectPageSection
+      :heading="{ label: 'Hello World', icon: 'i-mdi-account-multiple' }"
+    >
+      some stuff
+    </ConnectPageSection>
   </div>
 </template>
diff --git a/nuxt/layers/core/app/app.config.ts b/nuxt/layers/core/app/app.config.ts
index a2ea867..9cb86fb 100644
--- a/nuxt/layers/core/app/app.config.ts
+++ b/nuxt/layers/core/app/app.config.ts
@@ -1,16 +1,82 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'Hello from Nuxt layer'
-  },
+  // CoreLayer: { // TODO: implement ?
+  //   footerLinks: [
+  //     {
+  //       labelTKey: 'ConnectFooter.home',
+  //       label: '',
+  //       localePath: true,
+  //       to: '/',
+  //       target: ''
+  //     },
+  //     {
+  //       labelTKey: 'ConnectFooter.releaseNotes',
+  //       label: '',
+  //       localePath: false,
+  //       to: 'https://www.release-notes.bcregistry.gov.bc.ca',
+  //       target: '_blank'
+  //     },
+  //     {
+  //       labelTKey: 'ConnectFooter.disclaimer',
+  //       label: '',
+  //       localePath: false,
+  //       to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
+  //       target: '_blank'
+  //     },
+  //     {
+  //       labelTKey: 'ConnectFooter.privacy',
+  //       label: '',
+  //       localePath: false,
+  //       to: 'https://www2.gov.bc.ca/gov/content/home/privacy',
+  //       target: '_blank'
+  //     },
+  //     {
+  //       labelTKey: 'ConnectFooter.ally',
+  //       label: '',
+  //       localePath: false,
+  //       to: 'https://www2.gov.bc.ca/gov/content/home/accessibility',
+  //       target: '_blank'
+  //     },
+  //     {
+  //       labelTKey: 'ConnectFooter.copyright',
+  //       label: '',
+  //       localePath: false,
+  //       to: 'https://www2.gov.bc.ca/gov/content/home/copyright',
+  //       target: '_blank'
+  //     }
+  //   ]
+  // },
   ui: {
     primary: 'blue',
     gray: 'bcGovGray',
+    accordion: {
+      wrapper: 'divide-y',
+      container: 'border-gray-400',
+      item: {
+        color: 'text-gray-700'
+      },
+      default: {
+        class: 'm-0 p-3 text-gray-900 font-bold bg-white hover:bg-gray-200 rounded-none'
+      }
+    },
     alert: {
-      variant: {
-        system_banner: 'bg-bcGovColor-navDivider text-bcGovColor-darkGray max-w-bcGovLg mx-auto'
+      rounded: 'rounded',
+      inner: 'pt-2',
+      color: {
+        yellow: {
+          solid: 'bg-yellow-400 text-gray-900',
+          soft: 'bg-yellow-50 text-gray-900'
+        }
+      },
+      default: {
+        closeButton: {
+          icon: 'i-heroicons-x-mark-20-solid',
+          variant: 'link',
+          padded: false
+        }
       }
     },
     button: {
+      rounded: 'rounded',
       size: {
         bcGov: 'text-sm'
       },
@@ -37,18 +103,39 @@ export default defineAppConfig({
       variant: {
         header: 'text-{color}-500 tracking-wide text-base hover:text-{color}-600 disabled:text-{color}-500 dark:text-white dark:hover:text-blue-300 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-white',
         solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-[#E0E7ED] dark:hover:bg-bcGovGray-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-white',
-        outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-[#E0E7ED] hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-[#E0E7ED]/25 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-white'
+        outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-[#E0E7ED] hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-[#E0E7ED]/25 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-white',
+        notification_close_btn: 'text-white hover:opacity-90 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-white'
       }
       // default: {
       //   size: 'bcGov'
       // }
     },
+    card: {
+      rounded: 'rounded'
+    },
+    checkbox: {
+      wrapper: 'flex items-start',
+      base: 'mt-1 mr-2 cursor-pointer',
+      border: 'border-gray-500 cursor-pointer',
+      label: 'text-base text-bcGovColor-midGray font-normal'
+    },
     chip: {
       base: 'absolute rounded-full ring-0 dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap'
     },
+    container: {
+      strategy: 'override',
+      base: 'mx-auto',
+      padding: 'px-4 sm:px-6 lg:px-8',
+      constrained: 'max-w-bcGovLg'
+    },
+    divider: {
+      border: {
+        base: 'flex border-bcGovGray-500 dark:border-gray-300/50'
+      }
+    },
     dropdown: {
-      container: 'overflow-clip rounded-md shadow-md',
-      rounded: 'rounded-md',
+      container: 'overflow-clip rounded shadow-md',
+      rounded: 'rounded',
       padding: 'py-0 px-0',
       width: 'min-w-[250px]',
       height: 'max-h-[75dvh]',
@@ -64,6 +151,199 @@ export default defineAppConfig({
           inactive: 'text-bcGovColor-midGray'
         }
       }
+    },
+    formGroup: {
+      label: { base: 'block text-base font-bold py-3 text-gray-900' },
+      help: 'mt-2 text-xs text-gray-700 dark:text-gray-400',
+      error: 'text-red-600'
+    },
+    input: {
+      base: 'relative text-gray-900 border-0 border-b-[1px] border-gray-500 ring-0 focus:ring-0',
+      placeholder: 'placeholder-gray-700',
+      rounded: 'rounded-none rounded-t', // rounded-t-md?
+      size: {
+        sm: 'h-[40px]',
+        lg: 'h-[56px]'
+      },
+      color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 hover:bg-gray-200 hover:border-gray-600 ' +
+            'focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
+        primary: {
+          outline: 'bg-primary-50 ring-0 border-primary-500 hover:bg-gray-200 focus:border-b-2 focus:ring-0'
+        },
+        red: {
+          outline: 'bg-gray-100 ring-0 border-red-600 hover:bg-gray-200 ' +
+            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+        }
+      },
+      icon: {
+        base: 'text-gray-700',
+        color: 'text-{color}-500',
+        trailing: {
+          padding: {
+            sm: 'px-0 pr-2.5',
+            md: 'px-0 pr-2.5',
+            lg: 'px-0 pr-2.5',
+            xl: 'px-0 pr-2.5'
+          }
+        }
+      },
+      trailing: {
+        padding: {
+          sm: 'pe-7',
+          md: 'pe-7',
+          lg: 'pe-7',
+          xl: 'pe-7'
+        }
+      },
+      default: {
+        size: 'lg',
+        color: 'gray',
+        variant: 'outline'
+      }
+    },
+    // input: {
+    //   base: 'bg-gray-100 hover:bg-gray-200 border-b-[1px] focus:border-b-2 focus:ring-0',
+    //   rounded: 'rounded-none rounded-t',
+    //   variant: {
+    //     bcGovLg: 'h-[56px] border-gray-700 placeholder-gray-700 focus:border-primary-500 focus:placeholder-primary-500',
+    //     bcGovSm: 'h-[42px] border-gray-700 placeholder-gray-700 focus:border-primary-500 focus:placeholder-primary-500',
+    //     error: 'h-[56px] border-red-500 focus:border-red-500 placeholder-red-500 focus:placeholder-red-500',
+    //     primary: 'border-primary-500 placeholder-primary-500 border-b-2'
+    //   }
+    // },
+    modal: {
+      base: 'xs:min-w-[90vw] md:min-w-[720px] text-gray-700'
+    },
+    notification: {
+      title: 'text-sm font-medium text-white',
+      description: 'mt-1 text-sm leading-4 text-white',
+      background: 'bg-gray-700',
+      rounded: 'rounded',
+      ring: 'ring-0',
+      progress: {
+        base: 'hidden',
+        background: 'bg-{color}-500 dark:bg-{color}-400'
+      },
+      default: {
+        closeButton: {
+          color: 'white',
+          variant: 'notification_close_btn'
+        }
+      }
+    },
+    notifications: {
+      position: 'bottom-0 left-1/2 -translate-x-1/2'
+    },
+    radio: {
+      base: 'h-5 w-5 mt-[3px]',
+      inner: 'ms-1',
+      label: 'cursor-pointer text-base'
+    },
+    select: {
+      base: 'bg-white border-b-[1px] border-gray-500 ring-0 focus:border-b-2 focus:ring-0',
+      rounded: 'rounded-none rounded-t', // rounded-t-md ??
+      size: {
+        sm: 'h-[40px]',
+        lg: 'h-[56px]'
+      },
+      color: {
+        gray: {
+          outline: 'bg-gray-100 ring-0 hover:bg-gray-200 hover:border-gray-600 ' +
+            'focus:border-primary-500 focus:border-b-2 focus:ring-0',
+          none: 'ring-0 hover:border-gray-600 focus:border-primary-500 focus:border-b-2 focus:ring-0'
+        },
+        primary: {
+          outline: 'bg-primary-50 ring-0 border-primary-500 hover:bg-gray-200 focus:border-b-2 focus:ring-0',
+          none: 'ring-0 border-primary-500 focus:border-b-2 focus:ring-0'
+        },
+        red: {
+          outline: 'ring-0 border-red-600 hover:bg-gray-200 ' +
+            'focus:border-red-600 focus:border-b-2 focus:ring-0'
+        }
+      },
+      icon: {
+        base: 'text-gray-700',
+        trailing: {
+          padding: {
+            '2xs': 'px-0 pr-2',
+            xs: 'px-0 pr-2.5',
+            sm: 'px-0 pr-2.5'
+          }
+        }
+      },
+      trailing: {
+        padding: {
+          '2xs': 'pe-6',
+          xs: 'pe-6',
+          sm: 'pe-7'
+        }
+      },
+      default: {
+        size: 'lg',
+        color: 'gray',
+        variant: 'outline'
+      }
+    },
+    selectMenu: {
+      label: 'text-gray-700',
+      rounded: 'rounded-none',
+      width: 'min-w-max',
+      padding: 'p-0',
+      ring: 'ring-0',
+      option: {
+        padding: 'px-3 py-2',
+        rounded: 'rounded-none',
+        active: 'text-primary-500',
+        selected: 'text-primary-500 bg-gray-100',
+        icon: {
+          active: 'text-primary-500'
+        },
+        selectedIcon: {
+          base: 'text-primary-500'
+        }
+      }
+    },
+    table: {
+      wrapper: 'relative overflow-x-auto h-[512px]',
+      divide: 'divide-y divide-gray-300 dark:divide-gray-300/50',
+      tbody: 'divide-y divide-gray-200 dark:divide-gray-300/50',
+      thead: 'sticky top-0 bg-white z-10',
+      th: {
+        color: 'text-bcGovColor-darkGray dark:text-white'
+      },
+      td: {
+        base: 'whitespace-normal max-w-96 align-top',
+        padding: 'px-4 py-4',
+        color: 'text-bcGovColor-midGray',
+        font: '',
+        size: 'text-sm'
+      }
+    },
+    textarea: {
+      base: 'bg-gray-100 hover:bg-gray-200 border-b-[1px] focus:border-b-2 h-20 focus:ring-0 text-gray-900',
+      rounded: 'rounded-none rounded-t',
+      variant: {
+        bcGov: 'border-gray-700 placeholder-gray-700 focus:border-primary-500 focus:placeholder-primary-500',
+        error: 'border-red-500 focus:border-red-500 placeholder-red-500 focus:placeholder-red-500'
+      }
+    },
+    tooltip: {
+      wrapper: 'relative inline-flex max-h-min',
+      container: 'z-20 group min-h-fit opacity-90',
+      background: 'bg-gray-700',
+      color: 'text-white',
+      ring: 'ring-0',
+      rounded: 'rounded',
+      base: 'h-auto px-2 py-1 text-sm font-normal relative whitespace-normal',
+      arrow: {
+        base: 'before:w-3 before:h-3',
+        ring: 'before:ring-0',
+        background: 'before:bg-gray-700',
+        rounded: 'before:rounded-none'
+      }
     }
   }
 })
diff --git a/nuxt/layers/core/app/app.vue b/nuxt/layers/core/app/app.vue
index e7eb9da..0aa4dc1 100644
--- a/nuxt/layers/core/app/app.vue
+++ b/nuxt/layers/core/app/app.vue
@@ -13,7 +13,11 @@ useHead({
 })
 </script>
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <UNotifications />
+    <UModals />
+  </div>
 </template>
diff --git a/nuxt/layers/core/app/components/Connect/Breadcrumb.vue b/nuxt/layers/core/app/components/Connect/Breadcrumb.vue
index 31a495b..e74e72b 100644
--- a/nuxt/layers/core/app/components/Connect/Breadcrumb.vue
+++ b/nuxt/layers/core/app/components/Connect/Breadcrumb.vue
@@ -27,7 +27,7 @@ function resolveBackHref () {
   <div class="bg-blue-350">
     <div class="mx-auto flex max-w-bcGovLg items-center divide-x divide-gray-300 px-4 py-2">
       <UButton
-        class="mr-3 mt-px size-[28px] rounded-full px-1"
+        class="mr-3 mt-px size-[28px] rounded-full px-1 text-blue-500"
         color="white"
         :disabled="breadcrumbs.length < 2"
         icon="i-mdi-arrow-left"
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue b/nuxt/layers/core/app/components/Connect/Header/AccountLabel.vue
similarity index 100%
rename from nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue
rename to nuxt/layers/core/app/components/Connect/Header/AccountLabel.vue
diff --git a/nuxt/layers/core/app/components/Connect/Header/AccountOptionsDropdown.vue b/nuxt/layers/core/app/components/Connect/Header/AccountOptionsDropdown.vue
new file mode 100644
index 0000000..61151d3
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/AccountOptionsDropdown.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const { loggedInUserOptions } = useConnectNav()
+const { kcUser } = useKeycloak()
+const accountStore = useConnectAccountStore()
+</script>
+<template>
+  <UDropdown
+    id="account-options-dropdown"
+    :items="loggedInUserOptions"
+    :ui="{
+      padding: 'py-3 px-0'
+    }"
+  >
+    <!-- display full name/account/avatar on large screens -->
+    <UButton
+      id="account-options-button"
+      class="hidden lg:flex"
+      color="white"
+      variant="header"
+      :aria-label="$t('btn.accountOptionsMenu')"
+      icon="i-mdi-caret-down"
+      trailing
+    >
+      <ConnectHeaderAccountLabel
+        :username="parseSpecialChars(kcUser.fullName, 'USER')"
+        :account-name="accountStore.currentAccount.label ? parseSpecialChars(accountStore.currentAccount.label, 'ACCOUNT') : ''"
+      />
+    </UButton>
+    <!-- only use avatar on small screens -->
+    <UButton
+      class="lg:hidden"
+      color="white"
+      variant="header"
+      :aria-label="$t('btn.accountOptionsMenu')"
+    >
+      <UAvatar
+        :alt="parseSpecialChars(kcUser.fullName, 'U')[0]!.toUpperCase()"
+        :ui="{
+          background: 'bg-blue-300 dark:bg-[#E0E7ED]',
+          text: 'font-semibold leading-none text-white dark:text-bcGovColor-darkGray truncate',
+          placeholder: 'font-semibold leading-none text-white truncate dark:text-bcGovColor-darkGray text-xl',
+          rounded: 'rounded-sm'
+        }"
+      />
+    </UButton>
+
+    <!-- account label slot -->
+    <template #account>
+      <ConnectHeaderAccountLabel
+        :username="parseSpecialChars(kcUser.fullName, 'USER')"
+        :account-name="accountStore.currentAccount.label ? parseSpecialChars(accountStore.currentAccount.label, 'ACCOUNT') : ''"
+        theme="dropdown"
+      />
+    </template>
+
+    <!-- account setting slot -->
+    <template #settings>
+      <span class="text-bcGovColor-darkGray">{{ $t('label.accountSettings') }}</span>
+    </template>
+
+    <!-- switch accounts slot -->
+    <template #accounts>
+      <span class="text-bcGovColor-darkGray">{{ $t('label.switchAccount') }}</span>
+    </template>
+  </UDropdown>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions.vue
new file mode 100644
index 0000000..9f19ad4
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions.vue
@@ -0,0 +1,11 @@
+<template>
+  <div
+    id="connect-header-auth-options"
+    class="flex gap-1"
+  >
+    <!-- notifications dropdown -->
+    <ConnectHeaderNotifications />
+    <!-- account options dropdown -->
+    <ConnectHeaderAccountOptionsDropdown />
+  </div>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue
deleted file mode 100644
index 5b61b8e..0000000
--- a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script setup lang="ts">
-const { loggedInUserOptions } = useConnectNav()
-const { kcUser } = useKeycloak()
-const accountStore = useConnectAccountStore()
-</script>
-<template>
-  <div
-    id="connect-header-auth-options"
-    class="flex gap-1"
-  >
-    <!-- notifications dropdown -->
-    <ConnectHeaderAuthenticatedOptionsNotifications />
-    <!-- account options dropdown -->
-    <UDropdown
-      id="account-options-dropdown"
-      :items="loggedInUserOptions"
-      :ui="{
-        padding: 'py-3 px-0'
-      }"
-    >
-      <!-- display full name/account/avatar on large screens -->
-      <UButton
-        id="account-options-button"
-        class="hidden lg:flex"
-        color="white"
-        variant="header"
-        :aria-label="$t('btn.accountOptionsMenu')"
-        icon="i-mdi-caret-down"
-        trailing
-      >
-        <ConnectHeaderAuthenticatedOptionsAccountLabel
-          :username="parseSpecialChars(kcUser.fullName, 'USER')"
-          :account-name="accountStore.currentAccount.label ? parseSpecialChars(accountStore.currentAccount.label, 'ACCOUNT') : ''"
-        />
-      </UButton>
-      <!-- only use avatar on small screens -->
-      <UButton
-        class="lg:hidden"
-        color="white"
-        variant="header"
-        :aria-label="$t('btn.accountOptionsMenu')"
-      >
-        <UAvatar
-          :alt="parseSpecialChars(kcUser.fullName, 'U')[0]!.toUpperCase()"
-          :ui="{
-            background: 'bg-blue-300 dark:bg-[#E0E7ED]',
-            text: 'font-semibold leading-none text-white dark:text-bcGovColor-darkGray truncate',
-            placeholder: 'font-semibold leading-none text-white truncate dark:text-bcGovColor-darkGray text-xl',
-            rounded: 'rounded-sm'
-          }"
-        />
-      </UButton>
-
-      <!-- account label slot -->
-      <template #account>
-        <ConnectHeaderAuthenticatedOptionsAccountLabel
-          :username="parseSpecialChars(kcUser.fullName, 'USER')"
-          :account-name="accountStore.currentAccount.label ? parseSpecialChars(accountStore.currentAccount.label, 'ACCOUNT') : ''"
-          theme="dropdown"
-        />
-      </template>
-
-      <!-- account setting slot -->
-      <template #settings>
-        <span class="text-bcGovColor-darkGray">{{ $t('label.accountSettings') }}</span>
-      </template>
-
-      <!-- switch accounts slot -->
-      <template #accounts>
-        <span class="text-bcGovColor-darkGray">{{ $t('label.switchAccount') }}</span>
-      </template>
-    </UDropdown>
-  </div>
-</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/CreateAccountBtn.vue b/nuxt/layers/core/app/components/Connect/Header/CreateAccountBtn.vue
new file mode 100644
index 0000000..d46bf6e
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/CreateAccountBtn.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { createAccountUrl } = useConnectNav()
+</script>
+<template>
+  <UButton
+    variant="header"
+    color="white"
+    :label="$t('btn.createAccount')"
+    :to="createAccountUrl()"
+  />
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/LoginOptionsDropdown.vue b/nuxt/layers/core/app/components/Connect/Header/LoginOptionsDropdown.vue
new file mode 100644
index 0000000..31ee5b8
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/LoginOptionsDropdown.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const { loggedOutUserOptions, loggedOutUserOptionsMobile } = useConnectNav()
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+</script>
+<template>
+  <UDropdown
+    id="logged-out-options-dropdown"
+    :items="isLargeScreen ? loggedOutUserOptions : loggedOutUserOptionsMobile"
+    :ui="{
+      container: 'min-w-[300px]',
+      padding: 'py-3 px-0',
+      item: {
+        rounded: 'rounded-none',
+        base: 'flex items-center gap-4 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1',
+        padding: 'px-4 py-3',
+        disabled: 'cursor-default opacity-100 hover:bg-white py-0',
+        icon: {
+          base: 'flex-shrink-0 size-5 text-bcGovColor-activeBlue',
+          active: 'text-bcGovColor-activeBlue',
+          inactive: 'text-bcGovColor-midGray',
+        },
+      }
+    }"
+  >
+    <!-- login button on large screens -->
+    <UButton
+      class="hidden lg:flex"
+      variant="header"
+      color="white"
+      :label="$t('btn.login')"
+      :aria-label="$t('label.selectLoginMethod')"
+      icon="i-mdi-caret-down"
+      trailing
+    />
+    <!-- main menu icon/button on small screens -->
+    <UButton
+      class="flex lg:hidden"
+      variant="header"
+      color="white"
+      :aria-label="$t('btn.mainMenu')"
+      icon="i-mdi-menu"
+      trailing
+    />
+
+    <template #method>
+      <span class="pointer-events-none text-sm font-semibold text-bcGovColor-darkGray"> {{ $t('label.selectLoginMethod') }} </span>
+    </template>
+
+    <!-- whats new slot, only shows on small screens -->
+    <!-- TODO: implement whats new -->
+    <template #whats-new="{ item }">
+      <UIcon :name="item.icon" class="size-6 shrink-0 text-bcGovColor-midGray" />
+      <span class="truncate">{{ item.label }}</span>
+      <span class="size-2 rounded-full bg-red-500" />
+    </template>
+  </UDropdown>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/LogoHomeLink.vue b/nuxt/layers/core/app/components/Connect/Header/LogoHomeLink.vue
new file mode 100644
index 0000000..190ab94
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/LogoHomeLink.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
+<template>
+  <NuxtLink
+    id="header-logo-home-link"
+    :to="localePath('/')"
+    class="flex items-center gap-4 rounded-md px-2 transition-colors duration-300 ease-in-out hover:bg-white/[0.1] focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
+    :aria-label="$t('ConnectHeader.homeLink')"
+  >
+    <ConnectBCGovLogo />
+    <span class="text-base font-semibold text-white lg:text-lg"> {{ $t('ConnectHeader.title') }} </span>
+  </NuxtLink>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/Notifications.vue b/nuxt/layers/core/app/components/Connect/Header/Notifications.vue
similarity index 100%
rename from nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/Notifications.vue
rename to nuxt/layers/core/app/components/Connect/Header/Notifications.vue
diff --git a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions.vue b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions.vue
new file mode 100644
index 0000000..c1d0708
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    id="connect-header-unauth-options"
+    class="flex gap-1"
+  >
+    <!-- TODO: implement whats new -->
+    <!-- whats new slideover -->
+    <!-- <ConnectHeaderUnauthenticatedOptionsWhatsNew class="hidden lg:flex" /> -->
+    <!-- login options dropdown or main menu on small screens -->
+    <ConnectHeaderLoginOptionsDropdown />
+    <!-- create account button, hidden on small screens -->
+    <ConnectHeaderCreateAccountBtn class="hidden lg:flex" />
+  </div>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue
deleted file mode 100644
index f270abc..0000000
--- a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-const { loggedOutUserOptions, loggedOutUserOptionsMobile, createAccountUrl } = useConnectNav()
-
-const isLargeScreen = useMediaQuery('(min-width: 1024px)')
-</script>
-<template>
-  <div
-    id="connect-header-unauth-options"
-    class="flex gap-1"
-  >
-    <!-- TODO: implement whats new -->
-    <!-- whats new slideover -->
-    <!-- <ConnectHeaderUnauthenticatedOptionsWhatsNew class="hidden lg:flex" /> -->
-    <!-- login options dropdown or main menu on small screens -->
-    <UDropdown
-      id="logged-out-options-dropdown"
-      :items="isLargeScreen ? loggedOutUserOptions : loggedOutUserOptionsMobile"
-      :ui="{
-        container: 'min-w-[300px]',
-        padding: 'py-3 px-0',
-        item: {
-          rounded: 'rounded-none',
-          base: 'flex items-center gap-4 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1',
-          padding: 'px-4 py-3',
-          disabled: 'cursor-default opacity-100 hover:bg-white py-0',
-          icon: {
-            base: 'flex-shrink-0 size-5 text-bcGovColor-activeBlue',
-            active: 'text-bcGovColor-activeBlue',
-            inactive: 'text-bcGovColor-midGray',
-          },
-        }
-      }"
-    >
-      <!-- login button on large screens -->
-      <UButton
-        class="hidden lg:flex"
-        variant="header"
-        color="white"
-        :label="$t('btn.login')"
-        :aria-label="$t('label.selectLoginMethod')"
-        icon="i-mdi-caret-down"
-        trailing
-      />
-      <!-- main menu icon/button on small screens -->
-      <UButton
-        class="flex lg:hidden"
-        variant="header"
-        color="white"
-        :aria-label="$t('btn.mainMenu')"
-        icon="i-mdi-menu"
-        trailing
-      />
-
-      <template #method>
-        <span class="pointer-events-none text-sm font-semibold text-bcGovColor-darkGray"> {{ $t('label.selectLoginMethod') }} </span>
-      </template>
-
-      <!-- whats new slot, only shows on small screens -->
-      <!-- TODO: implement whats new -->
-      <template #whats-new="{ item }">
-        <UIcon :name="item.icon" class="size-6 shrink-0 text-bcGovColor-midGray" />
-        <span class="truncate">{{ item.label }}</span>
-        <span class="size-2 rounded-full bg-red-500" />
-      </template>
-    </UDropdown>
-    <!-- create account button, hidden on small screens -->
-    <UButton
-      class="hidden lg:flex"
-      variant="header"
-      color="white"
-      :label="$t('btn.createAccount')"
-      :to="createAccountUrl()"
-    />
-  </div>
-</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/WhatsNew.vue b/nuxt/layers/core/app/components/Connect/Header/WhatsNew.vue
similarity index 100%
rename from nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/WhatsNew.vue
rename to nuxt/layers/core/app/components/Connect/Header/WhatsNew.vue
diff --git a/nuxt/layers/core/app/components/Connect/Header/Wrapper.vue b/nuxt/layers/core/app/components/Connect/Header/Wrapper.vue
new file mode 100644
index 0000000..ae6e8ec
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Header/Wrapper.vue
@@ -0,0 +1,14 @@
+<template>
+  <header
+    id="connect-header-wrapper"
+    data-testid="connect-header-wrapper"
+    class="relative border-b-2 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
+  >
+    <nav
+      class="m-auto w-full max-w-bcGovLg"
+      :aria-label="$t('ConnectHeader.navLabel')"
+    >
+      <slot />
+    </nav>
+  </header>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Header/index.vue b/nuxt/layers/core/app/components/Connect/Header/index.vue
index 630530a..ac8a6cd 100644
--- a/nuxt/layers/core/app/components/Connect/Header/index.vue
+++ b/nuxt/layers/core/app/components/Connect/Header/index.vue
@@ -1,26 +1,10 @@
 <script setup lang="ts">
 const { isAuthenticated } = useKeycloak()
-const localePath = useLocalePath()
 </script>
 <template>
-  <header
-    id="connect-main-header"
-    data-testid="connect-main-header"
-    class="relative border-b-2 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
-  >
-    <nav
-      class="m-auto flex w-full max-w-bcGovLg items-center justify-between"
-      :aria-label="$t('ConnectHeader.navLabel')"
-    >
-      <NuxtLink
-        id="header-logo-home-link"
-        :to="localePath('/')"
-        class="flex items-center gap-4 rounded-md px-2 transition-colors duration-300 ease-in-out hover:bg-white/[0.1] focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
-        :aria-label="$t('ConnectHeader.homeLink')"
-      >
-        <ConnectBCGovLogo />
-        <span class="text-base font-semibold text-white lg:text-lg"> {{ $t('ConnectHeader.title') }} </span>
-      </NuxtLink>
+  <ConnectHeaderWrapper>
+    <div class="flex items-center justify-between">
+      <ConnectHeaderLogoHomeLink />
       <ClientOnly>
         <div class="flex gap-1">
           <ConnectHeaderAuthenticatedOptions v-if="isAuthenticated" />
@@ -28,6 +12,6 @@ const localePath = useLocalePath()
           <ConnectLocaleSelect />
         </div>
       </ClientOnly>
-    </nav>
-  </header>
+    </div>
+  </ConnectHeaderWrapper>
 </template>
diff --git a/nuxt/layers/core/app/components/Connect/LocaleSelect.vue b/nuxt/layers/core/app/components/Connect/LocaleSelect.vue
index e3307cd..eb87580 100644
--- a/nuxt/layers/core/app/components/Connect/LocaleSelect.vue
+++ b/nuxt/layers/core/app/components/Connect/LocaleSelect.vue
@@ -19,6 +19,7 @@ const items = computed<DropdownItem[][]>(() => {
 </script>
 <template>
   <UDropdown
+    v-if="items[0] && items[0].length > 1"
     id="locale-select-dropdown"
     data-testid="locale-select-dropdown"
     :items="items"
diff --git a/nuxt/layers/core/app/components/Connect/PageSection.vue b/nuxt/layers/core/app/components/Connect/PageSection.vue
new file mode 100644
index 0000000..269c765
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/PageSection.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineProps<{
+  heading?: {
+    label?: string
+    labelClass?: string
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    icon?: string
+    iconClass?: string
+  }
+}>()
+</script>
+<template>
+  <UCard
+    as="section"
+    class="w-full"
+    :ui="{
+      rounded: 'rounded',
+      header: {
+        base: 'rounded-t',
+        background: 'bg-bcGovColor-gray2',
+        padding: 'px-4 py-4 sm:px-4',
+      },
+      body: {
+        padding: 'px-0 py-0 sm:p-0',
+      },
+    }"
+  >
+    <template v-if="heading?.label || $slots.header" #header>
+      <slot name="header">
+        <component
+          :is="heading?.level || 'h2'"
+          class="flex items-center gap-2"
+        >
+          <UIcon
+            v-if="heading?.icon"
+            :name="heading.icon"
+            :class="heading?.iconClass || 'size-6 shrink-0 text-bcGovColor-activeBlue'"
+          />
+          <span :class="heading?.labelClass || 'font-semibold text-bcGovColor-darkGray text-base'">{{ heading?.label }}</span>
+        </component>
+      </slot>
+    </template>
+    <slot />
+  </UCard>
+</template>
diff --git a/nuxt/layers/core/app/components/Connect/Spinner.vue b/nuxt/layers/core/app/components/Connect/Spinner.vue
new file mode 100644
index 0000000..e110f8e
--- /dev/null
+++ b/nuxt/layers/core/app/components/Connect/Spinner.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+defineProps({
+  overlay: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+<template>
+  <!-- eslint-disable tailwindcss/no-custom-classname -->
+  <Teleport v-if="overlay" to="body">
+    <div class="absolute left-0 top-0 z-[999] h-screen w-screen bg-gray-100 opacity-50" />
+  </Teleport>
+  <svg class="spinner" viewBox="0 0 50 50">
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</template>
+<style scoped>
+  .spinner {
+    position: absolute;
+    animation: rotate 1.5s linear infinite;
+    z-index: 1000;
+    top: 50%;
+    left: 50%;
+    margin: -37.5px 0 0 -37.5px;
+    width: 75px;
+    height: 75px;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner .path {
+    stroke: #1669bb;
+    stroke-linecap: round;
+    animation: dash 1.25s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+</style>
diff --git a/nuxt/layers/core/app/components/Connect/SystemBanner.vue b/nuxt/layers/core/app/components/Connect/SystemBanner.vue
index 85ae373..c6acfbe 100644
--- a/nuxt/layers/core/app/components/Connect/SystemBanner.vue
+++ b/nuxt/layers/core/app/components/Connect/SystemBanner.vue
@@ -14,7 +14,7 @@ onMounted(async () => {
 })
 </script>
 <template>
-  <div v-if="systemMessage !== ''" role="alert" class="flex justify-center bg-bcGovColor-navDivider px-5 py-2">
+  <div v-if="systemMessage.trim()" role="alert" class="flex justify-center bg-bcGovColor-navDivider px-5 py-2">
     <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
     <span class="vhtml mx-auto max-w-bcGovLg text-bcGovColor-darkGray" v-html="systemMessage" />
   </div>
diff --git a/nuxt/layers/core/app/components/Connect/Toggletip.vue b/nuxt/layers/core/app/components/Connect/Toggletip.vue
index acacb50..63e0aa2 100644
--- a/nuxt/layers/core/app/components/Connect/Toggletip.vue
+++ b/nuxt/layers/core/app/components/Connect/Toggletip.vue
@@ -11,8 +11,9 @@ const isTouchScreen = useMediaQuery('(pointer: coarse)')
     <UPopover
       :mode="isTouchScreen ? 'click' : 'hover'"
       :ui="{
-        background: 'bg-gray-700',
+        background: 'bg-gray-700 opacity-90',
         ring: 'ring-1 ring-gray-700',
+        rounded: 'rounded'
       }"
     >
       <template #default="{ open }">
diff --git a/nuxt/layers/core/app/composables/useConnectNav.ts b/nuxt/layers/core/app/composables/useConnectNav.ts
index c541dd8..2b79577 100644
--- a/nuxt/layers/core/app/composables/useConnectNav.ts
+++ b/nuxt/layers/core/app/composables/useConnectNav.ts
@@ -168,6 +168,10 @@ export function useConnectNav () {
   })
 
   return {
+    basicAccountOptions,
+    accountSettingsOptions,
+    switchAccountOptions,
+    createAccountOptions,
     loggedInUserOptions,
     loggedOutUserOptions,
     loggedOutUserOptionsMobile,
diff --git a/nuxt/layers/core/app/composables/useKeycloak.ts b/nuxt/layers/core/app/composables/useKeycloak.ts
index 8d30834..a7bec8a 100644
--- a/nuxt/layers/core/app/composables/useKeycloak.ts
+++ b/nuxt/layers/core/app/composables/useKeycloak.ts
@@ -1,9 +1,6 @@
 export const useKeycloak = () => {
   const { $keycloak, $i18n } = useNuxtApp()
 
-  const loginRedirectUrl = ref<string | null>(null)
-  const logoutRedirectUrl = ref<string | null>(null)
-
   /**
    * Logs the user in using the idpHint 'bcsc', 'idir' or 'bceid' and an optional redirect URL.
    * @param idpHint - The identity provider hint to use for login.
@@ -11,10 +8,13 @@ export const useKeycloak = () => {
    * @returns A promise that resolves when login is complete.
    */
   function login (idpHint: IdpHint, redirect?: string): Promise<void> {
+    const loginRedirectUrl = sessionStorage.getItem(ConnectStorageKeys.LOGIN_REDIRECT_URL)
+    const redirectUri = redirect ?? loginRedirectUrl ?? `${location.origin}/${$i18n.locale.value}`
+
     return $keycloak.login(
       {
         idpHint,
-        redirectUri: redirect ?? loginRedirectUrl.value ?? `${location.origin}/${$i18n.locale.value}`
+        redirectUri
       }
     )
   }
@@ -25,9 +25,12 @@ export const useKeycloak = () => {
    * @returns A promise that resolves when logout is complete.
    */
   function logout (redirect?: string): Promise<void> {
+    const logoutRedirectUrl = sessionStorage.getItem(ConnectStorageKeys.LOGOUT_REDIRECT_URL)
+    const redirectUri = redirect ?? logoutRedirectUrl ?? `${location.origin}/${$i18n.locale.value}`
+
     resetPiniaStores()
     return $keycloak.logout({
-      redirectUri: redirect ?? logoutRedirectUrl.value ?? `${location.origin}/${$i18n.locale.value}`
+      redirectUri
     })
   }
 
@@ -73,19 +76,19 @@ export const useKeycloak = () => {
   }
 
   function setLoginRedirectUrl (url: string) {
-    loginRedirectUrl.value = url
+    sessionStorage.setItem(ConnectStorageKeys.LOGIN_REDIRECT_URL, url)
   }
 
   function setLogoutRedirectUrl (url: string) {
-    logoutRedirectUrl.value = url
+    sessionStorage.setItem(ConnectStorageKeys.LOGOUT_REDIRECT_URL, url)
   }
 
   function clearLoginRedirectUrl () {
-    loginRedirectUrl.value = null
+    sessionStorage.removeItem(ConnectStorageKeys.LOGIN_REDIRECT_URL)
   }
 
   function clearLogoutRedirectUrl () {
-    logoutRedirectUrl.value = null
+    sessionStorage.removeItem(ConnectStorageKeys.LOGOUT_REDIRECT_URL)
   }
 
   return {
@@ -97,8 +100,6 @@ export const useKeycloak = () => {
     setLoginRedirectUrl,
     setLogoutRedirectUrl,
     isAuthenticated,
-    kcUser,
-    loginRedirectUrl,
-    logoutRedirectUrl
+    kcUser
   }
 }
diff --git a/nuxt/layers/core/app/enums/connect-storage-keys.ts b/nuxt/layers/core/app/enums/connect-storage-keys.ts
new file mode 100644
index 0000000..5818d70
--- /dev/null
+++ b/nuxt/layers/core/app/enums/connect-storage-keys.ts
@@ -0,0 +1,4 @@
+export enum ConnectStorageKeys {
+  LOGIN_REDIRECT_URL = 'sbc-connect-login-redirect-url',
+  LOGOUT_REDIRECT_URL = 'sbc-connect-logout-redirect-url',
+}
diff --git a/nuxt/layers/core/app/layouts/default.vue b/nuxt/layers/core/app/layouts/default.vue
index 423e2cc..86b4488 100644
--- a/nuxt/layers/core/app/layouts/default.vue
+++ b/nuxt/layers/core/app/layouts/default.vue
@@ -6,12 +6,12 @@
     <ConnectHeader />
     <ConnectSystemBanner />
     <ConnectBreadcrumb />
-    <div
+    <main
       class="mx-auto w-full max-w-bcGovLg grow"
       data-testid="connect-default-layout-slot"
     >
       <slot />
-    </div>
+    </main>
     <ConnectFooter />
   </div>
 </template>
diff --git a/nuxt/layers/core/app/plugins/maska.ts b/nuxt/layers/core/app/plugins/maska.ts
new file mode 100644
index 0000000..0a55212
--- /dev/null
+++ b/nuxt/layers/core/app/plugins/maska.ts
@@ -0,0 +1,6 @@
+// https://beholdr.github.io/maska/v3/#/vue
+import { vMaska } from 'maska/vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('maska', vMaska)
+})
diff --git a/nuxt/layers/core/app/stores/connect-account.ts b/nuxt/layers/core/app/stores/connect-account.ts
index 0f6c135..ad9f2f7 100644
--- a/nuxt/layers/core/app/stores/connect-account.ts
+++ b/nuxt/layers/core/app/stores/connect-account.ts
@@ -112,7 +112,7 @@ export const useConnectAccountStore = defineStore('nuxt-core-connect-account-sto
         return undefined
       }
     } catch (e) {
-      console.error('Error retrieving user accounts.', e)
+      logFetchError(e, 'Error retrieving user accounts')
       return undefined
     }
   }
diff --git a/nuxt/layers/core/app/utils/breadcrumbs.ts b/nuxt/layers/core/app/utils/setBreadcrumbs.ts
similarity index 100%
rename from nuxt/layers/core/app/utils/breadcrumbs.ts
rename to nuxt/layers/core/app/utils/setBreadcrumbs.ts
diff --git a/nuxt/layers/core/package.json b/nuxt/layers/core/package.json
index 37efec9..f500e6a 100644
--- a/nuxt/layers/core/package.json
+++ b/nuxt/layers/core/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@sbc-connect/nuxt-core-layer",
+  "name": "@daxiom/nuxt-core-layer-test",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.7",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground --port 3000",
@@ -49,6 +49,7 @@
     "jsdom": "^24.0.1",
     "keycloak-js": "^25.0.1",
     "launchdarkly-vue-client-sdk": "^2.2.2",
+    "maska": "^3.0.2",
     "zod": "^3.23.8"
   }
 }
diff --git a/nuxt/layers/core/pnpm-lock.yaml b/nuxt/layers/core/pnpm-lock.yaml
index 628e287..ddc17bd 100644
--- a/nuxt/layers/core/pnpm-lock.yaml
+++ b/nuxt/layers/core/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   launchdarkly-vue-client-sdk:
     specifier: ^2.2.2
     version: 2.2.2(vue@3.4.32)
+  maska:
+    specifier: ^3.0.2
+    version: 3.0.2
   zod:
     specifier: ^3.23.8
     version: 3.23.8
@@ -7229,6 +7232,10 @@ packages:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
     dev: false
 
+  /maska@3.0.2:
+    resolution: {integrity: sha512-onh3JCFrkUTFrrhhDpfQZGwQ830zeEUEVbuQDZpLzY/JXJ5QR+hQ6FJ7lcw1NikAixtpGXkxxC+teO5glT3Vyw==}
+    dev: false
+
   /mdast-util-find-and-replace@3.0.1:
     resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
     dependencies:
diff --git a/nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/AccountLabel.test.ts b/nuxt/layers/core/tests/unit/components/ConnectHeader/AccountLabel.test.ts
similarity index 73%
rename from nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/AccountLabel.test.ts
rename to nuxt/layers/core/tests/unit/components/ConnectHeader/AccountLabel.test.ts
index 3345c99..6ed0139 100644
--- a/nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/AccountLabel.test.ts
+++ b/nuxt/layers/core/tests/unit/components/ConnectHeader/AccountLabel.test.ts
@@ -1,11 +1,11 @@
 import { describe, expect, it } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { enI18n, frI18n } from '~~/tests/unit/mocks/i18n'
-import { ConnectHeaderAuthenticatedOptionsAccountLabel } from '#components'
+import { ConnectHeaderAccountLabel } from '#components'
 
-describe('<ConnectHeaderAuthenticatedOptionsAccountLabel />', () => {
+describe('<ConnectHeaderAccountLabel />', () => {
   it('renders with default props', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsAccountLabel, {
+    const wrapper = await mountSuspended(ConnectHeaderAccountLabel, {
       global: {
         plugins: [enI18n]
       }
@@ -16,7 +16,7 @@ describe('<ConnectHeaderAuthenticatedOptionsAccountLabel />', () => {
   })
 
   it('renders with props', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsAccountLabel, {
+    const wrapper = await mountSuspended(ConnectHeaderAccountLabel, {
       global: {
         plugins: [enI18n]
       },
@@ -32,7 +32,7 @@ describe('<ConnectHeaderAuthenticatedOptionsAccountLabel />', () => {
   })
 
   it('renders correctly with empty username', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsAccountLabel, {
+    const wrapper = await mountSuspended(ConnectHeaderAccountLabel, {
       global: {
         plugins: [enI18n]
       },
@@ -47,7 +47,7 @@ describe('<ConnectHeaderAuthenticatedOptionsAccountLabel />', () => {
   })
 
   it('renders correctly with different locale', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsAccountLabel, {
+    const wrapper = await mountSuspended(ConnectHeaderAccountLabel, {
       global: {
         plugins: [frI18n]
       },
diff --git a/nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/index.test.ts b/nuxt/layers/core/tests/unit/components/ConnectHeader/AuthenticatedOptions.test.ts
similarity index 100%
rename from nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/index.test.ts
rename to nuxt/layers/core/tests/unit/components/ConnectHeader/AuthenticatedOptions.test.ts
diff --git a/nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/Notifications.test.ts b/nuxt/layers/core/tests/unit/components/ConnectHeader/Notifications.test.ts
similarity index 79%
rename from nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/Notifications.test.ts
rename to nuxt/layers/core/tests/unit/components/ConnectHeader/Notifications.test.ts
index e58b848..d53381f 100644
--- a/nuxt/layers/core/tests/unit/components/ConnectHeader/Auth/Notifications.test.ts
+++ b/nuxt/layers/core/tests/unit/components/ConnectHeader/Notifications.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
 import { enI18n } from '~~/tests/unit/mocks/i18n'
-import { ConnectHeaderAuthenticatedOptionsNotifications } from '#components'
+import { ConnectHeaderNotifications } from '#components'
 
 mockNuxtImport('useConnectNav', () => {
   return () => (
@@ -27,9 +27,9 @@ mockNuxtImport('useConnectAccountStore', () => {
   )
 })
 
-describe('<ConnectHeaderAuthenticatedOptionsNotifications />', () => {
+describe('<ConnectHeaderNotifications />', () => {
   it('renders', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsNotifications, {
+    const wrapper = await mountSuspended(ConnectHeaderNotifications, {
       global: {
         plugins: [enI18n]
       }
@@ -41,7 +41,7 @@ describe('<ConnectHeaderAuthenticatedOptionsNotifications />', () => {
   })
 
   it('shows the chip when pendingApprovalCount is greater than 0', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsNotifications, {
+    const wrapper = await mountSuspended(ConnectHeaderNotifications, {
       global: {
         plugins: [enI18n]
       }
@@ -53,7 +53,7 @@ describe('<ConnectHeaderAuthenticatedOptionsNotifications />', () => {
 
   it('does not show the chip when pendingApprovalCount is 0', async () => {
     mockPendingApprovalCount = 0
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsNotifications, {
+    const wrapper = await mountSuspended(ConnectHeaderNotifications, {
       global: {
         plugins: [enI18n]
       }
@@ -65,7 +65,7 @@ describe('<ConnectHeaderAuthenticatedOptionsNotifications />', () => {
 
   it('displays the correct aria-label for notifications', async () => {
     mockPendingApprovalCount = 4
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsNotifications, {
+    const wrapper = await mountSuspended(ConnectHeaderNotifications, {
       global: {
         plugins: [enI18n]
       }
@@ -77,7 +77,7 @@ describe('<ConnectHeaderAuthenticatedOptionsNotifications />', () => {
 
   it('renders the correct notification message in the slot', async () => {
     mockPendingApprovalCount = 4
-    const wrapper = await mountSuspended(ConnectHeaderAuthenticatedOptionsNotifications, {
+    const wrapper = await mountSuspended(ConnectHeaderNotifications, {
       global: {
         plugins: [enI18n]
       }
diff --git a/nuxt/layers/core/tests/unit/components/ConnectHeader/NoAuth/index.test.ts b/nuxt/layers/core/tests/unit/components/ConnectHeader/UnauthenticatedOptions.test.ts
similarity index 100%
rename from nuxt/layers/core/tests/unit/components/ConnectHeader/NoAuth/index.test.ts
rename to nuxt/layers/core/tests/unit/components/ConnectHeader/UnauthenticatedOptions.test.ts
diff --git a/nuxt/layers/core/tests/unit/components/ConnectHeader/NoAuth/WhatsNew.test.ts b/nuxt/layers/core/tests/unit/components/ConnectHeader/WhatsNew.test.ts
similarity index 62%
rename from nuxt/layers/core/tests/unit/components/ConnectHeader/NoAuth/WhatsNew.test.ts
rename to nuxt/layers/core/tests/unit/components/ConnectHeader/WhatsNew.test.ts
index a3d9989..d76661e 100644
--- a/nuxt/layers/core/tests/unit/components/ConnectHeader/NoAuth/WhatsNew.test.ts
+++ b/nuxt/layers/core/tests/unit/components/ConnectHeader/WhatsNew.test.ts
@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import { ConnectHeaderUnauthenticatedOptionsWhatsNew } from '#components'
+import { ConnectHeaderWhatsNew } from '#components'
 import { enI18n } from '~~/tests/unit/mocks/i18n'
 
 // TODO: add tests when whats new is implemented
-describe('<ConnectHeaderUnauthenticatedOptionsWhatsNew />', () => {
+describe('<ConnectHeaderWhatsNew />', () => {
   it('renders', async () => {
-    const wrapper = await mountSuspended(ConnectHeaderUnauthenticatedOptionsWhatsNew, {
+    const wrapper = await mountSuspended(ConnectHeaderWhatsNew, {
       global: {
         plugins: [enI18n]
       }
diff --git a/nuxt/layers/core/tests/unit/layouts/default.test.ts b/nuxt/layers/core/tests/unit/layouts/default.test.ts
index c3f0210..67a2c34 100644
--- a/nuxt/layers/core/tests/unit/layouts/default.test.ts
+++ b/nuxt/layers/core/tests/unit/layouts/default.test.ts
@@ -38,7 +38,7 @@ describe('Default Layout', () => {
       }
     })
 
-    const header = wrapper.getByTestId('connect-main-header')
+    const header = wrapper.getByTestId('connect-header-wrapper')
     const footer = wrapper.getByTestId('connect-main-footer')
     const slot = wrapper.getByTestId('connect-default-layout-slot')
 
@@ -46,6 +46,6 @@ describe('Default Layout', () => {
     expect(header).toBeDefined()
     expect(footer).toBeDefined()
     expect(slot).toBeDefined()
-    expect(slot.outerHTML).toEqual('<div class="mx-auto w-full max-w-bcGovLg grow" data-testid="connect-default-layout-slot"></div>')
+    expect(slot.outerHTML).toEqual('<main class="mx-auto w-full max-w-bcGovLg grow" data-testid="connect-default-layout-slot"></main>')
   })
 })