diff --git a/css/style.css b/css/style.css
index 2a48093..846bf1e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -57,6 +57,25 @@ body {
   background-size: cover;
 }
 
+.nyc{
+  background: url(../images/nyc.jpg) no-repeat center center fixed; 
+}
+
+.sf{
+  background: url(../images/sf.jpg) no-repeat center center fixed; 
+}
+
+.la{
+  background: url(../images/la.jpg) no-repeat center center fixed; 
+}
+
+austin{
+  background: url(../images/austin.jpg) no-repeat center center fixed; 
+}
+
+.sydney{
+  background: url(../images/sydney.jpg) no-repeat center center fixed; 
+}
 
 /******************************************
 /* LAYOUT
diff --git a/index.html b/index.html
index 9582524..4514d6f 100644
--- a/index.html
+++ b/index.html
@@ -26,5 +26,6 @@ <h1>CitiPix</h1>
 			</div>
 			
 			<script src="js/jquery-2.1.4.js"></script>
+			<script src="js/app.js"></script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..e39fccd
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,31 @@
+$(function(){
+
+	//On click of the submit button
+	$("#submit-btn").click(function(){
+		//console.log("button clicked");
+		event.preventDefault();
+	//Capture the city entered
+		var city = $('#city-type').val();
+		//console.log(city);
+
+		if (city === "NYC" || city === "New York" || city === "New York City"){
+			$('body').attr('class', 'nyc');
+		} else if (city === "SF" || city === "San Fransisco" || city === "Bay Area"){
+			$('body').attr('class', 'sf');
+		} else if (city === "Los Angeles" || city === "LA" || city === "LAX"){
+			$('body').attr('class', 'la');
+		} else if (city === "Austin" || city === "ATX"){
+			$('body').attr('class', 'austin');
+		} else if (city === "Sydney" || city === "SYD"){
+			$('body').attr('class', 'sydney');
+
+		} else {
+			$('body').attr('class', '');
+		};
+
+		$('#city-type').val("");
+
+		});
+
+});
+