From a6d282e59b07b721143857cba19ee9d809a94e3b Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 29 Sep 2025 21:28:48 +0800
Subject: [PATCH 1/5] WIP: HomeView heading adjustments

---
 src/views/HomeView.vue | 56 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e8d2035a..34554031 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,7 +6,6 @@ Raymer * @version 1.0.0 */
 
 <template>
   <QuickNav selected="Home" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section
@@ -14,10 +13,47 @@ Raymer * @version 1.0.0 */
     class="p-6 pb-24 max-w-3xl mx-auto"
     :data-active-did="activeDid"
   >
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      {{ AppString.APP_NAME }}
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
-    </h1>
+    <!-- Main View Heading -->
+    <div class="mb-12">
+      <div class="absolute top-0 inset-x-0">
+        <div class="flex gap-4 items-center px-6 py-4 max-w-3xl mx-auto">
+          <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+            {{ AppString.APP_NAME }}
+            <span class="text-xs font-medium text-slate-500 uppercase">{{
+              package.version
+            }}</span>
+          </h1>
+
+          <router-link
+            :to="{ name: 'help' }"
+            class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+          >
+            <font-awesome icon="question" class="block text-center w-[1em]" />
+          </router-link>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main View Heading - Alternate Bar Design -->
+    <div v-if="false" class="mb-12">
+      <div class="absolute top-0 inset-x-0 bg-slate-200">
+        <div class="flex gap-2 items-center px-6 py-3 max-w-3xl mx-auto">
+          <h1 id="ViewHeading" class="text-2xl font-light leading-none">
+            {{ AppString.APP_NAME }}
+            <span class="text-xs font-medium text-slate-500 uppercase">{{
+              package.version
+            }}</span>
+          </h1>
+
+          <router-link
+            :to="{ name: 'help' }"
+            class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+          >
+            <font-awesome icon="question" class="block text-center w-[1em]" />
+          </router-link>
+        </div>
+      </div>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -97,9 +133,9 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <h2 class="text-xl font-bold">Record something given by:</h2>
+              <h2 class="font-bold">Record something given by:</h2>
               <button
-                class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                 @click="openGiftedPrompts()"
               >
                 <font-awesome
@@ -143,10 +179,10 @@ Raymer * @version 1.0.0 */
     <!-- Results List -->
     <div class="mt-4 mb-4">
       <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
-          class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome
@@ -156,7 +192,7 @@ Raymer * @version 1.0.0 */
         </button>
         <button
           v-else
-          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome

From 88778a167c90f936632c34d80cd25685eb580cfa Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Wed, 1 Oct 2025 18:38:43 +0800
Subject: [PATCH 2/5] WIP: sub view heading adjustments

---
 src/views/AccountViewView.vue       | 18 +++++++---
 src/views/ContactQRScanShowView.vue | 34 +++++++++----------
 src/views/HomeView.vue              | 51 ++++++++---------------------
 3 files changed, 42 insertions(+), 61 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index f4cdaca8..2baa25d2 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <main
@@ -9,10 +8,19 @@
     role="main"
     aria-label="Account Profile"
   >
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Identity
-    </h1>
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-8">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Identity
+      </h1>
+
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- ID notice -->
     <div
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 8afbfecb..90ee14e7 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -1,26 +1,24 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div class="mb-2">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        <!-- Back -->
-        <a
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="handleBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </a>
-
-        <!-- Quick Help -->
-        <a
-          class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-          @click="toastQRCodeHelp()"
-        >
-          <font-awesome icon="circle-question" class="fa-fw" />
-        </a>
-
+    <!-- Sub View Heading -->
+    <div class="flex gap-4 items-center mb-8">
+      <!-- Back -->
+      <a class="text-lg text-center leading-none p-1" @click="handleBack">
+        <font-awesome icon="chevron-left" class="w-[1em]" />
+      </a>
+
+      <h1 class="grow text-xl text-center font-semibold leading-none">
         Share Contact Info
       </h1>
+
+      <!-- Quick Help -->
+      <a
+        class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        @click="toastQRCodeHelp()"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </a>
     </div>
 
     <div v-if="!givenName" :class="nameWarningClasses">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 34554031..2f71a3f6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,45 +14,20 @@ Raymer * @version 1.0.0 */
     :data-active-did="activeDid"
   >
     <!-- Main View Heading -->
-    <div class="mb-12">
-      <div class="absolute top-0 inset-x-0">
-        <div class="flex gap-4 items-center px-6 py-4 max-w-3xl mx-auto">
-          <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
-            {{ AppString.APP_NAME }}
-            <span class="text-xs font-medium text-slate-500 uppercase">{{
-              package.version
-            }}</span>
-          </h1>
-
-          <router-link
-            :to="{ name: 'help' }"
-            class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
-          >
-            <font-awesome icon="question" class="block text-center w-[1em]" />
-          </router-link>
-        </div>
-      </div>
-    </div>
+    <div class="flex gap-4 items-center mb-8">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        {{ AppString.APP_NAME }}
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
+      </h1>
 
-    <!-- Main View Heading - Alternate Bar Design -->
-    <div v-if="false" class="mb-12">
-      <div class="absolute top-0 inset-x-0 bg-slate-200">
-        <div class="flex gap-2 items-center px-6 py-3 max-w-3xl mx-auto">
-          <h1 id="ViewHeading" class="text-2xl font-light leading-none">
-            {{ AppString.APP_NAME }}
-            <span class="text-xs font-medium text-slate-500 uppercase">{{
-              package.version
-            }}</span>
-          </h1>
-
-          <router-link
-            :to="{ name: 'help' }"
-            class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
-          >
-            <font-awesome icon="question" class="block text-center w-[1em]" />
-          </router-link>
-        </div>
-      </div>
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <OnboardingDialog ref="onboardingDialog" />

From be8230d046e0786c6cbe27e1f59410dc173b34ba Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Fri, 3 Oct 2025 21:49:35 +0800
Subject: [PATCH 3/5] refactor: standardize view headings across all components

- Add consistent view heading IDs and structure
- Add consistent help buttons and back navigation
- Improve spacing and typography consistency
---
 src/views/AccountViewView.vue                |  1 +
 src/views/ClaimAddRawView.vue                | 30 ++++++----
 src/views/ClaimView.vue                      | 30 ++++++----
 src/views/ConfirmContactView.vue             | 29 +++++----
 src/views/ConfirmGiftView.vue                | 33 ++++++----
 src/views/ContactAmountsView.vue             | 23 ++++---
 src/views/ContactEditView.vue                | 31 ++++++----
 src/views/ContactGiftingView.vue             | 28 ++++++---
 src/views/ContactImportView.vue              | 32 ++++++----
 src/views/ContactQRScanFullView.vue          | 39 ++++++------
 src/views/ContactQRScanShowView.vue          | 17 +++---
 src/views/ContactsView.vue                   | 21 +++++--
 src/views/DIDView.vue                        | 31 ++++++----
 src/views/DeepLinkErrorView.vue              | 15 +++--
 src/views/DeepLinkRedirectView.vue           |  9 ++-
 src/views/DiscoverView.vue                   | 27 +++++----
 src/views/GiftedDetailsView.vue              | 35 ++++++-----
 src/views/HelpNotificationTypesView.vue      | 33 +++++-----
 src/views/HelpNotificationsView.vue          | 33 +++++-----
 src/views/HelpOnboardingView.vue             |  8 +--
 src/views/HelpView.vue                       | 32 +++++-----
 src/views/HomeView.vue                       |  3 +-
 src/views/IdentitySwitcherView.vue           | 29 +++++----
 src/views/ImportAccountView.vue              | 29 +++++----
 src/views/ImportDerivedAccountView.vue       | 31 ++++++----
 src/views/InviteOneView.vue                  | 33 ++++++----
 src/views/LogView.vue                        | 29 +++++----
 src/views/NewActivityView.vue                | 28 ++++++---
 src/views/NewEditAccountView.vue             | 29 +++++----
 src/views/NewEditProjectView.vue             | 30 ++++++----
 src/views/NewIdentifierView.vue              | 33 +++++-----
 src/views/OfferDetailsView.vue               | 32 ++++++----
 src/views/OnboardMeetingListView.vue         | 22 +++++--
 src/views/OnboardMeetingMembersView.vue      | 22 +++++--
 src/views/OnboardMeetingSetupView.vue        | 22 +++++--
 src/views/ProjectViewView.vue                | 63 +++++++++++---------
 src/views/ProjectsView.vue                   | 27 ++++++---
 src/views/QuickActionBvcBeginView.vue        | 31 ++++++----
 src/views/QuickActionBvcEndView.vue          | 30 ++++++----
 src/views/QuickActionBvcView.vue             | 33 ++++++----
 src/views/RecentOffersToUserProjectsView.vue | 28 ++++++---
 src/views/RecentOffersToUserView.vue         | 28 ++++++---
 src/views/SearchAreaView.vue                 | 35 ++++++-----
 src/views/SeedBackupView.vue                 | 38 ++++++------
 src/views/ShareMyContactInfoView.vue         | 35 ++++++-----
 src/views/SharedPhotoView.vue                | 26 ++++++--
 src/views/StartView.vue                      | 35 ++++++-----
 src/views/StatisticsView.vue                 | 33 +++++-----
 src/views/TestView.vue                       | 31 +++++-----
 src/views/UserProfileView.vue                | 31 ++++++----
 50 files changed, 874 insertions(+), 539 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 2baa25d2..ed8da3d3 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -14,6 +14,7 @@
         Your Identity
       </h1>
 
+      <!-- Help button -->
       <router-link
         :to="{ name: 'help' }"
         class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
diff --git a/src/views/ClaimAddRawView.vue b/src/views/ClaimAddRawView.vue
index 2b4410f3..d2a1e838 100644
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -1,19 +1,27 @@
 <template>
-  <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Raw Claim
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex">
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index ee095764..f4ff3c08 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -2,19 +2,27 @@
   <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Verifiable Claim Details
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Details -->
diff --git a/src/views/ConfirmContactView.vue b/src/views/ConfirmContactView.vue
index 942928e4..672802de 100644
--- a/src/views/ConfirmContactView.vue
+++ b/src/views/ConfirmContactView.vue
@@ -1,18 +1,27 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Confirm Contact
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <p class="text-center text-xl mb-4 font-light">
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index 974306e8..837513cf 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -1,18 +1,9 @@
 <template>
-  <QuickNav />
-  <TopMessage />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         <span
           v-if="
             libsUtil.isGiveRecordTheUserCanConfirm(
@@ -25,8 +16,24 @@
         >
           Do you agree?
         </span>
-        <span v-else> Confirmation Details </span>
+        <span v-else>Confirmation Details</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="giveDetails && !isLoading">
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index b34b3d11..4306a9e1 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -2,18 +2,27 @@
   <QuickNav selected="Contacts" />
 
   <section class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Header -->
-    <div class="mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Transferred with {{ contact?.name }}
+      </h1>
+
+      <!-- Back -->
       <router-link
+        class="order-first text-lg text-center leading-none p-1"
         :to="{ name: 'contacts' }"
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
       >
-        <font-awesome icon="chevron-left" class="fa-fw" />
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
       </router-link>
 
-      <h1 class="text-4xl text-center font-light pt-4">
-        Transferred with {{ contact?.name }}
-      </h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Info Messages -->
diff --git a/src/views/ContactEditView.vue b/src/views/ContactEditView.vue
index 5b6f63a5..f521beb8 100644
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -1,19 +1,26 @@
 <template>
-  <QuickNav selected="Contacts" />
-  <TopMessage />
-
   <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-4xl text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         {{ contact?.name || AppString.NO_CONTACT_NAME }}
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Contact Name -->
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index b4c4f5eb..10e43eed 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'home' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         {{ stepType === "giver" ? "Given by..." : "Given to..." }}
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'home' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Results List -->
diff --git a/src/views/ContactImportView.vue b/src/views/ContactImportView.vue
index 2d4eab99..a1702a02 100644
--- a/src/views/ContactImportView.vue
+++ b/src/views/ContactImportView.vue
@@ -1,20 +1,28 @@
 <template>
   <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Contact Import
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Contact Import
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div v-if="checkingImports" class="text-center">
       <font-awesome icon="spinner" class="animate-spin" />
diff --git a/src/views/ContactQRScanFullView.vue b/src/views/ContactQRScanFullView.vue
index 15eb5185..6918b0c7 100644
--- a/src/views/ContactQRScanFullView.vue
+++ b/src/views/ContactQRScanFullView.vue
@@ -2,26 +2,27 @@
   <!-- CONTENT -->
   <section id="Content" class="relative w-[100vw] h-[100vh]">
     <div :class="mainContentClasses">
-      <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative">
-          <!-- Back -->
-          <a
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="handleBack"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw" />
-          </a>
-
-          <!-- Quick Help -->
-          <a
-            class="text-xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-            @click="toastQRCodeHelp()"
-          >
-            <font-awesome icon="circle-question" class="fa-fw" />
-          </a>
-
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
           Share Contact Info
         </h1>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="handleBack"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Quick Help -->
+        <a
+          class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+          @click="toastQRCodeHelp()"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </a>
       </div>
 
       <div
@@ -235,7 +236,7 @@ export default class ContactQRScanFull extends Vue {
    * Computed property for main content container CSS classes
    */
   get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
+    return "p-4 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   /**
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 90ee14e7..4bfe0be3 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -2,16 +2,19 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Sub View Heading -->
-    <div class="flex gap-4 items-center mb-8">
-      <!-- Back -->
-      <a class="text-lg text-center leading-none p-1" @click="handleBack">
-        <font-awesome icon="chevron-left" class="w-[1em]" />
-      </a>
-
-      <h1 class="grow text-xl text-center font-semibold leading-none">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Share Contact Info
       </h1>
 
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="handleBack"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
       <!-- Quick Help -->
       <a
         class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 23d4fbe9..e0f4fea2 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -1,14 +1,23 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Contacts
-    </h1>
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Contacts
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
-    <div class="flex justify-between py-2 mt-8">
+    <div class="flex justify-between py-2 mt-4">
       <span />
       <span>
         <a
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index 93de83c3..038fc4ba 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -1,22 +1,29 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
-             (and going back there is annoying). -->
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Identifier Details
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'contacts' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity Details -->
diff --git a/src/views/DeepLinkErrorView.vue b/src/views/DeepLinkErrorView.vue
index 803b1d5e..57bbd00c 100644
--- a/src/views/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -1,7 +1,15 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1>Invalid Deep Link</h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1
+        class="grow text-rose-500 text-xl text-center font-semibold leading-tight"
+      >
+        Invalid Deep Link
+      </h1>
+    </div>
+
     <div class="error-details">
       <div class="error-message">
         <h3>Error Details</h3>
@@ -114,11 +122,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-h1 {
-  color: #ff4444;
-  margin-bottom: 24px;
-}
-
 h2,
 h3 {
   color: #333;
diff --git a/src/views/DeepLinkRedirectView.vue b/src/views/DeepLinkRedirectView.vue
index a4a88572..b16ec5fa 100644
--- a/src/views/DeepLinkRedirectView.vue
+++ b/src/views/DeepLinkRedirectView.vue
@@ -2,9 +2,12 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <div class="mb-4">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        Redirecting to Time Safari
-      </h1>
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          Redirecting to Time Safari
+        </h1>
+      </div>
 
       <div v-if="destinationUrl" class="space-y-4">
         <!-- Platform-specific messaging -->
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 778f9eb2..1f305f5a 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -1,13 +1,20 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Discover Projects & People
-    </h1>
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -782,7 +789,7 @@ export default class DiscoverView extends Vue {
   public computedLocalTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -800,7 +807,7 @@ export default class DiscoverView extends Vue {
   public computedMappedTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -818,7 +825,7 @@ export default class DiscoverView extends Vue {
   public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -836,7 +843,7 @@ export default class DiscoverView extends Vue {
   public computedProjectsTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -854,7 +861,7 @@ export default class DiscoverView extends Vue {
   public computedPeopleTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index 990a8b20..fff889ae 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -1,24 +1,31 @@
 <template>
-  <QuickNav />
-  <TopMessage />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+    <div class="mb-8">
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          What Was Given
+        </h1>
+
         <!-- Back -->
-        <div
-          v-if="!hideBackButton"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        <a
+          class="order-first text-lg text-center leading-none p-1"
           @click="cancelBack()"
         >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </div>
-        What Was Given
-      </h1>
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Help button -->
+        <router-link
+          :to="{ name: 'help' }"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </router-link>
+      </div>
 
-      <h2 class="text-lg font-normal text-center overflow-hidden">
+      <h2 class="text-lg font-normal leading-tight text-center overflow-hidden">
         <div class="truncate">
           From
           {{
diff --git a/src/views/HelpNotificationTypesView.vue b/src/views/HelpNotificationTypesView.vue
index 7cf68a98..3e6eac82 100644
--- a/src/views/HelpNotificationTypesView.vue
+++ b/src/views/HelpNotificationTypesView.vue
@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Notification Types
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index e768c870..4da4944f 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -34,22 +34,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Notification Help
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->
diff --git a/src/views/HelpOnboardingView.vue b/src/views/HelpOnboardingView.vue
index ce519a4a..b377f19c 100644
--- a/src/views/HelpOnboardingView.vue
+++ b/src/views/HelpOnboardingView.vue
@@ -3,11 +3,9 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Don't include 'back' button since this is shown in a different window. -->
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Time Safari Onboarding Instructions
       </h1>
     </div>
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index b09aedc7..11cda338 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -3,23 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Help
-        <span class="text-xs text-gray-500">{{ package.version }}</span>
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Spacer (no Help button) -->
+      <div class="p-3 pe-3.5 pb-3.5"></div>
     </div>
 
     <!-- eslint-disable prettier/prettier max-len -->
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2f71a3f6..73e3ac87 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -14,7 +14,7 @@ Raymer * @version 1.0.0 */
     :data-active-did="activeDid"
   >
     <!-- Main View Heading -->
-    <div class="flex gap-4 items-center mb-8">
+    <div class="flex gap-4 items-center mb-4">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
         {{ AppString.APP_NAME }}
         <span class="text-xs font-medium text-slate-500 uppercase">{{
@@ -22,6 +22,7 @@ Raymer * @version 1.0.0 */
         }}</span>
       </h1>
 
+      <!-- Help button -->
       <router-link
         :to="{ name: 'help' }"
         class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
diff --git a/src/views/IdentitySwitcherView.vue b/src/views/IdentitySwitcherView.vue
index 9d80689d..9eea7fde 100644
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -1,18 +1,27 @@
 <template>
   <QuickNav selected="Profile"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Switch Identity
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity List -->
diff --git a/src/views/ImportAccountView.vue b/src/views/ImportAccountView.vue
index 65e7999a..08d55ee2 100644
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -1,17 +1,26 @@
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Import Existing Identifier
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
     <!-- Import Account Form -->
     <p class="text-center text-xl mb-4 font-light">
diff --git a/src/views/ImportDerivedAccountView.vue b/src/views/ImportDerivedAccountView.vue
index 2772cbe8..7a757537 100644
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -1,20 +1,29 @@
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Derive from Existing Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
-    <!-- Import Account Form -->
 
+    <!-- Import Account Form -->
     <div>
       <p class="text-center text-xl mb-4 font-light">
         Will increment the maximum known derivation path from the existing seed.
diff --git a/src/views/InviteOneView.vue b/src/views/InviteOneView.vue
index f13ec10d..7b0bcbe4 100644
--- a/src/views/InviteOneView.vue
+++ b/src/views/InviteOneView.vue
@@ -1,20 +1,29 @@
 <template>
-  <QuickNav selected="Invite" />
-  <TopMessage />
+  <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Invitations
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
       <li>
diff --git a/src/views/LogView.vue b/src/views/LogView.vue
index 7d819426..297fd473 100644
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -1,22 +1,29 @@
 <!-- This is useful in an environment where the download doesn't work. -->
 <template>
   <QuickNav selected="" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back Button -->
-    <div class="relative px-7">
-      <h1
-        class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
       >
-        <font-awesome icon="chevron-left" class="mr-2" />
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Error Message -->
     <div
diff --git a/src/views/NewActivityView.vue b/src/views/NewActivityView.vue
index 1f01b408..d268f5fd 100644
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         New Activity For You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
diff --git a/src/views/NewEditAccountView.vue b/src/views/NewEditAccountView.vue
index d4fbb9c4..cddf1398 100644
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -22,18 +22,27 @@
 -->
 <template>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Edit Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <input
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index c6668463..d732045f 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -2,19 +2,27 @@
   <QuickNav selected="Projects"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Edit Project Idea
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Project Details -->
diff --git a/src/views/NewIdentifierView.vue b/src/views/NewIdentifierView.vue
index 9ad2945b..f44838e5 100644
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Your Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center py-12">
diff --git a/src/views/OfferDetailsView.vue b/src/views/OfferDetailsView.vue
index b26c0a1f..b40330fc 100644
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -1,24 +1,30 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div
-      v-if="!hideBackButton"
-      class="text-lg text-center font-light relative px-7"
-    >
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        What Is Offered
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="cancelBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <h1 class="text-xl font-bold text-center mb-4">
       <span> Offer to {{ recipientDisplayName }} </span>
diff --git a/src/views/OnboardMeetingListView.vue b/src/views/OnboardMeetingListView.vue
index 91dccb3b..76be91c9 100644
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -1,12 +1,24 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      Onboarding Meetings
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meetings
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center py-8">
diff --git a/src/views/OnboardMeetingMembersView.vue b/src/views/OnboardMeetingMembersView.vue
index 7e42718b..51a238de 100644
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -1,12 +1,24 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      Meeting Members
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Meeting Members
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading Animation -->
     <div
diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index c01527f8..19973c64 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -1,12 +1,24 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Onboarding Meeting
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meeting
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Existing Meeting Section -->
     <div
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 13aef08c..a34835b2 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1,40 +1,45 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb">
-      <div>
-        <h1 class="text-center text-lg font-light relative px-7">
-          <!-- Back -->
-          <button
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="$router.back()"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-          </button>
+    <div class="mb-4">
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
           Project Idea
         </h1>
-        <h2 class="text-center text-xl font-semibold">
-          {{ name }}
-          <button
-            v-if="activeDid === issuer || activeDid === agentDid"
-            title="Edit"
-            data-testId="editClaimButton"
-            @click="onEditClick()"
-          >
-            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
-          <button title="Copy Link to Project" @click="onCopyLinkClick()">
-            <font-awesome
-              icon="link"
-              class="text-sm text-slate-500 ml-2 mb-1"
-            />
-          </button>
-        </h2>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="$router.go(-1)"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Help button -->
+        <router-link
+          :to="{ name: 'help' }"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </router-link>
       </div>
+      <h2 class="text-center text-lg font-normal">
+        {{ name }}
+        <button
+          v-if="activeDid === issuer || activeDid === agentDid"
+          title="Edit"
+          data-testId="editClaimButton"
+          @click="onEditClick()"
+        >
+          <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
+        </button>
+        <button title="Copy Link to Project" @click="onCopyLinkClick()">
+          <font-awesome icon="link" class="text-sm text-slate-500 ml-2" />
+        </button>
+      </h2>
     </div>
 
     <!-- Project Details -->
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index af9882a2..0def80d7 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,17 +1,26 @@
 <template>
   <QuickNav selected="Projects" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Project Ideas
-    </h1>
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Ideas
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -646,7 +655,7 @@ export default class ProjectsView extends Vue {
   get offerTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showOffers,
@@ -664,7 +673,7 @@ export default class ProjectsView extends Vue {
    * @returns String with CSS classes for the floating new project button
    */
   get newProjectButtonClasses() {
-    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
   }
 
   /**
@@ -706,7 +715,7 @@ export default class ProjectsView extends Vue {
   get projectTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showProjects,
diff --git a/src/views/QuickActionBvcBeginView.vue b/src/views/QuickActionBvcBeginView.vue
index 578f33fb..0f6399db 100644
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/src/views/QuickActionBvcBeginView.vue
@@ -1,23 +1,30 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Beginning of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="goBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      Beginning of BVC Saturday Meeting
-    </h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">You're Here</h2>
diff --git a/src/views/QuickActionBvcEndView.vue b/src/views/QuickActionBvcEndView.vue
index 3325662f..e42536b7 100644
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -1,20 +1,30 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1 :class="backButtonClasses" @click="$router.back()">
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        End of BVC Saturday Meeting
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      End of BVC Saturday Meeting
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>
diff --git a/src/views/QuickActionBvcView.vue b/src/views/QuickActionBvcView.vue
index d45777e8..9a21cd2d 100644
--- a/src/views/QuickActionBvcView.vue
+++ b/src/views/QuickActionBvcView.vue
@@ -1,23 +1,30 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Bountiful Voluntaryist Community Actions
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      Bountiful Voluntaryist Community Actions
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <router-link
diff --git a/src/views/RecentOffersToUserProjectsView.vue b/src/views/RecentOffersToUserProjectsView.vue
index 455098bb..7f24b5b8 100644
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/src/views/RecentOffersToUserProjectsView.vue
@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to Your Projects
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUserProjects.length === 0">
diff --git a/src/views/RecentOffersToUserView.vue b/src/views/RecentOffersToUserView.vue
index fb52bbd0..97c0c160 100644
--- a/src/views/RecentOffersToUserView.vue
+++ b/src/views/RecentOffersToUserView.vue
@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUser.length === 0">
diff --git a/src/views/SearchAreaView.vue b/src/views/SearchAreaView.vue
index 7efcf48d..4f83abd0 100644
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -1,24 +1,27 @@
 <template>
-  <QuickNav />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Area for Nearby Search
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="px-2 py-4">
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index bdbe3545..3526c8c6 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -28,31 +28,29 @@
 -->
 
 <template>
-  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="goBack"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Seed Backup
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Seed Backup
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <div class="flex justify-between py-2">
-      <span />
-      <span>
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
-          Help
-        </router-link>
-      </span>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="activeAccount">
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index 0c90f42e..622d346b 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -1,26 +1,29 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div>
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Share Your Contact Info
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center mt-8">
diff --git a/src/views/SharedPhotoView.vue b/src/views/SharedPhotoView.vue
index f9cf8d68..db1e8453 100644
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -39,10 +39,28 @@
   <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Image
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Image
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
     <div v-if="imageBlob">
       <div v-if="uploading" class="text-center mb-4">
         <font-awesome icon="spinner" class="fa-spin-pulse" />
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index de21d2e9..e6871cae 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -3,26 +3,31 @@
     id="Content"
     class="p-6 pb-24 min-h-screen flex flex-col justify-center"
   >
-    <!-- Breadcrumb -->
-    <div>
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Generate an Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- id used by puppeteer test script -->
-    <div id="start-question" class="mt-8">
+    <div id="start-question">
       <div class="max-w-3xl mx-auto">
         <p class="text-center text-xl font-light">
           How do you want to create this identifier?
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 20c5debb..6e61a26a 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Achievements & Statistics
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 5a339f8c..7d0b6315 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -3,22 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Test</h1>
+
       <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-        Test
-      </h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="isNotProdServer">
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index 81920f61..103f0f26 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,22 +1,29 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Individual Profile
       </h1>
-      <div class="text-sm text-center text-slate-500"></div>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Loading Animation -->

From 756688bf75c1738b6a10c482f43c476e19e0786f Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 6 Oct 2025 18:42:05 +0800
Subject: [PATCH 4/5] feat: restored TopMessage

- Added back TopMessage tag, placed inside #Content for better positioning
- Styled TopMessage for better visibility
---
 src/components/TopMessage.vue           | 13 +++----------
 src/views/AccountViewView.vue           |  2 ++
 src/views/ConfirmGiftView.vue           |  2 ++
 src/views/ContactEditView.vue           |  2 ++
 src/views/ContactsView.vue              |  2 ++
 src/views/DIDView.vue                   |  2 ++
 src/views/DiscoverView.vue              |  2 ++
 src/views/GiftedDetailsView.vue         |  2 ++
 src/views/HomeView.vue                  |  2 ++
 src/views/InviteOneView.vue             |  2 ++
 src/views/LogView.vue                   |  2 ++
 src/views/OfferDetailsView.vue          |  2 ++
 src/views/OnboardMeetingListView.vue    |  2 ++
 src/views/OnboardMeetingMembersView.vue |  2 ++
 src/views/OnboardMeetingSetupView.vue   |  2 ++
 src/views/ProjectViewView.vue           |  2 ++
 src/views/ProjectsView.vue              |  2 ++
 src/views/QuickActionBvcBeginView.vue   |  2 ++
 src/views/QuickActionBvcEndView.vue     |  2 ++
 src/views/QuickActionBvcView.vue        |  2 ++
 src/views/ShareMyContactInfoView.vue    |  2 ++
 src/views/UserProfileView.vue           |  2 ++
 22 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/TopMessage.vue b/src/components/TopMessage.vue
index 9975101e..f73ad85c 100644
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,16 +1,9 @@
 <template>
   <div
-    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+    v-if="message"
+    class="-mt-6 bg-rose-100 border border-t-0 border-dashed border-rose-600 text-rose-900 text-sm text-center font-semibold rounded-b-md px-3 py-2 mb-3"
   >
-    <span class="align-center text-red-500 mr-2">{{ message }}</span>
-    <span class="ml-2">
-      <router-link
-        :to="{ name: 'help' }"
-        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
-      >
-        Help
-      </router-link>
-    </span>
+    {{ message }}
   </div>
 </template>
 
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index ed8da3d3..557a7244 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -8,6 +8,8 @@
     role="main"
     aria-label="Account Profile"
   >
+    <TopMessage />
+
     <!-- Main View Heading -->
     <div class="flex gap-4 items-center mb-8">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index 837513cf..2b415569 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -1,6 +1,8 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/ContactEditView.vue b/src/views/ContactEditView.vue
index f521beb8..51687b5b 100644
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -1,5 +1,7 @@
 <template>
   <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index e0f4fea2..e31cb708 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Main View Heading -->
     <div class="flex gap-4 items-center mb-4">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index 038fc4ba..56dccdc9 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 1f305f5a..b9104102 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Main View Heading -->
     <div class="flex gap-4 items-center mb-4">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index fff889ae..fe1e9ab1 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -1,6 +1,8 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <div class="mb-8">
       <!-- Sub View Heading -->
       <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 73e3ac87..fa2b384c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -13,6 +13,8 @@ Raymer * @version 1.0.0 */
     class="p-6 pb-24 max-w-3xl mx-auto"
     :data-active-did="activeDid"
   >
+    <TopMessage />
+
     <!-- Main View Heading -->
     <div class="flex gap-4 items-center mb-4">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
diff --git a/src/views/InviteOneView.vue b/src/views/InviteOneView.vue
index 7b0bcbe4..5fdd9921 100644
--- a/src/views/InviteOneView.vue
+++ b/src/views/InviteOneView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/LogView.vue b/src/views/LogView.vue
index 297fd473..c619541a 100644
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -4,6 +4,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>
diff --git a/src/views/OfferDetailsView.vue b/src/views/OfferDetailsView.vue
index b40330fc..97d022f4 100644
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/OnboardMeetingListView.vue b/src/views/OnboardMeetingListView.vue
index 76be91c9..452b64a9 100644
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/OnboardMeetingMembersView.vue b/src/views/OnboardMeetingMembersView.vue
index 51a238de..9b3c83ce 100644
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index 19973c64..45b2d580 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index a34835b2..f9d37793 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <div class="mb-4">
       <!-- Sub View Heading -->
       <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 0def80d7..99db1e9e 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -2,6 +2,8 @@
   <QuickNav selected="Projects" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Main View Heading -->
     <div class="flex gap-4 items-center mb-4">
       <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
diff --git a/src/views/QuickActionBvcBeginView.vue b/src/views/QuickActionBvcBeginView.vue
index 0f6399db..a2ebd8d3 100644
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/src/views/QuickActionBvcBeginView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/QuickActionBvcEndView.vue b/src/views/QuickActionBvcEndView.vue
index e42536b7..62011483 100644
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/QuickActionBvcView.vue b/src/views/QuickActionBvcView.vue
index 9a21cd2d..b185f32a 100644
--- a/src/views/QuickActionBvcView.vue
+++ b/src/views/QuickActionBvcView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index 622d346b..e303d036 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index 103f0f26..5b7abdf8 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -3,6 +3,8 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <TopMessage />
+
     <!-- Sub View Heading -->
     <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
       <h1 class="grow text-xl text-center font-semibold leading-tight">

From b1026a9854e56b869ee6702bf21e1bb588c959fe Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 7 Oct 2025 16:38:35 +0800
Subject: [PATCH 5/5] Linting

---
 src/views/ProjectViewView.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 6c1ba647..4103f508 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -39,19 +39,19 @@
           <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
         </button>
         <button
-            :title="
-              isStarred
-                ? 'Remove from starred projects'
-                : 'Add to starred projects'
-            "
-            @click="toggleStar()"
-          >
-            <font-awesome
-              :icon="isStarred ? 'star' : ['far', 'star']"
-              :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
-              class="text-sm ml-2"
-            />
-          </button>
+          :title="
+            isStarred
+              ? 'Remove from starred projects'
+              : 'Add to starred projects'
+          "
+          @click="toggleStar()"
+        >
+          <font-awesome
+            :icon="isStarred ? 'star' : ['far', 'star']"
+            :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
+            class="text-sm ml-2"
+          />
+        </button>
       </h2>
     </div>