WIP: QuickNav notification badges

- Cleanup of unused mockups - Minor tweaks
WIP: sticky tabs
2025-09-26 21:48:53 +08:00 · 2025-09-25 21:54:13 +08:00 · 2025-09-24 21:19:22 +08:00 · 2025-09-22 22:25:38 +08:00 · 2025-09-19 23:41:03 +08:00 · 2025-09-19 16:38:15 +08:00
84 changed files with 1129 additions and 2678 deletions
--- a/.cursor/rules/development/development_guide.mdc
+++ b/.cursor/rules/development/development_guide.mdc
@@ -4,6 +4,7 @@ alwaysApply: false
 ---
 ✅ use system date command to timestamp all interactions with accurate date and
  time
+✅ python script files must always have a blank line at their end
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings
 ✅ do not use npm run dev let me handle running and supplying feedback
@@ -21,10 +22,12 @@ alwaysApply: false

 - [ ] **Timestamp Usage**: Include accurate timestamps in all interactions
 - [ ] **Code Quality**: Use npm run lint-fix to check for warnings
+- [ ] **File Standards**: Ensure Python files have blank line at end
 - [ ] **Whitespace**: Remove trailing whitespace from all lines

 ### After Development

 - [ ] **Linting Check**: Run npm run lint-fix to verify code quality
+- [ ] **File Validation**: Confirm Python files end with blank line
 - [ ] **Whitespace Review**: Verify no trailing whitespace remains
 - [ ] **Documentation**: Update relevant documentation with changes
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    
    <!-- CORS headers removed to allow images from any domain -->
    
@@ -13,4 +13,4 @@
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-</html>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,6 @@
        "@ethersproject/hdnode": "^5.7.0",
        "@ethersproject/wallet": "^5.8.0",
        "@fortawesome/fontawesome-svg-core": "^6.5.1",
-        "@fortawesome/free-regular-svg-icons": "^6.7.2",
        "@fortawesome/free-solid-svg-icons": "^6.5.1",
        "@fortawesome/vue-fontawesome": "^3.0.6",
        "@jlongster/sql.js": "^1.6.7",
@@ -91,7 +90,6 @@
        "vue": "3.5.13",
        "vue-axios": "^3.5.2",
        "vue-facing-decorator": "3.0.4",
-        "vue-markdown-render": "^2.2.1",
        "vue-picture-cropper": "^0.7.0",
        "vue-qrcode-reader": "^5.5.3",
        "vue-router": "^4.5.0",
@@ -108,7 +106,6 @@
        "@types/js-yaml": "^4.0.9",
        "@types/leaflet": "^1.9.8",
        "@types/luxon": "^3.4.2",
-        "@types/markdown-it": "^14.1.2",
        "@types/node": "^20.14.11",
        "@types/node-fetch": "^2.6.12",
        "@types/ramda": "^0.29.11",
@@ -6789,17 +6786,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
-      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.7.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/@fortawesome/free-solid-svg-icons": {
      "version": "6.7.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
@@ -10161,12 +10147,6 @@
        "@types/geojson": "*"
      }
    },
-    "node_modules/@types/linkify-it": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
-      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "dev": true
-    },
    "node_modules/@types/luxon": {
      "version": "3.7.1",
      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
@@ -10174,22 +10154,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/@types/markdown-it": {
-      "version": "14.1.2",
-      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
-      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
-      "dev": true,
-      "dependencies": {
-        "@types/linkify-it": "^5",
-        "@types/mdurl": "^2"
-      }
-    },
-    "node_modules/@types/mdurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
-      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "dev": true
-    },
    "node_modules/@types/minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -32919,61 +32883,6 @@
        "vue": "^3.0.0"
      }
    },
-    "node_modules/vue-markdown-render": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
-      "integrity": "sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==",
-      "dependencies": {
-        "markdown-it": "^13.0.2"
-      },
-      "peerDependencies": {
-        "vue": "^3.3.4"
-      }
-    },
-    "node_modules/vue-markdown-render/node_modules/entities": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/vue-markdown-render/node_modules/linkify-it": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
-      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
-      "dependencies": {
-        "uc.micro": "^1.0.1"
-      }
-    },
-    "node_modules/vue-markdown-render/node_modules/markdown-it": {
-      "version": "13.0.2",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
-      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
-      "dependencies": {
-        "argparse": "^2.0.1",
-        "entities": "~3.0.1",
-        "linkify-it": "^4.0.1",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      },
-      "bin": {
-        "markdown-it": "bin/markdown-it.js"
-      }
-    },
-    "node_modules/vue-markdown-render/node_modules/mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
-    },
-    "node_modules/vue-markdown-render/node_modules/uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-    },
    "node_modules/vue-picture-cropper": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/vue-picture-cropper/-/vue-picture-cropper-0.7.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.0-beta",
  "description": "Time Safari Application",
  "author": {
    "name": "Time Safari Team"
@@ -106,7 +106,7 @@
    "guard": "bash ./scripts/build-arch-guard.sh",
    "guard:test": "bash ./scripts/build-arch-guard.sh --staged",
    "guard:setup": "npm run prepare && echo '✅ Build Architecture Guard is now active!'",
-    "clean:android": "./scripts/uninstall-android.sh",
+    "clean:android": "./scripts/clean-android.sh",
    "clean:ios": "rm -rf ios/App/build ios/App/Pods ios/App/output ios/App/App/public ios/DerivedData ios/capacitor-cordova-ios-plugins ios/App/App/capacitor.config.json ios/App/App/config.xml || true",
    "clean:electron": "./scripts/build-electron.sh --clean",
    "clean:all": "npm run clean:ios && npm run clean:android && npm run clean:electron",
@@ -136,6 +136,7 @@
    "*.{js,ts,vue,css,json,yml,yaml}": "eslint --fix || true",
    "*.{md,markdown,mdc}": "markdownlint-cli2 --fix"
  },
+
  "dependencies": {
    "@capacitor-community/electron": "^5.0.1",
    "@capacitor-community/sqlite": "6.0.2",
@@ -156,7 +157,6 @@
    "@ethersproject/hdnode": "^5.7.0",
    "@ethersproject/wallet": "^5.8.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/vue-fontawesome": "^3.0.6",
    "@jlongster/sql.js": "^1.6.7",
@@ -220,7 +220,6 @@
    "vue": "3.5.13",
    "vue-axios": "^3.5.2",
    "vue-facing-decorator": "3.0.4",
-    "vue-markdown-render": "^2.2.1",
    "vue-picture-cropper": "^0.7.0",
    "vue-qrcode-reader": "^5.5.3",
    "vue-router": "^4.5.0",
@@ -237,7 +236,6 @@
    "@types/js-yaml": "^4.0.9",
    "@types/leaflet": "^1.9.8",
    "@types/luxon": "^3.4.2",
-    "@types/markdown-it": "^14.1.2",
    "@types/node": "^20.14.11",
    "@types/node-fetch": "^2.6.12",
    "@types/ramda": "^0.29.11",
--- a/scripts/build-android.sh
+++ b/scripts/build-android.sh
@@ -22,7 +22,6 @@
 #   --sync                  Sync Capacitor only
 #   --assets                Generate assets only
 #   --deploy                Deploy APK to connected device
-#   --uninstall             Uninstall app from connected device
 #   -h, --help             Show this help message
 #   -v, --verbose          Enable verbose logging
 #
@@ -197,7 +196,6 @@ SYNC_ONLY=false
 ASSETS_ONLY=false
 DEPLOY_APP=false
 AUTO_RUN=false
-UNINSTALL=false
 CUSTOM_API_IP=""

 # Function to parse Android-specific arguments
@@ -248,9 +246,6 @@ parse_android_args() {
            --auto-run)
                AUTO_RUN=true
                ;;
-            --uninstall)
-                UNINSTALL=true
-                ;;
            --api-ip)
                if [ $((i + 1)) -lt ${#args[@]} ]; then
                    CUSTOM_API_IP="${args[$((i + 1))]}"
@@ -296,7 +291,6 @@ print_android_usage() {
    echo "  --assets                Generate assets only"
    echo "  --deploy                Deploy APK to connected device"
    echo "  --auto-run              Auto-run app after build"
-    echo "  --uninstall             Uninstall app from connected device"
    echo "  --api-ip <ip>          Custom IP address for claim API (defaults to 10.0.2.2)"
    echo ""
    echo "Common Options:"
@@ -311,7 +305,6 @@ print_android_usage() {
    echo "  $0 --clean             # Clean only"
    echo "  $0 --sync              # Sync only"
    echo "  $0 --deploy            # Build and deploy to device"
-    echo "  $0 --uninstall         # Uninstall app from device"
    echo "  $0 --dev                    # Dev build with default 10.0.2.2"
    echo "  $0 --dev --api-ip 192.168.1.100  # Dev build with custom API IP"
    echo ""
@@ -358,18 +351,8 @@ fi
 # Setup application directories
 setup_app_directories

-# Load environment-specific .env file if it exists
-env_file=".env.$BUILD_MODE"
-if [ -f "$env_file" ]; then
-    load_env_file "$env_file"
-else
-    log_debug "No $env_file file found, using default environment"
-fi
-
-# Load .env file if it exists (fallback)
-if [ -f ".env" ]; then
-    load_env_file ".env"
-fi
+# Load environment from .env file if it exists
+load_env_file ".env"

 # Handle clean-only mode
 if [ "$CLEAN_ONLY" = true ]; then
@@ -424,13 +407,8 @@ safe_execute "Validating asset configuration" "npm run assets:validate" || {
    log_info "If you encounter build failures, please run 'npm install' first to ensure all dependencies are available."
 }

-# Step 2: Uninstall Android app
-if [ "$UNINSTALL" = true ]; then
-    log_info "Uninstall: uninstalling app from device"
-    safe_execute "Uninstalling Android app" "./scripts/uninstall-android.sh" || exit 1
-    log_success "Uninstall completed successfully!"
-    exit 0
-fi
+# Step 2: Clean Android app
+safe_execute "Cleaning Android app" "npm run clean:android" || exit 1

 # Step 3: Clean dist directory
 log_info "Cleaning dist directory..."
--- a/scripts/build-electron.sh
+++ b/scripts/build-electron.sh
@@ -341,19 +341,7 @@ main_electron_build() {
    # Setup environment
    setup_build_env "electron" "$BUILD_MODE"
    setup_app_directories
-    
-    # Load environment-specific .env file if it exists
-    env_file=".env.$BUILD_MODE"
-    if [ -f "$env_file" ]; then
-        load_env_file "$env_file"
-    else
-        log_debug "No $env_file file found, using default environment"
-    fi
-    
-    # Load .env file if it exists (fallback)
-    if [ -f ".env" ]; then
-        load_env_file ".env"
-    fi
+    load_env_file ".env"
    
    # Step 1: Clean Electron build artifacts
    clean_electron_artifacts
--- a/scripts/build-ios.sh
+++ b/scripts/build-ios.sh
@@ -324,18 +324,8 @@ fi
 # Setup application directories
 setup_app_directories

-# Load environment-specific .env file if it exists
-env_file=".env.$BUILD_MODE"
-if [ -f "$env_file" ]; then
-    load_env_file "$env_file"
-else
-    log_debug "No $env_file file found, using default environment"
-fi
-
-# Load .env file if it exists (fallback)
-if [ -f ".env" ]; then
-    load_env_file ".env"
-fi
+# Load environment from .env file if it exists
+load_env_file ".env"

 # Validate iOS environment
 validate_ios_environment
--- a/scripts/uninstall-android.sh
+++ b/scripts/uninstall-android.sh
@@ -1,8 +1,8 @@
 #!/bin/bash
-# uninstall-android.sh
+# clean-android.sh
 # Author: Matthew Raymer
 # Date: 2025-08-19
-# Description: Uninstall Android app with timeout protection to prevent hanging
+# Description: Clean Android app with timeout protection to prevent hanging
 # This script safely uninstalls the TimeSafari app from connected Android devices
 # with a 30-second timeout to prevent indefinite hanging.

--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -7,24 +7,6 @@
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
-    
-    /* Fix iOS viewport height changes when keyboard appears/disappears */
-    html, body {
-        height: 100%;
-        height: 100vh;
-        height: 100dvh; /* Dynamic viewport height for better mobile support */
-        overflow: hidden; /* Disable all scrolling on html and body */
-        position: fixed; /* Force fixed positioning to prevent viewport changes */
-        width: 100%;
-        top: 0;
-        left: 0;
-    }
-    
-    #app {
-        height: 100vh;
-        height: 100dvh;
-        overflow-y: auto;
-    }
 }

@layer components {
@@ -40,24 +22,4 @@
 	.dialog {
 		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
-
-	/* Markdown content styling to restore list elements */
-	.markdown-content ul {
-		@apply list-disc list-inside ml-4;
-	}
-
-	.markdown-content ol {
-		@apply list-decimal list-inside ml-4;
-	}
-
-	.markdown-content li {
-		@apply mb-1;
-	}
-
-	.markdown-content ul ul,
-	.markdown-content ol ol,
-	.markdown-content ul ol,
-	.markdown-content ol ul {
-		@apply ml-4 mt-1;
-	}
 }
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -78,15 +78,9 @@
      </div>

      <!-- Description -->
-      <p class="font-medium overflow-hidden">
-        <a
-          class="block cursor-pointer overflow-hidden text-ellipsis"
-          @click="emitLoadClaim(record.jwtId)"
-        >
-          <vue-markdown
-            :source="truncatedDescription"
-            class="markdown-content"
-          />
+      <p class="font-medium">
+        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+          {{ description }}
        </a>
      </p>

@@ -264,13 +258,11 @@ import {
  NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
 import { TIMEOUTS } from "@/utils/notify";
-import VueMarkdown from "vue-markdown-render";

@Component({
  components: {
    EntityIcon,
    ProjectIcon,
-    VueMarkdown,
  },
 })
 export default class ActivityListItem extends Vue {
@@ -311,14 +303,6 @@ export default class ActivityListItem extends Vue {
    return `${claim?.description || ""}`;
  }

-  get truncatedDescription(): string {
-    const desc = this.description;
-    if (desc.length <= 300) {
-      return desc;
-    }
-    return desc.substring(0, 300) + "...";
-  }
-
  private displayAmount(code: string, amt: number) {
    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
  }
--- a/src/components/ContactListItem.vue
+++ b/src/components/ContactListItem.vue
@@ -46,7 +46,7 @@

            <span class="text-xs truncate">{{ contact.did }}</span>
          </div>
-          <div class="text-sm truncate">
+          <div class="text-sm">
            {{ contact.notes }}
          </div>
        </div>
--- a/src/components/DataExportSection.vue
+++ b/src/components/DataExportSection.vue
@@ -18,7 +18,7 @@ messages * - Conditional UI based on platform capabilities * * @component *
    >
      <!-- Notification dot - show while the user has not yet backed up their seed phrase -->
      <font-awesome
-        v-if="showRedNotificationDot"
+        v-if="!hasBackedUpSeed"
        icon="circle"
        class="absolute -right-[8px] -top-[8px] text-rose-500 text-[14px] border border-white rounded-full"
      ></font-awesome>
@@ -108,7 +108,7 @@ export default class DataExportSection extends Vue {
   * Flag indicating if the user has backed up their seed phrase
   * Used to control the visibility of the notification dot
   */
-  showRedNotificationDot = false;
+  hasBackedUpSeed = false;

  /**
   * Notification helper for consistent notification patterns
@@ -240,12 +240,11 @@ export default class DataExportSection extends Vue {
  private async loadSeedBackupStatus(): Promise<void> {
    try {
      const settings = await this.$accountSettings();
-      this.showRedNotificationDot =
-        !!settings.isRegistered && !settings.hasBackedUpSeed;
+      this.hasBackedUpSeed = !!settings.hasBackedUpSeed;
    } catch (err: unknown) {
      logger.error("Failed to load seed backup status:", err);
      // Default to false (show notification dot) if we can't load the setting
-      this.showRedNotificationDot = false;
+      this.hasBackedUpSeed = false;
    }
  }
 }
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -293,7 +293,7 @@ const inputImageFileNameRef = ref<Blob>();
 export default class ImageMethodDialog extends Vue {
  $notify!: NotifyFunction;
  $router!: Router;
-  notify!: ReturnType<typeof createNotifyHelpers>;
+  notify = createNotifyHelpers(this.$notify);

  /** Active DID for user authentication */
  activeDid = "";
@@ -498,9 +498,6 @@ export default class ImageMethodDialog extends Vue {
   * @throws {Error} When settings retrieval fails
   */
  async mounted() {
-    // Initialize notification helpers
-    this.notify = createNotifyHelpers(this.$notify);
-
    try {
      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -14,11 +14,20 @@
          'text-slate-500': selected !== 'Home',
        }"
      >
-        <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
+        <router-link
+          :to="{ name: 'home' }"
+          class="relative block text-center py-2 px-1"
+        >
          <div class="flex flex-col items-center">
            <font-awesome icon="house-chimney" class="fa-fw" />
            <span class="text-xs mt-1">feed</span>
          </div>
+
+          <!-- Notification dot - show while the user has unread notifications -->
+          <font-awesome
+            icon="circle"
+            class="absolute left-1/2 top-1 translate-x-2 text-rose-500 text-[10px] border border-white rounded-full"
+          ></font-awesome>
        </router-link>
      </li>
      <!-- Search -->
@@ -89,7 +98,7 @@
      >
        <router-link
          :to="{ name: 'account' }"
-          class="block text-center py-2 px-1"
+          class="relative block text-center py-2 px-1"
        >
          <div class="flex flex-col items-center">
            <font-awesome icon="circle-user" class="fa-fw" />
@@ -102,6 +111,12 @@
            -->
            <span class="text-xs mt-1">profile</span>
          </div>
+
+          <!-- Notification dot - show while the user has not yet backed up their seed phrase -->
+          <font-awesome
+            icon="circle"
+            class="absolute left-1/2 top-1 translate-x-2 text-rose-500 text-[10px] border border-white rounded-full"
+          ></font-awesome>
        </router-link>
      </li>
    </ul>
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,9 +1,16 @@
 <template>
  <div
-    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"
+    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
  >
-    {{ message }}
+    <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>
  </div>
 </template>

@@ -20,8 +27,8 @@ import { logger } from "../utils/logger";
 })
 export default class TopMessage extends Vue {
  // Enhanced PlatformServiceMixin v4.0 provides:
-  // - Cached database operations: this.$contacts(), this.$accountSettings()
-  // - Settings shortcuts: this.$saveSettings()
+  // - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
+  // - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
  // - Cache management: this.$refreshSettings(), this.$clearAllCaches()
  // - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()
  // - All methods use smart caching with TTL for massive performance gains
--- a/src/components/UsageLimitsSection.vue
+++ b/src/components/UsageLimitsSection.vue
@@ -8,7 +8,7 @@
    <!-- show spinner if loading limits -->
    <div
      v-if="loadingLimits"
-      class="text-slate-500 text-center italic mb-4"
+      class="text-center"
      role="status"
      aria-live="polite"
    >
@@ -19,10 +19,7 @@
        aria-hidden="true"
      ></font-awesome>
    </div>
-    <div
-      v-if="limitsMessage"
-      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
-    >
+    <div class="mb-4 text-center">
      {{ limitsMessage }}
    </div>
    <div v-if="endorserLimits">
--- a/src/constants/accountView.ts
+++ b/src/constants/accountView.ts
@@ -86,7 +86,7 @@ export const ACCOUNT_VIEW_CONSTANTS = {
    CANNOT_UPLOAD_IMAGES: "You cannot upload images.",
    BAD_SERVER_RESPONSE: "Bad server response.",
    ERROR_RETRIEVING_LIMITS:
-      "No limits were found, so no actions are allowed. You need to get registered.",
+      "No limits were found, so no actions are allowed. You will need to get registered.",
  },

  // Project assignment errors
--- a/src/db-sql/migration.ts
+++ b/src/db-sql/migration.ts
@@ -68,21 +68,13 @@ const MIG_004_SQL = `
  WHERE id = 1 
  AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
  
-  -- Copy important settings that were set in the MASTER_SETTINGS_KEY to the main identity.
-  -- (We're not doing them all because some were already identity-specific and others aren't as critical.)
-  UPDATE settings
-  SET lastViewedClaimId = (SELECT lastViewedClaimId FROM settings WHERE id = 1),
-      profileImageUrl = (SELECT profileImageUrl FROM settings WHERE id = 1),
-      showShortcutBvc = (SELECT showShortcutBvc FROM settings WHERE id = 1),
-      warnIfProdServer = (SELECT warnIfProdServer FROM settings WHERE id = 1),
-      warnIfTestServer = (SELECT warnIfTestServer FROM settings WHERE id = 1)
-  WHERE id = 2;
-
  -- CLEANUP: Remove orphaned settings records and clear legacy activeDid values
-  -- which usually simply deletes the MASTER_SETTINGS_KEY record.
  -- This completes the migration from settings-based to table-based active identity
-  DELETE FROM settings WHERE accountDid IS NULL;
-  UPDATE settings SET activeDid = NULL;
+  -- Use guarded operations to prevent accidental data loss
+  DELETE FROM settings WHERE accountDid IS NULL AND id != 1;
+  UPDATE settings SET activeDid = NULL WHERE id = 1 AND EXISTS (
+    SELECT 1 FROM active_identity WHERE id = 1 AND activeDid IS NOT NULL
+  );
 `;

 // Each migration can include multiple SQL statements (with semicolons)
@@ -192,13 +184,6 @@ const MIGRATIONS = [
    name: "004_active_identity_management",
    sql: MIG_004_SQL,
  },
-  {
-    name: "005_add_starredPlanHandleIds_to_settings",
-    sql: `
-      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
-      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
-    `,
-  },
 ];

 /**
--- a/src/db/databaseUtil.ts
+++ b/src/db/databaseUtil.ts
@@ -9,6 +9,34 @@ import { logger } from "@/utils/logger";
 import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 import { QueryExecResult } from "@/interfaces/database";

+export async function updateDefaultSettings(
+  settingsChanges: Settings,
+): Promise<boolean> {
+  delete settingsChanges.accountDid; // just in case
+  // ensure there is no "id" that would override the key
+  delete settingsChanges.id;
+  try {
+    const platformService = PlatformServiceFactory.getInstance();
+    const { sql, params } = generateUpdateStatement(
+      settingsChanges,
+      "settings",
+      "id = ?",
+      [MASTER_SETTINGS_KEY],
+    );
+    const result = await platformService.dbExec(sql, params);
+    return result.changes === 1;
+  } catch (error) {
+    logger.error("Error updating default settings:", error);
+    if (error instanceof Error) {
+      throw error; // Re-throw if it's already an Error with a message
+    } else {
+      throw new Error(
+        `Failed to update settings. We recommend you try again or restart the app.`,
+      );
+    }
+  }
+}
+
 export async function insertDidSpecificSettings(
  did: string,
  settings: Partial<Settings> = {},
@@ -63,7 +91,6 @@ export async function updateDidSpecificSettings(
    ? mapColumnsToValues(postUpdateResult.columns, postUpdateResult.values)[0]
    : null;

-  // Note that we want to eliminate this check (and fix the above if it doesn't work).
  // Check if any of the target fields were actually changed
  let actuallyUpdated = false;
  if (currentRecord && updatedRecord) {
@@ -130,11 +157,10 @@ export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
      result.columns,
      result.values,
    )[0] as Settings;
-    settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-    settings.starredPlanHandleIds = parseJsonField(
-      settings.starredPlanHandleIds,
-      [],
-    );
+    if (settings.searchBoxes) {
+      // @ts-expect-error - the searchBoxes field is a string in the DB
+      settings.searchBoxes = JSON.parse(settings.searchBoxes);
+    }
    return settings;
  }
 }
@@ -200,11 +226,10 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
        );
      }

-      settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      settings.starredPlanHandleIds = parseJsonField(
-        settings.starredPlanHandleIds,
-        [],
-      );
+      // Handle searchBoxes parsing
+      if (settings.searchBoxes) {
+        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+      }

      return settings;
    } catch (error) {
--- a/src/db/tables/settings.ts
+++ b/src/db/tables/settings.ts
@@ -43,7 +43,6 @@ export type Settings = {

  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
-  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred plan changes that they've acknowledged seeing

  // The claim list has a most recent one used in notifications that's separate from the last viewed
  lastNotifiedClaimId?: string;
@@ -68,18 +67,15 @@ export type Settings = {
  showContactGivesInline?: boolean; // Display contact inline or not
  showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
  showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
-
-  starredPlanHandleIds?: string[]; // Array of starred plan handle IDs
  vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
  warnIfProdServer?: boolean; // Warn if using a production server
  warnIfTestServer?: boolean; // Warn if using a testing server
  webPushServer?: string; // Web Push server URL
 };

-// type of settings where the values are JSON strings instead of objects
+// type of settings where the searchBoxes are JSON strings instead of objects
 export type SettingsWithJsonStrings = Settings & {
  searchBoxes: string;
-  starredPlanHandleIds: string;
 };

 export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
@@ -96,11 +92,6 @@ export const SettingsSchema = {
 /**
 * Constants.
 */
-
-/**
- * This is deprecated.
- * It only remains for those with a PWA who have not migrated, but we'll soon remove it.
- */
 export const MASTER_SETTINGS_KEY = "1";

 export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -72,15 +72,11 @@ export interface PlanActionClaim extends ClaimObject {
  name: string;
  agent?: { identifier: string };
  description?: string;
-  endTime?: string;
  identifier?: string;
-  image?: string;
  lastClaimId?: string;
  location?: {
    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
  };
-  startTime?: string;
-  url?: string;
 }

 // AKA Registration & RegisterAction
--- a/src/interfaces/records.ts
+++ b/src/interfaces/records.ts
@@ -1,5 +1,4 @@
-import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
-import { GenericCredWrapper } from "./common";
+import { GiveActionClaim, OfferClaim } from "./claims";

 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
@@ -62,11 +61,6 @@ export interface PlanSummaryRecord {
  jwtId?: string;
 }

-export interface PlanSummaryAndPreviousClaim {
-  plan: PlanSummaryRecord;
-  wrappedClaimBefore: GenericCredWrapper<PlanActionClaim>;
-}
-
 /**
 * Represents data about a project
 *
@@ -93,10 +87,7 @@ export interface PlanData {
  name: string;
  /**
   * The identifier of the project record -- different from jwtId
-   *
-   * This has been used to iterate through plan records, because jwtId ordering doesn't match
-   * chronological create ordering, though it does match most recent edit order (in reverse order).
-   * (It may be worthwhile to order by jwtId instead. It is an indexed field.)
+   * (Maybe we should use the jwtId to iterate through the records instead.)
   **/
  rowId?: string;
 }
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -56,12 +56,7 @@ import {
  KeyMetaWithPrivate,
  KeyMetaMaybeWithPrivate,
 } from "../interfaces/common";
-import {
-  OfferSummaryRecord,
-  OfferToPlanSummaryRecord,
-  PlanSummaryAndPreviousClaim,
-  PlanSummaryRecord,
-} from "../interfaces/records";
+import { PlanSummaryRecord } from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -367,22 +362,6 @@ export function didInfo(
  return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }

-/**
- * In some contexts (eg. agent), a blank really is nobody.
- */
-export function didInfoOrNobody(
-  did: string | undefined,
-  activeDid: string | undefined,
-  allMyDids: string[],
-  contacts: Contact[],
-): string {
-  if (did == null) {
-    return "Nobody";
-  } else {
-    return didInfo(did, activeDid, allMyDids, contacts);
-  }
-}
-
 /**
 * return text description without any references to "you" as user
 */
@@ -751,7 +730,7 @@ export async function getNewOffersToUser(
  activeDid: string,
  afterOfferJwtId?: string,
  beforeOfferJwtId?: string,
-): Promise<{ data: Array<OfferSummaryRecord>; hitLimit: boolean }> {
+) {
  let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
  if (afterOfferJwtId) {
    url += "&afterId=" + afterOfferJwtId;
@@ -773,7 +752,7 @@ export async function getNewOffersToUserProjects(
  activeDid: string,
  afterOfferJwtId?: string,
  beforeOfferJwtId?: string,
-): Promise<{ data: Array<OfferToPlanSummaryRecord>; hitLimit: boolean }> {
+) {
  let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
  if (afterOfferJwtId) {
    url += "?afterId=" + afterOfferJwtId;
@@ -787,46 +766,6 @@ export async function getNewOffersToUserProjects(
  return response.data;
 }

-/**
- * Get starred projects that have been updated since the last check
- *
- * @param axios - axios instance
- * @param apiServer - endorser API server URL
- * @param activeDid - user's DID for authentication
- * @param starredPlanHandleIds - array of starred project handle IDs
- * @param afterId - JWT ID to check for changes after (from lastAckedStarredPlanChangesJwtId)
- * @returns { data: Array<PlanSummaryAndPreviousClaim>, hitLimit: boolean }
- */
-export async function getStarredProjectsWithChanges(
-  axios: Axios,
-  apiServer: string,
-  activeDid: string,
-  starredPlanHandleIds: string[],
-  afterId?: string,
-): Promise<{ data: Array<PlanSummaryAndPreviousClaim>; hitLimit: boolean }> {
-  if (!starredPlanHandleIds || starredPlanHandleIds.length === 0) {
-    return { data: [], hitLimit: false };
-  }
-
-  if (!afterId) {
-    // This doesn't make sense: there should always be some previous one they've seen.
-    // We'll just return blank.
-    return { data: [], hitLimit: false };
-  }
-
-  // Use POST method for larger lists of project IDs
-  const url = `${apiServer}/api/v2/report/plansLastUpdatedBetween`;
-  const headers = await getHeaders(activeDid);
-
-  const requestBody = {
-    planIds: starredPlanHandleIds,
-    afterId: afterId,
-  };
-
-  const response = await axios.post(url, requestBody, { headers });
-  return response.data;
-}
-
 /**
 * Construct GiveAction VC for submission to server
 *
@@ -1758,19 +1697,49 @@ export async function fetchEndorserRateLimits(
    timestamp: new Date().toISOString(),
  });

-  // not wrapped in a 'try' because the error returned is self-explanatory
-  const response = await axios.get(url, { headers } as AxiosRequestConfig);
+  try {
+    const response = await axios.get(url, { headers } as AxiosRequestConfig);

-  // Log successful registration check
-  logger.debug("[User Registration] User registration check successful:", {
-    did: issuerDid,
-    server: apiServer,
-    status: response.status,
-    isRegistered: true,
-    timestamp: new Date().toISOString(),
-  });
+    // Log successful registration check
+    logger.debug("[User Registration] User registration check successful:", {
+      did: issuerDid,
+      server: apiServer,
+      status: response.status,
+      isRegistered: true,
+      timestamp: new Date().toISOString(),
+    });

-  return response;
+    return response;
+  } catch (error) {
+    // Enhanced error logging with user registration context
+    const axiosError = error as {
+      response?: {
+        data?: { error?: { code?: string; message?: string } };
+        status?: number;
+      };
+    };
+    const errorCode = axiosError.response?.data?.error?.code;
+    const errorMessage = axiosError.response?.data?.error?.message;
+    const httpStatus = axiosError.response?.status;
+
+    logger.warn("[User Registration] User not registered on server:", {
+      did: issuerDid,
+      server: apiServer,
+      errorCode: errorCode,
+      errorMessage: errorMessage,
+      httpStatus: httpStatus,
+      needsRegistration: true,
+      timestamp: new Date().toISOString(),
+    });
+
+    // Log the original error for debugging
+    logger.error(
+      `[fetchEndorserRateLimits] Error for DID ${issuerDid}:`,
+      errorStringForLog(error),
+    );
+
+    throw error;
+  }
 }

 /**
@@ -1819,17 +1788,14 @@ export async function fetchImageRateLimits(
      };
    };

-    logger.warn(
-      "[Image Server] Image rate limits check failed, which is expected for users not registered on test server (eg. when only registered on local server).",
-      {
-        did: issuerDid,
-        server: server,
-        errorCode: axiosError.response?.data?.error?.code,
-        errorMessage: axiosError.response?.data?.error?.message,
-        httpStatus: axiosError.response?.status,
-        timestamp: new Date().toISOString(),
-      },
-    );
+    logger.error("[Image Server] Image rate limits check failed:", {
+      did: issuerDid,
+      server: server,
+      errorCode: axiosError.response?.data?.error?.code,
+      errorMessage: axiosError.response?.data?.error?.message,
+      httpStatus: axiosError.response?.status,
+      timestamp: new Date().toISOString(),
+    });
    return null;
  }
 }
--- a/src/libs/fontawesome.ts
+++ b/src/libs/fontawesome.ts
@@ -80,13 +80,13 @@ import {
  faQuestion,
  faRightFromBracket,
  faRotate,
+  faScroll,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
-  faStar,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
@@ -95,9 +95,6 @@ import {
  faXmark,
 } from "@fortawesome/free-solid-svg-icons";

-// these are referenced differently, eg. ":icon='['far', 'star']'" as in ProjectViewView.vue
-import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
-
 // Initialize Font Awesome library with all required icons
 library.add(
  faArrowDown,
@@ -172,16 +169,15 @@ library.add(
  faPlus,
  faQrcode,
  faQuestion,
-  faRightFromBracket,
  faRotate,
+  faScroll,
+  faRightFromBracket,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
-  faStar,
-  faStarRegular,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -285,16 +285,6 @@ const routes: Array<RouteRecordRaw> = [
    name: "user-profile",
    component: () => import("../views/UserProfileView.vue"),
  },
-  // Catch-all route for 404 errors - must be last
-  {
-    path: "/:pathMatch(.*)*",
-    name: "not-found",
-    component: () => import("../views/NotFoundView.vue"),
-    meta: {
-      title: "Page Not Found",
-      requiresAuth: false,
-    },
-  },
 ];

 const isElectron = window.location.protocol === "file:";
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -19,6 +19,7 @@ import { logger, safeStringify } from "../utils/logger";
 * @remarks
 * Special handling includes:
 * - Enhanced logging for Capacitor platform
+ * - Rate limit detection and handling
 * - Detailed error information logging including:
 *   - Error message
 *   - HTTP status
@@ -49,5 +50,11 @@ export const handleApiError = (error: AxiosError, endpoint: string) => {
    });
  }

+  // Specific handling for rate limits
+  if (error.response?.status === 400) {
+    logger.warn(`[Rate Limit] ${endpoint}`);
+    return null;
+  }
+
  throw error;
 };
--- a/src/services/migrationService.ts
+++ b/src/services/migrationService.ts
@@ -799,7 +799,7 @@ export async function runMigrations<T>(
    }

    // Only show completion message in development
-    logger.log(
+    logger.debug(
      `🎉 [Migration] Migration process complete! Summary: ${appliedCount} applied, ${skippedCount} skipped`,
    );
  } catch (error) {
--- a/src/test/PlatformServiceMixinTest.vue
+++ b/src/test/PlatformServiceMixinTest.vue
@@ -85,6 +85,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";

@Component({
  mixins: [PlatformServiceMixin],
@@ -196,10 +197,10 @@ This tests the helper method only - no database interaction`;
      const success = await this.$saveSettings(testSettings);

      if (success) {
-        // Now query the raw database to see how it's actually stored.
-        // Note that new users probably have settings with ID of 1 but old migrated users might skip to 2.
+        // Now query the raw database to see how it's actually stored
        const rawResult = await this.$dbQuery(
-          "SELECT searchBoxes FROM settings limit 1",
+          "SELECT searchBoxes FROM settings WHERE id = ?",
+          [MASTER_SETTINGS_KEY],
        );

        if (rawResult?.values?.length) {
--- a/src/utils/PlatformServiceMixin.ts
+++ b/src/utils/PlatformServiceMixin.ts
@@ -301,11 +301,7 @@ export const PlatformServiceMixin = {
          }

          // Convert SQLite JSON strings to objects/arrays
-          if (
-            column === "contactMethods" ||
-            column === "searchBoxes" ||
-            column === "starredPlanHandleIds"
-          ) {
+          if (column === "contactMethods" || column === "searchBoxes") {
            value = this._parseJsonField(value, []);
          }

@@ -353,14 +349,6 @@ export const PlatformServiceMixin = {
          ? JSON.stringify(settings.searchBoxes)
          : String(settings.searchBoxes);
      }
-      if (settings.starredPlanHandleIds !== undefined) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (converted as any).starredPlanHandleIds = Array.isArray(
-          settings.starredPlanHandleIds,
-        )
-          ? JSON.stringify(settings.starredPlanHandleIds)
-          : String(settings.starredPlanHandleIds);
-      }

      return converted;
    },
@@ -526,7 +514,7 @@ export const PlatformServiceMixin = {
     * Utility method for retrieving master settings
     * Common pattern used across many components
     */
-    async _getMasterSettings(
+    async $getMasterSettings(
      fallback: Settings | null = null,
    ): Promise<Settings | null> {
      try {
@@ -563,12 +551,6 @@ export const PlatformServiceMixin = {
        if (settings.searchBoxes) {
          settings.searchBoxes = this._parseJsonField(settings.searchBoxes, []);
        }
-        if (settings.starredPlanHandleIds) {
-          settings.starredPlanHandleIds = this._parseJsonField(
-            settings.starredPlanHandleIds,
-            [],
-          );
-        }

        return settings;
      } catch (error) {
@@ -589,7 +571,7 @@ export const PlatformServiceMixin = {
    ): Promise<Settings> {
      try {
        // Get default settings
-        const defaultSettings = await this._getMasterSettings(defaultFallback);
+        const defaultSettings = await this.$getMasterSettings(defaultFallback);

        // If no account DID, return defaults
        if (!accountDid) {
@@ -635,12 +617,6 @@ export const PlatformServiceMixin = {
            [],
          );
        }
-        if (mergedSettings.starredPlanHandleIds) {
-          mergedSettings.starredPlanHandleIds = this._parseJsonField(
-            mergedSettings.starredPlanHandleIds,
-            [],
-          );
-        }

        return mergedSettings;
      } catch (error) {
@@ -994,7 +970,7 @@ export const PlatformServiceMixin = {
     * @returns Fresh settings object from database
     */
    async $settings(defaults: Settings = {}): Promise<Settings> {
-      const settings = await this._getMasterSettings(defaults);
+      const settings = await this.$getMasterSettings(defaults);

      if (!settings) {
        return defaults;
@@ -1027,7 +1003,7 @@ export const PlatformServiceMixin = {
    ): Promise<Settings> {
      try {
        // Get default settings first
-        const defaultSettings = await this._getMasterSettings(defaults);
+        const defaultSettings = await this.$getMasterSettings(defaults);

        if (!defaultSettings) {
          return defaults;
@@ -1236,11 +1212,6 @@ export const PlatformServiceMixin = {
     * @param changes Settings changes to save
     * @returns Promise<boolean> Success status
     */
-    /**
-     * Since this is unused, and since it relies on this.activeDid which isn't guaranteed to exist,
-     * let's take this out for the sake of safety.
-     * Totally remove after start of 2026 (since it would be obvious by then that it's not used).
-     *
    async $saveMySettings(changes: Partial<Settings>): Promise<boolean> {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const currentDid = (this as any).activeDid;
@@ -1250,7 +1221,6 @@ export const PlatformServiceMixin = {
      }
      return await this.$saveUserSettings(currentDid, changes);
    },
-    **/

    // =================================================
    // CACHE MANAGEMENT METHODS
@@ -1872,7 +1842,7 @@ export const PlatformServiceMixin = {
    async $debugMergedSettings(did: string): Promise<void> {
      try {
        // Get default settings
-        const defaultSettings = await this._getMasterSettings({});
+        const defaultSettings = await this.$getMasterSettings({});
        logger.debug(
          `[PlatformServiceMixin] Default settings:`,
          defaultSettings,
@@ -1922,6 +1892,7 @@ export interface IPlatformServiceMixin {
    params?: unknown[],
  ): Promise<SqlValue[] | undefined>;
  $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
+  $getMasterSettings(fallback?: Settings | null): Promise<Settings | null>;
  $getMergedSettings(
    defaultKey: string,
    accountDid?: string,
@@ -2046,6 +2017,7 @@ declare module "@vue/runtime-core" {
      params?: unknown[],
    ): Promise<unknown[] | undefined>;
    $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
+    $getMasterSettings(defaults?: Settings | null): Promise<Settings | null>;
    $getMergedSettings(
      key: string,
      did?: string,
@@ -2068,8 +2040,7 @@ declare module "@vue/runtime-core" {
      did: string,
      changes: Partial<Settings>,
    ): Promise<boolean>;
-    // @deprecated; see implementation note above
-    // $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
+    $saveMySettings(changes: Partial<Settings>): Promise<boolean>;

    // Cache management methods
    $refreshSettings(): Promise<Settings>;
--- a/src/utils/logger.ts
+++ b/src/utils/logger.ts
@@ -24,28 +24,10 @@ export function getMemoryLogs(): string[] {
  return [..._memoryLogs];
 }

-/**
- * Stringify an object with proper handling of circular references and functions
- *
- * Don't use for arrays; map with this over the array.
- *
- * @param obj - The object to stringify
- * @returns The stringified object, plus 'message' and 'stack' for Error objects
- */
 export function safeStringify(obj: unknown) {
  const seen = new WeakSet();

-  // since 'message' & 'stack' are not enumerable for errors, let's add those
-  let objToStringify = obj;
-  if (obj instanceof Error) {
-    objToStringify = {
-      ...obj,
-      message: obj.message,
-      stack: obj.stack,
-    };
-  }
-
-  return JSON.stringify(objToStringify, (_key, value) => {
+  return JSON.stringify(obj, (_key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]";
@@ -196,8 +178,7 @@ export const logger = {
    }

    // Database logging
-    const argsString =
-      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
+    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
    logToDatabase(message + argsString, "info");
  },

@@ -208,8 +189,7 @@ export const logger = {
    }

    // Database logging
-    const argsString =
-      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
+    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
    logToDatabase(message + argsString, "info");
  },

@@ -220,8 +200,7 @@ export const logger = {
    }

    // Database logging
-    const argsString =
-      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
+    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
    logToDatabase(message + argsString, "warn");
  },

@@ -232,9 +211,9 @@ export const logger = {
    }

    // Database logging
-    const argsString =
-      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
-    logToDatabase(message + argsString, "error");
+    const messageString = safeStringify(message);
+    const argsString = args.length > 0 ? safeStringify(args) : "";
+    logToDatabase(messageString + argsString, "error");
  },

  // New database-focused methods (self-contained)
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1,5 +1,6 @@
 <template>
  <QuickNav selected="Profile" />
+  <TopMessage />

  <!-- CONTENT -->
  <main
@@ -8,22 +9,10 @@
    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">
-        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"
-      >
-        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </router-link>
-    </div>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Your Identity
+    </h1>

    <!-- ID notice -->
    <div
@@ -161,6 +150,8 @@
    </section>
    <PushNotificationPermission ref="pushNotificationPermission" />

+    <LocationSearchSection :search-box="searchBox" />
+
    <!-- User Profile -->
    <section
      v-if="isRegistered"
@@ -253,8 +244,6 @@
      <div v-else>Saving...</div>
    </section>

-    <LocationSearchSection :search-box="searchBox" />
-
    <UsageLimitsSection
      v-if="activeDid"
      :loading-limits="loadingLimits"
@@ -1075,8 +1064,8 @@ export default class AccountViewView extends Vue {
    this.hideRegisterPromptOnNewContact =
      !!settings.hideRegisterPromptOnNewContact;
    this.isRegistered = !!settings?.isRegistered;
-    this.isSearchAreasSet =
-      !!settings.searchBoxes && settings.searchBoxes.length > 0;
+    this.isSearchAreasSet = !!settings.searchBoxes;
+    this.searchBox = settings.searchBoxes?.[0] || null;
    this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
    this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
    this.notifyingReminder = !!settings.notifyingReminderTime;
@@ -1090,7 +1079,6 @@ export default class AccountViewView extends Vue {
    this.passkeyExpirationMinutes =
      settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
    this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
-    this.searchBox = settings.searchBoxes?.[0] || null;
    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
    this.showShortcutBvc = !!settings.showShortcutBvc;
    this.warnIfProdServer = !!settings.warnIfProdServer;
@@ -1466,6 +1454,7 @@ export default class AccountViewView extends Vue {
        this.imageLimits = imageResp.data;
      } else {
        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
+        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.CANNOT_UPLOAD_IMAGES);
      }

      const endorserResp = await fetchEndorserRateLimits(
@@ -1476,6 +1465,9 @@ export default class AccountViewView extends Vue {

      if (endorserResp.status === 200) {
        this.endorserLimits = endorserResp.data;
+      } else {
+        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
+        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
      }
    } catch (error) {
      this.limitsMessage =
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -1,27 +1,19 @@
 <template>
+  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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">
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -2,27 +2,19 @@
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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 -->
@@ -88,22 +80,16 @@
              </button>
            </div>
          </div>
-          <div class="text-sm overflow-hidden">
-            <div
-              data-testId="description"
-              class="overflow-hidden text-ellipsis"
-            >
+          <div class="text-sm">
+            <div data-testId="description">
              <font-awesome icon="message" class="fa-fw text-slate-400" />
-              <vue-markdown
-                :source="claimDescription"
-                class="markdown-content"
-              />
+              {{ claimDescription }}
            </div>
-            <div class="overflow-hidden text-ellipsis">
+            <div>
              <font-awesome icon="user" class="fa-fw text-slate-400" />
              {{ didInfo(veriClaim.issuer) }}
            </div>
-            <div class="overflow-hidden text-ellipsis">
+            <div>
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              Recorded
              {{ formattedIssueDate }}
@@ -547,10 +533,8 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
-import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
-
 import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -569,7 +553,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";

@Component({
-  components: { GiftedDialog, QuickNav, VueMarkdown },
+  components: { GiftedDialog, QuickNav },
  mixins: [PlatformServiceMixin],
 })
 export default class ClaimView extends Vue {
--- a/src/views/ConfirmContactView.vue
+++ b/src/views/ConfirmContactView.vue
@@ -1,27 +1,18 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
+
        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">
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -1,11 +1,18 @@
 <template>
+  <QuickNav />
+  <TopMessage />
  <!-- 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">
+    <!-- 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>
        <span
          v-if="
            libsUtil.isGiveRecordTheUserCanConfirm(
@@ -18,24 +25,8 @@
        >
          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">
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -2,27 +2,18 @@
  <QuickNav selected="Contacts" />

  <section class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- Header -->
+    <div class="mb-8">
+      <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" />
+      </router-link>
+
+      <h1 class="text-4xl text-center font-light pt-4">
        Transferred with {{ contact?.name }}
      </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>

    <!-- Info Messages -->
@@ -232,7 +223,7 @@ export default class ContactAmountssView extends Vue {
      const contact = await this.$getContact(contactDid);
      this.contact = contact;

-      const settings = await this.$accountSettings();
+      const settings = await this.$getMasterSettings();

      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -1,28 +1,19 @@
 <template>
-  <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
-    <TopMessage />
+  <QuickNav selected="Contacts" />
+  <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">
+  <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>
        {{ 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 -->
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -2,27 +2,17 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        {{ 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 -->
--- a/src/views/ContactImportView.vue
+++ b/src/views/ContactImportView.vue
@@ -1,29 +1,21 @@
 <template>
  <QuickNav selected="Contacts"></QuickNav>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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
+    <!-- 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>
-
-      <!-- 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>

+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Contact Import
+    </h1>
+
    <div v-if="checkingImports" class="text-center">
      <font-awesome icon="spinner" class="animate-spin" />
    </div>
--- a/src/views/ContactQRScanFullView.vue
+++ b/src/views/ContactQRScanFullView.vue
@@ -2,27 +2,26 @@
  <!-- CONTENT -->
  <section id="Content" class="relative w-[100vw] h-[100vh]">
    <div :class="mainContentClasses">
-      <!-- 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">
+      <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>
+
          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
@@ -236,7 +235,7 @@ export default class ContactQRScanFull extends Vue {
   * Computed property for main content container CSS classes
   */
  get mainContentClasses(): string {
-    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";
+    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";
  }

  /**
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -1,27 +1,26 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <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>
+
        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 v-if="!givenName" :class="nameWarningClasses">
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -1,25 +1,14 @@
 <template>
  <QuickNav selected="Contacts" />
+  <TopMessage />

  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <TopMessage />
+    <!-- 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-4">
+    <div class="flex justify-between py-2 mt-8">
      <span />
      <span>
        <a
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -1,31 +1,22 @@
 <template>
  <QuickNav selected="Contacts" />
+  <TopMessage />

  <!-- 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">
+    <!-- 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>
        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 -->
@@ -34,7 +25,7 @@
      class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
    >
      <div>
-        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
+        <h2 class="text-xl font-semibold">
          {{ contactFromDid?.name || "(no name)" }}
          <router-link
            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
--- a/src/views/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -1,15 +1,7 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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>
-
+    <h1>Invalid Deep Link</h1>
    <div class="error-details">
      <div class="error-message">
        <h3>Error Details</h3>
@@ -122,6 +114,11 @@ onMounted(() => {
 </script>

 <style scoped>
+h1 {
+  color: #ff4444;
+  margin-bottom: 24px;
+}
+
 h2,
 h3 {
  color: #333;
--- a/src/views/DeepLinkRedirectView.vue
+++ b/src/views/DeepLinkRedirectView.vue
@@ -2,12 +2,9 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <div class="mb-4">
-      <!-- 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>
+      <h1 class="text-2xl text-center font-semibold relative px-7">
+        Redirecting to Time Safari
+      </h1>

      <div v-if="destinationUrl" class="space-y-4">
        <!-- Platform-specific messaging -->
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -1,22 +1,13 @@
 <template>
  <QuickNav selected="Discover" />
+  <TopMessage />

  <!-- 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>
-
-      <!-- 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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Discover Projects & People
+    </h1>

    <OnboardingDialog ref="onboardingDialog" />

@@ -60,33 +51,6 @@
    <!-- Secondary Tabs -->
    <div class="text-center text-slate-500 border-b border-slate-300">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
-        <li v-if="isProjectsActive">
-          <a
-            href="#"
-            :class="computedStarredTabStyleClassNames()"
-            @click="
-              projects = [];
-              userProfiles = [];
-              isStarredActive = true;
-              isLocalActive = false;
-              isMappedActive = false;
-              isAnywhereActive = false;
-              isSearchVisible = false;
-              tempSearchBox = null;
-              searchStarred();
-            "
-          >
-            Starred
-            <!-- restore when the links don't jump around for different numbers
-            <span
-              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isLocalActive"
-            >
-              {{ localCount > -1 ? localCount : "?" }}
-            </span>
-            -->
-          </a>
-        </li>
        <li>
          <a
            href="#"
@@ -94,11 +58,9 @@
            @click="
              projects = [];
              userProfiles = [];
-              isStarredActive = false;
              isLocalActive = true;
              isMappedActive = false;
              isAnywhereActive = false;
-              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchLocal();
@@ -122,11 +84,9 @@
            @click="
              projects = [];
              userProfiles = [];
-              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = true;
              isAnywhereActive = false;
-              isStarredActive = false;
              isSearchVisible = false;
              searchTerms = '';
              tempSearchBox = null;
@@ -143,11 +103,9 @@
            @click="
              projects = [];
              userProfiles = [];
-              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = false;
              isAnywhereActive = true;
-              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchAll();
@@ -243,15 +201,6 @@
          >No {{ isProjectsActive ? "projects" : "people" }} were found with
          that search.</span
        >
-        <span v-else-if="isStarredActive">
-          <p>
-            You have no starred projects. Star some projects to see them here.
-          </p>
-          <p class="mt-4">
-            When you star projects, you will get a notice on the front page when
-            they change.
-          </p>
-        </span>
      </p>
    </div>

@@ -282,8 +231,8 @@
                />
              </div>

-              <div class="grow overflow-hidden">
-                <h2 class="text-base font-semibold truncate">
+              <div class="grow">
+                <h2 class="text-base font-semibold">
                  {{ project.name || unnamedProject }}
                </h2>
                <div class="text-sm">
@@ -434,12 +383,9 @@ export default class DiscoverView extends Vue {
  allMyDids: Array<string> = [];
  apiServer = "";
  isLoading = false;
-
  isLocalActive = false;
  isMappedActive = false;
  isAnywhereActive = true;
-  isStarredActive = false;
-
  isProjectsActive = true;
  isPeopleActive = false;
  isSearchVisible = true;
@@ -528,8 +474,6 @@ export default class DiscoverView extends Vue {
        leafletObject: L.Map;
      };
      this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
-    } else if (this.isStarredActive) {
-      await this.searchStarred();
    } else {
      await this.searchAll();
    }
@@ -600,60 +544,6 @@ export default class DiscoverView extends Vue {
    }
  }

-  public async searchStarred() {
-    this.resetCounts();
-
-    // Clear any previous results
-    this.projects = [];
-    this.userProfiles = [];
-
-    try {
-      this.isLoading = true;
-
-      // Get starred project IDs from settings
-      const settings = await this.$accountSettings();
-
-      const starredIds = settings.starredPlanHandleIds || [];
-      if (starredIds.length === 0) {
-        // No starred projects
-        return;
-      }
-
-      // This could be optimized to only pull those not already in the cache (endorserServer.ts)
-
-      const planHandleIdsJson = JSON.stringify(starredIds);
-      const endpoint =
-        this.apiServer +
-        "/api/v2/report/plans?planHandleIds=" +
-        encodeURIComponent(planHandleIdsJson);
-      const response = await this.axios.get(endpoint, {
-        headers: await getHeaders(this.activeDid),
-      });
-      if (response.status !== 200) {
-        this.notify.error("Failed to load starred projects", TIMEOUTS.SHORT);
-        return;
-      }
-      const starredPlans: PlanData[] = response.data.data;
-      if (response.data.hitLimit) {
-        // someday we'll have to let them incrementally load the rest
-        this.notify.warning(
-          "Beware: you have so many starred projects that we cannot load them all.",
-          TIMEOUTS.SHORT,
-        );
-      }
-
-      this.projects = starredPlans;
-    } catch (error: unknown) {
-      logger.error("Error loading starred projects:", error);
-      this.notify.error(
-        "Failed to load starred projects. Please try again.",
-        TIMEOUTS.LONG,
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
  public async searchLocal(beforeId?: string) {
    this.resetCounts();

@@ -747,12 +637,9 @@ export default class DiscoverView extends Vue {
        const latestProject = this.projects[this.projects.length - 1];
        if (this.isLocalActive || this.isMappedActive) {
          this.searchLocal(latestProject.rowId);
-        } else if (this.isStarredActive) {
-          this.searchStarred();
        } else if (this.isAnywhereActive) {
          this.searchAll(latestProject.rowId);
        }
-        // Note: Starred tab doesn't support pagination since we load all starred projects at once
      } else if (this.isPeopleActive && this.userProfiles.length > 0) {
        const latestProfile = this.userProfiles[this.userProfiles.length - 1];
        if (this.isLocalActive || this.isMappedActive) {
@@ -892,28 +779,10 @@ export default class DiscoverView extends Vue {
    this.$router.push(route);
  }

-  public computedStarredTabStyleClassNames() {
-    return {
-      "inline-block": true,
-      "py-3": true,
-      "rounded-t-lg": true,
-      "border-b-2": true,
-
-      active: this.isStarredActive,
-      "text-black": this.isStarredActive,
-      "border-black": this.isStarredActive,
-      "font-semibold": this.isStarredActive,
-
-      "text-blue-600": !this.isStarredActive,
-      "border-transparent": !this.isStarredActive,
-      "hover:border-slate-400": !this.isStarredActive,
-    };
-  }
-
  public computedLocalTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,

@@ -931,7 +800,7 @@ export default class DiscoverView extends Vue {
  public computedMappedTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,

@@ -949,7 +818,7 @@ export default class DiscoverView extends Vue {
  public computedRemoteTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,

@@ -967,7 +836,7 @@ export default class DiscoverView extends Vue {
  public computedProjectsTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,

@@ -985,7 +854,7 @@ export default class DiscoverView extends Vue {
  public computedPeopleTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,

--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -1,33 +1,24 @@
 <template>
+  <QuickNav />
+  <TopMessage />
+
  <!-- 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">
-        <h1 class="grow text-xl text-center font-semibold leading-tight">
-          What Was Given
-        </h1>
-
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
        <!-- Back -->
-        <a
-          class="order-first text-lg text-center leading-none p-1"
+        <div
+          v-if="!hideBackButton"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="cancelBack()"
        >
-          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-        </a>
+          <font-awesome icon="chevron-left" class="fa-fw" />
+        </div>
+        What Was Given
+      </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>
-
-      <h2 class="text-lg font-normal leading-tight text-center overflow-hidden">
+      <h2 class="text-lg font-normal text-center overflow-hidden">
        <div class="truncate">
          From
          {{
--- a/src/views/HelpNotificationTypesView.vue
+++ b/src/views/HelpNotificationTypesView.vue
@@ -3,27 +3,22 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        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 -->
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -34,27 +34,22 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        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 -->
@@ -399,7 +394,7 @@ export default class HelpNotificationsView extends Vue {
  notifyingReminderTime = "";

  // Notification helper system
-  notify!: ReturnType<typeof createNotifyHelpers>;
+  notify = createNotifyHelpers(this.$notify);

  /**
   * Computed property for consistent button styling
@@ -435,9 +430,6 @@ export default class HelpNotificationsView extends Vue {
   * Handles errors gracefully with proper logging without exposing sensitive data.
   */
  async mounted() {
-    // Initialize notification helpers
-    this.notify = createNotifyHelpers(this.$notify);
-
    try {
      const registration = await navigator.serviceWorker?.ready;
      const fullSub = await registration?.pushManager.getSubscription();
--- a/src/views/HelpOnboardingView.vue
+++ b/src/views/HelpOnboardingView.vue
@@ -3,9 +3,11 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        Time Safari Onboarding Instructions
      </h1>
    </div>
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -3,25 +3,23 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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 font-medium text-slate-500 uppercase">{{
-          package.version
-        }}</span>
-      </h1>
-
+    <!-- Breadcrumb -->
+    <div class="mb-8">
      <!-- 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>
+      <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>

-      <!-- Spacer (no Help button) -->
-      <div class="p-3 pe-3.5 pb-3.5"></div>
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Help
+        <span class="text-xs text-gray-500">{{ package.version }}</span>
+      </h1>
    </div>

    <!-- eslint-disable prettier/prettier max-len -->
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,6 +6,7 @@ Raymer * @version 1.0.0 */

 <template>
  <QuickNav selected="Home" />
+  <TopMessage />

  <!-- CONTENT -->
  <section
@@ -13,25 +14,10 @@ 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">
-        {{ AppString.APP_NAME }}
-        <span class="text-xs font-medium text-slate-500 uppercase">{{
-          package.version
-        }}</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"
-      >
-        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </router-link>
-    </div>
+    <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>

    <OnboardingDialog ref="onboardingDialog" />

@@ -94,53 +80,51 @@ Raymer * @version 1.0.0 */
      </router-link>
    </div>

-    <div class="mb-8">
-      <!-- 
-      They should have an identifier, even if it's an auto-generated one that they'll never use.
-      Identity creation is now handled by router navigation guard.
-      -->
-      <div class="mb-4">
-        <RegistrationNotice
-          v-if="!isUserRegistered"
-          :passkeys-enabled="PASSKEYS_ENABLED"
-          :given-name="givenName"
-          message="To share, someone must register you."
-        />
+    <!-- 
+    They should have an identifier, even if it's an auto-generated one that they'll never use.
+    Identity creation is now handled by router navigation guard.
+    -->
+    <div class="mb-6">
+      <RegistrationNotice
+        v-if="!isUserRegistered"
+        :passkeys-enabled="PASSKEYS_ENABLED"
+        :given-name="givenName"
+        message="To share, someone must register you."
+      />

-        <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
-          <!-- Record Quick-Action -->
-          <div class="mb-6">
-            <div class="flex gap-2 items-center mb-2">
-              <h2 class="font-bold">Record something given by:</h2>
-              <button
-                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
-                  icon="lightbulb"
-                  class="block text-center w-[1em]"
-                />
-              </button>
-            </div>
+      <div v-if="isUserRegistered" id="sectionRecordSomethingGiven">
+        <!-- Record Quick-Action -->
+        <div class="bg-slate-200 rounded-lg overflow-hidden p-3 pt-2.5">
+          <div class="flex gap-2 items-center mb-2">
+            <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-1.5 rounded-full"
+              @click="openGiftedPrompts()"
+            >
+              <font-awesome
+                icon="lightbulb"
+                class="block text-center text-sm w-[1em]"
+              />
+            </button>
+          </div>

-            <div class="grid grid-cols-2 gap-2">
-              <button
-                type="button"
-                class="text-center text-base 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-3 py-2 rounded-lg"
-                @click="openPersonDialog()"
-              >
-                <font-awesome icon="user" />
-                Person
-              </button>
-              <button
-                type="button"
-                class="text-center text-base 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-3 py-2 rounded-lg"
-                @click="openProjectDialog()"
-              >
-                <font-awesome icon="folder-open" />
-                Project
-              </button>
-            </div>
+          <div class="grid grid-cols-2 gap-2">
+            <button
+              type="button"
+              class="text-center text-base 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-3 py-2 rounded-md"
+              @click="openPersonDialog()"
+            >
+              <font-awesome icon="user" />
+              Person
+            </button>
+            <button
+              type="button"
+              class="text-center text-base 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-3 py-2 rounded-md"
+              @click="openProjectDialog()"
+            >
+              <font-awesome icon="folder-open" />
+              Project
+            </button>
          </div>
        </div>
      </div>
@@ -152,90 +136,90 @@ Raymer * @version 1.0.0 */
      :recipient-entity-type="'person'"
    />
    <GiftedPrompts ref="giftedPrompts" />
-    <FeedFilters ref="feedFilters" />

    <!-- Results List -->
    <div class="mt-4 mb-4">
-      <div class="flex gap-2 items-center mb-3">
-        <h2 class="font-bold">Latest Activity</h2>
+      <!-- ALTERNATIVE UI: Feed + Notification Tabs -->
+      <div
+        class="sticky top-0 z-50 grid grid-cols-5 text-xl sm:text-2xl pt-4 pb-1 px-1 -mt-3 -mx-1 mb-4 bg-white rounded-b-[10px]"
+      >
        <button
-          v-if="resultsAreFiltered()"
-          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()"
+          class="relative text-center bg-slate-400 text-white px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
        >
-          <font-awesome
-            icon="filter"
-            class="block text-center w-[1em] translate-y-[0.05em]"
-          />
+          <font-awesome icon="scroll" />
+          <div class="text-xs sm:text-sm mt-1">activity</div>
        </button>
        <button
-          v-else
-          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()"
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
        >
-          <font-awesome
-            icon="filter"
-            class="block text-center w-[1em] translate-y-[0.05em]"
-          />
+          <font-awesome icon="hand-holding-heart" />
+          <div class="text-xs sm:text-sm mt-1">offers</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >2</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="folder-open" />
+          <div class="text-xs sm:text-sm mt-1">projects</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >50+</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="users" />
+          <div class="text-xs sm:text-sm mt-1">people</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >4</span
+          >
+        </button>
+        <button
+          class="relative text-center bg-slate-200 text-slate-500 px-1 pt-3 pb-2 first:rounded-s-md last:rounded-e-md border-r border-slate-300 last:border-r-0 leading-none"
+        >
+          <font-awesome icon="image" />
+          <div class="text-xs sm:text-sm mt-1">items</div>
+
+          <!-- Unread count -->
+          <span
+            class="absolute -top-2 -translate-x-1/2 bg-rose-500 text-white border border-white text-xs font-semibold leading-none rounded-full px-[0.4em] py-[0.15em]"
+            >7</span
+          >
        </button>
      </div>

-      <div
-        class="border-t p-2 border-slate-300"
-        @click="goToActivityToUserPage()"
-      >
-        <div class="flex justify-center gap-2">
-          <div
-            v-if="numNewOffersToUser"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
-          >
-            <span
-              class="block text-center text-6xl"
-              data-testId="newDirectOffersActivityNumber"
-            >
-              {{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
-            </span>
-            <p class="text-center">
-              new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
-            </p>
-          </div>
-          <div
-            v-if="numNewOffersToUserProjects"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
-          >
-            <span
-              class="block text-center text-6xl"
-              data-testId="newOffersToUserProjectsActivityNumber"
-            >
-              {{ numNewOffersToUserProjects
-              }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
-            </span>
-            <p class="text-center">
-              new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
-              projects
-            </p>
-          </div>
-          <div
-            v-if="numNewStarredProjectChanges"
-            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
-          >
-            <span
-              class="block text-center text-6xl"
-              data-testId="newStarredProjectChangesActivityNumber"
-            >
-              {{ numNewStarredProjectChanges
-              }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}
-            </span>
-            <p class="text-center">
-              starred project{{ numNewStarredProjectChanges === 1 ? "" : "s" }}
-              with changes
-            </p>
-          </div>
-        </div>
-        <div class="flex justify-end mt-2">
-          <button class="text-blue-500">View All New Activity For You</button>
-        </div>
+      <div class="flex gap-2 items-center justify-between mb-2 text-sm">
+        <h2 class="text-base font-bold">Latest Activity</h2>
+        <button
+          v-if="resultsAreFiltered()"
+          class="flex items-center justify-end gap-2 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-2 py-1 rounded"
+          @click="openFeedFilters()"
+        >
+          Filter
+          <font-awesome icon="filter"></font-awesome>
+        </button>
+        <button
+          v-else
+          class="flex items-center justify-end gap-2 bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1 rounded"
+          @click="openFeedFilters()"
+        >
+          Filter
+          <font-awesome icon="filter"></font-awesome>
+        </button>
      </div>
+      <FeedFilters ref="feedFilters" />
+
      <InfiniteScroll @reached-bottom="loadMoreGives">
        <ul id="listLatestActivity" class="space-y-4">
          <ActivityListItem
@@ -298,7 +282,6 @@ import {
  getHeaders,
  getNewOffersToUser,
  getNewOffersToUserProjects,
-  getStarredProjectsWithChanges,
  getPlanFromCache,
 } from "../libs/endorserServer";
 import {
@@ -315,7 +298,6 @@ import { NOTIFY_CONTACT_LOADING_ISSUE } from "@/constants/notifications";
 import * as Package from "../../package.json";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 import { errorStringForLog } from "../libs/endorserServer";
-import * as databaseUtil from "../db/databaseUtil";

 // consolidate this with GiveActionClaim in src/interfaces/claims.ts
 interface Claim {
@@ -428,25 +410,11 @@ export default class HomeView extends Vue {
  isRegistered = false;
  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
-  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred project changes that they've acknowledged seeing
  newOffersToUserHitLimit: boolean = false;
  newOffersToUserProjectsHitLimit: boolean = false;
-  newStarredProjectChangesHitLimit: boolean = false;
  numNewOffersToUser: number = 0; // number of new offers-to-user
  numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects

-  numNewStarredProjectChanges: number = 0; // number of new starred project changes
-  starredPlanHandleIds: Array<string> = []; // list of starred project IDs
-  searchBoxes: Array<{
-    name: string;
-    bbox: BoundingBox;
-  }> = [];
-  showShortcutBvc = false;
-  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
-  selectedImage = "";
-  isImageViewerOpen = false;
-  showProjectsDialog = false;
-
  /**
   * CRITICAL VUE REACTIVITY BUG WORKAROUND
   *
@@ -484,6 +452,16 @@ export default class HomeView extends Vue {
  //   return shouldShow;
  // }

+  searchBoxes: Array<{
+    name: string;
+    bbox: BoundingBox;
+  }> = [];
+  showShortcutBvc = false;
+  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
+  selectedImage = "";
+  isImageViewerOpen = false;
+  showProjectsDialog = false;
+
  /**
   * Initializes notification helpers
   */
@@ -534,7 +512,6 @@ export default class HomeView extends Vue {
          this.numNewOffersToUser + this.numNewOffersToUserProjects > 0,
      });

-      await this.loadNewStarredProjectChanges();
      await this.checkOnboarding();

      logger.debug("[HomeView] mounted() - component lifecycle completed", {
@@ -660,14 +637,8 @@ export default class HomeView extends Vue {
      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
      this.lastAckedOfferToUserProjectsJwtId =
        settings.lastAckedOfferToUserProjectsJwtId;
-      this.lastAckedStarredPlanChangesJwtId =
-        settings.lastAckedStarredPlanChangesJwtId;
      this.searchBoxes = settings.searchBoxes || [];
      this.showShortcutBvc = !!settings.showShortcutBvc;
-      this.starredPlanHandleIds = databaseUtil.parseJsonField(
-        settings.starredPlanHandleIds,
-        [],
-      );
      this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);

      // Check onboarding status
@@ -688,9 +659,7 @@ export default class HomeView extends Vue {

          if (resp.status === 200) {
            // Ultra-concise settings update with automatic cache invalidation!
-            await this.$saveUserSettings(this.activeDid, {
-              isRegistered: true,
-            });
+            await this.$saveMySettings({ isRegistered: true });
            this.isRegistered = true;
          }
        } catch (error) {
@@ -748,7 +717,7 @@ export default class HomeView extends Vue {
   * Used for displaying contact info in feed and actions
   *
   * @internal
-   * Called by initializeIdentity()
+   * Called by mounted() and initializeIdentity()
   */
  private async loadContacts() {
    this.allContacts = await this.$contacts();
@@ -762,6 +731,7 @@ export default class HomeView extends Vue {
   * Triggers updateAllFeed() to populate activity feed
   *
   * @internal
+   * Called by mounted()
   */
  private async loadFeedData() {
    await this.updateAllFeed();
@@ -775,6 +745,7 @@ export default class HomeView extends Vue {
   * - Rate limit status for both
   *
   * @internal
+   * Called by mounted() and initializeIdentity()
   * @requires Active DID
   */
  private async loadNewOffers() {
@@ -878,42 +849,6 @@ export default class HomeView extends Vue {
    }
  }

-  /**
-   * Loads new changes for starred projects
-   * Updates:
-   * - Number of new starred project changes
-   * - Rate limit status for starred project changes
-   *
-   * @internal
-   * @requires Active DID
-   */
-  private async loadNewStarredProjectChanges() {
-    if (this.activeDid && this.starredPlanHandleIds.length > 0) {
-      try {
-        const starredProjectChanges = await getStarredProjectsWithChanges(
-          this.axios,
-          this.apiServer,
-          this.activeDid,
-          this.starredPlanHandleIds,
-          this.lastAckedStarredPlanChangesJwtId,
-        );
-        this.numNewStarredProjectChanges = starredProjectChanges.data.length;
-        this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit;
-      } catch (error) {
-        // Don't show errors for starred project changes as it's a secondary feature
-        logger.warn(
-          "[HomeView] Failed to load starred project changes:",
-          error,
-        );
-        this.numNewStarredProjectChanges = 0;
-        this.newStarredProjectChangesHitLimit = false;
-      }
-    } else {
-      this.numNewStarredProjectChanges = 0;
-      this.newStarredProjectChangesHitLimit = false;
-    }
-  }
-
  /**
   * Checks if user needs onboarding using ultra-concise mixin utilities
   * Opens onboarding dialog if not completed
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -1,27 +1,18 @@
 <template>
  <QuickNav selected="Profile"></QuickNav>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
+
        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 -->
@@ -315,9 +306,6 @@ export default class IdentitySwitcherView extends Vue {
      }

      await this.$exec("DELETE FROM accounts WHERE id = ?", [id]);
-      await this.$exec("DELETE FROM settings WHERE accountDid = ?", [
-        accountDid,
-      ]);
    });

    // Update UI
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -1,26 +1,17 @@
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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">
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -1,29 +1,20 @@
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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 -->
+
    <div>
      <p class="text-center text-xl mb-4 font-light">
        Will increment the maximum known derivation path from the existing seed.
--- a/src/views/InviteOneView.vue
+++ b/src/views/InviteOneView.vue
@@ -1,32 +1,21 @@
 <template>
-  <QuickNav selected="Contacts" />
+  <QuickNav selected="Invite" />
+  <TopMessage />

  <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">
-        Invitations
+    <!-- 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>
-
-      <!-- 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>

+    <!-- Heading -->
+    <h1 class="text-4xl text-center font-light">Invitations</h1>
+
    <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
      <li>
        Note when sending
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -1,32 +1,23 @@
 <!-- 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">
-    <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>
-
-      <!-- Back -->
-      <a
-        class="order-first text-lg text-center leading-none p-1"
-        @click="$router.go(-1)"
+    <!-- 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()"
      >
-        <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>
+        <font-awesome icon="chevron-left" class="mr-2" />
+      </h1>
    </div>

+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+
    <!-- Error Message -->
    <div
      v-if="error"
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -22,27 +22,18 @@
 -->
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -2,27 +2,19 @@
  <QuickNav selected="Projects"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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>
        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 -->
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -3,27 +3,22 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        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">
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,86 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
-  >
-    <div class="sm:mx-auto sm:w-full sm:max-w-md">
-      <div class="text-center">
-        <div class="mx-auto h-24 w-24 text-gray-400">
-          <svg
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01"
-            />
-          </svg>
-        </div>
-        <h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
-        <p class="text-sm text-gray-600">
-          The page you're looking for doesn't exist.
-        </p>
-        <div class="mt-1">
-          <button
-            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            @click="goBack"
-          >
-            <svg
-              class="-ml-1 mr-2 h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-              />
-            </svg>
-            Go Back
-          </button>
-        </div>
-        <div class="mt-16">
-          <button
-            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            @click="goHome"
-          >
-            <svg
-              class="-ml-1 mr-2 h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-              ></path>
-            </svg>
-            Go Home
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-const goHome = () => {
-  router.push("/");
-};
-
-const goBack = () => {
-  router.go(-1);
-};
-</script>
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -1,33 +1,25 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- 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">
-        What Is Offered
-      </h1>
-
-      <!-- Back -->
-      <a
-        class="order-first text-lg text-center leading-none p-1"
+    <!-- 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"
        @click="cancelBack()"
      >
-        <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>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+      </h1>
    </div>

+    <!-- Heading -->
+    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+
    <h1 class="text-xl font-bold text-center mb-4">
      <span> Offer to {{ recipientDisplayName }} </span>
    </h1>
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -1,26 +1,12 @@
 <template>
  <QuickNav selected="Contacts" />
+  <TopMessage />

  <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">
-        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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Onboarding Meetings
+    </h1>

    <!-- Loading State -->
    <div v-if="isLoading" class="flex justify-center items-center py-8">
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -1,26 +1,12 @@
 <template>
  <QuickNav selected="Contacts" />
+  <TopMessage />

  <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">
-        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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Meeting Members
+    </h1>

    <!-- Loading Animation -->
    <div
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -1,26 +1,12 @@
 <template>
  <QuickNav selected="Contacts" />
+  <TopMessage />

  <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">
-        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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Onboarding Meeting
+    </h1>

    <!-- Existing Meeting Section -->
    <div
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1,58 +1,40 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- 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">
-        <h1 class="grow text-xl text-center font-semibold leading-tight">
+    <!-- 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>
          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>
+        <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>
      </div>
-      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
-        {{ 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="
-            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>

    <!-- Project Details -->
@@ -76,13 +58,13 @@
                  icon="user"
                  class="fa-fw text-slate-400"
                ></font-awesome>
-                <span class="truncate max-w-[calc(100%-2rem)] ml-1">
+                <span class="truncate inline-block max-w-[calc(100%-2rem)]">
                  {{ issuerInfoObject?.displayName }}
                </span>

                <span
                  v-if="!serverUtil.isHiddenDid(issuer)"
-                  class="inline-flex items-center ml-1"
+                  class="inline-flex items-center"
                >
                  <router-link
                    :to="{
@@ -157,30 +139,26 @@
        </div>

        <div class="text-sm text-slate-500">
-          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
-            <vue-markdown
-              :source="truncatedDesc"
-              class="mb-4 markdown-content"
-            />
+          <div v-if="!expanded">
+            {{ truncatedDesc }}
            <a
              v-if="description.length >= truncateLength"
-              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
+              class="uppercase text-xs font-semibold text-slate-700"
              @click="expandText"
              >... Read More</a
            >
          </div>
-          <div v-else class="overflow-hidden text-ellipsis">
-            <vue-markdown :source="description" class="mb-4 markdown-content" />
+          <div v-else>
+            {{ description }}
            <a
-              v-if="description.length >= truncateLength"
-              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
+              class="uppercase text-xs font-semibold text-slate-700"
              @click="collapseText"
              >- Read Less</a
            >
          </div>
        </div>

-        <a class="cursor-pointer" @click="onClickLoadClaim(jwtId)">
+        <a class="cursor-pointer" @click="onClickLoadClaim(projectId)">
          <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
        </a>
      </div>
@@ -308,15 +286,15 @@
                />{{ offer.amount }}
              </span>
            </div>
-            <div
-              v-if="offer.objectDescription"
-              class="text-slate-500 overflow-hidden text-ellipsis"
-            >
+            <div v-if="offer.objectDescription" class="text-slate-500">
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ offer.objectDescription }}
            </div>
            <div class="flex justify-between">
-              <a class="cursor-pointer" @click="onClickLoadClaim(offer.jwtId)">
+              <a
+                class="cursor-pointer"
+                @click="onClickLoadClaim(offer.jwtId as string)"
+              >
                <font-awesome
                  icon="file-lines"
                  class="pl-2 pt-1 text-blue-500"
@@ -453,10 +431,7 @@
                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                {{ give.issuedAt?.substring(0, 10) }}
              </div>
-              <div
-                v-if="give.description"
-                class="text-slate-500 overflow-hidden text-ellipsis"
-              >
+              <div v-if="give.description" class="text-slate-500">
                <font-awesome icon="comment" class="fa-fw text-slate-400" />
                {{ give.description }}
              </div>
@@ -563,10 +538,7 @@
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              {{ give.issuedAt?.substring(0, 10) }}
            </div>
-            <div
-              v-if="give.description"
-              class="text-slate-500 overflow-hidden text-ellipsis"
-            >
+            <div v-if="give.description" class="text-slate-500">
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ give.description }}
            </div>
@@ -620,9 +592,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
-import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
-
 import {
  GenericVerifiableCredential,
  GenericCredWrapper,
@@ -633,25 +603,25 @@ import {
  PlanSummaryRecord,
 } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
-import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
-import { APP_SERVER, NotificationIface } from "../constants/app";
-import { UNNAMED_PROJECT } from "../constants/entities";
-import { NOTIFY_CONFIRM_CLAIM } from "../constants/notifications";
-import * as databaseUtil from "../db/databaseUtil";
+import { NotificationIface } from "../constants/app";
+// Removed legacy logging import - migrated to PlatformServiceMixin
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
-import { copyToClipboard } from "../services/ClipboardService";
+import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import { logger } from "../utils/logger";
+import { copyToClipboard } from "../services/ClipboardService";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-
+import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
+import { APP_SERVER } from "@/constants/app";
+import { UNNAMED_PROJECT } from "@/constants/entities";
 /**
 * Project View Component
 * @author Matthew Raymer
@@ -693,7 +663,6 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
    ProjectIcon,
    QuickNav,
    TopMessage,
-    VueMarkdown,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -749,8 +718,6 @@ export default class ProjectViewView extends Vue {
  givesProvidedByHitLimit = false;
  givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
  imageUrl = "";
-  /** Whether this project is starred by the user */
-  isStarred = false;
  /** Project issuer DID */
  issuer = "";
  /** Cached issuer information */
@@ -761,8 +728,6 @@ export default class ProjectViewView extends Vue {
  } | null = null;
  /** DIDs that can see issuer information */
  issuerVisibleToDids: Array<string> = [];
-  /** Project JWT ID */
-  jwtId = "";
  /** Project location data */
  latitude = 0;
  loadingTotals = false;
@@ -791,7 +756,7 @@ export default class ProjectViewView extends Vue {
  totalsExpanded = false;
  truncatedDesc = "";
  /** Truncation length */
-  truncateLength = 200;
+  truncateLength = 40;

  // Utility References
  libsUtil = libsUtil;
@@ -845,12 +810,6 @@ export default class ProjectViewView extends Vue {
    }
    this.loadProject(this.projectId, this.activeDid);
    this.loadTotals();
-
-    // Check if this project is starred when settings are loaded
-    if (this.projectId && settings.starredPlanHandleIds) {
-      const starredIds = settings.starredPlanHandleIds || [];
-      this.isStarred = starredIds.includes(this.projectId);
-    }
  }

  /**
@@ -927,9 +886,8 @@ export default class ProjectViewView extends Vue {
          this.allContacts,
        );
        this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
-        this.jwtId = resp.data.id;
        this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "";
+        this.description = resp.data.claim?.description || "(no description)";
        this.truncatedDesc = this.description.slice(0, this.truncateLength);
        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
@@ -1519,67 +1477,5 @@ export default class ProjectViewView extends Vue {
      this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
    );
  }
-
-  /**
-   * Toggle the starred status of the current project
-   */
-  async toggleStar() {
-    if (!this.projectId) return;
-
-    try {
-      const settings = await this.$accountSettings();
-      const starredIds = settings.starredPlanHandleIds || [];
-      if (!this.isStarred) {
-        // Add to starred projects
-        if (!starredIds.includes(this.projectId)) {
-          const newStarredIds = [...starredIds, this.projectId];
-          const newIdsParam = JSON.stringify(newStarredIds);
-          const result = await databaseUtil.updateDidSpecificSettings(
-            this.activeDid,
-            // @ts-expect-error until we use SettingsWithJsonString properly
-            { starredPlanHandleIds: newIdsParam },
-          );
-          if (result) {
-            this.isStarred = true;
-          } else {
-            // eslint-disable-next-line no-console
-            logger.error("Got a bad result from SQL update to star a project.");
-          }
-        }
-        if (!settings.lastAckedStarredPlanChangesJwtId) {
-          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
-            lastAckedStarredPlanChangesJwtId: this.jwtId,
-          });
-        }
-      } else {
-        // Remove from starred projects
-
-        const updatedIds = starredIds.filter((id) => id !== this.projectId);
-        const newIdsParam = JSON.stringify(updatedIds);
-        const result = await databaseUtil.updateDidSpecificSettings(
-          this.activeDid,
-          // @ts-expect-error until we use SettingsWithJsonString properly
-          { starredPlanHandleIds: newIdsParam },
-        );
-        if (result) {
-          this.isStarred = false;
-        } else {
-          // eslint-disable-next-line no-console
-          logger.error("Got a bad result from SQL update to unstar a project.");
-        }
-      }
-    } catch (error) {
-      logger.error("Error toggling star status:", error);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Failed to update starred status. Please try again.",
-        },
-        3000,
-      );
-    }
-  }
 }
 </script>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,28 +1,17 @@
 <template>
  <QuickNav selected="Projects" />
+  <TopMessage />

  <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">
-        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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Your Project Ideas
+    </h1>

    <OnboardingDialog ref="onboardingDialog" />

    <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
        <li>
          <a
@@ -118,8 +107,8 @@
              />
            </div>

-            <div class="overflow-hidden">
-              <div class="text-sm truncate">
+            <div>
+              <div>
                To
                {{
                  offer.fulfillsPlanHandleId
@@ -132,7 +121,7 @@
                      )
                }}
              </div>
-              <div class="truncate">
+              <div>
                {{ offer.objectDescription }}
              </div>

@@ -254,7 +243,7 @@
            </div>

            <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold truncate">
+              <h2 class="text-base font-semibold">
                {{ project.name || unnamedProject }}
              </h2>
              <div class="text-sm truncate">
@@ -657,7 +646,7 @@ export default class ProjectsView extends Vue {
  get offerTabClasses() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showOffers,
@@ -675,7 +664,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-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
  }

  /**
@@ -717,7 +706,7 @@ export default class ProjectsView extends Vue {
  get projectTabClasses() {
    return {
      "inline-block": true,
-      "py-2": true,
+      "py-3": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showProjects,
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/src/views/QuickActionBvcBeginView.vue
@@ -1,33 +1,24 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- 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">
-        Beginning of BVC Saturday Meeting
-      </h1>
-
-      <!-- Back -->
-      <a
-        class="order-first text-lg text-center leading-none p-1"
+    <!-- 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="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>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+      </h1>
    </div>

+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      Beginning of BVC Saturday Meeting
+    </h1>
+
    <div>
      <h2 class="text-2xl m-2">You're Here</h2>
      <div class="m-2 flex">
@@ -108,7 +99,7 @@ export default class QuickActionBvcBeginView extends Vue {
  $router!: Router;

  // Notification helper system
-  private notify!: ReturnType<typeof createNotifyHelpers>;
+  private notify = createNotifyHelpers(this.$notify);

  attended = true;
  gaveTime = true;
@@ -120,9 +111,6 @@ export default class QuickActionBvcBeginView extends Vue {
   * Uses America/Denver timezone for Bountiful location
   */
  async mounted() {
-    // Initialize notification helpers
-    this.notify = createNotifyHelpers(this.$notify);
-
    logger.debug(
      "[QuickActionBvcBeginView] Mounted - calculating meeting date",
    );
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -1,33 +1,21 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- 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">
-        End of BVC Saturday Meeting
+    <!-- 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>
      </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>

+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      End of BVC Saturday Meeting
+    </h1>
+
    <div>
      <h2 class="text-2xl m-2">Confirm</h2>
      <div v-if="loadingConfirms" class="flex justify-center">
--- a/src/views/QuickActionBvcView.vue
+++ b/src/views/QuickActionBvcView.vue
@@ -1,33 +1,24 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- 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">
-        Bountiful Voluntaryist Community Actions
+    <!-- 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>
-
-      <!-- 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>

+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      Bountiful Voluntaryist Community Actions
+    </h1>
+
    <div>
      <router-link
        :to="{ name: 'quick-action-bvc-begin' }"
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/src/views/RecentOffersToUserProjectsView.vue
@@ -2,27 +2,17 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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()"
+        />
        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">
@@ -42,20 +32,20 @@
    </div>

    <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul data-testId="listRecentOffersToUserProjects">
+      <ul
+        data-testId="listRecentOffersToUserProjects"
+        class="border-t border-slate-300"
+      >
        <li
          v-for="offer in newOffersToUserProjects"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
-          <!-- Last viewed separator -->
          <div
            v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
          >
-            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
-              You've already seen all the following
-            </span>
+            You've already seen all the following
          </div>

          <span>{{
@@ -157,14 +147,6 @@ export default class RecentOffersToUserView extends Vue {
      this.newOffersToUserProjects = offersToUserProjectsData.data;
      this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;

-      // Mark offers as read after data is loaded
-      if (this.newOffersToUserProjects.length > 0) {
-        await this.$updateSettings({
-          lastAckedOfferToUserProjectsJwtId:
-            this.newOffersToUserProjects[0].jwtId,
-        });
-      }
-
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
--- a/src/views/RecentOffersToUserView.vue
+++ b/src/views/RecentOffersToUserView.vue
@@ -2,27 +2,17 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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()"
+        />
        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">
@@ -37,20 +27,20 @@
      </p>
    </div>
    <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul data-testId="listRecentOffersToUser">
+      <ul
+        data-testId="listRecentOffersToUser"
+        class="border-t border-slate-300"
+      >
        <li
          v-for="offer in newOffersToUser"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
-          <!-- Last viewed separator -->
          <div
            v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
+            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
          >
-            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
-              You've already seen all the following
-            </span>
+            You've already seen all the following
          </div>

          <span>{{
@@ -148,13 +138,6 @@ export default class RecentOffersToUserView extends Vue {
      this.newOffersToUser = offersToUserData.data;
      this.newOffersToUserAtEnd = !offersToUserData.hitLimit;

-      // Mark offers as read after data is loaded
-      if (this.newOffersToUser.length > 0) {
-        await this.$updateSettings({
-          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
-        });
-      }
-
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -1,27 +1,24 @@
 <template>
+  <QuickNav />
+
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        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">
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -28,29 +28,31 @@
 -->

 <template>
+  <QuickNav selected="Profile" />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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
+    <!-- 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>

-      <!-- 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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Seed Backup
+    </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 class="flex justify-between py-2">
+      <span />
+      <span>
+        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
+          Help
+        </router-link>
+      </span>
    </div>

    <div v-if="activeAccount">
@@ -160,7 +162,7 @@ export default class SeedBackupView extends Vue {
  showSeed = false;

  // Notification helper system
-  notify!: ReturnType<typeof createNotifyHelpers>;
+  notify = createNotifyHelpers(this.$notify);

  /**
   * Computed property for consistent copy feedback styling
@@ -202,9 +204,6 @@ export default class SeedBackupView extends Vue {
   * Handles errors gracefully with user notifications.
   */
  async created() {
-    // Initialize notification helpers
-    this.notify = createNotifyHelpers(this.$notify);
-
    try {
      let activeDid = "";

--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -1,31 +1,26 @@
 <template>
  <QuickNav />
+  <TopMessage />

  <!-- CONTENT -->
  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <TopMessage />
+    <!-- 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>

-    <!-- 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">
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light">
        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">
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -39,28 +39,10 @@
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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>
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Image
+    </h1>
    <div v-if="imageBlob">
      <div v-if="uploading" class="text-center mb-4">
        <font-awesome icon="spinner" class="fa-spin-pulse" />
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -3,31 +3,26 @@
    id="Content"
    class="p-6 pb-24 min-h-screen flex flex-col justify-center"
  >
-    <!-- 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">
+    <!-- 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">
        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">
+    <div id="start-question" class="mt-8">
      <div class="max-w-3xl mx-auto">
        <p class="text-center text-xl font-light">
          How do you want to create this identifier?
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -3,27 +3,22 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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">
+    <!-- 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">
        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>
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -3,25 +3,22 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- 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>
-
+    <!-- Breadcrumb -->
+    <div class="mb-8">
      <!-- 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>
+      <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>

-      <!-- 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>
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Test
+      </h1>
    </div>

    <div v-if="isNotProdServer">
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,31 +1,22 @@
 <template>
  <QuickNav selected="Discover" />
+  <TopMessage />

  <!-- 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">
+    <!-- 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>
        Individual Profile
      </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 class="text-sm text-center text-slate-500"></div>
    </div>

    <!-- Loading Animation -->
--- a/test-playwright/20-create-project.spec.ts
+++ b/test-playwright/20-create-project.spec.ts
@@ -100,10 +100,7 @@ test('Create new project, then search for it', async ({ page }) => {
  const finalTitle = standardTitle + finalRandomString;
  const finalDescription = standardDescription + finalRandomString;
  const editedTitle = finalTitle + standardEdit;
-  const editedDescription =
-    finalDescription +
-    standardEdit +
-    " ... and enough text to overflow into the 'Read More' section.";
+  const editedDescription = finalDescription + standardEdit;

  // Import user 00
  await importUser(page, '00');
--- a/test-playwright/60-new-activity.spec.ts
+++ b/test-playwright/60-new-activity.spec.ts
@@ -109,7 +109,7 @@ test('New offers for another user', async ({ page }) => {
  await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();

-  await expect(page.getByText('The offers are marked as read')).toBeVisible();
+  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
  await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert

  await page.waitForTimeout(1000);
@@ -140,7 +140,7 @@ test('New offers for another user', async ({ page }) => {
  await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
  await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();

-  await expect(page.getByText('The offers are marked as read')).toBeVisible();
+  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
  await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert

  // now see that no offers are shown as new
--- a/test-playwright/testUtils.ts
+++ b/test-playwright/testUtils.ts
@@ -145,10 +145,9 @@ export async function generateNewEthrUser(page: Page): Promise<string> {
 }

 // Function to generate a random string of specified length
-// Note that this only generates up to 10 characters
 export async function generateRandomString(length: number): Promise<string> {
  return Math.random()
-    .toString(36) // base 36 only generates up to 10 characters
+    .toString(36)
    .substring(2, 2 + length);
 }

@@ -157,7 +156,7 @@ export async function createUniqueStringsArray(
  count: number
 ): Promise<string[]> {
  const stringsArray: string[] = [];
-  const stringLength = 5; // max of 10; see generateRandomString
+  const stringLength = 16;

  for (let i = 0; i < count; i++) {
    let randomString = await generateRandomString(stringLength);
Author	SHA1	Message	Date
Jose Olarte III	a9d9df32e1	WIP: QuickNav notification badges - Cleanup of unused mockups - Minor tweaks	2025-09-26 21:48:53 +08:00
Jose Olarte III	e655082af6	WIP: sticky tabs	2025-09-25 21:54:13 +08:00
Jose Olarte III	ea2fa30903	WIP: alternative notification UI	2025-09-24 21:19:22 +08:00
Jose Olarte III	39dbbb08f7	WIP: HomeView notification badge	2025-09-22 22:25:38 +08:00
Jose Olarte III	eb21d3c247	WIP: notification system adjustments - Re-organize tabs - Remove unneeded "Unread only" toggle (limiting functionality to chronological isUnread) - Added "read line"	2025-09-19 23:41:03 +08:00
Jose Olarte III	213f5f0555	Merge branch 'master' into notification-system	2025-09-19 16:38:15 +08:00
Jose Olarte III	2db2c39830	WIP: notification view improvements - Notification count badge per tab - "Unread only" filter toggle - Notification dot size adjustment	2025-09-17 22:13:34 +08:00
Jose Olarte III	106cefab51	WIP: notification system redesign - Tabbed interface to expand the view's capabilities - Added controls for managing notifications individually or in bulk - Streamlined list design for increased information density	2025-09-15 21:43:39 +08:00