Fix: Messagebox is now fully working

src/pages/settings/Settings.module.scss

@@ -189,11 +189,15 @@
             width: 40px;
             border: 3px solid var(--tertiary-background);
             cursor: pointer;
-
+            
             svg {
                 color: var(--secondary-foreground);
             }
 
+            &:hover {
+                background: var(--secondary-header);
+            }
+
             &:active {
                 transform: translateY(2px);
             }

src/pages/settings/panes/Account.tsx

@@ -1,5 +1,5 @@
 import { At } from "@styled-icons/boxicons-regular";
-import { Envelope, Key } from "@styled-icons/boxicons-solid";
+import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
 
@@ -60,7 +60,10 @@ export function Account() {
                     size={72}
                     onClick={() => switchPage("profile")}
                 />
-                <div className={styles.username}>@{user.username}</div>
+                <div className={styles.userDetail}>
+                    <div className={styles.username}>@{user.username}</div>
+                    <div className={styles.userid}><HelpCircle size={16} />{user._id}</div>
+                </div>
             </div>
             <div className={styles.details}>
                 {(

src/pages/settings/panes/Panes.module.scss

@@ -21,6 +21,15 @@
             font-size: 24px;
             font-weight: 600;
         }
+
+        .userid {
+            font-size: .875rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            color: var(--tertiary-foreground);
+        }
     }
 
     .details {