diff --git a/apps/frontend/src/page/builds/BuildsIndexPage.vue b/apps/frontend/src/page/builds/BuildsIndexPage.vue
index 27b8304..2eeab3b 100644
--- a/apps/frontend/src/page/builds/BuildsIndexPage.vue
+++ b/apps/frontend/src/page/builds/BuildsIndexPage.vue
@@ -11,38 +11,58 @@
 
     <div v-else-if="!data" class="builds-loading">{{ t('common.loading') }}</div>
 
-    <div v-else class="builds-table-wrap">
-      <table class="builds-table">
-        <thead>
-          <!-- Group row -->
-          <tr>
-            <th rowspan="2" class="builds-th-engine">Engine</th>
-            <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
-              <i :class="group.icon" class="builds-group-icon"></i>
-              <span class="builds-group-label">{{ group.label }}</span>
-            </th>
-          </tr>
-          <!-- Sub-column row -->
-          <tr>
-            <template v-for="group in columnGroups" :key="group.label">
-              <th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
-                {{ col.sub }}
+    <!-- Desktop table -->
+    <div v-else class="builds-desktop">
+      <div class="builds-table-wrap">
+        <table class="builds-table">
+          <thead>
+            <tr>
+              <th rowspan="2" class="builds-th-engine">Engine</th>
+              <th v-for="group in columnGroups" :key="group.label" :colspan="group.kinds.length" class="builds-th-group">
+                <i :class="group.icon" class="builds-group-icon"></i>
+                <span class="builds-group-label">{{ group.label }}</span>
               </th>
-            </template>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
-            <td class="builds-td-engine">{{ info.label }}</td>
-            <template v-for="group in columnGroups" :key="group.label">
-              <td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
-                <i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
-                <i v-else class="fa-solid fa-xmark builds-xmark"></i>
-              </td>
-            </template>
-          </tr>
-        </tbody>
-      </table>
+            </tr>
+            <tr>
+              <template v-for="group in columnGroups" :key="group.label">
+                <th v-for="col in group.kinds" :key="col.kind" class="builds-th-sub">
+                  {{ col.sub }}
+                </th>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(info, platform) in data.platforms" :key="platform" class="builds-row">
+              <td class="builds-td-engine">{{ info.label }}</td>
+              <template v-for="group in columnGroups" :key="group.label">
+                <td v-for="col in group.kinds" :key="col.kind" class="builds-td-kind">
+                  <i v-if="info.kinds.includes(col.kind)" class="fa-solid fa-check builds-check"></i>
+                  <i v-else class="fa-solid fa-xmark builds-xmark"></i>
+                </td>
+              </template>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Mobile cards -->
+    <div v-if="data" class="builds-mobile">
+      <div v-for="(info, platform) in data.platforms" :key="platform" class="builds-card">
+        <h3 class="builds-card-title">{{ info.label }}</h3>
+        <div v-for="group in columnGroups" :key="group.label" class="builds-card-group">
+          <div class="builds-card-group-header">
+            <i :class="group.icon" class="builds-card-group-icon"></i>
+            <span>{{ group.label }}</span>
+          </div>
+          <div class="builds-card-kinds">
+            <div v-for="col in group.kinds" :key="col.kind" class="builds-card-kind">
+              <i :class="info.kinds.includes(col.kind) ? 'fa-solid fa-check builds-check' : 'fa-solid fa-xmark builds-xmark'"></i>
+              <span class="builds-card-kind-label">{{ col.sub }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="builds-back">
@@ -160,6 +180,40 @@ onMounted(() => store.fetch())
 .builds-xmark {
   @apply text-gray-200 text-lg;
 }
+/* Responsive visibility */
+.builds-desktop {
+  @apply hidden md:block;
+}
+.builds-mobile {
+  @apply md:hidden space-y-4;
+}
+
+/* Mobile cards */
+.builds-card {
+  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-5;
+}
+.builds-card-title {
+  @apply text-lg font-bold text-gray-900 mb-4 pb-3 border-b border-gray-100;
+}
+.builds-card-group {
+  @apply py-2;
+}
+.builds-card-group-header {
+  @apply flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider mb-2;
+}
+.builds-card-group-icon {
+  @apply text-gray-400 text-sm;
+}
+.builds-card-kinds {
+  @apply flex flex-wrap gap-x-5 gap-y-1 pl-5 mb-2;
+}
+.builds-card-kind {
+  @apply flex items-center gap-1.5 text-sm;
+}
+.builds-card-kind-label {
+  @apply text-gray-600;
+}
+
 .builds-back {
   @apply mt-8 text-center;
 }