diff --git a/project/html/helpers/head.ejs b/project/html/helpers/head.ejs
index d40b02e2..43baa6a6 100644
--- a/project/html/helpers/head.ejs
+++ b/project/html/helpers/head.ejs
@@ -23,5 +23,7 @@
 <!-- then bootstrap -->
 <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
+<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..ff6ac6f7
--- /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="/album">Album</a></li>
+    <li class="nav-item"><a class="nav-link" href="/history">History</a></li>
+</ul>
\ No newline at end of file
diff --git a/project/html/pages/album.ejs b/project/html/pages/album.ejs
new file mode 100644
index 00000000..2bcebbe4
--- /dev/null
+++ b/project/html/pages/album.ejs
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <% include ../helpers/head %>
+</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">
+    <% include ../helpers/navbar %>
+
+  
+    <h1>Album of the Day</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/history.ejs b/project/html/pages/history.ejs
new file mode 100644
index 00000000..488b4a06
--- /dev/null
+++ b/project/html/pages/history.ejs
@@ -0,0 +1,27 @@
+<html lang="en">
+<head>
+    <% include ../helpers/head %>
+</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">
+    <% include ../helpers/navbar %>
+
+    <h1>Scores History</h1>
+
+  </div>
+
+  <input class="search" type="text" placeholder="Search for a city">
+  <button type="button" onClick="searchWeather()">Search</button>
+
+  <div class="error-message"></div>
+  
+<div class ="city"></div>
+
+<div class="temp"></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..157c9f2a 100644
--- a/project/html/pages/index.ejs
+++ b/project/html/pages/index.ejs
@@ -7,9 +7,9 @@
   <!-- the classes 'page-header' and 'btn btn-dark' create bootstrap components.  -->
   <!-- Check out more components here: http://getbootstrap.com/components/ -->
   <div class="page-header">
-
+    <% include ../helpers/navbar %>
   
-    <h1>My Web App</h1>
+    <h1>Music Salon</h1>
   </div>
 
   <p>Click on the button for a surprise.</p>
diff --git a/project/js/main.js b/project/js/main.js
index c045cac2..e227a0c5 100644
--- a/project/js/main.js
+++ b/project/js/main.js
@@ -1,3 +1,30 @@
+$(document).ready(function(){
+  getWeather();
+})
+
+function getWeather(searchQuery) {
+  // var url = "https://api.openweathermap.org/data/2.5/weather?q=Boston&APPID="+apiKey; // Need to figure out how to make sure Heroku is storing my API key
+  
+  var url = "https://api.openweathermap.org/data/2.5/weather?q="+searchQuery+"&units=imperial&APPID=de7c147ddb0ac76a8ca839042b94c47a"
+
+  $(".city").text("");
+  $(".temp").text("");
+  $(".error-message").text("");
+
+  $.ajax(url,{success: function(data){
+    $(".city").text(data.name);
+    $(".temp").text(data.main.temp);
+  //  console.log(data); // To view in the console log
+  }, error: function(error){
+    $(".error-message").text("An error occurred");
+  }})
+}
+
+function searchWeather() {
+  var searchQuery = $(".search").val();
+  getWeather(searchQuery);
+}
+
 function showPicture(){
   // use jQuery ($ is shorthand) to find the div on the page and then change the html
   // 'rounded-circle' is a bootstrap thing! Check out more here: http://getbootstrap.com/css/
diff --git a/project/start.js b/project/start.js
index bbe5c402..11ee91b8 100644
--- a/project/start.js
+++ b/project/start.js
@@ -13,6 +13,15 @@ app.get('/', function(request, response) {
   response.render('pages/index');
 });
 
+app.get('/album', function(request, response) {
+  response.render('pages/album');
+});
+
+app.get('/history', function(request, response) {
+  response.render('pages/history');
+});
+
+
 app.listen(app.get('port'), function() {
   console.log('Node app is running on port', app.get('port'));
 });
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 00000000..fd7d3e06
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1 @@
+requests==2.25.1
\ No newline at end of file
