diff --git a/packages/embark-ui/src/components/Blocks.js b/packages/embark-ui/src/components/Blocks.js
index d301f41a3..87bf29dfd 100644
--- a/packages/embark-ui/src/components/Blocks.js
+++ b/packages/embark-ui/src/components/Blocks.js
@@ -14,6 +14,7 @@ const Blocks = ({blocks, changePage, currentPage, numberOfPages}) => (
           <h2>Blocks</h2>
         </CardHeader>
         <CardBody>
+          {!blocks.length && "No blocks to display"}
           {blocks.map(block => (
             <div className="explorer-row border-top" key={block.number}>
               <CardTitleIdenticon id={block.hash}>Block&nbsp;
diff --git a/packages/embark-ui/src/components/ExplorerDashboardLayout.js b/packages/embark-ui/src/components/ExplorerDashboardLayout.js
index b750480e3..cd5e3de76 100644
--- a/packages/embark-ui/src/components/ExplorerDashboardLayout.js
+++ b/packages/embark-ui/src/components/ExplorerDashboardLayout.js
@@ -22,7 +22,7 @@ const ExplorerDashboardLayout = () => (
       </Row>
       <Row>
         <Col xl={6}>
-          <BlocksContainer overridePageHead={false} />
+          <BlocksContainer numBlocksToDisplay={5} overridePageHead={false} />
         </Col>
         <Col xl={6}>
           <TransactionsContainer overridePageHead={false} />
diff --git a/packages/embark-ui/src/containers/BlocksContainer.js b/packages/embark-ui/src/containers/BlocksContainer.js
index b196d31a0..6bd07e139 100644
--- a/packages/embark-ui/src/containers/BlocksContainer.js
+++ b/packages/embark-ui/src/containers/BlocksContainer.js
@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-
-import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions';
+import {blocks as blocksAction,
+        initBlockHeader,
+        stopBlockHeader} from '../actions';
 import Blocks from '../components/Blocks';
 import DataWrapper from "../components/DataWrapper";
 import PageHead from "../components/PageHead";
@@ -14,9 +15,8 @@ class BlocksContainer extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {currentPage: 0};
-    this.numberOfBlocks = 0;
-    this.currentBlocks = [];
+    this.numBlocksToDisplay = this.props.numBlocksToDisplay || MAX_BLOCKS;
+    this.state = {currentPage: 1};
   }
 
   componentDidMount() {
@@ -28,56 +28,69 @@ class BlocksContainer extends Component {
     this.props.stopBlockHeader();
   }
 
+  get numberOfBlocks() {
+    const blocks = this.props.blocks;
+    return !blocks.length ? 0 : blocks[0].number + 1;
+  }
+
   getNumberOfPages() {
-    if (!this.numberOfBlocks) {
-      let blocks = this.props.blocks;
-      if (blocks.length === 0) {
-        this.numberOfBlocks = 0;
-      } else {
-        this.numberOfBlocks = blocks[blocks.length - 1].number - 1;
-      }
-    }
-    return Math.ceil(this.numberOfBlocks / MAX_BLOCKS);
+    return Math.ceil(this.numberOfBlocks / this.numBlocksToDisplay);
   }
 
   changePage(newPage) {
     this.setState({currentPage: newPage});
-
-    this.props.fetchBlocks((newPage * MAX_BLOCKS) + MAX_BLOCKS);
+    this.props.fetchBlocks(
+      this.numberOfBlocks - 1 - (this.numBlocksToDisplay * (newPage - 1))
+    );
   }
 
   getCurrentBlocks() {
-    const currentPage = this.state.currentPage || this.getNumberOfPages();
-    return this.props.blocks.filter(block => block.number <= (currentPage * MAX_BLOCKS) + MAX_BLOCKS &&
-      block.number > currentPage * MAX_BLOCKS);
+    return this.props.blocks
+      .filter(block => {
+        const index = (
+          (this.numberOfBlocks -
+           (this.numBlocksToDisplay * (this.state.currentPage - 1))) -
+            block.number
+        );
+        return index <= this.numBlocksToDisplay && index > 0;
+      });
   }
 
   render() {
     const newBlocks = this.getCurrentBlocks();
-    if (newBlocks.length) {
-      this.currentBlocks = newBlocks;
-    }
     return (
       <React.Fragment>
-        <PageHead title="Blocks" enabled={this.props.overridePageHead} description="Summary of the most recent blocks" />
-        <DataWrapper shouldRender={this.currentBlocks.length > 0} {...this.props} render={() => (
-          <Blocks blocks={this.currentBlocks} numberOfPages={this.getNumberOfPages()}
-                  changePage={(newPage) => this.changePage(newPage)}
-                  currentPage={this.state.currentPage || this.getNumberOfPages()} />
-        )} />
+        <PageHead
+          title="Blocks"
+          enabled={this.props.overridePageHead}
+          description="Summary of the most recent blocks" />
+        <DataWrapper
+          shouldRender={true}
+          {...this.props}
+          render={() => (
+            <Blocks blocks={newBlocks}
+                    numberOfPages={this.getNumberOfPages()}
+                    changePage={(newPage) => this.changePage(newPage)}
+                    currentPage={this.state.currentPage} />
+          )} />
       </React.Fragment>
     );
   }
 }
 
 function mapStateToProps(state) {
-  return {blocks: getBlocks(state), error: state.errorMessage, loading: state.loading};
+  return {
+    blocks: getBlocks(state),
+    error: state.errorMessage,
+    loading: state.loading
+  };
 }
 
 BlocksContainer.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object),
   fetchBlocks: PropTypes.func,
   initBlockHeader: PropTypes.func,
+  numBlocksToDisplay: PropTypes.number,
   stopBlockHeader: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool,
diff --git a/packages/embark-ui/src/reducers/selectors.js b/packages/embark-ui/src/reducers/selectors.js
index 9f2e3f498..10c7b5040 100644
--- a/packages/embark-ui/src/reducers/selectors.js
+++ b/packages/embark-ui/src/reducers/selectors.js
@@ -249,4 +249,3 @@ export function getPreviewUrl(state) {
 export function getEditorOperationStatus(state) {
   return state.editorOperationStatus;
 }
-