diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index 77baf3bfa..bfd80a03e 100644
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -33,3 +33,5 @@ export const mempoolFeeColors = [
 
 export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
   250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
+
+export const ELCTRS_ITEMS_PER_PAGE = 25;
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 0bb90df60..4757afc95 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -76,12 +76,16 @@
 
     <br>
 
-    <h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ block.tx_count | number }} transactions</h2>
+    <h2 class="float-left">{{ block.tx_count | number }} transactions</h2>
 
-    <app-transactions-list [transactions]="transactions" (loadMore)="loadMore()"></app-transactions-list>
+    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
-    <div class="text-center">
-      <ng-template [ngIf]="isLoadingTransactions">
+    <div class="clearfix"></div>
+
+    <app-transactions-list [transactions]="transactions"></app-transactions-list>
+
+    <ng-template [ngIf]="isLoadingTransactions">
+      <div class="text-center mb-4">
 
         <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
           <span class="skeleton-loader"></span>
@@ -94,12 +98,15 @@
             </div>
             <div class="col-sm">
               <span class="skeleton-loader"></span>
+              <span class="skeleton-loader"></span>
             </div>
           </div>
         </div>
         
-      </ng-template>
-    </div>
+      </div>
+    </ng-template>
+
+    <ngb-pagination class="float-right" [collectionSize]="block.tx_count" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
   </ng-template>
 
@@ -158,3 +165,4 @@
 </div>
 
 <br>
+<br>
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index a7b723a5e..473a3e43d 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -7,6 +7,7 @@ import { Block, Transaction, Vout } from '../../interfaces/electrs.interface';
 import { of } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { ELCTRS_ITEMS_PER_PAGE } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-block',
@@ -25,6 +26,9 @@ export class BlockComponent implements OnInit, OnDestroy {
   error: any;
   blockSubsidy: number;
   fees: number;
+  paginationMaxSize: number;
+  page = 1;
+  itemsPerPage = ELCTRS_ITEMS_PER_PAGE;
 
   constructor(
     private route: ActivatedRoute,
@@ -36,11 +40,14 @@ export class BlockComponent implements OnInit, OnDestroy {
   ) { }
 
   ngOnInit() {
+    this.paginationMaxSize = window.matchMedia('(max-width: 700px)').matches ? 3 : 5;
+
     this.route.paramMap
     .pipe(
       switchMap((params: ParamMap) => {
         const blockHash: string = params.get('id') || '';
         this.block = undefined;
+        this.page = 1;
         let isBlockHeight = false;
         this.error = undefined;
         this.fees = undefined;
@@ -136,17 +143,15 @@ export class BlockComponent implements OnInit, OnDestroy {
     }
   }
 
-  loadMore() {
-    if (this.isLoadingTransactions || !this.transactions.length || this.transactions.length === this.block.tx_count) {
-      return;
-    }
-
+  pageChange(page: number) {
+    const start = (page - 1) * this.itemsPerPage;
     this.isLoadingTransactions = true;
-    this.electrsApiService.getBlockTransactions$(this.block.id, this.transactions.length)
-      .subscribe((transactions) => {
-        this.transactions = this.transactions.concat(transactions);
+    this.transactions = null;
+
+    this.electrsApiService.getBlockTransactions$(this.block.id, start)
+     .subscribe((transactions) => {
+        this.transactions = transactions;
         this.isLoadingTransactions = false;
       });
   }
-
 }