diff --git a/app/controllers/blocks.js b/app/controllers/blocks.js
index f08016a..0407c75 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 af173dc..ee68b94 100644
--- a/app/models/Block.js
+++ b/app/models/Block.js
@@ -94,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 fe68006..1e36afd 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 032b593..13b6bfd 100644
--- a/public/js/controllers/blocks.js
+++ b/public/js/controllers/blocks.js
@@ -3,6 +3,14 @@
 angular.module('mystery.blocks').controller('BlocksController', ['$scope', '$routeParams', '$location', 'Global', 'Blocks', function ($scope, $routeParams, $location, Global, Blocks) {
   $scope.global = Global;
   
+  $scope.findOne = function() {
+    Blocks.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 039a5ac..8dddc14 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 e60ded2..fe5cf40 100644
--- a/public/js/services/blocks.js
+++ b/public/js/services/blocks.js
@@ -1,5 +1,7 @@
 'use strict';
 
 angular.module('mystery.blocks').factory('Blocks', ['$resource', function($resource) {
-  return $resource;
+  return $resource('block/:blockHash', {
+    blockHash: '@blockHash'
+  });
 }]);
diff --git a/public/views/block.html b/public/views/block.html
new file mode 100644
index 0000000..686a6ad
--- /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 70189e7..fb034ed 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 d84010f..953dc31 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>