diff --git a/src/App.vue b/src/App.vue
index 2b0c606..600d717 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,25 @@
 <script setup>
+import { ref } from 'vue';
 import MainView from "./views/MainView.vue";
+
+const accounts = [
+	{
+		id: 'bbca792e-0cf4-414f-8d6e-eea3df8e20b3',
+		localPart: 'a',
+		separator: '+',
+		domain: 'example.org',
+		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
+	},
+	{
+		id: '6ff7bae6-6c6c-43d7-a75c-859e6ecbdbd8',
+		localPart: 'b',
+		separator: '+',
+		domain: 'example.org',
+		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
+	},
+];
 </script>
 
 <template>
-    <MainView />
+	<MainView :accounts="accounts" />
 </template>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 72ab975..7680fe4 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -4,24 +4,10 @@ import { hmac } from '@noble/hashes/hmac';
 import { sha256 } from '@noble/hashes/sha256';
 import base32Encode from 'base32-encode'
 
-const accounts = [
-	{
-		id: 'bbca792e-0cf4-414f-8d6e-eea3df8e20b3',
-		localPart: 'a',
-		separator: '+',
-		domain: 'example.org',
-		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
-	},
-	{
-		id: '6ff7bae6-6c6c-43d7-a75c-859e6ecbdbd8',
-		localPart: 'b',
-		separator: '+',
-		domain: 'example.org',
-		key: Uint8Array.from([215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161]),
-	},
-];
-const selectedAccountId = ref('6ff7bae6-6c6c-43d7-a75c-859e6ecbdbd8');
+const { accounts } = defineProps(['accounts']);
+const selectedAccountId = ref(accounts[0].id);
 const subAddrName = ref('');
+
 const generatedAddr = computed(() => {
 	if (selectedAccountId.value && subAddrName.value) {
 		const account = accounts.find((e) => e.id == selectedAccountId.value);