diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
index 794747579..60f945772 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
@@ -23,7 +23,7 @@
       <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
       <td>
         <div class="progress position-relative">
-          <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
+          <div class="progress-bar progress-mempool {{ network }}" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
           <div class="progress-text">{{ block.size | bytes: 2 }}</div>
         </div>
       </td>
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
index 24dcd20d1..6b5c17a99 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.scss
@@ -1,7 +1,3 @@
-.progress-mempool {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
-}
-
 .progress {
   background-color: #2d3348;
 }
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.html b/frontend/src/app/components/mempool-block/mempool-block.component.html
index 932091d6c..0744f59a1 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.html
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.html
@@ -29,7 +29,7 @@
               <td>Filled</td>
               <td>
                 <div class="progress position-relative">
-                  <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
+                  <div class="progress-bar progress-mempool {{ network }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
                   <div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
                 </div>
               </td>
diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss
index edf464a16..1b4a9ffe0 100644
--- a/frontend/src/app/components/mempool-block/mempool-block.component.scss
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.scss
@@ -1,7 +1,3 @@
-.progress-mempool {
-  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
-}
-
 .progress {
   background-color: #2d3348;
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 350461ed1..2a8416670 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -375,3 +375,15 @@ h1, h2, h3 {
 .header-bg {
   font-size: 14px;
 }
+
+.progress-mempool {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
+}
+
+.progress-mempool.testnet {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
+}
+
+.progress-mempool.liquid {
+  background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
+}