diff --git a/src/main/front/src/components/AgentConfigView.vue b/src/main/front/src/components/AgentConfigView.vue
index 6e0a4f2..d0a30b1 100644
--- a/src/main/front/src/components/AgentConfigView.vue
+++ b/src/main/front/src/components/AgentConfigView.vue
@@ -117,7 +117,42 @@ function configReload() {
 }
 
 // agentConfig의 내용을 json 파일로 다운로드
-function configExport() {}
+function configExport() {
+  const configCopy = JSON.parse(JSON.stringify(agentConfig))
+  if (Array.isArray(configCopy.knownAgentList)) {
+    configCopy.knownAgentList.forEach((item) => {
+      delete item.selected
+      delete item.added
+    })
+  }
+  if (Array.isArray(configCopy.dataSourceConfig)) {
+    configCopy.dataSourceConfig.forEach((item) => {
+      delete item.selected
+      delete item.added
+    })
+  }
+  if (configCopy.dropBoxConfig && Array.isArray(configCopy.dropBoxConfig.dropBoxList)) {
+    configCopy.dropBoxConfig.dropBoxList.forEach((item) => {
+      delete item.selected
+      delete item.added
+    })
+  }
+  if (configCopy.postmanConfig && Array.isArray(configCopy.postmanConfig.postmanList)) {
+    configCopy.postmanConfig.postmanList.forEach((item) => {
+      delete item.selected
+      delete item.added
+    })
+  }
+  const configString = JSON.stringify(configCopy, null, 2)
+  const blob = new Blob([configString], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'settings.json'
+  document.body.append(a)
+  a.click()
+  URL.revokeObjectURL(url)
+}
 
 // agentConfig의 내용을 서버에 전송하여 저장
 function configSave() {}
@@ -272,6 +307,9 @@ defineExpose({
 </script>
 
 <template>
+  <datalist id="dataSourceIdDataList">
+    <option v-for="dataSource in agentConfig.dataSourceConfig" :value="dataSource.dataSourceId" :key="dataSource.dataSourceId">{{ dataSource.dataSourceId }}</option>
+  </datalist>
   <!-- Modal -->
   <div class="modal fade" :id="props.modalId" ref="modalEl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="props.modalId + 'Label'" aria-hidden="true">
     <div class="modal-dialog modal-xl data-modal-dialog">
@@ -353,7 +391,7 @@ defineExpose({
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
-                        <tr v-if="agentConfig.knownAgentList.length > 0" v-for="knownAgent in agentConfig.knownAgentList" :key="knownAgent.hostId">
+                        <tr v-if="agentConfig.knownAgentList.length > 0" v-for="(knownAgent, index) in agentConfig.knownAgentList" :key="index">
                           <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="knownAgent.selected" /></td>
                           <td><input type="text" class="form-control" v-model="knownAgent.hostId" /></td>
                           <td><input type="text" class="form-control" v-model="knownAgent.hostName" /></td>
@@ -414,7 +452,7 @@ defineExpose({
                     </div>
                   </div>
                   <div class="card-body">
-                    <table class="table table-striped table-bordered align-middle">
+                    <table class="table table-striped table-bordered table-sm align-middle">
                       <thead>
                         <tr>
                           <th scope="col" class="text-center">선택</th>
@@ -431,7 +469,7 @@ defineExpose({
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
-                        <tr v-if="agentConfig.dataSourceConfig.length > 0" v-for="dataSource in agentConfig.dataSourceConfig" :key="dataSource.dataSourceId">
+                        <tr v-if="agentConfig.dataSourceConfig.length > 0" v-for="(dataSource, index) in agentConfig.dataSourceConfig" :key="index">
                           <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="dataSource.selected" /></td>
                           <td><input type="text" class="form-control" v-model="dataSource.dataSourceId" /></td>
                           <td><input type="text" class="form-control" v-model="dataSource.driverClassName" /></td>
@@ -601,7 +639,7 @@ defineExpose({
                     </div>
                   </div>
                   <div class="card-body table-scroll">
-                    <table class="table table-striped table-bordered align-middle table-sticky">
+                    <table class="table table-striped table-bordered table-sm align-middle table-sticky">
                       <thead>
                         <tr>
                           <th scope="col" class="text-center">선택</th>
@@ -613,11 +651,11 @@ defineExpose({
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
-                        <tr v-if="agentConfig.dropBoxConfig.dropBoxList.length > 0" v-for="dropBox in agentConfig.dropBoxConfig.dropBoxList" :key="dropBox.dropBoxId">
+                        <tr v-if="agentConfig.dropBoxConfig.dropBoxList.length > 0" v-for="(dropBox, index) in agentConfig.dropBoxConfig.dropBoxList" :key="index">
                           <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="dropBox.selected" /></td>
                           <td><input type="text" class="form-control" v-model="dropBox.dropBoxId" /></td>
                           <td><input type="text" class="form-control" v-model="dropBox.taskType" /></td>
-                          <td><input type="text" class="form-control" v-model="dropBox.dataSourceId" /></td>
+                          <td><input type="text" class="form-control" v-model="dropBox.dataSourceId" list="dataSourceIdDataList" /></td>
                           <td><input type="text" class="form-control" v-model="dropBox.sqlId" /></td>
                           <td><input type="text" class="form-control" v-model="dropBox.description" /></td>
                         </tr>
@@ -656,7 +694,7 @@ defineExpose({
                     </div>
                   </div>
                   <div class="card-body table-scroll">
-                    <table class="table table-striped table-bordered align-middle table-sticky">
+                    <table class="table table-striped table-bordered table-sm align-middle table-sticky">
                       <thead>
                         <tr>
                           <th scope="col" class="text-center border-top border-bottom align-middle" rowspan="2">선택</th>
@@ -678,14 +716,14 @@ defineExpose({
                         </tr>
                       </thead>
                       <tbody class="table-group-divider">
-                        <tr v-if="agentConfig.postmanConfig.postmanList.length > 0" v-for="postman in agentConfig.postmanConfig.postmanList" :key="postman.postmanId">
+                        <tr v-if="agentConfig.postmanConfig.postmanList.length > 0" v-for="(postman, index) in agentConfig.postmanConfig.postmanList" :key="index">
                           <td scope="row" class="text-center"><input type="checkbox" class="form-check-input" v-model="postman.selected" /></td>
                           <td><input type="text" class="form-control" v-model="postman.postmanId" /></td>
                           <td><input type="text" class="form-control" v-model="postman.taskType" /></td>
                           <td><input type="text" class="form-control" v-model="postman.action.type" /></td>
                           <td><input type="text" class="form-control" v-model="postman.action.cron" /></td>
                           <td><input type="text" class="form-control" v-model="postman.message.messageType" /></td>
-                          <td><input type="text" class="form-control" v-model="postman.message.dataSourceId" /></td>
+                          <td><input type="text" class="form-control" v-model="postman.message.dataSourceId" list="dataSourceIdDataList" /></td>
                           <td><input type="text" class="form-control" v-model="postman.message.sqlId" /></td>
                           <td><input type="text" class="form-control" v-model="postman.message.postProcessingSqlId" /></td>
                           <td><input type="text" class="form-control" v-model="postman.recipientHostId" /></td>