diff --git a/apps/web/app/components/TeamPageSection.vue b/apps/web/app/components/TeamPageSection.vue
index 58988bf6..20cc4771 100644
--- a/apps/web/app/components/TeamPageSection.vue
+++ b/apps/web/app/components/TeamPageSection.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { team as teamData, volunteers } from '~/utils/constants'
-// import type { StaffInfo } from '@vuejs-jp/model'
-// import { useFetch, useRuntimeConfig } from '#imports'
+import type { StaffCategory, StaffInfo } from '@vuejs-jp/model'
+import { useRuntimeConfig } from '#imports'
 
-// type Staffs = Record<'allStaffs', StaffInfo>
+type Staffs = Record<StaffCategory, StaffInfo>
 
-// const config = useRuntimeConfig()
+const props = defineProps<{
+  data: Staffs
+}>()
 
-// const { data, error } = await useFetch('/api/staffs')
-// if (error.value) {
-//   console.error(error.value)
-// }
-// const { allStaffs } = data.value as Staffs
-// const team = config.public.staffDatasource === 'supabase' ? allStaffs.list : teamData
-const team = teamData
+const config = useRuntimeConfig()
+
+const coreTeam = config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
+const volunteerTeam = config.public.staffDatasource === 'supabase'
+  ? props.data.volunteerStaffs.list.map((staff) => staff.name)
+  : volunteers
+// const team = teamData
 </script>
 
 <template>
@@ -28,7 +30,7 @@ const team = teamData
       </div>
 
       <div class="team-members-container">
-        <div v-for="member in team" :key="member.name" class="team-member-wrapper">
+        <div v-for="member in coreTeam" :key="member.name" class="team-member-wrapper">
           <template v-if="member.x_id !== ''">
             <a :href="`https://x.com/${member.x_id}`" target="_blank" :aria-label="member.name">
               <VFAvatar :src="member.image_url" :alt="member.name" />
@@ -39,7 +41,8 @@ const team = teamData
                 target="_blank"
                 :href="`https://x.com/${member.x_id}`"
                 color="vue-blue"
-                >{{ member.name }}
+              >
+                {{ member.x_id ?? member.github_id }}
               </VFTextLink>
             </div>
           </template>
@@ -59,7 +62,7 @@ const team = teamData
       </VFTitle>
 
       <div class="volunteer-members-container">
-        <VFCreditList :list="volunteers" />
+        <VFCreditList :list="volunteerTeam" />
       </div>
     </article>
   </section>
diff --git a/apps/web/app/pages/index.vue b/apps/web/app/pages/index.vue
index b02ce7e5..f6debc7d 100644
--- a/apps/web/app/pages/index.vue
+++ b/apps/web/app/pages/index.vue
@@ -21,11 +21,16 @@ const { data: sponsors, error: error2, refresh: refreshSponsor } = await useFetc
 if (error2.value) {
   console.error(error2.value)
 }
+const { data: staffs, error: error3, refresh: refreshStaff } = await useFetch('/api/staffs')
+if (error3.value) {
+  console.error(error3.value)
+}
 
 onMounted(function () {
   window.addEventListener('popstate', async function (event) {
     await refreshSpeaker()
     await refreshSponsor()
+    await refreshStaff()
     await reloadNuxtApp()
   })
 })
@@ -52,5 +57,5 @@ useHead({
   <SponsorPageSection :data="sponsors" />
   <CooperationPartnerSection />
   <FormPageSection />
-  <TeamPageSection />
+  <TeamPageSection :data="staffs" />
 </template>
diff --git a/apps/web/app/server/api/jobs.get.ts b/apps/web/app/server/api/jobs.get.ts
index 9293aa27..1b3ea365 100644
--- a/apps/web/app/server/api/jobs.get.ts
+++ b/apps/web/app/server/api/jobs.get.ts
@@ -14,14 +14,25 @@ export default defineEventHandler(async (event) => {
     type: 'job',
     title: 'job',
     list: jobs
-      .filter((j: Job) => {
-        if (process.env.NODE_ENV === 'production') return j.is_open === true
-        return j
+      .filter(job => {
+        if (process.env.NODE_ENV === 'production') return job.is_open === true
+        return job
       })
       .sort((a: Job, b: Job) => {
         if (b.display_order && a.display_order) return a.display_order - b.display_order
-        return a.created_at < b.created_at ? -1 : 1
-      }),
+        return 1
+      })
+      .concat(
+        jobs
+          .filter((job: Job) => {
+            if (process.env.NODE_ENV === 'production') return job.is_open === true
+            return job
+          })
+          .filter(s => s.display_order === null)
+          .sort((a: Job, b: Job) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+      ),
   }
 
   return { allJobs }
diff --git a/apps/web/app/server/api/speakers.get.ts b/apps/web/app/server/api/speakers.get.ts
index 2b727588..5046334c 100644
--- a/apps/web/app/server/api/speakers.get.ts
+++ b/apps/web/app/server/api/speakers.get.ts
@@ -27,42 +27,66 @@ export default defineEventHandler(async (event) => {
     type: 'session',
     title: 'Session',
     list: speakers
-      .filter((speaker: Speaker) => {
-        if (process.env.NODE_ENV === 'production') return speaker.session_type === 'session' && speaker.is_open === true
-        return speaker.session_type === 'session'
-      })
+      .filter(speaker => speaker.session_type === 'session' && speaker.display_order !== null)
       .sort((a: Speaker, b: Speaker) => {
         if (b.display_order && a.display_order) return a.display_order - b.display_order
-        return a.created_at < b.created_at ? -1 : 1
-      }),
+        return 1
+      })
+      .concat(
+        speakers
+          .filter((speaker: Speaker) => {
+            if (process.env.NODE_ENV === 'production') return speaker.session_type === 'session' && speaker.is_open === true
+            return speaker.session_type === 'session'
+          })
+          .filter(s => s.display_order === null)
+          .sort((a: Speaker, b: Speaker) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+      ),
   }
 
   const lightningTalkSpeakers: SpeakerInfo = {
     type: 'lightning-talk',
     title: 'Lightning talk',
     list: speakers
-      .filter((speaker: Speaker) => {
-        if (process.env.NODE_ENV === 'production') return speaker.session_type === 'lightning-talk' && speaker.is_open === true
-        return speaker.session_type === 'lightning-talk'
-      })
+      .filter(speaker => speaker.session_type === 'lightning-talk' && speaker.display_order !== null)
       .sort((a: Speaker, b: Speaker) => {
         if (b.display_order && a.display_order) return a.display_order - b.display_order
-        return a.created_at < b.created_at ? -1 : 1
-      }),
+        return 1
+      })
+      .concat(
+        speakers
+          .filter((speaker: Speaker) => {
+            if (process.env.NODE_ENV === 'production') return speaker.session_type === 'lightning-talk' && speaker.is_open === true
+            return speaker.session_type === 'lightning-talk'
+          })
+          .filter(s => s.display_order === null)
+          .sort((a: Speaker, b: Speaker) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+      ),
   }
 
   const sponsorSessionSpeakers: SpeakerInfo = {
     type: 'sponsor-session',
     title: 'Sponsor session',
     list: speakers
-      .filter((speaker: Speaker) => {
-        if (process.env.NODE_ENV === 'production') return speaker.session_type === 'sponsor-session' && speaker.is_open === true
-        return speaker.session_type === 'sponsor-session'
-      })
+      .filter(speaker => speaker.session_type === 'sponsor-session' && speaker.display_order !== null)
       .sort((a: Speaker, b: Speaker) => {
         if (b.display_order && a.display_order) return a.display_order - b.display_order
-        return a.created_at < b.created_at ? -1 : 1
-      }),
+        return 1
+      })
+      .concat(
+        speakers
+          .filter((speaker: Speaker) => {
+            if (process.env.NODE_ENV === 'production') return speaker.session_type === 'sponsor-session' && speaker.is_open === true
+            return speaker.session_type === 'sponsor-session'
+          })
+          .filter(s => s.display_order === null)
+          .sort((a: Speaker, b: Speaker) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+      ),
   }
 
   const panelEventPanelers: PanelerInfo = {
diff --git a/apps/web/app/server/api/sponsors.get.ts b/apps/web/app/server/api/sponsors.get.ts
index ecf19350..4f44f523 100644
--- a/apps/web/app/server/api/sponsors.get.ts
+++ b/apps/web/app/server/api/sponsors.get.ts
@@ -29,7 +29,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('platinum')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -43,7 +42,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('gold')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -57,7 +55,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('silver')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -71,7 +68,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('bronze')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -85,7 +81,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('special-naming-rights')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -99,7 +94,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('naming-rights')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -113,7 +107,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('special-lunch')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -127,7 +120,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('lunch')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -141,7 +133,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('after-party')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -155,7 +146,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('name-card')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -169,7 +159,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('simultaneous-interpretation')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -183,7 +172,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('childcare')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -197,7 +185,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('handson')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -211,7 +198,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('media')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
@@ -225,7 +211,6 @@ export default defineEventHandler(async (event) => {
         return s['tag'].includes('tool')
       })
       .sort((a: Sponsor, b: Sponsor) => {
-        if (b.display_order && a.display_order) return a.display_order - b.display_order
         return a.created_at < b.created_at ? -1 : 1
       }),
   }
diff --git a/apps/web/app/server/api/staffs.get.ts b/apps/web/app/server/api/staffs.get.ts
index 3328976d..1620fb6e 100644
--- a/apps/web/app/server/api/staffs.get.ts
+++ b/apps/web/app/server/api/staffs.get.ts
@@ -18,13 +18,22 @@ export default defineEventHandler(async (event) => {
         if (process.env.NODE_ENV === 'production') return staff.is_open === true && staff.is_volunteer === false
         return staff.is_volunteer === false
       })
+      .filter(staff => staff.display_order !== null)
       .sort((a: Staff, b: Staff) => {
-        if (a.display_order) return -1
-        if (b.display_order) return 1
-        if (!a.display_order) return a.name < b.name ? -1 : 1
-        if (!b.display_order) return a.name < b.name ? -1 : 1
-        return a.display_order - b.display_order
-      }),
+        if (b.display_order && a.display_order) return a.display_order - b.display_order
+        return 1
+      })
+      .concat(
+        staffs
+          .filter((staff: Staff) => {
+            if (process.env.NODE_ENV === 'production') return staff.is_open === true && staff.is_volunteer === false
+            return staff.is_volunteer === false
+          })
+          .filter(staff => staff.display_order === null)
+          .sort((a: Staff, b: Staff) => {
+            return a.created_at < b.created_at ? -1 : 1
+          }),
+        ),
   }
 
   const volunteerStaffs: StaffInfo = {
@@ -36,11 +45,7 @@ export default defineEventHandler(async (event) => {
         return staff.is_volunteer === true
       })
       .sort((a: Staff, b: Staff) => {
-        if (a.display_order) return -1
-        if (b.display_order) return 1
-        if (!a.display_order) return a.name < b.name ? -1 : 1
-        if (!b.display_order) return a.name < b.name ? -1 : 1
-        return a.display_order - b.display_order
+        return a.created_at < b.created_at ? -1 : 1
       }),
   }
 
diff --git a/apps/web/app/utils/constants.ts b/apps/web/app/utils/constants.ts
index 16df6cf4..269b9871 100644
--- a/apps/web/app/utils/constants.ts
+++ b/apps/web/app/utils/constants.ts
@@ -1,3 +1,5 @@
+import type { TeamData } from '@vuejs-jp/model'
+
 export const conferenceTitle = 'Vue Fes Japan 2024'
 
 export const ogDescription =
@@ -82,7 +84,7 @@ export const personalSponsors = [
   'Haruki Tetone',
 ]
 
-export const team = [
+export const team: TeamData[] = [
   {
     name: 'kazu_pon',
     image_url: 'team/kazu_pon.jpg',
diff --git a/packages/model/lib/staff.ts b/packages/model/lib/staff.ts
index 93e7e3ce..feccd0dd 100644
--- a/packages/model/lib/staff.ts
+++ b/packages/model/lib/staff.ts
@@ -2,13 +2,9 @@ export type StaffCategory =
   | 'coreStaffs'
   | 'volunteerStaffs'
 
-export type Staff = {
+export type Staff = TeamData & {
   id?: string
-  name: string
   detail_page_id: string
-  image_url: string
-  x_id?: string
-  github_id?: string
   is_open: boolean
   display_order?: number
   is_volunteer: boolean
@@ -16,6 +12,13 @@ export type Staff = {
   updated_at: string
 }
 
+export type TeamData = {
+  name: string
+  image_url: string
+  x_id?: string
+  github_id?: string
+}
+
 export type StaffInfo = {
   type: 'core-staff' | 'volunteer-staff'
   title: string