diff --git a/src/App.vue b/src/App.vue
index 82a214d..9a9aa68 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,43 +7,27 @@
         class="mx-auto"
         max-width="600"
       >
-        <!--toolbar-->
-        <v-toolbar color="primary">
-          <v-spacer />
-          <v-btn
-            @click="showQRScanner()"
-          >
-            <v-icon>
-              mdi-qrcode-scan
-            </v-icon>
-            Scan
-          </v-btn>
-          <v-spacer />
-          <v-btn
-            @click="show_history = true"
-          >
-            <v-icon>
-              mdi-history
-            </v-icon>
-            History
-          </v-btn>
-          <v-spacer />
-          <v-btn
-            @click="show_history = false"
-          >
-            <v-icon>
-              mdi-cog 
-            </v-icon>
-            Settings
-          </v-btn>
-          <v-spacer />
-        </v-toolbar>
+        <AppMenu 
+          @show-qr-scanner="showQRScanner()"  
+          @show-history="show_history = true"
+          @show-settings="show_history = false"          
+        />
         <!--history-->
         <v-card 
           v-if="show_history"
         >
           <!--previous scans-->
-          <v-expansion-panels v-model="expanded_panels">
+          <div 
+            v-if="!cloud_storage_keys.length"
+            class="text-center headline mb-4 mt-4"
+          >
+            Scan a QR code!
+          </div>
+          <v-expansion-panels
+            v-if="cloud_storage_keys.length"
+            v-model="expanded_panels"
+            class="mt-4"
+          >
             <v-expansion-panel
               v-for="(akey, index) in cloud_storage_keys"
               :key="index"
@@ -79,18 +63,23 @@
                 </v-row>
               </v-expansion-panel-title>
               <v-expansion-panel-text v-if="enriched_values[akey] && enriched_values[akey].hasOwnProperty('type')">
-                <GeoCard
+                <CardGeo
                   v-if="enriched_values[akey]['type'] === 'geo'"
                   :coordinate="enriched_values[akey]['info']"
                   @remove-key="removeKey(akey)"  
                 />
-                <UrlCard
+                <CardUrl
                   v-if="enriched_values[akey]['type'] === 'url'"
                   :url="enriched_values[akey]['info']"
                   @remove-key="removeKey(akey)" 
                 />
-                <TextCard
-                  v-if="enriched_values[akey]['type'] === 'text' || enriched_values[akey]['type'] === 'wifi' || enriched_values[akey]['type'] === 'vcard'"
+                <CardWifi
+                  v-if="enriched_values[akey]['type'] === 'wifi'"
+                  :wifi="enriched_values[akey]['info']"
+                  @remove-key="removeKey(akey)" 
+                />
+                <CardText
+                  v-if="enriched_values[akey]['type'] === 'text' || enriched_values[akey]['type'] === 'vcard'"
                   :text="enriched_values[akey]['info']"
                   @remove-key="removeKey(akey)"
                 />
@@ -187,16 +176,20 @@
 </template>
 
 <script>
-import { prepareUrl, prepareCoordinate } from './helpers'
-import UrlCard from "./components/UrlCard.vue";
-import GeoCard from "./components/GeoCard.vue";
-import TextCard from "./components/TextCard.vue";
+import { prepareUrl, prepareCoordinate, prepareWifi } from './helpers';
+import AppMenu from "./components/AppMenu.vue";
+import CardUrl from "./components/CardUrl.vue";
+import CardGeo from "./components/CardGeo.vue";
+import CardWifi from "./components/CardWifi.vue";
+import CardText from "./components/CardText.vue";
 
 export default {
   components: {
-    UrlCard,
-    GeoCard,
-    TextCard,
+    AppMenu,
+    CardUrl,
+    CardGeo,
+    CardWifi,
+    CardText,
   },
   data() {
     return {
@@ -291,7 +284,7 @@ export default {
       if (code_type == "geo") {
         this.enriched_values[key]['info'] = prepareCoordinate(this.cloud_storage_values[key]);
       } else if (code_type == "wifi") {
-        this.enriched_values[key]['info'] = this.cloud_storage_values[key];
+        this.enriched_values[key]['info'] = prepareWifi(this.cloud_storage_values[key]);
       } else if (code_type == "vcard") {
         this.enriched_values[key]['info'] = this.cloud_storage_values[key];
       } else if (code_type == "url") {
diff --git a/src/components/AppMenu.vue b/src/components/AppMenu.vue
new file mode 100644
index 0000000..7aa729d
--- /dev/null
+++ b/src/components/AppMenu.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-toolbar color="primary">
+    <v-spacer />
+    <v-btn
+      @click="$emit('show-qr-scanner')"
+    >
+      <v-icon>
+        mdi-qrcode-scan
+      </v-icon>
+      Scan
+    </v-btn>
+    <v-spacer />
+    <v-btn
+      @click="$emit('show-history')"
+    >
+      <v-icon>
+        mdi-history
+      </v-icon>
+      History
+    </v-btn>
+    <v-spacer />
+    <v-btn
+      @click="$emit('show-settings')"
+    >
+      <v-icon>
+        mdi-cog 
+      </v-icon>
+      Settings
+    </v-btn>
+    <v-spacer />
+  </v-toolbar>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "AppMenu",
+  emits: [
+    'show-qr-scanner',
+    'show-history',
+    'show-settings'
+  ],
+});
+</script>
\ No newline at end of file
diff --git a/src/components/ButtonDelete.vue b/src/components/ButtonDelete.vue
new file mode 100644
index 0000000..aba5053
--- /dev/null
+++ b/src/components/ButtonDelete.vue
@@ -0,0 +1,18 @@
+<template>
+  <v-btn
+    color="red"
+    icon="mdi-delete-outline"
+    variant="text"
+    @click="$emit('remove-key')"
+  />
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "ButtonDelete",
+  emits: [
+    'remove-key'
+  ],
+});
+</script>
\ No newline at end of file
diff --git a/src/components/GeoCard.vue b/src/components/CardGeo.vue
similarity index 86%
rename from src/components/GeoCard.vue
rename to src/components/CardGeo.vue
index 5283f09..f996ecd 100644
--- a/src/components/GeoCard.vue
+++ b/src/components/CardGeo.vue
@@ -18,11 +18,8 @@
         Open Location
       </v-btn>
       <v-spacer />
-      <v-btn
-        color="red"
-        icon="mdi-delete-outline"
-        variant="text"
-        @click="$emit('remove-key')"
+      <ButtonDelete
+        @remove-key="$emit('remove-key')"
       />
     </v-card-actions>
   </v-card>
@@ -30,8 +27,12 @@
 
 <script>
 import { defineComponent } from 'vue';
+import ButtonDelete from "./ButtonDelete.vue";
 export default defineComponent({
-  name: "GeoCard",
+  name: "CardGeo",
+  components: {
+    ButtonDelete,
+  },
   props: {
     coordinate: {
       type: Object, // Object is a constructor for objects
@@ -57,7 +58,5 @@ export default defineComponent({
 });
 </script>
 
-
-
 <style scoped>
 </style>
\ No newline at end of file
diff --git a/src/components/TextCard.vue b/src/components/CardText.vue
similarity index 83%
rename from src/components/TextCard.vue
rename to src/components/CardText.vue
index f3bb316..9afbcce 100644
--- a/src/components/TextCard.vue
+++ b/src/components/CardText.vue
@@ -11,11 +11,8 @@
     </v-card-item>
     <v-card-actions>
       <v-spacer />
-      <v-btn
-        color="red"
-        icon="mdi-delete-outline"
-        variant="text"
-        @click="$emit('remove-key')"
+      <ButtonDelete
+        @remove-key="$emit('remove-key')"
       />
     </v-card-actions>
   </v-card>
@@ -23,8 +20,12 @@
 
 <script>
 import { defineComponent } from 'vue';
+import ButtonDelete from "./ButtonDelete.vue";
 export default defineComponent({
-  name: "TextCard",
+  name: "CardText",
+  components: {
+    ButtonDelete,
+  },
   props: {
     text: {
       type:  String, // Object is a constructor for objects
@@ -50,7 +51,5 @@ export default defineComponent({
 });
 </script>
 
-
-
 <style scoped>
 </style>
\ No newline at end of file
diff --git a/src/components/UrlCard.vue b/src/components/CardUrl.vue
similarity index 84%
rename from src/components/UrlCard.vue
rename to src/components/CardUrl.vue
index 823454f..1b16e03 100644
--- a/src/components/UrlCard.vue
+++ b/src/components/CardUrl.vue
@@ -18,11 +18,8 @@
         Open Link
       </v-btn>
       <v-spacer />
-      <v-btn
-        color="red"
-        icon="mdi-delete-outline"
-        variant="text"
-        @click="$emit('remove-key')"
+      <ButtonDelete
+        @remove-key="$emit('remove-key')"
       />
     </v-card-actions>
   </v-card>
@@ -30,8 +27,12 @@
 
 <script>
 import { defineComponent } from 'vue';
+import ButtonDelete from "./ButtonDelete.vue";
 export default defineComponent({
-  name: "UrlCard",
+  name: "CardUrl",
+  components: {
+    ButtonDelete,
+  },
   props: {
     url: {
       type: Object, // Object is a constructor for objects
@@ -57,7 +58,5 @@ export default defineComponent({
 });
 </script>
 
-
-
 <style scoped>
 </style>
\ No newline at end of file
diff --git a/src/components/CardWifi.vue b/src/components/CardWifi.vue
new file mode 100644
index 0000000..c4bc3bc
--- /dev/null
+++ b/src/components/CardWifi.vue
@@ -0,0 +1,61 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="600"
+    variant="flat"
+  > 
+    <v-card-item>
+      <div>
+        Network Name: {{ wifi.S }}
+      </div>
+      <div>
+        Type: {{ wifi.T }}
+      </div>
+      <div>
+        Password: {{ wifi.P }}
+      </div>
+    </v-card-item>
+    <v-card-actions>
+      <v-spacer />
+      <ButtonDelete
+        @remove-key="$emit('remove-key')"
+      />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import ButtonDelete from "./ButtonDelete.vue";
+export default defineComponent({
+  name: "CardWifi",
+  components: {
+    ButtonDelete,
+  },
+  props: {
+    wifi: {
+      type: Object, // Object is a constructor for objects
+      required: true, // This is optional, but it makes the prop required
+    },
+  },
+  emits: [
+    'remove-key'
+  ],
+  data() {
+    return {
+      aurl: this.url,
+    };
+  },
+  created() {
+    console.log(this.url);
+  },
+  methods: {
+    openLink(url) {
+        this.TWA.openLink(url);
+    },
+  },
+});
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/helpers.js b/src/helpers.js
index f09127f..934cf7f 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -37,3 +37,20 @@ export function prepareCoordinate(data) {
   const parts = code.split(',');
   return {lat: parts[0], lng: parts[1]};
 }
+
+export function prepareWifi(data) {
+  //remove the geo: string
+  const code = data.replace('WIFI:', '');
+  //split the string in two parts
+  const parts = code.split(';');
+  let wifi_info = {};
+  //loop aver parts
+  for (let i = 0; i < parts.length; i++) {
+    let fragments = parts[i].split(':');
+    if (fragments[0] == '') {
+      continue;
+    }
+    wifi_info[fragments[0]] = fragments[1];
+  }
+  return wifi_info;
+}
\ No newline at end of file