diff --git a/PoinCloudWeb.Web/package-lock.json b/PoinCloudWeb.Web/package-lock.json
index d51d5e7..20eee66 100644
--- a/PoinCloudWeb.Web/package-lock.json
+++ b/PoinCloudWeb.Web/package-lock.json
@@ -1755,6 +1755,63 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1763,6 +1820,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.3.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.3.tgz",
+          "integrity": "sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -11254,87 +11333,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.3.3",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.3.tgz?cache=0&sync_timestamp=1626830452707&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.3.tgz",
-      "integrity": "sha1-5EDk6xJ4bhYTi12YthIgjynd9TI=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995588464&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995297666&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626715879199&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.nlark.com/loader-utils/download/loader-utils-2.0.0.tgz?cache=0&sync_timestamp=1618846850760&other_urls=https%3A%2F%2Fregistry.nlark.com%2Floader-utils%2Fdownload%2Floader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "4.0.10",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.10.tgz",
diff --git a/PoinCloudWeb.Web/src/components/ScanItem.vue b/PoinCloudWeb.Web/src/components/ScanItem.vue
index 2fc89cb..c34c918 100644
--- a/PoinCloudWeb.Web/src/components/ScanItem.vue
+++ b/PoinCloudWeb.Web/src/components/ScanItem.vue
@@ -1,26 +1,48 @@
 <template>
   <div>
-    <button>Test</button>
-    <md-icon>thumb_up</md-icon>
-    <!-- button(id="Visible" + scan.id, onclick="buttonVisibleClicked("+scan.id+")"
-    type="button", class="fa fa-eye") button(id="Edit" + scan.id, type="button",
-    class="fa fa-edit") p(id="Label" + scan.id)= scan.name -->
+    <font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible" />
+    <font-awesome-icon class="icon" icon="edit" />
+    <p>Scan Name</p>
+    <!--     
+    button(id="Visible" + scan.id, onclick="buttonVisibleClicked("+scan.id+")"type="button", class="fa fa-eye") 
+    button(id="Edit" + scan.id, type="button",class="fa fa-edit") 
+    p(id="Label" + scan.id)= scan.name -->
   </div>
 </template>
 
 <script>
+// import MenuIcon from "vue-material-design-icons/Menu.vue";
+
 export default {
   name: "ScanItem",
-  //   methods: {
-  //     onClickMain: function () {
-  //       this.$router.push("/");
-  //     },
-  //     onClickScanner: function () {
-  //       this.$router.push("/scanner");
-  //     },
-  //     onClickMap: function () {
-  //       this.$router.push("/map");
-  //     },
-  //   },
+  data: function () {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    onClickVisible: function () {
+      this.visible = !this.visible;
+    },
+  },
+  computed: {
+    iconName: function () {
+      if (this.visible) return "eye";
+      else return "eye-slash";
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.icon {
+  margin-right: 5px;
+}
+
+p {
+  display: inline-block;
+  margin: 0px;
+  margin-left: 5px;
+  font-size: 0.8em;
+}
+</style>e
\ No newline at end of file
diff --git a/PoinCloudWeb.Web/src/main.js b/PoinCloudWeb.Web/src/main.js
index fa26040..a058318 100644
--- a/PoinCloudWeb.Web/src/main.js
+++ b/PoinCloudWeb.Web/src/main.js
@@ -1,7 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEdit, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-createApp(App)
+library.add(faEdit, faEye, faEyeSlash)
+
+
+//Vue.config.productionTip = false
+
+const app = createApp(App)
     .use(router)
-    .mount('#app')
+    .component('font-awesome-icon', FontAwesomeIcon);
+
+app.mount('#app')
diff --git a/PoinCloudWeb.Web/src/views/Map.vue b/PoinCloudWeb.Web/src/views/Map.vue
index 769303d..9b315e0 100644
--- a/PoinCloudWeb.Web/src/views/Map.vue
+++ b/PoinCloudWeb.Web/src/views/Map.vue
@@ -9,10 +9,7 @@
 							+scan(scan) -->
         </ul>
         <ul v-for="item in items" :key="item">
-          <li>
-            <p>{{ item }}</p>
-            <ScanItem />
-          </li>
+          <li><ScanItem /></li>
         </ul>
       </div>
     </div>