diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 92b64fe5e..08d4a130a 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -16,23 +16,22 @@
     </ng-container>
     <div class="col">
       <div class="card graph-card">
-        <div class="card-body pl-0">
-          <div style="padding-left: 1.25rem;">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
-            <hr>
-          </div>
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-            <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-              <div class="mempool-graph">
-                <app-mempool-graph
-                [template]="'widget'"
-                [data]="mempoolStats.value?.mempool"
-                [windowPreferenceOverride]="'2h'"
-                ></app-mempool-graph>
-              </div>
-            </ng-container>
+            <a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
+              <h5 class="card-title d-inline" i18n="dashboard.mempool-goggles">Mempool Goggles</h5>
+              <span>&nbsp;</span>
+              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
+            </a>
+            <div class="mempool-block-wrapper">
+              <app-mempool-block-overview [index]="0"></app-mempool-block-overview>
+            </div>
           </ng-template>
           <ng-template #liquidPegs>
+            <div style="padding-left: 1.25rem;">
+              <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+              <hr>
+            </div>
             <app-lbtc-pegs-graph [data]="fullHistory$ | async"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
@@ -41,9 +40,21 @@
     <div class="col">
       <div class="card graph-card">
         <div class="card-body">
-          <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
-          <hr>
-          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
+          <ng-container *ngIf="stateService.network !== 'liquid'">
+            <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
+            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
+              <app-incoming-transactions-graph
+                [height]="incomingGraphHeight"
+                [left]="50"
+                [right]="20"
+                [data]="mempoolStats.value?.weightPerSecond"
+                [windowPreferenceOverride]="'2h'"
+                ></app-incoming-transactions-graph>
+            </div>
+          </ng-container>
+          <ng-container *ngTemplateOutlet="mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
+          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'">
+            <hr>
             <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
               <tbody>
                 <tr *ngFor="let group of featuredAssets">
@@ -60,15 +71,6 @@
               </tbody>
             </table>
           </div>
-          <ng-template #mempoolGraph>
-            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-              <app-incoming-transactions-graph
-                [left]="50"
-                [data]="mempoolStats.value?.weightPerSecond"
-                [windowPreferenceOverride]="'2h'"
-                ></app-incoming-transactions-graph>
-            </div>
-          </ng-template>
         </div>
       </div>
     </div>
@@ -284,19 +286,3 @@
     </div>
   </div>
 </ng-template>
-
-<ng-template #txPerSecond let-mempoolInfoData>
-  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming Transactions</h5>
-  <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData.value" [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 {{ mempoolInfoData.value.progressColor }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">&nbsp;</div>
-        <div *only-vsize class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
-        <div *only-weight class="progress-text">&lrm;{{ mempoolInfoData.value.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-per-second|WU/s">WU/s</ng-container></div>
-      </div>
-    </ng-template>
-  </ng-template>
-</ng-template>
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index 2b319c425..d74d82054 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -44,8 +44,11 @@
 
 .graph-card {
   height: 100%;
+  @media (min-width: 768px) {
+    height: 415px;
+  }
   @media (min-width: 992px) {
-    height: 385px;
+    height: 500px;
   }
 }
 
@@ -258,6 +261,12 @@
 
 .mempool-graph {
   height: 255px;
+  @media (min-width: 768px) {
+    height: 285px;
+  }
+  @media (min-width: 992px) {
+    height: 370px;
+  }
 }
 .loadingGraphs{
   height: 250px;
@@ -364,3 +373,18 @@
   text-decoration: none;
   color: inherit;
 }
+
+.mempool-block-wrapper {
+  max-height: 430px;
+  max-width: 430px;
+  margin: auto;
+
+  @media (min-width: 768px) {
+    max-height: 344px;
+    max-width: 344px;
+  }
+  @media (min-width: 992px) {
+    max-height: 430px;
+    max-width: 430px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 6e65f2332..505fecc14 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { combineLatest, EMPTY, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
 import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
@@ -54,8 +54,10 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   currentReserves$: Observable<CurrentPegs>;
   fullHistory$: Observable<any>;
   isLoad: boolean = true;
+  mempoolInfoSubscription: Subscription;
   currencySubscription: Subscription;
   currency: string;
+  incomingGraphHeight: number = 300;
   private lastPegBlockUpdate: number = 0;
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
@@ -74,6 +76,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnDestroy(): void {
+    this.mempoolInfoSubscription.unsubscribe();
     this.currencySubscription.unsubscribe();
     this.websocketService.stopTrackRbfSummary();
     this.destroy$.next(1);
@@ -81,6 +84,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngOnInit(): void {
+    this.onResize();
     this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
     this.seoService.resetTitle();
     this.seoService.resetDescription();
@@ -95,36 +99,37 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     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);
+    ]).pipe(
+      map(([mempoolInfo, vbytesPerSecond]) => {
+        const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
 
-          let progressColor = 'bg-success';
-          if (vbytesPerSecond > 1667) {
-            progressColor = 'bg-warning';
-          }
-          if (vbytesPerSecond > 3000) {
-            progressColor = 'bg-danger';
-          }
+        let progressColor = 'bg-success';
+        if (vbytesPerSecond > 1667) {
+          progressColor = 'bg-warning';
+        }
+        if (vbytesPerSecond > 3000) {
+          progressColor = 'bg-danger';
+        }
 
-          const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
-          let mempoolSizeProgress = 'bg-danger';
-          if (mempoolSizePercentage <= 50) {
-            mempoolSizeProgress = 'bg-success';
-          } else if (mempoolSizePercentage <= 75) {
-            mempoolSizeProgress = 'bg-warning';
-          }
+        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,
-          };
-        })
-      );
+        return {
+          memPoolInfo: mempoolInfo,
+          vBytesPerSecond: vbytesPerSecond,
+          progressWidth: percent + '%',
+          progressColor: progressColor,
+          mempoolSizeProgress: mempoolSizeProgress,
+        };
+      })
+    );
+
+    this.mempoolInfoSubscription = this.mempoolInfoData$.subscribe();
 
     this.mempoolBlocksData$ = this.stateService.mempoolBlocks$
       .pipe(
@@ -347,4 +352,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.incomingGraphHeight = 300;
+    } else if (window.innerWidth >= 768) {
+      this.incomingGraphHeight = 215;
+    } else {
+      this.incomingGraphHeight = 180;
+    }
+  }
 }