diff --git a/app/controllers/blocks.js b/app/controllers/blocks.js
index 2904efd4..d9c9f89c 100644
--- a/app/controllers/blocks.js
+++ b/app/controllers/blocks.js
@@ -33,7 +33,7 @@ exports.show = function(req, res) {
  * List of blocks at HomePage
  */
 exports.last_blocks = function(req, res) {
-  Block.find().limit(7).exec(function(err, blocks) {
+  Block.find().sort({time:-1}).limit(7).exec(function(err, blocks) {
     if (err) {
       res.render('error', {
         status: 500
diff --git a/app/models/Block.js b/app/models/Block.js
index 63ef58d7..ee68b94d 100644
--- a/app/models/Block.js
+++ b/app/models/Block.js
@@ -19,6 +19,7 @@ var BlockSchema = new Schema({
     unique: true,
   },
   size: Number,
+  height: Number,
   confirmations: Number,
   version: Number,
   merkleroot: String,
@@ -93,4 +94,4 @@ BlockSchema.statics.fromHash = function(hash, cb) {
   }).exec(cb);
 };
 
-mongoose.model('Block', BlockSchema);
+module.exports = mongoose.model('Block', BlockSchema);
diff --git a/public/js/config.js b/public/js/config.js
index c4b7d3eb..35fe3836 100755
--- a/public/js/config.js
+++ b/public/js/config.js
@@ -4,6 +4,9 @@
 angular.module('mystery').config(['$routeProvider',
   function($routeProvider) {
     $routeProvider.
+    when('/block/:blockHash', {
+      templateUrl: 'views/block.html'
+    }).
     when('/', {
       templateUrl: 'views/index.html'
     }).
diff --git a/public/js/controllers/blocks.js b/public/js/controllers/blocks.js
index 2b708cb5..98e88010 100644
--- a/public/js/controllers/blocks.js
+++ b/public/js/controllers/blocks.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('mystery.blocks').controller('BlocksController', ['$scope', '$routeParams', '$location', 'Global', 'Blocks', function ($scope, $routeParams, $location, Global, Blocks) {
+angular.module('mystery.blocks').controller('BlocksController', ['$scope', '$routeParams', '$location', 'Global', 'Block', 'Blocks', function ($scope, $routeParams, $location, Global, Block, Blocks) {
   $scope.global = Global;
 
   $scope.list_blocks = function() {
@@ -17,6 +17,14 @@ angular.module('mystery.blocks').controller('BlocksController', ['$scope', '$rou
     });
   };
 
+  $scope.findOne = function() {
+    Block.get({
+      blockHash: $routeParams.blockHash
+    }, function(block) {
+      $scope.block = block;
+    });
+  };
+
   // for avoid warning. please remove when you use Blocks
   $scope.blocks = Blocks;
 }]);
diff --git a/public/js/controllers/header.js b/public/js/controllers/header.js
index 039a5ac2..8dddc143 100755
--- a/public/js/controllers/header.js
+++ b/public/js/controllers/header.js
@@ -4,11 +4,8 @@ angular.module('mystery.system').controller('HeaderController', ['$scope', 'Glob
   $scope.global = Global;
 
   $scope.menu = [{
-    'title': 'Articles',
-    'link': 'articles'
-  }, {
-    'title': 'Create New Article',
-    'link': 'articles/create'
+    'title': 'Blocks',
+    'link': 'blocks'
   }];
 
   $scope.isCollapsed = false;
diff --git a/public/js/services/blocks.js b/public/js/services/blocks.js
index 6c827a6b..69185f1e 100644
--- a/public/js/services/blocks.js
+++ b/public/js/services/blocks.js
@@ -1,5 +1,11 @@
 'use strict';
 
+angular.module('mystery.blocks').factory('Block', ['$resource', function($resource) {
+  return $resource('block/:blockHash', {
+    blockHash: '@blockHash'
+  });
+}]);
+
 angular.module('mystery.blocks').factory('Blocks', ['$resource', function($resource) {
   return $resource('/api/blocks');
 }]);
diff --git a/public/views/block.html b/public/views/block.html
new file mode 100644
index 00000000..686a6ade
--- /dev/null
+++ b/public/views/block.html
@@ -0,0 +1,23 @@
+<section data-ng-controller="BlocksController" data-ng-init="findOne()">
+  <div class="page-header">
+    <h1>Block Page</h1>
+  </div>
+  <table class="table table-striped">
+    <thead>
+      <th>Height</th>
+      <th>Age</th>
+      <th>Transactions</th>
+      <th>Confirmations</th>
+      <th>Size (kB)</th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{block.height}}</td>
+        <td>{{block.time | date:'short'}}</td>
+        <td>{{block.tx.length }}</td>
+        <td>{{block.confirmations}}</td>
+        <td>{{block.size / 1024}}</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
\ No newline at end of file
diff --git a/public/views/header.html b/public/views/header.html
index 70189e79..fb034edb 100755
--- a/public/views/header.html
+++ b/public/views/header.html
@@ -6,13 +6,13 @@
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
     </button>
-    <a class="navbar-brand" href="#">Mystery</a>
+    <a class="navbar-brand" href="#!">Mystery</a>
   </div>
   <div class="collapse navbar-collapse">
     <ul class="nav navbar-nav">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#about">About</a></li>
-      <li><a href="#contact">Contact</a></li>
+      <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" ng-class="{active: $uiRoute}">
+        <a href="#!/{{item.link}}">{{item.title}}</a>
+      </li>
     </ul>
   </div>
 </div>
diff --git a/public/views/index.html b/public/views/index.html
index d84010fb..953dc31b 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -2,9 +2,22 @@
   <div class="page-header">
     <h1>Hello BitPay!</h1>
   </div>
-  <ul>
-    <li data-ng-repeat="block in blocks">
-      <span>{{block.hash}}</span>
-    </li>
-  </ul>
+  <table class="table table-striped">
+    <thead>
+      <th>Height</th>
+      <th>Age</th>
+      <th>Transactions</th>
+      <th>Confirmations</th>
+      <th>Size (kB)</th>
+    </thead>
+    <tbody>
+      <tr data-ng-repeat="block in blocks">
+        <td><a href="#!/block/{{block.hash}}">{{block.height}}</a></td>
+        <td>{{block.time | date:'short'}}</td>
+        <td>{{block.tx.length }}</td>
+        <td>{{block.confirmations}}</td>
+        <td>{{block.size / 1024}}</td>
+      </tr>
+    </tbody>
+  </table>
 </section>