diff --git a/app/javascript/flavours/glitch/styles/mastodon/forms.scss b/app/javascript/flavours/glitch/styles/mastodon/forms.scss
index b96ecca18a..5dc5f07758 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/forms.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/forms.scss
@@ -1258,31 +1258,44 @@ code {
 }
 
 .progress-tracker {
+  --circle-size: 30px;
+
   display: flex;
   align-items: center;
   padding-bottom: 30px;
   margin-bottom: 30px;
 
   li {
-    flex: 0 0 auto;
     position: relative;
-  }
 
-  .separator {
-    height: 2px;
-    background: var(--color-border-primary);
-    flex: 1 1 auto;
+    --connector-color: var(--color-border-primary);
+    --connector-thickness: 2px;
 
     &.completed {
-      background: var(--color-text-brand);
+      --connector-color: var(--color-bg-brand-base);
+    }
+
+    &:not(:last-child) {
+      flex-grow: 1;
+
+      // Connector line between circles
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        inset-inline: var(--circle-size) 0;
+        background-color: var(--connector-color);
+        height: 2px;
+        top: calc((var(--circle-size) - var(--connector-thickness)) / 2);
+      }
     }
   }
 
   .circle {
     box-sizing: border-box;
     position: relative;
-    width: 30px;
-    height: 30px;
+    width: var(--circle-size);
+    height: var(--circle-size);
     border-radius: 50%;
     border: 2px solid var(--color-border-primary);
     flex: 0 0 auto;
@@ -1303,8 +1316,9 @@ code {
     padding-top: 10px;
     text-align: center;
     width: 100px;
-    left: 50%;
-    transform: translateX(-50%);
+
+    // Center-align the label with the circle
+    transform: translateX(-33.3333%);
   }
 
   li:first-child .label {
@@ -1321,15 +1335,15 @@ code {
     transform: none;
   }
 
-  .active .circle {
-    border-color: var(--color-text-brand);
+  [aria-current='step'] .circle {
+    border-color: var(--color-bg-brand-base);
 
     &::before {
       content: '';
       width: 10px;
       height: 10px;
       border-radius: 50%;
-      background: var(--color-text-brand);
+      background: var(--color-bg-brand-base);
       position: absolute;
       left: 50%;
       top: 50%;
@@ -1338,8 +1352,9 @@ code {
   }
 
   .completed .circle {
-    border-color: var(--color-text-brand);
-    background: var(--color-text-brand);
+    color: var(--color-text-on-brand-base);
+    background: var(--color-bg-brand-base);
+    border-color: var(--color-bg-brand-base);
   }
 }