diff --git a/assets/scss/_utility.scss b/assets/scss/_utility.scss
index 8c2c573..209bb54 100644
--- a/assets/scss/_utility.scss
+++ b/assets/scss/_utility.scss
@@ -29,6 +29,9 @@ classベースでデザインするためによく使うstyleをクラス化す
 .util-color-border {
   border: colors.$input-border;
 }
+.util-color-border-text {
+  border: colors.$text;
+}
 .util-color-border-primary {
   border: colors.$primary;
 }
@@ -43,4 +46,4 @@ classベースでデザインするためによく使うstyleをクラス化す
 }
 .font-family-main {
   font-family: 'Zen Maru Gothic', sans-serif;
-}
\ No newline at end of file
+}
diff --git a/components/FormStatusCard.vue b/components/FormStatusCard.vue
new file mode 100644
index 0000000..23b27b7
--- /dev/null
+++ b/components/FormStatusCard.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    title: string
+    status: 0 | 1 // 0: 未提出, 1: 提出済み
+    deadline: string // Date.toISOString()を期待している
+  }>(),
+  {
+    title: '企画団体説明文提出フォーム',
+    status: 0,
+    deadline: '2024-05-31T23:59:59.817Z'
+  }
+)
+
+const statusMes = () => {
+  switch (props.status) {
+    case 1:
+      return '提出済'
+    default:
+      return '未提出'
+  }
+}
+/**
+ * 〆切までの日数を計算する
+ */
+const calcDayLeft = (ISOString: string): number => {
+  const date = new Date(ISOString)
+  const now = new Date()
+  const diff = date.getTime() - now.getTime()
+  return Number((diff / (1000 * 60 * 60 * 24)).toFixed(2))
+}
+
+const deadlineMes = (ISOString: string) => {
+  const day = calcDayLeft(ISOString)
+  if (day >= 28) {
+    return '1ヶ月後〆切'
+  } else if (day >= 21) {
+    return '3週間後〆切'
+  } else if (day >= 14) {
+    return '2週間後〆切'
+  } else if (day >= 7) {
+    return '1週間後〆切'
+  } else if (day >= 1 && day <= 6) {
+    return `${Math.floor(day)}日後〆切`
+  } else if (day >= 0 && day < 1) {
+    return '本日〆切'
+  } else {
+    return '〆切超過'
+  }
+}
+
+/**
+ * 〆切までの日数に応じたアイコンを返す
+ *
+ */
+const deadlineIconSrc = (ISOString: string): string => {
+  const day = calcDayLeft(ISOString)
+  if (day >= 28) {
+    return '/clock_icon/clock_loader_10.svg'
+  } else if (day >= 21) {
+    return '/clock_icon/clock_loader_20.svg'
+  } else if (day >= 14) {
+    return '/clock_icon/clock_loader_40.svg'
+  } else if (day >= 7) {
+    return '/clock_icon/clock_loader_60.svg'
+  } else if (day >= 1 && day <= 6) {
+    return '/clock_icon/clock_loader_80.svg'
+  } else if (day >= 0 && day < 1) {
+    return '/clock_icon/clock_loader_90.svg'
+  } else {
+    return '/clock_icon/clock_loader_block.svg'
+  }
+}
+</script>
+<template>
+  <div
+    class="form-status-card w-8rem util-color-border-text border-round-xl border-1 border-solid"
+    :class="status ? 'util-color-bg-primary' : 'util-color-bg-danger'"
+    style="height: 7.5rem"
+  >
+    <div
+      class="ml-2 pl-1 util-color-bg-sub h-full flex flex-column justify-content-between"
+      style="
+        border-top-right-radius: 0.68rem;
+        border-bottom-right-radius: 0.68rem;
+      "
+    >
+      <h2 class="pt-2 font-bold text-sm h-2rem">
+        {{ title }}
+      </h2>
+      <div
+        class="status_message font-bold text-sm"
+        :class="status ? 'util-color-text-primary' : 'util-color-text-danger'"
+      >
+        {{ statusMes() }}
+      </div>
+      <div class="flex align-items-center">
+        <img :src="deadlineIconSrc(deadline)" alt="" width="16" height="16" />
+        <div class="deadline_field text-xs">
+          {{ deadlineMes(deadline) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/components/card/FormStatus.vue b/components/card/FormStatus.vue
deleted file mode 100644
index ee62a9b..0000000
--- a/components/card/FormStatus.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    title: string
-    status: number
-    deadline: string
-  }>(),
-  {
-    title: '未設定',
-    status: 0,
-    deadline: '2023年1月11日11:11まで'
-  }
-)
-const statusImage = () => {
-  switch (props.status) {
-    case 1:
-    case 2:
-      return '/icon_check.webp'
-    case 3:
-      return '/icon_waiting.webp'
-    case 4:
-      return '/icon_caution.webp'
-    case 5:
-    default:
-      return '/icon_warning.webp'
-  }
-}
-const statusMes = () => {
-  switch (props.status) {
-    case 1:
-      return '受理済み'
-    case 2:
-      return '提出済み'
-    case 3:
-      return '未提出'
-    case 4:
-      return '期限間近'
-    case 5:
-    default:
-      return '締切超過'
-  }
-}
-
-const statusColor = () => {
-  switch (props.status) {
-    case 1:
-      return '#b3eccf'
-    case 2:
-      return '#4CAF50'
-    case 3:
-      return '#1edfe5'
-    case 4:
-      return '#f1bc35'
-    case 5:
-    default:
-      return '#e73b14'
-  }
-}
-</script>
-<template>
-  <div class="form-card" :style="{ '--statusColor': statusColor() }">
-    <h2>
-      <span>{{ title }}</span>
-    </h2>
-    <hr />
-    <div class="status_row">
-      <img alt="status_icon" class="status_icon" :src="statusImage()" />
-      <div class="status_message">{{ statusMes() }}</div>
-    </div>
-    <div class="deadline_field">{{ deadline }}</div>
-  </div>
-</template>
-<style scoped lang="scss">
-.form-card::before {
-  background: var(--statusColor);
-  content: '';
-  position: absolute;
-  width: 20px;
-  display: flex;
-  left: 0;
-  height: 100%;
-}
-
-.form-card {
-  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s;
-  font-weight: bold;
-  position: relative;
-  border-radius: 20px;
-  padding-left: 20px;
-  width: 200px;
-  height: 200px;
-  aspect-ratio: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  > hr {
-    margin: 0 10px;
-  }
-
-  h2 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    font-size: 20px;
-    padding: 8px;
-    height: 50%;
-  }
-
-  .status_row {
-    height: 70px;
-    display: flex;
-    flex-direction: row;
-    width: 180px;
-
-    .status_icon {
-      width: 50px;
-      margin: 10px;
-      aspect-ratio: 1;
-    }
-
-    .status_message {
-      margin: auto 0;
-      font-size: 20px;
-      width: 100px;
-      text-align: center;
-    }
-  }
-
-  .deadline_field {
-    margin: auto 0;
-    font-size: 12px;
-    text-align: center;
-  }
-
-  &:hover {
-    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
-    scale: 0.99;
-  }
-}
-</style>
diff --git a/components/card/OrgLink.vue b/components/card/OrgLink.vue
deleted file mode 100644
index 0213dab..0000000
--- a/components/card/OrgLink.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-const props = withDefaults(
-  defineProps<{
-    orgName: string
-    eventName: string
-  }>(),
-  {
-    orgName: 'お散歩サークルてくてく',
-    eventName: '22常盤'
-  }
-)
-</script>
-<template>
-  <!--企画団体ページに飛ぶためのカードコンポーネントorgPageLinkCard -->
-  <div v-bind="props" class="">
-    <!--企画団体名を指すorgName-->
-    <p class="">
-      {{ orgName }}
-    </p>
-    <div class="">
-      <img src="/white-ynufes-cube.svg" class="" alt="Icon of YNU FES." />
-      <!--22常盤などのイベント名を指すeventName-->
-      <p class="">
-        {{ eventName }}
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/components/sidebar/index.vue b/components/sidebar/index.vue
deleted file mode 100644
index 92a25a7..0000000
--- a/components/sidebar/index.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <div id="sidebar-frame">
-    <nuxt-link id="mypage-logo">
-      <img src="/mypage-logo.webp" alt="logo" />
-    </nuxt-link>
-    <nuxt-link id="small-sidebar-logo">
-      <img src="/white-ynufes-cube.svg" alt="logo" />
-    </nuxt-link>
-    <button id="sidebar-profile">
-      <img src="/test-avatar.jpg" class="user-avatar" />
-      <span class="username"><span>横国あ</span> <span>太郎ああ</span></span>
-    </button>
-    <hr />
-    <nav id="nav-frame" class="nav-button-group">
-      <nuxt-link to="/" class="nav-item">
-        <v-icon size="x-large">mdi-home</v-icon>
-        <div>Home</div>
-      </nuxt-link>
-      <nuxt-link to="/todo" class="nav-item">
-        <v-icon>mdi-bell</v-icon>
-        <div>ToDo</div>
-      </nuxt-link>
-      <nuxt-link to="/settings" class="nav-item">
-        <v-icon>mdi-cog</v-icon>
-        <div>Settings</div>
-      </nuxt-link>
-    </nav>
-    <div id="nav-bottom" class="nav-button-group">
-      <nuxt-link to="/settings" class="nav-item">
-        <v-icon>mdi-help</v-icon>
-        <div>Guides</div>
-      </nuxt-link>
-      <nuxt-link to="/settings" class="nav-item">
-        <v-icon>mdi-logout</v-icon>
-        <div>Logout</div>
-      </nuxt-link>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-#sidebar-frame {
-  position: fixed;
-  width: 180px;
-  height: 100svh;
-  background: #1d2630;
-  border-top-right-radius: 60px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  color: white;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.4);
-  font-family: 'Zen Maru Gothic', 'Noto Color Emoji', sans-serif;
-  transition-property: width, border-radius;
-  transition-duration: 1s;
-
-  hr {
-    border: 1px solid white;
-    border-radius: 1px;
-    width: 68%;
-    margin: 12px auto;
-    opacity: 0.3;
-  }
-}
-
-#mypage-logo {
-  width: 70%;
-  object-fit: contain;
-  margin: 50px 20px 20px 20px;
-
-  img {
-    object-fit: contain;
-    width: 100%;
-  }
-}
-
-#small-sidebar-logo {
-  display: none;
-}
-
-#sidebar-profile {
-  width: 170px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  transition: all 0.2s ease-in-out;
-  border-radius: 50px;
-
-  .user-avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 100%;
-  }
-
-  .username {
-    font-size: 1rem;
-    margin-top: 20px;
-    font-weight: bold;
-  }
-
-  &:hover {
-    background: #2c3a4a;
-    scale: 1.05;
-  }
-}
-
-#nav-frame {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#nav-bottom {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-bottom: 20px;
-}
-
-.nav-button-group {
-  > a {
-    transition: all 0.2s ease-in-out;
-    display: flex;
-    align-items: center;
-    margin: 3px 0;
-    width: 170px;
-    color: white;
-    text-decoration: none;
-    padding: 8px 15px;
-    border-radius: 50px;
-
-    > i {
-      margin-right: 10px;
-      width: 30px;
-    }
-
-    > div {
-      width: calc(100% - 30px);
-      text-align: center;
-      font-size: 1rem;
-      font-weight: bold;
-    }
-  }
-
-  > a:hover {
-    background: #2c3a47;
-    scale: 1.05;
-  }
-}
-/* レスポンシブデザイン ------------------------*/
-@media ((max-aspect-ratio: 3/4) and (max-width: 1024px)) or (max-height: 576px) {
-  /* (画面比が縦長かつ画面幅が768px以下)または画面の高さが576pxのとき */
-  #sidebar-frame {
-    display: none;
-  }
-}
-@media (min-aspect-ratio: 3/4) and (max-width: 1024px) {
-  #sidebar-frame {
-    width: 80px;
-    border-top-right-radius: 0;
-
-    .username,
-    #mypage-logo {
-      display: none;
-    }
-  }
-
-  #small-sidebar-logo {
-    display: block;
-    width: 64px;
-    height: 64px;
-    padding: 16px;
-    margin: 8px auto;
-    border-radius: 8px;
-    transition: background 0.2s;
-
-    &:hover {
-      background: #2c3a47;
-    }
-  }
-
-  #sidebar-profile {
-    width: 64px;
-    height: 64px;
-    .user-avatar {
-      width: 48px;
-      height: 48px;
-      border-radius: 100%;
-      padding: 0;
-      margin: 0;
-    }
-  }
-
-  .nav-button-group {
-    width: 64px;
-
-    > a {
-      flex-direction: column;
-      width: 64px;
-      height: 64px;
-      padding: 8px 0;
-
-      > i {
-        width: 100%;
-        margin: 0 auto;
-      }
-
-      > div {
-        width: 100%;
-        text-align: center;
-        font-size: small;
-        text-align: center;
-      }
-    }
-
-    > a:hover {
-      background: #2c3a47;
-      scale: 1.05;
-    }
-  }
-}
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index e3b50bb..72fe920 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -25,6 +25,30 @@ const switchOrg = async (orgId: string) => {
 </script>
 <template>
   <main>
+    <div class="p-2 overflow-x-scroll w-full white-space-nowrap">
+      <FormStatusCard
+        class="mr-2 inline-block white-space-normal"
+        :status="0"
+        :deadline="new Date('2024-05-15T23:59:59').toISOString()"
+      />
+      <FormStatusCard
+        title="物品貸借申請フォーム"
+        class="mr-2 inline-block white-space-normal"
+        :status="1"
+        :deadline="new Date(2024, 5, 8, 12, 12).toISOString() /**6/1 */"
+      />
+      <FormStatusCard
+        title="目安箱フォーム"
+        class="mr-2 inline-block white-space-normal"
+        :status="1"
+        :deadline="new Date(2024, 4, 1, 12, 12).toISOString() /**6/1 */"
+      />
+      <FormStatusCard
+        class="mr-2 inline-block white-space-normal"
+        :status="0"
+        :deadline="new Date(2024, 4, 15, 12, 12).toISOString() /** 7/30 */"
+      />
+    </div>
     <div v-if="accessibleOrgs.length === 0">
       <p class="mx-auto w-fit mt-4 xl:ml-8">
         アクセスできる企画団体が存在しません
diff --git a/public/clock_icon/clock_loader_10.svg b/public/clock_icon/clock_loader_10.svg
new file mode 100644
index 0000000..1663fe3
--- /dev/null
+++ b/public/clock_icon/clock_loader_10.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-64-24-123t-69-104L480-480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_20.svg b/public/clock_icon/clock_loader_20.svg
new file mode 100644
index 0000000..d61a359
--- /dev/null
+++ b/public/clock_icon/clock_loader_20.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227H480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_40.svg b/public/clock_icon/clock_loader_40.svg
new file mode 100644
index 0000000..1f4b9d3
--- /dev/null
+++ b/public/clock_icon/clock_loader_40.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q64 0 123-24t104-69L480-480v-320q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_60.svg b/public/clock_icon/clock_loader_60.svg
new file mode 100644
index 0000000..3f6cb7b
--- /dev/null
+++ b/public/clock_icon/clock_loader_60.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80ZM253-253l227-227v-320q-134 0-227 93t-93 227q0 64 24 123t69 104Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_80.svg b/public/clock_icon/clock_loader_80.svg
new file mode 100644
index 0000000..82e04be
--- /dev/null
+++ b/public/clock_icon/clock_loader_80.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80ZM160-480h320v-320q-134 0-227 93t-93 227Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_90.svg b/public/clock_icon/clock_loader_90.svg
new file mode 100644
index 0000000..baf2a87
--- /dev/null
+++ b/public/clock_icon/clock_loader_90.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80ZM253-707l227 227v-320q-64 0-123 24t-104 69Z"/></svg>
\ No newline at end of file
diff --git a/public/clock_icon/clock_loader_block.svg b/public/clock_icon/clock_loader_block.svg
new file mode 100644
index 0000000..ed1ecad
--- /dev/null
+++ b/public/clock_icon/clock_loader_block.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808778"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>
\ No newline at end of file
diff --git a/public/icon_caution.webp b/public/icon_caution.webp
deleted file mode 100644
index 96a4de8..0000000
Binary files a/public/icon_caution.webp and /dev/null differ
diff --git a/public/icon_check.webp b/public/icon_check.webp
deleted file mode 100644
index 6e3144b..0000000
Binary files a/public/icon_check.webp and /dev/null differ
diff --git a/public/icon_waiting.webp b/public/icon_waiting.webp
deleted file mode 100644
index ea8a2d9..0000000
Binary files a/public/icon_waiting.webp and /dev/null differ
diff --git a/public/icon_warning.webp b/public/icon_warning.webp
deleted file mode 100644
index 0d37422..0000000
Binary files a/public/icon_warning.webp and /dev/null differ