diff --git a/src/main/front/package-lock.json b/src/main/front/package-lock.json
index d4fb391..3c7d2aa 100644
--- a/src/main/front/package-lock.json
+++ b/src/main/front/package-lock.json
@@ -16,6 +16,7 @@
         "sass": "^1.89.2",
         "vite-plugin-mkcert": "^1.17.8",
         "vue": "^3.5.17",
+        "vue-chartjs": "^5.3.2",
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
@@ -2200,9 +2201,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.193",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.193.tgz",
-      "integrity": "sha512-eePuBZXM9OVCwfYUhd2OzESeNGnWmLyeu0XAEjf7xjijNjHFdeJSzuRUGN4ueT2tEYo5YqjHramKEFxz67p3XA==",
+      "version": "1.5.194",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.194.tgz",
+      "integrity": "sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA==",
       "dev": true,
       "license": "ISC"
     },
@@ -2397,9 +2398,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -3643,6 +3644,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
diff --git a/src/main/front/package.json b/src/main/front/package.json
index 75b97f9..815bcc1 100644
--- a/src/main/front/package.json
+++ b/src/main/front/package.json
@@ -18,6 +18,7 @@
     "sass": "^1.89.2",
     "vite-plugin-mkcert": "^1.17.8",
     "vue": "^3.5.17",
+    "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
diff --git a/src/main/front/src/views/MainView.vue b/src/main/front/src/views/MainView.vue
index 4c887df..87078a2 100644
--- a/src/main/front/src/views/MainView.vue
+++ b/src/main/front/src/views/MainView.vue
@@ -1,6 +1,16 @@
 <script setup>
 import '@/assets/main.css'
-import 'feather-icons'
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+const shortThroughputCahrtData = {
+  labels: ['agent-mkami', 'agent-ami'],
+  datasets: [{ label: '시간당 처리량', data: [4568, 3232] }],
+}
+const shortThroughputChartOptions = {
+  responsive: true,
+  indexAxis: 'y',
+}
 </script>
 
 <template>
@@ -37,7 +47,7 @@ import 'feather-icons'
             <div class="col-3">
               <div class="card">
                 <div class="card-body">
-                  <h5 class="card-title">agent-mkami</h5>
+                  <h5 class="card-title">agent-mkami <i class="bi bi-lightbulb-fill text-success"></i></h5>
                   <p class="card-text">상태 : 아이콘</p>
                   <p class="card-text">처리량 : 실시간 처리량 숫자</p>
                 </div>
@@ -46,7 +56,7 @@ import 'feather-icons'
             <div class="col-3">
               <div class="card">
                 <div class="card-body">
-                  <h5 class="card-title">agent-ami</h5>
+                  <h5 class="card-title">agent-ami <i class="bi bi-lightbulb-fill text-success"></i></h5>
                   <p class="card-text">상태 : 아이콘</p>
                   <p class="card-text">처리량 : 실시간 처리량 숫자</p>
                 </div>
@@ -61,9 +71,7 @@ import 'feather-icons'
             <div class="col-6">
               <div class="card">
                 <div class="card-body">
-                  <h5 class="card-title">시간당 처리량</h5>
-                  <p class="card-text">그래프</p>
-                  <p class="card-text">에이전트 throughtput 모니터링 요약</p>
+                  <Bar id="shortThoughtputChart" :options="shortThroughputChartOptions" :data="shortThroughputCahrtData"></Bar>
                 </div>
               </div>
             </div>
@@ -80,7 +88,42 @@ import 'feather-icons'
         </article>
       </div>
       <div class="row">
-        <article class="col-12 pt-3"><h5 class="h5">에이전트 목록</h5></article>
+        <article class="col-12 pt-3">
+          <h5 class="h5">에이전트 목록</h5>
+          <table class="table table-striped table-bordered align-middle">
+            <thead>
+              <tr>
+                <th scope="col" class="text-center">Agent ID</th>
+                <th scope="col" class="text-center">Host</th>
+                <th scope="col" class="text-center">port</th>
+                <th scope="col" class="text-center">Postman Count</th>
+                <th scope="col" class="text-center">Dropbox Count</th>
+                <th scope="col" class="text-center">Status</th>
+                <th scope="col" class="text-center">Setting</th>
+              </tr>
+            </thead>
+            <tbody class="table-group-divider">
+              <tr>
+                <td scope="row">agent-mkami</td>
+                <td>mkami.foxsoft.kr</td>
+                <td>17801</td>
+                <td class="text-end">32</td>
+                <td class="text-end">25</td>
+                <td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
+                <td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
+              </tr>
+              <tr>
+                <td scope="row">agent-ami</td>
+                <td>ami.foxsoft.kr</td>
+                <td>17801</td>
+                <td class="text-end">32</td>
+                <td class="text-end">25</td>
+                <td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
+                <td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </article>
       </div>
     </main>
   </div>