diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
index b17b7511d..1cf14a54d 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html
@@ -45,9 +45,9 @@
         <div class="interval-spacer">
           <div class="acc-to-confirmed"></div>
         </div>
-        <div class="node mined" [id]="'confirmed'" >
+        <div class="node selected" [id]="'confirmed'">
           <div class="acc-to-confirmed left" ></div>
-          <div class="shape-border mined-selected">
+          <div class="shape-border">
             <div class="shape"></div>
           </div>
           <div class="status"><span class="badge badge-success" i18n="transaction.rbf.mined">Mined</span></div>
@@ -61,7 +61,7 @@
 </div>
 } @else if (acceleratedETA) { <!-- Not yet accelerated; to be shown only in acceleration checkout -->
 } @else if (standardETA) { <!-- Accelerated -->
-  <div class="acceleration-timeline box">
+  <div class="acceleration-timeline box lower-padding">
     <div class="timeline-wrapper">
       <div class="timeline">
         <div class="intervals">
@@ -125,12 +125,12 @@
           <div class="interval-spacer">
             <div class="seen-to-acc"></div>
           </div>
-          <div class="node" [id]="'accelerated'">
+          <div class="node accelerated" [id]="'accelerated'">
             <div class="seen-to-acc left"></div>
             <div class="seen-to-acc right"></div>
-            <div  class="shape-border accelerated-selected">
+            <div  class="shape-border">
+              <div class="shape"></div>
               <div class="connector down loading"></div>
-              <div class="shape accelerating position-relative"></div>
             </div>
             <div class="time" style="margin-top: 3px;">
               <span i18n="transaction.audit.accelerated">Accelerated</span>&nbsp;<app-time *ngIf="acceleratedAt" kind="since" [time]="acceleratedAt"></app-time>
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
index e2138483c..dd815ba45 100644
--- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
+++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss
@@ -1,7 +1,10 @@
 .acceleration-timeline {
   position: relative;
   width: 100%;
-  padding: 0.5em 0 1em;
+  padding: 1em 0;
+  &.lower-padding {
+    padding: 0.5em 0 1em;
+  }
 
   &::after, &::before {
     content: '';
@@ -135,29 +138,6 @@
         left: 50%;
       }
     }
-
-    .connector {
-      position: absolute;
-      height: 88px;
-      width: 10px;
-      left: -5px;
-      top: -73px;
-      transform: translateX(120%);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A");      //     linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
-      background-size: 10px 20px;
-
-      &.down {
-        border-top-left-radius: 10px; 
-      }
-
-      &.up {
-        border-top-right-radius: 10px; 
-      }
-
-      &.loading {
-        animation: goFasterUp 0.8s infinite linear;
-      }
-    }
   }
 
   .nodes {
@@ -172,16 +152,17 @@
         margin-bottom: -8px;
         transform: translateY(-50%);
         border-radius: 50%;
-        padding: 2px;
-
+        cursor: pointer;
+        padding: 4px;
+        background: transparent;
+    
         .shape {
+          position: relative;
           width: 100%;
           height: 100%;
           border-radius: 50%;
           background: white;
-          &.accelerating {
-            animation: acceleratePulse 0.4s infinite;
-          }
+          z-index: 1;
         }
 
         &.waiting {
@@ -189,17 +170,41 @@
             background: var(--grey);
           }
         }
-
-        &.accelerated-selected {
-          .shape {
-            background: var(--tertiary);
+    
+        .connector {
+          position: absolute;
+          z-index: 0;
+          height: 88px;
+          width: 10px;
+          left: -5px;
+          top: -73px;
+          transform: translateX(120%);
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Cpath style='fill:%239339f4;' d='M 0,20 5,15 10,20 Z'/%3E%3Cpath style='fill:%23653b9c;' d='M 0,20 5,15 10,20 10,10 5,5 0,10 Z'/%3E%3Cpath style='fill:%239339f4;' d='M 0,10 5,5 10,10 10,0 0,0 Z'/%3E%3C/svg%3E%0A");      //     linear-gradient(135deg, var(--tertiary) 34%, transparent 34%),
+          background-size: 10px 20px;
+    
+          &.down {
+            border-top-left-radius: 10px;
+          }
+    
+          &.up {
+            border-top-right-radius: 10px;
+          }
+    
+          &.loading {
+            animation: goFasterUp 0.8s infinite linear;
           }
         }
+      }
+    
+      &.accelerated {
+        .shape-border {
+          animation: acceleratePulse 0.4s infinite;
+        }
+      }
 
-        &.mined-selected {
-          .shape {
-            background: var(--success);
-          }
+      &.selected {
+        .shape-border {
+          background: var(--mainnet-alt);
         }
       }