diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index c6662e65b..c8d28824f 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -2,15 +2,18 @@
   <div class="container-xl">
     <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
       <div class="col d-none d-sm-block">
-        <span class="txPerSecond" i18n="footer.tx-vbytes-per-second">Tx vBytes per second:</span>
-        <span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync">
-          &nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span>
-        </span>
-        <ng-template #inSync>
-          <div class="progress sub-text">
-            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
-          </div>
-        </ng-template>    
+        <span class="txPerSecond" i18n="dashboard.incoming-transactions">Incoming transactions</span>&nbsp;
+        <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData" [ngIfElse]="loadingTransactions">
+          <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
+            &nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
+          </span>
+          <ng-template #inSync>
+            <div class="progress inc-tx-progress-bar">
+              <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
+              <div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+            </div>
+          </ng-template>
+        </ng-template>  
       </div>
       <div class="col">
         <span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span>
@@ -25,3 +28,7 @@
     </div>
   </div>
 </footer>
+
+<ng-template #loadingTransactions>
+  <div class="skeleton-loader skeleton-loader-transactions"></div>
+</ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/components/footer/footer.component.ts b/frontend/src/app/components/footer/footer.component.ts
index 17ecd78d8..dbaa478d7 100644
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@@ -13,7 +13,7 @@ interface MempoolInfoData {
   memPoolInfo: MempoolInfo;
   vBytesPerSecond: number;
   progressWidth: string;
-  progressClass: string;
+  progressColor: string;
 }
 
 @Component({
@@ -26,35 +26,62 @@ export class FooterComponent implements OnInit {
   mempoolBlocksData$: Observable<MempoolBlocksData>;
   mempoolInfoData$: Observable<MempoolInfoData>;
   vBytesPerSecondLimit = 1667;
+  isLoadingWebSocket$: Observable<boolean>;
+  mempoolLoadingStatus$: Observable<number>;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
-    this.mempoolInfoData$ = combineLatest([
-      this.stateService.mempoolInfo$,
-      this.stateService.vbytesPerSecond$
-    ])
-    .pipe(
-      map(([mempoolInfo, vbytesPerSecond]) => {
-        const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
+    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
+    this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
+      .pipe(
+        map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
+      );
 
-        let progressClass = 'bg-danger';
-        if (percent <= 75) {
-          progressClass = 'bg-success';
-        } else if (percent <= 99) {
-          progressClass = 'bg-warning';
-        }
-
-        return {
-          memPoolInfo: mempoolInfo,
-          vBytesPerSecond: vbytesPerSecond,
-          progressWidth: percent + '%',
-          progressClass: progressClass,
-        };
-      })
-    );
+      this.mempoolInfoData$ = combineLatest([
+        this.stateService.mempoolInfo$,
+        this.stateService.vbytesPerSecond$
+      ])
+      .pipe(
+        map(([mempoolInfo, vbytesPerSecond]) => {
+          const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
+  
+          let progressColor = '#7CB342';
+          if (vbytesPerSecond > 1667) {
+            progressColor = '#FDD835';
+          }
+          if (vbytesPerSecond > 2000) {
+            progressColor = '#FFB300';
+          }
+          if (vbytesPerSecond > 2500) {
+            progressColor = '#FB8C00';
+          }
+          if (vbytesPerSecond > 3000) {
+            progressColor = '#F4511E';
+          }
+          if (vbytesPerSecond > 3500) {
+            progressColor = '#D81B60';
+          }
+  
+          const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
+          let mempoolSizeProgress = 'bg-danger';
+          if (mempoolSizePercentage <= 50) {
+            mempoolSizeProgress = 'bg-success';
+          } else if (mempoolSizePercentage <= 75) {
+            mempoolSizeProgress = 'bg-warning';
+          }
+  
+          return {
+            memPoolInfo: mempoolInfo,
+            vBytesPerSecond: vbytesPerSecond,
+            progressWidth: percent + '%',
+            progressColor: progressColor,
+            mempoolSizeProgress: mempoolSizeProgress,
+          };
+        })
+      );
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(