From c708716675a1233d3cef29d9577f664e9130248c Mon Sep 17 00:00:00 2001
From: Matthew Raymer <mraymer@osinetwork.net>
Date: Mon, 24 Feb 2025 11:21:08 +0000
Subject: [PATCH] refactor: migrate interfaces to dedicated directory

Reorganizes TypeScript interfaces into a modular structure:
- Create dedicated interfaces directory with specialized files
- Split interfaces by domain (claims, common, limits, records, user)
- Update imports in endorserServer.ts to use new interface locations
- Replace 'any' types with 'unknown' for better type safety
- Add proper type imports and exports

This improves code organization and maintainability by:
- Centralizing interface definitions
- Reducing file size of endorserServer.ts
- Making interface relationships more explicit
- Improving type safety with stricter types
---
 src/App.vue                                   |  16 +-
 src/components/GiftedDialog.vue               |   6 +-
 src/components/GiftedPrompts.vue              |   8 +-
 src/components/HiddenDidDialog.vue            |   4 +-
 src/components/ImageMethodDialog.vue          |   8 +-
 src/components/ImageViewer.vue                |   4 +-
 src/components/MembersList.vue                |  20 +-
 src/components/OfferDialog.vue                |   4 +-
 src/components/OnboardingDialog.vue           |  18 +-
 src/components/PhotoDialog.vue                |  10 +-
 src/components/PushNotificationPermission.vue |   6 +-
 src/components/QuickNav.vue                   |  10 +-
 src/interfaces/claims-result.ts               |  47 +++
 src/interfaces/claims.ts                      |  63 ++++
 src/interfaces/common.ts                      |  41 +++
 src/interfaces/index.ts                       |   6 +
 src/interfaces/limits.ts                      |  14 +
 src/interfaces/records.ts                     |  90 ++++++
 src/interfaces/user.ts                        |   8 +
 src/libs/endorserServer.ts                    | 278 +-----------------
 src/main.capacitor.ts                         |  40 +--
 src/views/AccountViewView.vue                 |  36 +--
 src/views/ClaimAddRawView.vue                 |   2 +-
 src/views/ClaimView.vue                       |  42 +--
 src/views/ConfirmContactView.vue              |   2 +-
 src/views/ConfirmGiftView.vue                 |  42 +--
 src/views/ContactAmountsView.vue              |  14 +-
 src/views/ContactEditView.vue                 |   8 +-
 src/views/ContactGiftingView.vue              |   6 +-
 src/views/ContactImportView.vue               |   4 +-
 src/views/ContactQRScanShowView.vue           |   2 +-
 src/views/ContactScanView.vue                 |   2 +-
 src/views/ContactsView.vue                    |  22 +-
 src/views/DIDView.vue                         |  24 +-
 src/views/DiscoverView.vue                    |  12 +-
 src/views/GiftedDetailsView.vue               |  30 +-
 src/views/HelpNotificationTypesView.vue       |   2 +-
 src/views/HelpNotificationsView.vue           |   8 +-
 src/views/HelpOnboardingView.vue              |  20 +-
 src/views/HelpView.vue                        |  28 +-
 src/views/HomeView.vue                        |  31 +-
 src/views/IdentitySwitcherView.vue            |  12 +-
 src/views/ImportAccountView.vue               |   2 +-
 src/views/ImportDerivedAccountView.vue        |  10 +-
 src/views/InviteOneAcceptView.vue             |   2 +-
 src/views/InviteOneView.vue                   |   8 +-
 src/views/NewActivityView.vue                 |  10 +-
 src/views/NewEditAccountView.vue              |   2 +-
 src/views/NewEditProjectView.vue              |  28 +-
 src/views/NewIdentifierView.vue               |  10 +-
 src/views/OfferDetailsView.vue                |  12 +-
 src/views/OnboardMeetingListView.vue          |   4 +-
 src/views/OnboardMeetingMembersView.vue       |   2 +-
 src/views/OnboardMeetingSetupView.vue         |   8 +-
 src/views/ProjectViewView.vue                 |  66 ++---
 src/views/ProjectsView.vue                    |  24 +-
 src/views/QuickActionBvcBeginView.vue         |   2 +-
 src/views/QuickActionBvcEndView.vue           |   8 +-
 src/views/QuickActionBvcView.vue              |   2 +-
 src/views/RecentOffersToUserProjectsView.vue  |   8 +-
 src/views/RecentOffersToUserView.vue          |   6 +-
 src/views/SearchAreaView.vue                  |  10 +-
 src/views/SeedBackupView.vue                  |   6 +-
 src/views/ShareMyContactInfoView.vue          |   4 +-
 src/views/SharedPhotoView.vue                 |   8 +-
 src/views/StartView.vue                       |   6 +-
 src/views/StatisticsView.vue                  |   2 +-
 src/views/TestView.vue                        |   2 +-
 src/views/UserProfileView.vue                 |   6 +-
 69 files changed, 663 insertions(+), 645 deletions(-)
 create mode 100644 src/interfaces/claims-result.ts
 create mode 100644 src/interfaces/claims.ts
 create mode 100644 src/interfaces/common.ts
 create mode 100644 src/interfaces/index.ts
 create mode 100644 src/interfaces/limits.ts
 create mode 100644 src/interfaces/records.ts
 create mode 100644 src/interfaces/user.ts

diff --git a/src/App.vue b/src/App.vue
index 00ce8c2..901477f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@
             <div
               class="flex items-center justify-center w-12 bg-slate-600 text-slate-100"
             >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="circle-info" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
@@ -51,7 +51,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-slate-200 text-slate-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -63,7 +63,7 @@
             <div
               class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100"
             >
-              <fa icon="circle-info" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="circle-info" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
@@ -74,7 +74,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -86,7 +86,7 @@
             <div
               class="flex items-center justify-center w-12 bg-amber-600 text-amber-100"
             >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="triangle-exclamation" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
@@ -97,7 +97,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
@@ -109,7 +109,7 @@
             <div
               class="flex items-center justify-center w-12 bg-rose-600 text-rose-100"
             >
-              <fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa>
+              <font-awesome icon="triangle-exclamation" class="fa-fw fa-xl"></font-awesome>
             </div>
 
             <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
@@ -120,7 +120,7 @@
                 @click="close(notification.id)"
                 class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600"
               >
-                <fa icon="xmark" class="fa-fw"></fa>
+                <font-awesome icon="xmark" class="fa-fw"></font-awesome>
               </button>
             </div>
           </div>
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 54bacaf..fedbb50 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -21,7 +21,7 @@
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
           @click="amountInput === '0' ? null : decrement()"
         >
-          <fa icon="chevron-left" />
+          <font-awesome icon="chevron-left" />
         </div>
         <input
           id="inputGivenAmount"
@@ -33,7 +33,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
           @click="increment()"
         >
-          <fa icon="chevron-right" />
+          <font-awesome icon="chevron-right" />
         </div>
       </div>
       <div class="mt-4 flex justify-center">
@@ -62,7 +62,7 @@
       </div>
       <p class="text-center mb-2 mt-6 italic">
         Sign & Send to publish to the world
-        <fa
+        <font-awesome
           icon="circle-info"
           class="pl-2 text-blue-500 cursor-pointer"
           @click="explainData()"
diff --git a/src/components/GiftedPrompts.vue b/src/components/GiftedPrompts.vue
index 88a8de7..639bd96 100644
--- a/src/components/GiftedPrompts.vue
+++ b/src/components/GiftedPrompts.vue
@@ -7,7 +7,7 @@
           class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
           @click="cancel"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </h1>
       <span class="mt-2 flex justify-between">
@@ -16,7 +16,7 @@
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="prevIdea()"
         >
-          <fa icon="chevron-left" class="m-auto" />
+          <font-awesome icon="chevron-left" class="m-auto" />
         </span>
 
         <div class="m-2">
@@ -45,7 +45,7 @@
                     class="text-center 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-1.5 py-2 rounded-md mt-4"
                     @click="nextIdeaPastContacts()"
                   >
-                    Skip Contacts <fa icon="forward" />
+                    Skip Contacts <font-awesome icon="forward" />
                   </button>
                 </span>
               </span>
@@ -57,7 +57,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="nextIdea()"
         >
-          <fa icon="chevron-right" class="m-auto" />
+          <font-awesome icon="chevron-right" class="m-auto" />
         </span>
       </span>
       <button
diff --git a/src/components/HiddenDidDialog.vue b/src/components/HiddenDidDialog.vue
index 8ce558b..061a466 100644
--- a/src/components/HiddenDidDialog.vue
+++ b/src/components/HiddenDidDialog.vue
@@ -8,7 +8,7 @@
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
         <button @click="close" class="text-gray-500 hover:text-gray-700">
-          <fa icon="times" />
+          <font-awesome icon="times" />
         </button>
       </div>
 
@@ -53,7 +53,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </span>
diff --git a/src/components/ImageMethodDialog.vue b/src/components/ImageMethodDialog.vue
index ad05ca8..35b5364 100644
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -12,14 +12,14 @@
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </div>
 
       <div>
         <div class="text-center mt-8">
           <div>
-            <fa
+            <font-awesome
               icon="camera"
               class="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-2 rounded-md"
               @click="openPhotoDialog()"
@@ -34,14 +34,14 @@
               <input type="text" v-model="imageUrl" class="border-2" />
             </span>
             <span class="ml-2">
-              <fa
+              <font-awesome
                 v-if="imageUrl"
                 icon="check"
                 class="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-2 rounded-md cursor-pointer"
                 @click="acceptUrl"
               />
               <!-- so that there's no shifting when it becomes visible -->
-              <fa v-else icon="check" class="text-white bg-white px-2 py-2" />
+              <font-awesome v-else icon="check" class="text-white bg-white px-2 py-2" />
             </span>
           </div>
         </div>
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
index 6049ac0..635660c 100644
--- a/src/components/ImageViewer.vue
+++ b/src/components/ImageViewer.vue
@@ -8,7 +8,7 @@
             class="text-white text-2xl p-2 rounded-full hover:bg-white/10"
             @click="close"
           >
-            <fa icon="xmark" />
+            <font-awesome icon="xmark" />
           </button>
 
           <!-- Mobile share button -->
@@ -17,7 +17,7 @@
             class="text-white text-xl p-2 rounded-full hover:bg-white/10"
             @click="handleShare"
           >
-            <fa icon="ellipsis" />
+            <font-awesome icon="ellipsis" />
           </button>
         </div>
 
diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index ea169cd..c63cf2b 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -5,7 +5,7 @@
       v-if="isLoading"
       class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
     >
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
 
     <!-- Members List -->
@@ -33,13 +33,13 @@
             <span
               class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
             >
-              <fa icon="plus" class="text-sm" />
+              <font-awesome icon="plus" class="text-sm" />
             </span>
             /
             <span
               class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
             >
-              <fa icon="minus" class="text-sm" />
+              <font-awesome icon="minus" class="text-sm" />
             </span>
             to add/remove them to/from the meeting.
           </span>
@@ -54,7 +54,7 @@
           <span
             class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
           >
-            <fa icon="circle-user" class="text-xl" />
+            <font-awesome icon="circle-user" class="text-xl" />
           </span>
           to add them to your contacts.
         </span>
@@ -67,7 +67,7 @@
           class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
           title="Refresh members list"
         >
-          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
         </button>
       </div>
       <div
@@ -87,7 +87,7 @@
                 class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
                 title="Add as contact"
               >
-                <fa icon="circle-user" class="text-xl" />
+                <font-awesome icon="circle-user" class="text-xl" />
               </button>
             </div>
             <button
@@ -100,7 +100,7 @@
               class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
               title="Contact info"
             >
-              <fa icon="circle-info" class="text-base" />
+              <font-awesome icon="circle-info" class="text-base" />
             </button>
           </div>
           <div class="flex">
@@ -117,7 +117,7 @@
                   member.member.admitted ? 'Remove member' : 'Admit member'
                 "
               >
-                <fa
+                <font-awesome
                   :icon="member.member.admitted ? 'minus' : 'plus'"
                   class="text-sm"
                 />
@@ -127,7 +127,7 @@
                 class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
                 title="Admission info"
               >
-                <fa icon="circle-info" class="text-base" />
+                <font-awesome icon="circle-info" class="text-base" />
               </button>
             </span>
           </div>
@@ -142,7 +142,7 @@
           class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
           title="Refresh members list"
         >
-          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
         </button>
       </div>
 
diff --git a/src/components/OfferDialog.vue b/src/components/OfferDialog.vue
index 54d5d5e..5f16ce3 100644
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -21,7 +21,7 @@
           @click="decrement()"
           v-if="amountInput !== '0'"
         >
-          <fa icon="chevron-left" />
+          <font-awesome icon="chevron-left" />
         </div>
         <input
           data-testId="inputOfferAmount"
@@ -33,7 +33,7 @@
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
           @click="increment()"
         >
-          <fa icon="chevron-right" />
+          <font-awesome icon="chevron-right" />
         </div>
       </div>
       <div class="mt-4 flex justify-center">
diff --git a/src/components/OnboardingDialog.vue b/src/components/OnboardingDialog.vue
index 1200a6f..c8a6f15 100644
--- a/src/components/OnboardingDialog.vue
+++ b/src/components/OnboardingDialog.vue
@@ -10,7 +10,7 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
@@ -21,7 +21,7 @@
         </span>
         click on the
         <span class="bg-green-600 text-white rounded-full">
-          <fa icon="plus" class="fa-fw" />
+          <font-awesome icon="plus" class="fa-fw" />
         </span>
         button to express your appreciation for... whatever -- maybe thanks for
         showing you all these fascinating stories of
@@ -40,7 +40,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="house-chimney"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -84,7 +84,7 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
@@ -106,7 +106,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="magnifying-glass"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -141,14 +141,14 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]" />
+          <font-awesome icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
       <p class="relative">
         Now you can take a turn: click on the
         <span class="bg-green-600 text-white rounded-full">
-          <fa icon="plus" class="fa-fw" />
+          <font-awesome icon="plus" class="fa-fw" />
         </span>
         button to throw out projects of your own... anything you'd like to see
         happen. If your first idea doesn't catch anyone, try, try again... and
@@ -157,7 +157,7 @@
 
       <p class="mt-4 flex items-center">
         The
-        <fa
+        <font-awesome
           icon="hand"
           class="ml-1 mr-1 text-lg text-white bg-slate-400 px-2 py-2 rounded"
         />
@@ -168,7 +168,7 @@
         By the way, one good way to get to know your neighbors and their
         interests is to offer time directly to them. You can do this on the
         contacts screen
-        <fa icon="users" class="text-slate-500" />
+        <font-awesome icon="users" class="text-slate-500" />
         which is a great way to get to know a neighbor's interests.
       </p>
 
diff --git a/src/components/PhotoDialog.vue b/src/components/PhotoDialog.vue
index eb519cf..cd18738 100644
--- a/src/components/PhotoDialog.vue
+++ b/src/components/PhotoDialog.vue
@@ -15,12 +15,12 @@
           class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </div>
 
       <div v-if="uploading" class="flex justify-center">
-        <fa
+        <font-awesome
           icon="spinner"
           class="fa-spin fa-3x text-center block px-12 py-12"
         />
@@ -93,7 +93,7 @@
               @click="takeImage()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="camera" class="w-[1em]"></fa>
+              <font-awesome icon="camera" class="w-[1em]"></font-awesome>
             </button>
           </div>
           <div
@@ -103,7 +103,7 @@
               @click="swapMirrorClass()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="left-right" class="w-[1em]"></fa>
+              <font-awesome icon="left-right" class="w-[1em]"></font-awesome>
             </button>
           </div>
           <div v-if="numDevices > 1" class="absolute bottom-2 right-4">
@@ -111,7 +111,7 @@
               @click="switchCamera()"
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
             >
-              <fa icon="rotate" class="w-[1em]"></fa>
+              <font-awesome icon="rotate" class="w-[1em]"></font-awesome>
             </button>
           </div>
         </camera>
diff --git a/src/components/PushNotificationPermission.vue b/src/components/PushNotificationPermission.vue
index edb62e8..a49ca91 100644
--- a/src/components/PushNotificationPermission.vue
+++ b/src/components/PushNotificationPermission.vue
@@ -25,7 +25,7 @@
           </p>
           <p v-else class="text-lg mb-4">
             Waiting for system initialization, which may take up to 5 seconds...
-            <fa icon="spinner" spin />
+            <font-awesome icon="spinner" spin />
           </p>
 
           <div v-if="serviceWorkerReady && vapidKey">
@@ -69,8 +69,8 @@
                   class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
                   @click="hourAm = !hourAm"
                 >
-                  <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
-                  <span v-else> PM <fa icon="chevron-up" /> </span>
+                  <span v-if="hourAm"> AM <font-awesome icon="chevron-down" /> </span>
+                  <span v-else> PM <font-awesome icon="chevron-up" /> </span>
                 </span>
               </span>
             </div>
diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index ade2161..8f813e2 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -13,7 +13,7 @@
       >
         <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
           <div class="flex flex-col items-center">
-            <fa icon="house-chimney" class="fa-fw" />
+            <font-awesome icon="house-chimney" class="fa-fw" />
             <span class="text-xs mt-1">feed</span>
           </div>
         </router-link>
@@ -32,7 +32,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="magnifying-glass" class="fa-fw" />
+            <font-awesome icon="magnifying-glass" class="fa-fw" />
             <span class="text-xs mt-1">search</span>
           </div>
         </router-link>
@@ -51,7 +51,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="hand" class="fa-fw" />
+            <font-awesome icon="hand" class="fa-fw" />
             <span class="text-xs mt-1">your work</span>
           </div>
         </router-link>
@@ -70,7 +70,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="users" class="fa-fw" />
+            <font-awesome icon="users" class="fa-fw" />
             <span class="text-xs mt-1">contacts</span>
           </div>
         </router-link>
@@ -89,7 +89,7 @@
           class="block text-center py-2 px-1"
         >
           <div class="flex flex-col items-center">
-            <fa icon="circle-user" class="fa-fw" />
+            <font-awesome icon="circle-user" class="fa-fw" />
             <!--
              We used to say "account", so we'll keep that in the code,
              but it isn't accurate because we don't hold anything for them.
diff --git a/src/interfaces/claims-result.ts b/src/interfaces/claims-result.ts
new file mode 100644
index 0000000..30b524e
--- /dev/null
+++ b/src/interfaces/claims-result.ts
@@ -0,0 +1,47 @@
+import { AxiosResponse } from "axios";
+import { GiverReceiverInputInfo } from "../libs/util";
+import { ErrorResult, ResultWithType } from "./common";
+
+export interface GiverOutputInfo {
+  action: string;
+  giver?: GiverReceiverInputInfo;
+  description?: string;
+  amount?: number;
+  unitCode?: string;
+}
+
+export interface ClaimResult {
+  success: { claimId: string; handleId: string };
+  error: { code: string; message: string };
+}
+
+export interface VerifiableCredential {
+  exp?: number;
+  iat: number;
+  iss: string;
+  vc: {
+    "@context": string[];
+    type: string[];
+    credentialSubject: VerifiableCredentialSubject;
+  };
+}
+
+export interface VerifiableCredentialSubject {
+  "@context": string;
+  "@type": string;
+  [key: string]: unknown;
+}
+
+export interface WorldProperties {
+  startTime?: string;
+  endTime?: string;
+}
+
+// Type for createAndSubmitClaim result
+export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
+
+// Update SuccessResult to use ClaimResult
+export interface SuccessResult extends ResultWithType {
+  type: "success";
+  response: AxiosResponse<ClaimResult>;
+}
diff --git a/src/interfaces/claims.ts b/src/interfaces/claims.ts
new file mode 100644
index 0000000..28322a3
--- /dev/null
+++ b/src/interfaces/claims.ts
@@ -0,0 +1,63 @@
+import { GenericVerifiableCredential } from "./common";
+
+export interface AgreeVerifiableCredential {
+  "@context": string;
+  "@type": string;
+  object: Record<string, unknown>;
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id4
+export interface GiveVerifiableCredential extends GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": "GiveAction";
+  agent?: { identifier: string };
+  description?: string;
+  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
+  identifier?: string;
+  image?: string;
+  object?: { amountOfThisGood: number; unitCode: string };
+  provider?: GenericVerifiableCredential;
+  recipient?: { identifier: string };
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id8
+export interface OfferVerifiableCredential extends GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": "Offer";
+  description?: string;
+  includesObject?: { amountOfThisGood: number; unitCode: string };
+  itemOffered?: {
+    description?: string;
+    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
+  };
+  offeredBy?: { identifier: string };
+  recipient?: { identifier: string };
+  validThrough?: string;
+}
+
+// Note that previous VCs may have additional fields.
+// https://endorser.ch/doc/html/transactions.html#id7
+export interface PlanVerifiableCredential extends GenericVerifiableCredential {
+  "@context": "https://schema.org";
+  "@type": "PlanAction";
+  name: string;
+  agent?: { identifier: string };
+  description?: string;
+  identifier?: string;
+  lastClaimId?: string;
+  location?: {
+    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
+  };
+}
+
+// AKA Registration & RegisterAction
+export interface RegisterVerifiableCredential {
+  "@context": string;
+  "@type": "RegisterAction";
+  agent: { identifier: string };
+  identifier?: string;
+  object: string;
+  participant?: { identifier: string };
+}
diff --git a/src/interfaces/common.ts b/src/interfaces/common.ts
new file mode 100644
index 0000000..8b0589d
--- /dev/null
+++ b/src/interfaces/common.ts
@@ -0,0 +1,41 @@
+// similar to VerifiableCredentialSubject... maybe rename this
+export interface GenericVerifiableCredential {
+  "@context"?: string;
+  "@type": string;
+  [key: string]: unknown;
+}
+
+export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
+  claim: T;
+  claimType?: string;
+  handleId: string;
+  id: string;
+  issuedAt: string;
+  issuer: string;
+  publicUrls?: Record<string, string>;
+}
+
+export interface ResultWithType {
+  type: string;
+}
+
+export interface SuccessResult extends ResultWithType {
+  type: "success";
+  response: unknown;
+}
+
+export interface ErrorResponse {
+  error?: {
+    message?: string;
+  };
+}
+
+export interface InternalError {
+  error: string;
+  userMessage?: string;
+}
+
+export interface ErrorResult extends ResultWithType {
+  type: "error";
+  error: InternalError;
+}
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
new file mode 100644
index 0000000..644c2e1
--- /dev/null
+++ b/src/interfaces/index.ts
@@ -0,0 +1,6 @@
+export * from "./claims";
+export * from "./claims-result";
+export * from "./common";
+export * from "./limits";
+export * from "./records";
+export * from "./user";
diff --git a/src/interfaces/limits.ts b/src/interfaces/limits.ts
new file mode 100644
index 0000000..419ffae
--- /dev/null
+++ b/src/interfaces/limits.ts
@@ -0,0 +1,14 @@
+export interface EndorserRateLimits {
+  doneClaimsThisWeek: string;
+  doneRegistrationsThisMonth: string;
+  maxClaimsPerWeek: string;
+  maxRegistrationsPerMonth: string;
+  nextMonthBeginDateTime: string;
+  nextWeekBeginDateTime: string;
+}
+
+export interface ImageRateLimits {
+  doneImagesThisWeek: string;
+  maxImagesPerWeek: string;
+  nextWeekBeginDateTime: string;
+}
diff --git a/src/interfaces/records.ts b/src/interfaces/records.ts
new file mode 100644
index 0000000..63422f8
--- /dev/null
+++ b/src/interfaces/records.ts
@@ -0,0 +1,90 @@
+import { GiveVerifiableCredential, OfferVerifiableCredential } from "./claims";
+
+// a summary record; the VC is found the fullClaim field
+export interface GiveSummaryRecord {
+  agentDid: string;
+  amount: number;
+  amountConfirmed: number;
+  description: string;
+  fullClaim: GiveVerifiableCredential;
+  fulfillsHandleId: string;
+  fulfillsPlanHandleId?: string;
+  fulfillsType?: string;
+  handleId: string;
+  issuedAt: string;
+  issuerDid: string;
+  jwtId: string;
+  providerPlanHandleId?: string;
+  recipientDid: string;
+  unit: string;
+}
+
+// a summary record; the VC is found the fullClaim field
+export interface OfferSummaryRecord {
+  amount: number;
+  amountGiven: number;
+  amountGivenConfirmed: number;
+  fullClaim: OfferVerifiableCredential;
+  fulfillsPlanHandleId: string;
+  handleId: string;
+  issuerDid: string;
+  jwtId: string;
+  nonAmountGivenConfirmed: number;
+  objectDescription: string;
+  offeredByDid: string;
+  recipientDid: string;
+  requirementsMet: boolean;
+  unit: string;
+  validThrough: string;
+}
+
+export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
+  planName: string;
+}
+
+// a summary record; the VC is not currently part of this record
+export interface PlanSummaryRecord {
+  agentDid?: string;
+  description: string;
+  endTime?: string;
+  fulfillsPlanHandleId: string;
+  handleId: string;
+  image?: string;
+  issuerDid: string;
+  locLat?: number;
+  locLon?: number;
+  name?: string;
+  startTime?: string;
+  url?: string;
+}
+
+/**
+ * Represents data about a project
+ *
+ * @deprecated
+ * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
+ **/
+export interface PlanData {
+  /**
+   * Description of the project
+   **/
+  description: string;
+  /**
+   * URL referencing information about the project
+   **/
+  handleId: string;
+  image?: string;
+  /**
+   * The DID of the issuer
+   */
+  issuerDid: string;
+  /**
+   * Name of the project
+   **/
+  name: string;
+  /**
+   * The identifier of the project record -- different from jwtId
+   * (Maybe we should use the jwtId to iterate through the records instead.)
+   **/
+  rowId?: string;
+}
diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts
new file mode 100644
index 0000000..a79d6a9
--- /dev/null
+++ b/src/interfaces/user.ts
@@ -0,0 +1,8 @@
+export interface UserInfo {
+  did: string;
+  name: string;
+  publicEncKey: string;
+  registered: boolean;
+  profileImageUrl?: string;
+  nextPublicEncKeyHash?: string;
+}
diff --git a/src/libs/endorserServer.ts b/src/libs/endorserServer.ts
index 9609935..a9efc03 100644
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -1,4 +1,4 @@
-import { Axios, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Axios, AxiosRequestConfig } from "axios";
 import { Buffer } from "buffer";
 import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
@@ -17,10 +17,20 @@ import {
   retrieveAccountMetadata,
   retrieveFullyDecryptedAccount,
   getPasskeyExpirationSeconds,
-  GiverReceiverInputInfo,
 } from "../libs/util";
 import { createEndorserJwtForKey, KeyMeta } from "../libs/crypto/vc";
 
+import {
+  GiveVerifiableCredential,
+  OfferVerifiableCredential,
+  RegisterVerifiableCredential,
+  GenericVerifiableCredential,
+  GenericCredWrapper,
+  PlanSummaryRecord,
+  UserInfo,
+  CreateAndSubmitClaimResult,
+} from "../interfaces";
+
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
 export const SERVICE_ID = "endorser.ch";
@@ -36,44 +46,6 @@ export const CONTACT_URL_PATH_ENDORSER_CH_OLD = "/contact?jwt=";
 //export const CONTACT_URL_PREFIX_ENDORSER_CH_OLD = "https://endorser.ch";
 // the prefix for handle IDs, the permanent ID for claims on Endorser
 export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
-
-export interface AgreeVerifiableCredential {
-  "@context": string;
-  "@type": string;
-  // "any" because arbitrary objects can be subject of agreement
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  object: Record<string, any>;
-}
-
-export interface GiverOutputInfo {
-  action: string;
-  giver?: GiverReceiverInputInfo;
-  description?: string;
-  amount?: number;
-  unitCode?: string;
-}
-
-export interface ClaimResult {
-  success: { claimId: string; handleId: string };
-  error: { code: string; message: string };
-}
-
-// similar to VerifiableCredentialSubject... maybe rename this
-export interface GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": string;
-  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface GenericCredWrapper<T extends GenericVerifiableCredential> {
-  claim: T;
-  claimType?: string;
-  handleId: string;
-  id: string;
-  issuedAt: string;
-  issuer: string;
-  publicUrls?: Record<string, string>; // only for IDs that want to be public
-}
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
     claim: { "@type": "" },
@@ -82,232 +54,6 @@ export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCr
     issuedAt: "",
     issuer: "",
   };
-
-// a summary record; the VC is found the fullClaim field
-export interface GiveSummaryRecord {
-  agentDid: string;
-  amount: number;
-  amountConfirmed: number;
-  description: string;
-  fullClaim: GiveVerifiableCredential;
-  fulfillsHandleId: string;
-  fulfillsPlanHandleId?: string;
-  fulfillsType?: string;
-  handleId: string;
-  issuedAt: string;
-  issuerDid: string;
-  jwtId: string;
-  providerPlanHandleId?: string;
-  recipientDid: string;
-  unit: string;
-}
-
-// a summary record; the VC is found the fullClaim field
-export interface OfferSummaryRecord {
-  amount: number;
-  amountGiven: number;
-  amountGivenConfirmed: number;
-  fullClaim: OfferVerifiableCredential;
-  fulfillsPlanHandleId: string;
-  handleId: string;
-  issuerDid: string;
-  jwtId: string;
-  nonAmountGivenConfirmed: number;
-  objectDescription: string;
-  offeredByDid: string;
-  recipientDid: string;
-  requirementsMet: boolean;
-  unit: string;
-  validThrough: string;
-}
-
-export interface OfferToPlanSummaryRecord extends OfferSummaryRecord {
-  planName: string;
-}
-
-// a summary record; the VC is not currently part of this record
-export interface PlanSummaryRecord {
-  agentDid?: string; // optional, if the issuer wants someone else to manage as well
-  description: string;
-  endTime?: string;
-  fulfillsPlanHandleId: string;
-  handleId: string;
-  image?: string;
-  issuerDid: string;
-  locLat?: number;
-  locLon?: number;
-  name?: string;
-  startTime?: string;
-  url?: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id4
-export interface GiveVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded, eg. in an Agree
-  "@type": "GiveAction";
-  agent?: { identifier: string };
-  description?: string;
-  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
-  identifier?: string;
-  image?: string;
-  object?: { amountOfThisGood: number; unitCode: string };
-  provider?: GenericVerifiableCredential; // typically @type & identifier
-  recipient?: { identifier: string };
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id8
-export interface OfferVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string; // optional when embedded... though it doesn't make sense to agree to an offer
-  "@type": "Offer";
-  description?: string; // conditions for the offer
-  includesObject?: { amountOfThisGood: number; unitCode: string };
-  itemOffered?: {
-    description?: string; // description of the item
-    isPartOf?: { identifier?: string; lastClaimId?: string; "@type"?: string };
-  };
-  offeredBy?: { identifier: string };
-  recipient?: { identifier: string };
-  validThrough?: string;
-}
-
-// Note that previous VCs may have additional fields.
-// https://endorser.ch/doc/html/transactions.html#id7
-export interface PlanVerifiableCredential extends GenericVerifiableCredential {
-  "@context": "https://schema.org";
-  "@type": "PlanAction";
-  name: string;
-  agent?: { identifier: string };
-  description?: string;
-  identifier?: string;
-  lastClaimId?: string;
-  location?: {
-    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
-  };
-}
-
-/**
- * Represents data about a project
- *
- * @deprecated
- * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
- **/
-export interface PlanData {
-  /**
-   * Description of the project
-   **/
-  description: string;
-  /**
-   * URL referencing information about the project
-   **/
-  handleId: string;
-  image?: string;
-  /**
-   * The DID of the issuer
-   */
-  issuerDid: string;
-  /**
-   * Name of the project
-   **/
-  name: string;
-  /**
-   * The identifier of the project record -- different from jwtId
-   * (Maybe we should use the jwtId to iterate through the records instead.)
-   **/
-  rowId?: string;
-}
-
-export interface EndorserRateLimits {
-  doneClaimsThisWeek: string;
-  doneRegistrationsThisMonth: string;
-  maxClaimsPerWeek: string;
-  maxRegistrationsPerMonth: string;
-  nextMonthBeginDateTime: string;
-  nextWeekBeginDateTime: string;
-}
-
-export interface ImageRateLimits {
-  doneImagesThisWeek: string;
-  maxImagesPerWeek: string;
-  nextWeekBeginDateTime: string;
-}
-
-export interface VerifiableCredential {
-  exp?: number;
-  iat: number;
-  iss: string;
-  vc: {
-    "@context": string[];
-    type: string[];
-    credentialSubject: VerifiableCredentialSubject;
-  };
-}
-
-// similar to GenericVerifiableCredential... maybe replace that one
-export interface VerifiableCredentialSubject {
-  "@context": string;
-  "@type": string;
-  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-export interface WorldProperties {
-  startTime?: string;
-  endTime?: string;
-}
-
-// AKA Registration & RegisterAction
-export interface RegisterVerifiableCredential {
-  "@context": typeof SCHEMA_ORG_CONTEXT;
-  "@type": "RegisterAction";
-  agent: { identifier: string };
-  identifier?: string; // used for invites (when participant ID isn't known)
-  object: string;
-  participant?: { identifier: string }; // used when person is known (not an invite)
-}
-
-// now for some of the error & other wrapper types
-
-export interface ResultWithType {
-  type: string;
-}
-
-export interface SuccessResult extends ResultWithType {
-  type: "success";
-  response: AxiosResponse<ClaimResult>;
-}
-
-export interface ErrorResponse {
-  error?: {
-    message?: string;
-  };
-}
-
-export interface InternalError {
-  error: string; // for system logging
-  userMessage?: string; // for user display
-}
-
-export interface ErrorResult extends ResultWithType {
-  type: "error";
-  error: InternalError;
-}
-
-export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
-
-/**
- * This is similar to Contact but it grew up in different logic paths.
- * We may want to change this to be a Contact.
- */
-export interface UserInfo {
-  did: string;
-  name: string;
-  publicEncKey: string;
-  registered: boolean;
-  profileImageUrl?: string;
-  nextPublicEncKeyHash?: string;
-}
-
 // This is used to check for hidden info.
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
diff --git a/src/main.capacitor.ts b/src/main.capacitor.ts
index f98ac10..bc66214 100644
--- a/src/main.capacitor.ts
+++ b/src/main.capacitor.ts
@@ -3,17 +3,17 @@
  * @description Initializes the application for Capacitor platform (iOS/Android)
  * @author Matthew Raymer
  * @version 0.4.4
- * 
+ *
  * Process Flow:
  * 1. Initialization
  *    - Logs start of initialization
  *    - Logs current platform
  *    - Initializes core application via main.common
- * 
+ *
  * 2. Error Handling Setup
  *    - Registers global unhandled promise rejection handler
  *    - Routes API errors to error handling system
- * 
+ *
  * 3. Deep Linking Configuration
  *    - Registers URL scheme handler (timesafari://)
  *    - Supports 11 parameterized routes:
@@ -28,17 +28,17 @@
  *      * offer-details
  *      * project
  *      * userProfile
- * 
+ *
  * 4. Application Mounting
  *    - Mounts Vue application to DOM
  *    - Logs completion of mounting process
- * 
+ *
  * Security Measures:
  * - URL validation before processing
  * - Type-safe error handling
  * - Parameterized route pattern matching
  * - Comprehensive error logging
- * 
+ *
  * @example Deep Link Format
  * timesafari://<route>/<parameter>
  * timesafari://claim/01JMAAFZRNSRTQ0EBSD70A8E1H
@@ -66,16 +66,16 @@ window.addEventListener("unhandledrejection", (event) => {
  * Handles deep link routing for the application
  * Processes URLs in the format timesafari://<route>/<param>
  * Maps incoming deep links to corresponding router paths with parameters
- * 
+ *
  * @param {Object} data - Deep link data object
  * @param {string} data.url - The full deep link URL to process
  * @returns {Promise<void>}
- * 
+ *
  * @example
  * // Handles URLs like:
  * // timesafari://claim/01JMAAFZRNSRTQ0EBSD70A8E1H
  * // timesafari://project/abc123
- * 
+ *
  * @throws {Error} If URL format is invalid
  */
 const handleDeepLink = async (data: { url: string }) => {
@@ -95,17 +95,17 @@ const handleDeepLink = async (data: { url: string }) => {
 
     // Define supported parameterized routes and their regex patterns
     const paramRoutes = {
-      'claim-add-raw': /^claim-add-raw\/(.+)$/,
-      'claim-cert': /^claim-cert\/(.+)$/,
-      'claim': /^claim\/(.+)$/,
-      'confirm-gift': /^confirm-gift\/(.+)$/,
-      'contact-edit': /^contact-edit\/(.+)$/,
-      'contact-import': /^contact-import\/(.+)$/,
-      'did': /^did\/(.+)$/,
-      'invite-one-accept': /^invite-one-accept\/(.+)$/,
-      'offer-details': /^offer-details\/(.+)$/,
-      'project': /^project\/(.+)$/,
-      'userProfile': /^userProfile\/(.+)$/
+      "claim-add-raw": /^claim-add-raw\/(.+)$/,
+      "claim-cert": /^claim-cert\/(.+)$/,
+      claim: /^claim\/(.+)$/,
+      "confirm-gift": /^confirm-gift\/(.+)$/,
+      "contact-edit": /^contact-edit\/(.+)$/,
+      "contact-import": /^contact-import\/(.+)$/,
+      did: /^did\/(.+)$/,
+      "invite-one-accept": /^invite-one-accept\/(.+)$/,
+      "offer-details": /^offer-details\/(.+)$/,
+      project: /^project\/(.+)$/,
+      userProfile: /^userProfile\/(.+)$/,
     };
 
     // Match route pattern and extract parameter
diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 4e45b59..9daacf3 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -39,12 +39,12 @@
               :to="{ name: 'contact-qr' }"
               class="bg-slate-500 text-white px-1.5 py-1 rounded-md"
             >
-              <fa icon="qrcode" class="fa-fw text-xl"></fa>
+              <font-awesome icon="qrcode" class="fa-fw text-xl"></font-awesome>
             </router-link>
           </span>
           {{ givenName }}
           <router-link :to="{ name: 'new-edit-account' }">
-            <fa icon="pen" class="text-xs text-blue-500 ml-2 mb-1"></fa>
+            <font-awesome icon="pen" class="text-xs text-blue-500 ml-2 mb-1"></font-awesome>
           </router-link>
         </h2>
       </div>
@@ -73,7 +73,7 @@
             class="inline-block align-text-bottom border border-slate-300 rounded"
             @click="showLargeIdenticonUrl = profileImageUrl"
           />
-          <fa
+          <font-awesome
             icon="trash-can"
             @click="confirmDeleteImage"
             class="text-red-500 fa-fw ml-8 mt-8 w-12 h-12"
@@ -81,11 +81,11 @@
         </span>
         <div v-else class="text-center">
           <div class @click="openImageDialog()">
-            <fa
+            <font-awesome
               icon="image-portrait"
               class="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-2 rounded-l"
             />
-            <fa
+            <font-awesome
               icon="camera"
               class="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-2 rounded-r"
             />
@@ -140,7 +140,7 @@
           "
           class="ml-2"
         >
-          <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+          <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
         </button>
         <span v-show="showDidCopy">Copied</span>
       </div>
@@ -185,7 +185,7 @@
         <!-- label -->
         <div>
           Reminder Notification
-          <fa
+          <font-awesome
             icon="question-circle"
             class="text-slate-400 fa-fw ml-2 cursor-pointer"
             @click.stop="showReminderNotificationInfo"
@@ -214,7 +214,7 @@
         <!-- label -->
         <div>
           New Activity Notification
-          <fa
+          <font-awesome
             icon="question-circle"
             class="text-slate-400 fa-fw ml-2 cursor-pointer"
             @click.stop="showNewActivityNotificationInfo"
@@ -268,12 +268,12 @@
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
       <div v-if="loadingProfile" class="text-center mb-2">
-        <fa icon="spinner" class="fa-spin text-slate-400"></fa> Loading
+        <font-awesome icon="spinner" class="fa-spin text-slate-400"></font-awesome> Loading
         profile...
       </div>
       <div v-else class="flex items-center mb-2">
         <span class="font-bold">Public Profile</span>
-        <fa
+        <font-awesome
           icon="circle-info"
           class="text-slate-400 fa-fw ml-2 cursor-pointer"
           @click="showProfileInfo"
@@ -363,7 +363,7 @@
       <div class="mb-2 font-bold">Usage Limits</div>
       <!-- show spinner if loading limits -->
       <div v-if="loadingLimits" class="text-center">
-        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
+        Checking&hellip; <font-awesome icon="spinner" class="fa-spin"></font-awesome>
       </div>
       <div class="mb-4 text-center">
         {{ limitsMessage }}
@@ -454,7 +454,7 @@
           </li>
           <li class="list-disc list-outside ml-4">
             On Android: Choose "Open" and then share
-            <fa icon="share-nodes" class="fa-fw" />
+            <font-awesome icon="share-nodes" class="fa-fw" />
             to your prefered place.
           </li>
         </ul>
@@ -494,7 +494,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showB64Copy">Copied</span>
         </div>
@@ -510,7 +510,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showPubCopy">Copied</span>
         </div>
@@ -530,7 +530,7 @@
             "
             class="ml-2"
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showDerCopy">Copied</span>
         </div>
@@ -631,7 +631,7 @@
             class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
             @click="onClickSaveApiServer()"
           >
-            <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+            <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
           </button>
           <button
             class="px-3 rounded bg-slate-200 border border-slate-400"
@@ -708,7 +708,7 @@
           class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
           @click="onClickSavePushServer()"
         >
-          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+          <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
         </button>
         <button
           class="px-3 rounded bg-slate-200 border border-slate-400"
@@ -747,7 +747,7 @@
           class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
           @click="onClickSavePartnerServer()"
         >
-          <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
+          <font-awesome icon="floppy-disk" class="fa-fw" color="white"></font-awesome>
         </button>
         <button
           class="px-3 rounded bg-slate-200 border border-slate-400"
diff --git a/src/views/ClaimAddRawView.vue b/src/views/ClaimAddRawView.vue
index c21144c..a33caab 100644
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         Raw Claim
       </h1>
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index ca467f5..2a2ebe4 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         Verifiable Claim Details
       </h1>
@@ -36,7 +36,7 @@
                 title="Edit"
                 data-testId="editClaimButton"
               >
-                <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+                <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
             <div class="flex justify-center w-full">
@@ -45,7 +45,7 @@
                 class="text-blue-500 mt-2"
                 title="Printable Certificate"
               >
-                <fa icon="square" class="text-white bg-yellow-500 p-1" />
+                <font-awesome icon="square" class="text-white bg-yellow-500 p-1" />
               </router-link>
             </div>
             <!-- show link icon to copy this URL to the clipboard -->
@@ -56,24 +56,24 @@
                   copyToClipboard('A link to this page', window.location.href)
                 "
               >
-                <fa icon="link" class="text-slate-500" />
+                <font-awesome icon="link" class="text-slate-500" />
               </button>
             </div>
           </div>
           <div class="text-sm">
             <div data-testId="description">
-              <fa icon="message" class="fa-fw text-slate-400" />
+              <font-awesome icon="message" class="fa-fw text-slate-400" />
               {{
                 veriClaim.claim?.itemOffered?.description ||
                 veriClaim.claim?.description
               }}
             </div>
             <div>
-              <fa icon="user" class="fa-fw text-slate-400" />
+              <font-awesome icon="user" class="fa-fw text-slate-400" />
               {{ didInfo(veriClaim.issuer) }}
             </div>
             <div>
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               Recorded
               {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
@@ -177,13 +177,13 @@
       </div>
     </div>
     <div class="mt-2">
-      <fa icon="comment" class="text-slate-400" />
+      <font-awesome icon="comment" class="text-slate-400" />
       {{ issuerName }} posted that.
     </div>
     <!--
     <div>
       <router-link :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)">
-        <fa icon="file-contract" class="text-slate-400" />
+        <font-awesome icon="file-contract" class="text-slate-400" />
         <span class="ml-2 text-blue-500">Printable Certificate</span>
       </router-link>
     </div>
@@ -196,7 +196,7 @@
         class="col-span-1 block w-fit text-center text-md 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-2 rounded-md"
       >
         Affirm Delivery
-        <fa icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
+        <font-awesome icon="hand-holding-heart" class="ml-2 text-white cursor-pointer" />
       </button>
     </div>
     <GiftedDialog ref="customGiveDialog" />
@@ -216,7 +216,7 @@
           @click="confirmConfirmClaim()"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
         <h2 v-else class="font-bold uppercase text-xl mt-2">Confirmations</h2>
 
@@ -276,7 +276,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </div>
@@ -314,7 +314,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                   </div>
@@ -345,8 +345,8 @@
       @click="showVeriClaimDump = !showVeriClaimDump"
     >
       Details
-      <fa v-if="showVeriClaimDump" icon="chevron-up" />
-      <fa v-else icon="chevron-right" />
+      <font-awesome v-if="showVeriClaimDump" icon="chevron-up" />
+      <font-awesome v-else icon="chevron-right" />
     </h2>
     <div v-if="showVeriClaimDump">
       <div
@@ -408,7 +408,7 @@
           class="list-disc p-4"
         >
           <div class="text-sm">
-            <fa icon="minus" class="fa-fw" />
+            <font-awesome icon="minus" class="fa-fw" />
             The {{ visibleDidPath }} is visible to:
           </div>
           <div class="ml-12 p-1">
@@ -427,7 +427,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                        <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                       </a>
                     </span>
                     <span v-if="veriClaim.publicUrls?.[visDid]"
@@ -436,7 +436,7 @@
                         target="_blank"
                         class="text-blue-500"
                       >
-                        <fa icon="globe" class="fa-fw" />
+                        <font-awesome icon="globe" class="fa-fw" />
                         {{
                           veriClaim.publicUrls[visDid].substring(
                             veriClaim.publicUrls[visDid].indexOf("//") + 2,
@@ -476,7 +476,7 @@
           class="text-blue-500 cursor-pointer"
           @click="showFullClaim(veriClaim.id as string)"
         >
-          <fa icon="file-lines" class="fa-fw" />
+          <font-awesome icon="file-lines" class="fa-fw" />
           Load Full Claim Details
         </button>
       </div>
@@ -492,8 +492,8 @@
         target="_blank"
         class="text-blue-500 cursor-pointer"
       >
-        <fa icon="file-lines" class="fa-fw" />
-        <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
+        <font-awesome icon="file-lines" class="fa-fw" />
+        <font-awesome icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
         View on the Public Server
       </a>
     </div>
diff --git a/src/views/ConfirmContactView.vue b/src/views/ConfirmContactView.vue
index 4e15c57..eea5f1c 100644
--- a/src/views/ConfirmContactView.vue
+++ b/src/views/ConfirmContactView.vue
@@ -8,7 +8,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
 
         Confirm Contact
diff --git a/src/views/ConfirmGiftView.vue b/src/views/ConfirmGiftView.vue
index 85716ac..0e8c7aa 100644
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -11,7 +11,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         <span
           v-if="
@@ -44,7 +44,7 @@
           @click="confirmConfirmClaim()"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
         <button
           v-else
@@ -52,7 +52,7 @@
           class="col-span-1 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-4 py-2 rounded-md"
         >
           Confirm
-          <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
+          <font-awesome icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
       </div>
 
@@ -62,26 +62,26 @@
           <div class="overflow-hidden">
             <div class="text-sm">
               <div>
-                <fa icon="arrow-left" class="fa-fw text-slate-400" />
+                <font-awesome icon="arrow-left" class="fa-fw text-slate-400" />
                 {{ giverName }}
               </div>
               <div class="ml-6">gave</div>
               <div v-if="giveDetails.amount">
-                <fa icon="hand-holding-dollar" class="fa-fw text-slate-400" />
+                <font-awesome icon="hand-holding-dollar" class="fa-fw text-slate-400" />
                 {{ displayAmount(giveDetails.unit, giveDetails.amount) }}
               </div>
               <div v-if="giveDetails.description">
-                <fa icon="message" class="fa-fw text-slate-400" />
+                <font-awesome icon="message" class="fa-fw text-slate-400" />
                 {{ giveDetails.amount ? "and:" : "" }}
                 {{ giveDetails.description }}
               </div>
               <div class="ml-6">to</div>
               <div>
-                <fa icon="arrow-right" class="fa-fw text-slate-400" />
+                <font-awesome icon="arrow-right" class="fa-fw text-slate-400" />
                 {{ recipientName }}
               </div>
               <div>
-                <fa icon="calendar" class="fa-fw text-slate-400" />
+                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                 on
                 {{ giveDetails.issuedAt.substring(0, 10) }}
               </div>
@@ -99,7 +99,7 @@
                   target="_blank"
                 >
                   This fulfills a bigger plan
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </router-link>
               </div>
               <!-- if there's another, it's probably fulfilling an offer, too -->
@@ -125,7 +125,7 @@
                       giveDetails?.fulfillsType || "",
                     )
                   }}
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </router-link>
               </div>
             </div>
@@ -133,7 +133,7 @@
         </div>
       </div>
       <div class="mt-2">
-        <fa icon="comment" class="text-slate-400" />
+        <font-awesome icon="comment" class="text-slate-400" />
         {{ issuerName }} posted that.
       </div>
 
@@ -185,7 +185,7 @@
                             )
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                     </div>
@@ -228,7 +228,7 @@
                             )
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                     </div>
@@ -260,8 +260,8 @@
         @click="showVeriClaimDump = !showVeriClaimDump"
       >
         Details
-        <fa v-if="showVeriClaimDump" icon="chevron-up" />
-        <fa v-else icon="chevron-right" />
+        <font-awesome v-if="showVeriClaimDump" icon="chevron-up" />
+        <font-awesome v-else icon="chevron-right" />
       </h2>
       <div v-if="showVeriClaimDump">
         <div
@@ -323,7 +323,7 @@
             class="list-disc p-4"
           >
             <div class="text-sm">
-              <fa icon="minus" class="fa-fw" />
+              <font-awesome icon="minus" class="fa-fw" />
               The {{ visibleDidPath }} is visible to:
             </div>
             <div class="ml-12 p-1">
@@ -342,12 +342,12 @@
                             copyToClipboard('The DID of ' + visDid, visDid)
                           "
                         >
-                          <fa icon="copy" class="text-slate-400 fa-fw" />
+                          <font-awesome icon="copy" class="text-slate-400 fa-fw" />
                         </button>
                       </span>
                       <span v-if="veriClaim.publicUrls?.[visDid]"
                         >, found at
-                        <fa icon="globe" class="fa-fw text-slate-400" />
+                        <font-awesome icon="globe" class="fa-fw text-slate-400" />
                         <a
                           :href="veriClaim.publicUrls?.[visDid]"
                           class="text-blue-500"
@@ -375,7 +375,7 @@
             @click="showClaimPage(veriClaim.id)"
             class="text-blue-500 cursor-pointer"
           >
-            <fa icon="file-lines" />
+            <font-awesome icon="file-lines" />
             See All Generic Info
           </a>
         </div>
@@ -385,7 +385,7 @@
             class="text-blue-500 cursor-pointer"
             :href="urlForNewGive"
           >
-            <fa icon="file-lines" />
+            <font-awesome icon="file-lines" />
             Record a Give Similar to the Original
           </a>
         </div>
@@ -397,7 +397,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
   </section>
 </template>
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index 00f3415..9ab8cc8 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -11,7 +11,7 @@
         <router-link
           :to="{ name: 'contacts' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
       </h1>
 
@@ -59,10 +59,10 @@
               <div class="font-bold">
                 {{ displayAmount(record.unit, record.amount) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                  <font-awesome icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
                 <button v-else @click="confirm(record)" title="Unconfirmed">
-                  <fa icon="circle" class="text-blue-600 fa-fw" />
+                  <font-awesome icon="circle" class="text-blue-600 fa-fw" />
                 </button>
               </div>
               <div class="italic text-xs sm:text-sm text-slate-500">
@@ -72,10 +72,10 @@
           </td>
           <td class="p-1">
             <span v-if="record.agentDid == contact?.did">
-              <fa icon="arrow-left" class="text-slate-400 fa-fw" />
+              <font-awesome icon="arrow-left" class="text-slate-400 fa-fw" />
             </span>
             <span v-else>
-              <fa icon="arrow-right" class="text-slate-400 fa-fw" />
+              <font-awesome icon="arrow-right" class="text-slate-400 fa-fw" />
             </span>
           </td>
           <td class="p-1">
@@ -83,14 +83,14 @@
               <div class="font-bold">
                 {{ displayAmount(record.unit, record.amount) }}
                 <span v-if="record.amountConfirmed" title="Confirmed">
-                  <fa icon="circle-check" class="text-green-600 fa-fw" />
+                  <font-awesome icon="circle-check" class="text-green-600 fa-fw" />
                 </span>
                 <button
                   v-else
                   @click="cannotConfirmMessage()"
                   title="Unconfirmed"
                 >
-                  <fa icon="circle" class="text-slate-600 fa-fw" />
+                  <font-awesome icon="circle" class="text-slate-600 fa-fw" />
                 </button>
               </div>
               <div class="italic text-xs sm:text-sm text-slate-500">
diff --git a/src/views/ContactEditView.vue b/src/views/ContactEditView.vue
index 53fb11a..e140c29 100644
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -10,7 +10,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </button>
         {{ contact.name || AppString.NO_CONTACT_NAME }}
       </h1>
@@ -69,7 +69,7 @@
             @click="toggleDropdown(index)"
             class="px-2 py-1 bg-gray-200 rounded-md"
           >
-            <fa icon="caret-down" class="fa-fw" />
+            <font-awesome icon="caret-down" class="fa-fw" />
           </button>
           <div
             v-if="dropdownIndex === index"
@@ -102,11 +102,11 @@
           placeholder="Number, email, etc."
         />
         <button @click="removeContactMethod(index)" class="ml-2 text-red-500">
-          <fa icon="trash-can" class="fa-fw" />
+          <font-awesome icon="trash-can" class="fa-fw" />
         </button>
       </div>
       <button @click="addContactMethod" class="mt-2">
-        <fa
+        <font-awesome
           icon="plus"
           class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full"
         />
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 13e8fa8..3d1f42a 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -9,7 +9,7 @@
         <router-link
           :to="{ name: 'home' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
         Given by...
       </h1>
@@ -33,7 +33,7 @@
               @click="openDialog()"
               class="block w-full text-center text-sm 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-1.5 rounded-md"
             >
-              <fa icon="gift" class="fa-fw"></fa>
+              <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
           </span>
         </h2>
@@ -58,7 +58,7 @@
               @click="openDialog(contact)"
               class="block w-full text-center text-sm 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-1.5 rounded-md"
             >
-              <fa icon="gift" class="fa-fw"></fa>
+              <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
           </span>
         </h2>
diff --git a/src/views/ContactImportView.vue b/src/views/ContactImportView.vue
index 27cc28a..fa7a219 100644
--- a/src/views/ContactImportView.vue
+++ b/src/views/ContactImportView.vue
@@ -7,7 +7,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -17,7 +17,7 @@
     </h1>
 
     <div v-if="checkingImports" class="text-center">
-      <fa icon="spinner" class="animate-spin" />
+      <font-awesome icon="spinner" class="animate-spin" />
     </div>
     <div v-else>
       <span
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 349c4fa..013cff0 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -10,7 +10,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
diff --git a/src/views/ContactScanView.vue b/src/views/ContactScanView.vue
index 7a8a87d..e4fd2cd 100644
--- a/src/views/ContactScanView.vue
+++ b/src/views/ContactScanView.vue
@@ -7,7 +7,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
+          ><font-awesome icon="chevron-left" class="fa-fw"></fa
         ></router-link>
 
         Scan Contact
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 4df8c67..ccfe405 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -28,21 +28,21 @@
           :to="{ name: 'invite-one' }"
           class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa icon="envelope-open-text" class="fa-fw text-2xl" />
+          <font-awesome icon="envelope-open-text" class="fa-fw text-2xl" />
         </router-link>
 
         <button
           @click="showOnboardMeetingDialog()"
           class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
-          <fa icon="chair" class="fa-fw text-2xl" />
+          <font-awesome icon="chair" class="fa-fw text-2xl" />
         </button>
       </span>
       <span v-else class="flex">
         <span
           class="flex items-center 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-1.5 py-1 mr-1 rounded-md"
         >
-          <fa
+          <font-awesome
             icon="envelope-open-text"
             class="fa-fw text-2xl"
             @click="
@@ -56,7 +56,7 @@
         <span
           class="flex items-center 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-1.5 py-1 mr-1 rounded-md"
         >
-          <fa
+          <font-awesome
             icon="chair"
             class="fa-fw text-2xl"
             @click="
@@ -73,7 +73,7 @@
         :to="{ name: 'contact-qr' }"
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
       >
-        <fa icon="qrcode" class="fa-fw text-2xl" />
+        <font-awesome icon="qrcode" class="fa-fw text-2xl" />
       </router-link>
 
       <textarea
@@ -86,7 +86,7 @@
         class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
         @click="onClickNewContact()"
       >
-        <fa icon="plus" class="fa-fw" />
+        <font-awesome icon="plus" class="fa-fw" />
       </button>
     </div>
 
@@ -119,7 +119,7 @@
             Copy Selections
           </button>
           <button @click="showCopySelectionsInfo()">
-            <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+            <font-awesome icon="circle-info" class="text-xl text-blue-500 ml-4" />
           </button>
         </div>
       </div>
@@ -143,7 +143,7 @@
         <span
           class="text-sm uppercase 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-1 py-1 rounded-md"
         >
-          <fa icon="file-lines" class="fa-fw" />
+          <font-awesome icon="file-lines" class="fa-fw" />
         </span>
         <br />
         <button
@@ -159,7 +159,7 @@
                 ? "Confirmed Amounts"
                 : "Unconfirmed Amounts"
           }}
-          <fa icon="left-right" class="fa-fw" />
+          <font-awesome icon="left-right" class="fa-fw" />
         </button>
       </div>
     </div>
@@ -215,7 +215,7 @@
                   }"
                   title="See more about this person"
                 >
-                  <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+                  <font-awesome icon="circle-info" class="text-xl text-blue-500 ml-4" />
                 </router-link>
 
                 <span class="ml-4 text-sm overflow-hidden">{{
@@ -286,7 +286,7 @@
                 class="text-sm 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.5 rounded-md border border-slate-400"
                 title="See more given activity"
               >
-                <fa icon="file-lines" class="fa-fw" />
+                <font-awesome icon="file-lines" class="fa-fw" />
               </router-link>
             </div>
           </div>
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index 4ac0149..4daf52d 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -12,7 +12,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Identifier Details
       </h1>
@@ -29,7 +29,7 @@
           <router-link
             :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
           >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </router-link>
         </h2>
         <button
@@ -37,8 +37,8 @@
           class="ml-2 mr-2 mt-4"
         >
           Details
-          <fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else icon="chevron-right" class="text-blue-400" />
+          <font-awesome v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
+          <font-awesome v-else icon="chevron-right" class="text-blue-400" />
         </button>
         <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
         <pre
@@ -72,7 +72,7 @@
                 @click="confirmSetVisibility(contactFromDid, false)"
                 title="They can see you"
               >
-                <fa icon="eye" class="fa-fw" />
+                <font-awesome icon="eye" class="fa-fw" />
               </button>
               <button
                 v-else-if="
@@ -82,7 +82,7 @@
                 @click="confirmSetVisibility(contactFromDid, true)"
                 title="They cannot see you"
               >
-                <fa icon="eye-slash" class="fa-fw" />
+                <font-awesome icon="eye-slash" class="fa-fw" />
               </button>
 
               <button
@@ -91,7 +91,7 @@
                 title="Check Visibility"
                 v-if="contactFromDid?.did !== activeDid"
               >
-                <fa icon="rotate" class="fa-fw" />
+                <font-awesome icon="rotate" class="fa-fw" />
               </button>
             </div>
 
@@ -101,12 +101,12 @@
               v-if="contactFromDid?.did !== activeDid"
               title="Registration"
             >
-              <fa
+              <font-awesome
                 v-if="contactFromDid?.registered"
                 icon="person-circle-check"
                 class="fa-fw"
               />
-              <fa v-else icon="person-circle-question" class="fa-fw" />
+              <font-awesome v-else icon="person-circle-question" class="fa-fw" />
             </button>
           </div>
 
@@ -115,7 +115,7 @@
             class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
             title="Delete"
           >
-            <fa icon="trash-can" class="fa-fw" />
+            <font-awesome icon="trash-can" class="fa-fw" />
           </button>
         </div>
         <div v-if="!contactFromDid?.profileImageUrl">
@@ -164,7 +164,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
     <!-- Results List -->
     <div v-if="claims.length > 0" class="mt-4">
@@ -194,7 +194,7 @@
             </span>
             <span class="col-span-1">
               <a @click="onClickLoadClaim(claim.id)" class="cursor-pointer">
-                <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+                <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
               </a>
             </span>
           </div>
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index 41cb4f0..dd72de9 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -28,7 +28,7 @@
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
         @click="searchSelected()"
       >
-        <fa icon="magnifying-glass" class="fa-fw"></fa>
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
       </button>
     </div>
 
@@ -152,7 +152,7 @@
           class="ml-2 mt-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
         >
-          <fa icon="location-dot" class="fa-fw" />
+          <font-awesome icon="location-dot" class="fa-fw" />
           Select a {{ searchBox ? "Different" : "" }} Location for Nearby Search
         </button>
       </div>
@@ -182,7 +182,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
     <div
       v-else-if="projects.length === 0 && userProfiles.length === 0"
@@ -225,7 +225,7 @@
               <div class="grow">
                 <h2 class="text-base font-semibold">{{ project.name }}</h2>
                 <div class="text-sm">
-                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                   {{
                     didInfo(
                       project.issuerDid,
@@ -253,7 +253,7 @@
             >
               <div class="grow">
                 <div class="text-sm">
-                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                   {{
                     didInfo(
                       profile.issuerDid,
@@ -273,7 +273,7 @@
                   v-if="isAnywhereActive && profile.locLat && profile.locLon"
                   class="mt-1 text-xs text-slate-500"
                 >
-                  <fa icon="location-dot" class="fa-fw"></fa>
+                  <font-awesome icon="location-dot" class="fa-fw"></font-awesome>
                   {{
                     (profile.locLat > 0 ? "North" : "South") +
                     " in " +
diff --git a/src/views/GiftedDetailsView.vue b/src/views/GiftedDetailsView.vue
index c26693a..7da3f0e 100644
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -13,7 +13,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="cancelBack()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -59,7 +59,7 @@
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
         @click="amountInput === '0' ? null : decrement()"
       >
-        <fa icon="chevron-left" />
+        <font-awesome icon="chevron-left" />
       </div>
       <input
         type="number"
@@ -70,7 +70,7 @@
         class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
         @click="increment()"
       >
-        <fa icon="chevron-right" />
+        <font-awesome icon="chevron-right" />
       </div>
     </div>
 
@@ -79,14 +79,14 @@
         <a :href="imageUrl" target="_blank">
           <img :src="imageUrl" class="h-24 rounded-xl" />
         </a>
-        <fa
+        <font-awesome
           icon="trash-can"
           @click="confirmDeleteImage"
           class="text-red-500 fa-fw ml-8 mt-10"
         />
       </span>
       <span v-else>
-        <fa
+        <font-awesome
           icon="camera"
           class="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-2 rounded-md"
           @click="openImageDialog"
@@ -105,7 +105,7 @@
             class="h-6 w-6 mr-2"
             v-model="providedByGiver"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -117,7 +117,7 @@
                 : "No named individual gave."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!giverDid || providedByProject"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -132,7 +132,7 @@
             class="h-6 w-6 mr-2"
             v-model="providedByProject"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -144,7 +144,7 @@
                 : "This was not provided by a project."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!providerProjectId || providedByGiver"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -154,7 +154,7 @@
       </div>
 
       <div class="flex-shrink flex justify-center items-center">
-        <fa icon="arrow-right" class="fa-fw h-7" />
+        <font-awesome icon="arrow-right" class="fa-fw h-7" />
       </div>
 
       <!-- Third Column for Recipient -->
@@ -166,7 +166,7 @@
             class="h-6 w-6 mr-2"
             v-model="givenToRecipient"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -178,7 +178,7 @@
                 : "No individual benefitted."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!recipientDid || givenToProject"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -193,7 +193,7 @@
             class="h-6 w-6 mr-2"
             v-model="givenToProject"
           />
-          <fa
+          <font-awesome
             v-else
             icon="square"
             class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -205,7 +205,7 @@
                 : "No project benefitted."
             }}
           </label>
-          <fa
+          <font-awesome
             v-if="!fulfillsProjectId || givenToRecipient"
             icon="info-circle"
             class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
@@ -236,7 +236,7 @@
 
     <p class="text-center mb-2 mt-6 italic">
       Sign & Send to publish to the world
-      <fa
+      <font-awesome
         icon="circle-info"
         class="pl-2 text-blue-500 cursor-pointer"
         @click="explainData()"
diff --git a/src/views/HelpNotificationTypesView.vue b/src/views/HelpNotificationTypesView.vue
index 7744d9c..36e2ce3 100644
--- a/src/views/HelpNotificationTypesView.vue
+++ b/src/views/HelpNotificationTypesView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index 3e15320..2538233 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -140,7 +140,7 @@
           class="text-blue-500"
           target="_blank"
         >
-          here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+          here <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
         </a>
       </div>
 
@@ -186,7 +186,7 @@
             class="text-blue-500"
             target="_blank"
           >
-            here <fa icon="arrow-up-right-from-square" class="fa-fw" />
+            here <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
           </a>
         </div>
       </div>
@@ -199,7 +199,7 @@
         <p>
           Of course, you'll want to back up all your data first -- all seeds as
           well as the contacts & settings -- on the Profile
-          <fa icon="circle-user" /> page.
+          <font-awesome icon="circle-user" /> page.
         </p>
         <p>
           Here are instructions to uninstall the app and clear out caches and storage.
diff --git a/src/views/HelpOnboardingView.vue b/src/views/HelpOnboardingView.vue
index 1b8f7e5..f32d769 100644
--- a/src/views/HelpOnboardingView.vue
+++ b/src/views/HelpOnboardingView.vue
@@ -19,13 +19,13 @@
         :to="{ name: 'invite-one' }"
         class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
       >
-        <fa icon="envelope-open-text" class="fa-fw text-xl"
+        <font-awesome icon="envelope-open-text" class="fa-fw text-xl"
       /></router-link>
     </p>
     <p>Then watch that page to see when they accept their invite.</p>
     <p>
-      (That page is also reachable from the Contacts <fa icon="users" /> page
-      though the invitation <fa icon="envelope-open-text" /> icon.)
+      (That page is also reachable from the Contacts <font-awesome icon="users" /> page
+      though the invitation <font-awesome icon="envelope-open-text" /> icon.)
     </p>
 
     <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
@@ -35,7 +35,7 @@
       <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
       <div>
         <p>
-          Exporting backups (from the Account <fa icon="circle-user" /> screen)
+          Exporting backups (from the Account <font-awesome icon="circle-user" /> screen)
           is important for the case where they lose their device. This is
           especially true for the Identifier Seed: that is theirs and and theirs
           alone, and currently nobody else can recover it if they lose it. The
@@ -54,7 +54,7 @@
       <h1 class="font-bold text-xl">Add Contact & Register</h1>
       <p>
         You share even more information such as your picture and name when
-        you share with your QR code at these links: <fa icon="qrcode" />
+        you share with your QR code at these links: <font-awesome icon="qrcode" />
       </p>
       <p>
         Scanning
@@ -70,14 +70,14 @@
         </p>
         <p>
           2) Scan their QR, or have them tap on it to copy their info and send it to you.
-          Then you can add them to your Contacts <fa icon="users" />
+          Then you can add them to your Contacts <font-awesome icon="users" />
         </p>
         <p>
-          3) You can register them at their info page <fa icon="circle-info" />
-          and click on the register button <fa icon="person-circle-question" />
+          3) You can register them at their info page <font-awesome icon="circle-info" />
+          and click on the register button <font-awesome icon="person-circle-question" />
         </p>
         <p>
-          4) Add yourself to their Contacts <fa icon="users" />
+          4) Add yourself to their Contacts <font-awesome icon="users" />
         </p>
       </div>
 
@@ -94,7 +94,7 @@
       <h1 class="font-bold text-xl">Enable Notifications</h1>
       <div>
         <p>
-          Enable notifications from the Account page <fa icon="circle-user" />.
+          Enable notifications from the Account page <font-awesome icon="circle-user" />.
           Those notifications might show up on the device depending on your settings.
           For the most reliable habits, set an alarm or do some other ritual to record gratitude every day.
         </p>
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index ed05238..48fb8a3 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -191,7 +191,7 @@
       <h2 class="text-xl font-semibold">How do I get started?</h2>
       <p>
         Someone -- like the person who told you about this app -- needs to register you
-        on the Contacts <fa icon="users" class="fa-fw" /> page.
+        on the Contacts <font-awesome icon="users" class="fa-fw" /> page.
         If you heard about this from our outreach, feel free to contact us (below) for a chat.
         After someone registers you, you can register others.
       </p>
@@ -219,7 +219,7 @@
       </p>
       <p>
         If they are not nearby to scan QR codes, you each can tap on the QR code
-        and paste it into the text box on the Contacts <fa icon="users" class="fa-fw" /> page.
+        and paste it into the text box on the Contacts <font-awesome icon="users" class="fa-fw" /> page.
       </p>
 
       <h2 class="text-xl font-semibold">
@@ -244,7 +244,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Backup Identifier Seed" and follow the instructions.
@@ -260,7 +260,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Download Settings...". That will save a file to your
@@ -274,7 +274,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page,
             tap on your image, and save it.
           </li>
         </ul>
@@ -315,7 +315,7 @@
         </h2>
         <ul class="list-disc list-outside ml-4">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
+            Go to Your Identity <font-awesome icon="circle-user" class="fa-fw" /> page,
             click Advanced, and follow the instructions for the Contacts & Settings Database "Import".
             Beware that this will erase your existing contact & settings.
           </li>
@@ -384,7 +384,7 @@
       </h2>
       <p>
         There is an "Advanced" section at the bottom of the Profile
-        <fa icon="circle-user" /> page.
+        <font-awesome icon="circle-user" /> page.
       </p>
       <p>
         There is even more functionality in a mobile app (and more
@@ -402,8 +402,8 @@
         because they have not given you permission to see their information. Ask
         them to add you to their contact list, and ask specifically to make sure
         the eye next to your name is open like this
-        <fa icon="eye" class="fa-fw" /> and not closed like this
-        <fa icon="eye-slash" class="fa-fw" />.
+        <font-awesome icon="eye" class="fa-fw" /> and not closed like this
+        <font-awesome icon="eye-slash" class="fa-fw" />.
       </p>
       <p>
         Sometimes the reason you don't see something is because the search
@@ -444,7 +444,7 @@
         </li>
         <li>
           There may be a problem with your identity. Go to the Identity
-          <fa icon="circle-user" class="fa-fw" /> page, then "Advanced", and "Switch Identifier"
+          <font-awesome icon="circle-user" class="fa-fw" /> page, then "Advanced", and "Switch Identifier"
           and you may see helpful info there. If it shows a problem, try adding your identifier again.
         </li>
         <li>
@@ -505,7 +505,7 @@
         <ul class="list-disc list-outside ml-4">
           <li>
             If using notifications, a server stores push token data. That can be revoked at any time
-            by disabling notifications on the Profile <fa icon="circle-user" class="fa-fw" /> page.
+            by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             If sending images, a server stores them, too. They can be removed by editing the claim
@@ -538,8 +538,8 @@
           class="text-blue-500 ml-2"
         >
           bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
-          <fa v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
-          <fa v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
+          <font-awesome v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
+          <font-awesome v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
         </button>
         You can donate online via
         <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b30682a..0462d44 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -28,7 +28,7 @@
               width="30"
               style="display: inline; margin: 0 5px; vertical-align: middle"
             />and then "Add to Home Screen"
-            <fa icon="square-plus" title="Apple 'Add' icon" />
+            <font-awesome icon="square-plus" title="Apple 'Add' icon" />
             and go click on that new app.
           </span>
           <span
@@ -36,10 +36,7 @@
           >
             You should see a prompt to install, or you can click on the
             top-right dots
-            <fa
-              icon="ellipsis-vertical"
-              title="vertical ellipsis"
-              class="fa-fw"
+            <font-awesome icon="ellipsis-vertical" title="vertical ellipsis" />
             />
             and then "Install"<img
               src="../assets/help/install-android-chrome.png"
@@ -73,7 +70,7 @@
     <div class="mb-8">
       <div v-if="isCreatingIdentifier">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse" />
+          <font-awesome icon="spinner" class="fa-spin-pulse" />
           Loading&hellip;
         </p>
       </div>
@@ -119,7 +116,7 @@
                 @click="openGiftedPrompts()"
                 class="ml-2 block text-xs text-center 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-1 rounded-md"
               >
-                <fa icon="lightbulb" class="fa-fw" />
+                <font-awesome icon="lightbulb" class="fa-fw" />
               </button>
             </div>
 
@@ -181,7 +178,7 @@
         class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
         @click="openDialog()"
       >
-        <fa icon="plus" class="fa-fw" />
+        <font-awesome icon="plus" class="fa-fw" />
       </button>
     </div>
 
@@ -192,12 +189,12 @@
           Latest Activity
           <button @click="openFeedFilters()">
             <span class="text-xs text-white">
-              <fa
+              <font-awesome
                 v-if="resultsAreFiltered()"
                 icon="filter"
                 class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
               />
-              <fa
+              <font-awesome
                 v-else
                 icon="filter"
                 class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
@@ -265,7 +262,7 @@
             <div class="grid grid-cols-12">
               <span class="pt-1 col-span-1 justify-self-start">
                 <span>
-                  <fa
+                  <font-awesome
                     icon="circle-user"
                     :class="
                       computeKnownPersonIconStyleClassNames(
@@ -274,7 +271,7 @@
                     "
                     @click="toastUser('This involves your contacts.')"
                   />
-                  <fa
+                  <font-awesome
                     icon="gift"
                     class="pl-3 text-slate-500"
                     @click="toastUser('This is a gift.')"
@@ -295,7 +292,7 @@
                     :profile-image-url="record.giver.profileImageUrl"
                     class="inline-block align-middle border border-slate-300 rounded-md mr-1"
                   />
-                  <fa
+                  <font-awesome
                     v-if="
                       record.agentDid !== activeDid &&
                       record.recipientDid !== activeDid &&
@@ -319,7 +316,7 @@
                   {{ giveDescription(record) }}
                 </span>
                 <a @click="onClickLoadClaim(record.jwtId)">
-                  <fa
+                  <font-awesome
                     icon="file-lines"
                     class="pl-2 text-slate-500 cursor-pointer"
                   />
@@ -333,7 +330,7 @@
                     encodeURIComponent(record.fulfillsPlanHandleId)
                   "
                 >
-                  <fa icon="hammer" class="text-blue-500" />
+                  <font-awesome icon="hammer" class="text-blue-500" />
                 </router-link>
                 <router-link
                   v-if="record.providerPlanHandleId"
@@ -342,7 +339,7 @@
                     encodeURIComponent(record.providerPlanHandleId)
                   "
                 >
-                  <fa icon="hammer" class="text-blue-500" />
+                  <font-awesome icon="hammer" class="text-blue-500" />
                 </router-link>
               </span>
             </div>
@@ -364,7 +361,7 @@
       </InfiniteScroll>
       <div v-if="isFeedLoading">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
-          <fa icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
+          <font-awesome icon="spinner" class="fa-spin-pulse" /> Loading&hellip;
         </p>
       </div>
       <div v-if="!isFeedLoading && feedData.length === 0">
diff --git a/src/views/IdentitySwitcherView.vue b/src/views/IdentitySwitcherView.vue
index efecc93..0366d02 100644
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -8,7 +8,7 @@
         <router-link
           :to="{ name: 'account' }"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa>
+          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </router-link>
 
         Switch Identity
@@ -22,7 +22,7 @@
       v-if="activeDid && !activeDidInIdentities"
       class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4"
     >
-      <fa icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></fa>
+      <font-awesome icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></font-awesome>
       <div class="text-sm text-slate-500">
         <div class="overflow-hidden truncate">
           <b>ID:</b> <code>{{ activeDid }}</code>
@@ -45,12 +45,12 @@
             class="flex flex-grow items-center bg-slate-100 rounded-md px-4 py-3 mb-2 truncate cursor-pointer"
             @click="switchAccount(ident.did)"
           >
-            <fa
+            <font-awesome
               v-if="ident.did === activeDid"
               icon="circle-check"
               class="fa-fw text-blue-600 text-xl mr-3"
             />
-            <fa
+            <font-awesome
               v-else
               icon="circle"
               class="fa-fw text-slate-400 text-xl mr-3"
@@ -62,13 +62,13 @@
             </span>
           </div>
           <div>
-            <fa
+            <font-awesome
               v-if="ident.did === activeDid"
               icon="trash-can"
               class="text-slate-400 text-xl ml-2 mr-2 cursor-pointer"
               @click="notifyCannotDelete()"
             />
-            <fa
+            <font-awesome
               v-else
               icon="trash-can"
               class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"
diff --git a/src/views/ImportAccountView.vue b/src/views/ImportAccountView.vue
index 9ce9b35..d2067ea 100644
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left"></fa>
+          <font-awesome icon="chevron-left"></font-awesome>
         </button>
         Import Existing Identifier
       </h1>
diff --git a/src/views/ImportDerivedAccountView.vue b/src/views/ImportDerivedAccountView.vue
index 6264ca9..eaf7790 100644
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left"></fa>
+          <font-awesome icon="chevron-left"></font-awesome>
         </button>
         Derive from Existing Identity
       </h1>
@@ -30,16 +30,16 @@
           :key="dids[0]"
           @click="switchAccount(dids[0])"
         >
-          <fa
+          <font-awesome
             v-if="dids[0] == selectedArrayFirstDid"
             icon="circle"
             class="fa-fw text-blue-500 text-xl mr-3"
-          ></fa>
-          <fa
+          ></font-awesome>
+          <font-awesome
             v-else
             icon="circle"
             class="fa-fw text-slate-400 text-xl mr-3"
-          ></fa>
+          ></font-awesome>
           <span class="overflow-hidden">
             <div class="text-sm text-slate-500 truncate">
               <code>{{ dids.join(",") }}</code>
diff --git a/src/views/InviteOneAcceptView.vue b/src/views/InviteOneAcceptView.vue
index cf77d92..1ae333b 100644
--- a/src/views/InviteOneAcceptView.vue
+++ b/src/views/InviteOneAcceptView.vue
@@ -5,7 +5,7 @@
       v-if="checkingInvite"
       class="text-lg text-center font-light relative px-7"
     >
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
     <div v-else class="text-center mt-4">
       <p>That invitation did not work.</p>
diff --git a/src/views/InviteOneView.vue b/src/views/InviteOneView.vue
index 5f8f2e0..9bf16eb 100644
--- a/src/views/InviteOneView.vue
+++ b/src/views/InviteOneView.vue
@@ -9,7 +9,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -40,7 +40,7 @@
       class="fixed right-6 top-12 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="createInvite()"
     >
-      <fa icon="plus" class="fa-fw"></fa>
+      <font-awesome icon="plus" class="fa-fw"></font-awesome>
     </button>
 
     <InviteDialog ref="inviteDialog" />
@@ -106,7 +106,7 @@
               <br />
               {{ getTruncatedRedeemedBy(invite.redeemedBy) }}
               <br />
-              <fa
+              <font-awesome
                 v-if="invite.redeemedBy && !contactsRedeemed[invite.redeemedBy]"
                 icon="plus"
                 class="bg-green-600 text-white px-1 py-1 rounded-full cursor-pointer"
@@ -114,7 +114,7 @@
               />
             </td>
             <td>
-              <fa
+              <font-awesome
                 icon="trash-can"
                 class="text-red-600 text-xl ml-2 mr-2 cursor-pointer"
                 @click="deleteInvite(invite.inviteIdentifier, invite.notes)"
diff --git a/src/views/NewActivityView.vue b/src/views/NewActivityView.vue
index 47f51e1..0f48e38 100644
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -25,7 +25,7 @@
         <span class="text-lg font-medium ml-4"
           >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
         >
-        <fa
+        <font-awesome
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
           class="cursor-pointer ml-4 mr-4 text-lg"
@@ -59,7 +59,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
           <!-- New line that appears on hover or when the offer is clicked -->
           <div
@@ -87,7 +87,7 @@
           >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
           Your Projects</span
         >
-        <fa
+        <font-awesome
           v-if="newOffersToUserProjects.length > 0"
           :icon="
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
@@ -125,7 +125,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
           <!-- New line that appears on hover -->
           <div
diff --git a/src/views/NewEditAccountView.vue b/src/views/NewEditAccountView.vue
index 1529bd5..8095c90 100644
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -8,7 +8,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Edit Identity
       </h1>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index 5b1f3e0..0579bd2 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -11,7 +11,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Edit Project Idea
       </h1>
@@ -36,14 +36,14 @@
         <a :href="imageUrl" target="_blank" class="text-blue-500 ml-4">
           <img :src="imageUrl" class="h-24 rounded-xl" />
         </a>
-        <fa
+        <font-awesome
           icon="trash-can"
           @click="confirmDeleteImage"
           class="text-red-500 fa-fw ml-8 mt-10"
         />
       </span>
       <span v-else>
-        <fa
+        <font-awesome
           icon="camera"
           class="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-2 rounded-md"
           @click="openImageDialog"
@@ -181,7 +181,7 @@
       <div class="flex" @click="sendToTrustroots = !sendToTrustroots">
         <input type="checkbox" class="mr-2" v-model="sendToTrustroots" />
         <label>Send to Trustroots</label>
-        <fa
+        <font-awesome
           icon="circle-info"
           class="text-blue-500 ml-2 cursor-pointer"
           @click.stop="showNostrPartnerInfo"
@@ -191,7 +191,7 @@
       <div class="flex" @click="sendToTripHopping = !sendToTripHopping">
         <input type="checkbox" class="mr-2" v-model="sendToTripHopping" />
         <label>Send to TripHopping</label>
-        <fa icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
+        <font-awesome icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
       </div>
       -->
     </div>
@@ -230,7 +230,10 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { finalizeEvent } from "nostr-tools/lib/esm/index.js";
-import { accountFromExtendedKey, extendedKeysFromSeedWords } from "nostr-tools/lib/esm/nip06.js";
+import {
+  accountFromExtendedKey,
+  extendedKeysFromSeedWords,
+} from "nostr-tools/lib/esm/nip06.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
@@ -243,17 +246,21 @@ import {
   NotificationIface,
 } from "../constants/app";
 import { retrieveSettingsForActiveAccount } from "../db/index";
+import { PlanVerifiableCredential } from "../interfaces";
 import {
   createEndorserJwtVcFromClaim,
   getHeaders,
-  PlanVerifiableCredential,
 } from "../libs/endorserServer";
 import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
 } from "../libs/util";
-import { EventTemplate, UnsignedEvent, VerifiedEvent } from "nostr-tools/lib/esm/index.js";
-import { finalizeEvent as nostrToolsFinalizeEvent, serializeEvent } from "nostr-tools/lib/esm/index.js";
+import {
+  EventTemplate,
+  UnsignedEvent,
+  VerifiedEvent,
+} from "nostr-tools/lib/esm/index.js";
+import { serializeEvent } from "nostr-tools/lib/esm/index.js";
 
 @Component({
   components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
@@ -710,8 +717,7 @@ export default class NewEditProjectView extends Vue {
       const endorserPartnerUrl = partnerServer + "/api/partner/link";
       const timeSafariUrl = window.location.origin + "/claim/" + jwtId;
       const content = this.fullClaim.name + " - see " + timeSafariUrl;
-      const publicKeyHex =
-        accountFromExtendedKey(publicExtendedKey).publicKey;
+      const publicKeyHex = accountFromExtendedKey(publicExtendedKey).publicKey;
       const unsignedPayload: UnsignedEvent = {
         // why doesn't "...signedPayload" work?
         kind: signedPayload.kind,
diff --git a/src/views/NewIdentifierView.vue b/src/views/NewIdentifierView.vue
index 70ac2d2..a2517f5 100644
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -25,16 +25,16 @@
       <div />
       <div v-if="loading">
         <span class="text-xl">Creating...&nbsp;</span>
-        <fa
+        <font-awesome
           icon="spinner"
           class="fa-spin fa-spin-pulse"
           color="green"
           size="128"
-        ></fa>
+        ></font-awesome>
       </div>
       <div v-else>
         <span class="text-xl">Created!</span>
-        <fa
+        <font-awesome
           icon="burst"
           class="fa-beat px-12"
           color="green"
@@ -44,7 +44,7 @@
             --fa-animation-iteration-count: 1;
             --fa-beat-scale: 6;
           "
-        ></fa>
+        ></font-awesome>
       </div>
       <div />
     </div>
diff --git a/src/views/OfferDetailsView.vue b/src/views/OfferDetailsView.vue
index c22d128..21016a2 100644
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -13,7 +13,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="cancelBack()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -49,7 +49,7 @@
         class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
         @click="amountInput === '0' ? null : decrement()"
       >
-        <fa icon="chevron-left" />
+        <font-awesome icon="chevron-left" />
       </div>
       <input
         type="number"
@@ -61,7 +61,7 @@
         class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
         @click="increment()"
       >
-        <fa icon="chevron-right" />
+        <font-awesome icon="chevron-right" />
       </div>
     </div>
 
@@ -98,7 +98,7 @@
         class="h-6 w-6 mr-2"
         v-model="offeredToProject"
       />
-      <fa
+      <font-awesome
         v-else
         icon="square"
         class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@@ -120,7 +120,7 @@
         class="h-6 w-6 mr-2"
         v-model="offeredToRecipient"
       />
-      <fa
+      <font-awesome
         v-else
         icon="square"
         class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
@@ -151,7 +151,7 @@
 
     <p class="text-center mb-2 mt-6 italic">
       Sign & Send to publish to the world
-      <fa
+      <font-awesome
         icon="circle-info"
         class="pl-2 text-blue-500 cursor-pointer"
         @click="explainData()"
diff --git a/src/views/OnboardMeetingListView.vue b/src/views/OnboardMeetingListView.vue
index c95ccfc..96af4b3 100644
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -10,7 +10,7 @@
 
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center py-8">
-      <fa icon="spinner" class="fa-spin-pulse" />
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
     </div>
 
     <div v-else-if="attendingMeeting">
@@ -26,7 +26,7 @@
             class="text-red-600 hover:text-red-700 p-2"
             title="Leave Meeting"
           >
-            <fa icon="right-from-bracket" />
+            <font-awesome icon="right-from-bracket" />
           </button>
         </div>
       </div>
diff --git a/src/views/OnboardMeetingMembersView.vue b/src/views/OnboardMeetingMembersView.vue
index 4156e42..0920a4e 100644
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -13,7 +13,7 @@
       class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <!-- Error State -->
diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index f8c1c8e..e8413ee 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -21,7 +21,7 @@
             class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
             title="Edit Meeting"
           >
-            <fa icon="pen" class="fa-fw" />
+            <font-awesome icon="pen" class="fa-fw" />
             <span class="sr-only">{{
               isInCreateMode() ? "Create Meeting" : "Edit Meeting"
             }}</span>
@@ -34,7 +34,7 @@
           :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
           title="Delete Meeting"
         >
-          <fa icon="trash-can" class="fa-fw" />
+          <font-awesome icon="trash-can" class="fa-fw" />
           <span class="sr-only">{{
             isDeleting ? "Deleting..." : "Delete Meeting"
           }}</span>
@@ -204,7 +204,7 @@
         class="inline-block text-blue-600"
         target="_blank"
       >
-        &bull; Open shortcut page for members <fa icon="external-link" />
+        &bull; Open shortcut page for members <font-awesome icon="external-link" />
       </router-link>
 
       <MembersList
@@ -217,7 +217,7 @@
 
     <div v-else-if="isLoading">
       <div class="flex justify-center items-center h-full">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
     </div>
   </section>
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 5fc0acd..78a776e 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -13,7 +13,7 @@
             @click="$router.go(-1)"
             class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           >
-            <fa icon="chevron-left" class="fa-fw"></fa>
+            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
           </button>
           Project Idea
         </h1>
@@ -25,7 +25,7 @@
             title="Edit"
             data-testId="editClaimButton"
           >
-            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
           </button>
         </h2>
       </div>
@@ -48,7 +48,7 @@
           <div class="overflow-hidden">
             <div class="text-sm mb-3">
               <div class="truncate">
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                 {{ issuerInfoObject?.displayName }}
                 <span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
                   <a
@@ -56,11 +56,11 @@
                     target="_blank"
                     class="text-blue-500"
                   >
-                    <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                    <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                   </a>
                 </span>
                 <span v-else-if="serverUtil.isHiddenDid(issuer)">
-                  <fa
+                  <font-awesome
                     icon="info-circle"
                     class="fa-fw text-blue-500 cursor-pointer"
                     @click="openHiddenDidDialog()"
@@ -68,35 +68,35 @@
                 </span>
               </div>
               <div v-if="startTime">
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="calendar" class="fa-fw text-slate-400"></font-awesome>
                 Starts {{ startTime }}
               </div>
               <div v-if="endTime">
-                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="calendar" class="fa-fw text-slate-400"></font-awesome>
                 Ends {{ endTime }}
               </div>
               <div v-if="latitude || longitude">
-                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="location-dot" class="fa-fw text-slate-400"></font-awesome>
                 <a
                   :href="getOpenStreetMapUrl()"
                   target="_blank"
                   class="underline text-blue-500"
                   >Map View
-                  <fa
+                  <font-awesome
                     icon="arrow-up-right-from-square"
                     class="fa-fw text-blue-500"
                   />
                 </a>
               </div>
               <div v-if="url">
-                <fa icon="globe" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="globe" class="fa-fw text-slate-400"></font-awesome>
                 <a
                   :href="addScheme(url)"
                   target="_blank"
                   class="underline text-blue-500"
                 >
                   {{ domainForWebsite(this.url) }}
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <font-awesome icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
               </div>
             </div>
@@ -124,7 +124,7 @@
         </div>
 
         <a @click="onClickLoadClaim(projectId)" class="cursor-pointer">
-          <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+          <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
         </a>
       </div>
     </div>
@@ -181,7 +181,7 @@
         class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
       >
         <li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
-          <fa icon="hand" class="fa-fw text-blue-500 text-5xl cursor-pointer" />
+          <font-awesome icon="hand" class="fa-fw text-blue-500 text-5xl cursor-pointer" />
           <h3
             class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
           >
@@ -266,7 +266,7 @@
           >
             <div class="flex justify-between gap-4">
               <span>
-                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
                 {{
                   serverUtil.didInfo(
                     offer.offeredByDid,
@@ -277,14 +277,14 @@
                 }}
               </span>
               <span v-if="offer.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(offer.unit)"
                   class="fa-fw text-slate-400"
                 />{{ offer.amount }}
               </span>
             </div>
             <div v-if="offer.objectDescription" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ offer.objectDescription }}
             </div>
             <div class="flex justify-between">
@@ -292,13 +292,13 @@
                 @click="onClickLoadClaim(offer.jwtId as string)"
                 class="cursor-pointer"
               >
-                <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
+                <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
               </a>
               <a
                 v-if="checkIsFulfillable(offer)"
                 @click="onClickFulfillGiveToOffer(offer)"
               >
-                <fa
+                <font-awesome
                   icon="hand-holding-heart"
                   class="text-blue-500 cursor-pointer"
                 />
@@ -340,7 +340,7 @@
           >
             <div class="flex justify-between gap-4">
               <span>
-                <fa icon="user" class="fa-fw text-slate-400" />
+                <font-awesome icon="user" class="fa-fw text-slate-400" />
                 {{
                   serverUtil.didInfo(
                     give.agentDid,
@@ -351,23 +351,23 @@
                 }}
               </span>
               <span v-if="give.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(give.unit)"
                   class="fa-fw text-slate-400"
                 />{{ give.amount }}
               </span>
             </div>
             <div class="text-slate-500">
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <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">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
             <div class="flex justify-between">
               <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
 
               <a
@@ -377,13 +377,13 @@
                 "
                 @click="deepCheckConfirmable(give)"
               >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
               <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                <fa icon="spinner" class="fa-spin-pulse" />
+                <font-awesome icon="spinner" class="fa-spin-pulse" />
               </a>
               <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-slate-500 cursor-pointer" />
               </a>
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">
@@ -440,23 +440,23 @@
                 }}
               </span>
               <span v-if="give.amount" class="whitespace-nowrap">
-                <fa
+                <font-awesome
                   :icon="libsUtil.iconForUnitCode(give.unit)"
                   class="fa-fw text-slate-400"
                 />{{ give.amount }}
               </span>
             </div>
             <div class="text-slate-500">
-              <fa icon="calendar" class="fa-fw text-slate-400" />
+              <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">
-              <fa icon="comment" class="fa-fw text-slate-400" />
+              <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
             <div class="flex justify-between">
               <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
 
               <a
@@ -466,13 +466,13 @@
                 "
                 @click="deepCheckConfirmable(give)"
               >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
               <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                <fa icon="spinner" class="fa-spin-pulse" />
+                <font-awesome icon="spinner" class="fa-spin-pulse" />
               </a>
               <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+                <font-awesome icon="circle-check" class="text-slate-500 cursor-pointer" />
               </a>
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index d1e2f2e..7c2abfe 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -57,7 +57,7 @@
       <button
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
-        <fa icon="magnifying-glass" class="fa-fw"></fa>
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
       </button>
     </div>
     -->
@@ -68,7 +68,7 @@
       class="fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
       @click="onClickNewProject()"
     >
-      <fa icon="plus" class="fa-fw"></fa>
+      <font-awesome icon="plus" class="fa-fw"></font-awesome>
     </button>
 
     <!-- Loading Animation -->
@@ -76,7 +76,7 @@
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <!-- Offer Results List -->
@@ -130,17 +130,17 @@
 
               <span class="text-sm">
                 <span v-if="offer.amount">
-                  <fa
+                  <font-awesome
                     :icon="libsUtil.iconForUnitCode(offer.unit)"
                     class="fa-fw text-slate-400"
                   />
 
                   <span v-if="offer.amountGiven >= offer.amount">
-                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    <font-awesome icon="check-circle" class="fa-fw text-green-500" />
                     All {{ offer.amount }} given
                   </span>
                   <span v-else>
-                    <fa
+                    <font-awesome
                       icon="triangle-exclamation"
                       class="fa-fw text-yellow-500"
                     />
@@ -162,7 +162,7 @@
                       </span>
                       <span v-else>
                         <!-- only show icon if there's not already a warning -->
-                        <fa
+                        <font-awesome
                           v-if="offer.amountGiven >= offer.amount"
                           icon="triangle-exclamation"
                           class="fa-fw text-yellow-300"
@@ -176,13 +176,13 @@
                 <span v-else>
                   <!-- Non-amount offer -->
                   <span v-if="offer.nonAmountGivenConfirmed">
-                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    <font-awesome icon="check-circle" class="fa-fw text-green-500" />
                     {{ offer.nonAmountGivenConfirmed }}
                     {{ offer.nonAmountGivenConfirmed == 1 ? "give" : "gives" }}
                     are confirmed.
                   </span>
                   <span v-else>
-                    <fa
+                    <font-awesome
                       icon="triangle-exclamation"
                       class="fa-fw text-yellow-500"
                     />
@@ -191,10 +191,10 @@
                 </span>
 
                 <a @click="onClickLoadClaim(offer.jwtId)">
-                  <fa
+                  <font-awesome
                     icon="file-lines"
                     class="pl-2 text-blue-500 cursor-pointer"
-                  ></fa>
+                  ></font-awesome>
                 </a>
               </span>
             </div>
@@ -209,7 +209,7 @@
         You have not announced any projects.
         <div v-if="isRegistered">
           Hit the big
-          <fa
+          <font-awesome
             icon="plus"
             class="bg-green-600 text-white px-1.5 py-1 rounded-full"
           />
diff --git a/src/views/QuickActionBvcBeginView.vue b/src/views/QuickActionBvcBeginView.vue
index b29d882..9ea341e 100644
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/src/views/QuickActionBvcBeginView.vue
@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
diff --git a/src/views/QuickActionBvcEndView.vue b/src/views/QuickActionBvcEndView.vue
index ca4acdd..1fc502e 100644
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -22,7 +22,7 @@
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>
       <div v-if="loadingConfirms" class="flex justify-center">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else-if="claimsToConfirm.length === 0">
         There are no claims yet today for you to confirm.
@@ -59,7 +59,7 @@
                 )
               }}
               <a @click="onClickLoadClaim(record.id)">
-                <fa
+                <font-awesome
                   icon="file-lines"
                   class="pl-2 text-blue-500 cursor-pointer"
                 />
@@ -78,7 +78,7 @@
         }}
         so if you expected but do not see details from someone then ask them to
         check that their activity is visible to you on their Contacts
-        <fa icon="users" class="text-slate-500" />
+        <font-awesome icon="users" class="text-slate-500" />
         page.
       </span>
     </div>
diff --git a/src/views/QuickActionBvcView.vue b/src/views/QuickActionBvcView.vue
index c279a0c..5fa4c5c 100644
--- a/src/views/QuickActionBvcView.vue
+++ b/src/views/QuickActionBvcView.vue
@@ -10,7 +10,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
diff --git a/src/views/RecentOffersToUserProjectsView.vue b/src/views/RecentOffersToUserProjectsView.vue
index 474014a..7fde9c7 100644
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/src/views/RecentOffersToUserProjectsView.vue
@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -20,13 +20,13 @@
       <p class="mt-2">
         Maybe there are already some projects you can help on the
         <router-link to="/discover" class="text-blue-500">
-          Discover page <fa icon="search" />
+          Discover page <font-awesome icon="search" />
         </router-link>
       </p>
       <p class="mt-2">
         You can announce more of your own on
         <router-link to="/contacts" class="text-blue-500">
-          Your Ideas page <fa icon="hand" />
+          Your Ideas page <font-awesome icon="hand" />
         </router-link>
       </p>
     </div>
@@ -65,7 +65,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
         </li>
       </ul>
diff --git a/src/views/RecentOffersToUserView.vue b/src/views/RecentOffersToUserView.vue
index 58031d6..11c8bc9 100644
--- a/src/views/RecentOffersToUserView.vue
+++ b/src/views/RecentOffersToUserView.vue
@@ -6,7 +6,7 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Back -->
-        <fa
+        <font-awesome
           icon="chevron-left"
           @click="$router.back()"
           class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@@ -20,7 +20,7 @@
       <p class="mt-2">
         You can start the cycle on the
         <router-link to="/contacts" class="text-blue-500">
-          Contacts page <fa icon="users" />
+          Contacts page <font-awesome icon="users" />
         </router-link>
         with an "Offer" directly to someone. Hopefully you'll find a common
         interest!
@@ -58,7 +58,7 @@
             :to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }"
             class="text-blue-500"
           >
-            <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
+            <font-awesome icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
         </li>
       </ul>
diff --git a/src/views/SearchAreaView.vue b/src/views/SearchAreaView.vue
index b523217..cb39901 100644
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -35,7 +35,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="storeSearchBox"
       >
-        <fa icon="save" class="fa-fw" />
+        <font-awesome icon="save" class="fa-fw" />
         Store This Location for Nearby Search
       </button>
       <button
@@ -43,7 +43,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="forgetSearchBox"
       >
-        <fa icon="trash-can" class="fa-fw" />
+        <font-awesome icon="trash-can" class="fa-fw" />
         Delete Stored Location
       </button>
       <button
@@ -51,7 +51,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="resetLatLong"
       >
-        <fa icon="rotate" class="fa-fw" />
+        <font-awesome icon="rotate" class="fa-fw" />
         Reset To Original
       </button>
       <button
@@ -59,7 +59,7 @@
         class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
         @click="isNewMarkerSet = false"
       >
-        <fa icon="eraser" class="fa-fw" />
+        <font-awesome icon="eraser" class="fa-fw" />
         Erase Marker
       </button>
       <div v-if="isNewMarkerSet">
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 016ec22..56ae5e4 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -8,7 +8,7 @@
         class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         @click="$router.back()"
       >
-        <fa icon="chevron-left" class="fa-fw"></fa>
+        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
       </h1>
     </div>
 
@@ -62,7 +62,7 @@
               )
             "
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showCopiedSeed" class="text-sm text-green-500">
             Copied
@@ -79,7 +79,7 @@
               )
             "
           >
-            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            <font-awesome icon="copy" class="text-slate-400 fa-fw"></font-awesome>
           </button>
           <span v-show="showCopiedDeri" class="text-sm text-green-500"
             >Copied</span
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index e1aaa1b..49cc981 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -12,7 +12,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="fa-fw" />
         </h1>
       </div>
 
@@ -34,7 +34,7 @@
       <div class="mt-8">Click to copy your info, then send it to them.</div>
       <div>
         They will paste it in the input box on the Contacts
-        <fa icon="users" /> screen.
+        <font-awesome icon="users" /> screen.
       </div>
     </div>
   </section>
diff --git a/src/views/SharedPhotoView.vue b/src/views/SharedPhotoView.vue
index 83f4df1..50db720 100644
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -8,7 +8,7 @@
     </h1>
     <div v-if="imageBlob">
       <div v-if="uploading" class="text-center mb-4">
-        <fa icon="spinner" class="fa-spin-pulse" />
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else>
         <div class="text-center mb-4">Choose how to use this image</div>
@@ -17,21 +17,21 @@
             @click="recordGift"
             class="text-center text-md font-bold 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-3 rounded-md"
           >
-            <fa icon="gift" class="fa-fw" />
+            <font-awesome icon="gift" class="fa-fw" />
             Record a Gift
           </button>
           <button
             @click="recordProfile"
             class="text-center text-md font-bold 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-3 rounded-md"
           >
-            <fa icon="circle-user" class="fa-fw" />
+            <font-awesome icon="circle-user" class="fa-fw" />
             Save as Profile Image
           </button>
           <button
             @click="cancel"
             class="text-center text-md font-bold 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-3 rounded-md"
           >
-            <fa icon="ban" class="fa-fw" />
+            <font-awesome icon="ban" class="fa-fw" />
             Cancel
           </button>
         </div>
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
index 27ff143..2207d7f 100644
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
@@ -34,7 +34,7 @@
             href="https://www.perplexity.ai/search/what-are-passkeys-v2SHV3yLQlyA2CYH6.Nvhg"
             target="_blank"
           >
-            <fa icon="info-circle" class="fa-fw text-blue-500" />
+            <font-awesome icon="info-circle" class="fa-fw text-blue-500" />
           </a>
         </p>
         <p class="text-center font-light mt-4">
@@ -44,7 +44,7 @@
             href="https://www.perplexity.ai/search/what-is-a-seed-phrase-OqiP9foVRXidr_2le5OFKA"
             target="_blank"
           >
-            <fa icon="info-circle" class="fa-fw text-blue-500" />
+            <font-awesome icon="info-circle" class="fa-fw text-blue-500" />
           </a>
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index e4312f2..aee8549 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 75c668b..5b7d7df 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -11,7 +11,7 @@
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
           @click="$router.back()"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </h1>
       </div>
 
diff --git a/src/views/UserProfileView.vue b/src/views/UserProfileView.vue
index 2588c41..e5666f6 100644
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -12,7 +12,7 @@
           @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
         >
-          <fa icon="chevron-left" class="fa-fw"></fa>
+          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
         </button>
         Individual Profile
       </h1>
@@ -23,14 +23,14 @@
       class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
       v-if="isLoading"
     >
-      <fa icon="spinner" class="fa-spin-pulse"></fa>
+      <font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
     </div>
 
     <div v-else-if="profile">
       <!-- Profile Info -->
       <div class="mt-8">
         <div class="text-sm">
-          <fa icon="user" class="fa-fw text-slate-400"></fa>
+          <font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
           {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
         </div>
         <p v-if="profile.description" class="mt-4 text-slate-600">