diff --git a/app/(tabs)/beneficiaries/[id]/index.tsx b/app/(tabs)/beneficiaries/[id]/index.tsx
index c19b9d0..6d3c21d 100644
--- a/app/(tabs)/beneficiaries/[id]/index.tsx
+++ b/app/(tabs)/beneficiaries/[id]/index.tsx
@@ -403,7 +403,7 @@ export default function BeneficiaryDetailScreen() {
               </View>
             )}
           </TouchableOpacity>
-          <Text style={styles.headerTitle}>{beneficiary.customName || beneficiary.name}</Text>
+          <Text style={styles.headerTitle}>{beneficiary.displayName}</Text>
         </View>
 
         <BeneficiaryMenu
@@ -499,7 +499,7 @@ export default function BeneficiaryDetailScreen() {
                 />
               }
             >
-              <MockDashboard beneficiaryName={beneficiary.customName || beneficiary.name} />
+              <MockDashboard beneficiaryName={beneficiary.displayName} />
             </ScrollView>
           )}
         </View>
diff --git a/contexts/BeneficiaryContext.tsx b/contexts/BeneficiaryContext.tsx
index 74079c9..2bcd160 100644
--- a/contexts/BeneficiaryContext.tsx
+++ b/contexts/BeneficiaryContext.tsx
@@ -65,6 +65,7 @@ export function BeneficiaryProvider({ children }: { children: React.ReactNode })
     const newBeneficiary: Beneficiary = {
       id: Date.now(), // Use timestamp as unique ID
       name: beneficiaryData.name.trim(),
+      displayName: beneficiaryData.name.trim(), // For UI display
       address: beneficiaryData.address?.trim(),
       avatar: beneficiaryData.avatar,
       status: 'offline',
diff --git a/services/api.ts b/services/api.ts
index e83de54..727a73a 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -536,6 +536,7 @@ class ApiService {
       {
         id: 1,
         name: 'Julia Smith',
+        displayName: 'Julia Smith',
         status: 'online',
         relationship: 'Mother',
         last_activity: '2 min ago',
@@ -550,6 +551,7 @@ class ApiService {
       {
         id: 2,
         name: 'Robert Johnson',
+        displayName: 'Robert Johnson',
         status: 'offline',
         relationship: 'Father',
         last_activity: '1 hour ago',
@@ -583,6 +585,7 @@ class ApiService {
     const beneficiary: Beneficiary = {
       id: deploymentId,
       name: data.name,
+      displayName: data.name, // For UI display
       avatar: getAvatarForBeneficiary(deploymentId),
       status: isRecent ? 'online' : 'offline',
       address: data.address,
@@ -674,6 +677,7 @@ class ApiService {
         id: item.id,
         name: item.name || item.email,
         customName: item.customName || null, // User's custom name for this beneficiary
+        displayName: item.customName || item.name || item.email, // For UI display
         avatar: item.avatarUrl || undefined, // Use uploaded avatar from server
         status: 'offline' as const,
         email: item.email,
@@ -727,6 +731,7 @@ class ApiService {
         id: data.id,
         name: data.name || data.email,
         customName: data.customName || null, // User's custom name for this beneficiary
+        displayName: data.customName || data.name || data.email, // For UI display
         avatar: data.avatarUrl || undefined,
         status: 'offline' as const,
         email: data.email,
@@ -823,6 +828,7 @@ class ApiService {
       const beneficiary: Beneficiary = {
         id: result.beneficiary.id,
         name: result.beneficiary.name || '',
+        displayName: result.beneficiary.name || '', // For UI display
         status: 'offline' as const,
       };
 
diff --git a/types/index.ts b/types/index.ts
index 98f8e9c..020da51 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -84,6 +84,7 @@ export interface Beneficiary {
   id: number;
   name: string;
   customName?: string | null;  // User's custom display name (e.g., "Mom", "Dad")
+  displayName: string;         // Computed: customName || name (for UI display)
   avatar?: string;
   device_id?: string;
   status: 'online' | 'offline';