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] 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 -->