diff --git a/index.html b/index.html
index 89a515e..23bd425 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sub-Address KEy</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="src/main.js"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8">
+		<link rel="icon" href="favicon.ico">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Sub-Address KEy</title>
+	</head>
+	<body>
+		<section class="section">
+			<div class="container">
+				<div class="columns is-centered">
+					<div class="column is-three-fifths" id="app">
+					</div>
+				</div>
+			</div>
+		</section>
+		<script type="module" src="src/main.js"></script>
+	</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 624319c..2b0c606 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <script setup>
+import MainView from "./views/MainView.vue";
 </script>
 
 <template>
+    <MainView />
 </template>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
new file mode 100644
index 0000000..07fd23b
--- /dev/null
+++ b/src/views/MainView.vue
@@ -0,0 +1,71 @@
+<script setup>
+import {ref, computed} from "vue";
+
+const accounts = [
+	{
+		id: 'bbca792e-0cf4-414f-8d6e-eea3df8e20b3',
+		localPart: 'a',
+		separator: '+',
+		domain: 'example.org',
+		key: [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: [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 subAddrName = ref("");
+const generatedAddr = computed(() => {
+	if (selectedAccountId.value && subAddrName.value) {
+		const account = accounts.find((e) => e.id == selectedAccountId.value);
+		if (account) {
+			const code = 'todo';
+			return `${account.localPart}${account.separator}${subAddrName.value}${account.separator}${code}@${account.domain}`;
+		}
+	}
+	return "";
+});
+
+const copyAddr = () => {
+	navigator.clipboard.writeText(generatedAddr.value);
+};
+</script>
+
+<template>
+	<h1 class="title is-1">New email address</h1>
+	<label class="label" for="account-name">Account</label>
+	<div class="field has-addons">
+		<div class="control is-expanded">
+			<div class="select is-fullwidth">
+				<select id="account-name" v-model="selectedAccountId">
+					<option v-for="account in accounts" :key="account.id" :value="account.id">{{ account.localPart }}@{{ account.domain }}</option>
+				</select>
+			</div>
+		</div>
+		<p class="control">
+			<a class="button is-danger">Delete</a>
+		</p>
+		<p class="control">
+			<a class="button is-primary">New</a>
+		</p>
+	</div>
+	<div class="field">
+		<label class="label" for="sub-addr-name">Name</label>
+		<div class="control">
+			<input class="input" type="text" id="sub-addr-name" placeholder="Text input" v-model="subAddrName">
+		</div>
+	</div>
+	<label class="label" for="generated-addr">Address</label>
+	<div class="field has-addons">
+		<div class="control is-expanded">
+			<input class="input" type="text" id="generated-addr" v-model="generatedAddr" disabled>
+		</div>
+		<p class="control">
+			<a class="button is-primary" @click="copyAddr">Copy</a>
+		</p>
+	</div>
+</template>
