diff --git a/app/static/css/main.css b/app/static/css/main.css
index 3c7e9c1..487c3af 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -1,90 +1,5 @@
+/* Custom CSS */
 body {
-  margin: 0;
-  padding: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #444;
-}
-
-/*
- * Create dark grey header with a white logo
- */
-
-header {
-  background-color: #2B2B2B;
-  height: 35px;
-  width: 100%;
-  opacity: .9;
-  margin-bottom: 10px;
-}
-
-header h1.logo {
-  margin: 0;
-  font-size: 1.7em;
-  color: #fff;
-  text-transform: uppercase;
-  float: left;
-}
-
-header h1.logo:hover {
-  color: #fff;
-  text-decoration: none;
-}
-
-/*
- * Center the body content
- */
-
-.container {
-  width: 940px;
-  margin: 0 auto;
-}
-
-div.jumbo {
-  padding: 10px 0 30px 0;
-  background-color: #eeeeee;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-div.login {
-  padding: 10px 0 30px 0;
-  background-color: #eeeeee;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-}
-
-h2 {
-  font-size: 3em;
-  margin-top: 40px;
-  text-align: center;
-  letter-spacing: -2px;
-}
-
-h3 {
-  font-size: 1.7em;
-  font-weight: 100;
-  margin-top: 30px;
-  text-align: center;
-  letter-spacing: -1px;
-  color: #999;
-}
-
-.menu {
-  float: right;
-  margin-top: 8px;
-}
-
-.menu li {
-  display: inline;
-}
-
-.menu li + li {
-  margin-left: 35px;
-}
-
-.menu li a {
-  color: #999;
-  text-decoration: none;
+  min-height: 2000px;
+  padding-top: 70px;
 }
\ No newline at end of file
diff --git a/app/templates/home.html b/app/templates/home.html
index 1e0bf08..91b872c 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -1,6 +1,6 @@
 {% extends "layout.html" %}
 {% block content %}
-  <div class="jumbo">
+  <div class="jumbotron">
     <h2>Welcome to FoodBot</h2>
     <h3>This is the home page for FoodBot</h3>
   </div>
diff --git a/app/templates/layout.html b/app/templates/layout.html
index cef4cb0..772121c 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -1,35 +1,51 @@
 <!DOCTYPE html>
 <html>
   <head lang="en">
-      <meta charset="UTF-8">
-      <title>FoodBot</title>
-      <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>FoodBot</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+
   </head>
   <body>
-   
-    <header>
+    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
-        <h1 class="logo">FOODBOT</h1>
-        <nav>
-          <ul class="menu">
-              <li><a href="{{ url_for('home') }}">Home</a></li>
-              <li><a href="{{ url_for('stats') }}">Stats</a></li>
-              <li><a href="{{ url_for('about') }}">About</a></li>
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="{{ url_for('home') }}">FOODBOT</a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="{{ url_for('home') }}">Home</a></li>
+            <li><a href="{{ url_for('about') }}">About</a></li>
+            <li><a href="{{ url_for('stats') }}">Stats</a></li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
               {% if current_user.is_anonymous() %}
                   <li><a href="{{ url_for('login') }}">Login</a></li>
               {% else %}
+                  <li><a href="#">{{ current_user.username }}</a></li>
                   <li><a href="{{ url_for('logout') }}">Logout</a></li>
-                  <li>{{ current_user.username }}</li>
               {% endif %}
           </ul>
-        </nav>
+         </div><!--/.nav-collapse -->
       </div>
-    </header>
-     
+    </nav>
     <div class="container">
       {% block content %}
       {% endblock %}
     </div>
-     
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   </body>
 </html>
\ No newline at end of file
