diff --git a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
index 8962be63c..23c252190 100644
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@@ -15,12 +15,12 @@
 
   &::before {
     left: 0;
-    background: linear-gradient(to right, #24273e, #24273e, transparent);
+    background: linear-gradient(to right, var(--box-bg), var(--box-bg), transparent);
   }
 
   &::after {
     right: 0;
-    background: linear-gradient(to left, #24273e, #24273e, transparent);
+    background: linear-gradient(to left, var(--box-bg), var(--box-bg), transparent);
   }
 
   .timeline-wrapper {
@@ -45,7 +45,7 @@
       width: 100%;
       height: 70px;
       top: -70px;
-      background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
+      background: linear-gradient(to bottom, var(--fade-out-box-bg-start), var(--fade-out-box-bg-end));
       z-index: 1;
     }
   }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index fa680ed60..88f664982 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -77,6 +77,8 @@ $dropdown-link-active-bg: $active-bg;
   --stat-box-bg: #181b2d;
   --alert-bg: #3a1c61;
   --transparent-fg: #ffffff66;
+  --fade-out-box-bg-start: rgba(36, 39, 62, 0);
+  --fade-out-box-bg-end: rgba(36, 39, 62, 1);
 
   --testnet: #1d486f;
   --signet: #6f1d5d;
diff --git a/frontend/src/theme-contrast.scss b/frontend/src/theme-contrast.scss
index e4aacdd83..3e85adf2a 100644
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@@ -76,6 +76,8 @@ $dropdown-link-active-bg: $active-bg;
   --stat-box-bg: #0b1018;
   --alert-bg: #3a1c61;
   --transparent-fg: #ffffffbb;
+  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
+  --fade-out-box-bg-end: rgba(23, 28, 42, 1);
 
   --testnet: #1d486f;
   --signet: #6f1d5d;