diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html
index dc84ae9b0..7bea8c75e 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.html
+++ b/frontend/src/app/components/fees-box/fees-box.component.html
@@ -1,22 +1,22 @@
 <div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
-  <div class="fee-progress-bar" [style.background]="gradient">
-    <span class="fee-label" i18n="fees-box.minimum">Minimum</span>
-    <span class="fee-label" i18n="fees-box.economy">Economy</span>
-    <span class="fee-label" i18n="fees-box.low">Low</span>
-    <span class="fee-label" i18n="fees-box.medium">Medium</span>
-    <span class="fee-label" i18n="fees-box.high">High</span>
+  <div class="d-flex">
+    <div class="fee-progress-bar" [style.background]="noPriority">
+      <span class="fee-label" i18n="fees-box.no-priority">No Priority</span>
+    </div>
+    <div class="band-separator fill"></div>
+    <div class="fee-progress-bar priority" [style.background]="gradient">
+      <span class="fee-label prority" i18n="fees-box.low-priority">Low Priority</span>
+      <span class="fee-label prority" i18n="fees-box.medium-priority">Medium Priority</span>
+      <span class="fee-label prority" i18n="fees-box.high-priority">High Priority</span>
+    </div>
   </div>
   <div class="fee-estimation-container">
-    <div class="item">
-      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
-        <div class="fee-text">{{ recommendedFees.minimumFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.minimumFee * 140" ></app-fiat></span>
-      </div>
-    </div>
     <div class="item">
       <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
         <div class="fee-text">{{ recommendedFees.economyFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.economyFee * 140" ></app-fiat></span>
       </div>
     </div>
+    <div class="band-separator"></div>
     <div class="item">
       <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom">
         <div class="fee-text">{{ recommendedFees.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat [value]="recommendedFees.hourFee * 140" ></app-fiat></span>
@@ -36,12 +36,16 @@
 </div>
 
 <ng-template #loadingFees>
-  <div class="fee-progress-bar" [style.background]="gradient">
-    <span class="fee-label" i18n="fees-box.minimum">Minimum</span>
-    <span class="fee-label" i18n="fees-box.economy">Economy</span>
-    <span class="fee-label" i18n="fees-box.low">Low</span>
-    <span class="fee-label" i18n="fees-box.medium">Medium</span>
-    <span class="fee-label" i18n="fees-box.high">High</span>
+  <div class="d-flex">
+    <div class="fee-progress-bar" [style.background]="noPriority">
+      <span class="fee-label" i18n="fees-box.no-priority">No Priority</span>
+    </div>
+    <div class="band-separator fill"></div>
+    <div class="fee-progress-bar priority" [style.background]="gradient">
+      <span class="fee-label prority" i18n="fees-box.low-priority">Low Priority</span>
+      <span class="fee-label prority" i18n="fees-box.medium-priority">Medium Priority</span>
+      <span class="fee-label prority" i18n="fees-box.high-priority">High Priority</span>
+    </div>
   </div>
   <div class="fee-estimation-container loading-container">
     <div class="item">
@@ -50,12 +54,7 @@
         <div class="skeleton-loader"></div>
       </div>
     </div>
-    <div class="item">
-      <div class="card-text">
-        <div class="skeleton-loader"></div>
-        <div class="skeleton-loader"></div>
-      </div>
-    </div>
+    <div class="band-separator"></div>
     <div class="item">
       <div class="card-text">
         <div class="skeleton-loader"></div>
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index fe4e0161d..8e20069aa 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -31,11 +31,6 @@
         display: none
       }
     }
-    &:nth-child(2) {
-      @media (767px < width < 992px), (width < 576px) {
-        display: none
-      }
-    }
     margin: 0 auto 0px;
     &:last-child {
       margin-bottom: 0;
@@ -78,29 +73,51 @@
 }
 
 .fee-progress-bar {
-  width: 100%;
+  width: 25%;
   height: 22px;
   margin-bottom: 12px;
-  border-radius: 0px 10px 10px 0px;
   display: flex;
   flex-direction: row;
   transition: background-color 1s;
-}
-
-.fee-label {
-  font-size: 14px;
-  width: 20%;
-  @media (767px < width < 992px), (width < 576px) {
-    width: 33%;
+  &.priority {
+    @media (767px < width < 992px), (width < 576px) {
+      width: 100%;
+    }
+    width: 75%;
+    border-radius: 0px 10px 10px 0px;
   }
   &:first-child {
     @media (767px < width < 992px), (width < 576px) {
       display: none
     }
   }
-  &:nth-child(2) {
-    @media (767px < width < 992px), (width < 576px) {
-      display: none
-    }
+}
+
+.band-separator {
+  width: 5%;
+  @media (767px < width < 992px), (width < 576px) {
+    display: none
+  }
+  &.fill {
+    height: 22px;
+    background: repeating-linear-gradient(
+      90deg,
+      rgb(45, 51, 72),
+      rgb(45, 51, 72) 2px,
+      rgb(29, 31, 49) 2px,
+      rgb(29, 31, 49) 4px
+    );  
+  }
+}
+
+.fee-label {
+  padding-top: 2px;
+  font-size: 12px;
+  width: 100%;
+  @media (767px < width < 992px), (width < 576px) {
+    width: 33%;
+  }
+  &.prority {
+    width: 33%;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/fees-box/fees-box.component.ts b/frontend/src/app/components/fees-box/fees-box.component.ts
index 76cf03a4f..20fe42647 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -15,6 +15,7 @@ export class FeesBoxComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   recommendedFees$: Observable<Recommendedfees>;
   gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
+  noPriority = '#2e324e';
 
   constructor(
     private stateService: StateService
@@ -34,6 +35,7 @@ export class FeesBoxComponent implements OnInit {
           const endColor = '#' + (mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
 
           this.gradient = `linear-gradient(to right, ${startColor}, ${endColor})`;
+          this.noPriority = startColor;
         }
       )
     );