diff --git a/components/DropdownMenuContent/index.scss b/components/DropdownMenuContent/index.scss
index e1536c42..caf82c8b 100644
--- a/components/DropdownMenuContent/index.scss
+++ b/components/DropdownMenuContent/index.scss
@@ -14,6 +14,13 @@
   }
 }
 
+.MenuLabel {
+  color: var(--text-tertiary);
+  padding: $unit * 1.5 $unit * 1.5;
+  font-size: $font-small;
+  font-weight: $medium;
+}
+
 .MenuItem {
   color: var(--text-tertiary);
   font-weight: $normal;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index cfbd51be..1515b49b 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -19,6 +19,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuLabel,
 } from '~components/DropdownMenuContent'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
@@ -248,7 +249,15 @@ const Header = () => {
         />
       )
     } else {
-      image = <div className="profile placeholder" />
+      image = (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png, 
+                      /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
     }
 
     return image
@@ -473,6 +482,9 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuLabel className="MenuLabel">
+              {account.user ? `@${account.user.username}` : t('no_user')}
+            </DropdownMenuLabel>
             <DropdownMenuItem className="MenuItem">
               <Link href="/new">
                 <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
diff --git a/public/profile/npc.png b/public/profile/npc.png
new file mode 100644
index 00000000..40afe761
Binary files /dev/null and b/public/profile/npc.png differ
diff --git a/public/profile/npc@2x.png b/public/profile/npc@2x.png
new file mode 100644
index 00000000..d443cf2b
Binary files /dev/null and b/public/profile/npc@2x.png differ
diff --git a/styles/globals.scss b/styles/globals.scss
index 63539203..b4b59dfb 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -249,6 +249,10 @@ img.profile {
   &.light {
     background: $light-bg-20;
   }
+
+  &.anonymous {
+    background: var(--anonymous-bg);
+  }
 }
 
 i.tag {
diff --git a/styles/themes.scss b/styles/themes.scss
index 4d661871..f6a4833e 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -25,7 +25,7 @@
 
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
-
+  --anonymous-bg: #{$anonymous--bg--light};
   --placeholder-bg: #{$grey-80};
 
   // Light - Menus
@@ -164,6 +164,7 @@
   --selected-item-bg: #{$selected--item--bg--dark};
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
+  --anonymous-bg: #{$anonymous--bg--dark};
   --placeholder-bg: #{$grey-40};
 
   // Dark - Dialogs
diff --git a/styles/variables.scss b/styles/variables.scss
index 9685cefa..4ae4b0dd 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -148,6 +148,9 @@ $page--element--bg--dark: $grey-40;
 $separator--bg--light: $grey-90;
 $separator--bg--dark: $grey-15;
 
+$anonymous--bg--light: $grey-80;
+$anonymous--bg--dark: $grey-40;
+
 // Color Definitions: Dialog
 $dialog--bg--light: $grey-100;
 $dialog--bg--dark: $grey-25;