diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 7052d786f..6373f176f 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1834,6 +1834,32 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // When the edit button is clicked, show the input field under it
         handleEditButtonClick(fieldName, button);
+
+        let editableFormGroup = button.parentElement.parentElement.parentElement;
+        if (editableFormGroup){
+          let readonlyField = editableFormGroup.querySelector(".input-with-edit-button__readonly-field")
+          let inputField = document.getElementById(`id_${fieldName}`).value;
+          if (!inputField) {
+            return;
+          }
+
+          let inputFieldValue = inputField.value
+          if (readonlyField && inputFieldValue){
+            if (fieldName == "full_name"){
+              let firstName = document.querySelector(`#id_first_name`).value;
+              let middleName = document.querySelector(`#id_middle_name`).value;
+              let lastName = document.querySelector(`#id_last_name`).value;
+              if (firstName && middleName && lastName) {
+                let values = [firstName.value, middleName.value, lastName.value]
+                readonlyField.innerHTML = values.join(" ");
+              }else {
+                readonlyField.innerHTML = "Unknown";
+              }
+            }else {
+              readonlyField.innerHTML = inputValue;
+            }
+          }
+        }
       }
     });
   }
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index b2bad1edb..b7cedfe85 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -190,7 +190,7 @@ abbr[title] {
     svg.usa-icon {
       color: #{$dhs-red};
     }
-    div.readonly-field {
+    div.input-with-edit-button__readonly-field-field {
       color: #{$dhs-red};
     }
   }
diff --git a/src/registrar/forms/user_profile.py b/src/registrar/forms/user_profile.py
index 682e1a5df..60e5032c8 100644
--- a/src/registrar/forms/user_profile.py
+++ b/src/registrar/forms/user_profile.py
@@ -93,4 +93,7 @@ class FinishSetupProfileForm(UserProfileForm):
         self.fields["title"].label = "Title or role in your organization"
 
         # Define the "full_name" value
-        self.fields["full_name"].initial = self.instance.get_formatted_name()
+        full_name = None
+        if self.instance.first_name and self.instance.last_name:
+            full_name = self.instance.get_formatted_name(return_unknown_when_none=False)
+        self.fields["full_name"].initial = full_name
diff --git a/src/registrar/models/contact.py b/src/registrar/models/contact.py
index f94938dd1..b0d6f3ac3 100644
--- a/src/registrar/models/contact.py
+++ b/src/registrar/models/contact.py
@@ -102,10 +102,13 @@ class Contact(TimeStampedModel):
                 return getattr(self, relation).count() > threshold
         return False
 
-    def get_formatted_name(self):
+    def get_formatted_name(self, return_unknown_when_none=True):
         """Returns the contact's name in Western order."""
         names = [n for n in [self.first_name, self.middle_name, self.last_name] if n]
-        return " ".join(names) if names else "Unknown"
+        if names:
+            return " ".join(names)
+        else:
+            return "Unknown" if return_unknown_when_none else None
 
     def has_contact_info(self):
         return bool(self.title or self.email or self.phone)