diff --git a/project/favicon.ico b/project/favicon.ico
new file mode 100644
index 00000000..1fcafa47
Binary files /dev/null and b/project/favicon.ico differ
diff --git a/project/html/helpers/head.ejs b/project/html/helpers/head.ejs
index d40b02e2..f70f5ce2 100644
--- a/project/html/helpers/head.ejs
+++ b/project/html/helpers/head.ejs
@@ -22,6 +22,8 @@
 
 <!-- then bootstrap -->
 <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<!-- api key for open weather-->
+<script>var apiKey="<%= process.env.API_KEY %>";</script>
 
 <!-- then our app's own js file -->
 <script src="js/main.js"></script>
diff --git a/project/html/helpers/navbar.ejs b/project/html/helpers/navbar.ejs
new file mode 100644
index 00000000..6c44a832
--- /dev/null
+++ b/project/html/helpers/navbar.ejs
@@ -0,0 +1,5 @@
+<ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+    <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
+    <li class="nav-item"><a class="nav-link" href="/projects">Projects</a></li>
+</ul>
\ No newline at end of file
diff --git a/project/html/pages/about.ejs b/project/html/pages/about.ejs
new file mode 100644
index 00000000..ca42ecf3
--- /dev/null
+++ b/project/html/pages/about.ejs
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <% include ../helpers/head %>
+    <% include ../helpers/navbar %>
+</head>
+
+<body>
+  <!-- the classes 'page-header' and 'btn btn-dark' create bootstrap components.  -->
+  <!-- Check out more components here: http://getbootstrap.com/components/ -->
+  <div class="page-header">
+
+  
+    <h1>Markquart Motors About</h1>
+  </div>
+
+  <p>Click on the button for a surprise.</p>
+
+  <button onClick="showPicture()" class="btn btn-dark">Click me</button>
+
+  <div id="image"></div>
+  
+</body>
+
+</html>
\ No newline at end of file
diff --git a/project/html/pages/index.ejs b/project/html/pages/index.ejs
index 7e8a0900..1fedd5e6 100644
--- a/project/html/pages/index.ejs
+++ b/project/html/pages/index.ejs
@@ -1,6 +1,7 @@
 <html lang="en">
 <head>
     <% include ../helpers/head %>
+    <% include ../helpers/navbar %>
 </head>
 
 <body>
@@ -9,15 +10,12 @@
   <div class="page-header">
 
   
-    <h1>My Web App</h1>
+    <h1>Markquart Weather Web Application</h1>
   </div>
 
-  <p>Click on the button for a surprise.</p>
+  <div class="city"></div>
+  <div class="temp"></div>
 
-  <button onClick="showPicture()" class="btn btn-dark">Click me</button>
-
-  <div id="image"></div>
-  
 </body>
 
 </html>
\ No newline at end of file
diff --git a/project/html/pages/index.ejs.html b/project/html/pages/index.ejs.html
new file mode 100644
index 00000000..1e5e8630
--- /dev/null
+++ b/project/html/pages/index.ejs.html
@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <% include ../helpers/head %>
+    <% include ../helpers/navbar %>
+</head>
+
+<body>
+  <!-- the classes 'page-header' and 'btn btn-dark' create bootstrap components.  -->
+  <!-- Check out more components here: http://getbootstrap.com/components/ -->
+  <div class="page-header">
+
+  
+    <h1>Markquart Motors Weather Web Application</h1>
+  </div>
+  <div class="city"></div>
+  <div class="temp"></div>
+
+  <p>Click on the button for a surprise.</p>
+
+  <button onClick="showPicture()" class="btn btn-dark">Click me</button>
+
+  <div id="image"></div>
+  
+</body>
+
+</html>
\ No newline at end of file
diff --git a/project/html/pages/projects.ejs b/project/html/pages/projects.ejs
new file mode 100644
index 00000000..7e810954
--- /dev/null
+++ b/project/html/pages/projects.ejs
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <% include ../helpers/head %>
+    <% include ../helpers/navbar %>
+</head>
+
+<body>
+  <!-- the classes 'page-header' and 'btn btn-dark' create bootstrap components.  -->
+  <!-- Check out more components here: http://getbootstrap.com/components/ -->
+  <div class="page-header">
+
+  
+    <h1>Markquart Motors Projects</h1>
+  </div>
+
+  <p>Click on the button for a surprise.</p>
+
+  <button onClick="showPicture()" class="btn btn-dark">Click me</button>
+
+  <div id="image"></div>
+  
+</body>
+
+</html>
\ No newline at end of file
diff --git a/project/images/favicon.ico b/project/images/favicon.ico
new file mode 100644
index 00000000..1fcafa47
Binary files /dev/null and b/project/images/favicon.ico differ
diff --git a/project/js/main.js b/project/js/main.js
index c045cac2..7fbbee5c 100644
--- a/project/js/main.js
+++ b/project/js/main.js
@@ -5,5 +5,18 @@ function showPicture(){
   $("p").html("High five! You're building your first web app!");
 
   // jQuery can do a lot of crazy stuff, so make sure to Google around to find out more
-  
+
+}
+$(document).ready(function(){
+  getWeather();
+})
+function getWeather() {
+  var url = "https://api.openweathermap.org/data/2.5/weather?q=Boston&units=imperial&APPID="+apiKey;
+  //23aa55a6b3d574a81b14488e59089627";
+  //"+apiKey
+
+  $.ajax(url,{success: function(data){
+    //shows data in javascript console log for debugging.
+    console.log(data);
+  }})
 }
\ No newline at end of file
diff --git a/project/start.js b/project/start.js
index bbe5c402..13912214 100644
--- a/project/start.js
+++ b/project/start.js
@@ -12,6 +12,12 @@ app.set('view engine', 'ejs');
 app.get('/', function(request, response) {
   response.render('pages/index');
 });
+app.get('/about', function(request, response) {
+  response.render('pages/about');
+});
+app.get('/projects', function(request, response) {
+  response.render('pages/projects');
+});
 
 app.listen(app.get('port'), function() {
   console.log('Node app is running on port', app.get('port'));
