diff --git a/src/index.html b/src/index.html
index 04bd19e..087c5ef 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,7 @@
     <nav class="top">
       <div class="bar blue card left-align large">
         <a
-          class="bar-item button hide-medium hide-large right padding-large hover-white large blue"
+          class="bar-item button  hide-large right padding-large hover-white large blue"
           href="javascript:void(0);"
           id="hamburger-button"
           onclick="toggleNav()"
@@ -23,15 +23,15 @@
           ><i class="fa fa-bars"></i
         ></a>
         <!-- TODO: Fix Issue, Desktop Nav Is Visible on Mobile -->
-        <a id="nav-logo" class="bar-item button padding-large white">JobSimulator.Dev</a>
-        <a id="nav-challenges" class="bar-item button padding-large hover-white">Browse Challenges</a>
-        <a id="nav-signup" class="bar-item button padding-large hover-white">Sign Up</a>
+        <a id="nav-logo" class="bar-item button padding-large white " href='#header'>JobSimulator.Dev</a>
+        <a id="nav-challenges" class="bar-item button hide-small padding-large hover-white "  href='#challenges'>Browse Challenges</a>
+        <a id="nav-signup" class="bar-item button hide-small padding-large hover-white " href='#signup'>Sign Up</a>
       </div>
 
       <!-- Navbar on small screens -->
-      <div id="mobile-nav" class="bar-block white hide hide-large hide-medium large">
-        <a id="mobile-nav-challenges" class="bar-item button padding-large">Browse Challenges</a>
-        <a id="mobile-nav-signup" class="bar-item button padding-large">Sign Up</a>
+      <div id="mobile-nav" class="bar-block white hide hide-large  large" >
+        <a id="mobile-nav-challenges" class="bar-item button padding-large" href='#challenges'>Browse Challenges</a>
+        <a id="mobile-nav-signup" class="bar-item button padding-large" href='#signup'>Sign Up</a>
       </div>
     </nav>
 
diff --git a/src/script.js b/src/script.js
index 529f585..33cec52 100644
--- a/src/script.js
+++ b/src/script.js
@@ -19,11 +19,30 @@ let resetMessage = () => {
   document.getElementById("empty-error-message").hidden = true;
 };
 
+function pushUserToArray(usersTable,email){
+  usersTable.push({username:email})
+  renderSuccess()
+
+}
+
+
+
 addEventListener("submit", (event) => {
   event.preventDefault();
-  resetMessage();
+ resetMessage()
 
   let email = document.getElementById("email").value;
+ 
+  if(email === ''){
+    renderEmailEmptyError()
+  }else{
+    var index = usersTable.findIndex(x => x.username == email)
+    index === -1 ? pushUserToArray(usersTable,email): renderEmailTakenError()
+
+  }
+
+
+  console.log(usersTable)
 
   // TODO: Show Correct Status Messages on Signup Form
   // 1. successful signup
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..6fff854 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -669,10 +669,12 @@ form > span {
 
 #jumbo-image {
   max-height: 20rem;
+  filter: invert(1)
+
   /* TODO: Invert banner colors using CSS */
 }
 
-@media (max-width: 600px) {
+@media (max-width: 980px) {
   .modal-content {
     margin: 0 10px;
     width: auto !important;
@@ -876,8 +878,7 @@ form > span {
 
 #challenge-grid {
   display: grid;
-  /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */
-  grid-template-columns: none;
+  grid-template-columns: auto auto;
   grid-auto-rows: 10rem;
   gap: 1rem;
   padding-top: 2rem;