diff --git a/static/img/xLightningPub.png b/static/img/xLightningPub.png
new file mode 100644
index 00000000..1cbc35de
Binary files /dev/null and b/static/img/xLightningPub.png differ
diff --git a/static/index.html b/static/index.html
index 4b684f1e..31144cd4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -38,23 +38,27 @@
           <input type="text" placeholder="Nodey McNodeFace" value="" style="width: 100%" id="nodeName" />
         </div>
 
-        <div class="input-group" style="margin-top: 38px">
-          <span>If you want to use a specific Nostr relay, enter it now:</span>
-          <input type="text" placeholder="wss://relay.lightning.pub" style="width: 100%" id="relayUrl" />
-        </div>
-
         <div class="input-group" style="margin-top: 20px">
-          <span>Avatar URL (shown in wallet):</span>
-          <input type="text" placeholder="https://example.com/avatar.png" style="width: 100%" id="avatarUrl" />
+          <span>Avatar (shown in wallet):</span>
+          <div style="display:flex; align-items:center; gap:12px; width:100%;">
+            <img id="avatarPreview" src="" alt="avatar" style="width:56px;height:56px;border-radius:6px;object-fit:cover;box-shadow:0 0 2px rgba(0,0,0,1);" />
+            <input type="text" placeholder="" style="flex:1" id="avatarUrl" />
+          </div>
         </div>
 
-        <div class="checkbox" style="margin-top: 12px">
-          <input type="checkbox" id="customCheckbox" />
-          <div class="checkbox-shape"></div>
-          <label for="customCheckbox">
-            Use the default managed relay service and auto-pay 1000 sats
-            per month to support developers
-          </label>
+        <div class="input-group" style="margin-top: 28px">
+          <span>If you want to use a specific Nostr relay, enter it now:</span>
+          <div style="display:flex; flex-direction: column; gap:10px; width:100%;">
+            <input type="text" placeholder="wss://relay.lightning.pub" style="width: 100%" id="relayUrl" />
+            <div class="checkbox" style="margin-top: 0">
+              <input type="checkbox" id="customCheckbox" />
+              <div class="checkbox-shape"></div>
+              <label for="customCheckbox">
+                Use the default managed relay service and auto-pay 1000 sats
+                per month to support developers
+              </label>
+            </div>
+          </div>
         </div>
 
         <div>
diff --git a/static/js/wizard.js b/static/js/wizard.js
index c9717150..fdc6f4ae 100644
--- a/static/js/wizard.js
+++ b/static/js/wizard.js
@@ -10,6 +10,7 @@ $(() => {
     const nodeNameInput = $("#nodeName");
     const relayUrlInput = $("#relayUrl");
     const avatarUrlInput = $("#avatarUrl");
+    const avatarPreview = $("#avatarPreview");
     const customCheckbox = $("#customCheckbox");
     const automateLiquidityRadio = $("#automate");
     const manualLiquidityRadio = $("#manual");
@@ -130,10 +131,15 @@ $(() => {
                 } else {
                     relayUrlInput.val(state.relay_url);
                 }
-                const robo = state.app_id ? `https://robohash.org/${encodeURIComponent(state.app_id)}.png?size=256x256&set=set3` : ''
-                avatarUrlInput.attr('placeholder', robo || 'https://example.com/avatar.png')
+                const robo = state.app_id ? `https://robohash.org/${encodeURIComponent(state.app_id)}.png?size=128x128&set=set3` : ''
                 if (state.avatar_url) {
                     avatarUrlInput.val(state.avatar_url);
+                    avatarPreview.attr('src', state.avatar_url)
+                } else if (robo) {
+                    avatarPreview.attr('src', robo)
+                }
+                if (robo) {
+                    avatarUrlInput.attr('placeholder', robo)
                 }
                 syncRelayState();