diff --git a/src-tauri/src/credentials/record.rs b/src-tauri/src/credentials/record.rs
index e7d1745..96b837c 100644
--- a/src-tauri/src/credentials/record.rs
+++ b/src-tauri/src/credentials/record.rs
@@ -21,6 +21,7 @@ use super::{
     Credential,
     Crypto,
     PersistentCredential,
+    SshKey,
 };
 
 
@@ -48,6 +49,7 @@ impl CredentialRecord {
     pub async fn save(&self, crypto: &Crypto, pool: &SqlitePool) -> Result<(), SaveCredentialsError> {
         let type_name = match &self.credential {
             Credential::AwsBase(_) => AwsBaseCredential::type_name(),
+            Credential::Ssh(_) => SshKey::type_name(),
             _ => return Err(SaveCredentialsError::NotPersistent),
         };
 
@@ -82,6 +84,7 @@ impl CredentialRecord {
         // save credential details to child table
         match &self.credential {
             Credential::AwsBase(b) => b.save_details(&self.id, crypto, &mut txn).await,
+            Credential::Ssh(s) => s.save_details(&self.id, crypto, &mut txn).await,
             _ => Err(SaveCredentialsError::NotPersistent),
         }?;
 
@@ -147,6 +150,11 @@ impl CredentialRecord {
                 .ok_or(LoadCredentialsError::InvalidData)?;
             records.push(Self::from_parts(parent, credential));
         }
+        for (id, credential) in SshKey::list(crypto, pool).await? {
+            let parent = parent_map.remove(&id)
+                .ok_or(LoadCredentialsError::InvalidData)?;
+            records.push(Self::from_parts(parent, credential));
+        }
 
         Ok(records)
     }
diff --git a/src/lib/errors.js b/src/lib/errors.js
index 13eef7e..a42cb59 100644
--- a/src/lib/errors.js
+++ b/src/lib/errors.js
@@ -6,3 +6,12 @@ export function getRootCause(error) {
         return error;
     }
 }
+
+
+export function fullMessage(error) {
+    let msg = error?.msg ? error.msg : error;
+    if (error.source) {
+        msg = `${msg}: ${fullMessage(error.source)}`;
+    }
+    return msg
+}
diff --git a/src/ui/ErrorAlert.svelte b/src/ui/ErrorAlert.svelte
index aa09adb..6465f71 100644
--- a/src/ui/ErrorAlert.svelte
+++ b/src/ui/ErrorAlert.svelte
@@ -2,6 +2,9 @@
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
 
+    import { fullMessage } from '../lib/errors.js';
+
+
     let extraClasses = "";
     export {extraClasses as class};
     export let slideDuration = 150;
@@ -78,7 +81,7 @@
     <div transition:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
         <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 {error}>{error.msg || error}</slot>
+            <slot {error}>{fullMessage(error)}</slot>
         </span>
 
         {#if $$slots.buttons}
diff --git a/src/ui/FileInput.svelte b/src/ui/FileInput.svelte
index 8e5f659..49b2bed 100644
--- a/src/ui/FileInput.svelte
+++ b/src/ui/FileInput.svelte
@@ -1,20 +1,33 @@
 <script>
     // import { listen } from '@tauri-apps/api/event';
     import { open } from '@tauri-apps/plugin-dialog';
+    import { sep } from '@tauri-apps/api/path';
+    import { createEventDispatcher } from 'svelte';
 
     import Icon from './Icon.svelte';
 
 
     export let value = {};
     export let params = {};
+    let displayValue = value?.name || '';
+
+    const dispatch = createEventDispatcher();
 
     async function chooseFile() {
         let file = await open(params);
         if (file) {
             value = file;
+            displayValue = file.name;
+            dispatch('update', value);
         }
     }
 
+    function handleInput(evt) {
+        const segments = evt.target.value.split(sep());
+        const name = segments[segments.length - 1];
+        value = {name, path: evt.target.value};
+    }
+
     // some day, figure out drag-and-drop
     // let drag = null;
     // listen('tauri://drag', e => drag = e);
@@ -32,8 +45,9 @@
     <input 
         type="text"
         class="join-item grow input input-bordered border-l-0 bg-transparent focus:outline-none"
-        value={value?.name || ''}
-        on:input={e => value.path = e.target.value}
-        on:change on:input on:focus on:blur
+        value={displayValue}
+        on:input={handleInput}
+        on:change={() => dispatch('update', value)}
+        on:focus on:blur
     >
 </div>
diff --git a/src/views/Home.svelte b/src/views/Home.svelte
index a99c786..1aa50a9 100644
--- a/src/views/Home.svelte
+++ b/src/views/Home.svelte
@@ -36,37 +36,41 @@
 
 <div class="flex flex-col h-screen items-center justify-center p-4 space-y-4">
     <div class="grid grid-cols-2 gap-6">
-        <Link target="ManageCredentials">
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-colors">
-                <Icon name="key" class="size-12 stroke-1 stroke-primary" />
-                <h3 class="text-lg font-bold">Credentials</h3>
-                <p class="text-sm">Add, remove, and change defaults credentials.</p>
-            </div>
-        </Link>
+        <button
+            on:click={() => navigate('ManageCredentials')}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-primary hover:bg-base-200 transition-transform active:scale-[.98] transition-transform"
+        >
+            <Icon name="key" class="size-12 stroke-1 stroke-primary" />
+            <h3 class="text-lg font-bold">Credentials</h3>
+            <p class="text-sm">Add, remove, and change default credentials.</p>
+        </button>
         
-        <Link target={launchTerminal}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors">
-                <Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
-                <h3 class="text-lg font-bold">Terminal</h3>
-                <p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={launchTerminal}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-secondary hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="command-line" class="size-12 stroke-1 stroke-secondary" />
+            <h3 class="text-lg font-bold">Terminal</h3>
+            <p class="text-sm">Launch a terminal pre-configured with AWS credentials.</p>
+        </button>
 
-        <Link target={lock}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors">
-                <Icon name="shield-check" class="size-12 stroke-1 stroke-warning" />
-                <h3 class="text-lg font-bold">Lock</h3>
-                <p class="text-sm">Lock Creddy.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={lock}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-warning hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="shield-check" class="size-12 stroke-1 stroke-warning" />
+            <h3 class="text-lg font-bold">Lock</h3>
+            <p class="text-sm">Lock Creddy.</p>
+        </button>
 
-        <Link target={() => invoke('exit')}>
-            <div class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors">
-                <Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-accent" />
-                <h3 class="text-lg font-bold">Exit</h3>
-                <p class="text-sm">Close Creddy.</p>
-            </div>
-        </Link>
+        <button 
+            on:click={() => invoke('exit')}
+            class="flex flex-col items-center gap-4 h-full max-w-56 rounded-box p-4 border border-accent hover:bg-base-200 transition-colors active:scale-[.98] transition-transform"
+        >
+            <Icon name="arrow-right-start-on-rectangle" class="size-12 stroke-1 stroke-accent" />
+            <h3 class="text-lg font-bold">Exit</h3>
+            <p class="text-sm">Close Creddy.</p>
+        </button>
     </div>
 </div>
 
diff --git a/src/views/ManageCredentials.svelte b/src/views/ManageCredentials.svelte
index 29a038f..9e9a1c2 100644
--- a/src/views/ManageCredentials.svelte
+++ b/src/views/ManageCredentials.svelte
@@ -5,15 +5,17 @@
     import { invoke } from '@tauri-apps/api/core';
 
     import AwsCredential from './credentials/AwsCredential.svelte';
-    import NewSshKey from './credentials/NewSshKey.svelte';
+    import ConfirmDelete from './credentials/ConfirmDelete.svelte';
+    import SshKey from './credentials/SshKey.svelte';
+    // import NewSshKey from './credentials/NewSshKey.svelte';
+    // import EditSshKey from './credentials/EditSshKey.svelte';
     import Icon from '../ui/Icon.svelte';
     import Nav from '../ui/Nav.svelte';
 
-    let show = false;
 
     let records = null
     $: awsRecords = (records || []).filter(r => r.credential.type === 'AwsBase');
-    $: sshRecords = (records || []).filter(r => r.credential.type === 'SshKey');
+    $: sshRecords = (records || []).filter(r => r.credential.type === 'Ssh');
 
     let defaults = writable({});
     async function loadCreds() {
@@ -39,11 +41,22 @@
             id: crypto.randomUUID(),
             name: null,
             is_default: false,
-            credential: {type: 'SshKey', algorithm: '', private_key: '', public_key: '', comment: '',},
+            credential: {type: 'Ssh', algorithm: '', comment: '', private_key: '', public_key: '',},
             isNew: true,
         });
         records = records;
     }
+
+    let confirmDelete;
+    function handleDelete(evt) {
+        const record = evt.detail;
+        if (record.isNew) {
+            records = records.filter(r => r.id !== record.id);
+        }
+        else {
+            confirmDelete.confirm(record);
+        }
+    }
 </script>
 
 
@@ -59,7 +72,11 @@
 
         {#if awsRecords.length > 0}
             {#each awsRecords as record (record.id)}
-                <AwsCredential {record} {defaults} on:update={loadCreds} />
+                <AwsCredential
+                    {record} {defaults}
+                    on:update={loadCreds}
+                    on:delete={handleDelete}
+                />
             {/each}
             <button class="btn btn-primary btn-wide mx-auto" on:click={newAws}>
                 <Icon name="plus-circle-mini" class="size-5" />
@@ -83,12 +100,12 @@
 
         {#if sshRecords.length > 0}
             {#each sshRecords as record (record.id)}
-                {#if record.isNew}
-                    <NewSshKey {record} on:update={e => console.log(e)} />
-                {:else}
-                    <!-- EditSshKey -->
-                {/if}
+                <SshKey {record} on:save={loadCreds} on:delete={handleDelete} />
             {/each}
+            <button class="btn btn-primary btn-wide mx-auto" on:click={newSsh}>
+                <Icon name="plus-circle-mini" class="size-5" />
+                Add
+            </button>
         {:else if records !== null}
             <div class="flex flex-col gap-6 items-center rounded-box border-2 border-dashed border-neutral-content/30 p-6">
                 <div>You have no saved SSH keys.</div>
@@ -101,3 +118,5 @@
     </div>
 
 </div>
+
+<ConfirmDelete bind:this={confirmDelete} on:confirm={loadCreds} />
diff --git a/src/views/credentials/AwsCredential.svelte b/src/views/credentials/AwsCredential.svelte
index c4aa001..a99f98b 100644
--- a/src/views/credentials/AwsCredential.svelte
+++ b/src/views/credentials/AwsCredential.svelte
@@ -31,36 +31,11 @@
         showDetails = false;
     }
 
-    let deleteModal;
-    function conditionalDelete() {
-        if (!record.isNew) {
-            deleteModal.showModal();
-        }
-        else {
-            deleteCredential();
-        }
-    }
-
-    async function deleteCredential() {
-        try {
-            if (!record.isNew) {
-                await invoke('delete_credential', {id: record.id});
-            }
-            dispatch('update');
-        }
-        catch (e) {
-            showDetails = true;
-            // wait for showDetails to take effect and the alert to be rendered
-            window.setTimeout(() => alert.setError(e), 0);
-        }
-    }
+    
 </script>
 
 
-<div 
-    transition:slide|local={{duration: record.isNew ? 300 : 0}}
-    class="rounded-box space-y-4 bg-base-200 {record.is_default ? 'border border-accent' : ''}"
->
+<div class="rounded-box space-y-4 bg-base-200 {record.is_default ? 'border border-accent' : ''}">
     <div class="flex items-center px-6 py-4 gap-x-4">
         <h3 class="text-lg font-bold">
             {#if !record?.isNew && showDetails}
@@ -85,7 +60,7 @@
             <button
                 type="button"
                 class="btn btn-outline btn-error join-item"
-                on:click={conditionalDelete}
+                on:click={() => dispatch('delete', record)}
             >
                 <Icon name="trash" class="size-6" />
             </button>
@@ -141,20 +116,4 @@
             </div>
         </form>
     {/if}
-
-    <dialog bind:this={deleteModal} class="modal">
-        <div class="modal-box">
-            <h3 class="text-lg font-bold">Delete AWS credential "{record.name}"?</h3>
-            <div class="modal-action">
-                <form method="dialog" class="flex gap-x-4">
-                    <button class="btn btn-outline">Cancel</button>
-                    <button 
-                        autofocus
-                        class="btn btn-error"
-                        on:click={deleteCredential}
-                    >Delete</button>
-                </form>
-            </div>
-        </div>
-    </dialog>
 </div>
diff --git a/src/views/credentials/ConfirmDelete.svelte b/src/views/credentials/ConfirmDelete.svelte
new file mode 100644
index 0000000..4960626
--- /dev/null
+++ b/src/views/credentials/ConfirmDelete.svelte
@@ -0,0 +1,62 @@
+<script>
+    import { invoke } from '@tauri-apps/api/core';
+    import { createEventDispatcher } from 'svelte';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+
+    let record;
+    let modal;
+    let alert;
+
+    const dispatch = createEventDispatcher();
+
+    export function confirm(r) {
+        record = r;
+        modal.showModal();
+    }
+
+    async function deleteCredential() {
+        await invoke('delete_credential', {id: record.id})
+        // closing the modal is dependent on the previous step succeeding
+        modal.close();
+        dispatch('confirm');
+    }
+
+    function credentialDescription(record) {
+        if (record.credential.type === 'AwsBase') {
+            return 'AWS credential';
+        }
+        if (record.credential.type === 'Ssh') {
+            return 'SSH key';
+        }
+    }
+</script>
+
+<dialog bind:this={modal} class="modal">
+    <div class="modal-box space-y-6">
+        <ErrorAlert bind:this={alert} />
+        <h3 class="text-lg font-bold">
+            {#if record}
+                Delete {credentialDescription(record)} "{record.name}"?
+            {/if}
+        </h3>
+        <div class="modal-action">
+            <form method="dialog" class="flex gap-x-4">
+                <button
+                    class="btn btn-outline"
+                    on:click={() => alert.setError(null)}
+                >
+                    Cancel
+                </button>
+
+                <button
+                    autofocus
+                    class="btn btn-error"
+                    on:click|preventDefault={() => alert.run(deleteCredential)}
+                >
+                    Delete
+                </button>
+            </form>
+        </div>
+    </div>
+</dialog>
diff --git a/src/views/credentials/EditSshKey.svelte b/src/views/credentials/EditSshKey.svelte
new file mode 100644
index 0000000..5f29307
--- /dev/null
+++ b/src/views/credentials/EditSshKey.svelte
@@ -0,0 +1,85 @@
+<script>
+    import { invoke } from '@tauri-apps/api/core';
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+
+    import ErrorAlert from '../../ui/ErrorAlert.svelte';
+
+
+    export let local;
+    export let isModified;
+
+    const dispatch = createEventDispatcher();
+    let alert;
+
+    async function saveCredential() {
+        await invoke('save_credential', {record: local});
+        dispatch('save', local);
+        showDetails = false;
+    }
+
+    async function copyText(evt) {
+        const tooltip = event.currentTarget;
+        await navigator.clipboard.writeText(tooltip.dataset.copyText);
+        const prevText = tooltip.dataset.tip;
+        tooltip.dataset.tip = 'Copied!';
+        window.setTimeout(() => tooltip.dataset.tip = prevText, 2000);
+    }
+</script>
+
+
+<style>
+    .grid {
+        grid-template-columns: auto minmax(0, 1fr);
+    }
+</style>
+
+
+<form class="space-y-4" on:submit|preventDefault={() => alert.run(saveCredential)}>
+    <ErrorAlert bind:this={alert} />
+
+    <div class="grid items-baseline gap-4">
+        <span class="justify-self-end">Comment</span>
+        <input
+            type="text"
+            class="input input-bordered bg-transparent"
+            bind:value={local.credential.comment}
+        >
+
+        <span class="justify-self-end">Public key</span>
+        <div
+            class="tooltip tooltip-right"
+            data-tip="Click to copy"
+            data-copy-text={local.credential.public_key}
+            on:click={copyText}
+        >
+            <div class="cursor-pointer text-left textarea textarea-bordered bg-transparent font-mono break-all">
+                {local.credential.public_key}
+            </div>
+        </div>
+
+        <span class="justify-self-end">Private key</span>
+        <div
+            class="tooltip tooltip-right"
+            data-tip="Click to copy"
+            data-copy-text={local.credential.private_key}
+            on:click={copyText}
+        >
+            <div class="cursor-pointer text-left textarea textarea-bordered bg-transparent font-mono whitespace-pre overflow-x-auto">
+                {local.credential.private_key}
+            </div>
+        </div>
+    </div>
+
+    <div class="flex justify-end">
+        {#if isModified}
+            <button
+                transition:fade={{duration: 100}}
+                type="submit"
+                class="btn btn-primary"
+            >
+                Save
+            </button>
+        {/if}
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/views/credentials/NewSshKey.svelte b/src/views/credentials/NewSshKey.svelte
index a337c43..8e19682 100644
--- a/src/views/credentials/NewSshKey.svelte
+++ b/src/views/credentials/NewSshKey.svelte
@@ -2,12 +2,12 @@
     import { createEventDispatcher } from 'svelte';
     import { invoke } from '@tauri-apps/api/core';
     import { homeDir } from '@tauri-apps/api/path';
-    import { fade, slide } from 'svelte/transition';
+    import { fade } from 'svelte/transition';
 
     import ErrorAlert from '../../ui/ErrorAlert.svelte';
     import FileInput from '../../ui/FileInput.svelte';
-    import Icon from '../../ui/Icon.svelte';
     import PassphraseInput from '../../ui/PassphraseInput.svelte';
+    import Spinner from '../../ui/Spinner.svelte';
 
     export let record;
 
@@ -22,71 +22,59 @@
     homeDir().then(d => defaultPath = `${d}/.ssh`);
 
     let alert;
+    let saving = false;
     async function saveCredential() {
-        let key = await invoke('sshkey_from_file', {path: file.path, passphrase});
-        dispatch('update', key);
+        saving = true;
+        try {
+            let key = await invoke('sshkey_from_file', {path: file.path, passphrase});
+            const payload = {
+                id: record.id,
+                name,
+                is_default: false, // ssh keys don't care about defaults
+                credential: {type: 'Ssh', ...key},
+            };
+            await invoke('save_credential', {record: payload});
+            dispatch('save', payload);
+        }
+        finally {
+            saving = false;
+        }
     }
 
 </script>
 
 
-<div
-    transition:slide|local={{duration: 300}}
-    class="rounded-box space-y-4 bg-base-200"
->
-    <div class="flex justify-end px-6 py-4 gap-x-4">
-        <div class="join ml-auto">
-            <button
-                type="button"
-                class="btn btn-outline join-item"
-                on:click={() => showDetails = !showDetails}
-            >
-                <Icon name="pencil" class="size-6" />
-            </button>
-            <button
-                type="button"
-                class="btn btn-outline btn-error join-item"
-                on:click={() => dispatch('update')}
-            >
-                <Icon name="trash" class="size-6" />
-            </button>
-        </div>
+<form class="space-y-4" on:submit|preventDefault={alert.run(saveCredential)}>
+    <ErrorAlert bind:this={alert} />
+
+    <div class="grid grid-cols-[auto_1fr] items-center gap-4">
+        <span class="justify-self-end">Name</span>
+        <input
+            type="text"
+            class="input input-bordered bg-transparent"
+            bind:value={name}
+        >
+
+        <span class="justify-self-end">File</span>
+        <FileInput params={{defaultPath}} bind:value={file} on:update={() => name = file.name} />
+
+        <span class="justify-self-end">Passphrase</span>
+        <PassphraseInput class="bg-transparent" bind:value={passphrase} />
     </div>
 
-    {#if showDetails}
-        <form
-            transition:slide|local={{duration: 200}}
-            class=" px-6 pb-4 space-y-4"
-            on:submit|preventDefault={() => alert.run(saveCredential)}
-        >
-            <ErrorAlert bind:this={alert} />
-
-            <div class="grid grid-cols-[auto_1fr] items-center gap-4">
-                <span class="justify-self-end">Name</span>
-                <input
-                    type="text"
-                    class="input input-bordered bg-transparent"
-                    vind:value={name}
-                >
-
-                <span class="justify-self-end">File</span>
-                <FileInput bind:value={file} params={{defaultPath}} />
-
-                <span class="justify-self-end">Passphrase</span>
-                <PassphraseInput class="bg-transparent" bind:value={passphrase} />
-            </div>
-
-            <div class="flex justify-end">
-                {#if file?.path}
-                    <button
-                        transition:fade={{duration: 100}}
-                        type="submit"
-                        class="btn btn-primary"
-                    >
-                        Save
-                    </button>
+    <div class="flex justify-end">
+        {#if file?.path}
+            <button
+                transition:fade={{duration: 100}}
+                type="submit"
+                class="btn btn-primary"
+            >
+                {#if saving}
+                    <Spinner class="size-5 min-w-16" thickness="12" />
+                {:else}
+                    <span class="min-w-16">Save</span>
                 {/if}
-            </div>
-        </form>
-    {/if}
-</div>
\ No newline at end of file
+            </button>
+        {/if}
+    </div>
+</form>
\ No newline at end of file
diff --git a/src/views/credentials/SshKey.svelte b/src/views/credentials/SshKey.svelte
index e2febdf..ed474a9 100644
--- a/src/views/credentials/SshKey.svelte
+++ b/src/views/credentials/SshKey.svelte
@@ -1,46 +1,45 @@
 <script>
-    import { invoke } from '@tauri-apps/api/core';
-    import { homeDir } from '@tauri-apps/api/path';
-    import { open } from '@tauri-apps/plugin-dialog';
-    import { fade, slide } from 'svelte/transition';
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
 
-    import ErrorAlert from '../../ui/ErrorAlert.svelte';
-    import FileInput from '../../ui/FileInput.svelte';
+    import NewSshKey from './NewSshKey.svelte';
+    import EditSshKey from './EditSshKey.svelte';
     import Icon from '../../ui/Icon.svelte';
 
     export let record;
 
-    let showDetails = record.isNew ? true : false;
+    const dispatch = createEventDispatcher();
 
-    let local = JSON.parse(JSON.stringify(record));
+    function copy(obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+
+    let local = copy(record);
     $: isModified = JSON.stringify(local) !== JSON.stringify(record);
+    let showDetails = record?.isNew;
 
-    let file;
-    let passphrase;
-
-    let defaultPath = null;
-    homeDir().then(d => defaultPath = `${d}/.ssh`);
-
-    function conditionalDelete() {
-        // todo
+    function handleSave(evt) {
+        local = copy(evt.detail);
+        showDetails = false;
     }
-
-    let alert;
-    async function saveCredential() {
-        let key = await invoke('sshkey_from_file', {startDir, passphrase});
-        record.credential = {type: 'SshKey', ...key};
-        record.isNew = false; // just for now
-    }
-
 </script>
 
 
-<div
-    transition:slide|local={{duration: record.isNew ? 300 : 0}}
-    class="rounded-box space-y-4 bg-base-200"
->
+<div class="rounded-box space-y-4 bg-base-200">
     <div class="flex items-center px-6 py-4 gap-x-4">
-        <h3 class="text-lg font-bold">{record.name || ''}</h3>
+        {#if !record.isNew}
+            {#if showDetails}
+                <input 
+                    type="text"
+                    class="input input-bordered bg-transparent text-lg font-bold"
+                    bind:value={local.name}
+                >
+            {:else}
+                <h3 class="text-lg font-bold">
+                    {record.name}
+                </h3>
+            {/if}
+        {/if}
 
         <div class="join ml-auto">
             <button
@@ -53,58 +52,20 @@
             <button
                 type="button"
                 class="btn btn-outline btn-error join-item"
-                on:click={conditionalDelete}
+                on:click={() => dispatch('delete', record)}
             >
                 <Icon name="trash" class="size-6" />
             </button>
         </div>
     </div>
 
-    {#if showDetails}
-        <form
-            transition:slide|local={{duration: 200}}
-            class=" px-6 pb-4 space-y-4"
-            on:submit|preventDefault={() => alert.run(saveCredential)}
-        >
-            <ErrorAlert bind:this={alert} />
-
-            <div class="grid grid-cols-[auto_1fr] items-center gap-4">
-                {#if record.isNew}
-                    <span class="justify-self-end">File</span>
-                    <FileInput bind:value={file} params={{defaultPath}} />
-
-                    <span class="justify-self-end">Passphrase</span>
-                    <input
-                        type="text"
-                        class="input input-bordered bg-transparent"
-                        bind:value={passphrase}
-                    >
-                {:else}
-                    <span class="justify-self-end">Algorithm</span>
-                    <span class="font-mono">{record.credential.algorithm}</span>
-
-                    <span class="justify-self-end">Comment</span>
-                    <span class="font-mono">{record.credential.comment}</span>
-
-                    <span class="justify-self-end">Public key</span>
-                    <span class="font-mono">{record.credential.public_key}</span>
-
-                    <span class="justify-self-end">Private key</span>
-                    <span class="font-mono">{record.credential.private_key}</span>
-                {/if}
-            </div>
-
-            <div class="flex justify-end">
-                {#if isModified}
-                    <button
-                        transition:fade={{duration: 100}}
-                        type="submit"
-                        class="btn btn-primary"
-                    >
-                        Save
-                    </button>
-                {/if}
-            </div>
-        </form>
+    {#if record && showDetails}
+        <div transition:slide|local={{duration: 200}} class="px-6 pb-4 space-y-4">
+            {#if record.isNew}
+                <NewSshKey {record} on:save on:save={handleSave} />
+            {:else}
+                <EditSshKey bind:local={local} {isModified} on:save />
+            {/if}
+        </div>
     {/if}
-</div>
\ No newline at end of file
+</div>