diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 5ac68fa01a6946c6122de86b53492fd6182b35a6..1db3b2d711f379f5b0e54105745d87520e15af5f 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -1,10 +1,15 @@
 .list {
-    padding: 16px;
+    padding: 0 20px 20px 20px;
     user-select: none;
     overflow-y: scroll;
 
     .overline {
         display: flex;
+        position: sticky;
+        top: 0;
+        background: var(--primary-background);
+        padding: 8px 0;
+        z-index: 10;
     }
 
     &[data-empty="true"] {
@@ -67,7 +72,7 @@
         display: flex;
         gap: 12px;
 
-        > div {
+        > a {
             height: 40px;
             width: 40px;
 
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index 6a6bbdc384b29c5043854245175c924b771ed162..dd51b263f527e7a313e0d73e13f902cc045d923b 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -29,18 +29,18 @@ export function Friend({ user }: Props) {
         subtext = <UserStatus user={user} />
         actions.push(
             <>
-            <IconButton type="circle"
-                onClick={stopPropagation}>
-                <Link to={'/open/' + user._id}>
+            <Link to={'/open/' + user._id}>
+                <IconButton type="circle"
+                    onClick={stopPropagation}>
                     <PhoneCall size={20} />
-                </Link>
-            </IconButton>
-            <IconButton type="circle"
-                onClick={stopPropagation}>
-                <Link to={'/open/' + user._id}>
+                </IconButton>
+            </Link>
+            <Link to={'/open/' + user._id}>
+                <IconButton type="circle"
+                    onClick={stopPropagation}>
                     <Envelope size={20} />
-                </Link>
-            </IconButton>
+                </IconButton>
+            </Link>
             </>
         );
     }
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index c331f34a6b25774759859b1d41a15fb78cba3c4d..c59bb9c89c76d84553dafcb48f5215f718c606ed 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -1,5 +1,5 @@
 import styles from "./Friend.module.scss";
-import { UserPlus } from "@styled-icons/boxicons-regular";
+import { Conversation, UserPlus } from "@styled-icons/boxicons-solid";
 
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
@@ -34,11 +34,12 @@ export default function Friends() {
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <div className="actions">
-                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
-                        <UserPlus size={24} />
-                    </IconButton>
-                </div>
+                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}> {/* TOFIX: Make sure this opens the "Start Group DM" window on click */}
+                    <Conversation size={24} />
+                </IconButton>
+                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+                    <UserPlus size={24} />
+                </IconButton>
             </Header>
             <div
                 className={styles.list}
@@ -53,8 +54,8 @@ export default function Friends() {
                     </>
                 )}
                 {pending.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.special.friends.pending" /> –{" "}
+                    <Overline className={styles.overline} type="subtle">
+                        <Text id="app.special.friends.pending" /> —{" "}
                         {pending.length}
                     </Overline>
                 )}
@@ -62,8 +63,8 @@ export default function Friends() {
                     <Friend key={y._id} user={y} />
                 ))}
                 {friends.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.navigation.tabs.friends" /> –{" "}
+                    <Overline className={styles.overline} type="subtle">
+                        <Text id="app.navigation.tabs.friends" /> —{" "}
                         {friends.length}
                     </Overline>
                 )}
@@ -71,8 +72,8 @@ export default function Friends() {
                     <Friend key={y._id} user={y} />
                 ))}
                 {blocked.length > 0 && (
-                    <Overline type="subtle">
-                        <Text id="app.special.friends.blocked" /> –{" "}
+                    <Overline className={styles.overline} type="subtle">
+                        <Text id="app.special.friends.blocked" /> —{" "}
                         {blocked.length}
                     </Overline>
                 )}