diff --git a/webroot/index.html b/webroot/index.html
index d8662375..3470c760 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -94,7 +94,9 @@
             {
                 await updateProtocolAndUrl(window.location.hostname);
             }
-            sidebarPfp.src = await getAvatarUrl(`${username}:${host}`);
+            let localIdRes = await fetchAsync(`${url}/nametoid?u=${username}`);
+            let localId = localIdRes.trim();
+            sidebarPfp.src = await getAvatarUrl(localId, `${username}:${host}`);
 
             showAction("action.auth", "startauth");
             let res = await Auth(username, password);
@@ -134,7 +136,15 @@
     async function addDm() {
         try {
             showAction("action.dm.adding", "dmadd");
-            let res = await fetchEncrypted("user/dm/invite", document.getElementById("addchat-username").value);
+            let username = document.getElementById("addchat-username").value;
+            let idRes = await fetchAsync(`${url}/nametoid?u=${username}`);
+            if (idRes.startsWith("error") || idRes.trim() === "0" || idRes.trim() === "") {
+                clearAction("dmadd");
+                showBlahNotification("error:user.not.found");
+                return;
+            }
+            let targetId = idRes.trim();
+            let res = await fetchEncrypted("user/dm/invite", targetId);
 
             clearAction("dmadd");
             showBlahNotification(res);
diff --git a/webroot/main.js b/webroot/main.js
index 49d76e4b..d45d8087 100644
--- a/webroot/main.js
+++ b/webroot/main.js
@@ -514,10 +514,10 @@ function createAvatarSvg(name, size = 512) {
     return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 }
 
-async function getAvatarUrl(username)
+async function getAvatarUrl(id, username)
 {
     try {
-        let pfpUrl = `${url}/user/storage/public/getentry?u=${username}&e=larp.profile.pfp`;
+        let pfpUrl = `${url}/user/storage/public/getentry?id=${id}&e=larp.profile.pfp`;
         if ((await fetchAsync(pfpUrl)) == "")
         {
             throw Error();
@@ -1024,7 +1024,7 @@ async function renderInvites(res, type) {
                 if (!(username && username.trim() !== "")) return;
                 count++;
 
-                let pfp = await getAvatarUrl(username);
+                let pfp = await getAvatarUrl(id, username);
 
                 let actions = "";
                 let desc = "";
@@ -1032,17 +1032,17 @@ async function renderInvites(res, type) {
                 if (type === "received") {
                     desc = `:desc.invite.dm.received:${username};${id}`;
                     actions = `
-                    <button class="icon-button" style="background-color: var(--big-green); border-color: transparent;" onclick="acceptInvite('${id}')">
+                    <button class="icon-button" style="background-color: var(--big-green);" onclick="acceptInvite('${id}')">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#fff"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
                     </button>
-                    <button class="icon-button" style="background-color: var(--big-red); border-color: transparent;" onclick="declineInvite('${id}')">
+                    <button class="icon-button" style="background-color: var(--big-red);" onclick="declineInvite('${id}')">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#fff"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
                     </button>
                 `;
                 } else {
                     desc = `:desc.invite.dm.sent:${username};${id}`;
                     actions = `
-                    <button class="icon-button" style="background-color: var(--big-red); border-color: transparent;" onclick="revokeInvite('${id}')">
+                    <button class="icon-button" style="background-color: var(--big-red);" onclick="revokeInvite('${id}')">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#fff"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
                     </button>
                 `;
@@ -1096,10 +1096,15 @@ async function switchInvitesTab(tab) {
 
     await loadInvites(tab);
 }
-async function acceptInvite(username) { //TODO
+async function acceptInvite(targetId) { //TODO: Implement key generation
     try {
         showAction("action.invite.accepting", "invite.action");
-        let res = await fetchEncrypted("user/dm/create", username);
+        let payload = JSON.stringify({
+            string1: targetId,
+            string2: "", // TODO: Generate symmetric keys
+            string3: ""  // TODO: Encrypt key for targetId
+        });
+        let res = await fetchEncrypted("user/dm/create", payload);
         clearAction("invite.action");
         showBlahNotification(res || "success:invite.accepted");
         await loadInvites('received');
@@ -1109,10 +1114,10 @@ async function acceptInvite(username) { //TODO
     }
 }
 
-async function declineInvite(username) { //TODO
+async function declineInvite(username) { 
     try {
         showAction("action.invite.declining", "invite.action");
-        let res = await fetchEncrypted("user/dm/decline", username);
+        let res = await fetchEncrypted("user/dm/invite/decline", username);
         clearAction("invite.action");
         showBlahNotification(res || "success:invite.declined");
         await loadInvites('received');
@@ -1122,10 +1127,10 @@ async function declineInvite(username) { //TODO
     }
 }
 
-async function revokeInvite(username) { //TODO
+async function revokeInvite(username) { 
     try {
         showAction("action.invite.revoking", "invite.action");
-        let res = await fetchEncrypted("user/dm/revoke", username);
+        let res = await fetchEncrypted("user/dm/invite/revoke", username);
         clearAction("invite.action");
         showBlahNotification(res || "success:invite.revoked");
         await loadInvites('sent');
diff --git a/webroot/style.css b/webroot/style.css
index 5ad2a2f2..d122becf 100644
--- a/webroot/style.css
+++ b/webroot/style.css
@@ -15,8 +15,8 @@
     --border-width: 0.09rem;
 
     --big-default: rgb(207, 207, 207);
-    --big-red: rgb(195, 75, 75);
-    --big-green: rgb(75, 165, 95);
+    --big-red: hsl(0, 60%, 55%);
+    --big-green: hsl(120, 60%, 55%);
 }
 *:focus {
     outline: none;
@@ -544,6 +544,7 @@ space{
     width: 2.8rem;
     height: 2.8rem;
     border-radius: 0.8rem;
+    border: var(--border-width) solid rgba(255, 255, 255, 0.2);
     object-fit: cover;
 }
 .invite-details {
@@ -565,6 +566,9 @@ space{
 }
 .invite-actions button {
     margin: 0;
+    border-color: rgba(255, 255, 255, 0.2);
+    width: 3.1rem;
+    height: 3.1rem;
 }
 
 @media (hover: hover) {
@@ -591,11 +595,17 @@ space{
     .context-menu button:hover {
         background-color: rgba(255, 255, 255, 0.08);
     }
+    .invite-actions button:hover {
+        filter: brightness(0.93);
+    }
 }
 button:active, button.is-pressed, input:active, input.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     transform: var(--press-scale);
 }
+.invite-actions button:active {
+    filter: brightness(0.85);
+}
 button.active, input.active {
     background-color: rgba(255, 255, 255, 0.1);
 }