diff --git a/src/lib/components/InputProfilePicture.svelte b/src/lib/components/InputProfilePicture.svelte
index c787c2a7..3bef0b58 100644
--- a/src/lib/components/InputProfilePicture.svelte
+++ b/src/lib/components/InputProfilePicture.svelte
@@ -62,7 +62,8 @@
     for={id}
     aria-label="Drag and drop files here."
     style="background-image: url({url});"
-    class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-dashed border-base-content bg-base-300 bg-cover bg-center transition-all"
+    class="relative flex h-24 w-24 shrink-0 cursor-pointer items-center justify-center rounded-full border-2 border-solid border-base-content bg-base-300 bg-cover bg-center transition-all"
+    class:transparent={!url}
     class:border-primary={active}
     on:dragenter|preventDefault|stopPropagation={onDragEnter}
     on:dragover|preventDefault|stopPropagation={onDragOver}
@@ -70,9 +71,9 @@
     on:drop|preventDefault|stopPropagation={onDrop}>
     <div
       class="absolute right-0 top-0 h-5 w-5 overflow-hidden rounded-full bg-primary"
-      class:bg-error={file}
-      class:bg-primary={!file}>
-      {#if file}
+      class:bg-error={url}
+      class:bg-primary={!url}>
+      {#if url}
         <span
           role="button"
           tabindex="-1"
@@ -84,7 +85,7 @@
         <Icon icon="add-circle" class="scale-150 !bg-base-300" />
       {/if}
     </div>
-    {#if !file}
+    {#if !url}
       <Icon icon="gallery-send" size={7} />
     {/if}
   </label>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index 27bc338d..d9c206fa 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -14,12 +14,12 @@
       <p class="text-center text-2xl">Thanks for using</p>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <div class="card2 flex flex-col gap-2 text-center shadow-2xl">
+        <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
           <h3 class="text-2xl sm:h-12">Support development</h3>
           <p class="sm:h-16">Funds will be used to support development.</p>
           <Button class="btn btn-primary">Zap the Developer</Button>
         </div>
-        <div class="card2 flex flex-col gap-2 text-center shadow-2xl">
+        <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
           <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know by filing an issue.</p>
           <Link class="btn btn-primary" href="/home/97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322">
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index f968c1e1..34d7f64b 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -20,13 +20,19 @@
   const displayNip05 = (nip05: string) =>
     nip05?.startsWith("_@") ? last(nip05.split("@")) : nip05
 
+  const cloneProfile = () => ({...(getProfile($pubkey!) || makeProfile())})
+
   const toggleEdit = () => {
     editing = !editing
+
+    if (!editing) {
+      profile = cloneProfile()
+    }
   }
 
   const stopEdit = () => {
     editing = false
-    profile = getProfile($pubkey!) || makeProfile()
+    profile = cloneProfile()
   }
 
   const saveEdit = () => {
@@ -41,7 +47,7 @@
 
   let file: File
   let editing = false
-  let profile = getProfile($pubkey!) || makeProfile()
+  let profile = cloneProfile()
 </script>
 
 <div class="content column gap-4">