diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 34c57491..95ac129c 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -80,7 +80,9 @@
       >
         <span
           ><code>{{ address }}</code>
-          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          <button @click="copy(address)">
+            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          </button>
         </span>
         <span>
           <button
@@ -100,7 +102,9 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>{{ publicHex }}</code>
-          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          <button @click="copy(publicHex)">
+            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          </button>
         </span>
       </div>
 
@@ -108,7 +112,9 @@
       <div class="text-sm text-slate-500 mb-1">
         <span
           ><code>{{ UPORT_ROOT_DERIVATION_PATH }}</code>
-          <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          <button @click="copy(UPORT_ROOT_DERIVATION_PATH)">
+            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          </button>
         </span>
       </div>
     </div>
@@ -167,11 +173,13 @@
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { useClipboard } from "@vueuse/core";
 import { createIdentifier, deriveAddress, newIdentifier } from "../libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import * as R from "ramda";
 import { db } from "../db";
 import { useAppStore } from "@/store/app";
+import { ref } from "vue";
 
 @Options({
   components: {},
@@ -182,6 +190,9 @@ export default class AccountViewView extends Vue {
   privateHex = "";
   publicHex = "";
   UPORT_ROOT_DERIVATION_PATH = "";
+  source = ref("Hello");
+  copy = useClipboard().copy;
+
   async created() {
     const previousIdentifiers: Array<IIdentifier> = [];
     const toLowercase = true;