diff --git a/src/components/FrameCustomiser.svelte b/src/components/FrameCustomiser.svelte
index 7d8be39..6bb9bd5 100644
--- a/src/components/FrameCustomiser.svelte
+++ b/src/components/FrameCustomiser.svelte
@@ -62,6 +62,7 @@
                     command: "setColors",
                     backgroundColor: "#000000",
                     foregroundColor: "#ffffff",
+                    foregroundSecondary: "#fefefe",
                 }, "*")
                 `,
         },
@@ -76,6 +77,11 @@
                 return `theme=${this.value ? "dark" : "light"}`;
             },
         },
+        {
+            key: "display-name",
+            name: "Show Display Name",
+            value: true,
+        },
         {
             key: "banner",
             name: "Show Banner",
@@ -121,6 +127,12 @@
             placeholder: "#fff",
             value: "",
         },
+        {
+            key: "foreground-secondary",
+            name: "Secondary Colour (for Display Name)",
+            placeholder: "#fff",
+            value: "",
+        },
     ];
 
     let userId = "343383572805058560";
diff --git a/src/discord_api.ts b/src/discord_api.ts
index 144ff4e..7fc58d7 100644
--- a/src/discord_api.ts
+++ b/src/discord_api.ts
@@ -37,6 +37,7 @@ export interface User {
     banner_color: string | null;
     accent_color: number;
     avatar_decoration: string;
+    global_name: string | null;
 }
 
 const flagNames: Record<number, string> = {
diff --git a/src/pages/user.astro b/src/pages/user.astro
index aa88ff2..1417a18 100644
--- a/src/pages/user.astro
+++ b/src/pages/user.astro
@@ -40,14 +40,15 @@ if (!user) {
 
 const roundedCorners =
     Astro.url.searchParams.get("rounded-corners") !== "false";
-const fulllBanner = Astro.url.searchParams.get("full-banner") === "true";
+const fullBanner = Astro.url.searchParams.get("full-banner") === "true";
 const showBanner = Astro.url.searchParams.get("banner") !== "false";
 const showIcon = Astro.url.searchParams.get("discord-icon") === "true";
 const showFlags = Astro.url.searchParams.get("badges") === "true";
 const guessNitro = Astro.url.searchParams.get("guess-nitro") === "true";
+const showDisplayName = Astro.url.searchParams.get("display-name") !== "false";
 
 let style = "";
-for (const key of ["background-color", "foreground-color"]) {
+for (const key of ["background-color", "foreground-color", "foreground-secondary"]) {
     const value = Astro.url.searchParams.get(key);
     if (!value) continue;
 
@@ -89,7 +90,7 @@ if (import.meta.env.PROD)
             "theme-light": theme === "light",
             "theme-dark": theme !== "light",
             "rounded-corners": roundedCorners,
-            "full-banner": fulllBanner,
+            "full-banner": fullBanner,
             "no-banner": !showBanner,
         }}
         style={style}
@@ -103,34 +104,37 @@ if (import.meta.env.PROD)
                     </div>
                 )
             }
-            <div class="profile">
-                <img class="avatar" src={avatarUrl} alt="" />
-                <div class="userinfo">
-                    <p class="username">
+            <div class="container">
+                <div class="profile">
+                    <img class="avatar" src={avatarUrl} alt="" />
+                    <div class="userinfo">
+                        {user.global_name && showDisplayName && <span class="display-name">{user.global_name}</span>}
+                        <span class={`username ${(user.global_name && showDisplayName) ? 'with-display-name' : ''}`}>
+                            {
+                                user.username +
+                                    (isPomelod(user)
+                                        ? ""
+                                        : "#" + user.discriminator)
+                            }
+                        </span>
+                    </div>
+                </div>
+                <div class="meta">
+                    <div class="flags">
                         {
-                            user.username +
-                                (isPomelod(user)
-                                    ? ""
-                                    : "#" + user.discriminator)
-                        }
-                    </p>
-                    {
-                        showFlags && (
-                            <div class="flags">
-                                {getUserFlags(user, guessNitro).map(flag => (
+                            showFlags && (
+                                getUserFlags(user, guessNitro).map(flag => (
                                     <img
                                         src={`/assets/badges/${flag
                                             .replaceAll(" ", "-")
                                             .toLowerCase()}.png`}
                                         title={`${flag}`}
                                     />
-                                ))}
-                            </div>
-                        )
-                    }
-                </div>
-                {
-                    showIcon && (
+                                ))
+                            )
+                        }
+                    </div>
+                    {showIcon && <div class="discord">
                         <svg
                             viewBox="0 0 640 512"
                             role="img"
@@ -142,8 +146,8 @@ if (import.meta.env.PROD)
                                 d="M524.531 69.836a1.5 1.5 0 0 0-.764-.7A485.065 485.065 0 0 0 404.081 32.03a1.816 1.816 0 0 0-1.923.91 337.461 337.461 0 0 0-14.9 30.6 447.848 447.848 0 0 0-134.426 0 309.541 309.541 0 0 0-15.135-30.6 1.89 1.89 0 0 0-1.924-.91 483.689 483.689 0 0 0-119.688 37.107 1.712 1.712 0 0 0-.788.676C39.068 183.651 18.186 294.69 28.43 404.354a2.016 2.016 0 0 0 .765 1.375 487.666 487.666 0 0 0 146.825 74.189 1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.12 430.4a1.86 1.86 0 0 0-1.019-2.588 321.173 321.173 0 0 1-45.868-21.853 1.885 1.885 0 0 1-.185-3.126 251.047 251.047 0 0 0 9.109-7.137 1.819 1.819 0 0 1 1.9-.256c96.229 43.917 200.41 43.917 295.5 0a1.812 1.812 0 0 1 1.924.233 234.533 234.533 0 0 0 9.132 7.16 1.884 1.884 0 0 1-.162 3.126 301.407 301.407 0 0 1-45.89 21.83 1.875 1.875 0 0 0-1 2.611 391.055 391.055 0 0 0 30.014 48.815 1.864 1.864 0 0 0 2.063.7A486.048 486.048 0 0 0 610.7 405.729a1.882 1.882 0 0 0 .765-1.352c12.264-126.783-20.532-236.912-86.934-334.541zM222.491 337.58c-28.972 0-52.844-26.587-52.844-59.239s23.409-59.241 52.844-59.241c29.665 0 53.306 26.82 52.843 59.239 0 32.654-23.41 59.241-52.843 59.241zm195.38 0c-28.971 0-52.843-26.587-52.843-59.239s23.409-59.241 52.843-59.241c29.667 0 53.307 26.82 52.844 59.239 0 32.654-23.177 59.241-52.844 59.241z"
                             />
                         </svg>
-                    )
-                }
+                    </div>}
+                </div>
             </div>
         </div>
     </body>
@@ -163,7 +167,7 @@ if (import.meta.env.PROD)
                 document.body.classList.toggle("theme-dark", theme !== "light");
                 break;
             case "setColors":
-                const { foregroundColor, backgroundColor } = data;
+                const { foregroundColor, backgroundColor, foregroundSecondary } = data;
 
                 if (hexColorRegex.test(foregroundColor))
                     document.body.style.setProperty(
@@ -177,6 +181,12 @@ if (import.meta.env.PROD)
                         backgroundColor
                     );
 
+                if (hexColorRegex.test(foregroundSecondary))
+                    document.body.style.setProperty(
+                        "--foreground-secondary",
+                        foregroundSecondary
+                    );
+
                 break;
         }
     });
@@ -201,12 +211,14 @@ if (import.meta.env.PROD)
 
     .theme-dark {
         --background-color: #2b2d31;
-        --foreground-color: #f2f3f5;
+        --foreground-color: #dedede;
+        --foreground-secondary: #b5bac1;
     }
 
     .theme-light {
         --background-color: white;
         --foreground-color: #313338;
+        --foreground-secondary: #4e5058;
     }
 
     .root {
@@ -254,19 +266,28 @@ if (import.meta.env.PROD)
         z-index: 2;
     }
 
-    .profile {
+    .container {
+        align-items: start;
+        justify-content: space-between;
+        flex-direction: row;
+        display: flex;
+
         background: var(--background-color);
         color: var(--foreground-color);
 
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+    }
+
+    .profile {
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: start;
         align-items: center;
-        border-bottom-left-radius: var(--border-radius);
-        border-bottom-right-radius: var(--border-radius);
     }
 
-    .no-banner .profile {
+    .no-banner .container {
         border-radius: var(--border-radius);
     }
 
@@ -277,11 +298,11 @@ if (import.meta.env.PROD)
         margin: 12px;
     }
 
-    p {
+    p, span {
         font-family: "gg sans", system-ui, sans-serif;
         font-size: 20px;
         font-weight: 600;
-        line-height: 24px;
+        line-height: 1;
         text-rendering: optimizeLegibility;
     }
 
@@ -294,6 +315,11 @@ if (import.meta.env.PROD)
         filter: brightness(0.8);
     }
 
+    .flags {
+        margin-right: 10px;
+        margin-top: 10px;
+    }
+
     .flags img {
         width: 18px;
     }
@@ -302,6 +328,12 @@ if (import.meta.env.PROD)
         margin: 8px 0;
     }
 
+    .username.with-display-name {
+        color: var(--foreground-secondary);
+        font-size: 16px;
+        margin: 2px 0;
+    }
+
     .userinfo {
         display: flex;
         flex-direction: column;