diff --git a/jsapp/js/components/common/badge.module.scss b/jsapp/js/components/common/badge.module.scss
index 7c2943213b..c65c58eb7c 100644
--- a/jsapp/js/components/common/badge.module.scss
+++ b/jsapp/js/components/common/badge.module.scss
@@ -55,6 +55,11 @@ $badge-font-l: 14px;
   background-color: colors.$kobo-light-green;
 }
 
+.color-dark-gray {
+  color: colors.$kobo-white;
+  background-color: colors.$kobo-gray-700;
+}
+
 @mixin badge-size($size, $font) {
   // NOTE: icon size is already handled by badge.tsx file rendering proper <Icon> component
   height: $size;
diff --git a/jsapp/js/components/common/badge.tsx b/jsapp/js/components/common/badge.tsx
index 5706ffb49d..0dcd85887b 100644
--- a/jsapp/js/components/common/badge.tsx
+++ b/jsapp/js/components/common/badge.tsx
@@ -11,7 +11,8 @@ export type BadgeColor =
   | 'light-blue'
   | 'light-red'
   | 'light-teal'
-  | 'light-green';
+  | 'light-green'
+  | 'dark-gray';
 export type BadgeSize = 'l' | 'm' | 's';
 
 export const BadgeToIconMap: Map<BadgeSize, IconSize> = new Map();
diff --git a/jsapp/js/components/header/accountMenu.tsx b/jsapp/js/components/header/accountMenu.tsx
index 66c94c6dc9..4532873a3b 100644
--- a/jsapp/js/components/header/accountMenu.tsx
+++ b/jsapp/js/components/header/accountMenu.tsx
@@ -12,6 +12,7 @@ import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
 import {isAnyRouteBlockerActive} from 'js/router/routerUtils';
 import Button from 'js/components/common/button';
 import Avatar from 'js/components/common/avatar';
+import OrganizationBadge from './organizationBadge.component';
 
 /**
  * UI element that display things only for logged-in user. An avatar that gives
@@ -96,6 +97,8 @@ export default function AccountMenu() {
               />
             </bem.AccountBox__menuItem>
 
+            <OrganizationBadge color='light-blue'/>
+
             {/*
               There is no UI we can show to a user who sees a router blocker, so
               we don't allow any in-app navigation.
diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx
index 1e27caae90..3c504ebdbd 100644
--- a/jsapp/js/components/header/mainHeader.component.tsx
+++ b/jsapp/js/components/header/mainHeader.component.tsx
@@ -161,7 +161,9 @@ const MainHeader = class MainHeader extends React.Component<MainHeaderProps> {
         )}
 
         <div className={styles.accountSection}>
-          <OrganizationBadge />
+          <div className={styles.badgeWrapper}>
+            <OrganizationBadge color='dark-gray' />
+          </div>
           <AccountMenu />
         </div>
 
diff --git a/jsapp/js/components/header/mainHeader.module.scss b/jsapp/js/components/header/mainHeader.module.scss
index 18b8800d8d..e4b4813df5 100644
--- a/jsapp/js/components/header/mainHeader.module.scss
+++ b/jsapp/js/components/header/mainHeader.module.scss
@@ -23,3 +23,8 @@
   margin-left: auto;
   position: relative;
 }
+
+.badgeWrapper {
+  padding-top: 2px;
+  margin-right: 20px;
+}
diff --git a/jsapp/js/components/header/organizationBadge.component.tsx b/jsapp/js/components/header/organizationBadge.component.tsx
index 534de9c5c3..98c2401a8f 100644
--- a/jsapp/js/components/header/organizationBadge.component.tsx
+++ b/jsapp/js/components/header/organizationBadge.component.tsx
@@ -1,8 +1,12 @@
 import {useOrganizationQuery} from 'js/account/organization/organizationQuery';
-
+import Badge, {BadgeColor} from 'js/components/common/badge';
 import styles from './organizationBadge.module.scss';
 
-export default function OrganizationBadge() {
+interface OrganizationBadgeProps {
+  color: BadgeColor;
+}
+
+export default function OrganizationBadge(props: OrganizationBadgeProps) {
   // TODO: move this logic to the parent component when we refactor it
   // into a functional component. OrganizationBadge should just be a
   // purely presentational component.
@@ -10,7 +14,9 @@ export default function OrganizationBadge() {
 
   if (orgQuery.data?.is_mmo) {
     return (
-      <div className={styles.root}>{orgQuery.data.name.toUpperCase()}</div>
+      <div className={styles.root}>
+        <Badge color={props.color} size='m' label={orgQuery.data.name.toUpperCase()} />
+      </div>
     );
   } else {
     return null;
diff --git a/jsapp/js/components/header/organizationBadge.module.scss b/jsapp/js/components/header/organizationBadge.module.scss
index 56948eec48..1e5dbb4c09 100644
--- a/jsapp/js/components/header/organizationBadge.module.scss
+++ b/jsapp/js/components/header/organizationBadge.module.scss
@@ -1,11 +1,8 @@
 @use 'scss/colors';
 
 .root {
-  color: colors.$kobo-white;
-  background-color: colors.$kobo-gray-700;
-  padding: 6px 10px;
   border-radius: 48px;
   font-weight: 600;
   font-size: .85em;
-  margin-right: 20px;
+  width: fit-content;
 }
diff --git a/jsapp/scss/components/_kobo.navigation.scss b/jsapp/scss/components/_kobo.navigation.scss
index ba7fb22344..6cb45b0725 100644
--- a/jsapp/scss/components/_kobo.navigation.scss
+++ b/jsapp/scss/components/_kobo.navigation.scss
@@ -145,6 +145,7 @@
 
   .account-box__menu-item--settings {
     text-align: right;
+    margin-top: 16px;
   }
 
   .account-box__menu-li {