diff --git a/packages/composable/lib/useUserRole.ts b/packages/composable/lib/useUserRole.ts
index 623a1d65..dbdc4489 100644
--- a/packages/composable/lib/useUserRole.ts
+++ b/packages/composable/lib/useUserRole.ts
@@ -4,11 +4,11 @@ import { match } from 'ts-pattern'
 export function useUserRole() {
   const backgroundColor = (role: Role) =>
     match(role)
-      .with('staff', () => '#233445')
-      .with('speaker', () => '#90B44B')
-      .with('sponsor', () => '#FFC408')
-      .with('attendee', () => '#F17C67')
-      .with('attendee + party', () => '#33A6B8')
+      .with('staff', () => 'color-mix(in srgb, var(--color-vue-blue), #000 20%)')
+      .with('speaker', () => 'var(--color-hiwamoegi200)')
+      .with('sponsor', () => 'var(--color-tohoh200)')
+      .with('attendee', () => 'var(--color-sangosyo200)')
+      .with('attendee + party', () => 'var(--color-asagi200)')
       .exhaustive()
 
   const textColor = (role: Role) =>
diff --git a/packages/model/lib/attendee.ts b/packages/model/lib/attendee.ts
index e6d37871..58934521 100644
--- a/packages/model/lib/attendee.ts
+++ b/packages/model/lib/attendee.ts
@@ -24,7 +24,7 @@ export type Attendee = {
   id?: string
   provider: string
   receipt_id: string
-  role?: string
+  role?: Role
   updated_at: string
   user_id: string
 }
diff --git a/packages/ui/assets/namecard/bg_texture.png b/packages/ui/assets/namecard/bg_texture.png
new file mode 100644
index 00000000..c92da5ff
Binary files /dev/null and b/packages/ui/assets/namecard/bg_texture.png differ
diff --git a/packages/ui/assets/namecard/support.svg b/packages/ui/assets/namecard/support.svg
new file mode 100644
index 00000000..00be3e6d
--- /dev/null
+++ b/packages/ui/assets/namecard/support.svg
@@ -0,0 +1,24 @@
+<svg width="262" height="24" viewBox="0 0 262 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M259.814 10.6163C259.2 10.6911 258.721 11.0952 258.541 11.6491C257.043 11.5293 255.8 10.4067 255.53 8.89496C255.86 10.1373 257.073 10.9755 258.391 10.8109C258.676 10.7809 258.93 10.6911 259.185 10.5863C259.59 10.4516 259.949 10.2121 260.234 9.91277H260.249C260.713 9.40386 260.983 8.71533 260.893 7.99687V7.96696C260.533 5.96125 259.065 4.40458 257.208 3.8358C257.283 3.61128 257.313 3.38676 257.283 3.1323C257.193 2.36894 256.549 1.80017 255.815 1.7852C255.111 4.92846 252.654 7.32333 249.298 7.81727L249.089 7.86217C245.134 8.34114 242.273 11.7987 242.467 15.7203C242.048 11.4245 245.134 7.56283 249.433 7.03895C251.246 6.67972 252.504 4.97339 252.264 3.11736C252.025 1.17154 250.257 -0.220491 248.31 0.0189952C248.19 0.0189952 248.07 0.0489438 247.965 0.0788796C241.793 1.08173 237.464 6.79945 238.243 13.056C239.037 19.4773 244.879 24.0275 251.291 23.2492C252.115 23.1444 252.893 22.9648 253.642 22.7104C253.642 22.7104 253.657 22.7104 253.672 22.7104C253.762 22.6804 253.852 22.6505 253.942 22.6206C253.972 22.6206 254.002 22.5906 254.047 22.5906C254.137 22.5607 254.227 22.5158 254.317 22.4859C254.347 22.4859 254.376 22.4559 254.406 22.4559C254.496 22.411 254.586 22.3811 254.676 22.3362C254.691 22.3362 254.721 22.3212 254.736 22.3062C255.68 21.8721 256.564 21.3183 257.358 20.6747C257.762 20.3454 258.151 19.9712 258.496 19.5821C257.882 19.0432 257.043 18.7588 256.174 18.8786C255.305 18.9834 254.571 19.4473 254.107 20.1059C254.077 20.1359 254.047 20.1658 254.017 20.1957V20.1658C254.571 19.3276 254.826 18.3098 254.691 17.2471C254.391 14.8073 252.159 13.071 249.718 13.3704C249.463 13.4003 249.223 13.4303 248.984 13.5051C249.433 13.2806 249.927 13.1309 250.437 13.071C251.38 12.9513 252.294 13.1458 253.088 13.5649L253.133 13.5949C254.077 14.1188 255.2 14.3732 256.354 14.2235C257.313 14.1038 258.166 13.7446 258.885 13.2057C259.215 13.5799 259.709 13.7895 260.234 13.7296C261.088 13.6248 261.687 12.8615 261.582 12.0083C261.477 11.1551 260.713 10.5564 259.859 10.6612L259.814 10.6163ZM257.852 6.67969C258.166 6.63479 258.436 6.85933 258.481 7.17366C258.526 7.48798 258.301 7.75738 257.987 7.80228C257.672 7.84719 257.402 7.62269 257.358 7.30836C257.313 6.99404 257.537 6.72459 257.852 6.67969Z" fill="black"/>
+<path d="M165.754 20.8426V6.75781H169.963V8.83833C170.682 7.56606 172.54 6.75781 174.113 6.75781C176.165 6.75781 177.648 7.59603 178.367 9.01798C179.491 7.40145 180.884 6.75781 182.831 6.75781C185.558 6.75781 188.164 8.3444 188.164 12.266V20.8576H183.91V13.2539C183.91 11.8918 183.191 10.8141 181.618 10.8141C180.045 10.8141 179.206 11.9966 179.206 13.2689V20.8426H174.862V13.2389C174.862 11.8768 174.143 10.7991 172.54 10.7991C170.937 10.7991 170.158 11.9816 170.158 13.2838V20.8276H165.754V20.8426Z" fill="black"/>
+<path d="M206.889 20.8426H211.293V6.75781H206.889V20.8426Z" fill="black"/>
+<path d="M214.665 6.72461C213.317 6.72461 212.238 7.81731 212.238 9.14945C212.238 10.4816 213.332 11.5742 214.665 11.5742C215.998 11.5742 217.092 10.4816 217.092 9.14945C217.092 7.81731 215.998 6.72461 214.665 6.72461Z" fill="black"/>
+<path d="M98.1336 6.63728C97.9838 5.67933 97.2048 4.06279 94.7182 4.06279C93.0104 4.06279 91.9019 5.14049 91.9019 6.26308C91.9019 7.25096 92.5161 7.96943 93.9242 8.23886L96.6805 8.76274C100.59 9.4812 102.628 12.0108 102.628 14.9295C102.628 18.1476 99.9312 21.4107 95.0327 21.4107C89.3553 21.4107 86.9135 17.7285 86.6289 14.8397L90.8383 13.8219C91.0181 15.7079 92.2914 17.3543 95.0927 17.3543C96.8903 17.3543 97.9838 16.4862 97.9838 15.2139C97.9838 14.1662 97.1449 13.4178 95.7817 13.1633L92.9655 12.6394C89.4901 11.9659 87.3779 9.66083 87.3779 6.62234C87.3779 2.74565 90.7934 0.0214844 94.7481 0.0214844C99.8863 0.0214844 101.819 3.08991 102.253 5.49975L98.1336 6.65226V6.63728Z" fill="black"/>
+<path d="M110.626 6.7554H113.263V10.2729H110.626V15.4069C110.626 16.5893 111.18 16.9186 112.139 16.9186C112.604 16.9186 113.038 16.8288 113.293 16.7689V20.4211C113.113 20.5109 112.394 20.8252 111.001 20.8252C108.02 20.8252 106.207 19.059 106.207 16.1852V10.2729H104.439V6.7554H105.099C106.612 6.7554 106.462 5.73757 106.462 4.40542V2.33984H110.611V6.74042L110.626 6.7554Z" fill="black"/>
+<path d="M197.077 6.75522C193.153 6.75522 191.34 9.20996 191.1 11.1558H194.98C195.34 10.5122 196.029 10.0332 197.047 10.0332C198.366 10.0332 199.055 10.7217 199.055 11.515C199.055 11.979 198.8 12.3382 198.066 12.443L194.845 12.937C192.583 13.2663 190.801 14.6433 190.801 17.0681C190.801 19.2384 192.538 21.2142 195.534 21.2142C197.347 21.2142 198.74 20.4509 199.459 19.2834C199.459 20.2114 199.429 20.7203 199.459 20.8251H203.848V12.0239C203.848 9.22491 201.512 6.74023 197.077 6.74023V6.75522ZM199.339 15.706C199.339 17.8165 198.081 18.4302 196.838 18.4302C195.684 18.4302 195.22 17.7416 195.22 17.0232C195.22 16.0652 195.879 15.6462 196.763 15.5115L199.354 15.0924V15.6911L199.339 15.706Z" fill="black"/>
+<path d="M157.709 12.9222L163.462 6.74042H157.754L153.41 11.5302V2.33984H149.006V20.8402H153.41V17.5473L154.833 16.0205L160.885 20.8402H163.102V17.218L157.709 12.9222Z" fill="black"/>
+<path d="M227.366 12.9222L233.103 6.74042H227.395L223.066 11.5302V2.33984H218.662V20.8402H223.066V17.5473L224.489 16.0205L230.526 20.8402H232.758V17.218L227.366 12.9222Z" fill="black"/>
+<path d="M122.925 6.41211C118.716 6.41211 115.42 9.5105 115.42 13.8811C115.42 18.2518 118.716 21.38 122.925 21.38C127.134 21.38 130.43 18.2518 130.43 13.8811C130.43 9.5105 127.164 6.41211 122.925 6.41211ZM122.925 17.3088C121.052 17.3088 119.554 15.797 119.554 13.941C119.554 12.0849 121.067 10.5732 122.925 10.5732C124.782 10.5732 126.295 12.0849 126.295 13.941C126.295 15.797 124.782 17.3088 122.925 17.3088Z" fill="black"/>
+<path d="M142.864 15.3031C142.34 16.4855 141.157 17.3088 139.778 17.3088C137.906 17.3088 136.408 15.797 136.408 13.941C136.408 12.0849 137.921 10.5732 139.778 10.5732C141.097 10.5732 142.235 11.3216 142.789 12.4292L146.505 11.3216C145.875 8.79201 143.613 6.41211 139.719 6.41211C135.569 6.41211 132.273 9.51048 132.273 13.9111C132.273 18.3116 135.659 21.38 139.853 21.38C143.628 21.38 145.965 18.9403 146.579 16.4706L142.849 15.318L142.864 15.3031Z" fill="black"/>
+<path d="M6.26072 7.75888C5.75139 7.10029 5.19713 6.62135 3.99873 6.62135C2.8902 6.62135 2.15618 7.11529 2.15618 8.11814C2.15618 9.2557 3.01004 9.62989 4.40319 9.88434C6.24574 10.1987 7.35426 10.8572 7.35426 12.6235C7.35426 13.8658 6.53036 15.2877 4.14853 15.2877C2.60558 15.2877 1.46709 14.7639 0.748047 13.7311L1.72175 13.0575C2.35092 13.791 2.8902 14.21 4.13355 14.21C5.69148 14.21 6.15586 13.4916 6.15586 12.6833C6.15586 11.7853 5.70645 11.1865 3.90884 10.9022C2.11124 10.6327 0.957767 9.76461 0.957767 8.11814C0.957767 6.75606 1.85657 5.55859 4.04367 5.55859C5.55665 5.55859 6.51538 6.06752 7.18948 7.11527L6.26072 7.77386V7.75888Z" fill="black"/>
+<path d="M14.3798 15.1678H13.2713V14.4942C12.9268 15.0181 12.4474 15.2875 11.4288 15.2875C9.94574 15.2875 8.91211 14.5092 8.91211 12.5783V8.26758H10.0206V12.5634C10.0206 13.9554 10.7846 14.2547 11.5935 14.2547C12.6272 14.2547 13.2713 13.5213 13.2713 12.5783V8.26758H14.3798V15.1678Z" fill="black"/>
+<path d="M19.1578 8.16342C20.8655 8.16342 21.9141 9.28601 21.9141 11.2468V12.1598C21.9141 13.956 21.0303 15.2732 19.1578 15.2732C18.244 15.2732 17.6598 14.9888 17.2853 14.4649V17.7728H16.1768V8.25322H17.2853V8.94174C17.6598 8.43283 18.259 8.14844 19.1578 8.14844V8.16342ZM20.8206 12.1598V11.2468C20.8206 9.92963 20.1914 9.15131 19.0529 9.15131C17.9145 9.15131 17.2853 9.91467 17.2853 11.157V12.1598C17.2853 13.3423 17.7796 14.2853 19.0529 14.2853C20.2214 14.2853 20.8206 13.3273 20.8206 12.1598Z" fill="black"/>
+<path d="M26.3502 8.16342C28.0579 8.16342 29.1065 9.28601 29.1065 11.2468V12.1598C29.1065 13.956 28.2227 15.2732 26.3502 15.2732C25.4364 15.2732 24.8522 14.9888 24.4777 14.4649V17.7728H23.3691V8.25322H24.4777V8.94174C24.8522 8.43283 25.4514 8.14844 26.3502 8.14844V8.16342ZM28.013 12.1598V11.2468C28.013 9.92963 27.3838 9.15131 26.2453 9.15131C25.1068 9.15131 24.4777 9.91467 24.4777 11.157V12.1598C24.4777 13.3423 24.972 14.2853 26.2453 14.2853C27.4138 14.2853 28.013 13.3273 28.013 12.1598Z" fill="black"/>
+<path d="M35.9516 12.1605C35.9516 13.9566 35.0677 15.2738 33.0754 15.2738C31.2328 15.2738 30.1992 14.0614 30.1992 12.1605V11.2474C30.1992 9.28665 31.2628 8.16406 33.0754 8.16406C34.888 8.16406 35.9516 9.28665 35.9516 11.2474V12.1605ZM34.858 12.1605V11.2474C34.858 9.93027 34.2289 9.15195 33.0904 9.15195C31.9519 9.15195 31.3227 9.96021 31.3227 11.2474V12.1605C31.3227 13.3429 31.8171 14.2859 33.0904 14.2859C34.2588 14.2859 34.858 13.328 34.858 12.1605Z" fill="black"/>
+<path d="M41.1493 9.75133C40.8647 9.34719 40.5052 9.16756 39.9959 9.16756C39.157 9.16756 38.5128 9.7962 38.5128 10.844V15.1547H37.4043V8.25453H38.5128V8.92806C38.7975 8.44909 39.2768 8.13477 40.1157 8.13477C41.0594 8.13477 41.6437 8.4491 42.0931 9.07775L41.1493 9.73634V9.75133Z" fill="black"/>
+<path d="M42.2285 8.26959H43.1123V6.75781H44.2209V8.26959H45.8088V9.25743H44.2209V12.76C44.2209 13.7179 44.3257 14.1071 45.2545 14.1071H45.8088V15.1548H45.2096C43.5767 15.1548 43.1123 14.4663 43.1123 13.0294V9.24249H42.2285V8.2546V8.26959Z" fill="black"/>
+<path d="M52.2203 14.1213C51.7409 14.9595 51.0069 15.2738 49.8085 15.2738C47.9659 15.2738 46.8574 14.0764 46.8574 12.1605V11.2474C46.8574 9.28665 47.7862 8.16406 49.5838 8.16406C51.3814 8.16406 52.3252 9.28665 52.3252 11.2474V11.9659H47.9659V12.1605C47.9659 13.3429 48.5352 14.2859 49.7336 14.2859C50.6324 14.2859 51.0818 14.0315 51.3814 13.5076L52.2353 14.1213H52.2203ZM47.951 10.993H51.2016C51.1417 9.84045 50.6324 9.13697 49.5838 9.13697C48.5352 9.13697 48.0259 9.84045 47.951 10.993Z" fill="black"/>
+<path d="M58.2128 5.64844H59.3214V15.168H58.2128V14.5543C57.8383 15.0333 57.2391 15.2728 56.3403 15.2728C54.4678 15.2728 53.584 13.9556 53.584 12.1594V11.2464C53.584 9.27066 54.6326 8.16304 56.3403 8.16304C57.2541 8.16304 57.8383 8.44743 58.2128 8.95633V5.64844ZM58.2128 12.2492V11.2464C58.2128 9.94422 57.5837 9.15092 56.4452 9.15092C55.3067 9.15092 54.6775 9.94422 54.6775 11.2464V12.1594C54.6775 13.3269 55.2767 14.2849 56.4452 14.2849C57.6136 14.2849 58.2128 13.4018 58.2128 12.2642V12.2492Z" fill="black"/>
+<path d="M65.673 8.95633C66.0475 8.44743 66.6467 8.16304 67.5455 8.16304C69.2532 8.16304 70.3018 9.28563 70.3018 11.2464V12.1594C70.3018 13.9556 69.418 15.2728 67.5455 15.2728C66.6167 15.2728 66.0475 15.0333 65.673 14.5543V15.168H64.5645V5.64844H65.673V8.95633ZM69.2083 12.1594V11.2464C69.2083 9.92925 68.5791 9.15092 67.4406 9.15092C66.3021 9.15092 65.673 9.91428 65.673 11.1566V12.1594C65.673 13.3419 66.1673 14.2849 67.4406 14.2849C68.6091 14.2849 69.2083 13.3269 69.2083 12.1594Z" fill="black"/>
+<path d="M73.6255 15.2277L70.9141 8.26758H72.0975L74.1498 13.6261L75.9624 8.26758H77.1308L74.704 15.3923C74.1348 17.0537 73.7603 17.7872 71.8278 17.7872V16.7095C72.7416 16.7095 73.1611 16.5598 73.5805 15.3324L73.6105 15.2426L73.6255 15.2277Z" fill="black"/>
+</svg>
diff --git a/packages/ui/assets/namecard/vuefes_logo.svg b/packages/ui/assets/namecard/vuefes_logo.svg
new file mode 100644
index 00000000..9fa3bce8
--- /dev/null
+++ b/packages/ui/assets/namecard/vuefes_logo.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="27" viewBox="0 0 30 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.447 13.9388C27.0272 13.9388 29.9334 11.035 29.9334 7.45767C29.9334 3.88034 27.0272 0.976562 23.447 0.976562C20.7206 0.976562 18.3837 2.65297 17.425 5.04783L15.0731 0.976562L10.6091 8.70001L15.0731 16.4235L21.0652 6.14049H27.0123L15.0731 26.7064L7.643 13.849L0.212891 26.7064H29.9334L22.5332 13.8939C22.8328 13.9388 23.1324 13.9537 23.447 13.9537V13.9388Z" fill="white"/>
+</svg>
diff --git a/packages/ui/components/namecard/Namecard23.vue b/packages/ui/components/namecard/Namecard23.vue
index b6f3f244..2ededc67 100644
--- a/packages/ui/components/namecard/Namecard23.vue
+++ b/packages/ui/components/namecard/Namecard23.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NamecardAvatar from './NamecardAvatar.vue'
+import NamecardAvatar from './NamecardAvatar23.vue'
 import type { NamecardUser } from '@vuejs-jp/model'
 import { defineAsyncComponent } from 'vue'
 
diff --git a/packages/ui/components/namecard/Namecard24.stories.ts b/packages/ui/components/namecard/Namecard24.stories.ts
index 8ed02ef6..ede97e21 100644
--- a/packages/ui/components/namecard/Namecard24.stories.ts
+++ b/packages/ui/components/namecard/Namecard24.stories.ts
@@ -4,6 +4,13 @@ import Namecard24 from './Namecard24.vue'
 export default {
   title: 'namecard/Namecard24',
   component: Namecard24,
+  args: {
+    user: {
+      display_name: 'jiyuujin',
+      avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+      role: 'attendee',
+    },
+  },
 }
 
 const Template: StoryFn<unknown> = (args, { argTypes }) => ({
@@ -16,3 +23,49 @@ const Template: StoryFn<unknown> = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
+
+export const WithParty = Template.bind({})
+WithParty.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'attendee + party',
+  },
+}
+
+export const Speaker = Template.bind({})
+Speaker.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'speaker',
+  },
+}
+
+export const Sponsor = Template.bind({})
+Sponsor.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'sponsor',
+  },
+}
+
+export const Staff = Template.bind({})
+Staff.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'staff',
+  },
+}
+
+export const NoAvatar = Template.bind({})
+NoAvatar.args = {
+  user: {
+    display_name: '山田　太郎',
+    avatar_url: '',
+    role: 'attendee',
+  },
+  isPlaceholder: true,
+}
diff --git a/packages/ui/components/namecard/Namecard24.vue b/packages/ui/components/namecard/Namecard24.vue
index 7b05fbf7..9cdf52fd 100644
--- a/packages/ui/components/namecard/Namecard24.vue
+++ b/packages/ui/components/namecard/Namecard24.vue
@@ -1,3 +1,79 @@
+<script setup lang="ts">
+import NamecardAvatar from './NamecardAvatar24.vue'
+import type { NamecardUser } from '@vuejs-jp/model'
+import { useUserRole } from '@vuejs-jp/composable'
+import { onMounted, ref } from 'vue'
+
+type NamecardProps = {
+  user: NamecardUser
+  isPlaceholder?: boolean
+}
+
+defineProps<NamecardProps>()
+
+const { backgroundColor } = useUserRole()
+const sponsorImagePath = ref('')
+onMounted(() => {
+  sponsorImagePath.value = new URL('../../assets/namecard/support.svg', import.meta.url).href
+})
+</script>
+
 <template>
-  Namecard 2024
+  <div class="namecard-root">
+    <NamecardAvatar :user="user" :is-placeholder="isPlaceholder" />
+    <div
+      class="namecard-role"
+      :style="{ '--background-color-role': backgroundColor(user.role ?? 'staff') }"
+    >
+      {{ user.role }}
+    </div>
+    <div class="namecard-sponsor">
+      <img :src="sponsorImagePath" alt="Supported by Stockmark" />
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.namecard-root {
+  width: 23.5rem;
+  background-color: var(--color-white);
+  border-radius: calc(var(--unit) * 1.25);
+  overflow: hidden;
+  box-shadow: 0px 8px 24px 0px #0000003d;
+  border: 1px solid #000;
+  @media (width <= 480px) {
+    width: 18rem;
+  }
+}
+
+.namecard-role {
+  --background-color-role: color-mix(in srgb, var(--color-vue-blue), #000 20%);
+  font-size: 1.6875rem;
+  height: 2.625rem;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--color-white);
+  background-color: var(--background-color-role);
+  @media (width <= 480px) {
+    font-size: 1.3125rem;
+    height: 2.0625rem;
+  }
+}
+
+.namecard-sponsor {
+  display: grid;
+  place-items: center;
+  height: 3.75rem;
+  img {
+    width: 16.25rem;
+  }
+  @media (width <= 480px) {
+    height: 2.8125rem;
+    img {
+      width: 12.5rem;
+    }
+  }
+}
+</style>
diff --git a/packages/ui/components/namecard/NamecardAvatar.vue b/packages/ui/components/namecard/NamecardAvatar23.vue
similarity index 100%
rename from packages/ui/components/namecard/NamecardAvatar.vue
rename to packages/ui/components/namecard/NamecardAvatar23.vue
diff --git a/packages/ui/components/namecard/NamecardAvatar24.vue b/packages/ui/components/namecard/NamecardAvatar24.vue
new file mode 100644
index 00000000..24814b69
--- /dev/null
+++ b/packages/ui/components/namecard/NamecardAvatar24.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import NamecardAvatarLogo from './NamecardAvatarLogo24.vue'
+import type { NamecardUser } from '@vuejs-jp/model'
+import { onMounted, ref } from 'vue'
+
+type NamecardAvatarProps = {
+  user: NamecardUser
+  isPlaceholder?: boolean
+}
+defineProps<NamecardAvatarProps>()
+
+const COLOR_AVATAR_NAME = {
+  DEFAULT: 'color-mix(in srgb, var(--color-vue-blue), #000 20%)',
+  PLACEHOLDER: 'var(--color-gray100)',
+}
+const vuefesLogoImagePath = ref('')
+onMounted(() => {
+  vuefesLogoImagePath.value = new URL('../../assets/namecard/vuefes_logo.svg', import.meta.url).href
+})
+</script>
+
+<template>
+  <div class="avatar">
+    <span class="avatar-hook" aria-hidden="true" />
+    <div class="vuefes-logo-wrapper">
+      <img :src="vuefesLogoImagePath" alt="vuefes logo" />
+    </div>
+    <div class="avatar-logo-wrapper">
+      <NamecardAvatarLogo :user="user" />
+    </div>
+    <div class="avatar-name-area">
+      <div
+        class="avatar-name"
+        :style="{
+          '--color-avatar-name': isPlaceholder
+            ? COLOR_AVATAR_NAME.PLACEHOLDER
+            : COLOR_AVATAR_NAME.DEFAULT,
+        }"
+      >
+        {{ user.display_name }}
+      </div>
+    </div>
+    <small class="avatar-footer">Vue Fes Japan 2024</small>
+  </div>
+</template>
+
+<style scoped>
+.avatar {
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--color-vue-blue), #000 20%)
+    url('../../assets/namecard/bg_texture.png') no-repeat;
+  background-size: cover;
+  container: avatar / inline-size;
+}
+
+.avatar-hook {
+  margin-top: 1.25rem;
+  width: 25px;
+  aspect-ratio: 1;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  @media (width <= 480px) {
+    margin-top: 0.9375rem;
+    width: 20px;
+  }
+}
+
+.vuefes-logo-wrapper {
+  position: absolute;
+  top: 17.98px;
+  right: 14.07px;
+  width: 29.72px;
+  img {
+    width: 100%;
+  }
+  @media (width <= 480px) {
+    top: 13.77px;
+    right: 10.77px;
+    width: 22.76px;
+  }
+}
+
+.avatar-logo-wrapper {
+  width: 36.17cqi;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  margin-top: 2.5rem;
+  background: var(--color-vue-green-gradation);
+  display: grid;
+  place-items: center;
+  border: 4px solid var(--color-white);
+  container: avatar-logo / inline-size;
+  @media (width <= 480px) {
+    border-width: 3px;
+    margin-top: 1.875rem;
+  }
+}
+
+.avatar-name-area {
+  width: 85cqi;
+  height: 8rem;
+  background-color: var(--color-white);
+  margin-top: 0.8125rem;
+  display: grid;
+  place-items: center;
+  border-radius: calc(var(--unit) * 1.25);
+  padding-inline: 1rem;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+  overflow-y: hidden;
+  @media (width <= 480px) {
+    margin-top: 0.625rem;
+    height: 6.125rem;
+  }
+}
+
+.avatar-name {
+  --color-avatar-name: color-mix(in srgb, var(--color-vue-blue), #000 20%);
+
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--color-avatar-name);
+  @media (width <= 480px) {
+    font-size: 1.6875rem;
+  }
+}
+
+.avatar-footer {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: var(--color-white);
+  margin-top: 2.875rem;
+  margin-bottom: 0.75rem;
+  line-height: 1;
+  height: 0.75rem;
+  @media (width <= 480px) {
+    font-size: 0.8125rem;
+    margin-top: 2.125rem;
+    margin-bottom: 0.4rem;
+  }
+}
+</style>
diff --git a/packages/ui/components/namecard/NamecardAvatarLogo24.vue b/packages/ui/components/namecard/NamecardAvatarLogo24.vue
new file mode 100644
index 00000000..5772fba8
--- /dev/null
+++ b/packages/ui/components/namecard/NamecardAvatarLogo24.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NamecardUser } from '@vuejs-jp/model'
+import { onMounted, ref } from 'vue'
+
+type NamecardAvatarLogoProps = {
+  user: NamecardUser
+}
+
+defineProps<NamecardAvatarLogoProps>()
+const vuefesLogoImagePath = ref('')
+onMounted(() => {
+  vuefesLogoImagePath.value = new URL('../../assets/namecard/vuefes_logo.svg', import.meta.url).href
+})
+</script>
+
+<template>
+  <template v-if="user.avatar_url">
+    <img :alt="user.display_name" :src="user.avatar_url" class="avatar-logo" decoding="async" />
+  </template>
+  <template v-else>
+    <img alt="vuefes logo avatar sample" :src="vuefesLogoImagePath" class="sample-logo" />
+  </template>
+</template>
+
+<style scoped>
+.avatar-logo {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.sample-logo {
+  width: 40cqi;
+  opacity: 0.5;
+  padding-bottom: 4cqi;
+}
+</style>
diff --git a/packages/ui/components/namecard/OgCard23.vue b/packages/ui/components/namecard/OgCard23.vue
index 9a92411f..25d2ef23 100644
--- a/packages/ui/components/namecard/OgCard23.vue
+++ b/packages/ui/components/namecard/OgCard23.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NamecardUser } from '@vuejs-jp/model'
-import NamecardAvatar from './NamecardAvatar.vue'
+import NamecardAvatar from './NamecardAvatar23.vue'
 import { defineAsyncComponent } from 'vue'
 
 type OgCardProps = {