diff --git a/bower.json b/bower.json
index c4ab28e..78412b7 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,7 @@
     "mustache": "~0.7.2",
     "flight-components": "0.1.1",
     "underscore-amd": "~1.5.0",
-    "bootstrap": "~3.0.0",
+    "bootstrap": "~3.2.0",
     "moment": "~2.1.0"
   },
   "devDependencies": {
diff --git a/public/css/main.css b/public/css/main.css
index dc99945..3cf3598 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -3,24 +3,22 @@
    ========================================================================== */
 
 .site-header {
-  margin: 2.5em -1.25em;
-  border-radius: 4px;
-  padding: 1em;
-  vertical-align: center;
+  margin: 40px 0;
 }
 
 .site-title {
-  margin: 0;
+  display: inline-block;
+  vertical-align: bottom;
+  margin: 0 0 0 0.2em;
   font-size: 5em;
   font-weight: normal;
   line-height: 75px;
 }
 
 .site-tagline {
-  margin: 0;
+  margin-top: 40px;
   font-size: 1.75em;
   font-weight: normal;
-  line-height: 75px;
 }
 
 .site-main img {
@@ -69,3 +67,7 @@
 #footer {
   margin-bottom:10px;
 }
+
+.u-overflowRegion {
+  overflow: auto;
+}
diff --git a/public/index.html b/public/index.html
index b66712f..e7b7524 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,14 +18,12 @@
 
       <div class="site-header" role="banner">
         <div class="row">
-          <div class="col-lg-1">
+          <div class="col-sm-6">
             <img src="img/flight-logo.png" width="75" height="75" alt="Twitter logo">
-          </div>
-          <div class="col-lg-2">
             <h1 class="site-title">Flight</h1>
           </div>
-          <div class="pull-right">
-            <h2 class="site-tagline">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
+          <div class="col-sm-6">
+            <h2 class="site-tagline text-right">Discover <a href='http://flightjs.github.io/'>Flight</a> components.</h2>
           </div>
         </div>
         <hr/>
@@ -37,37 +35,48 @@ <h2 class="site-tagline">Discover <a href='http://flightjs.github.io/'>Flight</a
 
       <div class='components-wrapper'>
         <div class="row">
-          <ul id='top-forks' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Most forked</li>
-          </ul>
-          <ul id='top-stars' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Most starred</li>
-          </ul>
-          <ul id='recently-created' class='top-list col-lg-4 nav nav-pills nav-stacked'>
-            <li class='header'>Recently created</li>
-          </ul>
+          <div class="col-md-4">
+            <div id='top-forks' class='top-list list-group active'>
+              <div class='list-group-item header'>Most forked</div>
+            </div>
+          </div>
+          <div class="col-md-4">
+            <ul id='top-stars' class='top-list list-group active'>
+              <li class='list-group-item header'>Most starred</li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <ul id='recently-created' class='top-list list-group active'>
+              <li class='list-group-item header'>Recently created</li>
+            </ul>
+          </div>
         </div>
 
-        <div class="main-section row">
-          <div class="col-lg-4 col-lg-offset-4">
-            <input type='text' id='filter' class='form-control input-md' placeholder='Search for Flight components' />
+        <div class="main-section">
+          <div class="row">
+            <div class="col-md-4 col-md-offset-4 form-group">
+              <input type='text' id='filter' class='form-control input-md' placeholder='Search for Flight components' />
+            </div>
+          </div>
+
+          <div class="u-overflowRegion">
+            <table id="components" class="table table-hover">
+              <thead>
+                <tr>
+                  <th> Name </th>
+                  <th> Description </th>
+                  <th> Owner </th>
+                  <th> Forks </th>
+                  <th> Stars </th>
+                </tr>
+              </thead>
+            </table>
           </div>
-          <table id="components" class="table table-hover">
-            <thead>
-              <tr>
-                <th> Name </th>
-                <th> Description </th>
-                <th> Owner </th>
-                <th> Forks </th>
-                <th> Stars </th>
-              </tr>
-            </thead>
-          </table>
         </div>
       </div>
 
       <div id='footer'>
-        This list is automatically generated from the <a href='http://sindresorhus.com/bower-components/'>Bower</a> components list. Components must be prefixed with <strong>"flight-"</strong> in order to be visible.
+        <p class="text-muted text-center">This list is automatically generated from the <a href='http://sindresorhus.com/bower-components/'>Bower</a> components list. Components must be prefixed with <strong>"flight-"</strong> in order to be visible.</p>
       </div>
     </div>
 
diff --git a/public/js/component/ui_top_components_list.js b/public/js/component/ui_top_components_list.js
index daaa4c8..009141b 100644
--- a/public/js/component/ui_top_components_list.js
+++ b/public/js/component/ui_top_components_list.js
@@ -30,11 +30,14 @@ define(function (require) {
 
 
     this.htmlFor = function (component) {
+      var template = [
+        '<a class="list-group-item" href="{{website}}">',
+          '<span class="badge">{{stat}}</span>',
+          '{{name}}',
+        '</a>'
+      ].join('\n');
       component.stat = this.attr.displayFunction(component[this.attr.compare]);
-      return Mustache.render(
-          "<li><a href='{{website}}'>{{name}}" +
-          "<span class='stat'>{{stat}}</span></a></li>"
-          , component);
+      return Mustache.render(template, component);
     };
     this.displayTopList = function (ev, data) {
       data.components.forEach(function (component) {