diff --git a/src/main.py b/src/main.py
index 1b4df1c..045d59f 100644
--- a/src/main.py
+++ b/src/main.py
@@ -3,7 +3,7 @@ import json
 
 from aiohttp.client import ClientSession
 from flask import Flask, g, session, redirect, render_template, request, url_for
-from flask_htmx import HTMX
+from flask_htmx import HTMX, make_response as htmx_reponse
 from typing import Any
 
 from .atproto import (
@@ -167,7 +167,10 @@ async def post_editor_profile():
         kv.set(user.did, json.dumps(record))
 
     if htmx:
-        return render_template("_editor_profile.html", profile=record)
+        return htmx_reponse(
+            render_template("_editor_profile.html", profile=record),
+            reswap="outerHTML",
+        )
 
     return redirect(url_for("page_editor"), 303)
 
@@ -213,6 +216,12 @@ async def post_editor_links():
         kv = KV(app, app.logger, "links_from_did")
         kv.set(user.did, json.dumps(record))
 
+    if htmx:
+        return htmx_reponse(
+            render_template("_editor_links.html", links=record["links"]),
+            reswap="outerHTML",
+        )
+
     return redirect(url_for("page_editor"), 303)
 
 
diff --git a/src/static/style.css b/src/static/style.css
index 3521f39..6625681 100644
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -5,6 +5,7 @@
     --color-background-secondary: #eee;
     --color-border: #bbb;
     --color-border-secondary: #ddd;
+    --color-success: #080;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -12,6 +13,7 @@
         --color-background-secondary: #333;
         --color-border: #555;
         --color-border-secondary: #333;
+        --color-success: #af2;
     }
 }
 
@@ -69,20 +71,20 @@ input[type="submit"] {
     padding: 0.25em;
 }
 
-input[type="submit"]:last-child {
+button.submit:last-of-type,
+input[type="submit"]:last-of-type {
     margin-top: 1em;
 }
 
-label:has(input) {
+editor-label {
     display: block;
-    margin-top: 0.25em;
 }
 
-label:has(input):has(span) input {
-    display: block;
+editor-label + editor-label {
+    margin-top: 0.25em;
 }
 
-label:has(input):has(span) span {
+editor-label .label {
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
@@ -166,12 +168,29 @@ still-building p {
 }
 
 .htmx-indicator {
-    background: yellowgreen;
-    height: 2px;
+    --height: 2px;
+    height: var(--height);
+    margin: 2px 0;
+    opacity: 0;
+    visibility: none;
+}
+
+.htmx-request .progress {
+    animation: progress-bar 0.5s linear;
+    animation-fill-mode: both;
+    background: var(--color-success);
+    border-radius: calc(var(--height) / 2);
+    display: block;
+    height: var(--height);
 }
 
-.htmx-request .htmx-indicator {
-    display: block;
+@keyframes progress-bar {
+    0% {
+        width: 25%;
+    }
+    100% {
+        width: 100%;
+    }
 }
 
 form[hx-post] {
diff --git a/src/templates/_editor_links.html b/src/templates/_editor_links.html
new file mode 100644
index 0000000..884e3bd
--- /dev/null
+++ b/src/templates/_editor_links.html
@@ -0,0 +1,81 @@
+<div id="editor-links-container" x-data="{ links: {{ links }}, linksChanged: false }">
+  <div>
+    <h2 style="display: inline-block;">links</h2>
+    <template x-if="linksChanged">
+      <span class="alert">You have unsaved changes!</span>
+    </template>
+  </div>
+
+  <form
+    method="post"
+    action="/editor/links"
+    hx-post="/editor/links"
+    hx-target="#editor-links-container"
+    @change="linksChanged = true"
+  >
+    <input type="submit" value="save links" />
+    {% include "_htmx_indicator.html" %}
+
+    <div x-sort x-sort:config="{ handle: '[x-sort\\:handle]' }">
+      <template x-for="(link, index) in links">
+        <link-editor-item x-data="{ editing: !link.href }" x-sort:item="link.href">
+          <link-editor-header>
+            <div class="static link-item" :style="'color: ' + link.backgroundColor">
+              <span class="link-item-title" x-text="link.title"></span>
+              <span class="link-item-detail" x-show="link.subtitle" x-text="link.subtitle"></span>
+            </div>
+            <link-editor-drag-handle x-sort:handle>⠿</link-editor-drag-handle>
+          </link-editor-header>
+          <div x-show="!editing">
+            <link-editor-buttons>
+              <button type="button" @click="editing = true">edit</button>
+              <button type="button" @click="if (confirm('delete ' + link.title + '?')) links.splice(index, 1)">delete</button>
+            </link-editor-buttons>
+          </div>
+          <div x-show="editing">
+            <editor-label>
+              <label>
+                <span class="label">URL</span>
+                <input type="text" name="link-href" x-model="link.href" required />
+              </label>
+            </editor-label>
+            <editor-label>
+              <label>
+                <span class="label">Title</span>
+                <input type="text" name="link-title" x-model="link.title" required />
+              </label>
+            </editor-label>
+            <editor-label>
+              <label>
+                <span class="label">Subtitle</span>
+                <input type="text" name="link-subtitle" x-model="link.subtitle" />
+              </label>
+            </editor-label>
+            <editor-label>
+              <label>
+                <span class="label">Background color</span>
+                <input type="color" name="link-background-color" x-model="link.backgroundColor" required />
+              </label>
+            </editor-label>
+            <button type="button" class="submit" @click="editing = false">close</button>
+          </div>
+        </link-editor-item>
+      </template>
+    </div>
+
+    <template x-if="links.length === 0">
+      <p>
+        Nothing here! Add your first link, then the second, then...
+        You can always delete and sort them.
+      </p>
+    </template>
+
+    <button type="button" @click="links.push({ backgroundColor: '#A1D87E' })" style="display: block; margin-top: 1em;">
+      add link
+    </button>
+
+    <input type="submit" value="save links" />
+    {% include "_htmx_indicator.html" %}
+  </form>
+  <!-- #editor-links-container -->
+</div>
diff --git a/src/templates/_editor_profile.html b/src/templates/_editor_profile.html
index 650b57c..b064125 100644
--- a/src/templates/_editor_profile.html
+++ b/src/templates/_editor_profile.html
@@ -1,20 +1,22 @@
-<form action="/editor/profile" method="post" hx-post="/editor/profile" hx-swap="outerHTML">
-  <label>
-    <span>Display name</span>
-    <input type="text" name="displayName" value="{{ profile.displayName }}" required />
-  </label>
-  <label>
-    <span>Description</span>
-    <input type="text" name="description" value="{{ profile.description }}" />
-  </label>
+<form method="post" action="/editor/profile" hx-post="/editor/profile">
+  <editor-label>
+    <label>
+      <span class="label">Display name</span>
+      <input type="text" name="displayName" value="{{ profile.displayName }}" required />
+    </label>
+  </editor-label>
+  <editor-label>
+    <label>
+      <span class="label">Description</span>
+      <input type="text" name="description" value="{{ profile.description }}" />
+    </label>
+  </editor-label>
   {% if profile_from_bluesky %}
   <p>
     <span class="faded caption">Profile was fetched from Bluesky. On save it will use an independent, ligo.at only copy.</span>
   </p>
   {% endif %}
-  <label>
-    <input type="submit" value="save profile">
-  </label>
-  <div class="htmx-indicator"></div>
+  <input type="submit" value="save profile">
+  {% include "_htmx_indicator.html" %}
+  <!-- /editor/profile -->
 </form>
-<!-- /editor/profile -->
diff --git a/src/templates/_htmx_indicator.html b/src/templates/_htmx_indicator.html
new file mode 100644
index 0000000..d2f831b
--- /dev/null
+++ b/src/templates/_htmx_indicator.html
@@ -0,0 +1,3 @@
+<div class="htmx-indicator">
+  <span class="progress"></span>
+</div>
diff --git a/src/templates/editor.html b/src/templates/editor.html
index 477ffa2..7561a83 100644
--- a/src/templates/editor.html
+++ b/src/templates/editor.html
@@ -15,7 +15,7 @@
     <script defer src="{{ url_for('static', filename='alpine.3.15.0.min.js') }}"></script>
   </head>
   <body>
-    <div class="wrapper editor" x-data="{ links: {{ links }}, linksChanged: false }">
+    <div class="wrapper editor">
       <header>
         <h1>ligo.at</h1>
         <span class="tagline">edit your profile & links</span>
@@ -36,73 +36,11 @@
       <h2>profile</h2>
       {% include "_editor_profile.html" %}
 
-      <div>
-        <h2 style="display: inline-block;">links</h2>
-        <template x-if="linksChanged">
-          <span class="alert">You have unsaved changes!</span>
-        </template>
-      </div>
-
       <noscript>
         JavaScript is needed for a better experience configuring the links.
       </noscript>
 
-      <form action="/editor/links" method="post" @change="linksChanged = true">
-        <input type="submit" value="save links" />
-
-        <div x-sort x-sort:config="{ handle: '[x-sort\\:handle]' }">
-          <template x-for="(link, index) in links">
-            <link-editor-item x-data="{ editing: !link.href }" x-sort:item="link.href">
-              <link-editor-header>
-                <div class="static link-item" :style="'color: ' + link.backgroundColor">
-                  <span class="link-item-title" x-text="link.title"></span>
-                  <span class="link-item-detail" x-show="link.subtitle" x-text="link.subtitle"></span>
-                </div>
-                <link-editor-drag-handle x-sort:handle>⠿</link-editor-drag-handle>
-              </link-editor-header>
-              <div x-show="!editing">
-                <link-editor-buttons>
-                  <button type="button" @click="editing = true">edit</button>
-                  <button type="button" @click="if (confirm('delete ' + link.title + '?')) links.splice(index, 1)">delete</button>
-                </link-editor-buttons>
-              </div>
-              <div x-show="editing">
-                <label>
-                  <span>URL</span>
-                  <input type="text" name="link-href" x-model="link.href" required />
-                </label>
-                <label>
-                  <span>Title</span>
-                  <input type="text" name="link-title" x-model="link.title" required />
-                </label>
-                <label>
-                  <span>Subtitle</span>
-                  <input type="text" name="link-subtitle" x-model="link.subtitle" />
-                </label>
-                <label>
-                  <span>Background color</span>
-                  <input type="color" name="link-background-color" x-model="link.backgroundColor" required />
-                </label>
-                <button type="button" @click="editing = false" style="margin-top: 1em;">close</button>
-              </div>
-            </link-editor-item>
-          </template>
-        </div>
-
-        <template x-if="links.length === 0">
-          <p>
-            Nothing here! Add your first link, then the second, then...
-            You can always delete and sort them.
-          </p>
-        </template>
-
-        <button type="button" @click="links.push({ backgroundColor: '#A1D87E' })" style="display: block; margin-top: 1em;">
-          add link
-        </button>
-
-        <input type="submit" value="save links" />
-      </form>
-      <!-- /editor/links -->
+      {% include "_editor_links.html" %}
 
       <footer>
         <p>