diff --git a/frontend/current_screen.png b/frontend/current_screen.png
index 7dd5b38b..e69681a6 100644
Binary files a/frontend/current_screen.png and b/frontend/current_screen.png differ
diff --git a/frontend/src/features/model-operations/components/ModelOperationTable.vue b/frontend/src/features/model-operations/components/ModelOperationTable.vue
index 1fc4e17f..fa2e15d9 100644
--- a/frontend/src/features/model-operations/components/ModelOperationTable.vue
+++ b/frontend/src/features/model-operations/components/ModelOperationTable.vue
@@ -1,44 +1,40 @@
 <script setup lang="ts">
 import type { ModelOperationItem } from '../schema'
-import { KsStatusTag } from '../../../shared/ui/components'
+import { KsDataGrid } from '../../../shared/ui/components'
+import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'
 
-defineProps<{ operations: ModelOperationItem[] }>()
+const props = defineProps<{ operations: ModelOperationItem[] }>()
+
+const columns: UiGridColumn[] = [
+  { field: 'operationCode', header: 'Job ID', width: 110 },
+  { field: 'name', header: '작업명', flex: 1, minWidth: 160 },
+  { field: 'cadence', header: '주기', width: 90 },
+  { field: 'automationMode', header: '자동화 모드', width: 140 },
+  { field: 'queue', header: 'Queue', width: 140 },
+  { field: 'gate', header: 'Gate', width: 140 },
+  {
+    field: 'primaryOwner',
+    header: '담당자 (Primary / Secondary)',
+    flex: 1,
+    formatter: (_, row) => {
+      const r = row as ModelOperationItem
+      return `${r.primaryOwner} / ${r.secondaryOwner}`
+    },
+  },
+  { field: 'output', header: '필수 증거 및 산출물', flex: 1, minWidth: 180 },
+]
 </script>
 
 <template>
   <div class="operation-plan-panel">
     <h3 class="panel-title">📋 지속 평가·개선 작업 계획</h3>
-    <div class="table-container">
-      <table class="ks-table">
-        <thead>
-          <tr>
-            <th style="width: 50px; text-align: center;">No.</th>
-            <th style="width: 100px;">Job ID</th>
-            <th>작업명</th>
-            <th style="width: 80px; text-align: center;">주기</th>
-            <th style="width: 130px; text-align: center;">자동화 모드</th>
-            <th style="width: 140px;">Queue</th>
-            <th style="width: 140px;">Gate</th>
-            <th>담당자 (Primary / Secondary)</th>
-            <th>필수 증거 및 산출물</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(operation, index) in operations" :key="operation.operationCode" :class="index % 2 === 1 ? 'row-odd' : 'row-even'">
-            <td style="text-align: center;" class="ks-financial-number">{{ index + 1 }}</td>
-            <td class="code-text">{{ operation.operationCode }}</td>
-            <td class="name-text">{{ operation.name }}</td>
-            <td style="text-align: center;"><span class="badge cadence">{{ operation.cadence }}</span></td>
-            <td style="text-align: center;">
-              <KsStatusTag :value="operation.automationMode" severity="warning" />
-            </td>
-            <td><code>{{ operation.queue }}</code></td>
-            <td><span class="badge gate">{{ operation.gate }}</span></td>
-            <td class="owner-text">{{ operation.primaryOwner }} / {{ operation.secondaryOwner }}</td>
-            <td class="output-text">{{ operation.output }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="grid-wrapper">
+      <KsDataGrid
+        :rows="props.operations"
+        :columns="columns"
+        height="240px"
+        :show-row-number="true"
+      />
     </div>
   </div>
 </template>
@@ -62,89 +58,10 @@ defineProps<{ operations: ModelOperationItem[] }>()
   color: var(--ks-color-neutral-800);
 }
 
-.table-container {
+.grid-wrapper {
   width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--ks-color-neutral-300);
+  border: 1px solid var(--ks-color-border);
   border-radius: var(--ks-radius-sm);
-}
-
-.ks-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--ks-font-body);
-  text-align: left;
-}
-
-.ks-table th {
-  background: #f1f5f9;
-  color: var(--ks-color-neutral-800);
-  font-weight: 700;
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-neutral-300);
-  font-size: var(--ks-font-caption);
-  white-space: nowrap;
-}
-
-.ks-table td {
-  padding: var(--ks-space-2) var(--ks-space-3);
-  border-bottom: 1px solid var(--ks-color-neutral-200);
-  vertical-align: middle;
-}
-
-.ks-table tr.row-even {
-  background: #ffffff;
-}
-
-.ks-table tr.row-odd {
-  background: #f8fafc;
-}
-
-.ks-table tr:hover {
-  background: #e0f2fe;
-}
-
-.code-text {
-  font-weight: 700;
-  color: var(--ks-color-action);
-  font-family: monospace;
-}
-
-.name-text {
-  font-weight: 600;
-  color: var(--ks-color-neutral-900);
-}
-
-.badge {
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: var(--ks-radius-sm);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.badge.cadence {
-  background: #e2e8f0;
-  color: #334155;
-}
-
-.badge.gate {
-  background: #dcfce7;
-  color: #166534;
-  border: 1px solid #bbf7d0;
-}
-
-code {
-  font-family: monospace;
-  font-size: 11px;
-  background: #f1f5f9;
-  padding: 2px 4px;
-  border-radius: 3px;
-  color: #475569;
-}
-
-.owner-text, .output-text {
-  color: var(--ks-color-neutral-700);
-  font-size: var(--ks-font-caption);
+  overflow: hidden;
 }
 </style>