diff --git a/BUILDING.md b/BUILDING.md
index ba981a8d..607bf60d 100644
--- a/BUILDING.md
+++ b/BUILDING.md
@@ -2743,6 +2743,45 @@ configuration files in the repository.
 
 ---
 
+### 2025-08-26 - Capacitor Plugin Additions
+
+#### New Capacitor Plugins Added
+- **Added**: `@capacitor/clipboard` v6.0.2 - Clipboard functionality for mobile platforms
+  - **Purpose**: Enable copy/paste operations on mobile devices
+  - **Platforms**: iOS and Android
+  - **Features**: Read/write clipboard content, text handling
+  - **Integration**: Automatically included in mobile builds
+
+- **Added**: `@capacitor/status-bar` v6.0.2 - Status bar management for mobile platforms
+  - **Purpose**: Control mobile device status bar appearance and behavior
+  - **Platforms**: iOS and Android
+  - **Features**: Status bar styling, visibility control, color management
+  - **Integration**: Automatically included in mobile builds
+
+#### Android Build System Updates
+- **Modified**: `android/capacitor.settings.gradle` - Added new plugin project includes
+  - **Added**: `:capacitor-clipboard` project directory mapping
+  - **Added**: `:capacitor-status-bar` project directory mapping
+  - **Impact**: New plugins now properly integrated into Android build process
+
+#### Package Dependencies
+- **Updated**: `package.json` - Added new Capacitor plugin dependencies
+- **Updated**: `package-lock.json` - Locked dependency versions for consistency
+- **Version**: All new plugins use Capacitor 6.x compatible versions
+
+#### Build Process Impact
+- **No Breaking Changes**: Existing build commands continue to work unchanged
+- **Enhanced Mobile Features**: New clipboard and status bar capabilities available
+- **Automatic Integration**: Plugins automatically included in mobile builds
+- **Platform Support**: Both iOS and Android builds now include new functionality
+
+#### Testing Requirements
+- **Mobile Builds**: Verify new plugins integrate correctly in iOS and Android builds
+- **Functionality**: Test clipboard operations and status bar management on devices
+- **Fallback**: Ensure graceful degradation when plugins are unavailable
+
+---
+
 **Note**: This documentation is maintained alongside the build system. For the
 most up-to-date information, refer to the actual script files and Vite
 configuration files in the repository.
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index ec740be6..f1774d9f 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -13,8 +13,10 @@ dependencies {
     implementation project(':capacitor-mlkit-barcode-scanning')
     implementation project(':capacitor-app')
     implementation project(':capacitor-camera')
+    implementation project(':capacitor-clipboard')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-share')
+    implementation project(':capacitor-status-bar')
     implementation project(':capawesome-capacitor-file-picker')
 
 }
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 77641501..1d8ad70d 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -14,6 +14,7 @@
             android:label="@string/title_activity_main"
             android:launchMode="singleTask"
             android:screenOrientation="portrait"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/AppTheme.NoActionBarLaunch">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/android/app/src/main/assets/capacitor.plugins.json b/android/app/src/main/assets/capacitor.plugins.json
index a95bd42f..72f18d8c 100644
--- a/android/app/src/main/assets/capacitor.plugins.json
+++ b/android/app/src/main/assets/capacitor.plugins.json
@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/camera",
 		"classpath": "com.capacitorjs.plugins.camera.CameraPlugin"
 	},
+	{
+		"pkg": "@capacitor/clipboard",
+		"classpath": "com.capacitorjs.plugins.clipboard.ClipboardPlugin"
+	},
 	{
 		"pkg": "@capacitor/filesystem",
 		"classpath": "com.capacitorjs.plugins.filesystem.FilesystemPlugin"
@@ -23,6 +27,10 @@
 		"pkg": "@capacitor/share",
 		"classpath": "com.capacitorjs.plugins.share.SharePlugin"
 	},
+	{
+		"pkg": "@capacitor/status-bar",
+		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
+	},
 	{
 		"pkg": "@capawesome/capacitor-file-picker",
 		"classpath": "io.capawesome.capacitorjs.plugins.filepicker.FilePickerPlugin"
diff --git a/android/app/src/main/java/app/timesafari/MainActivity.java b/android/app/src/main/java/app/timesafari/MainActivity.java
index 12429d63..29224f45 100644
--- a/android/app/src/main/java/app/timesafari/MainActivity.java
+++ b/android/app/src/main/java/app/timesafari/MainActivity.java
@@ -1,7 +1,16 @@
 package app.timesafari;
 
 import android.os.Bundle;
+import android.view.View;
+import android.view.WindowManager;
+import android.view.WindowInsetsController;
+import android.view.WindowInsets;
+import android.os.Build;
+import android.webkit.WebView;
+import android.webkit.WebSettings;
+import android.webkit.WebViewClient;
 import com.getcapacitor.BridgeActivity;
+import app.timesafari.safearea.SafeAreaPlugin;
 //import com.getcapacitor.community.sqlite.SQLite;
 
 public class MainActivity extends BridgeActivity {
@@ -9,7 +18,39 @@ public class MainActivity extends BridgeActivity {
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         
+        // Enable edge-to-edge display for modern Android
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            // Android 11+ (API 30+)
+            getWindow().setDecorFitsSystemWindows(false);
+            
+            // Set up system UI visibility for edge-to-edge
+            WindowInsetsController controller = getWindow().getInsetsController();
+            if (controller != null) {
+                controller.setSystemBarsAppearance(
+                    WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS | 
+                    WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS,
+                    WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS | 
+                    WindowInsetsController.APPEARANCE_LIGHT_NAVIGATION_BARS
+                );
+                controller.setSystemBarsBehavior(WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
+            }
+        } else {
+            // Legacy Android (API 21-29)
+            getWindow().getDecorView().setSystemUiVisibility(
+                View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
+                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
+                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
+                View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR |
+                View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+            );
+        }
+        
+        // Register SafeArea plugin
+        registerPlugin(SafeAreaPlugin.class);
+        
         // Initialize SQLite
         //registerPlugin(SQLite.class);
     }
+    
+
 } 
\ No newline at end of file
diff --git a/android/app/src/main/java/app/timesafari/safearea/SafeAreaPlugin.java b/android/app/src/main/java/app/timesafari/safearea/SafeAreaPlugin.java
new file mode 100644
index 00000000..cb433d57
--- /dev/null
+++ b/android/app/src/main/java/app/timesafari/safearea/SafeAreaPlugin.java
@@ -0,0 +1,44 @@
+package app.timesafari.safearea;
+
+import android.os.Build;
+import android.view.WindowInsets;
+import com.getcapacitor.JSObject;
+import com.getcapacitor.Plugin;
+import com.getcapacitor.PluginCall;
+import com.getcapacitor.PluginMethod;
+import com.getcapacitor.annotation.CapacitorPlugin;
+
+@CapacitorPlugin(name = "SafeArea")
+public class SafeAreaPlugin extends Plugin {
+
+    @PluginMethod
+    public void getSafeAreaInsets(PluginCall call) {
+        JSObject result = new JSObject();
+        
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            WindowInsets insets = getActivity().getWindow().getDecorView().getRootWindowInsets();
+            if (insets != null) {
+                int top = insets.getInsets(WindowInsets.Type.statusBars()).top;
+                int bottom = insets.getInsets(WindowInsets.Type.navigationBars()).bottom;
+                int left = insets.getInsets(WindowInsets.Type.systemBars()).left;
+                int right = insets.getInsets(WindowInsets.Type.systemBars()).right;
+                
+                result.put("top", top);
+                result.put("bottom", bottom);
+                result.put("left", left);
+                result.put("right", right);
+                
+                call.resolve(result);
+                return;
+            }
+        }
+        
+        // Fallback values
+        result.put("top", 0);
+        result.put("bottom", 0);
+        result.put("left", 0);
+        result.put("right", 0);
+        
+        call.resolve(result);
+    }
+}
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index be874e54..6a1ec3ca 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -18,5 +18,14 @@
 
     <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
         <item name="android:background">@drawable/splash</item>
+        <item name="android:windowTranslucentStatus">false</item>
+        <item name="android:windowTranslucentNavigation">false</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+        <item name="android:enforceNavigationBarContrast">false</item>
     </style>
 </resources>
\ No newline at end of file
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 3c06dfe7..891b5455 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -14,11 +14,17 @@ project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/
 include ':capacitor-camera'
 project(':capacitor-camera').projectDir = new File('../node_modules/@capacitor/camera/android')
 
+include ':capacitor-clipboard'
+project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
+
 include ':capacitor-filesystem'
 project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
 
 include ':capacitor-share'
 project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
 
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
+
 include ':capawesome-capacitor-file-picker'
 project(':capawesome-capacitor-file-picker').projectDir = new File('../node_modules/@capawesome/capacitor-file-picker/android')
diff --git a/doc/z-index-guide.md b/doc/z-index-guide.md
new file mode 100644
index 00000000..49a5733a
--- /dev/null
+++ b/doc/z-index-guide.md
@@ -0,0 +1,69 @@
+# Z-Index Guide — TimeSafari
+
+**Author**: Development Team  
+**Date**: 2025-08-25T19:38:09-08:00  
+**Status**: 🎯 **ACTIVE** - Z-index layering standards
+
+## Objective
+Establish consistent z-index values across the TimeSafari application to ensure proper layering of UI elements.
+
+## Result
+This document defines the z-index hierarchy for all UI components.
+
+## Use/Run
+Reference these values when implementing new components or modifying existing ones to maintain consistent layering.
+
+## Z-Index Hierarchy
+
+| Component | Z-Index | Usage |
+|-----------|---------|-------|
+| **Map** | `40` | Base map layer and map-related overlays |
+| **QuickNav** | `50` | Quick navigation bottom bar |
+| **Dialogs and Modals** | `100` | Modal dialogs, popups, and overlay content |
+| **Notifications and Toasts** | `120` | System notifications, alerts, and toast messages |
+
+## Best Practices
+
+1. **Never exceed 120** - Keep the highest z-index reserved for critical notifications
+2. **Use increments of 10** - Leave room for future additions between layers
+3. **Document exceptions** - If you need a z-index outside this range, document the reason
+4. **Test layering** - Verify z-index behavior across different screen sizes and devices
+
+## Common Pitfalls
+
+- **Avoid arbitrary values** - Don't use random z-index numbers
+- **Don't nest high z-index** - Keep child elements within their parent's z-index range
+- **Consider stacking context** - Remember that `position: relative` creates new stacking contexts
+
+## Next Steps
+
+| Owner | Task | Exit Criteria | Target Date |
+|-------|------|---------------|-------------|
+| Dev Team | Apply z-index classes to existing components | All components use defined z-index values | 2025-09-01 |
+
+## Competence Hooks
+
+- **Why this works**: Creates predictable layering hierarchy that prevents UI conflicts
+- **Common pitfalls**: Using arbitrary z-index values or exceeding the defined range
+- **Next skill unlock**: Learn about CSS stacking contexts and their impact on z-index
+- **Teach-back**: Explain the z-index hierarchy to a team member without referencing this guide
+
+## Collaboration Hooks
+
+- **Reviewers**: Frontend team, UI/UX designers
+- **Sign-off checklist**: 
+  - [ ] All new components follow z-index guidelines
+  - [ ] Existing components updated to use defined values
+  - [ ] Cross-browser testing completed
+  - [ ] Mobile responsiveness verified
+
+## Assumptions & Limits
+
+- Assumes modern browser support for z-index
+- Limited to 4 defined layers (expandable if needed)
+- Requires team discipline to maintain consistency
+
+## References
+
+- [MDN Z-Index Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
+- [CSS Stacking Context Guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
diff --git a/ios/App/Podfile b/ios/App/Podfile
index da98dfe6..efae46b4 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -15,8 +15,10 @@ def capacitor_pods
   pod 'CapacitorMlkitBarcodeScanning', :path => '../../node_modules/@capacitor-mlkit/barcode-scanning'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
+  pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
   pod 'CapawesomeCapacitorFilePicker', :path => '../../node_modules/@capawesome/capacitor-file-picker'
 end
 
diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
index fdd82e86..ab5cb59e 100644
--- a/ios/App/Podfile.lock
+++ b/ios/App/Podfile.lock
@@ -5,6 +5,8 @@ PODS:
     - Capacitor
   - CapacitorCamera (6.1.2):
     - Capacitor
+  - CapacitorClipboard (6.0.2):
+    - Capacitor
   - CapacitorCommunitySqlite (6.0.2):
     - Capacitor
     - SQLCipher
@@ -17,6 +19,8 @@ PODS:
     - GoogleMLKit/BarcodeScanning (= 5.0.0)
   - CapacitorShare (6.0.3):
     - Capacitor
+  - CapacitorStatusBar (6.0.2):
+    - Capacitor
   - CapawesomeCapacitorFilePicker (6.2.0):
     - Capacitor
   - GoogleDataTransport (9.4.1):
@@ -88,11 +92,13 @@ DEPENDENCIES:
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
   - "CapacitorCamera (from `../../node_modules/@capacitor/camera`)"
+  - "CapacitorClipboard (from `../../node_modules/@capacitor/clipboard`)"
   - "CapacitorCommunitySqlite (from `../../node_modules/@capacitor-community/sqlite`)"
   - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorFilesystem (from `../../node_modules/@capacitor/filesystem`)"
   - "CapacitorMlkitBarcodeScanning (from `../../node_modules/@capacitor-mlkit/barcode-scanning`)"
   - "CapacitorShare (from `../../node_modules/@capacitor/share`)"
+  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
   - "CapawesomeCapacitorFilePicker (from `../../node_modules/@capawesome/capacitor-file-picker`)"
 
 SPEC REPOS:
@@ -119,6 +125,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/app"
   CapacitorCamera:
     :path: "../../node_modules/@capacitor/camera"
+  CapacitorClipboard:
+    :path: "../../node_modules/@capacitor/clipboard"
   CapacitorCommunitySqlite:
     :path: "../../node_modules/@capacitor-community/sqlite"
   CapacitorCordova:
@@ -129,6 +137,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor-mlkit/barcode-scanning"
   CapacitorShare:
     :path: "../../node_modules/@capacitor/share"
+  CapacitorStatusBar:
+    :path: "../../node_modules/@capacitor/status-bar"
   CapawesomeCapacitorFilePicker:
     :path: "../../node_modules/@capawesome/capacitor-file-picker"
 
@@ -136,11 +146,13 @@ SPEC CHECKSUMS:
   Capacitor: c95400d761e376be9da6be5a05f226c0e865cebf
   CapacitorApp: e1e6b7d05e444d593ca16fd6d76f2b7c48b5aea7
   CapacitorCamera: 9bc7b005d0e6f1d5f525b8137045b60cffffce79
+  CapacitorClipboard: 4443c3cdb7c77b1533dfe3ff0f9f7756aa8579df
   CapacitorCommunitySqlite: 0299d20f4b00c2e6aa485a1d8932656753937b9b
   CapacitorCordova: 8d93e14982f440181be7304aa9559ca631d77fff
   CapacitorFilesystem: 59270a63c60836248812671aa3b15df673fbaf74
   CapacitorMlkitBarcodeScanning: 7652be9c7922f39203a361de735d340ae37e134e
   CapacitorShare: d2a742baec21c8f3b92b361a2fbd2401cdd8288e
+  CapacitorStatusBar: b16799a26320ffa52f6c8b01737d5a95bbb8f3eb
   CapawesomeCapacitorFilePicker: c40822f0a39f86855321943c7829d52bca7f01bd
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleMLKit: 90ba06e028795a50261f29500d238d6061538711
@@ -157,6 +169,6 @@ SPEC CHECKSUMS:
   SQLCipher: 31878d8ebd27e5c96db0b7cb695c96e9f8ad77da
   ZIPFoundation: b8c29ea7ae353b309bc810586181fd073cb3312c
 
-PODFILE CHECKSUM: f987510f7383b04a1b09ea8472bdadcd88b6c924
+PODFILE CHECKSUM: 5fa870b031c7c4e0733e2f96deaf81866c75ff7d
 
 COCOAPODS: 1.16.2
diff --git a/package-lock.json b/package-lock.json
index fea161a9..bf867511 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,10 +15,12 @@
         "@capacitor/app": "^6.0.0",
         "@capacitor/camera": "^6.0.0",
         "@capacitor/cli": "^6.2.0",
+        "@capacitor/clipboard": "^6.0.2",
         "@capacitor/core": "^6.2.0",
         "@capacitor/filesystem": "^6.0.0",
         "@capacitor/ios": "^6.2.0",
         "@capacitor/share": "^6.0.3",
+        "@capacitor/status-bar": "^6.0.2",
         "@capawesome/capacitor-file-picker": "^6.2.0",
         "@dicebear/collection": "^5.4.1",
         "@dicebear/core": "^5.4.1",
@@ -2301,6 +2303,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@capacitor/clipboard": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/clipboard/-/clipboard-6.0.2.tgz",
+      "integrity": "sha512-jQ6UeFra5NP58THNZNb7HtzOZU7cHsjgrbQGVuMTgsK1uTILZpNeh+pfqHbKggba6KaNh5DAsJvEVQGpIR1VBA==",
+      "peerDependencies": {
+        "@capacitor/core": "^6.0.0"
+      }
+    },
     "node_modules/@capacitor/core": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.2.1.tgz",
@@ -2337,6 +2347,14 @@
         "@capacitor/core": "^6.0.0"
       }
     },
+    "node_modules/@capacitor/status-bar": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.2.tgz",
+      "integrity": "sha512-AmRIX6QvFemItlY7/69ARkIAqitRQqJ2qwgZmD1KqgFb78pH+XFXm1guvS/a8CuOOm/IqZ4ddDbl20yxtBqzGA==",
+      "peerDependencies": {
+        "@capacitor/core": "^6.0.0"
+      }
+    },
     "node_modules/@capawesome/capacitor-file-picker": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/@capawesome/capacitor-file-picker/-/capacitor-file-picker-6.2.0.tgz",
diff --git a/package.json b/package.json
index d3b86aa3..16c055c5 100644
--- a/package.json
+++ b/package.json
@@ -145,10 +145,12 @@
     "@capacitor/app": "^6.0.0",
     "@capacitor/camera": "^6.0.0",
     "@capacitor/cli": "^6.2.0",
+    "@capacitor/clipboard": "^6.0.2",
     "@capacitor/core": "^6.2.0",
     "@capacitor/filesystem": "^6.0.0",
     "@capacitor/ios": "^6.2.0",
     "@capacitor/share": "^6.0.3",
+    "@capacitor/status-bar": "^6.0.2",
     "@capawesome/capacitor-file-picker": "^6.2.0",
     "@dicebear/collection": "^5.4.1",
     "@dicebear/core": "^5.4.1",
diff --git a/src/App.vue b/src/App.vue
index 8bd39b52..35457383 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[120] top-[max(1rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -175,7 +175,9 @@
       "-permission", "-mute", "-off"
   -->
   <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full">
+    <div
+      class="fixed z-[100] top-[max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))] inset-x-0 w-full"
+    >
       <Notification
         v-slot="{ notifications, close }"
         enter="transform ease-out duration-300 transition"
@@ -506,13 +508,32 @@ export default class App extends Vue {
 
 <style>
 #Content {
-  padding-left: max(1.5rem, env(safe-area-inset-left));
-  padding-right: max(1.5rem, env(safe-area-inset-right));
-  padding-top: max(1.5rem, env(safe-area-inset-top));
-  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
+  padding-left: max(
+    1.5rem,
+    env(safe-area-inset-left),
+    var(--safe-area-inset-left, 0px)
+  );
+  padding-right: max(
+    1.5rem,
+    env(safe-area-inset-right),
+    var(--safe-area-inset-right, 0px)
+  );
+  padding-top: max(
+    1.5rem,
+    env(safe-area-inset-top),
+    var(--safe-area-inset-top, 0px)
+  );
+  padding-bottom: max(
+    1.5rem,
+    env(safe-area-inset-bottom),
+    var(--safe-area-inset-bottom, 0px)
+  );
 }
 
 #QuickNav ~ #Content {
-  padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
+  padding-bottom: calc(
+    max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)) +
+      6.333rem
+  );
 }
 </style>
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 60f6579d..f6457ff3 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -14,4 +14,12 @@
 		transform: translateX(100%);
 		background-color: #FFF !important;
 	}
+
+	.dialog-overlay {
+		@apply z-[100] fixed inset-0 bg-black/50 flex justify-center items-center p-6;
+	}
+
+	.dialog {
+		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+	}
 }
\ No newline at end of file
diff --git a/src/components/ContactNameDialog.vue b/src/components/ContactNameDialog.vue
index e0f715ea..3eb116cf 100644
--- a/src/components/ContactNameDialog.vue
+++ b/src/components/ContactNameDialog.vue
@@ -1,7 +1,7 @@
 <!-- similar to UserNameDialog -->
 <template>
-  <div v-if="visible" :class="overlayClasses">
-    <div :class="dialogClasses">
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
       <h1 :class="titleClasses">{{ title }}</h1>
       {{ message }}
       Note that their name is only stored on this device.
@@ -61,20 +61,6 @@ export default class ContactNameDialog extends Vue {
   title = "Contact Name";
   visible = false;
 
-  /**
-   * CSS classes for the modal overlay backdrop
-   */
-  get overlayClasses(): string {
-    return "z-index-50 fixed top-0 left-0 right-0 bottom-0 bg-black/50 flex justify-center items-center p-6";
-  }
-
-  /**
-   * CSS classes for the modal dialog container
-   */
-  get dialogClasses(): string {
-    return "bg-white p-4 rounded-lg w-full max-w-[500px]";
-  }
-
   /**
    * CSS classes for the dialog title
    */
diff --git a/src/components/EntityGrid.vue b/src/components/EntityGrid.vue
index ff995652..ec5fe236 100644
--- a/src/components/EntityGrid.vue
+++ b/src/components/EntityGrid.vue
@@ -22,7 +22,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
       <!-- "Unnamed" entity -->
       <SpecialEntityCard
         entity-type="unnamed"
-        label="Unnamed"
+        :label="unnamedEntityName"
         icon="circle-question"
         :entity-data="unnamedEntityData"
         :notify="notify"
@@ -83,6 +83,7 @@ import ShowAllCard from "./ShowAllCard.vue";
 import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 /**
  * EntityGrid - Unified grid layout for displaying people or projects
@@ -159,6 +160,10 @@ export default class EntityGrid extends Vue {
   @Prop({ default: "other party" })
   conflictContext!: string;
 
+  /** Whether to hide the "Show All" navigation */
+  @Prop({ default: false })
+  hideShowAll!: boolean;
+
   /**
    * Function to determine which entities to display (allows parent control)
    *
@@ -245,7 +250,9 @@ export default class EntityGrid extends Vue {
    * Whether to show the "Show All" navigation
    */
   get shouldShowAll(): boolean {
-    return this.entities.length > 0 && this.showAllRoute !== "";
+    return (
+      !this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
+    );
   }
 
   /**
@@ -271,10 +278,17 @@ export default class EntityGrid extends Vue {
   get unnamedEntityData(): { did: string; name: string } {
     return {
       did: "",
-      name: "Unnamed",
+      name: UNNAMED_ENTITY_NAME,
     };
   }
 
+  /**
+   * Get the unnamed entity name constant
+   */
+  get unnamedEntityName(): string {
+    return UNNAMED_ENTITY_NAME;
+  }
+
   /**
    * Check if a person DID is conflicted
    */
@@ -304,16 +318,13 @@ export default class EntityGrid extends Vue {
 
   /**
    * Handle special entity selection from SpecialEntityCard
+   * Treat "You" and "Unnamed" as person entities
    */
-  handleEntitySelected(event: {
-    type: string;
-    entityType: string;
-    data: { did?: string; name: string };
-  }): void {
+  handleEntitySelected(event: { data: { did?: string; name: string } }): void {
+    // Convert special entities to person entities since they represent people
     this.emitEntitySelected({
-      type: "special",
-      entityType: event.entityType,
-      data: event.data,
+      type: "person",
+      data: event.data as Contact,
     });
   }
 
@@ -321,13 +332,11 @@ export default class EntityGrid extends Vue {
 
   @Emit("entity-selected")
   emitEntitySelected(data: {
-    type: "person" | "project" | "special";
-    entityType?: string;
-    data: Contact | PlanData | { did?: string; name: string };
+    type: "person" | "project";
+    data: Contact | PlanData;
   }): {
-    type: "person" | "project" | "special";
-    entityType?: string;
-    data: Contact | PlanData | { did?: string; name: string };
+    type: "person" | "project";
+    data: Contact | PlanData;
   } {
     return data;
   }
diff --git a/src/components/EntitySelectionStep.vue b/src/components/EntitySelectionStep.vue
index 56426462..2fb6bcac 100644
--- a/src/components/EntitySelectionStep.vue
+++ b/src/components/EntitySelectionStep.vue
@@ -27,6 +27,7 @@ Matthew Raymer */
       :show-all-query-params="showAllQueryParams"
       :notify="notify"
       :conflict-context="conflictContext"
+      :hide-show-all="hideShowAll"
       @entity-selected="handleEntitySelected"
     />
 
@@ -55,9 +56,8 @@ interface EntityData {
  * Entity selection event data structure
  */
 interface EntitySelectionEvent {
-  type: "person" | "project" | "special";
-  entityType?: string;
-  data: Contact | PlanData | EntityData;
+  type: "person" | "project";
+  data: Contact | PlanData;
 }
 
 /**
@@ -154,6 +154,10 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
+  /** Whether to hide the "Show All" navigation */
+  @Prop({ default: false })
+  hideShowAll!: boolean;
+
   /**
    * CSS classes for the cancel button
    */
diff --git a/src/components/EntitySummaryButton.vue b/src/components/EntitySummaryButton.vue
index 50f25078..80890eff 100644
--- a/src/components/EntitySummaryButton.vue
+++ b/src/components/EntitySummaryButton.vue
@@ -42,8 +42,8 @@ computed CSS properties * * @author Matthew Raymer */
       <p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
         {{ label }}
       </p>
-      <h3 class="font-semibold truncate">
-        {{ entity?.name || "Unnamed" }}
+      <h3 :class="nameClasses">
+        {{ displayName }}
       </h3>
     </div>
 
@@ -62,6 +62,7 @@ import { Component, Prop, Vue } from "vue-facing-decorator";
 import EntityIcon from "./EntityIcon.vue";
 import ProjectIcon from "./ProjectIcon.vue";
 import { Contact } from "../db/tables/contacts";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 /**
  * Entity interface for both person and project entities
@@ -138,6 +139,38 @@ export default class EntitySummaryButton extends Vue {
     return this.editable ? "text-blue-500" : "text-slate-400";
   }
 
+  /**
+   * Computed CSS classes for the entity name
+   */
+  get nameClasses(): string {
+    const baseClasses = "font-semibold truncate";
+
+    // Add italic styling for special "Unnamed" or entities without set names
+    if (!this.entity?.name || this.entity?.did === "") {
+      return `${baseClasses} italic text-slate-500`;
+    }
+
+    return baseClasses;
+  }
+
+  /**
+   * Computed display name for the entity
+   */
+  get displayName(): string {
+    // If the entity has a set name, use that name
+    if (this.entity?.name) {
+      return this.entity.name;
+    }
+
+    // If the entity is the special "Unnamed", use "Unnamed"
+    if (this.entity?.did === "") {
+      return UNNAMED_ENTITY_NAME;
+    }
+
+    // If the entity does not have a set name, but is not the special "Unnamed", use their DID
+    return this.entity?.did;
+  }
+
   /**
    * Handle click event - only call function prop if editable
    * Allows parent to control edit behavior and validation
diff --git a/src/components/FeedFilters.vue b/src/components/FeedFilters.vue
index 956685e9..91a0db6b 100644
--- a/src/components/FeedFilters.vue
+++ b/src/components/FeedFilters.vue
@@ -212,30 +212,7 @@ export default class FeedFilters extends Vue {
 </script>
 
 <style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
 #dialogFeedFilters.dialog-overlay {
-  z-index: 100;
   overflow: scroll;
 }
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
 </style>
diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 0b9cd16a..d91e68b3 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -29,6 +29,7 @@
         :unit-code="unitCode"
         :offer-id="offerId"
         :notify="$notify"
+        :hide-show-all="hideShowAll"
         @entity-selected="handleEntitySelected"
         @cancel="cancel"
       />
@@ -87,6 +88,7 @@ import {
   NOTIFY_GIFTED_DETAILS_NO_IDENTIFIER,
   NOTIFY_GIFTED_DETAILS_RECORDING_GIVE,
 } from "@/constants/notifications";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 @Component({
   components: {
@@ -114,6 +116,7 @@ export default class GiftedDialog extends Vue {
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
   @Prop() isFromProjectView = false;
+  @Prop() hideShowAll = false;
   @Prop({ default: "person" }) giverEntityType = "person" as
     | "person"
     | "project";
@@ -224,15 +227,6 @@ export default class GiftedDialog extends Vue {
 
       this.allMyDids = await retrieveAccountDids();
 
-      if (this.giver && !this.giver.name) {
-        this.giver.name = didInfo(
-          this.giver.did,
-          this.activeDid,
-          this.allMyDids,
-          this.allContacts,
-        );
-      }
-
       if (
         this.giverEntityType === "project" ||
         this.recipientEntityType === "project"
@@ -455,14 +449,14 @@ export default class GiftedDialog extends Vue {
     if (contact) {
       this.giver = {
         did: contact.did,
-        name: contact.name || contact.did,
+        name: contact.name,
       };
     } else {
       // Only set to "Unnamed" if no giver is currently set
       if (!this.giver || !this.giver.did) {
         this.giver = {
           did: "",
-          name: "Unnamed",
+          name: UNNAMED_ENTITY_NAME,
         };
       }
     }
@@ -517,14 +511,14 @@ export default class GiftedDialog extends Vue {
     if (contact) {
       this.receiver = {
         did: contact.did,
-        name: contact.name || contact.did,
+        name: contact.name,
       };
     } else {
       // Only set to "Unnamed" if no receiver is currently set
       if (!this.receiver || !this.receiver.did) {
         this.receiver = {
           did: "",
-          name: "Unnamed",
+          name: UNNAMED_ENTITY_NAME,
         };
       }
     }
@@ -566,20 +560,21 @@ export default class GiftedDialog extends Vue {
 
   /**
    * Handle entity selection from EntitySelectionStep
-   * @param entity - The selected entity (person, project, or special) with stepType
+   * @param entity - The selected entity (person or project) with stepType
    */
   handleEntitySelected(entity: {
-    type: "person" | "project" | "special";
-    entityType?: string;
-    data: Contact | PlanData | { did?: string; name: string };
+    type: "person" | "project";
+    data: Contact | PlanData;
     stepType: string;
   }) {
     if (entity.type === "person") {
       const contact = entity.data as Contact;
+      // Apply DID-based logic for person entities
+      const processedContact = this.processPersonEntity(contact);
       if (entity.stepType === "giver") {
-        this.selectGiver(contact);
+        this.selectGiver(processedContact);
       } else {
-        this.selectRecipient(contact);
+        this.selectRecipient(processedContact);
       }
     } else if (entity.type === "project") {
       const project = entity.data as PlanData;
@@ -588,33 +583,22 @@ export default class GiftedDialog extends Vue {
       } else {
         this.selectRecipientProject(project);
       }
-    } else if (entity.type === "special") {
-      // Handle special entities like "You" and "Unnamed"
-      if (entity.entityType === "you") {
-        // "You" entity selected
-        const youEntity = {
-          did: this.activeDid,
-          name: "You",
-        };
-        if (entity.stepType === "giver") {
-          this.giver = youEntity;
-        } else {
-          this.receiver = youEntity;
-        }
-        this.firstStep = false;
-      } else if (entity.entityType === "unnamed") {
-        // "Unnamed" entity selected
-        const unnamedEntity = {
-          did: "",
-          name: "Unnamed",
-        };
-        if (entity.stepType === "giver") {
-          this.giver = unnamedEntity;
-        } else {
-          this.receiver = unnamedEntity;
-        }
-        this.firstStep = false;
-      }
+    }
+  }
+
+  /**
+   * Processes person entities using DID-based logic for "You" and "Unnamed"
+   */
+  private processPersonEntity(contact: Contact): Contact {
+    if (contact.did === this.activeDid) {
+      // If DID matches active DID, create "You" entity
+      return { ...contact, name: "You" };
+    } else if (!contact.did || contact.did === "") {
+      // If DID is empty/null, create "Unnamed" entity
+      return { ...contact, name: UNNAMED_ENTITY_NAME };
+    } else {
+      // Return the contact as-is
+      return contact;
     }
   }
 
@@ -665,27 +649,3 @@ export default class GiftedDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/GiftedPrompts.vue b/src/components/GiftedPrompts.vue
index f4387472..8f5f72c9 100644
--- a/src/components/GiftedPrompts.vue
+++ b/src/components/GiftedPrompts.vue
@@ -291,27 +291,3 @@ export default class GivenPrompts extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/HiddenDidDialog.vue b/src/components/HiddenDidDialog.vue
index 4b536e21..dfbc352d 100644
--- a/src/components/HiddenDidDialog.vue
+++ b/src/components/HiddenDidDialog.vue
@@ -1,9 +1,6 @@
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-  >
-    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+  <div v-if="isOpen" class="dialog-overlay">
+    <div class="dialog">
       <!-- Header -->
       <div class="flex justify-between items-center mb-4">
         <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
diff --git a/src/components/ImageMethodDialog.vue b/src/components/ImageMethodDialog.vue
index 0c4c5427..61c3cf79 100644
--- a/src/components/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay">
     <div class="dialog relative">
       <div class="text-lg text-center font-bold relative">
         <h1 id="ViewHeading" class="text-center font-bold">
@@ -931,32 +931,6 @@ export default class ImageMethodDialog extends Vue {
 </script>
 
 <style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Add styles for diagnostic panel */
 .diagnostic-panel {
   font-family: monospace;
diff --git a/src/components/InviteDialog.vue b/src/components/InviteDialog.vue
index ed640c6e..d10a6f5b 100644
--- a/src/components/InviteDialog.vue
+++ b/src/components/InviteDialog.vue
@@ -93,27 +93,3 @@ export default class InviteDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index 89840ebd..ed6b1a32 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -81,7 +81,7 @@
         <div class="flex items-center justify-between">
           <div class="flex items-center">
             <h3 class="text-lg font-medium">
-              {{ member.name || "Unnamed Member" }}
+              {{ member.name || unnamedMember }}
             </h3>
             <div
               v-if="!getContactFor(member.did) && member.did !== activeDid"
@@ -177,6 +177,7 @@ import {
   NOTIFY_ADD_CONTACT_FIRST,
   NOTIFY_CONTINUE_WITHOUT_ADDING,
 } from "@/constants/notifications";
+import { SOMEONE_UNNAMED } from "@/constants/entities";
 
 interface Member {
   admitted: boolean;
@@ -220,6 +221,13 @@ export default class MembersList extends Vue {
   apiServer = "";
   contacts: Array<Contact> = [];
 
+  /**
+   * Get the unnamed member constant
+   */
+  get unnamedMember(): string {
+    return SOMEONE_UNNAMED;
+  }
+
   async created() {
     this.notify = createNotifyHelpers(this.$notify);
 
diff --git a/src/components/OfferDialog.vue b/src/components/OfferDialog.vue
index 81664088..a958bd06 100644
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -312,28 +312,3 @@ export default class OfferDialog extends Vue {
   }
 }
 </script>
-
-<style scoped>
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 50;
-}
-
-.dialog {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-</style>
diff --git a/src/components/OnboardingDialog.vue b/src/components/OnboardingDialog.vue
index f6275f12..fe419d55 100644
--- a/src/components/OnboardingDialog.vue
+++ b/src/components/OnboardingDialog.vue
@@ -307,27 +307,3 @@ export default class OnboardingDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 40;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/components/PersonCard.vue b/src/components/PersonCard.vue
index 1f3bf595..bf2b72b9 100644
--- a/src/components/PersonCard.vue
+++ b/src/components/PersonCard.vue
@@ -25,7 +25,7 @@ conflict detection. * * @author Matthew Raymer */
     </div>
 
     <h3 :class="nameClasses">
-      {{ person.name || person.did || "Unnamed" }}
+      {{ displayName }}
     </h3>
   </li>
 </template>
@@ -98,9 +98,27 @@ export default class PersonCard extends Vue {
       return `${baseClasses} text-slate-400`;
     }
 
+    // Add italic styling for entities without set names
+    if (!this.person.name) {
+      return `${baseClasses} italic text-slate-500`;
+    }
+
     return baseClasses;
   }
 
+  /**
+   * Computed display name for the person
+   */
+  get displayName(): string {
+    // If the entity has a set name, use that name
+    if (this.person.name) {
+      return this.person.name;
+    }
+
+    // If the entity does not have a set name
+    return this.person.did;
+  }
+
   /**
    * Handle card click - emit if selectable and not conflicted, show warning if conflicted
    */
@@ -114,7 +132,7 @@ export default class PersonCard extends Vue {
           group: "alert",
           type: "warning",
           title: "Cannot Select",
-          text: `You cannot select "${this.person.name || this.person.did || "Unnamed"}" because they are already selected as the ${this.conflictContext}.`,
+          text: `You cannot select "${this.displayName}" because they are already selected as the ${this.conflictContext}.`,
         },
         3000,
       );
diff --git a/src/components/PhotoDialog.vue b/src/components/PhotoDialog.vue
index 590f60b3..54511f67 100644
--- a/src/components/PhotoDialog.vue
+++ b/src/components/PhotoDialog.vue
@@ -10,7 +10,7 @@ Comprehensive error handling * * @author Matthew Raymer * @version 1.0.0 * @file
 PhotoDialog.vue */
 
 <template>
-  <div v-if="visible" class="dialog-overlay z-[60]">
+  <div v-if="visible" class="dialog-overlay">
     <div class="dialog relative">
       <div class="text-lg text-center font-light relative z-50">
         <div id="ViewHeading" :class="headingClasses">
@@ -628,34 +628,6 @@ export default class PhotoDialog extends Vue {
 </script>
 
 <style>
-/* Dialog overlay styling */
-.dialog-overlay {
-  z-index: 60;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-/* Dialog container styling */
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 700px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 /* Camera preview styling */
 .camera-preview {
   flex: 1;
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index 7f09eda8..f0ba9e6c 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -15,7 +15,7 @@ issuer information. * * @author Matthew Raymer */
     <h3
       class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
     >
-      {{ project.name || "Unnamed Project" }}
+      {{ project.name || unnamedProject }}
     </h3>
 
     <div class="text-xs text-slate-500 truncate">
@@ -31,6 +31,7 @@ import ProjectIcon from "./ProjectIcon.vue";
 import { PlanData } from "../interfaces/records";
 import { Contact } from "../db/tables/contacts";
 import { didInfo } from "../libs/endorserServer";
+import { UNNAMED_PROJECT } from "@/constants/entities";
 
 /**
  * ProjectCard - Displays a project entity with selection capability
@@ -63,6 +64,13 @@ export default class ProjectCard extends Vue {
   @Prop({ required: true })
   allContacts!: Contact[];
 
+  /**
+   * Get the unnamed project constant
+   */
+  get unnamedProject(): string {
+    return UNNAMED_PROJECT;
+  }
+
   /**
    * Computed display name for the project issuer
    */
diff --git a/src/components/PushNotificationPermission.vue b/src/components/PushNotificationPermission.vue
index 7372c63d..37b266a0 100644
--- a/src/components/PushNotificationPermission.vue
+++ b/src/components/PushNotificationPermission.vue
@@ -115,6 +115,7 @@ import { urlBase64ToUint8Array } from "../libs/crypto/vc/util";
 import * as libsUtil from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 // Example interface for error
 interface ErrorResponse {
@@ -602,7 +603,7 @@ export default class PushNotificationPermission extends Vue {
    * Returns the default message for direct push
    */
   get notificationMessagePlaceholder(): string {
-    return "Click to share some gratitude with the world -- even if they're unnamed.";
+    return `Click to share some gratitude with the world -- even if they're ${UNNAMED_ENTITY_NAME.toLowerCase()}.`;
   }
 
   /**
diff --git a/src/components/QuickNav.vue b/src/components/QuickNav.vue
index fadd4991..133b1553 100644
--- a/src/components/QuickNav.vue
+++ b/src/components/QuickNav.vue
@@ -2,7 +2,7 @@
   <!-- QUICK NAV -->
   <nav
     id="QuickNav"
-    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]"
+    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px))]"
   >
     <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
diff --git a/src/components/SpecialEntityCard.vue b/src/components/SpecialEntityCard.vue
index 1d475229..e489d003 100644
--- a/src/components/SpecialEntityCard.vue
+++ b/src/components/SpecialEntityCard.vue
@@ -124,8 +124,6 @@ export default class SpecialEntityCard extends Vue {
   handleClick(): void {
     if (this.selectable && !this.conflicted) {
       this.emitEntitySelected({
-        type: "special",
-        entityType: this.entityType,
         data: this.entityData,
       });
     } else if (this.conflicted && this.notify) {
@@ -145,13 +143,7 @@ export default class SpecialEntityCard extends Vue {
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
-  emitEntitySelected(data: {
-    type: string;
-    entityType: string;
-    data: { did?: string; name: string };
-  }): {
-    type: string;
-    entityType: string;
+  emitEntitySelected(data: { data: { did?: string; name: string } }): {
     data: { did?: string; name: string };
   } {
     return data;
diff --git a/src/components/TopMessage.vue b/src/components/TopMessage.vue
index e96c8cb0..a884af74 100644
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
+  <div
+    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+  >
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link
diff --git a/src/components/UserNameDialog.vue b/src/components/UserNameDialog.vue
index dec1a84c..d71ee9fc 100644
--- a/src/components/UserNameDialog.vue
+++ b/src/components/UserNameDialog.vue
@@ -134,27 +134,3 @@ export default class UserNameDialog extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/constants/entities.ts b/src/constants/entities.ts
new file mode 100644
index 00000000..62b9af5a
--- /dev/null
+++ b/src/constants/entities.ts
@@ -0,0 +1,14 @@
+/**
+ * Constants for entity-related strings, particularly for unnamed/unknown person entities
+ */
+
+// Core unnamed entity names
+export const UNNAMED_ENTITY_NAME = "Unnamed";
+
+// Descriptive phrases for unnamed entities
+export const SOMEONE_UNNAMED = "Someone Unnamed";
+export const THAT_UNNAMED_PERSON = "That unnamed person";
+export const UNNAMED_PERSON = "unnamed person";
+
+// Project-related unnamed entities
+export const UNNAMED_PROJECT = "Unnamed Project";
diff --git a/src/constants/notifications.ts b/src/constants/notifications.ts
index 8b5c3825..49b14812 100644
--- a/src/constants/notifications.ts
+++ b/src/constants/notifications.ts
@@ -1,4 +1,5 @@
 import axios from "axios";
+import { THAT_UNNAMED_PERSON } from "./entities";
 
 // Notification message constants for user-facing notifications
 // Add new notification messages here as needed
@@ -873,7 +874,7 @@ export const NOTIFY_CONTACT_LINK_COPIED = {
 // Template for registration success message
 // Used in: ContactsView.vue (register method - registration success with contact name)
 export const getRegisterPersonSuccessMessage = (name?: string): string =>
-  `${name || "That unnamed person"} ${NOTIFY_REGISTER_PERSON_SUCCESS.message}`;
+  `${name || THAT_UNNAMED_PERSON} ${NOTIFY_REGISTER_PERSON_SUCCESS.message}`;
 
 // Template for visibility success message
 // Used in: ContactsView.vue (setVisibility method - visibility success with contact name)
@@ -1378,7 +1379,7 @@ export function createQRContactAddedMessage(hasVisibility: boolean): string {
 export function createQRRegistrationSuccessMessage(
   contactName: string,
 ): string {
-  return `${contactName || "That unnamed person"}${NOTIFY_QR_REGISTRATION_SUCCESS.message}`;
+  return `${contactName || THAT_UNNAMED_PERSON}${NOTIFY_QR_REGISTRATION_SUCCESS.message}`;
 }
 
 // ContactQRScanShowView.vue timeout constants
diff --git a/src/libs/endorserServer.ts b/src/libs/endorserServer.ts
index 85216aa7..667083bf 100644
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -60,6 +60,7 @@ import { PlanSummaryRecord } from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
+import { SOMEONE_UNNAMED } from "@/constants/entities";
 
 /**
  * Standard context for schema.org data
@@ -309,7 +310,7 @@ export function didInfoForContact(
   showDidForVisible: boolean = false,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): { known: boolean; displayName: string; profileImageUrl?: string } {
-  if (!did) return { displayName: "Someone Not Named", known: false };
+  if (!did) return { displayName: SOMEONE_UNNAMED, known: false };
   if (did === activeDid) {
     return { displayName: "You", known: true };
   } else if (contact) {
diff --git a/src/libs/util.ts b/src/libs/util.ts
index 1f4bf068..dda77a70 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -33,6 +33,7 @@ import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 import { IIdentifier } from "@veramo/core";
 import { DEFAULT_ROOT_DERIVATION_PATH } from "./crypto";
+import { UNNAMED_PERSON } from "@/constants/entities";
 
 // Consolidate this with src/utils/PlatformServiceMixin.mapQueryResultToValues
 function mapQueryResultToValues(
@@ -192,7 +193,7 @@ export const nameForContact = (
 ): string => {
   return (
     (contact?.name as string) ||
-    (capitalize ? "This" : "this") + " unnamed user"
+    (capitalize ? "This" : "this") + " " + UNNAMED_PERSON
   );
 };
 
diff --git a/src/main.capacitor.ts b/src/main.capacitor.ts
index adc0d8c5..19cbf4e7 100644
--- a/src/main.capacitor.ts
+++ b/src/main.capacitor.ts
@@ -35,6 +35,7 @@ import { handleApiError } from "./services/api";
 import { AxiosError } from "axios";
 import { DeepLinkHandler } from "./services/deepLinks";
 import { logger, safeStringify } from "./utils/logger";
+import "./utils/safeAreaInset";
 
 logger.log("[Capacitor] 🚀 Starting initialization");
 logger.log("[Capacitor] Platform:", process.env.VITE_PLATFORM);
diff --git a/src/services/ClipboardService.ts b/src/services/ClipboardService.ts
new file mode 100644
index 00000000..0e68f95b
--- /dev/null
+++ b/src/services/ClipboardService.ts
@@ -0,0 +1,185 @@
+import { Capacitor } from "@capacitor/core";
+import { Clipboard } from "@capacitor/clipboard";
+import { useClipboard } from "@vueuse/core";
+import { logger } from "@/utils/logger";
+
+/**
+ * Platform-agnostic clipboard service that handles both web and native platforms
+ * Provides reliable clipboard functionality across all platforms including iOS
+ */
+export class ClipboardService {
+  private static instance: ClipboardService | null = null;
+
+  /**
+   * Get singleton instance of ClipboardService
+   */
+  public static getInstance(): ClipboardService {
+    if (!ClipboardService.instance) {
+      ClipboardService.instance = new ClipboardService();
+    }
+    return ClipboardService.instance;
+  }
+
+  /**
+   * Copy text to clipboard with platform-specific handling
+   *
+   * @param text - The text to copy to clipboard
+   * @returns Promise that resolves when copy is complete
+   * @throws Error if copy operation fails
+   */
+  public async copyToClipboard(text: string): Promise<void> {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    logger.debug("[ClipboardService] Copying to clipboard:", {
+      text: text.substring(0, 50) + (text.length > 50 ? "..." : ""),
+      platform,
+      isNative,
+      timestamp: new Date().toISOString(),
+    });
+
+    try {
+      if (isNative && (platform === "ios" || platform === "android")) {
+        // Use native Capacitor clipboard for mobile platforms
+        await this.copyNative(text);
+      } else {
+        // Use web clipboard API for web/desktop platforms
+        await this.copyWeb(text);
+      }
+
+      logger.debug("[ClipboardService] Copy successful", {
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+    } catch (error) {
+      logger.error("[ClipboardService] Copy failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Copy text using native Capacitor clipboard API
+   *
+   * @param text - The text to copy
+   * @returns Promise that resolves when copy is complete
+   */
+  private async copyNative(text: string): Promise<void> {
+    try {
+      await Clipboard.write({
+        string: text,
+      });
+    } catch (error) {
+      logger.error("[ClipboardService] Native copy failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        timestamp: new Date().toISOString(),
+      });
+      throw new Error(
+        `Native clipboard copy failed: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  /**
+   * Copy text using web clipboard API with fallback
+   *
+   * @param text - The text to copy
+   * @returns Promise that resolves when copy is complete
+   */
+  private async copyWeb(text: string): Promise<void> {
+    try {
+      // Try VueUse clipboard first (handles some edge cases)
+      const { copy } = useClipboard();
+      await copy(text);
+    } catch (error) {
+      logger.warn(
+        "[ClipboardService] VueUse clipboard failed, trying native API:",
+        {
+          error: error instanceof Error ? error.message : String(error),
+          timestamp: new Date().toISOString(),
+        },
+      );
+
+      // Fallback to native navigator.clipboard
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        throw new Error("Clipboard API not supported in this browser");
+      }
+    }
+  }
+
+  /**
+   * Read text from clipboard (platform-specific)
+   *
+   * @returns Promise that resolves to the clipboard text
+   * @throws Error if read operation fails
+   */
+  public async readFromClipboard(): Promise<string> {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    try {
+      if (isNative && (platform === "ios" || platform === "android")) {
+        // Use native Capacitor clipboard for mobile platforms
+        const result = await Clipboard.read();
+        return result.value || "";
+      } else {
+        // Use web clipboard API for web/desktop platforms
+        if (navigator.clipboard && navigator.clipboard.readText) {
+          return await navigator.clipboard.readText();
+        } else {
+          throw new Error("Clipboard read API not supported in this browser");
+        }
+      }
+    } catch (error) {
+      logger.error("[ClipboardService] Read from clipboard failed:", {
+        error: error instanceof Error ? error.message : String(error),
+        platform,
+        timestamp: new Date().toISOString(),
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Check if clipboard is supported on current platform
+   *
+   * @returns boolean indicating if clipboard is supported
+   */
+  public isSupported(): boolean {
+    const platform = Capacitor.getPlatform();
+    const isNative = Capacitor.isNativePlatform();
+
+    if (isNative && (platform === "ios" || platform === "android")) {
+      return true; // Capacitor clipboard should work on native platforms
+    }
+
+    // Check web clipboard support
+    return !!(navigator.clipboard && navigator.clipboard.writeText);
+  }
+}
+
+/**
+ * Convenience function to copy text to clipboard
+ * Uses the singleton ClipboardService instance
+ *
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves when copy is complete
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+  return ClipboardService.getInstance().copyToClipboard(text);
+}
+
+/**
+ * Convenience function to read text from clipboard
+ * Uses the singleton ClipboardService instance
+ *
+ * @returns Promise that resolves to the clipboard text
+ */
+export async function readFromClipboard(): Promise<string> {
+  return ClipboardService.getInstance().readFromClipboard();
+}
diff --git a/src/utils/safeAreaInset.js b/src/utils/safeAreaInset.js
new file mode 100644
index 00000000..036f0ef6
--- /dev/null
+++ b/src/utils/safeAreaInset.js
@@ -0,0 +1,226 @@
+/**
+ * Safe Area Inset Injection for Android WebView
+ *
+ * This script injects safe area inset values into CSS environment variables
+ * when running in Android WebView, since Android doesn't natively support
+ * CSS env(safe-area-inset-*) variables like iOS does.
+ */
+
+// Check if we're running in Android WebView with Capacitor
+const isAndroidWebView = () => {
+  // Check if we're on iOS - if so, skip this script entirely
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+
+  if (isIOS) {
+    return false;
+  }
+
+  // Check if we're on Android
+  const isAndroid = /Android/.test(navigator.userAgent);
+
+  // Check if we have Capacitor (required for Android WebView)
+  const hasCapacitor = window.Capacitor !== undefined;
+
+  // Only run on Android with Capacitor
+  return isAndroid && hasCapacitor;
+};
+
+// Wait for Capacitor to be available
+const waitForCapacitor = () => {
+  return new Promise((resolve) => {
+    if (window.Capacitor) {
+      resolve(window.Capacitor);
+      return;
+    }
+
+    // Wait for Capacitor to be available
+    const checkCapacitor = () => {
+      if (window.Capacitor) {
+        resolve(window.Capacitor);
+      } else {
+        setTimeout(checkCapacitor, 100);
+      }
+    };
+
+    checkCapacitor();
+  });
+};
+
+// Inject safe area inset values into CSS custom properties
+const injectSafeAreaInsets = async () => {
+  try {
+    // Wait for Capacitor to be available
+    const Capacitor = await waitForCapacitor();
+
+    // Try to get safe area insets using StatusBar plugin (which is already available)
+
+    let top = 0,
+      bottom = 0,
+      left = 0,
+      right = 0;
+
+    try {
+      // Use StatusBar plugin to get status bar height
+      if (Capacitor.Plugins.StatusBar) {
+        const statusBarInfo = await Capacitor.Plugins.StatusBar.getInfo();
+        // Status bar height is typically the top safe area inset
+        top = statusBarInfo.overlays ? 0 : statusBarInfo.height || 0;
+      }
+    } catch (error) {
+      // Status bar info not available, will use fallback
+    }
+
+    // Detect navigation bar and gesture bar heights
+    const detectNavigationBar = () => {
+      const screenHeight = window.screen.height;
+      const screenWidth = window.screen.width;
+      const windowHeight = window.innerHeight;
+      const devicePixelRatio = window.devicePixelRatio || 1;
+
+      // Calculate navigation bar height
+      let navBarHeight = 0;
+
+      // Method 1: Direct comparison (most reliable)
+      if (windowHeight < screenHeight) {
+        navBarHeight = screenHeight - windowHeight;
+      }
+
+      // Method 2: Check for gesture navigation indicators
+      if (navBarHeight === 0) {
+        // Look for common gesture navigation patterns
+        const isTallDevice = screenHeight > 2000;
+        const isModernDevice = screenHeight > 1800;
+        const hasHighDensity = devicePixelRatio >= 2.5;
+
+        if (isTallDevice && hasHighDensity) {
+          // Modern gesture-based device
+          navBarHeight = 12; // Typical gesture bar height
+        } else if (isModernDevice) {
+          // Modern device with traditional navigation
+          navBarHeight = 48; // Traditional navigation bar height
+        }
+      }
+
+      // Method 3: Check visual viewport (more accurate for WebView)
+      if (navBarHeight === 0) {
+        if (window.visualViewport) {
+          const visualHeight = window.visualViewport.height;
+
+          if (visualHeight < windowHeight) {
+            navBarHeight = windowHeight - visualHeight;
+          }
+        }
+      }
+
+      // Method 4: Device-specific estimation based on screen dimensions
+      if (navBarHeight === 0) {
+        // Common Android navigation bar heights in pixels
+        const commonNavBarHeights = {
+          "1080x2400": 48, // Common 1080p devices
+          "1440x3200": 64, // QHD devices
+          "720x1600": 32, // HD devices
+        };
+
+        const resolution = `${screenWidth}x${screenHeight}`;
+        const estimatedHeight = commonNavBarHeights[resolution];
+
+        if (estimatedHeight) {
+          navBarHeight = estimatedHeight;
+        } else {
+          // Fallback: estimate based on screen height
+          navBarHeight = screenHeight > 2000 ? 48 : 32;
+        }
+      }
+
+      return navBarHeight;
+    };
+
+    // Get navigation bar height
+    bottom = detectNavigationBar();
+
+    // If we still don't have a top value, estimate it
+    if (top === 0) {
+      const screenHeight = window.screen.height;
+      // Common status bar heights: 24dp (48px) for most devices, 32dp (64px) for some
+      top = screenHeight > 1920 ? 64 : 48;
+    }
+
+    // Left/right safe areas are rare on Android
+    left = 0;
+    right = 0;
+
+    // Create CSS custom properties
+    const style = document.createElement("style");
+    style.textContent = `
+      :root {
+        --safe-area-inset-top: ${top}px;
+        --safe-area-inset-bottom: ${bottom}px;
+        --safe-area-inset-left: ${left}px;
+        --safe-area-inset-right: ${right}px;
+      }
+    `;
+
+    // Inject the style into the document head
+    document.head.appendChild(style);
+
+    // Also set CSS environment variables if supported
+    if (CSS.supports("env(safe-area-inset-top)")) {
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-top",
+        `${top}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-bottom",
+        `${bottom}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-left",
+        `${left}px`,
+      );
+      document.documentElement.style.setProperty(
+        "--env-safe-area-inset-right",
+        `${right}px`,
+      );
+    }
+  } catch (error) {
+    // Error injecting safe area insets, will use fallback values
+  }
+};
+
+// Initialize when DOM is ready
+const initializeSafeArea = () => {
+  // Check if we should run this script at all
+  if (!isAndroidWebView()) {
+    return;
+  }
+
+  // Add a small delay to ensure WebView is fully initialized
+  setTimeout(() => {
+    injectSafeAreaInsets();
+  }, 100);
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeSafeArea);
+} else {
+  initializeSafeArea();
+}
+
+// Re-inject on orientation change (only on Android)
+window.addEventListener("orientationchange", () => {
+  if (isAndroidWebView()) {
+    setTimeout(() => injectSafeAreaInsets(), 100);
+  }
+});
+
+// Re-inject on resize (only on Android)
+window.addEventListener("resize", () => {
+  if (isAndroidWebView()) {
+    setTimeout(() => injectSafeAreaInsets(), 100);
+  }
+});
+
+// Export for use in other modules
+export { injectSafeAreaInsets, isAndroidWebView };
diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 403a1fbe..21adf7cf 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -17,20 +17,40 @@
 
     <!-- Results List -->
     <ul class="border-t border-slate-300">
+      <!-- "You" entity -->
+      <li v-if="shouldShowYouEntity" class="border-b border-slate-300 py-3">
+        <h2 class="text-base flex gap-4 items-center">
+          <span class="grow flex gap-2 items-center font-medium">
+            <font-awesome icon="hand" class="text-blue-500 text-4xl shrink-0" />
+            <span class="text-ellipsis overflow-hidden text-blue-500">You</span>
+          </span>
+          <span class="text-right">
+            <button
+              type="button"
+              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"
+              @click="openDialog({ did: activeDid, name: 'You' })"
+            >
+              <font-awesome icon="gift" class="fa-fw"></font-awesome>
+            </button>
+          </span>
+        </h2>
+      </li>
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
           <span class="grow flex gap-2 items-center font-medium">
             <font-awesome
               icon="circle-question"
-              class="text-slate-400 text-4xl"
+              class="text-slate-400 text-4xl shrink-0"
             />
-            <span class="italic text-slate-400">(Not Named)</span>
+            <span class="text-ellipsis overflow-hidden italic text-slate-500">{{
+              unnamedEntityName
+            }}</span>
           </span>
           <span class="text-right">
             <button
               type="button"
               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"
-              @click="openDialog('Unnamed')"
+              @click="openDialog({ did: '', name: unnamedEntityName })"
             >
               <font-awesome icon="gift" class="fa-fw"></font-awesome>
             </button>
@@ -43,14 +63,22 @@
         class="border-b border-slate-300 py-3"
       >
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow flex gap-2 items-center font-medium">
+          <span
+            class="grow flex gap-2 items-center font-medium overflow-hidden"
+          >
             <EntityIcon
               :contact="contact"
               :icon-size="34"
-              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden"
+              class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden shrink-0"
             />
-            <span v-if="contact.name">{{ contact.name }}</span>
-            <span v-else class="italic text-slate-400">(No name)</span>
+            <span v-if="contact.name" class="text-ellipsis overflow-hidden">{{
+              contact.name
+            }}</span>
+            <span
+              v-else
+              class="text-ellipsis overflow-hidden italic text-slate-500"
+              >{{ contact.did }}</span
+            >
           </span>
           <span class="text-right">
             <button
@@ -72,6 +100,7 @@
       :from-project-id="fromProjectId"
       :to-project-id="toProjectId"
       :is-from-project-view="isFromProjectView"
+      :hide-show-all="true"
     />
   </section>
 </template>
@@ -89,6 +118,7 @@ import { GiverReceiverInputInfo } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
   mixins: [PlatformServiceMixin],
@@ -188,147 +218,151 @@ export default class ContactGiftingView extends Vue {
     }
   }
 
-  openDialog(contact?: GiverReceiverInputInfo | "Unnamed") {
-    if (contact === "Unnamed") {
-      // Special case: Handle "Unnamed" contacts for both givers and recipients
-      let recipient: GiverReceiverInputInfo;
-      let giver: GiverReceiverInputInfo | undefined;
+  openDialog(contact?: GiverReceiverInputInfo) {
+    // Determine the selected entity based on contact type
+    const selectedEntity = this.createEntityFromContact(contact);
 
-      if (this.stepType === "giver") {
-        // We're selecting a giver, so preserve the existing recipient from context
-        if (this.recipientEntityType === "project") {
-          recipient = {
-            did: this.recipientProjectHandleId,
-            name: this.recipientProjectName,
-            image: this.recipientProjectImage,
-            handleId: this.recipientProjectHandleId,
-          };
-        } else {
-          // Preserve the existing recipient from context
-          if (this.recipientDid === this.activeDid) {
-            // Recipient was "You"
-            recipient = { did: this.activeDid, name: "You" };
-          } else if (this.recipientDid) {
-            // Recipient was a regular contact
-            recipient = {
-              did: this.recipientDid,
-              name: this.recipientProjectName || "Someone",
-            };
-          } else {
-            // Fallback to "You" if no recipient was previously selected
-            recipient = { did: this.activeDid, name: "You" };
-          }
-        }
-        giver = undefined; // Will be set to "Unnamed" in GiftedDialog
-      } else {
-        // We're selecting a recipient, so recipient is "Unnamed" and giver is preserved from context
-        recipient = { did: "", name: "Unnamed" };
+    // Create giver and recipient based on step type and selected entity
+    const { giver, recipient } = this.createGiverAndRecipient(selectedEntity);
 
-        // Preserve the existing giver from the context
-        if (this.giverEntityType === "project") {
-          giver = {
-            did: this.giverProjectHandleId,
-            name: this.giverProjectName,
-            image: this.giverProjectImage,
-            handleId: this.giverProjectHandleId,
-          };
-        } else if (this.giverDid) {
-          giver = {
-            did: this.giverDid,
-            name: this.giverProjectName || "Someone",
-          };
-        } else {
-          giver = { did: this.activeDid, name: "You" };
-        }
-      }
+    // Open the dialog
+    (this.$refs.giftedDialog as GiftedDialog).open(
+      giver,
+      recipient,
+      this.offerId,
+      this.prompt,
+      this.description,
+      this.amountInput,
+      this.unitCode,
+    );
 
-      (this.$refs.giftedDialog as GiftedDialog).open(
-        giver,
-        recipient,
-        this.offerId,
-        this.prompt,
-        this.description,
-        this.amountInput,
-        this.unitCode,
-      );
+    // Move to Step 2 - entities are already set by the open() call
+    (this.$refs.giftedDialog as GiftedDialog).moveToStep2();
+  }
+
+  /**
+   * Creates an entity object from the contact parameter
+   * Uses DID-based logic to determine "You" and "Unnamed" entities
+   */
+  private createEntityFromContact(
+    contact?: GiverReceiverInputInfo,
+  ): GiverReceiverInputInfo | undefined {
+    if (!contact) {
+      return undefined;
+    }
 
-      // Move to Step 2 - entities are already set by the open() call
-      (this.$refs.giftedDialog as GiftedDialog).moveToStep2();
+    // Handle GiverReceiverInputInfo object
+    if (contact.did === this.activeDid) {
+      // If DID matches active DID, create "You" entity
+      return { did: this.activeDid, name: "You" };
+    } else if (!contact.did || contact.did === "") {
+      // If DID is empty/null, create "Unnamed" entity
+      return { did: "", name: UNNAMED_ENTITY_NAME };
     } else {
-      // Regular case: contact is a GiverReceiverInputInfo
-      let giver: GiverReceiverInputInfo;
-      let recipient: GiverReceiverInputInfo;
+      // Create a copy of the contact to avoid modifying the original
+      return { ...contact };
+    }
+  }
 
-      if (this.stepType === "giver") {
-        // We're selecting a giver, so the contact becomes the giver
-        giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+  /**
+   * Creates giver and recipient objects based on step type and selected entity
+   */
+  private createGiverAndRecipient(selectedEntity?: GiverReceiverInputInfo): {
+    giver: GiverReceiverInputInfo | undefined;
+    recipient: GiverReceiverInputInfo;
+  } {
+    if (this.stepType === "giver") {
+      // We're selecting a giver, so the selected entity becomes the giver
+      const giver = selectedEntity;
+      const recipient = this.createRecipientFromContext();
+      return { giver, recipient };
+    } else {
+      // We're selecting a recipient, so the selected entity becomes the recipient
+      const recipient = selectedEntity || {
+        did: "",
+        name: UNNAMED_ENTITY_NAME,
+      };
+      const giver = this.createGiverFromContext();
+      return { giver, recipient };
+    }
+  }
 
-        // Preserve the existing recipient from the context
-        if (this.recipientEntityType === "project") {
-          recipient = {
-            did: this.recipientProjectHandleId,
-            name: this.recipientProjectName,
-            image: this.recipientProjectImage,
-            handleId: this.recipientProjectHandleId,
-          };
-        } else {
-          // Check if the preserved recipient was "You" or a regular contact
-          if (this.recipientDid === this.activeDid) {
-            // Recipient was "You"
-            recipient = { did: this.activeDid, name: "You" };
-          } else if (this.recipientDid) {
-            // Recipient was a regular contact
-            recipient = {
-              did: this.recipientDid,
-              name: this.recipientProjectName || "Someone",
-            };
-          } else {
-            // Fallback to "Unnamed"
-            recipient = { did: "", name: "Unnamed" };
-          }
-        }
+  /**
+   * Creates recipient object from context (preserves existing recipient)
+   */
+  private createRecipientFromContext(): GiverReceiverInputInfo {
+    if (this.recipientEntityType === "project") {
+      return {
+        name: this.recipientProjectName,
+        image: this.recipientProjectImage,
+        handleId: this.recipientProjectHandleId,
+      };
+    } else {
+      if (this.recipientDid === this.activeDid) {
+        return { did: this.activeDid, name: "You" };
+      } else if (this.recipientDid) {
+        return {
+          did: this.recipientDid,
+          name: this.recipientProjectName,
+        };
       } else {
-        // We're selecting a recipient, so the contact becomes the recipient
-        recipient = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined
+        return { did: "", name: UNNAMED_ENTITY_NAME };
+      }
+    }
+  }
 
-        // Preserve the existing giver from the context
-        if (this.giverEntityType === "project") {
-          giver = {
-            did: this.giverProjectHandleId,
-            name: this.giverProjectName,
-            image: this.giverProjectImage,
-            handleId: this.giverProjectHandleId,
-          };
-        } else {
-          // Check if the preserved giver was "You" or a regular contact
-          if (this.giverDid === this.activeDid) {
-            // Giver was "You"
-            giver = { did: this.activeDid, name: "You" };
-          } else if (this.giverDid) {
-            // Giver was a regular contact
-            giver = {
-              did: this.giverDid,
-              name: this.giverProjectName || "Someone",
-            };
-          } else {
-            // Fallback to "Unnamed"
-            giver = { did: "", name: "Unnamed" };
-          }
-        }
+  /**
+   * Creates giver object from context (preserves existing giver)
+   */
+  private createGiverFromContext(): GiverReceiverInputInfo {
+    if (this.giverEntityType === "project") {
+      return {
+        name: this.giverProjectName,
+        image: this.giverProjectImage,
+        handleId: this.giverProjectHandleId,
+      };
+    } else {
+      if (this.giverDid === this.activeDid) {
+        return { did: this.activeDid, name: "You" };
+      } else if (this.giverDid) {
+        return {
+          did: this.giverDid,
+          name: this.giverProjectName,
+        };
+      } else {
+        return { did: "", name: UNNAMED_ENTITY_NAME };
       }
+    }
+  }
 
-      (this.$refs.giftedDialog as GiftedDialog).open(
-        giver,
-        recipient,
-        this.offerId,
-        this.prompt,
-        this.description,
-        this.amountInput,
-        this.unitCode,
-      );
+  /**
+   * Get the unnamed entity name constant
+   */
+  get unnamedEntityName(): string {
+    return UNNAMED_ENTITY_NAME;
+  }
 
-      // Move to Step 2 - entities are already set by the open() call
-      (this.$refs.giftedDialog as GiftedDialog).moveToStep2();
+  get shouldShowYouEntity(): boolean {
+    if (this.stepType === "giver") {
+      // When selecting a giver, show "You" if the current recipient is not "You"
+      // This prevents selecting yourself as both giver and recipient
+      if (this.recipientEntityType === "project") {
+        // If recipient is a project, we can select "You" as giver
+        return true;
+      } else {
+        // If recipient is a person, check if it's not "You"
+        return this.recipientDid !== this.activeDid;
+      }
+    } else {
+      // When selecting a recipient, show "You" if the current giver is not "You"
+      // This prevents selecting yourself as both giver and recipient
+      if (this.giverEntityType === "project") {
+        // If giver is a project, we can select "You" as recipient
+        return true;
+      } else {
+        // If giver is a person, check if it's not "You"
+        return this.giverDid !== this.activeDid;
+      }
     }
   }
 }
diff --git a/src/views/ContactQRScanFullView.vue b/src/views/ContactQRScanFullView.vue
index 8b8eb8dd..bb52bea4 100644
--- a/src/views/ContactQRScanFullView.vue
+++ b/src/views/ContactQRScanFullView.vue
@@ -220,21 +220,21 @@ export default class ContactQRScanFull extends Vue {
    * Computed property for QR code container CSS classes
    */
   get qrContainerClasses(): string {
-    return "block w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto mt-4";
+    return "block w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto mt-4";
   }
 
   /**
    * Computed property for camera frame CSS classes
    */
   get cameraFrameClasses(): string {
-    return "relative w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto border border-dashed border-white mt-8 aspect-square";
+    return "relative w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto border border-dashed border-white mt-8 aspect-square";
   }
 
   /**
    * Computed property for main content container CSS classes
    */
   get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto";
+    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   /**
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 76280239..bdf86a84 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -140,7 +140,7 @@ import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import QRCodeVue3 from "qr-code-generator-vue3";
 import { Component, Vue } from "vue-facing-decorator";
-import { useClipboard } from "@vueuse/core";
+
 import { QrcodeStream } from "vue-qrcode-reader";
 
 import QuickNav from "../components/QuickNav.vue";
@@ -183,8 +183,6 @@ import {
   NOTIFY_QR_PROCESSING_ERROR,
   createQRContactAddedMessage,
   createQRRegistrationSuccessMessage,
-  QR_TIMEOUT_SHORT,
-  QR_TIMEOUT_MEDIUM,
   QR_TIMEOUT_STANDARD,
   QR_TIMEOUT_LONG,
 } from "@/constants/notifications";
@@ -259,11 +257,11 @@ export default class ContactQRScanShow extends Vue {
   }
 
   get qrCodeContainerClasses(): string {
-    return "block w-[90vw] max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto my-4";
+    return "block w-[90vw] max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto my-4";
   }
 
   get scannerContainerClasses(): string {
-    return "relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto";
+    return "relative aspect-square overflow-hidden bg-slate-800 w-[90vw] max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   get statusMessageClasses(): string {
@@ -544,11 +542,7 @@ export default class ContactQRScanShow extends Vue {
       did: contact.did,
       name: contact.name,
     });
-    this.notify.toast(
-      "Submitted",
-      NOTIFY_QR_REGISTRATION_SUBMITTED.message,
-      QR_TIMEOUT_SHORT,
-    );
+    this.notify.toast("Submitted", NOTIFY_QR_REGISTRATION_SUBMITTED.message);
 
     try {
       const regResult = await register(
@@ -624,18 +618,15 @@ export default class ContactQRScanShow extends Vue {
       );
 
       // Copy the URL to clipboard
-      useClipboard()
-        .copy(jwtUrl)
-        .then(() => {
-          this.notify.toast(
-            "Copied",
-            NOTIFY_QR_URL_COPIED.message,
-            QR_TIMEOUT_MEDIUM,
-          );
-        });
+      const { copyToClipboard } = await import("../services/ClipboardService");
+      await copyToClipboard(jwtUrl);
+      this.notify.toast(
+        NOTIFY_QR_URL_COPIED.title,
+        NOTIFY_QR_URL_COPIED.message,
+      );
     } catch (error) {
-      logger.error("Failed to generate contact URL:", error);
-      this.notify.error("Failed to generate contact URL. Please try again.");
+      this.$logAndConsole(`Error copying URL to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy URL to clipboard.");
     }
   }
 
@@ -643,13 +634,16 @@ export default class ContactQRScanShow extends Vue {
     this.notify.info(NOTIFY_QR_CODE_HELP.message, QR_TIMEOUT_LONG);
   }
 
-  onCopyDidToClipboard() {
+  async onCopyDidToClipboard() {
     //this.onScanDetect([{ rawValue: this.qrValue }]); // good for testing
-    useClipboard()
-      .copy(this.activeDid)
-      .then(() => {
-        this.notify.info(NOTIFY_QR_DID_COPIED.message, QR_TIMEOUT_LONG);
-      });
+    try {
+      const { copyToClipboard } = await import("../services/ClipboardService");
+      await copyToClipboard(this.activeDid);
+      this.notify.info(NOTIFY_QR_DID_COPIED.message, QR_TIMEOUT_LONG);
+    } catch (error) {
+      this.$logAndConsole(`Error copying DID to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy DID to clipboard.");
+    }
   }
 
   openUserNameDialog() {
@@ -745,7 +739,6 @@ export default class ContactQRScanShow extends Vue {
       ) {
         setTimeout(() => {
           this.notify.confirm(
-            "Register",
             "Do you want to register them?",
             {
               onCancel: async (stopAsking?: boolean) => {
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 6c670f26..2ed7611f 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -130,10 +130,9 @@ import { JWTPayload } from "did-jwt";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
-import { useClipboard } from "@vueuse/core";
-// Capacitor import removed - using PlatformService instead
 
 import QuickNav from "../components/QuickNav.vue";
+import { copyToClipboard } from "../services/ClipboardService";
 import EntityIcon from "../components/EntityIcon.vue";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
@@ -1192,12 +1191,14 @@ export default class ContactsView extends Vue {
     });
     // Use production URL for sharing to avoid localhost issues in development
     const contactsJwtUrl = `${APP_SERVER}/deep-link/contact-import/${contactsJwt}`;
-    useClipboard()
-      .copy(contactsJwtUrl)
-      .then(() => {
-        // Use notification helper
-        this.notify.copied(NOTIFY_CONTACT_LINK_COPIED.message);
-      });
+    try {
+      await copyToClipboard(contactsJwtUrl);
+      // Use notification helper
+      this.notify.copied(NOTIFY_CONTACT_LINK_COPIED.message);
+    } catch (error) {
+      this.$logAndConsole(`Error copying to clipboard: ${error}`, true);
+      this.notify.error("Failed to copy to clipboard. Please try again.");
+    }
   }
 
   private showCopySelectionsInfo() {
diff --git a/src/views/DIDView.vue b/src/views/DIDView.vue
index a6212ece..10e76057 100644
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -290,6 +290,7 @@ import {
   NOTIFY_SERVER_ACCESS_ERROR,
   NOTIFY_NO_IDENTITY_ERROR,
 } from "@/constants/notifications";
+import { THAT_UNNAMED_PERSON } from "@/constants/entities";
 
 /**
  * DIDView Component
@@ -551,7 +552,7 @@ export default class DIDView extends Vue {
         contact.registered = true;
         await this.$updateContact(contact.did, { registered: true });
 
-        const name = contact.name || "That unnamed person";
+        const name = contact.name || THAT_UNNAMED_PERSON;
         this.notify.success(
           `${name} ${NOTIFY_REGISTRATION_SUCCESS.message}`,
           TIMEOUTS.LONG,
@@ -831,26 +832,3 @@ export default class DIDView extends Vue {
   }
 }
 </script>
-
-<style>
-.dialog-overlay {
-  z-index: 50;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1.5rem;
-}
-.dialog {
-  background-color: white;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  width: 100%;
-  max-width: 500px;
-}
-</style>
diff --git a/src/views/DeepLinkErrorView.vue b/src/views/DeepLinkErrorView.vue
index a3b53b09..803b1d5e 100644
--- a/src/views/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="deep-link-error">
-    <div class="safe-area-spacer"></div>
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <h1>Invalid Deep Link</h1>
     <div class="error-details">
       <div class="error-message">
@@ -39,7 +39,7 @@
         </li>
       </ul>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -114,18 +114,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.deep-link-error {
-  padding-top: 60px;
-  padding-left: 20px;
-  padding-right: 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.safe-area-spacer {
-  height: env(safe-area-inset-top);
-}
-
 h1 {
   color: #ff4444;
   margin-bottom: 24px;
diff --git a/src/views/DeepLinkRedirectView.vue b/src/views/DeepLinkRedirectView.vue
index 8d2cb08c..a4a88572 100644
--- a/src/views/DeepLinkRedirectView.vue
+++ b/src/views/DeepLinkRedirectView.vue
@@ -1,96 +1,88 @@
 <template>
   <!-- CONTENT -->
-  <section id="Content" class="relative w-[100vw] h-[100vh]">
-    <div
-      class="p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto"
-    >
-      <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative mb-4">
-          Redirecting to Time Safari
-        </h1>
-
-        <div v-if="destinationUrl" class="space-y-4">
-          <!-- Platform-specific messaging -->
-          <div class="text-center text-gray-600 mb-4">
-            <p v-if="isMobile">
-              {{
-                isIOS
-                  ? "Opening Time Safari app on your iPhone..."
-                  : "Opening Time Safari app on your Android device..."
-              }}
-            </p>
-            <p v-else>Opening Time Safari app...</p>
-            <p class="text-sm mt-2">
-              <span v-if="isMobile"
-                >If the app doesn't open automatically, use one of these
-                options:</span
-              >
-              <span v-else>Choose how you'd like to open this link:</span>
-            </p>
-          </div>
-
-          <!-- Deep Link Button -->
-          <div class="text-center">
-            <a
-              :href="deepLinkUrl || '#'"
-              class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
-              @click="handleDeepLinkClick"
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <div class="mb-4">
+      <h1 class="text-2xl text-center font-semibold relative px-7">
+        Redirecting to Time Safari
+      </h1>
+
+      <div v-if="destinationUrl" class="space-y-4">
+        <!-- Platform-specific messaging -->
+        <div class="text-center text-gray-600 mb-4">
+          <p v-if="isMobile">
+            {{
+              isIOS
+                ? "Opening Time Safari app on your iPhone..."
+                : "Opening Time Safari app on your Android device..."
+            }}
+          </p>
+          <p v-else>Opening Time Safari app...</p>
+          <p class="text-sm mt-2">
+            <span v-if="isMobile"
+              >If the app doesn't open automatically, use one of these
+              options:</span
             >
-              <span v-if="isMobile">Open in Time Safari App</span>
-              <span v-else>Try Opening in Time Safari App</span>
-            </a>
-          </div>
-
-          <!-- Web Fallback Link -->
-          <div class="text-center">
-            <a
-              :href="webUrl || '#'"
-              target="_blank"
-              class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
-              @click="handleWebFallbackClick"
-            >
-              <span v-if="isMobile">Open in Web Browser Instead</span>
-              <span v-else>Open in Web Browser</span>
-            </a>
-          </div>
-
-          <!-- Manual Instructions -->
-          <div class="text-center text-sm text-gray-500 mt-4">
-            <p v-if="isMobile">
-              Or manually open:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
-                deepLinkUrl
-              }}</code>
-            </p>
-            <p v-else>
-              If you have the Time Safari app installed, you can also copy this
-              link:
-              <code class="bg-gray-100 px-2 py-1 rounded">{{
-                deepLinkUrl
-              }}</code>
-            </p>
-          </div>
-
-          <!-- Platform info for debugging -->
-          <div
-            v-if="isDevelopment"
-            class="text-center text-xs text-gray-400 mt-4"
+            <span v-else>Choose how you'd like to open this link:</span>
+          </p>
+        </div>
+
+        <!-- Deep Link Button -->
+        <div class="text-center">
+          <a
+            :href="deepLinkUrl || '#'"
+            class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+            @click="handleDeepLinkClick"
+          >
+            <span v-if="isMobile">Open in Time Safari App</span>
+            <span v-else>Try Opening in Time Safari App</span>
+          </a>
+        </div>
+
+        <!-- Web Fallback Link -->
+        <div class="text-center">
+          <a
+            :href="webUrl || '#'"
+            target="_blank"
+            class="inline-block bg-gray-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition-colors"
+            @click="handleWebFallbackClick"
           >
-            <p>
-              Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }}
-            </p>
-            <p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
-          </div>
+            <span v-if="isMobile">Open in Web Browser Instead</span>
+            <span v-else>Open in Web Browser</span>
+          </a>
         </div>
 
-        <div v-else-if="pageError" class="text-center text-red-500 mb-4">
-          {{ pageError }}
+        <!-- Manual Instructions -->
+        <div class="text-center text-sm text-gray-500 mt-4">
+          <p v-if="isMobile">
+            Or manually open:
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
+          </p>
+          <p v-else>
+            If you have the Time Safari app installed, you can also copy this
+            link:
+            <code class="bg-gray-100 px-2 py-1 rounded">{{ deepLinkUrl }}</code>
+          </p>
         </div>
 
-        <div v-else class="text-center text-gray-600">
-          <p>Processing redirect...</p>
+        <!-- Platform info for debugging -->
+        <div
+          v-if="isDevelopment"
+          class="text-center text-xs text-gray-400 mt-4"
+        >
+          <p>
+            Platform: {{ isMobile ? (isIOS ? "iOS" : "Android") : "Desktop" }}
+          </p>
+          <p>User Agent: {{ userAgent.substring(0, 50) }}...</p>
         </div>
       </div>
+
+      <div v-else-if="pageError" class="text-center text-red-500 mb-4">
+        {{ pageError }}
+      </div>
+
+      <div v-else class="text-center text-gray-600">
+        <p>Processing redirect...</p>
+      </div>
     </div>
   </section>
 </template>
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index b6f3dd8c..2a8879e0 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -233,7 +233,7 @@
 
               <div class="grow">
                 <h2 class="text-base font-semibold">
-                  {{ project.name || "Unnamed Project" }}
+                  {{ project.name || unnamedProject }}
                 </h2>
                 <div class="text-sm">
                   <font-awesome
@@ -340,6 +340,7 @@ import {
   NOTIFY_DISCOVER_LOCAL_SEARCH_ERROR,
   NOTIFY_DISCOVER_MAP_SEARCH_ERROR,
 } from "@/constants/notifications";
+import { UNNAMED_PROJECT } from "@/constants/entities";
 interface Tile {
   indexLat: number;
   indexLon: number;
@@ -370,6 +371,13 @@ export default class DiscoverView extends Vue {
 
   notify!: ReturnType<typeof createNotifyHelpers>;
 
+  /**
+   * Get the unnamed project constant
+   */
+  get unnamedProject(): string {
+    return UNNAMED_PROJECT;
+  }
+
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index a3668db1..5604eae6 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -200,7 +200,7 @@
       </p>
       <p>
         Then you can record your appreciation for... whatever: select any contact on the home page
-        (or "Unnamed") and send it. The main goal is to record what people
+        (or "{{ unnamedEntityName }}") and send it. The main goal is to record what people
         have given you, to grow giving economies. You can also record your own
         ideas for projects. Each claim is recorded on a
         custom ledger.
@@ -600,6 +600,7 @@ import QuickNav from "../components/QuickNav.vue";
 import { APP_SERVER } from "../constants/app";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { QRNavigationService } from "@/services/QRNavigationService";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 /**
  * HelpView.vue - Comprehensive Help System Component
@@ -647,6 +648,13 @@ export default class HelpView extends Vue {
   APP_SERVER = APP_SERVER;
   // Capacitor reference removed - using QRNavigationService instead
 
+  /**
+   * Get the unnamed entity name constant
+   */
+  get unnamedEntityName(): string {
+    return UNNAMED_ENTITY_NAME;
+  }
+
   // Ideally, we put no functionality in here, especially in the setup,
   // because we never want this page to have a chance of throwing an error.
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d3cc9444..45a5d5bb 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -282,6 +282,7 @@ import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { NOTIFY_CONTACT_LOADING_ISSUE } from "@/constants/notifications";
 import * as Package from "../../package.json";
+import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
 // consolidate this with GiveActionClaim in src/interfaces/claims.ts
 interface Claim {
@@ -1563,30 +1564,41 @@ export default class HomeView extends Vue {
    * @param giver Optional contact info for giver
    * @param description Optional gift description
    */
-  openDialog(giver?: GiverReceiverInputInfo | "Unnamed", prompt?: string) {
-    if (giver === "Unnamed") {
-      // Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
-      (this.$refs.giftedDialog as GiftedDialog).open(
-        undefined,
-        {
-          did: this.activeDid,
-          name: "You",
-        } as GiverReceiverInputInfo,
-        undefined,
-        prompt,
-      );
-      // Immediately select "Unnamed" and move to Step 2
-      (this.$refs.giftedDialog as GiftedDialog).selectGiver();
+  openDialog(giver?: GiverReceiverInputInfo, prompt?: string) {
+    // Determine the giver entity based on DID logic
+    const giverEntity = this.createGiverEntity(giver);
+
+    (this.$refs.giftedDialog as GiftedDialog).open(
+      giverEntity,
+      {
+        did: this.activeDid,
+        name: "You", // In HomeView, we always use "You" as the giver
+      } as GiverReceiverInputInfo,
+      undefined,
+      prompt,
+    );
+  }
+
+  /**
+   * Creates giver entity using DID-based logic
+   */
+  private createGiverEntity(
+    giver?: GiverReceiverInputInfo,
+  ): GiverReceiverInputInfo | undefined {
+    if (!giver) {
+      return undefined;
+    }
+
+    // Handle GiverReceiverInputInfo object
+    if (giver.did === this.activeDid) {
+      // If DID matches active DID, create "You" entity
+      return { did: this.activeDid, name: "You" };
+    } else if (!giver.did || giver.did === "") {
+      // If DID is empty/null, create "Unnamed" entity
+      return { did: "", name: UNNAMED_ENTITY_NAME };
     } else {
-      (this.$refs.giftedDialog as GiftedDialog).open(
-        giver,
-        {
-          did: this.activeDid,
-          name: "You",
-        } as GiverReceiverInputInfo,
-        undefined,
-        prompt,
-      );
+      // Return the giver as-is
+      return giver;
     }
   }
 
@@ -1649,10 +1661,15 @@ export default class HomeView extends Vue {
     this.isImageViewerOpen = true;
   }
 
-  openPersonDialog(
-    giver?: GiverReceiverInputInfo | "Unnamed",
-    prompt?: string,
-  ) {
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
+
+  openPersonDialog(giver?: GiverReceiverInputInfo, prompt?: string) {
     this.showProjectsDialog = false;
     this.openDialog(giver, prompt);
   }
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index f0a5a4c1..eb36f6e6 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -183,7 +183,7 @@
                 class="text-blue-500"
                 @click="onClickLoadProject(plan.handleId)"
               >
-                {{ plan.name || "Unnamed Project" }}
+                {{ plan.name || unnamedProject }}
               </button>
             </div>
             <div v-if="fulfillersToHitLimit" class="text-center">
@@ -207,7 +207,7 @@
               class="text-blue-500"
               @click="onClickLoadProject(fulfilledByThis.handleId)"
             >
-              {{ fulfilledByThis.name || "Unnamed Project" }}
+              {{ fulfilledByThis.name || unnamedProject }}
             </button>
           </div>
         </div>
@@ -611,6 +611,7 @@ import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
 import { APP_SERVER } from "@/constants/app";
+import { UNNAMED_PROJECT } from "@/constants/entities";
 /**
  * Project View Component
  * @author Matthew Raymer
@@ -664,6 +665,13 @@ export default class ProjectViewView extends Vue {
   /** Notification helpers instance */
   notify!: ReturnType<typeof createNotifyHelpers>;
 
+  /**
+   * Get the unnamed project constant
+   */
+  get unnamedProject(): string {
+    return UNNAMED_PROJECT;
+  }
+
   // Account and Settings State
   /** Currently active DID */
   activeDid = "";
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index e8709210..9af4aaef 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -244,7 +244,7 @@
 
             <div class="grow overflow-hidden">
               <h2 class="text-base font-semibold">
-                {{ project.name || "Unnamed Project" }}
+                {{ project.name || unnamedProject }}
               </h2>
               <div class="text-sm truncate">
                 {{ project.description }}
@@ -286,6 +286,7 @@ import {
   NOTIFY_OFFERS_LOAD_ERROR,
   NOTIFY_OFFERS_FETCH_ERROR,
 } from "@/constants/notifications";
+import { UNNAMED_PROJECT } from "@/constants/entities";
 
 /**
  * Projects View Component
@@ -324,6 +325,13 @@ export default class ProjectsView extends Vue {
 
   notify!: ReturnType<typeof createNotifyHelpers>;
 
+  /**
+   * Get the unnamed project constant
+   */
+  get unnamedProject(): string {
+    return UNNAMED_PROJECT;
+  }
+
   // User account state
   activeDid = "";
   allContacts: Array<Contact> = [];
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index 2316b1d2..0476352e 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -144,8 +144,8 @@ export default class ShareMyContactInfoView extends Vue {
    * Copy the contact message to clipboard
    */
   private async copyToClipboard(message: string): Promise<void> {
-    const { useClipboard } = await import("@vueuse/core");
-    await useClipboard().copy(message);
+    const { copyToClipboard } = await import("../services/ClipboardService");
+    await copyToClipboard(message);
   }
 
   /**
diff --git a/test-playwright/00-noid-tests.spec.ts b/test-playwright/00-noid-tests.spec.ts
index e4b874af..a1180740 100644
--- a/test-playwright/00-noid-tests.spec.ts
+++ b/test-playwright/00-noid-tests.spec.ts
@@ -69,6 +69,7 @@
  */
 
 import { test, expect } from '@playwright/test';
+import { UNNAMED_ENTITY_NAME } from '../src/constants/entities';
 import { deleteContact, generateAndRegisterEthrUser, importUser } from './testUtils';
 
 test('Check activity feed - check that server is running', async ({ page }) => {
@@ -177,7 +178,7 @@ test('Check User 0 can register a random person', async ({ page }) => {
   await page.goto('./');
   await page.getByTestId('closeOnboardingAndFinish').click();
   await page.getByRole('button', { name: 'Person' }).click();
-  await page.getByRole('listitem').filter({ hasText: 'Unnamed' }).locator('svg').click();
+      await page.getByRole('listitem').filter({ hasText: UNNAMED_ENTITY_NAME }).locator('svg').click();
   await page.getByPlaceholder('What was given').fill('Gave me access!');
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That gift was recorded.')).toBeVisible();
diff --git a/test-playwright/30-record-gift.spec.ts b/test-playwright/30-record-gift.spec.ts
index d8ee9698..cd942236 100644
--- a/test-playwright/30-record-gift.spec.ts
+++ b/test-playwright/30-record-gift.spec.ts
@@ -79,6 +79,7 @@
  * ```
  */
 import { test, expect } from '@playwright/test';
+import { UNNAMED_ENTITY_NAME } from '../src/constants/entities';
 import { importUser } from './testUtils';
 
 test('Record something given', async ({ page }) => {
@@ -101,7 +102,7 @@ test('Record something given', async ({ page }) => {
   await page.goto('./');
   await page.getByTestId('closeOnboardingAndFinish').click();
   await page.getByRole('button', { name: 'Person' }).click();
-  await page.getByRole('listitem').filter({ hasText: 'Unnamed' }).locator('svg').click();
+      await page.getByRole('listitem').filter({ hasText: UNNAMED_ENTITY_NAME }).locator('svg').click();
   await page.getByPlaceholder('What was given').fill(finalTitle);
   await page.getByRole('spinbutton').fill(randomNonZeroNumber.toString());
   await page.getByRole('button', { name: 'Sign & Send' }).click();
diff --git a/test-playwright/33-record-gift-x10.spec.ts b/test-playwright/33-record-gift-x10.spec.ts
index f0dfeef4..37c5eb02 100644
--- a/test-playwright/33-record-gift-x10.spec.ts
+++ b/test-playwright/33-record-gift-x10.spec.ts
@@ -85,6 +85,7 @@
  */
 
 import { test, expect } from '@playwright/test';
+import { UNNAMED_ENTITY_NAME } from '../src/constants/entities';
 import { importUser, createUniqueStringsArray, createRandomNumbersArray  } from './testUtils';
 
 test('Record 9 new gifts', async ({ page }) => {
@@ -116,7 +117,7 @@ test('Record 9 new gifts', async ({ page }) => {
       await page.getByTestId('closeOnboardingAndFinish').click();
     }
     await page.getByRole('button', { name: 'Person' }).click();
-    await page.getByRole('listitem').filter({ hasText: 'Unnamed' }).locator('svg').click();
+    await page.getByRole('listitem').filter({ hasText: UNNAMED_ENTITY_NAME }).locator('svg').click();
     await page.getByPlaceholder('What was given').fill(finalTitles[i]);
     await page.getByRole('spinbutton').fill(finalNumbers[i].toString());
     await page.getByRole('button', { name: 'Sign & Send' }).click();