diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index 343f338f..2e806146 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -335,13 +335,19 @@ a:hover {
   border-color: var(--amber);
   background: rgba(250, 179, 135, 0.05);
 }
-/* The spinner is a transparent border ring with two adjacent sides
-   coloured amber, rotated by a CSS animation — looks like an
-   orbiting arc around the icon. Override the icon's overflow:hidden
-   so the ring can sit just outside the square; it composes naturally
-   with the mauve selected-ring (selected + running shows both). */
+/* The spinner is a faint amber ring with one brighter arc on top
+   that rotates around the icon — classic CSS spinner shape. The
+   previous version coloured two adjacent border sides amber, which
+   rendered as a rotating L-corner ("_|") rather than a smooth
+   orbiting arc (mara on #804). Faint-ring + bright-arc reads
+   unambiguously as a loading spinner.
+
+   Override the icon's overflow:hidden so the ring can sit just
+   outside the square; it composes naturally with the mauve
+   selected-ring (selected + running shows both). */
 @keyframes container-icon-spin {
-  to { transform: rotate(360deg); }
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
 }
 .container-row.pending-running > .container-icon {
   overflow: visible;
@@ -351,9 +357,8 @@ a:hover {
   position: absolute;
   inset: -4px;
   border-radius: 10px;
-  border: 2px solid transparent;
+  border: 2px solid rgba(250, 179, 135, 0.2);
   border-top-color: var(--amber);
-  border-right-color: var(--amber);
   animation: container-icon-spin 1s linear infinite;
   pointer-events: none;
 }