diff --git a/static/scripts.js b/static/scripts.js
index dd9757c..5e847ca 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -346,7 +346,7 @@ async function displayProfile(opts) {
     // Generate feedback
     feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value">general information</div>`;
+    feedback += `<div class="profileDataItem__value">General information</div>`;
     feedback += `</div>`;
 
     feedback += `<div class="profileDataItem">`;
@@ -365,15 +365,15 @@ async function displayProfile(opts) {
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value">actions</div>`;
+    feedback += `<div class="profileDataItem__value">Actions</div>`;
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value"><a href="/verify/${keyUriMode}/${keyUriId}">verify signature</a></div>`;
+    feedback += `<div class="profileDataItem__value"><a href="/verify/${keyUriMode}/${keyUriId}">Verify signature</a></div>`;
     feedback += `</div>`;
     feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
-    feedback += `<div class="profileDataItem__value"><a href="/encrypt/${keyUriMode}/${keyUriId}">encrypt message</a></div>`;
+    feedback += `<div class="profileDataItem__value"><a href="/encrypt/${keyUriMode}/${keyUriId}">Encrypt message</a></div>`;
     feedback += `</div>`;
 
     // Display feedback
@@ -415,7 +415,7 @@ async function displayProfile(opts) {
                 return;
             }
             feedback += `<div class="profileDataItem">`;
-            feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
+            feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
             feedback += `<div class="profileDataItem__value">`;
             feedback += `<a class="proofDisplay" href="${claimData.profile.uri}"  rel="me">${claimData.profile.display}</a>`;
             if (claim.isVerified) {
@@ -447,7 +447,7 @@ async function displayProfile(opts) {
                 feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
                 feedback += `<div class="profileDataItem__label"></div>`;
                 // feedback += `<div class="profileDataItem__value"><a href="mailto:${keyData.users[i].userId.email}">${keyData.users[i].userId.email}</a> (primary)</div>`;
-                feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} (primary)</div>`;
+                feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} <small class="primary">primary</small></div>`;
                 feedback += `</div>`;
 
                 if (userId.length == 0) {
@@ -469,7 +469,7 @@ async function displayProfile(opts) {
                         return;
                     }
                     feedback += `<div class="profileDataItem">`;
-                    feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
+                    feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
                     feedback += `<div class="profileDataItem__value">`;
                     feedback += `<a class="proofDisplay" href="${claimData.profile.uri}"  rel="me">${claimData.profile.display}</a>`;
                     if (claim.isVerified) {
@@ -496,7 +496,7 @@ async function displayProfile(opts) {
             feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email}</div>`;
             feedback += `</div>`;
 
-            if (userId.length == 0) {
+            if (userId.length === 0) {
                 feedback += `<div class="profileDataItem  profileDataItem--noLabel">`;
                 feedback += `<div class="profileDataItem__label"></div>`;
                 feedback += `<div class="profileDataItem__value">No claims associated</div>`;
@@ -521,7 +521,7 @@ async function displayProfile(opts) {
                     return;
                 }
                 feedback += `<div class="profileDataItem">`;
-                feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
+                feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
                 feedback += `<div class="profileDataItem__value">`;
                 feedback += `<a class="proofDisplay" href="${claimData.profile.uri}"  rel="me">${claimData.profile.display}</a>`;
                 if (claim.isVerified) {
@@ -1438,3 +1438,11 @@ if (elUtilProfileURL) {
 
     elInput.dispatchEvent(new Event("input"));
 }
+
+function capitalizeLetteredServices(serviceName) {
+    var servName = serviceName.toLowerCase();
+    if (servName === 'dns' || servName === 'xmpp') {
+        return servName.toUpperCase();
+    }
+    return serviceName;
+}
diff --git a/static/styles.css b/static/styles.css
index b333a8e..92372a3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -75,7 +75,8 @@ footer a {
     color: #777;
 }
 .container {
-    max-width: 720px;
+    /*max-width: 720px;*/
+    max-width: 770px;
     width: 100%;
     margin: 0 auto;
 }
@@ -279,6 +280,9 @@ select {
     flex-direction: row;
     align-items: center;
     margin-bottom: 32px;
+    background-color: #c4e3f657;
+    padding: 15px;
+    border-radius: 15px;
 }
 #profileAvatar {
     width: 100%;
@@ -295,6 +299,13 @@ select {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+#profileData {
+    background-color: #dceef957;
+    padding: 15px;
+    border-radius: 15px;
+}
+
 .profileDataItem {
     position: relative;
     display: flex;
@@ -319,6 +330,7 @@ select {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: capitalize;
 }
 .profileDataItem__value {
     display: inline-block;
@@ -335,6 +347,16 @@ select {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.profileDataItem__value small {
+    color: white;
+    background: #2178ff;
+    border-radius: 6px;
+    padding: 2.8px 5px;
+    font-size: 0.65em;
+    vertical-align: middle;
+}
+
 a.proofUrl {
     color: #777;
 }
@@ -395,9 +417,18 @@ noscript p {
     .profileDataItem__value {
         min-height: 28px;
     }
-	.profileDataItem--noLabel .profileDataItem__label {
+    	.profileDataItem--noLabel .profileDataItem__label {
 		display: none;
 	}
+        
+    #profileData .profileDataItem__value a:first-child {
+        max-width: 85%;
+    }
+    
+    #profileData #profileProofs .profileDataItem__value a:first-child {
+        display: block;
+    }
+
 
     input[type="text"] {
         width: 100%;