diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..dd16c6cd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,11 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "ngx-auto-scroll": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-auto-scroll/-/ngx-auto-scroll-1.1.0.tgz",
+      "integrity": "sha512-+zYhl8OGof4LhNzTh0t2o0/L61rMIaDWdmRg8OEiqJA+ehWirlpp+IpMcLAWrXI11XtvfkPtxspmRPHzU3scXA=="
+    }
+  }
+}
diff --git a/web-ui/package-lock.json b/web-ui/package-lock.json
index 835c78ae..346983d8 100644
--- a/web-ui/package-lock.json
+++ b/web-ui/package-lock.json
@@ -2125,7 +2125,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -2178,7 +2178,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -2326,7 +2326,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "optional": true,
@@ -3682,7 +3682,7 @@
     },
     "events": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/events/-/events-1.1.1.tgz",
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
@@ -4104,7 +4104,7 @@
     },
     "file-loader": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
+      "resolved": "http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
       "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
       "dev": true,
       "requires": {
@@ -4916,7 +4916,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -5350,7 +5350,7 @@
         },
         "readable-stream": {
           "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
           "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
           "dev": true,
           "requires": {
@@ -6481,7 +6481,7 @@
     },
     "json5": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
@@ -6777,7 +6777,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -7187,7 +7187,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true,
           "optional": true
@@ -7619,7 +7619,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true,
           "optional": true
@@ -7694,7 +7694,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "optional": true,
@@ -8118,7 +8118,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "dev": true,
       "optional": true,
@@ -8627,7 +8627,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
           "dev": true
         }
@@ -10704,7 +10704,7 @@
         },
         "sax": {
           "version": "0.5.8",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
+          "resolved": "http://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
           "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE=",
           "dev": true
         },
@@ -11965,7 +11965,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
diff --git a/web-ui/src/app/components/block-details/block-details.component.html b/web-ui/src/app/components/block-details/block-details.component.html
index 4536c6a0..f2078647 100644
--- a/web-ui/src/app/components/block-details/block-details.component.html
+++ b/web-ui/src/app/components/block-details/block-details.component.html
@@ -271,7 +271,12 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
               </tr>
             </thead>
 
-            <tbody>
+            <tbody
+            infiniteScroll
+            [infiniteScrollDistance]="1"
+            [infiniteScrollThrottle]="300"
+            (scrolled)="load()"
+            [scrollWindow]="true">
               <tr *ngFor="let index = index; let item of transactions">
                 <td>{{index + 1}}</td>
                 <td>
@@ -285,13 +290,6 @@ <h2 class="col-xs-12">{{'label.block' | translate}} #{{blockDetails.block.height
           </table>
         </div>
 
-        <div class="row">
-          <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
-            <button (click)="load()">{{'label.more' | translate}}</button>
-          </div>
-        </div>
-      </div>
-
       <!-- transaction list only -->
       <div *ngIf="transactions != null && transactions.length == 0" class="col-xs-12 col-md-offset-2 col-md-8">
         <div class="table-responsive">
diff --git a/web-ui/src/app/components/block-details/block-details.component.ts b/web-ui/src/app/components/block-details/block-details.component.ts
index c2f0d3f6..7a311e39 100644
--- a/web-ui/src/app/components/block-details/block-details.component.ts
+++ b/web-ui/src/app/components/block-details/block-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { BlockDetails } from '../../models/block';
@@ -8,6 +8,8 @@ import { BlocksService } from '../../services/blocks.service';
 import { ErrorService } from '../../services/error.service';
 import { PaginatedResult } from '../../models/paginated-result';
 
+import { getNumberOfRowsForScreen } from '../../utils';
+
 @Component({
   selector: 'app-block-details',
   templateUrl: './block-details.component.html',
@@ -19,7 +21,7 @@ export class BlockDetailsComponent implements OnInit {
   blockDetails: BlockDetails;
 
   // pagination
-  limit = 10;
+  limit = 30;
   transactions: Transaction[] = [];
 
   constructor(
@@ -28,6 +30,8 @@ export class BlockDetailsComponent implements OnInit {
     private errorService: ErrorService) { }
 
   ngOnInit() {
+    const height = this.getScreenSize();
+    this.limit = getNumberOfRowsForScreen(height);
     this.route.params.forEach(params => this.onQuery(params['query']));
   }
 
@@ -59,10 +63,15 @@ export class BlockDetailsComponent implements OnInit {
 
     this.blocksService
       .getTransactionsV2(this.blockhash, this.limit, lastSeenTxid)
-      .do(response => this.transactions = this.transactions.concat(response.data))
+      .do(response => this.transactions.push(...response.data))
       .subscribe();
   }
 
+  @HostListener('window:resize', ['$event'])
+  private getScreenSize(_?): number {
+    return window.innerHeight;
+  }
+
   private onError(response: any) {
     this.errorService.renderServerErrors(null, response);
   }