diff --git a/.github/pr-assets/organizer-recognition-logos.jpg b/.github/pr-assets/organizer-recognition-logos.jpg
new file mode 100644
index 0000000..182e628
Binary files /dev/null and b/.github/pr-assets/organizer-recognition-logos.jpg differ
diff --git a/public/images/logos/recognitions/github-stars-logo.png b/public/images/logos/recognitions/github-stars-logo.png
new file mode 100644
index 0000000..40e48a8
Binary files /dev/null and b/public/images/logos/recognitions/github-stars-logo.png differ
diff --git a/public/images/logos/recognitions/microsoft-mvp-banner.png b/public/images/logos/recognitions/microsoft-mvp-banner.png
new file mode 100644
index 0000000..d741bd4
Binary files /dev/null and b/public/images/logos/recognitions/microsoft-mvp-banner.png differ
diff --git a/src/components/subcomponents/OrganizerList.module.css b/src/components/subcomponents/OrganizerList.module.css
index 30313be..f1bfd35 100644
--- a/src/components/subcomponents/OrganizerList.module.css
+++ b/src/components/subcomponents/OrganizerList.module.css
@@ -20,13 +20,12 @@
 .RecognitionBadge {
   display: inline-flex;
   align-items: center;
-  gap: 0.55rem;
-  min-height: 2.75rem;
+  justify-content: center;
   max-width: 100%;
-  padding: 0.5rem 0.8rem;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 999px;
-  color: #f8fafc;
+  padding: 0.35rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  background: rgba(8, 15, 28, 0.72);
   text-decoration: none;
   backdrop-filter: blur(18px);
   box-shadow: 0 18px 30px rgba(15, 23, 36, 0.28);
@@ -49,64 +48,20 @@
   outline-offset: 2px;
 }
 
-.RecognitionBadge--microsoft-mvp {
-  background: linear-gradient(135deg, rgba(21, 30, 48, 0.9), rgba(40, 58, 88, 0.78));
-}
-
 .RecognitionBadge--github-star {
-  background: linear-gradient(135deg, rgba(10, 14, 24, 0.92), rgba(31, 41, 55, 0.82));
+  padding: 0.2rem;
+  border-radius: 999px;
 }
 
-.RecognitionBadge__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
+.RecognitionBadge--microsoft-mvp {
+  padding: 0.28rem 0.34rem;
+  border-radius: 1rem;
 }
 
-.RecognitionBadge__label {
-  display: inline-block;
+.RecognitionBadge__image {
+  display: block;
   max-width: 100%;
-  font-size: 0.76rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.MicrosoftGlyph {
-  display: grid;
-  grid-template-columns: repeat(2, 0.48rem);
-  grid-template-rows: repeat(2, 0.48rem);
-  gap: 0.14rem;
-}
-
-.MicrosoftGlyph span:nth-child(1) {
-  background: #f25022;
-}
-
-.MicrosoftGlyph span:nth-child(2) {
-  background: #7fba00;
-}
-
-.MicrosoftGlyph span:nth-child(3) {
-  background: #00a4ef;
-}
-
-.MicrosoftGlyph span:nth-child(4) {
-  background: #ffb900;
-}
-
-.GitHubStarGlyph {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.15rem;
-  height: 1.15rem;
-  color: #facc15;
-  font-size: 1rem;
-  line-height: 1;
-  text-shadow: 0 0 18px rgba(250, 204, 21, 0.4);
+  height: auto;
 }
 
 @media screen and (max-width: 47.99rem) {
@@ -116,11 +71,6 @@
   }
 
   .RecognitionBadge {
-    min-height: 2.5rem;
-    padding-inline: 0.75rem;
-  }
-
-  .RecognitionBadge__label {
-    font-size: 0.7rem;
+    padding: 0.28rem;
   }
 }
\ No newline at end of file
diff --git a/src/components/subcomponents/OrganizerList.tsx b/src/components/subcomponents/OrganizerList.tsx
index 0b9a593..f5e2ff5 100644
--- a/src/components/subcomponents/OrganizerList.tsx
+++ b/src/components/subcomponents/OrganizerList.tsx
@@ -4,6 +4,17 @@ import { River } from './River'
 import { Heading, Text, Link } from '@primer/react-brand'
 import styles from './OrganizerList.module.css'
 
+const recognitionLogoByKind = {
+  'github-star': {
+    src: `${process.env.PUBLIC_URL}/images/logos/recognitions/github-stars-logo.png`,
+    imageStyle: { width: 'min(56px, 18vw)' },
+  },
+  'microsoft-mvp': {
+    src: `${process.env.PUBLIC_URL}/images/logos/recognitions/microsoft-mvp-banner.png`,
+    imageStyle: { width: 'min(168px, 42vw)', borderRadius: '12px' },
+  },
+} as const
+
 type OrganizerListProps = Readonly<{ organizers: Organizer[] }>
 
 type RecognitionBadgeProps = Readonly<{
@@ -12,30 +23,19 @@ type RecognitionBadgeProps = Readonly<{
 }>
 
 function RecognitionBadge({ recognition, organizerName }: RecognitionBadgeProps) {
-  const isMicrosoftMvp = recognition.kind === 'microsoft-mvp'
+  const logo = recognitionLogoByKind[recognition.kind]
+  const variantClassName = styles[`RecognitionBadge--${recognition.kind}`]
 
   return (
     <a
-      className={`${styles.RecognitionBadge} ${isMicrosoftMvp ? styles['RecognitionBadge--microsoft-mvp'] : styles['RecognitionBadge--github-star']}`}
+      className={`${styles.RecognitionBadge} ${variantClassName}`}
       href={recognition.url}
       target="_blank"
       rel="noreferrer"
       aria-label={`${recognition.label} page for ${organizerName}`}
       title={`${recognition.label} · ${organizerName}`}
     >
-      <span className={styles.RecognitionBadge__icon} aria-hidden="true">
-        {isMicrosoftMvp ? (
-          <span className={styles.MicrosoftGlyph}>
-            <span />
-            <span />
-            <span />
-            <span />
-          </span>
-        ) : (
-          <span className={styles.GitHubStarGlyph}>★</span>
-        )}
-      </span>
-      <span className={styles.RecognitionBadge__label}>{recognition.label}</span>
+      <img className={styles.RecognitionBadge__image} src={logo.src} alt="" style={logo.imageStyle} />
     </a>
   )
 }