diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index 9215f541bc..e796ba6a3c 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -34,6 +34,26 @@ import MaterialIcon from "@components/embed/MaterialIcon.astro";
 
 <div class="systems-link">[東京大学の情報システムの一覧はこちらから](/systems/){:.arrow-link}</div>
 
+## 東京大学の情報システム
+
+<div class="top__systems">
+  - [<MaterialIcon icon="person" />UTokyo Account](/utokyo_account/)
+  - [![](_icons/utas.png)UTAS](/utas/)
+  - [![](_icons/utol.png)UTOL (UTokyo LMS)](/utol/)
+  - [<MaterialIcon icon="wifi" />UTokyo Wi-Fi](/utokyo_wifi/)
+  - [![](_icons/zoom.png)Zoom](/zoom/)
+  - [![](_icons/webex.png)Webex](/webex/)
+  - [![](_icons/google.png)ECCSクラウドメール<small>(Google Workspace)</small>](/google/)
+  - [![](_icons/microsoft.png)UTokyo Microsoft License](/microsoft/)
+  - [![](_icons/slack.png)UTokyo Slack](/slack/)
+  - [![](_icons/slido.png)Slido](/slido/)
+  - [<MaterialIcon icon="bar_chart" />UTokyo MATLAB Campus-Wide License](/matlab/)
+  - [<MaterialIcon icon="vpn_lock" />UTokyo VPN](/utokyo_vpn/)
+  - [<MaterialIcon icon="computer" />ECCS端末](/eccs/)
+  - [一覧](/systems/){:.arrow-link}
+  {:.cards}
+</div>
+
 <div class="container">
 <div class="container__column">
 
@@ -119,23 +139,3 @@ import MaterialIcon from "@components/embed/MaterialIcon.astro";
 
 </div>
 </div>
-
-## 東京大学の情報システム
-
-<div class="top__systems">
-  - [<MaterialIcon icon="person" />UTokyo Account](/utokyo_account/)
-  - [![](_icons/utas.png)UTAS](/utas/)
-  - [![](_icons/utol.png)UTOL (UTokyo LMS)](/utol/)
-  - [<MaterialIcon icon="wifi" />UTokyo Wi-Fi](/utokyo_wifi/)
-  - [![](_icons/zoom.png)Zoom](/zoom/)
-  - [![](_icons/webex.png)Webex](/webex/)
-  - [![](_icons/google.png)ECCSクラウドメール<small>(Google Workspace)</small>](/google/)
-  - [![](_icons/microsoft.png)UTokyo Microsoft License](/microsoft/)
-  - [![](_icons/slack.png)UTokyo Slack](/slack/)
-  - [![](_icons/slido.png)Slido](/slido/)
-  - [<MaterialIcon icon="bar_chart" />UTokyo MATLAB Campus-Wide License](/matlab/)
-  - [<MaterialIcon icon="vpn_lock" />UTokyo VPN](/utokyo_vpn/)
-  - [<MaterialIcon icon="computer" />ECCS端末](/eccs/)
-  - [一覧](/systems/){:.arrow-link}
-  {:.cards}
-</div>
diff --git a/src/styles/top.scss b/src/styles/top.scss
index 6babb7f419..eb1935bd9a 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -91,58 +91,67 @@
 }
 
 .top__systems > .cards {
-  grid-template-columns: repeat(4, 1fr);
-  @media (max-width: 1024px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @media (max-width: 896px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  @media (max-width: 640px) {
-    grid-template-columns: 1fr;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0.5em;
+
+  overflow-x: auto;
+  scroll-snap-type: mandatory x;
+  &::-webkit-scrollbar {
+    display: none;
   }
 
-  & > li > a {
+  & > li {
     display: flex;
-    flex-direction: column;
-    justify-content: end;
-    color: color.$black-gray;
-    text-align: center;
-
-    // ロゴ画像・Material Icons
-    & > img,
-    & > span.material-icon {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      justify-content: center;
+    flex: 0 0 calc(100% / 4.5);
+    @media (max-width: 896px) {
+      flex: 0 0 calc(100% / 3.5);
     }
-    & > img {
-      max-height: 2.25rem;
-      margin: auto;
-      padding: 0.25rem;
-      @media (max-width: 896px) {
-        max-height: 1.5rem;
-      }
+    @media (max-width: 640px) {
+      flex: 0 0 calc(100% / 2.5);
     }
-    & > span.material-icon > svg {
-      fill: color.$link-color;
-      height: 3rem;
-      @media (max-width: 896px) {
-        height: 1.5rem;
+
+    & > a {
+      display: flex;
+      flex-direction: column;
+      justify-content: end;
+      color: color.$black-gray;
+      text-align: center;
+
+      @media (max-width: 640px) {
+        font-size: 0.75rem;
+      }
+
+      // ロゴ画像・Material Icons
+      & > img,
+      & > span.material-icon {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+      }
+      & > img {
+        max-height: 2.25rem;
+        margin: auto;
+        padding: 0.25rem;
+      }
+      & > span.material-icon > svg {
+        fill: color.$link-color;
+        height: 3rem;
       }
-    }
 
-    > .external-link:last-child {
-      display: none;
+      > .external-link:last-child {
+        display: none;
+      }
     }
   }
 
   & > li:last-child {
+    flex: none;
     display: block;
     grid-column: -2 / -1;
-    justify-self: end;
-    align-self: end;
+    align-self: center;
 
     & > a {
       display: inline;