diff --git a/footbar.php b/footbar.php
index 7ae1f7b..565739a 100644
--- a/footbar.php
+++ b/footbar.php
@@ -26,6 +26,35 @@
         </div>
     </div>
     <!-- <script src="script.js"></script> -->
+    
+    <!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
 </body>
 
-</html>
\ No newline at end of file
+    
+    
+</html>
+
diff --git a/index.html b/index.html
index e78b098..6334508 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,14 @@ <h1>Welcome to Shuttergram! </h1>
         </div>
         <div class="img-holder mt-3"><img src="homepage/images/shuttergramblack.png" style="height: 70vh; width: auto" alt="phone" class="img-fluid"></div>
     </header>
-
+<header class="bg-gradient" id="not_home">
+        <div class="container mt-5">
+            <h1>Welcome to Shuttergram! </h1>
+            <br> <h3 class="whitefont"> Photography is the story I fail to put into words!</h3>
+            <p class="tagline">Post. View. Save. learn. All at one stop - Shuttergram</p>
+        </div>
+        <div class="img-holder mt-3"><img src="homepage/images/shuttergramblack.png" style="height: 70vh; width: auto" alt="phone" class="img-fluid"></div>
+    </header>
     
 
     <div class="section light-bg" id="features">
diff --git a/upload.css b/upload.css
index d5c8f4b..4160c86 100644
--- a/upload.css
+++ b/upload.css
@@ -1,4 +1,40 @@
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
 
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
 
 .container{
     height: 100vh;