diff --git a/package-lock.json b/package-lock.json
index 7c2212d..8eb0eb9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "license": "(MIT OR Apache-2.0)",
       "dependencies": {
+        "@noble/hashes": "^1.3.1",
+        "base32-encode": "^2.0.0",
         "bulma": "^0.9.4",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
@@ -387,6 +389,17 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz",
+      "integrity": "sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
@@ -520,6 +533,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/base32-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base32-encode/-/base32-encode-2.0.0.tgz",
+      "integrity": "sha512-mlmkfc2WqdDtMl/id4qm3A7RjW6jxcbAoMjdRmsPiwQP0ufD4oXItYMnPgVHe80lnAIy+1xwzhHE1s4FoIceSw==",
+      "dependencies": {
+        "to-data-view": "^2.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -840,6 +864,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/to-data-view": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-data-view/-/to-data-view-2.0.0.tgz",
+      "integrity": "sha512-RGEM5KqlPHr+WVTPmGNAXNeFEmsBnlkxXaIfEpUYV0AST2Z5W1EGq9L/MENFrMMmL2WQr1wjkmZy/M92eKhjYA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 3356a58..fc64fdd 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@noble/hashes": "^1.3.1",
+    "base32-encode": "^2.0.0",
     "bulma": "^0.9.4",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 07fd23b..72ab975 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,5 +1,8 @@
 <script setup>
-import {ref, computed} from "vue";
+import { ref, computed } from 'vue';
+import { hmac } from '@noble/hashes/hmac';
+import { sha256 } from '@noble/hashes/sha256';
+import base32Encode from 'base32-encode'
 
 const accounts = [
 	{
@@ -7,27 +10,34 @@ const accounts = [
 		localPart: 'a',
 		separator: '+',
 		domain: 'example.org',
-		key: [215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161],
+		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: [215, 91, 232, 137, 231, 202, 228, 248, 2, 95, 145, 117, 77, 55, 46, 161],
+		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 subAddrName = ref("");
+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';
+			var hasher = hmac.create(sha256, account.key);
+			hasher.update(account.localPart);
+			hasher.update(account.separator);
+			hasher.update(subAddrName.value);
+			const mac = hasher.digest();
+			const offset = mac[mac.length - 1] & 0xf;
+			const reduced_mac = mac.slice(offset, offset + 5);
+			const code = base32Encode(reduced_mac, 'RFC4648', { padding: false }).toLowerCase();
 			return `${account.localPart}${account.separator}${subAddrName.value}${account.separator}${code}@${account.domain}`;
 		}
 	}
-	return "";
+	return '';
 });
 
 const copyAddr = () => {