diff --git a/web-frontend/package.json b/web-frontend/package.json
index 6afbeda..5cc5dad 100644
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -31,5 +31,8 @@
 		"vite-plugin-pwa": "^0.14.4",
 		"vite-plugin-wasm-pack": "^0.1.12"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelecte": "^4.0.0-alpha.7"
+	}
 }
diff --git a/web-frontend/src/lib/AddressInput.svelte b/web-frontend/src/lib/AddressInput.svelte
new file mode 100644
index 0000000..6117cc5
--- /dev/null
+++ b/web-frontend/src/lib/AddressInput.svelte
@@ -0,0 +1,35 @@
+<!--
+<script>
+    import Svelecte from 'svelecte';
+    // import { dataset } from './data.js';
+
+    let options = ["a", "b", "c", "d"];
+
+    let selection = [];
+    let value = [];
+</script>
+
+<Svelecte {options}
+inputId="country"
+bind:readSelection={selection}
+bind:value={value}
+multiple
+max=3
+min=3
+clearable=true
+placeholder="Enter address"></Svelecte>
+-->
+<script>
+	export let value;
+</script>
+
+<div class="mb-4">
+	<label class="block text-gray-700 text-sm font-bold mb-2" for="username"> Address </label>
+	<input
+		class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+		type="text"
+		bind:value
+		placeholder="Address"
+		on:input
+	/>
+</div>
diff --git a/web-frontend/src/lib/common.js b/web-frontend/src/lib/common.js
index 2694b7d..7ecc046 100644
--- a/web-frontend/src/lib/common.js
+++ b/web-frontend/src/lib/common.js
@@ -1,5 +1,29 @@
+import init, { address_from_lat_lon } from 'xpin-wasm';
+import * as xpinWasm from 'xpin-wasm';
+
 export const WasmStatus = {
-	NotLoaded: 0,
-	Loaded: 1,
-	Errored: 2
+	NotLoaded: -1,
+	Loaded: 0,
+	Errored: 1
 };
+
+export async function getWasm() {
+	let wasmStatus = WasmStatus.NotLoaded;
+	let wasmError;
+
+	await init()
+		.then(() => {
+			wasmStatus = WasmStatus.Loaded;
+		})
+		.catch((e) => {
+			console.error('Error loading wasm module', e);
+			wasmError = e;
+			wasmStatus = WasmStatus.Errored;
+		});
+
+	return {
+		status: wasmStatus,
+		error: wasmError,
+		call: xpinWasm
+	};
+}
diff --git a/web-frontend/src/routes/+layout.svelte b/web-frontend/src/routes/+layout.svelte
index 4356678..dd748ec 100644
--- a/web-frontend/src/routes/+layout.svelte
+++ b/web-frontend/src/routes/+layout.svelte
@@ -37,7 +37,10 @@
 				>
 					Encode
 				</a>
-				<a href="./decode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
+				<a
+					href="./decode"
+					class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white"
+				>
 					Decode
 				</a>
 			</div>
diff --git a/web-frontend/src/routes/decode/+page.svelte b/web-frontend/src/routes/decode/+page.svelte
index eb28667..eecd672 100644
--- a/web-frontend/src/routes/decode/+page.svelte
+++ b/web-frontend/src/routes/decode/+page.svelte
@@ -1,4 +1,53 @@
 <script>
+	import { getWasm, WasmStatus } from '$lib/common.js';
+	import { onMount, onDestroy } from 'svelte';
+	import AddressInput from '$lib/AddressInput.svelte';
+	import Map from '$lib/Map.svelte';
+	import leaflet from 'leaflet';
+
+	// const leaflet = await import('leaflet');
+	let map;
+	let inputValue = '';
+	let outputValue = '';
+	let wasm = {
+		status: WasmStatus.NotLoaded,
+		error: undefined,
+		call: undefined
+	};
+
+	onMount(async () => {
+		wasm = await getWasm();
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+
+	const input = () => {
+		try {
+			outputValue = wasm.call.address_to_lat_lon(inputValue);
+			let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
+			map.panTo(latlng, 20);
+			leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
+			map.setView(latlng, 20);
+			// map.flyTo(new leaflet.LatLng(outputValue[0], outputValue[1]), 8);
+		} catch (e) {
+			console.error(e);
+			outputValue = `${e}`;
+		}
+	};
 </script>
 
 <h2>Decode</h2>
+
+<p class="inline">Status: {wasm.status}</p>
+<p class="inline">WasmError: {wasm.error}</p>
+<p class="inline">OutputValue: {outputValue}</p>
+<p class="inline">Input value: {inputValue}</p>
+
+<AddressInput bind:value={inputValue} on:input={input} />
+
+<!-- <Map bind:map /> -->
diff --git a/web-frontend/src/routes/encode/+page.svelte b/web-frontend/src/routes/encode/+page.svelte
index 427f2fe..e44049c 100644
--- a/web-frontend/src/routes/encode/+page.svelte
+++ b/web-frontend/src/routes/encode/+page.svelte
@@ -1,8 +1,10 @@
 <script>
+	import { getWasm } from '$lib/common.js';
 	import { WasmStatus } from '$lib/common.js';
-	import init, { address_from_lat_lon } from 'xpin-wasm';
 	import { onMount, onDestroy } from 'svelte';
+	import AddressInput from '$lib/AddressInput.svelte';
 	import { browser } from '$app/environment';
+	import leaflet from 'leaflet';
 
 	import Map from '$lib/Map.svelte';
 
@@ -10,28 +12,22 @@
 
 	let latlng = { lat: '', lng: '' };
 	let addr = '';
-	let wasmStatus = WasmStatus.NotLoaded;
-	let wasmError = undefined;
+	let wasm = {
+		status: WasmStatus.NotLoaded,
+		error: undefined,
+		call: undefined
+	};
 
 	onMount(async () => {
-		await init()
-			.then(() => {
-				wasmStatus = WasmStatus.Loaded;
-			})
-			.catch((e) => {
-				console.error('Error loading wasm module', e);
-				wasmError = e;
-				wasmStatus = WasmStatus.Errored;
-			});
+		wasm = await getWasm();
 
 		if (browser) {
-			const leaflet = await import('leaflet');
 			let popup = leaflet.popup();
 			map.on('click', (e) => {
 				try {
 					// TODO: Leaflet allows sending coordinates out of the standard range
 					latlng = e.latlng;
-					addr = address_from_lat_lon(latlng.lat, latlng.lng);
+					addr = wasm.call.address_from_lat_lon(latlng.lat, latlng.lng);
 					popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
 				} catch (err) {
 					console.error(err);
@@ -42,21 +38,38 @@
 		}
 	});
 
-	// onDestroy(async () => {
-	// 	if (map) {
-	// 		console.log('Unloading Leaflet map.');
-	// 		map.remove();
-	// 	}
-	// });
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+
+	let outputValue = '';
+	const input = () => {
+		try {
+			outputValue = wasm.call.address_to_lat_lon(addr);
+			let latlng = new leaflet.LatLng(outputValue[0], outputValue[1]);
+			map.panTo(latlng, 20);
+			leaflet.popup().setLatLng(latlng).setContent(`${outputValue}<br>hi`).openOn(map);
+			map.setView(latlng);
+		} catch (e) {
+			console.error(e);
+			outputValue = `${e}`;
+		}
+	};
 </script>
 
 <h2>Encode</h2>
 
-{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
+<p>{outputValue}</p>
+{#if wasm.status == WasmStatus.Loaded || wasm.status == WasmStatus.NotLoaded}
 	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
 
+	<AddressInput bind:value={addr} on:input={input} />
+
 	<Map bind:map />
-{:else if wasmStatus == WasmStatus.Errored}
+{:else if wasm.status == WasmStatus.Errored}
 	<div class="flex">
 		<div class="py-1">
 			<svg
diff --git a/web-frontend/yarn.lock b/web-frontend/yarn.lock
index 8fe3f32..521b07e 100644
--- a/web-frontend/yarn.lock
+++ b/web-frontend/yarn.lock
@@ -3244,6 +3244,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelecte@^4.0.0-alpha.7:
+  version "4.0.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/svelecte/-/svelecte-4.0.0-alpha.7.tgz#1e27cb5a6c35e5c9d084779dd3589b2ed9e5c8c5"
+  integrity sha512-4gG8XQONjBLHnE1hssjp1Fmaf9mKJIDajXebRJkFSqExcjGGv5RLZsFaUywT4LtOT/nUpbtcZ+2scu1uyauHJg==
+  dependencies:
+    svelte-tiny-virtual-list "^2.0.0"
+
 svelte-check@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-3.0.4.tgz#8cd191fd27627da890405385ec80de6529828aee"
@@ -3275,6 +3282,11 @@ svelte-preprocess@^5.0.0:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
+svelte-tiny-virtual-list@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-2.0.5.tgz#5a88b14f2041eedc060dc799a2f146ee0355073f"
+  integrity sha512-xg9ckb8UeeIme4/5qlwCrl2QNmUZ8SCQYZn3Ji83cUsoASqRNy3KWjpmNmzYvPDqCHSZjruBBsoB7t5hwuzw5g==
+
 svelte@^3.54.0:
   version "3.55.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.55.1.tgz#6f93b153e5248039906ce5fe196efdb9e05dfce8"