diff --git a/src/ui/ErrorAlert.svelte b/src/ui/ErrorAlert.svelte
index 9a5f349..4602c8f 100644
--- a/src/ui/ErrorAlert.svelte
+++ b/src/ui/ErrorAlert.svelte
@@ -49,11 +49,11 @@
 </style>
 
 
-<div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
+<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
     <div>
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>
-            <slot name="message"></slot>
+            <slot></slot>
         </span>
     </div>
 
diff --git a/src/ui/Link.svelte b/src/ui/Link.svelte
new file mode 100644
index 0000000..75d7c21
--- /dev/null
+++ b/src/ui/Link.svelte
@@ -0,0 +1,41 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import { currentView } from '../lib/routing.js';
+
+    export let target = $currentView;
+    export let hotkey = null;
+    export let ctrl = false
+    export let alt = false;
+    export let shift = false;
+
+    function click() {
+        if (typeof target === 'string') {
+            $currentView = target;
+        }
+        else if (typeof target === 'function') {
+            target();
+        }
+        else {
+            throw(`Link target is not a string or a function: ${target}`)
+        }
+    }
+
+
+    function handleHotkey(event) {
+        if (!hotkey) return;
+        if (ctrl && !event.ctrlKey) return;
+        if (alt && !event.altKey) return;
+        if (shift && !event.shiftKey) return;
+
+        if (event.code === hotkey) click();
+        if (hotkey === 'Enter' && event.code === 'NumpadEnter') click();
+    }
+</script>
+
+
+<svelte:window on:keydown={handleHotkey} />
+
+<a href="#" on:click="{click}">
+    <slot></slot>
+</a>
diff --git a/src/ui/Nav.svelte b/src/ui/Nav.svelte
new file mode 100644
index 0000000..18bf721
--- /dev/null
+++ b/src/ui/Nav.svelte
@@ -0,0 +1,23 @@
+<script>
+    import Link from './Link.svelte';
+    import Icon from './Icon.svelte';
+</script>
+
+
+<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
+    <div>
+        <Link target="Home">
+            <button class="btn btn-squre btn-ghost align-middle">
+                <Icon name="home" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+
+    <div class="justify-self-end">
+        <Link target="Settings">
+            <button class="align-middle btn btn-square btn-ghost">
+                <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
+            </button>
+        </Link>
+    </div>
+</nav>
diff --git a/src/views/Approve.svelte b/src/views/Approve.svelte
index 8fade9a..02698f8 100644
--- a/src/views/Approve.svelte
+++ b/src/views/Approve.svelte
@@ -1,9 +1,8 @@
 <script>
     import { invoke } from '@tauri-apps/api/tauri';
-    import { fly } from 'svelte/transition';
-    import { expoIn } from 'svelte/easing';
 
     import { navigate } from '../lib/routing.js';
+    import Link from '../ui/Link.svelte';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
@@ -22,21 +21,7 @@
         }
     }
 
-    function deny() {
-        navigate('ShowDenied');
-    }
-
-    function handleHotkey(event) {
-        if (event.shiftKey && (event.code === 'Enter' || event.code === 'NumpadEnter')) {
-            approve();
-        }
-        else if (event.code === 'Escape') {
-            deny();
-        }
-    }
-
     var appName = null;
-    console.log(appName);
     if (appState.currentRequest.clients.length === 1) {
         let path = appState.currentRequest.clients[0].exe;
         let m = path.match(/\/([^/]+?$)|\\([^\\]+?$)/);
@@ -45,12 +30,6 @@
 </script>
 
 
-<svelte:window on:keydown={handleHotkey} />
-
-<!-- <div 
-    out:fly="{{x: '-100vw', duration: 200, easing: expoIn}}"
-    class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center"
-> -->
 <div class="flex flex-col space-y-4 p-4 m-auto max-w-max h-screen justify-center">
     <!-- <div class="p-4 rounded-box border-2 border-neutral-content"> -->
         <div class="space-y-1 mb-4">
@@ -62,19 +41,20 @@
         </div>
 
         <div class="grid grid-cols-2">
-            <button class="btn btn-error justify-self-start" on:click={deny}>
-                Deny
-                &nbsp;
-                <!-- <kbd class="kbd kbd-xs bg-error border-base-100">Esc</kbd> -->
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
-            </button>
-            <button class="btn btn-success justify-self-end" on:click={approve}>
-                Approve
-                &nbsp;
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
-                <span class="mx-0.5">+</span>
-                <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
-            </button>
+            <Link target="ShowDenied" hotkey="Escape">
+                <button class="btn btn-error justify-self-start">
+                    Deny
+                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
+                </button>
+            </Link>
+
+            <Link target="{approve}" hotkey="Enter" shift="{true}">
+                <button class="btn btn-success justify-self-end">
+                    Approve
+                    <kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
+                    <span class="mx-0.5">+</span>
+                    <kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
+                </button>
+            </Link>
         </div>
-    <!-- </div> -->
 </div>
\ No newline at end of file
diff --git a/src/views/EnterCredentials.svelte b/src/views/EnterCredentials.svelte
index 0ca5a8e..9a950d3 100644
--- a/src/views/EnterCredentials.svelte
+++ b/src/views/EnterCredentials.svelte
@@ -4,6 +4,7 @@
     import { getRootCause } from '../lib/errors.js';
 
     import { navigate } from '../lib/routing.js';
+    import Link from '../ui/Link.svelte';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
 
     export let appState;
@@ -42,18 +43,20 @@
 </script>
 
 
-{#if errorMsg}
-    <ErrorAlert>{errorMsg}</ErrorAlert>
-{/if}
 
 <form action="#" on:submit|preventDefault="{save}" class="form-control space-y-4 max-w-sm m-auto p-4 h-screen justify-center">
-        <h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
+    <h2 class="text-2xl font-bold text-center">Enter your credentials</h2>
 
-        <input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
+    {#if errorMsg}
+        <ErrorAlert bind:this="{alert}">{errorMsg}</ErrorAlert>
+    {/if}
 
-        <input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
+    <input type="text" placeholder="AWS Access Key ID" bind:value="{AccessKeyId}" class="input input-bordered" />
+    <input type="password" placeholder="AWS Secret Access Key" bind:value="{SecretAccessKey}" class="input input-bordered" />
+    <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
 
-        <input type="password" placeholder="Passphrase" bind:value="{passphrase}" class="input input-bordered" />
-
-        <input type="submit" class="btn btn-primary" />
+    <input type="submit" class="btn btn-primary" />
+    <Link target="Home" hotkey="Escape">
+        <button class="btn btn-sm btn-outline w-full">Cancel</button>
+    </Link>
 </form>
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index 2fe4a73..6011619 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -3,6 +3,7 @@
     import { invoke } from '@tauri-apps/api/tauri';
 
     import { navigate } from '../lib/routing.js';
+    import Nav from '../ui/Nav.svelte';
     import Icon from '../ui/Icon.svelte';
 
     export let appState;
@@ -22,34 +23,25 @@
 </script>
 
 
-<nav class="fixed top-0 grid grid-cols-2 w-full p-2">
-    <div id="nav-left flex">
-        <button class="btn btn-squre btn-ghost align-middle">
-            <Icon name="home" class="w-8 h-8 stroke-2" />
-        </button>
-    </div>
-    <div id="nav-right" class="justify-self-end">
-        <button class="align-middle btn btn-square btn-ghost">
-            <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
-        </button>
-    </div>
-</nav>
+<Nav />
 
 {#if status === 'locked'}
     <div class="flex flex-col h-screen justify-center items-center space-y-4">
         <img src="/static/padlock-closed.svg" alt="An unlocked padlock" class="w-32" />
         <h2 class="text-2xl font-bold">Creddy is locked</h2>
-        <button class="btn btn-primary" on:click={() => navigate('Unlock')}>Unlock</button>
+        <Link target="Unlock">
+            <button class="btn btn-primary">Unlock</button>
+        </Link>
     </div>
 
 {:else if status === 'unlocked'}
     <div class="flex flex-col h-screen justify-center items-center space-y-4">
         <img src="/static/padlock-open.svg" alt="An unlocked padlock" class="w-24" />
-        <h2 class="text-2xl font-bold">Creddy is ready</h2>
+        <h2 class="text-2xl font-bold">Waiting for requests</h2>
     </div>
 
 {:else if status === 'empty'}
-    <button class="btn btn-primary" on:click={() => navigate('EnterCredentials')}>
-        Enter Credentials
-    </button>
+    <Link target="EnterCredentials">
+        <button class="btn btn-primary">Enter Credentials</button>
+    </Link>
 {/if}
\ No newline at end of file
diff --git a/src/views/ShowApproved.svelte b/src/views/ShowApproved.svelte
index 623928b..0ce9f9e 100644
--- a/src/views/ShowApproved.svelte
+++ b/src/views/ShowApproved.svelte
@@ -43,7 +43,7 @@
 {#if error}
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
-            <svelte:fragment slot="message">{error}</svelte:fragment>
+            {error}
             <button 
                 slot="buttons"
                 class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
diff --git a/src/views/ShowDenied.svelte b/src/views/ShowDenied.svelte
index 59a1d8f..848e4d7 100644
--- a/src/views/ShowDenied.svelte
+++ b/src/views/ShowDenied.svelte
@@ -35,7 +35,7 @@
 {#if error}
     <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
         <ErrorAlert>
-            <svelte:fragment slot="message">{error}</svelte:fragment>
+            {error}
             <button 
                 slot="buttons"
                 class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content"
diff --git a/src/views/Unlock.svelte b/src/views/Unlock.svelte
index 2b8b2db..c012822 100644
--- a/src/views/Unlock.svelte
+++ b/src/views/Unlock.svelte
@@ -4,6 +4,7 @@
     import { navigate } from '../lib/routing.js';
     import { getRootCause } from '../lib/errors.js';
     import ErrorAlert from '../ui/ErrorAlert.svelte';
+    import Link from '../ui/Link.svelte';
 
     export let appState;
 
@@ -50,4 +51,7 @@
     <input autofocus name="password" type="password" placeholder="correct horse battery staple" bind:value="{passphrase}" class="input input-bordered" />
 
     <input type="submit" class="btn btn-primary" />
+    <Link target="Home" hotkey="Escape">
+        <button class="btn btn-outline btn-sm w-full">Cancel</button>
+    </Link>
 </form>