diff --git a/src/components/Sidebar.ts b/src/components/Sidebar.ts
index e481bfd..545f9db 100644
--- a/src/components/Sidebar.ts
+++ b/src/components/Sidebar.ts
@@ -191,9 +191,9 @@ export default class Sidebar extends LitElement {
     }
 
     .profile-avatar {
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
+      max-width: 64px;
+      max-height: 64px;
+      border-radius: 100%;
       object-fit: cover;
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       border: 2px solid var(--color-base-300);
diff --git a/src/routes/Settings.ts b/src/routes/Settings.ts
index ec13bab..56c01d8 100644
--- a/src/routes/Settings.ts
+++ b/src/routes/Settings.ts
@@ -1,9 +1,11 @@
 import { getSigner, getUserProfile, ndk } from '@/ndk';
+// @ts-ignore
 import defaultAvatar from '@assets/default-avatar.png';
 import type { ArxInputChangeEvent } from '@components/General/Input';
 import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 
 import '@components/Breadcrumbs';
@@ -27,8 +29,8 @@ export class EveSettings extends LitElement {
     }
 
     .profile-image {
-      width: 140px;
-      height: 140px;
+      max-width: 140px;
+      max-height: 140px;
       border-radius: 50%;
       object-fit: cover;
       border: calc(var(--border) * 2) solid var(--color-base-100);
@@ -155,12 +157,12 @@ export class EveSettings extends LitElement {
         </arx-fieldset>
         <arx-fieldset legend="Profile">
           ${when(
-            this.profile!.picture,
+            this.profile?.picture,
             () => html`
               <div class="profile-header">
                 <img
                   class="profile-image"
-                  src=${this.profile!.picture}
+                  src=${ifDefined(this.profile?.picture)}
                   alt="Profile"
                   @error=${(e: Event) => {
                     (e.target as HTMLImageElement).src = defaultAvatar;
@@ -174,7 +176,7 @@ export class EveSettings extends LitElement {
             label="Name"
             type="text"
             name="name"
-            .value=${this.profile!.name}
+            .value=${this.profile?.name ?? ''}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
             placeholder="Your display name"
           ></arx-input>
@@ -183,7 +185,7 @@ export class EveSettings extends LitElement {
             label="Profile Image URL"
             type="text"
             name="image"
-            .value=${this.profile!.picture}
+            .value=${this.profile?.picture ?? ''}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
@@ -192,7 +194,7 @@ export class EveSettings extends LitElement {
             label="Banner URL"
             type="text"
             name="banner"
-            .value=${this.profile!.banner}
+            .value=${this.profile?.banner ?? ''}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
@@ -215,8 +217,8 @@ export class EveSettings extends LitElement {
           <arx-relay-logs .logs=${this.relayStatus.logs}></arx-relay-logs>
         </arx-fieldset>
       </arx-card>
-      <arx-card >
-        <arx-fieldset  legend="Reset">
+      <arx-card>
+        <arx-fieldset legend="Reset">
           <p>
             This will delete all the data stored on this device, and you will be sent back to the setup
             screen.