diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx
index 8e56ec0a..57ebfc34 100644
--- a/net/web/src/session/contact/Contact.jsx
+++ b/net/web/src/session/contact/Contact.jsx
@@ -62,14 +62,14 @@ export function Contact({ close, guid, listing }) {
         </div>
       )}
 
-      { state.status === 'requested' && (
+      { state.status === 'request received' && (
         <div class="controls">
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.saveConnect)}>Accept Connection</div>
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Ignore Request</div>
         </div>
       )}
 
-      { state.status === 'connecting' && (
+      { state.status === 'request sent' && (
         <div class="controls">
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnect)}>Cancel Request</div>
           <div class={ state.buttonStatus } onClick={() => updateContact(actions.disconnectRemove)}>Delete Contact</div>
@@ -130,7 +130,7 @@ export function Contact({ close, guid, listing }) {
           { Image }
           { Details }
           <div class="footer">
-            <div class="status">Status: { state.status }</div>
+            <div>contact { state.status }</div>
           </div>
         </div>
       )}
diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js
index 101ec262..ca3d3e4c 100644
--- a/net/web/src/session/contact/Contact.styled.js
+++ b/net/web/src/session/contact/Contact.styled.js
@@ -210,6 +210,7 @@ export const ContactWrapper = styled.div`
     align-items: flex-end;
     justify-content: center;
     padding-bottom: 16px;
+    color: ${Colors.grey};
   }
 `
 
diff --git a/net/web/src/session/contact/useContact.hook.js b/net/web/src/session/contact/useContact.hook.js
index 2bf9b21c..2a9aed12 100644
--- a/net/web/src/session/contact/useContact.hook.js
+++ b/net/web/src/session/contact/useContact.hook.js
@@ -30,6 +30,19 @@ export function useContact(guid, listing, close) {
     setState((s) => ({ ...s, ...value }));
   }
 
+  const statusMap = (status) => {
+    if (status === 'confirmed') {
+      return 'saved';
+    }
+    if (status === 'requested') {
+      return 'request received';
+    }
+    if (status === 'connecting') {
+      return 'request sent';
+    }
+    return status;
+  }
+
   useEffect(() => {
     let logo, name, location, description, handle, node, status, cardId;
     let contact = card.actions.getCardByGuid(guid);
@@ -43,7 +56,7 @@ export function useContact(guid, listing, close) {
       name = cardProfile.name;
       location = cardProfile.location;
       description = cardProfile.description;
-      status = cardDetail.status === 'confirmed' ? 'saved' : cardDetail.status;
+      status = statusMap(cardDetail.status);
     }
     else if (listing) {
       handle = listing.handle;