diff --git a/backend/src/api/explorer/nodes.routes.ts b/backend/src/api/explorer/nodes.routes.ts
index 3636abe2b..9d6373845 100644
--- a/backend/src/api/explorer/nodes.routes.ts
+++ b/backend/src/api/explorer/nodes.routes.ts
@@ -48,6 +48,14 @@ class NodesRoutes {
             '032850492ee61a5f7006a2fda6925e4b4ec3782f2b6de2ff0e439ef5a38c3b2470',
             '022c80bace98831c44c32fb69755f2b353434e0ee9e7fbda29507f7ef8abea1421',
             '02c3559c833e6f99f9ca05fe503e0b4e7524dea9121344edfd3e811101e0c28680',
+            '02b36a324fa2dd3af2a63ac65f241907882829bed5002b4e14171d25c219e0d470',
+            '0231b6e8f21f9f6c057f6bf8a812f79e396ee16a66ece91939a1576ce9fb9e87a5',
+            '034b6aac206bffcbd651b7ead1ab8a0991c945dfafe19ff27dcdeadc6843ebd15c',
+            '039c065f7e344acd969ebdd4a94550915b6f24e8782ae2be540bb96c8a4fcfb86b',
+            '03d9f9f4803fc75920f14dd13d83fbecc53229a65d4ee4cd2d86fdf211f7337576',
+            '0357fe48c4dece744f70865eda66e396aab5d05e09e1145cd3b7da83f11446d4cf',
+            '02bca4d642eda631f2c8659758e2a2868e518b93503f2bfcd767749c6530a10679',
+            '03f32c99c0bb9f62dae53671d1d300565773455248f34134cc02779b881561174e',
             '032c7c7819276c4f706a04df1a0f1e10a5495994a7be4c1d3d28ca766e5a2b957b',
             '025a7e38c2834dd843591a4d23d5f09cdeb77ddca85f673c2d944a14220ff14cf7',
             '0395e2731a1673ef21d7a16a727c4fc4d4c35a861c428ce2c819c53d2b81c8bd55',
@@ -60,6 +68,14 @@ class NodesRoutes {
             '039c14fdec2d958e3d14cebf657451bbd9e039196615785e82c917f274e3fb2205',
             '033589bbcb233ffc416cefd5437c7f37e9d7cb7942d405e39e72c4c846d9b37f18',
             '029293110441c6e2eacb57e1255bf6ef05c41a6a676fe474922d33c19f98a7d584',
+            '038eb09bed4532ff36d12acc1279f55cbe8d95212d19f809e057bb50de00051fba',
+            '027b7c0278366a0268e8bd0072b14539f6cb455a7bd588ae22d888bed541f65311',
+            '02f4dd78f6eda8838029b2cdbaaea6e875e2fa373cd348ee41a7c1bb177d3fca66',
+            '036b3fb692da214a3edaac5b67903b958f5ccd8712e09aa61b67ea7acfd94b40c2',
+            '023bc8915d308e0b65f8de6867f95960141372436fce3edad5cec3f364d6ac948f',
+            '0341690503ef21d0e203dddd9e62646380d0dfc32c499e055e7f698b9064d1c736',
+            '0355d573805c018a37a5b2288378d70e9b5b438f7394abd6f467cb9b47c90eeb93',
+            '0361aa68deb561a8b47b41165848edcccb98a1b56a5ea922d9d5b30a09bb7282ea',
             '0235ad0b56ed8c42c4354444c24e971c05e769ec0b5fb0ccea42880095dc02ea2c',
             '029700819a37afea630f80e6cc461f3fd3c4ace2598a21cfbbe64d1c78d0ee69a5',
             '02c2d8b2dbf87c7894af2f1d321290e2fe6db5446cd35323987cee98f06e2e0075',
@@ -76,6 +92,14 @@ class NodesRoutes {
             '0243348cb3741cfe2d8485fa8375c29c7bc7cbb67577c363cb6987a5e5fd0052cc',
             '02cb73e631af44bee600d80f8488a9194c9dc5c7590e575c421a070d1be05bc8e9',
             '0306f55ee631aa1e2cd4d9b2bfcbc14404faec5c541cef8b2e6f779061029d09c4',
+            '030bbbd8495561a894e301fe6ba5b22f8941fc661cc0e673e0206158231d8ac130',
+            '03ee1f08e516ed083475f39c6cae4fa1eec686d004d2f105218269e27d7f2da5a4',
+            '028c378b998f476ed22d6815c170dd2a3388a43fdf791a7cff70b9997349b8447a',
+            '036f19f044d19cb1b04f14d91b6e7e5443ce337217a8c14d43861f3e86dd07bd7f',
+            '03058d61869e8b88436493648b2e3e530627edf5a0b253c285cd565c1477a5c237',
+            '0279dfedc87b47a941f1797f2c422c03aa3108914ea6b519d76537d60860535a9a',
+            '0353486b8016761e58ec8aee7305ee58d5dc66b55ef5bd8cbaf49508f66d52d62e',
+            '03df5db8eccfabcae47ff15553cfdecb2d3f56979f43a0c3578f28d056b5e35104',
             '03ddab321b760433cbf561b615ef62ac7d318630c5f51d523aaf5395b90b751956',
             '033d92c7bfd213ef1b34c90e985fb5dc77f9ec2409d391492484e57a44c4aca1de',
             '02ad010dda54253c1eb9efe38b0760657a3b43ecad62198c359c051c9d99d45781',
@@ -88,6 +112,14 @@ class NodesRoutes {
             '038310e3a786340f2bd7770704c7ccfe560fd163d9a1c99d67894597419d12cbf7',
             '03e5e9d879b72c7d67ecd483bae023bd33e695bb32b981a4021260f7b9d62bc761',
             '028d16e1a0ace4c0c0a421536d8d32ce484dfe6e2f726b7b0e7c30f12a195f8cc7',
+            '0326cf9a4ca67a5b9cdffae57293dbd6f7c5113b93010dc6f6fe4af3afde1a1739',
+            '034867e16f62cebb8c2c2c22b91117c173bbece9c8a1e5bd001374a3699551cd8f',
+            '038dfb1f1b637a8c27e342ffc6f9feca20e0b47be3244e09ae78df4998e2ae83b9',
+            '03cb1cea3394d973355c11bc61c2f689f9d3e1c3db60d205f27770f5ad83200f77',
+            '03535447b592cbdb153189b3e06a455452b1011380cb3e6511a31090c15d8efc9f',
+            '028e90e9984d262ebfa3c23fb3f335a2ae061a0bdedee03f45f72b438d9e7d2ce3',
+            '03ee0176289dc4a6111fa5ef22eed5273758c420fbe58cc1d2d76def75dd7e640c',
+            '0370b2cd9f0eaf436d5c25c93fb39210d8cc06b31f688fc2f54418aabe394aed79',
             '02ff690d06c187ab994bf83c5a2114fe5bf50112c2c817af0f788f736be9fa2070',
             '02a9f570c51a2526a5ee85802e88f9281bed771eb66a0c8a7d898430dd5d0eae45',
             '038c3de773255d3bd7a50e31e58d423baac5c90826a74d75e64b74c95475de1097',
@@ -104,6 +136,14 @@ class NodesRoutes {
             '03229ab4b7f692753e094b93df90530150680f86b535b5183b0cffd75b3df583fc',
             '03a696eb7acde991c1be97a58a9daef416659539ae462b897f5e9ae361f990228e',
             '0248bf26cf3a63ab8870f34dc0ec9e6c8c6288cdba96ba3f026f34ec0f13ac4055',
+            '021b28ecdd782fd909705d6be354db268977b1a2ac5a5275186fc19e08bb8fca93',
+            '031bec1fbd8eb7fe94d2bda108c9c3cc8c22ecfc1c3a5c11d36f5881b01b4a81a6',
+            '03879c4f827a3188574d5757e002f574265a966d70aea942169785b31369b067d5',
+            '0228d4b5a4fd73a03967b76f8b8cb37b9d0b6e7039126a9397bb732c15bed78e9b',
+            '03f58dbb629f4427f5a1dbc02e6a7ec79345fdf13a0e4163d4f3b7aea2539cf095',
+            '021cdcb8123aa670cdfc9f43909dbb297363c093883409e9e7fc82e7267f7c72bd',
+            '02f2aa2c2b7b432a70dc4d0b04afa19d48715ed3b90594d49c1c8744f2e9ebb030',
+            '03709a02fb3ab4857689a8ea0bd489a6ab6f56f8a397be578bc6d5ad22efbe3756',
             '03fbc17549ec667bccf397ababbcb4cdc0e3394345e4773079ab2774612ec9be61',
             '03da9a8623241ccf95f19cd645c6cecd4019ac91570e976eb0a128bebbc4d8a437',
             '03ca5340cf85cb2e7cf076e489f785410838de174e40be62723e8a60972ad75144',
@@ -116,6 +156,14 @@ class NodesRoutes {
             '02b6b1640fe029e304c216951af9fbefdb23b0bdc9baaf327540d31b6107841fdf',
             '03694289827203a5b3156d753071ddd5bf92e371f5a462943f9555eef6d2d6606c',
             '0283d850db7c3e8ea7cc9c4abc7afaab12bbdf72b677dcba1d608350d2537d7d43',
+            '03b4dda7878d3b7b71ecd6d4738322c7f9a9c1fb583374d2724f4ccc4947f37570',
+            '0279a35f05b5acf159429549e56fd426685c4fec191431c58738968bbc77a39f25',
+            '03cb102d796ddcf08610cd03fae8b7a1df69ff48e9e8a152af315f9edf71762eb8',
+            '036b89526f4d5ac4c317f4fd23cb9f8e4ad844498bc7950a41114d060101d995d4',
+            '0313eade145959d7036db009fd5b0bf1947a739c7c3c790b491ec9161b94e6ad1e',
+            '02b670ca4c4bb2c5ea89c3b691da98a194cfc48fcd5c072df02a20290bddd60610',
+            '02a9196d5e08598211397a83cf013a5962b84bd61198abfdd204dff987e54f7a0d',
+            '036d015cd2f486fb38348182980b7e596e6c9733873102ea126fed7b4152be03b8',
             '02521287789f851268a39c9eccc9d6180d2c614315b583c9e6ae0addbd6d79df06',
             '0258c2a7b7f8af2585b4411b1ec945f70988f30412bb1df179de941f14d0b1bc3e',
             '03c3389ff1a896f84d921ed01a19fc99c6724ce8dc4b960cd3b7b2362b62cd60d7',
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 51509309e..7a23e7556 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -7,6 +7,7 @@ import { MempoolBlockViewComponent } from './components/mempool-block-view/mempo
 import { ClockComponent } from './components/clock/clock.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { AddressGroupComponent } from './components/address-group/address-group.component';
+import { TrackerComponent } from './components/tracker/tracker.component';
 import { AccelerateCheckout } from './components/accelerate-checkout/accelerate-checkout.component';
 
 const browserWindow = window || {};
@@ -107,12 +108,8 @@ let routes: Routes = [
     data: { preload: true },
   },
   {
-    path: 'accelerate-checkout',
-    children: [],
-    component: AccelerateCheckout,
-    data: {
-      networkSpecific: true,
-    }
+    path: 'tracker/:id',
+    component: TrackerComponent,
   },
   {
     path: 'wallet',
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
index f19419aa8..28e0a5832 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html
@@ -100,4 +100,4 @@
     </div>
   }
 
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
index 395b14d25..315bdbbd2 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss
@@ -1,3 +1,9 @@
+.close-button {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
 .estimating {
   color: var(--green)
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
index 1576c173b..0aef93814 100644
--- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
+++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
 import { Subscription, tap, of, catchError } from 'rxjs';
 import { WebsocketService } from '../../services/websocket.service';
 import { ServicesApiServices } from '../../services/services-api.service';
@@ -231,4 +231,7 @@ export class AccelerateCheckout implements OnInit, OnDestroy {
     this.showCheckoutPage = false
     this.choosenOption = 'wait';
   }
+  closeModal(): void {
+    this.close.emit();
+  }
 }
diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
index 5acd77d5d..f2c082fc8 100644
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -58,7 +58,7 @@ export class AccelerationsListComponent implements OnInit {
               }
             }
             for (const acc of accelerations) {
-              acc.boost = acc.boostCost != null ? acc.boostCost : (acc.feePaid - acc.baseFee - acc.vsizeFee);
+              acc.boost = acc.boostCost != null ? acc.boostCost : acc.bidBoost;
             }
             if (this.widget) {
               return of(accelerations.slice(0, 6));
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index 59082d5c5..269fdab42 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -124,13 +124,13 @@
 
 #arrow-up {
   position: relative;
-  left: 30px;
-  top: 140px;
+  left: calc(var(--block-size) * 0.6);
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .flashing {
diff --git a/frontend/src/app/components/clockchain/clockchain.component.ts b/frontend/src/app/components/clockchain/clockchain.component.ts
index 6cb29bcd9..c17b1e0ae 100644
--- a/frontend/src/app/components/clockchain/clockchain.component.ts
+++ b/frontend/src/app/components/clockchain/clockchain.component.ts
@@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
 export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width: number = 300;
   @Input() height: number = 60;
-  @Input() mode: 'mempool' | 'mined';
+  @Input() mode: 'mempool' | 'mined' | 'none';
   @Input() index: number = 0;
 
   mempoolBlocks: number = 3;
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 98b148f26..aa2043af2 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -51,7 +51,7 @@
         </div>
       </ng-template>
     </div>
-    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
+    <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
   </div>
 </ng-container>
 
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index dada75603..140d83908 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -113,13 +113,13 @@
 
 #arrow-up {
   position: relative;
-  right: 75px;
-  top: 140px;
+  right: calc(var(--block-size) * 0.6);
+  top: calc(var(--block-size) * 1.12);
   width: 0;
   height: 0;
-  border-left: 35px solid transparent;
-  border-right: 35px solid transparent;
-  border-bottom: 35px solid #FFF;
+  border-left: calc(var(--block-size) * 0.3) solid transparent;
+  border-right: calc(var(--block-size) * 0.3) solid transparent;
+  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
 }
 
 .blockLink {
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index 80d77427b..f403eac71 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   tabHidden = false;
   feeRounding = '1.0-0';
 
+  maxArrowPosition = 0;
   rightPosition = 0;
   transition = 'background 2s, right 2s, transform 1s';
 
@@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     if (blocks.length) {
       blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
     }
+    if (this.count) {
+      this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    } else {
+      this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
+    }
     return blocks;
   }
 
@@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
     } else if (this.markIndex > -1) {
       clearTimeout(this.resetTransitionTimeout);
       this.transition = 'inherit';
-      this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
+      this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
       this.arrowVisible = true;
 
       this.resetTransitionTimeout = window.setTimeout(() => {
@@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
         }
       }
     }
+    this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
   }
 
   mountEmptyBlocks() {
diff --git a/frontend/src/app/components/tracker/tracker-bar.component.html b/frontend/src/app/components/tracker/tracker-bar.component.html
new file mode 100644
index 000000000..c777717b0
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker-bar.component.html
@@ -0,0 +1,11 @@
+<div class="tracker-bar" [class.transitions]="transitionsEnabled">
+  <div class="stage {{ stages.waiting.state }}">Sent</div>
+  <div class="divider left-{{ stages.waiting.state }} right-{{ stages.pending.state }}"></div>
+  <div class="stage {{ stages.pending.state }}">Pending</div>
+  <div class="divider left-{{ stages.pending.state }} right-{{ stages.soon.state }}"></div>
+  <div class="stage {{ stages.soon.state }}">Soon</div>
+  <div class="divider left-{{ stages.soon.state }} right-{{ stages.next.state }}"></div>
+  <div class="stage {{ stages.next.state }}">Next block</div>
+  <div class="divider left-{{ stages.next.state }} right-{{ stages.confirmed.state }}"></div>
+  <div class="stage {{ stages.confirmed.state }}">Confirmed</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker-bar.component.scss b/frontend/src/app/components/tracker/tracker-bar.component.scss
new file mode 100644
index 000000000..4607f9609
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker-bar.component.scss
@@ -0,0 +1,136 @@
+.tracker-bar {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  --div-left-color: var(--box-bg);
+  --div-right-color: var(--box-bg);
+  --stage-color: var(--box-bg);
+
+  font-size: clamp(5px, 2.5vw, 15px);
+  height: clamp(15px, 7.5vw, 45px);
+
+  .stage {
+    overflow: hidden;
+    border-top: solid 2px var(--stat-box-bg);
+    border-bottom: solid 2px var(--stat-box-bg);
+    background: var(--stage-color);
+    color: var(--transparent-fg);
+    padding: 1em;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-wrap: nowrap;
+    text-overflow: hidden;
+    white-space: no-break;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child {
+      border-left: solid 2px var(--stat-box-bg);
+      border-top-left-radius: 1.6em;
+      border-bottom-left-radius: 1.6em;
+      padding-left: 1.6em;
+    }
+    &:last-child {
+      border-right: solid 2px var(--stat-box-bg);
+      border-top-right-radius: 1.6em;
+      border-bottom-right-radius: 1.6em;
+    }
+    &:nth-child(4n + 3) {
+      --stage-color: var(--secondary);
+    }
+    &.done {
+      --stage-color: var(--primary);
+      color: white;
+    }
+    &.current {
+      --stage-color: var(--tertiary);
+      color: white;
+    }
+    &.next {
+      animation: 1s linear alternate infinite pulse-next;
+    }
+  }
+
+  .divider {
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    flex-grow: 0;
+    background: var(--stat-box-bg);
+    border-top: solid 2px var(--stat-box-bg);
+    border-bottom: solid 2px var(--stat-box-bg);
+
+    &.left-done {
+      --div-left-color: var(--primary);
+    }
+    &.left-current {
+      --div-left-color: var(--tertiary);
+    }
+    &.left-blank, &.left-next {
+      &:nth-child(4n + 0) {
+        --div-left-color: var(--secondary);
+      }
+    }
+    &.left-next {
+      animation: 1s linear alternate infinite pulse-next-top;
+    }
+    &.right-done {
+      --div-right-color: var(--primary);
+    }
+    &.right-current {
+      --div-right-color: var(--tertiary);
+    }
+    &.right-blank, &.right-next {
+      &:nth-child(4n + 2) {
+        --div-right-color: var(--secondary);
+      }
+    }
+    &.right-next {
+      animation: 1s linear alternate infinite pulse-next-bottom;
+    }
+
+    &::after, &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      transform: skew(160deg) translate(58%);
+      background: var(--div-right-color);
+    }
+    &::before {
+      transform: skew(160deg) translate(-58%);
+      background: var(--div-left-color);
+    }
+
+    width: clamp(5px, 2.5vw, 15px);
+  }
+
+  &.transitions {
+    .stage, .divider, .divider::before, .divider::after {
+      transition: color 500ms, border-color 500ms, background-color 500ms;
+    }
+  }
+}
+
+@keyframes pulse-next {
+  to {
+    border-color: var(--tertiary);
+    text-shadow: 0 0 0.8em var(--tertiary);
+  }
+}
+
+@keyframes pulse-next-top {
+  to {
+    border-top-color: var(--tertiary);
+  }
+}
+
+@keyframes pulse-next-bottom {
+  to {
+    border-bottom-color: var(--tertiary);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker-bar.component.ts b/frontend/src/app/components/tracker/tracker-bar.component.ts
new file mode 100644
index 000000000..26f2e705b
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker-bar.component.ts
@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+
+export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed';
+
+@Component({
+  selector: 'app-tracker-bar',
+  templateUrl: './tracker-bar.component.html',
+  styleUrls: ['./tracker-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TrackerBarComponent implements OnInit, OnChanges {
+  @Input() stage: TrackerStage = 'waiting';
+
+  transitionsEnabled: boolean = false;
+  
+  stages = {
+    waiting: {
+      state: 'blank',
+    },
+    pending: {
+      state: 'blank',
+    },
+    soon: {
+      state: 'blank',
+    },
+    next: {
+      state: 'blank',
+    },
+    confirmed: {
+      state: 'blank',
+    },
+  };
+  stageOrder: TrackerStage[] = ['waiting', 'pending', 'soon', 'next', 'confirmed'];
+
+  constructor (
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.setStage();
+    setTimeout(() => {
+      this.transitionsEnabled = true;
+    }, 100)
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.stage) {
+      this.setStage();
+    }
+  }
+
+  setStage() {
+    let matched = 0;
+    for (let stage of this.stageOrder) {
+      if (stage === this.stage) {
+        this.stages[stage].state = 'current';
+        matched = 1;
+      } else {
+        if (matched > 1) {
+          this.stages[stage].state = 'blank';
+        } else if (matched) {
+          this.stages[stage].state = 'next';
+          matched++;
+        } else {
+          this.stages[stage].state = 'done';
+        }
+      }
+    }
+    this.stages = this.stages;
+    this.cd.markForCheck();
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html
new file mode 100644
index 000000000..3e2eed5d2
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.html
@@ -0,0 +1,106 @@
+<div class="mobile-wrapper">
+  <div class="mobile-container">
+    <div class="panel">
+      <div class="field">
+        <div class="label" i18n="shared.transaction">Transaction</div>
+        <div class="value">
+          <app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
+            <app-clipboard [text]="txId"></app-clipboard>
+          </app-truncate>
+        </div>
+      </div>
+    </div>
+      <div class="blockchain-wrapper" [style]="{ height: blockchainHeight * 1.16 + 'px' }">
+        <app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
+      </div>
+    <div class="panel">
+      <div class="tracker-bar">
+        <app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
+      </div>
+      <div class="explain">
+        <div class="field">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
+            }
+            @case ('pending') {
+              <span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
+            }
+            @case ('soon') {
+              <span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
+            }
+            @case ('next') {
+              <span i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
+            }
+            @case ('confirmed') {
+              <span i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
+            }
+          }
+        </div>
+        @if (tx && !tx.status?.confirmed && mempoolPosition) {
+          <div class="field">
+            <div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                @if (mempoolPosition?.block >= 7) {
+                  <span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
+                } @else {
+                  <app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
+                }
+                @if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
+                  <a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
+                }
+              </span>
+            </div>
+          </div>
+        } @else if (tx && tx.status?.confirmed) {
+          <div class="field">
+            <div class="label" i18n="transaction.block-height">Block height</div>
+            <div class="value">
+              <span class="justify-content-end d-flex align-items-center">
+                <a [routerLink]="['/block/' | relativeUrl, tx.status?.block_height]" class="block-link">{{ tx.status?.block_height }}</a>
+                <div class="confirmations">
+                  <app-confirmations
+                    *ngIf="tx"
+                    [chainTip]="latestBlock?.height"
+                    [height]="tx?.status?.block_height"
+                  ></app-confirmations>
+                </div>
+              </span>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+
+    <div class="bottom-panel">
+      @if (showAccelerationSummary) {
+        <app-accelerate-checkout *ngIf="(da$ | async) as da;" [txid]="tx.txid" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
+      } @else {
+        <div class="progress-icon">
+          @switch (trackerStage) {
+            @case ('waiting') {
+              <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
+            }
+            @case ('pending') {
+              <fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('soon') {
+              <fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('next') {
+              <fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
+            }
+            @case ('confirmed') {
+              <fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
+            }
+          }
+        </div>
+      }
+    </div>
+
+    <div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
+      <span>See more details <fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss
new file mode 100644
index 000000000..025479cde
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.scss
@@ -0,0 +1,104 @@
+.mobile-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-container {
+  width: 100vw;
+  height: 100vh;
+  max-width: 600px;
+  max-height: 1000px;
+  box-sizing: border-box;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+
+  & > * {
+    flex-shrink: 0;
+  }
+}
+
+.blockchain-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.panel {
+  background: var(--bg);
+}
+
+.field {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  width: 100%;
+  max-width: 100%;
+  padding: 1em;
+
+  &:nth-child(even) {
+    background: var(--stat-box-bg);
+  }
+
+  .label {
+    margin-right: 1em;
+  }
+  .value {
+    flex-shrink: 1;
+    flex-grow: 1;
+    width: 0;
+    white-space: nowrap;
+  }
+}
+
+.tracker-bar {
+  padding: 1em 0.5em 0;
+}
+
+.accelerate {
+  display: flex !important;
+  align-self: auto;
+  margin-left: 1em;
+  background-color: var(--tertiary);
+}
+
+.confirmations {
+  margin-left: 1em;
+}
+
+.accelerateFullSize {
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem 0.25rem;
+  background-color: #653b9c;
+}
+
+.bottom-panel {
+  flex-grow: 1;
+}
+
+.progress-icon {
+  font-size: clamp(50px, 30vw, 200px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.5em;
+  background: var(--primary);
+  color: white;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts
new file mode 100644
index 000000000..1a33eae66
--- /dev/null
+++ b/frontend/src/app/components/tracker/tracker.component.ts
@@ -0,0 +1,697 @@
+import { Component, OnInit, OnDestroy, HostListener, Inject, ChangeDetectorRef, ChangeDetectionStrategy, NgZone } from '@angular/core';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import {
+  switchMap,
+  filter,
+  catchError,
+  retryWhen,
+  delay,
+  mergeMap,
+  tap,
+  map
+} from 'rxjs/operators';
+import { Transaction } from '../../interfaces/electrs.interface';
+import { of, merge, Subscription, Observable, Subject, throwError, combineLatest } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { CacheService } from '../../services/cache.service';
+import { WebsocketService } from '../../services/websocket.service';
+import { AudioService } from '../../services/audio.service';
+import { ApiService } from '../../services/api.service';
+import { SeoService } from '../../services/seo.service';
+import { StorageService } from '../../services/storage.service';
+import { seoDescriptionNetwork } from '../../shared/common.utils';
+import { Filter } from '../../shared/filters.utils';
+import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment, Acceleration } from '../../interfaces/node-api.interface';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+import { PriceService } from '../../services/price.service';
+import { ServicesApiServices } from '../../services/services-api.service';
+import { EnterpriseService } from '../../services/enterprise.service';
+import { ZONE_SERVICE } from '../../injection-tokens';
+import { TrackerStage } from './tracker-bar.component';
+
+interface Pool {
+  id: number;
+  name: string;
+  slug: string;
+}
+
+interface AuditStatus {
+  seen?: boolean;
+  expected?: boolean;
+  added?: boolean;
+  prioritized?: boolean;
+  delayed?: number;
+  accelerated?: boolean;
+  conflict?: boolean;
+  coinbase?: boolean;
+}
+
+@Component({
+  selector: 'app-tracker',
+  templateUrl: './tracker.component.html',
+  styleUrls: ['./tracker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TrackerComponent implements OnInit, OnDestroy {
+  network = '';
+  tx: Transaction;
+  txId: string;
+  txInBlockIndex: number;
+  mempoolPosition: MempoolPosition;
+  isLoadingTx = true;
+  error: any = undefined;
+  loadingCachedTx = false;
+  waitingForTransaction = false;
+  latestBlock: BlockExtended;
+  transactionTime = -1;
+  subscription: Subscription;
+  fetchCpfpSubscription: Subscription;
+  fetchRbfSubscription: Subscription;
+  fetchCachedTxSubscription: Subscription;
+  fetchAccelerationSubscription: Subscription;
+  txReplacedSubscription: Subscription;
+  mempoolPositionSubscription: Subscription;
+  mempoolBlocksSubscription: Subscription;
+  blocksSubscription: Subscription;
+  miningSubscription: Subscription;
+  currencyChangeSubscription: Subscription;
+  rbfTransaction: undefined | Transaction;
+  replaced: boolean = false;
+  rbfReplaces: string[];
+  rbfInfo: RbfTree;
+  cpfpInfo: CpfpInfo | null;
+  hasCpfp: boolean = false;
+  accelerationInfo: Acceleration | null = null;
+  sigops: number | null;
+  adjustedVsize: number | null;
+  pool: Pool | null;
+  auditStatus: AuditStatus | null;
+  isAcceleration: boolean = false;
+  filters: Filter[] = [];
+  showCpfpDetails = false;
+  fetchCpfp$ = new Subject<string>();
+  fetchRbfHistory$ = new Subject<string>();
+  fetchCachedTx$ = new Subject<string>();
+  fetchAcceleration$ = new Subject<string>();
+  fetchMiningInfo$ = new Subject<{ hash: string, height: number, txid: string }>();
+  isCached: boolean = false;
+  now = Date.now();
+  da$: Observable<DifficultyAdjustment>;
+  isMobile: boolean;
+  paymentType: 'bitcoin' | 'cashapp' = 'bitcoin';
+
+  trackerStage: TrackerStage = 'waiting';
+
+  blockchainHeight: number = 100;
+  blockchainWidth: number = 600;
+
+  hasEffectiveFeeRate: boolean;
+  accelerateCtaType: 'alert' | 'button' = 'button';
+  acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+  accelerationEligible: boolean = false;
+  showAccelerationSummary = false;
+  scrollIntoAccelPreview = false;
+  auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
+
+  constructor(
+    private route: ActivatedRoute,
+    private electrsApiService: ElectrsApiService,
+    public stateService: StateService,
+    private cacheService: CacheService,
+    private websocketService: WebsocketService,
+    private audioService: AudioService,
+    private apiService: ApiService,
+    private servicesApiService: ServicesApiServices,
+    private seoService: SeoService,
+    private priceService: PriceService,
+    private enterpriseService: EnterpriseService,
+    private cd: ChangeDetectorRef,
+    private zone: NgZone,
+    @Inject(ZONE_SERVICE) private zoneService: any,
+  ) {}
+
+  ngOnInit() {
+    this.onResize();
+
+    window['setStage'] = ((stage: TrackerStage) => {
+      this.zone.run(() => {
+        this.trackerStage = stage;
+        this.cd.markForCheck();
+      });
+    }).bind(this);
+
+    this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+
+    if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
+      this.paymentType = 'cashapp';
+    }
+
+    this.enterpriseService.page();
+
+    this.websocketService.want(['blocks', 'mempool-blocks']);
+    this.stateService.networkChanged$.subscribe(
+      (network) => {
+        this.network = network;
+        this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
+      }
+    );
+
+    this.da$ = this.stateService.difficultyAdjustment$.pipe(
+      tap(() => {
+        this.now = Date.now();
+      })
+    );
+
+    this.blocksSubscription = this.stateService.blocks$.subscribe((blocks) => {
+      this.latestBlock = blocks[0];
+    });
+
+    this.fetchCpfpSubscription = this.fetchCpfp$
+      .pipe(
+        switchMap((txId) =>
+          this.apiService
+            .getCpfpinfo$(txId)
+            .pipe(retryWhen((errors) => errors.pipe(
+              mergeMap((error) => {
+                if (!this.tx?.status || this.tx.status.confirmed) {
+                  return throwError(error);
+                } else {
+                  return of(null);
+                }
+              }),
+              delay(2000)
+            )),
+            catchError(() => {
+              return of(null);
+            })
+          )
+        ),
+        catchError(() => {
+          return of(null);
+        })
+      )
+      .subscribe((cpfpInfo) => {
+        this.setCpfpInfo(cpfpInfo);
+      });
+
+    this.fetchRbfSubscription = this.fetchRbfHistory$
+    .pipe(
+      switchMap((txId) =>
+        this.apiService
+          .getRbfHistory$(txId)
+      ),
+      catchError(() => {
+        return of(null);
+      })
+    ).subscribe((rbfResponse) => {
+      this.rbfInfo = rbfResponse?.replacements;
+      this.rbfReplaces = rbfResponse?.replaces || null;
+    });
+
+    this.fetchCachedTxSubscription = this.fetchCachedTx$
+    .pipe(
+      tap(() => {
+        this.loadingCachedTx = true;
+      }),
+      switchMap((txId) =>
+        this.apiService
+          .getRbfCachedTx$(txId)
+      ),
+      catchError(() => {
+        return of(null);
+      })
+    ).subscribe((tx) => {
+      this.loadingCachedTx = false;
+      if (!tx) {
+        this.seoService.logSoft404();
+        return;
+      }
+      this.seoService.clearSoft404();
+
+      if (!this.tx) {
+        this.tx = tx;
+        this.isCached = true;
+        if (tx.fee === undefined) {
+          this.tx.fee = 0;
+        }
+        this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+        this.isLoadingTx = false;
+        this.error = undefined;
+        this.waitingForTransaction = false;
+        this.transactionTime = tx.firstSeen || 0;
+
+        this.fetchRbfHistory$.next(this.tx.txid);
+      }
+    });
+
+    this.fetchAccelerationSubscription = this.fetchAcceleration$.pipe(
+      filter(() => this.stateService.env.ACCELERATOR === true),
+      tap(() => {
+        this.accelerationInfo = null;
+      }),
+      switchMap((blockHash: string) => {
+        return this.servicesApiService.getAccelerationHistory$({ blockHash });
+      }),
+      catchError(() => {
+        return of(null);
+      })
+    ).subscribe((accelerationHistory) => {
+      for (const acceleration of accelerationHistory) {
+        if (acceleration.txid === this.txId && (acceleration.status === 'completed' || acceleration.status === 'completed_provisional')) {
+          const boostCost = acceleration.boostCost || (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
+          acceleration.acceleratedFeeRate = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + boostCost) / acceleration.effectiveVsize;
+          acceleration.boost = boostCost;
+
+          this.accelerationInfo = acceleration;
+          this.setIsAccelerated();
+        }
+      }
+    });
+
+    this.miningSubscription = this.fetchMiningInfo$.pipe(
+      filter((target) => target.txid === this.txId),
+      tap(() => {
+        this.pool = null;
+        this.auditStatus = null;
+      }),
+      switchMap(({ hash, height, txid }) => {
+        const foundBlock = this.cacheService.getCachedBlock(height) || null;
+        const auditAvailable = this.isAuditAvailable(height);
+        const isCoinbase = this.tx.vin.some(v => v.is_coinbase);
+        const fetchAudit = auditAvailable && !isCoinbase;
+        return combineLatest([
+          foundBlock ? of(foundBlock.extras.pool) : this.apiService.getBlock$(hash).pipe(
+            map(block => {
+              return block.extras.pool;
+            }),
+            catchError(() => {
+              return of(null);
+            })
+          ),
+          fetchAudit ? this.apiService.getBlockAudit$(hash).pipe(
+            map(audit => {
+              const isAdded = audit.addedTxs.includes(txid);
+              const isPrioritized = audit.prioritizedTxs.includes(txid);
+              const isAccelerated = audit.acceleratedTxs.includes(txid);
+              const isConflict = audit.fullrbfTxs.includes(txid);
+              const isExpected = audit.template.some(tx => tx.txid === txid);
+              return {
+                seen: isExpected || isPrioritized || isAccelerated,
+                expected: isExpected,
+                added: isAdded,
+                prioritized: isPrioritized,
+                conflict: isConflict,
+                accelerated: isAccelerated,
+              };
+            }),
+            catchError(() => {
+              return of(null);
+            })
+          ) : of(isCoinbase ? { coinbase: true } : null)
+        ]);
+      }),
+      catchError(() => {
+        return of(null);
+      })
+    ).subscribe(([pool, auditStatus]) => {
+      this.pool = pool;
+      this.auditStatus = auditStatus;
+    });
+
+    this.mempoolPositionSubscription = this.stateService.mempoolTxPosition$.subscribe(txPosition => {
+      this.now = Date.now();
+      if (txPosition && txPosition.txid === this.txId && txPosition.position) {
+        this.mempoolPosition = txPosition.position;
+        if (this.tx && !this.tx.status.confirmed) {
+          this.stateService.markBlock$.next({
+            txid: txPosition.txid,
+            mempoolPosition: this.mempoolPosition
+          });
+          this.txInBlockIndex = this.mempoolPosition.block;
+
+          if (txPosition.cpfp !== undefined) {
+            this.setCpfpInfo(txPosition.cpfp);
+          }
+
+          if (txPosition.position?.block === 0) {
+            this.trackerStage = 'next';
+          } else if (txPosition.position?.block < 3){
+            this.trackerStage = 'soon';
+          } else {
+            this.trackerStage = 'pending';
+          }
+          if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
+            this.accelerationEligible = true;
+          }
+        }
+      } else {
+        this.mempoolPosition = null;
+      }
+    });
+
+    this.subscription = this.zoneService.wrapObservable(this.route.paramMap
+      .pipe(
+        switchMap((params: ParamMap) => {
+          const urlMatch = (params.get('id') || '').split(':');
+          if (urlMatch.length === 2 && urlMatch[1].length === 64) {
+            const vin = parseInt(urlMatch[0], 10);
+            this.txId = urlMatch[1];
+          } else {
+            this.txId = urlMatch[0];
+          }
+          this.seoService.setTitle(
+            $localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
+          );
+          const network = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 'Liquid' : 'Bitcoin';
+          const seoDescription = seoDescriptionNetwork(this.stateService.network);
+          this.seoService.setDescription($localize`:@@meta.description.bitcoin.transaction:Get real-time status, addresses, fees, script info, and more for ${network}${seoDescription} transaction with txid ${this.txId}.`);
+          this.resetTransaction();
+          return merge(
+            of(true),
+            this.stateService.connectionState$.pipe(
+              filter(
+                (state) => state === 2 && this.tx && !this.tx.status?.confirmed
+              )
+            )
+          );
+        }),
+        switchMap(() => {
+          let transactionObservable$: Observable<Transaction>;
+          const cached = this.cacheService.getTxFromCache(this.txId);
+          if (cached && cached.fee !== -1) {
+            transactionObservable$ = of(cached);
+          } else {
+            transactionObservable$ = this.electrsApiService
+              .getTransaction$(this.txId)
+              .pipe(
+                catchError(this.handleLoadElectrsTransactionError.bind(this))
+              );
+          }
+          return merge(
+            transactionObservable$,
+            this.stateService.mempoolTransactions$
+          );
+        }),
+      ))
+      .subscribe((tx: Transaction) => {
+          if (!tx) {
+            this.fetchCachedTx$.next(this.txId);
+            this.seoService.logSoft404();
+            return;
+          }
+          this.seoService.clearSoft404();
+
+          this.tx = tx;
+          this.isCached = false;
+          if (tx.fee === undefined) {
+            this.tx.fee = 0;
+          }
+          if (this.tx.sigops != null) {
+            this.sigops = this.tx.sigops;
+            this.adjustedVsize = Math.max(this.tx.weight / 4, this.sigops * 5);
+          }
+          this.tx.feePerVsize = tx.fee / (tx.weight / 4);
+          this.isLoadingTx = false;
+          this.error = undefined;
+          this.loadingCachedTx = false;
+          this.waitingForTransaction = false;
+          this.websocketService.startTrackTransaction(tx.txid);
+
+          if (!tx.status?.confirmed) {
+            this.trackerStage = 'pending';
+            if (tx.firstSeen) {
+              this.transactionTime = tx.firstSeen;
+            } else {
+              this.getTransactionTime();
+            }
+          } else {
+            this.trackerStage = 'confirmed';
+            this.fetchAcceleration$.next(tx.status.block_hash);
+            this.fetchMiningInfo$.next({ hash: tx.status.block_hash, height: tx.status.block_height, txid: tx.txid });
+            this.transactionTime = 0;
+          }
+
+          if (this.tx?.status?.confirmed) {
+            this.stateService.markBlock$.next({
+              blockHeight: tx.status.block_height,
+            });
+            this.fetchCpfp$.next(this.tx.txid);
+          } else {
+            if (tx.cpfpChecked) {
+              this.stateService.markBlock$.next({
+                txid: tx.txid,
+                txFeePerVSize: tx.effectiveFeePerVsize,
+                mempoolPosition: this.mempoolPosition,
+              });
+              this.setCpfpInfo({
+                ancestors: tx.ancestors,
+                bestDescendant: tx.bestDescendant,
+              });
+              const hasRelatives = !!(tx.ancestors?.length || tx.bestDescendant);
+              this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
+            } else {
+              this.fetchCpfp$.next(this.tx.txid);
+            }
+          }
+          this.fetchRbfHistory$.next(this.tx.txid);
+          this.currencyChangeSubscription?.unsubscribe();
+          this.currencyChangeSubscription = this.stateService.fiatCurrency$.pipe(
+            switchMap((currency) => {
+              return tx.status.block_time ? this.priceService.getBlockPrice$(tx.status.block_time, true, currency).pipe(
+                tap((price) => tx['price'] = price),
+              ) : of(undefined);
+            })
+          ).subscribe();
+
+          this.cd.detectChanges();
+        },
+        (error) => {
+          this.error = error;
+          this.seoService.logSoft404();
+          this.isLoadingTx = false;
+        }
+      );
+
+    this.stateService.txConfirmed$.subscribe(([txConfirmed, block]) => {
+      if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) {
+        this.tx.status = {
+          confirmed: true,
+          block_height: block.height,
+          block_hash: block.id,
+          block_time: block.timestamp,
+        };
+        this.trackerStage = 'confirmed';
+        this.stateService.markBlock$.next({ blockHeight: block.height });
+        if (this.tx.acceleration || (this.accelerationInfo && ['accelerating', 'completed_provisional', 'completed'].includes(this.accelerationInfo.status))) {
+          this.audioService.playSound('wind-chimes-harp-ascend');
+        } else {
+          this.audioService.playSound('magic');
+        }
+        this.fetchAcceleration$.next(block.id);
+        this.fetchMiningInfo$.next({ hash: block.id, height: block.height, txid: this.tx.txid });
+      }
+    });
+
+    this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
+      if (!this.tx) {
+        this.error = new Error();
+        this.loadingCachedTx = false;
+        this.waitingForTransaction = false;
+      }
+      this.rbfTransaction = rbfTransaction;
+      this.replaced = true;
+      this.stateService.markBlock$.next({});
+
+      if (rbfTransaction && !this.tx) {
+        this.fetchCachedTx$.next(this.txId);
+      }
+    });
+
+    this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe((mempoolBlocks) => {
+      this.now = Date.now();
+
+      if (!this.tx || this.mempoolPosition) {
+        return;
+      }
+
+      const txFeePerVSize =
+        this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
+
+      let found = false;
+      this.txInBlockIndex = 0;
+      for (const block of mempoolBlocks) {
+        for (let i = 0; i < block.feeRange.length - 1 && !found; i++) {
+          if (
+            txFeePerVSize <= block.feeRange[i + 1] &&
+            txFeePerVSize >= block.feeRange[i]
+          ) {
+            this.txInBlockIndex = mempoolBlocks.indexOf(block);
+            found = true;
+          }
+        }
+      }
+      if (!found && mempoolBlocks.length && txFeePerVSize < mempoolBlocks[mempoolBlocks.length - 1].feeRange[0]) {
+        this.txInBlockIndex = 7;
+      }
+    });
+  }
+
+  handleLoadElectrsTransactionError(error: any): Observable<any> {
+    if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
+      this.websocketService.startMultiTrackTransaction(this.txId);
+      this.waitingForTransaction = true;
+    }
+    this.error = error;
+    this.seoService.logSoft404();
+    this.isLoadingTx = false;
+    return of(false);
+  }
+
+  getTransactionTime() {
+    this.apiService
+      .getTransactionTimes$([this.tx.txid])
+      .subscribe((transactionTimes) => {
+        if (transactionTimes?.length) {
+          this.transactionTime = transactionTimes[0];
+        }
+      });
+  }
+
+  setCpfpInfo(cpfpInfo: CpfpInfo): void {
+    if (!cpfpInfo || !this.tx) {
+      this.cpfpInfo = null;
+      this.hasCpfp = false;
+      this.hasEffectiveFeeRate = false;
+      return;
+    }
+    // merge ancestors/descendants
+    const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
+    if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
+      relatives.push(cpfpInfo.bestDescendant);
+    }
+    const hasRelatives = !!relatives.length;
+    if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
+      const totalWeight =
+        this.tx.weight +
+        relatives.reduce((prev, val) => prev + val.weight, 0);
+      const totalFees =
+        this.tx.fee +
+        relatives.reduce((prev, val) => prev + val.fee, 0);
+      this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
+    } else {
+      this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
+    }
+    if (cpfpInfo.acceleration) {
+      this.tx.acceleration = cpfpInfo.acceleration;
+    }
+
+    this.cpfpInfo = cpfpInfo;
+    if (this.cpfpInfo.adjustedVsize && this.cpfpInfo.sigops != null) {
+      this.sigops = this.cpfpInfo.sigops;
+      this.adjustedVsize = this.cpfpInfo.adjustedVsize;
+    }
+    this.hasCpfp =!!(this.cpfpInfo && (this.cpfpInfo.bestDescendant || this.cpfpInfo.descendants?.length || this.cpfpInfo.ancestors?.length));
+    this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
+  }
+
+  isAuditAvailable(blockHeight: number): boolean {
+    if (!this.auditEnabled) {
+      return false;
+    }
+    switch (this.stateService.network) {
+      case 'testnet':
+        if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
+          return false;
+        }
+        break;
+      case 'signet':
+        if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
+          return false;
+        }
+        break;
+      default:
+        if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
+          return false;
+        }
+    }
+    return true;
+  }
+
+  setIsAccelerated(initialState: boolean = false) {
+    this.isAcceleration = (this.tx.acceleration || (this.accelerationInfo && this.pool && this.accelerationInfo.pools.some(pool => (pool === this.pool.id || pool?.['pool_unique_id'] === this.pool.id))));
+  }
+
+  dismissAccelAlert(): void {
+    this.accelerateCtaType = 'button';
+  }
+
+  onAccelerateClicked() {
+    if (!this.txId) {
+      return;
+    }
+    this.enterpriseService.goal(8);
+    this.showAccelerationSummary = true && this.acceleratorAvailable;
+    this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
+    return false;
+  }
+
+  resetTransaction() {
+    this.error = undefined;
+    this.tx = null;
+    this.waitingForTransaction = false;
+    this.isLoadingTx = true;
+    this.rbfTransaction = undefined;
+    this.replaced = false;
+    this.transactionTime = -1;
+    this.cpfpInfo = null;
+    this.adjustedVsize = null;
+    this.sigops = null;
+    this.hasEffectiveFeeRate = false;
+    this.rbfInfo = null;
+    this.rbfReplaces = [];
+    this.filters = [];
+    this.showCpfpDetails = false;
+    this.accelerationInfo = null;
+    this.txInBlockIndex = null;
+    this.mempoolPosition = null;
+    this.pool = null;
+    this.auditStatus = null;
+    this.accelerationEligible = false;
+    this.trackerStage = 'waiting';
+    document.body.scrollTo(0, 0);
+    this.leaveTransaction();
+  }
+
+  leaveTransaction() {
+    this.websocketService.stopTrackingTransaction();
+    this.stateService.markBlock$.next({});
+  }
+
+  roundToOneDecimal(cpfpTx: any): number {
+    return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.isMobile = window.innerWidth < 850;
+    this.blockchainWidth = Math.min(600, window.innerWidth);
+    this.blockchainHeight = this.blockchainWidth / 5;
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+    this.fetchCpfpSubscription.unsubscribe();
+    this.fetchRbfSubscription.unsubscribe();
+    this.fetchCachedTxSubscription.unsubscribe();
+    this.fetchAccelerationSubscription.unsubscribe();
+    this.txReplacedSubscription.unsubscribe();
+    this.mempoolBlocksSubscription.unsubscribe();
+    this.mempoolPositionSubscription.unsubscribe();
+    this.mempoolBlocksSubscription.unsubscribe();
+    this.blocksSubscription.unsubscribe();
+    this.miningSubscription?.unsubscribe();
+    this.currencyChangeSubscription?.unsubscribe();
+    this.leaveTransaction();
+  }
+}
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 174388b7e..9dfec85e6 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -192,6 +192,10 @@ export class StateService {
       }
     });
 
+    if (this.ref === 'https://cash.app/' && window.innerWidth < 850 && window.location.pathname.startsWith('/tx/')) {
+      this.router.navigate(['/tracker/' + window.location.pathname.slice(4)]);
+    }
+
     this.liveMempoolBlockTransactions$ = merge(
       this.mempoolBlockTransactions$.pipe(map(transactions => { return { transactions }; })),
       this.mempoolBlockDelta$.pipe(map(delta => { return { delta }; })),
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
index 4c0acf222..97fa8aede 100644
--- a/frontend/src/app/shared/shared.module.ts
+++ b/frontend/src/app/shared/shared.module.ts
@@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
-  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
+  faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MenuComponent } from '../components/menu/menu.component';
 import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
@@ -50,6 +50,8 @@ import { BlockOverviewGraphComponent } from '../components/block-overview-graph/
 import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
 import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
 import { AddressGroupComponent } from '../components/address-group/address-group.component';
+import { TrackerComponent } from '../components/tracker/tracker.component';
+import { TrackerBarComponent } from '../components/tracker/tracker-bar.component';
 import { SearchFormComponent } from '../components/search-form/search-form.component';
 import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
 import { FooterComponent } from '../components/footer/footer.component';
@@ -157,6 +159,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BlockFiltersComponent,
     TransactionsListComponent,
     AddressGroupComponent,
+    TrackerComponent,
+    TrackerBarComponent,
     SearchFormComponent,
     AddressLabelsComponent,
     FooterComponent,
@@ -291,6 +295,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     BlockFiltersComponent,
     TransactionsListComponent,
     AddressGroupComponent,
+    TrackerComponent,
+    TrackerBarComponent,
     SearchFormComponent,
     AddressLabelsComponent,
     FooterComponent,
@@ -410,5 +416,8 @@ export class SharedModule {
     library.addIcons(faCheck);
     library.addIcons(faRocket);
     library.addIcons(faScaleBalanced);
+    library.addIcons(faHourglassStart);
+    library.addIcons(faHourglassHalf);
+    library.addIcons(faHourglassEnd);
   }
 }