diff --git a/public/css/bootstrap-theme.css b/public/css/bootstrap-theme.css
diff --git a/public/css/bootstrap-theme.css.map b/public/css/bootstrap-theme.css.map
diff --git a/public/css/bootstrap-theme.min.css b/public/css/bootstrap-theme.min.css
diff --git a/public/css/bootstrap-theme.min.css.map b/public/css/bootstrap-theme.min.css.map
diff --git a/public/css/bootstrap.css b/public/css/bootstrap.css
diff --git a/public/css/bootstrap.css.map b/public/css/bootstrap.css.map
diff --git a/public/css/bootstrap.min.css b/public/css/bootstrap.min.css
diff --git a/public/css/bootstrap.min.css.map b/public/css/bootstrap.min.css.map
diff --git a/public/fonts/glyphicons-halflings-regular.eot b/public/fonts/glyphicons-halflings-regular.eot
diff --git a/public/fonts/glyphicons-halflings-regular.svg b/public/fonts/glyphicons-halflings-regular.svg
diff --git a/public/fonts/glyphicons-halflings-regular.ttf b/public/fonts/glyphicons-halflings-regular.ttf
diff --git a/public/fonts/glyphicons-halflings-regular.woff b/public/fonts/glyphicons-halflings-regular.woff
diff --git a/public/fonts/glyphicons-halflings-regular.woff2 b/public/fonts/glyphicons-halflings-regular.woff2
diff --git a/public/js/bootstrap.js b/public/js/bootstrap.js
diff --git a/public/js/bootstrap.min.js b/public/js/bootstrap.min.js
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,37 +1,37 @@
 <% include partials/header %>
 
-<div class="jumbotron">
+  <div class="bg">
+    <h1 class="jumboTitle">The Cactaceae</h1>
+  </div>
+
+
+<!-- <div class="jumbotron">
     <div class="container">
-        <hr>
+
         <hr>
             <div class="container header">
                 <h1 id="header">THE CACTACEAE</h1>
                 <h3>descriptions and information of plants of the succulent order</h3>
             </div>
         <hr>
-        <hr>
     </div>
-</div>
-<!--<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>-->
-<!--  <div class="grid-item"></div>-->
-<!--  <div class="grid-item"></div>-->
-<!--  ...-->
-<!--</div>-->
+</div> -->
+
 
         <div class="grid" data-masonry='{"gutter": 10, "isFitWidth": true,"itemSelector": ".grid-item" }'>
             <% succulents.forEach(function(succulents){ %>
-                
+
                 <div class="grid-item">
                     <h6 class="boxTitle"><%= succulents.scienceName %></h6>
                     <a href="/succulents/<%= succulents._id %>">
                         <div class="thumbnail">
                         <img src="./uploads/<%= succulents.image %>">
-                        </a> 
+                        </a>
                         </div>
                     </div>
             <% }); %>
 </div>
 
 
 
-<% include partials/footer %>
+<% include partials/footer %>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -2,25 +2,42 @@
     <html>
         <head>
         <!-- FONTS/BOOTSCRIPT/STYLES -->
-        <link href="https://fonts.googleapis.com/css?family=Cormorant+SC" rel="stylesheet">
-        <link rel="stylesheet" type="text/css" href="/public/css/bootstrap.css">
+        <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans" rel="stylesheet">
         <link rel="stylesheet" type="text/css" href="/public/css/app.css">
-        
+
         <!-- JQUERY/SCRIPTS -->
         <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
-       
+
         <!-- Package CDN's -->
         <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
         <script src="../public/js/imagesLoaded.js"></script>
-        <title>The Cactacea</title>
+        <title></title>
         </head>
         <body>
-
 
+        <nav class="navbar navbar-default fixed-top">
+          <div class="container-fluid fixed-top">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header fixed-top">
+              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                <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="/"><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></a>
+            </div>
 
-
-
-
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+              <ul class="nav navbar-nav">
+                <li><a href="/">Learn</a></li>
+                <li><a href="/">About</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </div><!-- /.navbar-collapse -->
+          </div><!-- /.container-fluid -->
+        </nav>