diff --git a/components/ProjectCardCompact.vue b/components/ProjectCardCompact.vue
index eeb5550..7a1286d 100644
--- a/components/ProjectCardCompact.vue
+++ b/components/ProjectCardCompact.vue
@@ -3,14 +3,17 @@ import { Genre, genreToString, getTagColor } from "~/model/genre";
 import { Area, placeToString } from "~/model/area";
 
 const props = defineProps<{
-  eventData: {
-    id: number;
-    e_name: string;
-    e_genre: Genre;
-    o_name: string;
-    area: Area;
-    p_name: string;
-  };
+  eventData:
+    | {
+        id: number;
+        e_name: string;
+        e_genre: Genre;
+        o_name: string;
+        area: Area;
+        p_name: string;
+      }
+    | null
+    | undefined;
 }>();
 const showNoImage = function (e: any) {
   e.target.src =
@@ -27,7 +30,7 @@ const eventTagStyle = (genre: Genre) => {
 </script>
 
 <template>
-  <div class="project-card">
+  <div class="project-card" v-if="props.eventData">
     <div class="incline-card">
       <img
         :src="iconURL"
@@ -39,7 +42,7 @@ const eventTagStyle = (genre: Genre) => {
         <p class="event-name">{{ props.eventData.e_name }}</p>
         <hr class="line" />
         <p class="org-name">{{ props.eventData.o_name }}</p>
-        <p class="genre" :style="eventTagStyle(props.eventData.e_genre)">
+        <p :style="eventTagStyle(props.eventData.e_genre)" class="genre">
           {{ genreToString(props.eventData.e_genre) }}
         </p>
         <p class="place">
diff --git a/pages/sp/contest.vue b/pages/sp/contest.vue
index 8169963..8666781 100644
--- a/pages/sp/contest.vue
+++ b/pages/sp/contest.vue
@@ -1,20 +1,29 @@
 <script lang="ts" setup>
+import ProjectCardCompact from "~/components/ProjectCardCompact.vue";
+import events from "~/assets/data/events.json";
+import type { EventSummary } from "~/model/event";
+
+// idに対応するcardを表示
+
 interface RankingData {
   FOOD: number[];
   EXHIBITION: number[];
   PERFORMANCE: number[];
+  DRINK: number[];
+  VISUAL: number[];
+  UPDATED: string;
 }
 
-// const rankingData = await useFetch("/api/contest").then((res) => {
-//   if (
-//     res.data.value.FOOD &&
-//     res.data.value.EXHIBITION &&
-//     res.data.value.PERFORMANCE
-//   ) {
-//     return res.data.value as RankingData;
-//   }
-//   return null;
-// });
+const rankingData = await useFetch("/api/contest").then((res) => {
+  if (
+    res.data.value.FOOD &&
+    res.data.value.EXHIBITION &&
+    res.data.value.PERFORMANCE
+  ) {
+    return res.data.value as RankingData;
+  }
+  return null;
+});
 
 useHead({
   title: "企画コンテスト | 23常盤祭公式HP~未来航路~",
@@ -70,28 +79,63 @@ gtag("event", "screen_view", {
         </ul>
         全企画が対象で見た目を観点に投票します。Xを用いて投票をお願いします。写真をたくさん撮ろう！
       </div>
-      <SectionTitle text="結果発表" />
-      <div class="result-description">中間発表はこれから!!お楽しみに!!</div>
-      <!--      <table class="result-table">-->
-      <!--        <tr>-->
-      <!--          <td>順位</td>-->
-      <!--          <td>飲食部門</td>-->
-      <!--          <td></td>-->
-      <!--          <td>縦方向のセルの並び</td>-->
-      <!--        </tr>-->
-      <!--        <tr>-->
-      <!--          <td>第1位</td>-->
-      <!--          <td>意味</td>-->
-      <!--        </tr>-->
-      <!--        <tr>-->
-      <!--          <td>第2位</td>-->
-      <!--          <td>表の中の１つ１つの項目</td>-->
-      <!--        </tr>-->
-      <!--        <tr>-->
-      <!--          <td>第3位</td>-->
-      <!--          <td>横方向のセルの並び</td>-->
-      <!--        </tr>-->
-      <!--      </table>-->
+      <SponsorsListTitle text="中間結果発表" />
+      <div v-if="rankingData" class="result-table-section">
+        <h2>{{ rankingData.UPDATED }} 更新</h2>
+        <div class="result-table-holder">
+          <table class="result-table">
+            <tr>
+              <td>順位</td>
+              <td>第1位</td>
+              <td>第2位</td>
+              <td>第3位</td>
+            </tr>
+            <tr>
+              <td>飲食</td>
+              <td v-for="(e, index) in rankingData.FOOD" :key="index">
+                <ProjectCardCompact
+                  :event-data="events.find((s: EventSummary) => s.id === e)"
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>展示・物販</td>
+              <td v-for="(e, index) in rankingData.EXHIBITION" :key="index">
+                <ProjectCardCompact
+                  :event-data="events.find((s: EventSummary) => s.id === e)"
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>パフォーマンス</td>
+              <td v-for="(e, index) in rankingData.PERFORMANCE" :key="index">
+                <ProjectCardCompact
+                  :event-data="events.find((s: EventSummary) => s.id === e)"
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>オリジナルドリンク</td>
+              <td v-for="(e, index) in rankingData.DRINK" :key="index">
+                <ProjectCardCompact
+                  :event-data="events.find((s: EventSummary) => s.id === e)"
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>ビジュアル</td>
+              <td v-for="(e, index) in rankingData.VISUAL" :key="index">
+                <ProjectCardCompact
+                  :event-data="events.find((s: EventSummary) => s.id === e)"
+                />
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div v-else class="result-description">
+        中間発表はこれから!!お楽しみに!!
+      </div>
     </div>
     <BackToHome />
   </div>
@@ -157,21 +201,44 @@ gtag("event", "screen_view", {
   }
 }
 
-.section-title {
-  align-self: center;
-  width: 500px !important;
-  font-size: 2em !important;
-  @include md {
-    align-self: flex-start;
+.result-description {
+  font-size: 1.3em;
+  text-align: center;
+}
+
+.result-table-section {
+  text-align: center;
+
+  > h2 {
+    font-size: 1.5em;
+    margin: 1em 0;
   }
 }
 
-.result-description {
-  font-size: 1.3em;
+.result-table-holder {
   text-align: center;
+  overflow-x: scroll;
 }
 
-.result-table {
+tr {
+  td {
+    padding: 0.5em 1.5em 1.5em 0.5em;
+    border: 2px solid var(--thick-font-color);
+
+    &:first-child {
+      padding: 0;
+      vertical-align: middle;
+      min-width: 10em;
+    }
+  }
+
+  &:first-child {
+    td {
+      padding: 0;
+      vertical-align: middle;
+      line-height: 2em;
+    }
+  }
 }
 
 .back-button {
diff --git a/server/contest.js b/server/contest.js
index 0b5e03d..b3bce6f 100644
--- a/server/contest.js
+++ b/server/contest.js
@@ -15,6 +15,14 @@ function doGet(e) {
   C[0] = sheet[4][1];
   C[1] = sheet[4][2];
   C[2] = sheet[4][3];
+  const D = [];
+  D[0] = sheet[5][1];
+  D[1] = sheet[5][2];
+  D[2] = sheet[5][3];
+  const E = [];
+  E[0] = sheet[6][1];
+  E[1] = sheet[6][2];
+  E[2] = sheet[6][3];
   // check validity
   if (
     !A[0] ||
@@ -25,7 +33,13 @@ function doGet(e) {
     !B[2] ||
     !C[0] ||
     !C[1] ||
-    !C[2]
+    !C[2] ||
+    !D[0] ||
+    !D[1] ||
+    !D[2] ||
+    !E[0] ||
+    !E[1] ||
+    !E[2]
   ) {
     return respond({});
   }
@@ -35,11 +49,16 @@ function doGet(e) {
     A[i] = resolveEventNum(A[i]);
     B[i] = resolveEventNum(B[i]);
     C[i] = resolveEventNum(C[i]);
+    D[i] = resolveEventNum(D[i]);
+    E[i] = resolveEventNum(E[i]);
   }
   return respond({
     FOOD: A,
     EXHIBITION: B,
     PERFORMANCE: C,
+    DRINK: D,
+    VISUAL: E,
+    UPDATED: sheet[7][1],
   });
 }