diff --git a/web_src/js/components/dataset/referenceDataset.vue b/web_src/js/components/dataset/referenceDataset.vue
index 45f0e5c0e..a871bb9aa 100644
--- a/web_src/js/components/dataset/referenceDataset.vue
+++ b/web_src/js/components/dataset/referenceDataset.vue
@@ -237,6 +237,7 @@
                       <el-checkbox
                         :label="item.ID"
                         @change="(checked) => changeCheckbox(checked, item)"
+                        :title="item.Title"
                         class="select-data-title"
                         ><span class="ref-data-title">
                           {{ item.Title }}
@@ -281,8 +282,11 @@
                 v-for="(item, index) in selectDatasetArray"
                 :key="index"
                 :label="item.ID"
-                :title="item.Name"
-              ></el-checkbox>
+                :title="item.Title"
+                @change="(checked) => changeCheckSelected(checked, item)"
+                style="display: flex; margin: 0.5rem 0"
+                ><span>{{ item.Title }}</span></el-checkbox
+              >
             </el-checkbox-group>
           </div>
           <div style="text-align: end">
@@ -342,7 +346,10 @@ export default {
         }
       });
     },
-    confirmDataset() {},
+    confirmDataset() {
+      this.submitReferDataset();
+      this.dialogVisible = false;
+    },
     changeCheckbox(checked, item) {
       console.log(checked, item, this.checkList);
       if (checked) {
@@ -355,6 +362,16 @@ export default {
       }
       console.log(this.selectDatasetArray);
     },
+    changeCheckSelected(checked, item) {
+      console.log(checked, item);
+      if (!checked) {
+        let index = this.selectDatasetArray.findIndex((element) => {
+          return element.ID === item.ID;
+        });
+        this.selectDatasetArray.splice(index, 1);
+      }
+      console.log(this.checkList, this.selectDatasetArray);
+    },
     getDatasetList() {
       let url = `${this.repoLink}/datasets/reference_datasets_data`;
       this.$axios.get(url).then((res) => {
@@ -373,7 +390,18 @@ export default {
         console.log("this.publicDatasetList", this.publicDatasetList);
       });
     },
+    submitReferDataset() {
+      let url = `${this.repoLink}/datasets/reference_datasets_available`;
+      let data = this.qs.stringify({
+        _csrf: csrf,
+        dataset_id: this.checkList,
+      });
+      this.$axios.post(url, data).then((res) => {
+        console.log("post success");
+      });
+    },
   },
+
   filters: {
     transformTimestamp(timestamp) {
       const date = new Date(parseInt(timestamp) * 1000);
@@ -476,4 +504,14 @@ export default {
   word-break: initial;
   margin-left: 1rem;
 }
+/deep/ .el-checkbox-group .el-checkbox .el-checkbox__label {
+  max-width: 100%;
+}
+.select-data-right {
+  overflow: hidden;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+}
 </style>