diff --git a/apps/web/app/components/namecard/CreationProcess.vue b/apps/web/app/components/namecard/CreationProcess.vue
index 6ae739e1..d7551d46 100644
--- a/apps/web/app/components/namecard/CreationProcess.vue
+++ b/apps/web/app/components/namecard/CreationProcess.vue
@@ -18,7 +18,7 @@ const { color } = useColor()
       }"
       class="title"
     >
-      {{ t('namecard.creation-process.title') }}
+      {{ t('namecard.creation_process.title') }}
     </h2>
     <ol
       :style="{
diff --git a/apps/web/app/components/namecard/CreationStatus.vue b/apps/web/app/components/namecard/CreationStatus.vue
index 7baee077..477112f7 100644
--- a/apps/web/app/components/namecard/CreationStatus.vue
+++ b/apps/web/app/components/namecard/CreationStatus.vue
@@ -9,8 +9,11 @@ const { color } = useColor()
 export type Status = 'not_created' | 'inquiry_in_progress' | 'inquiry_failed' | 'inquiry_completed'
 type Props = {
   statusKey: Status
+  size?: 'small' | 'medium'
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+})
 
 const backgroundColor = computed(() => {
   switch (props.statusKey) {
@@ -24,29 +27,46 @@ const backgroundColor = computed(() => {
       return color('gray/100')
   }
 })
+
+const style = computed(() => {
+  const baseStyle = {
+    color: color('white'),
+    backgroundColor: backgroundColor.value,
+  }
+  switch (props.size) {
+    case 'small':
+      return {
+        ...baseStyle,
+        height: '24px',
+        borderRadius: '24px',
+        padding: '0 20px',
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('body/100'),
+      }
+    default:
+      return {
+        ...baseStyle,
+        height: '38px',
+        borderRadius: '38px',
+        padding: '0 38px',
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('heading/200'),
+      }
+  }
+})
 </script>
 
 <template>
-  <div
-    class="creation-status-root"
-    :style="{
-      fontWeight: fontWeight('heading/700'),
-      fontSize: fontSize('heading/200'),
-      color: color('white'),
-      backgroundColor: backgroundColor,
-    }"
-  >
+  <div class="creation-status-root" :style="style">
     {{ t(`namecard.creation_status.${statusKey}`) }}
   </div>
 </template>
 
 <style scoped>
 .creation-status-root {
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 166px;
-  height: 38px;
-  border-radius: 38px;
+  line-height: 1;
 }
 </style>
diff --git a/apps/web/app/components/namecard/ImageUploader.vue b/apps/web/app/components/namecard/ImageUploader.vue
index 9e690fd1..17e254c9 100644
--- a/apps/web/app/components/namecard/ImageUploader.vue
+++ b/apps/web/app/components/namecard/ImageUploader.vue
@@ -1,25 +1,216 @@
 <script setup lang="ts">
-import { useTypography } from '@vuejs-jp/composable'
+import { useI18n } from '#i18n'
+import { onMounted, ref } from 'vue'
+import { useColor, useTypography } from '@vuejs-jp/composable'
 
-type Props = {
-  label: string
+interface DragDropProps {
+  fileAccept: string
 }
-defineProps<Props>()
 
+defineProps<DragDropProps>()
+const isDragEnter = ref(false)
+
+const emit = defineEmits<{
+  'check-files': [e: Event, value: File[]]
+}>()
+
+const fileName = ref<string | null>()
+
+const { t } = useI18n()
+const onDropFile = (e: DragEvent) => {
+  e.preventDefault()
+  if (e.dataTransfer?.files) {
+    fileName.value = e.dataTransfer.files[0].name
+    emit('check-files', e, Array.from(e.dataTransfer.files))
+  }
+}
+
+function handleCloseButton(e: Event) {
+  fileName.value = null
+  emit('check-files', e, [])
+}
+
+const onFileInputChange = (event: Event) => {
+  event.preventDefault()
+  const { target } = event
+  if (!(target instanceof HTMLInputElement)) return
+
+  if (target.files) {
+    fileName.value = target.files[0].name
+    emit('check-files', event, Array.from(target.files))
+  }
+}
+
+const { color: updateColor } = useColor()
 const { fontWeight, fontSize } = useTypography()
+
+onMounted(() => {
+  window.ondrop = (e) => {
+    e.preventDefault()
+  }
+  window.ondragover = (e) => {
+    e.preventDefault()
+  }
+})
 </script>
 
 <template>
-  <!-- TODO 画像アップローダーのブラッシュアップ -->
-  <VFDragDropArea
+  <label
+    for="fileupload"
+    class="drag-drop-area-root"
     :style="{
+      fontSize: fontSize('body/300'),
       fontWeight: fontWeight('heading/100'),
-      fontSize: fontSize('heading/100'),
+      color: updateColor('vue-green/200'),
     }"
   >
-    {{ label }}
-    <VFCssResetButton class="select-button" />
-  </VFDragDropArea>
+    {{ t('namecard.form.label_avatar') }}
+    <div v-if="fileName" class="file-name-area">
+      <p class="file-name">{{ fileName }}</p>
+      <VFIconButton
+        class="icon-close"
+        color="vue-blue"
+        name="close"
+        can-hover
+        @click="handleCloseButton"
+      />
+    </div>
+    <button
+      v-else
+      draggable="true"
+      class="drag-drop-area"
+      :class="{ '-isDragEnter': isDragEnter }"
+      @dragenter="() => (isDragEnter = true)"
+      @dragleave="() => (isDragEnter = false)"
+      @dragover.prevent
+      @drop.prevent="onDropFile"
+    >
+      <div class="message-area">
+        <p
+          class="label"
+          :style="{
+            fontSize: fontSize('body/400'),
+            fontWeight: fontWeight('heading/200'),
+            color: updateColor('vue-blue'),
+          }"
+        >
+          {{ t('namecard.form.drag_and_drop') }}
+        </p>
+        <p
+          class="label or"
+          :style="{
+            fontSize: fontSize('body/200'),
+            fontWeight: fontWeight('body/300'),
+            color: updateColor('vue-blue'),
+          }"
+        >
+          {{ t('namecard.form.or') }}
+        </p>
+      </div>
+      <input
+        id="fileUpload"
+        class="select-button"
+        type="file"
+        name="avatar"
+        :accept="fileAccept"
+        @change="onFileInputChange"
+      />
+    </button>
+    <p
+      class="annotation"
+      :style="{
+        fontSize: fontSize('body/300'),
+        fontWeight: fontWeight('body/300'),
+        color: updateColor('vue-blue'),
+      }"
+    >
+      {{ t('namecard.form.annotation_avatar') }}
+    </p>
+    <!--   TODO エラー制御
+    <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
+      errorMessage
+    }}</Typography> -->
+  </label>
 </template>
 
-<style scoped></style>
+<style scoped>
+@import url('~/assets/media.css');
+
+.drag-drop-area-root {
+  display: inline-block;
+}
+.drag-drop-area {
+  width: 100%;
+  margin: calc(var(--unit) * 1.5) auto;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  background-color: #fff;
+  color: var(--color-vue-blue);
+}
+.drag-drop-area:hover {
+  transition: 0.2s;
+  box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
+}
+.file-name-area {
+  width: 100%;
+  margin: calc(var(--unit) * 1.5) auto;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  background: #c6cacf40;
+  color: var(--color-vue-blue);
+  padding: calc(var(--unit) * 3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.file-name {
+  flex-grow: 1;
+  text-align: center;
+}
+.icon-close {
+  display: inline-block;
+  text-align: right;
+  height: 22px;
+}
+.message-area {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: var(--height-input-area);
+  width: 100%;
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 3) 0;
+  text-align: center;
+}
+.label {
+  margin-bottom: calc(var(--unit) * 1.5);
+}
+#fileUpload {
+  font-size: 0;
+}
+::file-selector-button {
+  --height-button: 50px;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: var(--font-size-body400);
+  font-weight: 700;
+  color: var(--color-vue-blue);
+  background-color: var(--color-white);
+
+  height: var(--height-button);
+  padding: 0 43px;
+  margin: 0 auto calc(var(--unit) * 3);
+  border: 2px solid var(--color-vue-blue);
+  border-radius: var(--height-button);
+  cursor: pointer;
+}
+::file-selector-button:hover {
+  transition: 0.2s;
+  color: var(--color-white);
+  background-color: var(--color-vue-blue);
+  box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
+}
+</style>
diff --git a/apps/web/app/composables/useAuth.ts b/apps/web/app/composables/useAuth.ts
index 89d4e9f8..cd54f17e 100644
--- a/apps/web/app/composables/useAuth.ts
+++ b/apps/web/app/composables/useAuth.ts
@@ -30,9 +30,5 @@ export function useAuth() {
    return data.user
   }
 
-  const authUserId = getUser().then(user => {
-    return user.id
-  }).catch(()=> null)
-
-  return { signIn, signOut, authUserId }
+  return { signIn, signOut, getUser }
 }
diff --git a/apps/web/app/composables/useLocale.ts b/apps/web/app/composables/useLocale.ts
index 36aa476d..b41a7197 100644
--- a/apps/web/app/composables/useLocale.ts
+++ b/apps/web/app/composables/useLocale.ts
@@ -35,6 +35,7 @@ export function useLocale(path: Path) {
       .with('namecard_process_3', () => `/${locale.value}/namecard_process_3`)
       .with('namecard_process_4', () => `/${locale.value}/namecard_process_4`)
       .with('namecard_process_alert', () => `/${locale.value}/namecard_process_alert`)
+      .with('namecard_annotation_order_number', () => `/${locale.value}/namecard_annotation_order_number`)
       .exhaustive(),
   )
 
diff --git a/apps/web/app/composables/useNamecard.ts b/apps/web/app/composables/useNamecard.ts
new file mode 100644
index 00000000..25035ec0
--- /dev/null
+++ b/apps/web/app/composables/useNamecard.ts
@@ -0,0 +1,49 @@
+import { computed } from 'vue'
+import { useSupabase, useAsyncData, useAuth } from '#imports'
+import type { Status } from '~/components/namecard/CreationStatus.vue'
+import type { Attendee } from '@vuejs-jp/model'
+
+
+export async function useNamecard(userId?:string) {
+  const { fetchAttendeeDataByUserId } = useSupabase()
+  const { getUser } = useAuth()
+
+  const { data: authUserId } = await useAsyncData('authUserId', async () => {
+    return (await getUser()).id
+  })
+
+  const { data: attendeeByUserId } = await useAsyncData('attendeeByUserId', async () => {
+    return await fetchAttendeeDataByUserId('attendees', authUserId.value ?? userId ?? '')
+  })
+
+  const userData = computed(() => {
+    return attendeeByUserId.value?.data?.[0]
+  })
+
+  const statusKey = computed<Status>(() => {
+    // TODO テーブルのどの箇所を参照して全ステータスを判定する？
+    if (userData.value?.activated_at) {
+      return 'inquiry_in_progress'
+    } else {
+      return 'not_created'
+    }
+  })
+
+  const attendee = computed<Attendee>(() => {
+    // TODO time 系は空文字じゃない方が良い。supabase側で設定できるのか、フロント側でnew Date使うのか？
+    return {
+      id: userData.value?.id ?? '',
+      user_id: userData.value?.user_id ?? '',
+      activated_at: userData.value?.activated_at ?? '',
+      created_at: userData.value?.created_at ?? '',
+      updated_at: userData.value?.updated_at ?? '',
+      display_name: userData.value?.display_name ?? '',
+      email: userData.value?.email ?? '',
+      provider: userData.value?.provider ?? '',
+      avatar_url: userData.value?.avatar_url ?? '',
+      role: userData.value?.role ?? '',
+      receipt_id: userData.value?.receipt_id ?? '',
+    }
+  })
+  return { authUserId, userData, statusKey, attendee }
+}
\ No newline at end of file
diff --git a/apps/web/app/composables/useSupabase.ts b/apps/web/app/composables/useSupabase.ts
index 0d950576..17dba754 100644
--- a/apps/web/app/composables/useSupabase.ts
+++ b/apps/web/app/composables/useSupabase.ts
@@ -23,6 +23,10 @@ export function useSupabase() {
     return await client.from(table).select().eq('role', role)
   }
 
+  async function fetchAttendeeDataByUserId(table: Extract<Table, 'attendees'>, userId:string) {
+    return await client.from(table).select().eq('user_id', userId)
+  }
+
   async function upsertSpeaker(table: Extract<Table, 'speakers'>, target: FormSpeaker) {
     const targetData = { ...target }
 
@@ -65,6 +69,7 @@ export function useSupabase() {
   return {
     fetchData,
     fetchAttendeeData,
+    fetchAttendeeDataByUserId,
     upsertSpeaker,
     upsertSponsor,
     upsertJob,
diff --git a/apps/web/app/content/en/namecard_annotation_order_number.md b/apps/web/app/content/en/namecard_annotation_order_number.md
new file mode 100644
index 00000000..3e1ab5da
--- /dev/null
+++ b/apps/web/app/content/en/namecard_annotation_order_number.md
@@ -0,0 +1 @@
+\* The order number can be found in the [receipt data](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741) included in the email sent by Peatix when you purchase a ticket.
diff --git a/apps/web/app/content/ja/namecard_annotation_order_number.md b/apps/web/app/content/ja/namecard_annotation_order_number.md
new file mode 100644
index 00000000..cd5bca1f
--- /dev/null
+++ b/apps/web/app/content/ja/namecard_annotation_order_number.md
@@ -0,0 +1 @@
+※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる[領収データ](https://help-attendee.peatix.com/ja-JP/support/solutions/articles/44001821741)から確認できます。
diff --git a/apps/web/app/lang/en.json b/apps/web/app/lang/en.json
index a42e2a31..b60fa4ca 100644
--- a/apps/web/app/lang/en.json
+++ b/apps/web/app/lang/en.json
@@ -6,6 +6,9 @@
   "not_found": "The page you are looking for cannot be found.",
   "prefix_year": "",
   "suffix_year": "2024",
+  "invite_vue_fes": "Would you like to join Vue Fes Japan 2024 as well?",
+  "share_namecard": "Let's share this name card on social media!",
+  "official_site": "Vue Fes Japan Official Website",
   "top_page": {
     "latest_information": "Get the latest information on our official social media",
     "date": "October 19th, 2024",
@@ -128,8 +131,11 @@
     "title_edit": "Create/Edit Name Card",
     "edit": "Edit",
     "login": "Login",
-    "namecard-samples-alt": "Name card samples",
-    "creation-process": {
+    "dialog_message": "To create a name card, you need to purchase a ticket in advance. After purchasing your ticket, log in using one of the following social accounts and register the necessary information.",
+    "namecard_samples_alt": "Name card samples",
+    "complete_message": "We will now verify your order number. You can check the status of the order number verification on the name card page. Please ensure that the verification is successfully completed before the editing deadline.",
+    "lets_share": "Share your created name card on social media!",
+    "creation_process": {
       "title": "Name Card Creation Process"
     },
     "creation_status": {
@@ -143,10 +149,13 @@
       "label_avatar": "アバター／Avatar",
       "label_order_number": "Order Number",
       "annotation_name": "Up to 12 full-width characters (24 half-width characters)",
-      "annotation_order_number": "* The order number can be found in the receipt data included in the email sent by Peatix when you purchase a ticket.",
+      "annotation_avatar": "*  Upload a square image (aspect ratio 1:1) for your avatar.",
       "placeholder_order_number": "Please enter the order number",
       "submit": "Submit",
-      "registrationCompleted": "The name card information has been successfully registered!"
+      "registrationCompleted": "The name card information has been successfully registered!",
+      "drag_and_drop": "Drag & drop a file",
+      "or": "or",
+      "select_file": "Select a file"
     }
   }
 }
diff --git a/apps/web/app/lang/ja.json b/apps/web/app/lang/ja.json
index f585daad..0bb0b8af 100644
--- a/apps/web/app/lang/ja.json
+++ b/apps/web/app/lang/ja.json
@@ -6,6 +6,9 @@
   "not_found": "お探しのページが見つかりません。",
   "prefix_year": "2024",
   "suffix_year": "",
+  "invite_vue_fes": "あなたもVue Fes Japan 2024に参加しませんか？",
+  "share_namecard": "このネームカードをSNSでシェアしよう！",
+  "official_site": "Vue Fes Japan 2024公式サイト",
   "day_of_week": {
     "sunday": "日",
     "monday": "月",
@@ -146,25 +149,31 @@
     "title_edit": "ネームカード作成・編集",
     "edit": "編集する",
     "login": "ログインする",
-    "namecard-samples-alt": "ネームカードのサンプル",
-    "creation-process": {
+    "dialog_message": "ネームカードを作成するには、あらかじめチケットの購入が必要です。チケット購入後、以下のいずれかのソーシャルアカウントからログインし、必要な情報をご登録ください。",
+    "namecard_samples_alt": "ネームカードのサンプル",
+    "complete_message": "これから注文番号の照合を行います。注文番号照合の状況はネームカードページのステータスで確認できます。編集期限前に照合が正常に完了したことを確認してください。",
+    "lets_share": "作成したネームカードをSNSでシェアしよう！",
+    "creation_process": {
       "title": "ネームカード作成の流れ"
     },
     "creation_status": {
       "not_created": "未作成",
       "inquiry_in_progress": "注文番号照会中",
       "inquiry_failed": "注文番号照会失敗",
-      "inquiry_completed": "注文番号照合完了"
+      "inquiry_completed": "注文番号照会完了"
     },
     "form": {
       "label_name": "お名前／Name",
       "label_avatar": "アバター／Avatar",
       "label_order_number": "注文番号",
       "annotation_name": "※全角12文字（半角24文字）まで",
-      "annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
+      "annotation_avatar": "※アバターは正方形（比率1:1）の画像をアップロードしてください。",
       "placeholder_order_number": "注文番号を入力してください",
       "submit": "確定する",
-      "registrationCompleted": "ネームカードの情報登録が完了しました！"
+      "registrationCompleted": "ネームカードの情報登録が完了しました！",
+      "drag_and_drop": "ファイルをドラッグ＆ドロップ",
+      "or": "または",
+      "select_file": "ファイルを選択"
     }
   }
 }
diff --git a/apps/web/app/pages/namecard/[id]/edit/complete.vue b/apps/web/app/pages/namecard/[id]/edit/complete.vue
index db749b16..c1cda55e 100644
--- a/apps/web/app/pages/namecard/[id]/edit/complete.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/complete.vue
@@ -1,28 +1,85 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from '#i18n'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
+import { useColor, useTypography } from '@vuejs-jp/composable'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
+import { useNamecard } from '~/composables/useNamecard'
 
 const { t } = useI18n()
-const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'inquiry_in_progress'
-})
-const user = computed<NamecardUser>(() => {
-  // TODO テーブルから取得する
-  return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
-  }
-})
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
+
+const { authUserId, statusKey, attendee } = await useNamecard()
 </script>
 <template>
   <NuxtLayout name="namecard-base">
-    <p>{{ t('namecard.form.registrationCompleted') }}</p>
-    <!-- TODO テキスト&SNSリンク追加 -->
-    <CreationStatus :status-key="statusKey" class="creation-status" />
-    <VFNamecard23 :user="user" class="namecard" />
+    <div class="namecard-complete-root">
+      <h2
+        :style="{
+          fontWeight: fontWeight('heading/700'),
+          fontSize: fontSize('heading/300'),
+          color: color('vue-green/100'),
+        }"
+        class="sub-title"
+      >
+        {{ t('namecard.form.registrationCompleted') }}
+      </h2>
+      <div class="complete-message">
+        <p
+          :style="{
+            fontWeight: fontWeight('body/400'),
+            fontSize: fontSize('body/400'),
+            color: color('vue-blue'),
+          }"
+        >
+          {{ t('namecard.complete_message') }}
+        </p>
+      </div>
+      <VFComment :title="t('namecard.lets_share')" class="share-comment" />
+      <div class="sns-buttons">
+        <!-- TODO  Web Share API 利用 & スタイル調整 -->
+        <VFIconButton
+          name="x"
+          color="black"
+          :href="`/namecard/${authUserId}/share/`"
+          can-hover
+          class="sns-button"
+        />
+        <!-- TODO facebook追加 -->
+        <!--         <VFIconButton
+          class="sns-button"
+          name="facebook"
+          :href="`/namecard/${authUserId}/share/`"
+          can-hover
+        /> -->
+      </div>
+      <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
+      <!-- TODO 24に置き換え&smallサイズ指定 -->
+      <VFNamecard23 :user="attendee" class="namecard-preview" />
+    </div>
   </NuxtLayout>
 </template>
+<style scoped>
+@import url('~/assets/media.css');
+
+.namecard-complete-root {
+  text-align: center;
+}
+.sub-title {
+  margin-bottom: calc(var(--unit) * 5);
+}
+.complete-message {
+  text-align: left;
+  line-height: 1.8;
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  margin-bottom: calc(var(--unit) * 5);
+  background-color: #e7eff7;
+}
+.share-comment,
+.creation-status {
+  margin-bottom: calc(var(--unit) * 2.5);
+}
+
+.namecard-preview {
+  margin: 0 auto;
+}
+</style>
diff --git a/apps/web/app/pages/namecard/[id]/edit/index.vue b/apps/web/app/pages/namecard/[id]/edit/index.vue
index 14ad459a..9c0db553 100644
--- a/apps/web/app/pages/namecard/[id]/edit/index.vue
+++ b/apps/web/app/pages/namecard/[id]/edit/index.vue
@@ -1,82 +1,130 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
+import { useSupabase } from '~/composables/useSupabase'
 import { useI18n } from '#i18n'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
+import { navigateTo } from '#imports'
+import { useNamecard } from '~/composables/useNamecard'
 import ImageUploader from '~/components/namecard/ImageUploader.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
-import { navigateTo, useRoute } from '#imports'
 
 const { t } = useI18n()
-const route = useRoute()
+const { authUserId, statusKey, attendee } = await useNamecard()
+const { upsertAttendee, uploadAvatar } = useSupabase()
 
-// TODO useFormとは別でコンポーザブルを作成する
 const name = ref('')
-const orderNumber = ref('')
-const isSubmitting = ref(true)
-function onSubmit(e: any) {
-  // TODO フォーム送信処理追加
-  e.preventDefault()
-  navigateTo(`/namecard/${route.params.id}/edit/complete/`)
-}
+const receiptId = ref('')
+const isSubmitting = computed(() => {
+  return name.value && receiptId.value && filePathRef.value && fileRef.value
+})
 
 const updateName = (e: any) => {
   name.value = e.target.value
 }
-const updateOrderNumber = (e: any) => {
-  orderNumber.value = e.target.value
+const updateReceiptId = (e: any) => {
+  receiptId.value = e.target.value
 }
 
-const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'not_created'
+const namecard = ref({ ...attendee.value })
+
+const newAttendee = ref({
+  ...attendee.value,
 })
-const user = computed<NamecardUser>(() => {
-  // TODO form から取得する
-  return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
-  }
+
+name.value = newAttendee.value?.display_name ?? ''
+receiptId.value = newAttendee.value?.receipt_id ?? ''
+
+watchEffect(() => {
+  newAttendee.value.display_name = name.value
+  newAttendee.value.receipt_id = receiptId.value
+  namecard.value.display_name = name.value
+  namecard.value.receipt_id = receiptId.value
 })
+
+const filePathRef = ref<string | null>(null)
+const fileRef = ref<File | null>(null)
+
+const checkFiles = (e: Event, files: File[]) => {
+  e.preventDefault()
+  if (files.length === 0) {
+    filePathRef.value = null
+    fileRef.value = null
+    namecard.value.avatar_url = ''
+  } else {
+    const file = files[0]
+
+    let reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = (e) => {
+      namecard.value.avatar_url = e.target?.result as string
+    }
+    const fileExt = file.name.split('.').pop()
+    const filePath = `/${Math.random()}.${fileExt}`
+
+    fileRef.value = file
+    filePathRef.value = filePath
+  }
+}
+
+function onSubmit(e: Event) {
+  // TODO updated_atに現在時刻を追加する必要ある？supabaseの機能でなんかない？
+  e.preventDefault()
+
+  const submitEvent = e as SubmitEvent
+  const submitter = submitEvent.submitter as HTMLElement
+
+  if (submitter && submitter.id === 'submit-button' && filePathRef.value && fileRef.value) {
+    upsertAttendee('attendees', newAttendee.value)
+    uploadAvatar(filePathRef.value, fileRef.value)
+
+    navigateTo(`/namecard/${authUserId.value}/edit/complete/`)
+  }
+}
+
+// TODO バリデート、エラー制御を追加する
 </script>
 <template>
   <NuxtLayout name="namecard-base">
     <div class="namecard-edit-root">
       <div class="preview-wrapper">
-        <VFNamecard23 :user="user" class="namecard" />
-        <CreationStatus :status-key="statusKey" class="creation-status" />
+        <VFNamecard23 :user="namecard" class="namecard" />
+        <CreationStatus :status-key="statusKey" size="small" class="creation-status" />
       </div>
       <div class="form-wrapper">
-        <form @submit="onSubmit">
+        <form @submit.prevent="onSubmit">
           <VFInputField
             id="name"
             v-model="name"
+            class="name"
             name="name"
             :label="t('namecard.form.label_name')"
             :placeholder="`${t('form.form_placeholder_example')}${t('form.form_name_placeholder')}`"
             required
-            :annotation="t('namecard.form.annotation_name')"
             :error="nameError"
             @input="updateName"
             @blur="validateName"
+            ><p class="annotation">{{ t('namecard.form.annotation_name') }}</p></VFInputField
+          >
+          <ImageUploader
+            class="image-uploader"
+            file-accept="image/*"
+            @check-files.prevent="checkFiles"
           />
-          <ImageUploader :label="t('namecard.form.label_avatar')" />
-          <!-- TODO 領収書データ を外部リンク化する -->
           <VFInputField
             id="orderNumber"
-            v-model="orderNumber"
+            v-model="receiptId"
+            class="order-number"
             name="orderNumber"
             :label="t('namecard.form.label_order_number')"
             :placeholder="t('namecard.form.placeholder_order_number')"
             required
-            :annotation="t('namecard.form.annotation_order_number')"
             :error="orderNumberError"
-            @input="updateOrderNumber"
+            @input="updateReceiptId"
             @blur="validateOrderNumbere"
-          />
+            ><div class="annotation"><MarkDownText path="namecard_annotation_order_number" /></div
+          ></VFInputField>
           <div class="form-buttons">
-            <!-- TODO ボタンのスタイルを追加する -->
-            <VFSubmitButton :disabled="!isSubmitting">
+            <!-- TODO ボタン キャンセルボタン スタイルを追加する -->
+            <VFSubmitButton id="submit-button" :disabled="!isSubmitting">
               {{ $t('namecard.form.submit') }}
             </VFSubmitButton>
           </div>
@@ -95,8 +143,31 @@ const user = computed<NamecardUser>(() => {
   margin: 0 auto;
   gap: 0 calc(var(--unit) * 8);
 }
+.namecard {
+  margin-bottom: calc(var(--unit) * 2);
+}
 .form-wrapper {
   text-align: left;
 }
+
+.name,
+.image-uploader {
+  margin-bottom: calc(var(--unit) * 5);
+}
+.order-number {
+  margin-bottom: calc(var(--unit) * 10);
+}
+
+:deep(.input-root) {
+  font-size: var(--font-size-body300);
+  font-weight: 700;
+  color: var(--color-vue-green200);
+}
+.annotation,
+.annotation:deep(p) {
+  font-weight: 500;
+  color: var(--color-vue-blue);
+}
+
 /* TODO モバイル版スタイル */
 </style>
diff --git a/apps/web/app/pages/namecard/[id]/index.vue b/apps/web/app/pages/namecard/[id]/index.vue
index 17766a24..c666b0a9 100644
--- a/apps/web/app/pages/namecard/[id]/index.vue
+++ b/apps/web/app/pages/namecard/[id]/index.vue
@@ -1,49 +1,40 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useI18n } from '#i18n'
-import { navigateTo, useRoute } from '#imports'
-import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
-import type { NamecardUser } from '@vuejs-jp/model'
+import { navigateTo } from '#imports'
+import CreationStatus from '~/components/namecard/CreationStatus.vue'
+import CreationProcess from '~/components/namecard/CreationProcess.vue'
+import { useNamecard } from '~/composables/useNamecard'
 
-const route = useRoute()
 const { t } = useI18n()
-
-const statusKey = computed<Status>(() => {
-  // TODO テーブルから取得する
-  return 'not_created'
-})
-const user = computed<NamecardUser>(() => {
-  // TODO テーブルから取得する
-  return {
-    display_name: 'jiyuujin',
-    avatar_url: '',
-    role: 'attendee',
-  }
-})
+const { authUserId, statusKey, attendee } = await useNamecard()
 
 function handleLinkButton() {
-  navigateTo(`/namecard/${route.params.id}/edit/`)
+  navigateTo(`/namecard/${authUserId.value}/edit/`)
 }
 </script>
 <template>
   <NuxtLayout name="namecard-base">
-    <CreationStatus :status-key="statusKey" class="creation-status" />
-    <VFNamecard23 :user="user" class="namecard" />
-    <VFLinkButton
-      is="button"
-      background-color="vue-green/200"
-      color="white"
-      class="edit-button"
-      @click="handleLinkButton"
-      >{{ t('namecard.edit') }}</VFLinkButton
-    >
-    <!-- TODO 作成フロー・注記挿入 -->
+    <div class="namecard-user-root">
+      <CreationStatus :status-key="statusKey" class="creation-status" />
+      <VFNamecard23 :user="attendee" class="namecard" />
+      <VFLinkButton
+        is="button"
+        background-color="vue-green/200"
+        color="white"
+        class="edit-button"
+        @click="handleLinkButton"
+        >{{ t('namecard.edit') }}</VFLinkButton
+      >
+      <CreationProcess />
+    </div>
   </NuxtLayout>
 </template>
 
 <style scoped>
 @import url('~/assets/media.css');
-
+.namecard-user-root {
+  text-align: center;
+}
 .creation-status {
   margin: 0 auto calc(var(--unit) * 2.5);
 }
@@ -56,7 +47,7 @@ function handleLinkButton() {
   align-items: center;
   width: 198px;
   height: 66px;
-  margin: 0 auto calc(var(--unit) * 5);
+  margin: 0 auto calc(var(--unit) * 7.5);
 }
 
 /* TODO モバイル版スタイル */
diff --git a/apps/web/app/pages/namecard/[id]/share.vue b/apps/web/app/pages/namecard/[id]/share.vue
index 11645e02..c9c04c11 100644
--- a/apps/web/app/pages/namecard/[id]/share.vue
+++ b/apps/web/app/pages/namecard/[id]/share.vue
@@ -1,2 +1,89 @@
-<script setup lang="ts"></script>
-<template></template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createError, useHead, useRoute } from '#imports'
+import { useI18n } from '#i18n'
+import { useNamecard } from '~/composables/useNamecard'
+import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+
+const { t } = useI18n()
+const route = useRoute()
+const id = route.params.id as string
+const { attendee } = await useNamecard(id)
+if (!attendee) {
+  throw createError({ statusCode: 404, statusMessage: 'Attendee not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+
+const officialSiteUrl = computed(() => {
+  return currentLocale.value === 'ja' ? linkUrl : `${linkUrl}/en`
+})
+
+// TODO OGタグの設定
+useHead({
+  titleTemplate: (titleChunk) => `${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+    ...twitterOg({
+      title: `${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}namecard/${id}/share`,
+    }),
+  ],
+})
+</script>
+<template>
+  <div class="namecard-share-root">
+    <VFOgCard23 class="namecard" :user="attendee" />
+    <VFComment class="invite-comment" :title="t('invite_vue_fes')" />
+    <VFLinkButton
+      class="link-button"
+      :href="officialSiteUrl"
+      background-color="vue-green/200"
+      color="white"
+      >{{ t('official_site') }}</VFLinkButton
+    >
+    <VFComment class="share-namecard" :title="t('share_namecard')" />
+    <!-- TODO snsアイコン&リンク設置 -->
+    <ul class="sns-list">
+      <li>x</li>
+      <li>facebook</li>
+      <li>copy</li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.namecard-share-root {
+  --header-height: calc(var(--unit) * 10);
+  --content-padding: calc(var(--unit) * 15);
+  padding-top: calc(var(--header-height) + var(--content-padding));
+  padding-bottom: var(--content-padding);
+  max-width: 960px;
+  margin: 0 auto;
+}
+.namecard {
+  max-width: 960px;
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+.invite-comment {
+  margin: 0 auto calc(var(--unit) * 2.5);
+}
+.link-button {
+  --height-button: 66px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: var(--height-button);
+  border-radius: var(--height-button);
+  margin: 0 auto calc(var(--unit) * 7.5);
+}
+</style>
diff --git a/apps/web/app/pages/namecard/index.vue b/apps/web/app/pages/namecard/index.vue
index 7e6e7569..fe46a2ae 100644
--- a/apps/web/app/pages/namecard/index.vue
+++ b/apps/web/app/pages/namecard/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { AuthProvider } from '@vuejs-jp/model'
 import { useAuth } from '~/composables/useAuth'
 import { useAuthSession } from '#imports'
-import { createError, useRuntimeConfig, navigateTo } from '#imports'
+import { createError, useRuntimeConfig, navigateTo, useAsyncData } from '#imports'
 import { useI18n } from '#i18n'
 import MarkDownText from '~/components/MarkDownText.vue'
 import CreationProcess from '~/components/namecard/CreationProcess.vue'
@@ -16,12 +16,16 @@ if (!config.public.enableRegisterNamecard) {
 
 const { t } = useI18n()
 const showDialog = ref(false)
-const { signIn, authUserId } = useAuth()
+const { signIn, getUser } = useAuth()
 const { hasAuth } = useAuthSession()
 
+const { data: authUserId } = await useAsyncData('authUserId', async () => {
+  return (await getUser()).id
+})
+
 function handleClickButton(type: 'open' | 'close') {
   if (type === 'open') {
-    if (hasAuth?.value) return navigateTo(`/namecard/${authUserId}/`)
+    if (hasAuth?.value && authUserId.value) return navigateTo(`/namecard/${authUserId.value}/`)
     showDialog.value = true
   } else {
     showDialog.value = false
@@ -29,11 +33,11 @@ function handleClickButton(type: 'open' | 'close') {
 }
 
 function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
-  signIn(provider, `/namecard/${authUserId}/`)
+  signIn(provider, `/namecard/${authUserId.value}/`)
 }
 </script>
 
-<!-- TODO i18n対応, モバイル対応 -->
+<!-- TODO モバイル対応 -->
 <template>
   <NuxtLayout name="namecard-base">
     <VFIntegrationDialog
@@ -42,14 +46,14 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
       @on-close="handleClickButton('close')"
       @sign-in="handleSignIn"
       ><p>
-        ネームカードを作成するには、あらかじめチケットの購入が必要です。チケット購入後、以下のいずれかのソーシャルアカウントからログインし、必要な情報をご登録ください。
+        {{ t('namecard.dialog_message') }}
       </p></VFIntegrationDialog
     >
     <div class="namecard-root">
       <img
         class="namecard-samples"
         src="/namecard/namecard-samples.png"
-        :alt="t('namecard.namecard-samples-alt')"
+        :alt="t('namecard.namecard_samples_alt')"
       />
       <div class="lead-sentence">
         <MarkDownText path="namecard_lead" />
diff --git a/packages/composable/lib/useColor.ts b/packages/composable/lib/useColor.ts
index 4c5ff873..bdeaa8f7 100644
--- a/packages/composable/lib/useColor.ts
+++ b/packages/composable/lib/useColor.ts
@@ -5,6 +5,7 @@ export function useColor() {
   const color = (text: Color) =>
     match<Color>(text)
       .with('white', () => '#ffffff')
+      .with('black', () => '#000000')
       .with('vue-blue', () => '#35495e')
       .with('vue-green', () => '#42b883')
       .with('vue-green/100', () => '#42B883')
diff --git a/packages/model/lib/color.ts b/packages/model/lib/color.ts
index cc745baf..af13984d 100644
--- a/packages/model/lib/color.ts
+++ b/packages/model/lib/color.ts
@@ -1,5 +1,6 @@
 export type Color =
   | 'white'
+  | 'black'
   | 'vue-blue'
   | 'vue-green'
   | 'vue-green/100'
diff --git a/packages/model/lib/path.ts b/packages/model/lib/path.ts
index c0ee7f6a..6e9bc183 100644
--- a/packages/model/lib/path.ts
+++ b/packages/model/lib/path.ts
@@ -26,3 +26,4 @@ export type Path =
   | 'namecard_process_3'
   | 'namecard_process_4'
   | 'namecard_process_alert'
+  | 'namecard_annotation_order_number'
diff --git a/packages/ui/components/forms/InputField.stories.ts b/packages/ui/components/forms/InputField.stories.ts
index c269f43b..089ae2a4 100644
--- a/packages/ui/components/forms/InputField.stories.ts
+++ b/packages/ui/components/forms/InputField.stories.ts
@@ -42,7 +42,6 @@ export const Error: Story = {
     label: 'お名前',
     placeholder: '山田太郎',
     errorMessage: 'エラーメッセージが表示されます',
-    annotation:'※全角12文字（半角24文字）まで'
   },
 }
 
diff --git a/packages/ui/components/forms/InputField.vue b/packages/ui/components/forms/InputField.vue
index 5f0514b5..e81148cb 100644
--- a/packages/ui/components/forms/InputField.vue
+++ b/packages/ui/components/forms/InputField.vue
@@ -15,7 +15,6 @@ interface Props extends /* @vue-ignore */ _InputFieldProps {
   label: string
   /* Error Message */
   errorMessage?: string
-  annotation?: string
 }
 type Emits = {
   blur: [value: string]
@@ -30,7 +29,6 @@ withDefaults(defineProps<Props>(), {
   disabled: false,
   label: '',
   errorMessage: '',
-  annotation: '',
 })
 
 const emit = defineEmits<Emits>()
@@ -71,7 +69,7 @@ const { fontWeight, fontSize } = useTypography()
       :disabled="disabled"
       @blur="handleBlur"
     />
-    <span v-if="annotation" class="annotation">{{ annotation }}</span>
+    <slot />
     <Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
       errorMessage
     }}</Typography>