diff --git a/frontend/src/app/components/mempool-block-overview/block-scene.ts b/frontend/src/app/components/mempool-block-overview/block-scene.ts
index 0974056d8..38ca35eda 100644
--- a/frontend/src/app/components/mempool-block-overview/block-scene.ts
+++ b/frontend/src/app/components/mempool-block-overview/block-scene.ts
@@ -27,15 +27,17 @@ export default class BlockScene {
     Object.values(this.txs).forEach(tx => tx.destroy())
   }
 
-  resize ({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
-    this.width = width
-    this.height = height
-    this.gridSize = this.width / this.gridWidth
-    this.unitPadding =  Math.floor(Math.max(1, width / 1000))
-    this.unitWidth = this.gridSize - (this.unitPadding * 2)
+  resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
+    this.width = width;
+    this.height = height;
+    this.gridSize = this.width / this.gridWidth;
+    this.unitPadding =  width / 500;
+    this.unitWidth = this.gridSize - (this.unitPadding * 2);
 
-    this.dirty = true
-    if (this.initialised && this.scene) this.updateAll(performance.now())
+    this.dirty = true;
+    if (this.initialised && this.scene) {
+      this.updateAll(performance.now());
+    }
   }
 
   // Animate new block entering scene
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
index 6951120d7..58f09548f 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,5 +1,5 @@
 <div class="mempool-block-overview">
-  <canvas class="block-overview" #blockCanvas></canvas>
+  <canvas class="block-overview" [style.width]="cssWidth + 'px'" [style.height]="cssHeight + 'px'" #blockCanvas></canvas>
   <div class="loader-wrapper" [class.hidden]="!(isLoading$ | async)">
     <div class="spinner-border ml-3 loading" role="status"></div>
   </div>
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
index cf8ccb987..ab9ffb3b5 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -27,6 +27,8 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   animationFrameRequest: number;
   displayWidth: number;
   displayHeight: number;
+  cssWidth: number;
+  cssHeight: number;
   shaderProgram: WebGLProgram;
   vertexArray: FastVertexArray;
   running: boolean;
@@ -182,12 +184,14 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
 
   @HostListener('window:resize', ['$event'])
   resizeCanvas(): void {
-    this.displayWidth = this.canvas.nativeElement.parentElement.clientWidth;
-    this.displayHeight = this.canvas.nativeElement.parentElement.clientHeight;
+    this.cssWidth = this.canvas.nativeElement.parentElement.clientWidth;
+    this.cssHeight = this.canvas.nativeElement.parentElement.clientHeight;
+    this.displayWidth = window.devicePixelRatio * this.cssWidth;
+    this.displayHeight = window.devicePixelRatio * this.cssHeight;
     this.canvas.nativeElement.width = this.displayWidth;
     this.canvas.nativeElement.height = this.displayHeight;
     if (this.gl) {
-      this.gl.viewport(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+      this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
     }
     if (this.scene) {
       this.scene.resize({ width: this.displayWidth, height: this.displayHeight });
@@ -285,7 +289,9 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
     this.setPreviewTx(-1, -1, false);
   }
 
-  setPreviewTx(x: number, y: number, clicked: boolean = false) {
+  setPreviewTx(cssX: number, cssY: number, clicked: boolean = false) {
+    const x = cssX * window.devicePixelRatio;
+    const y = cssY * window.devicePixelRatio;
     if (this.scene && (!this.selectedTx || clicked)) {
       const selected = this.scene.getTxAt({ x, y });
       const currentPreview = this.selectedTx || this.hoverTx;