diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.html b/frontend/src/app/components/reward-stats/reward-stats.component.html
index bd607ae34..861921ca6 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.html
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.html
@@ -1,4 +1,72 @@
-<div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
+<div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
+  <div class="fee-estimation-container">
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+        ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
+        <div class="fee-text">
+          <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+        </div>
+        <span class="fiat">
+          <app-fiat [value]="rewardStats.totalReward"></app-fiat>
+        </span>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+        ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
+        <div class="fee-text">
+          {{ rewardStats.rewardPerTx | amountShortener }}
+          <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
+        </div>
+        <span class="fiat">
+          <app-fiat [value]="rewardStats.rewardPerTx"></app-fiat>
+        </span>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
+      <div class="card-text" i18n-ngbTooltip="Transaction fee tooltip"
+        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
+        <div class="fee-text">{{ rewardStats.feePerTx | amountShortener }}
+          <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
+        </div>
+        <span class="fiat">
+          <app-fiat [value]="rewardStats.feePerTx"></app-fiat>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #loadingReward>
+  <div class="fee-estimation-container loading-container">
+    <div class="item">
+      <h5 class="card-title" i18n="fees-box.low-priority">Low priority</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="fees-box.medium-priority">Medium priority</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+    <div class="item">
+      <h5 class="card-title" i18n="fees-box.high-priority">High priority</h5>
+      <div class="card-text">
+        <div class="skeleton-loader"></div>
+        <div class="skeleton-loader"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
+
+<!-- <div class="reward-container" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
   <div class="item">
     <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
     <div class="card-text">
@@ -48,4 +116,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template> -->
\ No newline at end of file
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss
index 77d57fa1c..460db5e4b 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@@ -1,57 +1,85 @@
-.reward-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  height: 76px;
-  .shared-block {
-    color: #ffffff66;
-    font-size: 12px;
-  }
-  .item {
-    display: table-cell;
-    padding: 0 5px;
-    width: 100%;
-    &:nth-child(1) {
-      display: none;
-      @media (min-width: 485px) {
-        display: table-cell;
-      }
-      @media (min-width: 768px) {
-        display: none;
-      }
-      @media (min-width: 992px) {
-        display: table-cell;
-      }
-    }
-  }
-  .card-text {
-    font-size: 22px;
-    margin-top: -9px;
-    position: relative;
-  }
-  .card-text.skeleton {
-    margin-top: 0px;
-  }
+.card-title {
+  color: #4a68b9;
+  font-size: 10px;
+  margin-bottom: 4px;  
+  font-size: 1rem;
 }
 
 .card-text {
   font-size: 22px;
-}
-
-.card-title {
-  font-size: 1rem;
-  color: #4a68b9;
-}
-
-.skeleton-loader {
-  width: 100%;
-  display: block;
-  &:first-child {
-    max-width: 90px;
-    margin: 15px auto 3px;
+  span {
+    font-size: 11px;
+    position: relative;
+    top: -2px;
+    display: inline-flex;
   }
-  &:last-child {
-    margin: 10px auto 3px;
-    max-width: 55px;
+  .green-color {
+    display: block;
   }
 }
+
+.fee-estimation-container {
+  display: flex;
+  justify-content: space-between;
+  @media (min-width: 376px) {
+    flex-direction: row;
+  }  
+  .item {
+    max-width: 150px;
+    margin: 0;
+    width: -webkit-fill-available;
+    @media (min-width: 376px) {
+      margin: 0 auto 0px;
+    }    
+    &:first-child{
+      display: none;
+      @media (min-width: 485px) {
+        display: block;
+      }    
+      @media (min-width: 768px) {
+        display: none;
+      }    
+      @media (min-width: 992px) {
+        display: block;
+      }    
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .card-text span {
+      color: #ffffff66;
+      font-size: 12px;
+      top: 0px;
+    }
+    .fee-text{
+      border-bottom: 1px solid #ffffff1c;
+      width: fit-content;
+      margin: auto;
+      line-height: 1.45;
+      padding: 0px 2px;
+    }
+    .fiat {
+      display: block;
+      font-size: 14px !important;
+    }
+  }
+}
+
+.loading-container{
+  min-height: 76px;
+}
+
+.card-text {
+  .skeleton-loader {
+    width: 100%;
+    display: block;
+    &:first-child {
+      max-width: 90px;
+      margin: 15px auto 3px;
+    }
+    &:last-child {
+      margin: 10px auto 3px;
+      max-width: 55px;
+    }
+  }
+}
\ No newline at end of file