diff --git a/frontend/src/html/pages/friends.html b/frontend/src/html/pages/friends.html
index b1a04ea11..4a561f44c 100644
--- a/frontend/src/html/pages/friends.html
+++ b/frontend/src/html/pages/friends.html
@@ -13,8 +13,9 @@
 
   <div class="content">
     <div class="pendingRequests">
-      <div class="bigtitle">
-        <h2>Pending Friend Requests</h2>
+      <div class="bigTitle">
+        <i class="fas fa-user-plus fa-fw"></i>
+        Incoming Requests
       </div>
       <div class="error hidden">
         <i class="fas fa-times"></i>
@@ -33,18 +34,22 @@
     </div>
 
     <div class="friends">
-      <h2>
-        Friends
-
+      <div class="titleAndButton">
+        <div class="bigTitle">
+          <i class="fas fa-user-friends fa-fw"></i>
+          Friends
+        </div>
         <button
-          id="friendAdd"
-          class="button"
+          class="button friendAdd"
           aria-label="add friend"
-          data-balloon-pos="right"
+          data-balloon-pos="left"
         >
-          <i class="fas fa-user-plus fa-fw"></i>
+          <i class="fas fa-plus fa-fw"></i>
+
+          add friend
         </button>
-      </h2>
+      </div>
+
       <div class="loading hidden">
         <i class="fas fa-circle-notch fa-spin"></i>
       </div>
@@ -58,7 +63,7 @@
         <thead>
           <tr>
             <td data-sort-property="name">name</td>
-            <td data-sort-property="addedAt">friend since</td>
+            <td data-sort-property="addedAt">friends for</td>
             <td data-sort-property="xp">level</td>
             <td
               data-sort-property="completedTests"
diff --git a/frontend/src/styles/friends.scss b/frontend/src/styles/friends.scss
index 7d80c5d0a..791970cf7 100644
--- a/frontend/src/styles/friends.scss
+++ b/frontend/src/styles/friends.scss
@@ -1,12 +1,24 @@
 .pageFriends {
-  h2 {
+  .bigTitle {
+    color: var(--sub-color);
     font-size: 2rem;
-    margin-bottom: 1rem;
-    font-weight: normal;
   }
+
+  .titleAndButton {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    margin-bottom: 1rem;
+  }
+
+  .nodata {
+    color: var(--sub-color);
+    padding: 5rem 0;
+    text-align: center;
+  }
+
   .pendingRequests,
   .friends {
-    margin-bottom: 1rem;
+    margin-bottom: 4rem;
     table {
       border-spacing: 0;
       border-collapse: collapse;
@@ -18,6 +30,10 @@
         font-size: 0.75rem;
       }
 
+      tr.me {
+        color: var(--main-color);
+      }
+
       tbody tr:nth-child(odd) td {
         background: var(--sub-alt-color);
       }
@@ -70,7 +86,7 @@
       }
       .entryName {
         text-decoration: none;
-        color: var(--text-color);
+        color: inherit;
         cursor: pointer;
       }
       .avatarPlaceholder,
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 323fc6db9..59c86732a 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -112,13 +112,13 @@ async function updatePendingRequests(): Promise<void> {
         }?isUid" router-link>${item.initiatorName}</a></td>
         <td>${formatAge(item.addedAt)} ago</td>
         <td class="actions">
-          <button class="accepted" aria-label="accept friend" data-balloon-pos="up">
+          <button class="accepted" aria-label="accept" data-balloon-pos="up">
             <i class="fas fa-check fa-fw"></i>
           </button> 
-          <button class="rejected" aria-label="reject friend" data-balloon-pos="up">
+          <button class="rejected" aria-label="reject" data-balloon-pos="up">
             <i class="fas fa-times fa-fw"></i>
           </button> 
-          <button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
+          <button class="blocked" aria-label="block" data-balloon-pos="up">
             <i class="fas fa-shield-alt fa-fw"></i>
           </button>
         </td>
@@ -174,8 +174,22 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
   const top60 = formatPb(entry.top60);
 
   const element = document.createElement("tr");
-  element.dataset["id"] = entry.friendRequestId;
-  element.innerHTML = `<tr data-id="${entry.friendRequestId}">
+  element.dataset["id"] = entry.uid;
+
+  const isMe = entry.uid === getAuthenticatedUser()?.uid;
+
+  let actions = "";
+  if (isMe) {
+    element.classList.add("me");
+  } else {
+    actions = `<button class="rejected" aria-label="reject friend" data-balloon-pos="up">
+            <i class="fas fa-user-times fa-fw"></i>
+          </button> 
+          <button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
+            <i class="fas fa-user-shield fa-fw"></i>
+          </button>`;
+  }
+  element.innerHTML = `<tr>
         <td>
           <div class="avatarNameBadge">
             <div class="avatarPlaceholder"></div>
@@ -193,7 +207,9 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
             </div>
           </div>
         </td>
-        <td>${formatAge(entry.addedAt, "short")}</td>
+        <td>${
+          entry.addedAt !== undefined ? formatAge(entry.addedAt, "short") : "-"
+        }</td>
         <td><span aria-label="total xp: ${
           isSafeNumber(entry.xp) ? formatXp(entry.xp) : ""
         }" data-balloon-pos="up">
@@ -218,20 +234,16 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
         <td><span aria-label="${
           top15?.details
         }" data-balloon-pos="up" data-balloon-break="">${
-    top15?.wpm
-  }<div class="sub">${top15?.acc}</div><span></td>
+    top15?.wpm ?? "-"
+  }<div class="sub">${top15?.acc ?? "-"}</div><span></td>
         <td><span aria-label="${
           top60?.details
         }" data-balloon-pos="up" data-balloon-break="">${
-    top60?.wpm
-  }<div class="sub">${top60?.acc}</div></span></td>
-        <td class="actions">
-            <button class="rejected" aria-label="reject friend" data-balloon-pos="up">
-            <i class="fas fa-user-times fa-fw"></i>
-          </button> 
-          <button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
-            <i class="fas fa-user-shield fa-fw"></i>
-          </button>
+    top60?.wpm ?? "-"
+  }<div class="sub">${top60?.acc ?? "-"}</div></span></td>
+  <td class="actions">
+  ${actions}
+            
         </td>
       </tr>`;
 
@@ -312,7 +324,7 @@ function formatStreak(length?: number, prefix?: string): string {
     : "";
 }
 
-$("#friendAdd").on("click", () => {
+$(".pageFriends button.friendAdd").on("click", () => {
   addFriendModal.show(undefined, {});
 });