diff --git a/public/css/common.css b/public/css/common.css
index 8853a578..d24c69a2 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -10,6 +10,7 @@
 -------------------------------------------------- */
 html,
 body {
+  color: #373D42;
   font-family: Ubuntu, sans-serif;
   height: 100%;
   /* The html and body elements cannot have any padding or margin. */
@@ -74,13 +75,53 @@ body {
   line-height: 18px;
 }
 
+.col-gray {
+  background-color: #F8F8F8;
+  padding: 15px;
+  margin-top: 10px;
+  width: 350px;
+  height: 89%;
+  border-radius: 5px;
+}
+
+.col-gray .address {
+  float: right;
+  display: block;
+  width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.block-id {
+  background: #373D42;
+  border: 3px solid #FFFFFF;
+  width: 165px;
+  height: 165px;
+  margin: 10px auto;
+  border-radius: :;px;
+}
+
+.block-id h1 {
+  font-family: Ubuntu-Medium;
+  font-size: 24px;
+  color: #FFFFFF;
+  line-height: 30px;
+  text-align: center;
+}
+
+.icon-block {
+  font-size: 27px;
+  color: white;
+  margin-top:  20px;
+}
+
 /* Set the fixed height of the footer here */
 #footer {
   height: 60px;
   background-color: #f5f5f5;
 }
 
-
 /* Custom page CSS
 -------------------------------------------------- */
 /* Not required for template or sticky footer method. */
@@ -102,7 +143,7 @@ body {
 }
 
 .address {
-  font-size: 10px;
+  font-size: 11px;
 }
 
 #search { width: 400px; }
diff --git a/public/views/block.html b/public/views/block.html
index b843503f..f7c1c919 100644
--- a/public/views/block.html
+++ b/public/views/block.html
@@ -1,29 +1,79 @@
 <section data-ng-controller="BlocksController" data-ng-init="findOne()">
-  <div class="page-header">
-    <h1 data-ng-if="block">Block #{{ block.height }}</h1>
-  </div>
-
   <div class="row">
-    <div class="col-md-6">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title">Summary</h3>
+    <div class="col-md-4">
+      <div class="bs-sidebar hidden-print affix  col-gray">
+        <div class="block-id">
+          <div class="icon-block text-center">
+            <span class="glyphicon glyphicon-list-alt"></span>
+          </div>
+          <h1 data-ng-if="block">Block #{{ block.height }}</h1>
         </div>
-        <div class="panel-body">
-          <table class="table table-striped">
+
+        <div data-ng-show="!tx.isCoinBase">
+          <div class="panel-heading">
+            <h3>Hashes</h3>
+          </div>
+          <div class="panel-body">
+            <table class="table table-striped">
+              <tbody>
+              <tr>
+                <td>Hash</td>
+                <td><a class="address" href="/#!/block/{{block.hash}}">{{block.hash}}</a></td>
+              </tr>
+              <tr>
+                <td>Previous Block</td>
+                <td><a class="address" href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td>
+              </tr>
+              <tr>
+                <td>Next Block</td>
+                <td><a class="address" href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td>
+              </tr>
+              <tr>
+                <td>Merkle Root</td>
+                <td> <p class="address"> {{block.merkleroot}} </p> </td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
+    </div> <!-- END OF COL-GRAY   -->   
+
+    <div class="col-md-8">
+      <h3>Summary</h3>
+      <div class="row">
+        <div class="col-md-6">
+          <table class="table">
             <tbody>
-            <tr>
-              <td>Number Of Transactions</td>
-              <td>{{block.tx.length}}<td>
-            </tr>
-            <tr>
-              <td>Height</td>
-              <td>{{block.height}}</td>
-            </tr>
-            <tr>
-              <td>Timestamp</td>
-              <td>{{block.time * 1000 | date:'medium'}}</td>
-            </tr>
+
+
+
+              <tr>
+                <td> <strong> Number Of Transactions </strong> </td>
+                <td class="text-right text-muted">{{block.tx.length}}<td>
+              </tr>
+              <tr>
+                <td> <strong> Output Total</strong></td>
+                <td class="text-right text-muted">--</td>
+              </tr>
+              <tr>
+                <td> <strong> Estimated Transaction Volume </strong></td>
+                <td class="text-right text-muted">--</td>
+              </tr>
+              <tr>
+                <td> <strong> Transaction Fees </strong></td>
+                <td class="text-right text-muted">--</td>
+              </tr>
+              <tr>
+                <td> <strong> Height </strong></td>
+                <td class="text-right text-muted">{{block.height}}</td>
+              </tr>
+              <tr>
+                <td> <strong> Timestamp </strong></td>
+                <td class="text-right text-muted">{{block.time * 1000 | date:'medium'}}</td>
+              </tr>
+
             <tr>
               <td>Difficulty</td>
               <td>{{block.difficulty}}</td>
@@ -47,36 +97,51 @@
             </tbody>
           </table>
         </div>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="panel panel-default" data-ng-show="!tx.isCoinBase">
-        <div class="panel-heading">
-          <h3 class="panel-title">Hashes</h3>
-        </div>
-        <div class="panel-body">
-          <table class="table table-striped">
+        <div class="col-md-6">
+          <table class="table">
             <tbody>
-            <tr>
-              <td>Hash</td>
-              <td><a class="address" href="/#!/block/{{block.hash}}">{{block.hash}}</a></td>
-            </tr>
-            <tr>
-              <td>Previous Block</td>
-              <td><a class="address" href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td>
-            </tr>
-            <tr>
-              <td>Next Block</td>
-              <td><a class="address" href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td>
-            </tr>
-            <tr>
-              <td>Merkle Root</td>
-              <td class="address">{{block.merkleroot}}</td>
-            </tr>
+              <tr>
+                <td> <strong> Relayed By </strong></td>
+                <td class="text-right text-muted">--</td>
+              </tr>
+              <tr>
+                <td> <strong> Difficulty </strong></td>
+                <td class="text-right text-muted">{{block.difficulty}}</td>
+              </tr>
+              <tr>
+                <td> <strong> Bits </strong></td>
+                <td class="text-right text-muted">{{block.bits}}</td>
+              </tr>
+              <tr>
+                <td> <strong> Size </strong></td>
+                <td class="text-right text-muted">{{block.size}}</td>
+              </tr>
+              <tr>
+                <td> <strong> Version </strong></td>
+                <td class="text-right text-muted">{{block.version}}</td>
+              </tr>
+              <tr>
+                <td> <strong> Nonce </strong></td>
+                <td class="text-right text-muted">{{block.nonce}}</td>
+              </tr>
             </tbody>
           </table>
         </div>
-      </div>
+      </div><!--  END OF ROW -->
+
+      <h2>Transactions <small>Transactions contained within this block</small></h2>
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Hash</th>
+          </tr>
+        </thead>
+        <tbody>
+        <tr data-ng-repeat="tx in block.tx track by $index">
+          <td><a href="/#!/tx/{{tx}}">{{tx}}</a></td>
+        </tr>
+        </tbody>
+      </table>
     </div>
   </div>