diff --git a/external/components b/external/components
index d21aeb79..393f87aa 160000
--- a/external/components
+++ b/external/components
@@ -1 +1 @@
-Subproject commit d21aeb7924f6eea795da41ee97e0c3b6cc14ffc4
+Subproject commit 393f87aaba71d6f11b3df05766cad982f1cdaa82
diff --git a/src/components/settings/account/EditAccount.tsx b/src/components/settings/account/EditAccount.tsx
index 2bc24994..dfd596d2 100644
--- a/src/components/settings/account/EditAccount.tsx
+++ b/src/components/settings/account/EditAccount.tsx
@@ -37,7 +37,7 @@ export default observer(() => {
 
             {(
                 [
-                    ["username", client.user!.username, At],
+                    ["username", client.user!.username + "#0000", At],
                     ["email", email, Envelope],
                     ["password", "•••••••••", Key],
                 ] as const
diff --git a/src/controllers/modals/components/legacy/UserProfile.module.scss b/src/controllers/modals/components/legacy/UserProfile.module.scss
index d85fe474..73b03595 100644
--- a/src/controllers/modals/components/legacy/UserProfile.module.scss
+++ b/src/controllers/modals/components/legacy/UserProfile.module.scss
@@ -46,13 +46,26 @@
             text-overflow: ellipsis;
         }
 
-        .username {
+        .usernameDetail {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 4px;
+        }
+
+        .displayname {
             font-size: 22px;
             font-weight: 600;
         }
 
+        .username {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--secondary-foreground);
+        }
+
         .status {
             font-size: 13px;
+            color: var(--secondary-foreground);
 
             > div {
                 display: inline !important;
diff --git a/src/controllers/modals/components/legacy/UserProfile.tsx b/src/controllers/modals/components/legacy/UserProfile.tsx
index e7f82328..a134efdb 100644
--- a/src/controllers/modals/components/legacy/UserProfile.tsx
+++ b/src/controllers/modals/components/legacy/UserProfile.tsx
@@ -163,16 +163,22 @@ export const UserProfile = observer(
                             }
                         />
                         <div className={styles.details}>
-                            <Localizer>
+                            <div className={styles.usernameDetail}>
+                                <span
+                                    className={styles.displayname}
+                                    onClick={() =>
+                                        modalController.writeText(user.username)
+                                    }>
+                                    {user.username}
+                                </span>
                                 <span
                                     className={styles.username}
                                     onClick={() =>
                                         modalController.writeText(user.username)
                                     }>
-                                    {"@"}
-                                    {user.username}
+                                    {user.username}#0000
                                 </span>
-                            </Localizer>
+                            </div>
                             {user.status?.text && (
                                 <span className={styles.status}>
                                     <UserStatus user={user} tooltip />
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index e5faf987..30a4e7b9 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -694,3 +694,23 @@
 section {
     margin-bottom: 20px;
 }
+
+.titleNew {
+    display: flex;
+    margin: 15px 0;
+    gap: 8px;
+    align-items: center;
+
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--secondary-foreground);
+
+    .new {
+        font-size: 10px;
+        background: red;
+        padding: 3px 5px;
+        border-radius: 20px;
+        color: white;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx
index 75b01403..1f03be2c 100644
--- a/src/pages/settings/panes/Profile.tsx
+++ b/src/pages/settings/panes/Profile.tsx
@@ -3,11 +3,13 @@ import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
 import { API } from "revolt.js";
 
+import { UserCircle } from "@styled-icons/boxicons-solid";
+
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 
-import { Button, LineDivider, Tip } from "@revoltchat/ui";
+import { Button, LineDivider, Tip, CategoryButton } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useTranslation } from "../../../lib/i18n";
@@ -77,6 +79,16 @@ export const Profile = observer(() => {
                     {...({} as any)}
                 />
             </div>
+            <div className={styles.titleNew}>
+                Display Name
+                <div className={styles.new}>NEW</div>
+            </div>
+            <CategoryButton
+                icon={<UserCircle size={24} />}
+                action="chevron"
+                description={"Change your display name to whatever you like"}>
+                Display Name
+            </CategoryButton>
             {/*<h3>Badges</h3>
             <div className={styles.badgePicker}>
                 <div className={styles.overlay} />