diff --git a/stagestatus/templates/base.html b/stagestatus/templates/base.html
index d378006..87218c2 100644
--- a/stagestatus/templates/base.html
+++ b/stagestatus/templates/base.html
@@ -2,12 +2,9 @@
 <html lang="en" ng-app>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-    <meta name="description" content="{% block description %}{% endblock %}" />
-    <meta name="keywords" content="{% block keywords %}{% endblock %}" />
-    <meta name="viewport" content="{% block viewport %}width=device-width"{% endblock %}>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <title>{% block title %}stagestatus{% endblock title %}</title>
+    <title>{% block title %}Staging Server Status{% endblock title %}</title>
 
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -16,19 +13,33 @@
 
     <link rel="icon" type="image/gif" href="{% static 'img/favicon.gif' %}">
 
+    <link href="{% static 'vendor/sb-admin-2/css/sb-admin-2.css' %}" rel="stylesheet">
+    <link href="{% static 'vendor/sb-admin-2/css/bootstrap.min.css' %}" rel="stylesheet">
+    <link href="{% static 'vendor/sb-admin-2/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
+
     {% block css %}
     <link href="{% static 'css/styles.css' %}" rel="stylesheet">
     {% endblock %}
 
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
   </head>
 
   <body>
-    <div class="container">
-
-      {% block content %}
-        <p>Use this document as a way to quick start any new project.</p>
-      {% endblock content %}
+    <div class="wrapper">
+        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
+          {% include 'navigation.html' %}
+          </nav>
 
+        <div id="page-wrapper">
+        {% block content %}
+          <p>Use this document as a way to quick start any new project.</p>
+        {% endblock content %}
+        </div>
     </div> <!-- /container -->
 
 
diff --git a/stagestatus/templates/index.html b/stagestatus/templates/index.html
deleted file mode 100644
index e965047..0000000
--- a/stagestatus/templates/index.html
+++ /dev/null
@@ -1 +0,0 @@
-Hello
diff --git a/stagestatus/templates/machines/machine_list.html b/stagestatus/templates/machines/machine_list.html
index 2246fac..660ad1f 100644
--- a/stagestatus/templates/machines/machine_list.html
+++ b/stagestatus/templates/machines/machine_list.html
@@ -1,29 +1,34 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Staging Machines</title>
-    <style>
-        .machine_available {
-            background-color: green;
-        }
-        .machine_reserved{
-            background-color: red;
-        }
-    </style>
-</head>
-<body>
-    <ul>
+{% extends "base.html" %}
+
+{% block content %}
+
     {% for machine in machines %}
-        <li
-            {% if machine.is_reserved %}
-                class="machine_reserved"
-            {% else %}
-                class="machine_available"
-            {% endif %}"
-        >
-            {% include "machines/machine_detail.html" with machine=machine %}
-        </li>
+        <div class="col-lg-3 col-md-6">
+            <div class="panel panel-{% if machine.is_reserved %}red{% else %}green{% endif %}">
+                <div class="panel-heading">
+                    <div class="row">
+                        <div class="col-xs-3">
+                            <i class="fa fa-tasks fa-5x"></i>
+                        </div>
+                        <div class="col-xs-9 text-right">
+                            <div class="huge">{{ machine.hostname }}</div>
+                            <div>{{ machine.status.git_branch }}</div>
+                        </div>
+                    </div>
+                </div>
+                <a href='{% url "machine-detail" machine.hostname %}'>
+                    <div class="panel-footer">
+                        {% if machine.is_reserved %}
+                            <span class="pull-left">View Details</span>
+                        {% else %}
+                            <span class="pull-left">Reserve</span>
+                        {% endif %}
+                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
+                        <div class="clearfix"></div>
+                    </div>
+                </a>
+            </div>
+        </div>
     {% endfor %}
-    </ul>
-</body>
-</html>
+
+{% endblock %}
diff --git a/stagestatus/templates/navigation.html b/stagestatus/templates/navigation.html
new file mode 100644
index 0000000..985bbaa
--- /dev/null
+++ b/stagestatus/templates/navigation.html
@@ -0,0 +1,16 @@
+<div class="navbar-header">
+    <a class="navbar-brand" href="/">StageStatus</a>
+</div>
+<div class="navbar-default sidebar" role="navigation">
+    <div class="sidebar-nav">
+        <ul class="nav" id="side-menu">
+            <li>
+                <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
+            </li>
+            <li>
+                <a href="index.html"><i class="fa fa-bookmark-o fa-fw"></i> Reserved</a>
+                <a href="index.html"><i class="fa fa-square-o fa-fw"></i> Free</a>
+            </li>
+        </ul>
+    </div>
+</div>
