diff --git a/docker/frontend/src/ui/TopBar.tsx b/docker/frontend/src/ui/TopBar.tsx
index 93c2281..b39829a 100644
--- a/docker/frontend/src/ui/TopBar.tsx
+++ b/docker/frontend/src/ui/TopBar.tsx
@@ -66,10 +66,10 @@ export function TopBar({
       </a>
       <b className="page-name">{t('nav.studio')}</b>
       <span className="recipe-name">{recipeName}</span>
-      <span className="spacer" />
 
       {/* Both arrows are one icon wide, so the pair reads as one control: the
-          counter-clockwise arrow steps back, the clockwise one forward. */}
+          counter-clockwise arrow steps back, the clockwise one forward. They sit
+          with the name they would take back — after the mark and the preset. */}
       <button
         type="button"
         className="btn ghost icon"
@@ -92,6 +92,8 @@ export function TopBar({
       >
         ↻
       </button>
+      <span className="spacer" />
+
       <button type="button" className="btn ghost" onClick={onReset}>{t('act.reset')}</button>
       <button
         type="button"