diff --git a/src/index.html b/src/index.html
index 04bd19e..857a59e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,14 +4,19 @@
     <meta charset="utf-8" />
     <title>JobSimulator.Dev</title>
     <link rel="stylesheet" href="styles.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Lato"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <script src="script.js"></script>
   </head>
 
   <body>
     <!-- Navbar -->
-    <!-- TODO: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
     <nav class="top">
       <div class="bar blue card left-align large">
         <a
@@ -22,24 +27,57 @@
           title="Toggle Navigation Menu"
           ><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 padding-large hover-white hide-small"
+          href="#challenges"
+          >Browse Challenges</a
+        >
+        <a
+          id="nav-signup"
+          class="bar-item button padding-large hover-white hide-small"
+          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 hide-medium 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>
 
     <!-- Header -->
-    <header id="header" class="container white center" style="padding: 128px 16px">
-      <img id="jumbo-image" src="./banner-image.png" />
+    <header
+      id="header"
+      class="container white center"
+      style="padding: 128px 16px"
+    >
+      <img id="jumbo-image" src="./banner-image.png" alt="Banner image" />
       <h1 class="margin jumbo">Want to test your software dev skills?</h1>
-      <a href="#signup" class="button blue padding-large large margin-top">Sign Up</a>
+      <a href="#signup" class="button blue padding-large large margin-top"
+        >Sign Up</a
+      >
     </header>
 
     <section id="challenges" class="row-padding pink padding-256 container">
@@ -52,13 +90,22 @@ <h1>Browse Our Challenges</h1>
             href="https://github.com/developer-job-simulation/vanilla-login-form"
             >Vanilla Login Form</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/vanilla-table"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/vanilla-table"
             >Vanilla Table</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/react-ecommerce"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/react-ecommerce"
             >React Ecommerce</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/react-mui-table"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/react-mui-table"
             >React Table</a
           >
         </div>
@@ -70,9 +117,15 @@ <h1>Browse Our Challenges</h1>
         <div id="signup-form">
           <h1>Sign Up & Get Started</h1>
           <form>
-            <span id="success-message" class="success-message" hidden="true">Success!</span>
-            <span id="taken-error-message" class="error-message" hidden="true">Error: Email Already Taken</span>
-            <span id="empty-error-message" class="error-message" hidden="true">Error: Email Address Empty.</span>
+            <span id="success-message" class="success-message" hidden="true"
+              >Success!</span
+            >
+            <span id="taken-error-message" class="error-message" hidden="true"
+              >Error: Email Already Taken</span
+            >
+            <span id="empty-error-message" class="error-message" hidden="true"
+              >Error: Email Address Empty.</span
+            >
             <input id="email" type="email" placeholder="Enter your email" />
             <button>Submit</button>
           </form>
diff --git a/src/script.js b/src/script.js
index 529f585..7a05c0d 100644
--- a/src/script.js
+++ b/src/script.js
@@ -19,17 +19,32 @@ let resetMessage = () => {
   document.getElementById("empty-error-message").hidden = true;
 };
 
+let isNewEmail = (email) => {
+  return usersTable.filter((user) => user.username === email).length === 0;
+};
+
+let isEmptyEmail = (email) => {
+  return email.length === 0;
+};
+
+let addNewEmail = (email) => {
+  usersTable.push({ username: email });
+};
+
 addEventListener("submit", (event) => {
   event.preventDefault();
   resetMessage();
 
   let email = document.getElementById("email").value;
 
-  // TODO: Show Correct Status Messages on Signup Form
-  // 1. successful signup
-  // 2. empty email
-  // 3. taken email
-  // 4. repeat email
+  if (isEmptyEmail(email)) {
+    renderEmailEmptyError();
+  } else if (isNewEmail(email)) {
+    renderSuccess();
+    addNewEmail(email);
+  } else {
+    renderEmailTakenError();
+  }
 });
 
 let toggleNav = () => {
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..4af2ba5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -536,7 +536,7 @@ form > span {
 .col.s12 {
   width: 99.99999%;
 }
-@media (min-width: 601px) {
+@media screen and (min-width: 601px) {
   .col.m1 {
     width: 8.33333%;
   }
@@ -579,7 +579,7 @@ form > span {
     width: 99.99999%;
   }
 }
-@media (min-width: 993px) {
+@media screen and (min-width: 993px) {
   .col.l1 {
     width: 8.33333%;
   }
@@ -661,7 +661,7 @@ form > span {
 .show-inline-block {
   display: inline-block !important;
 }
-@media (max-width: 1205px) {
+@media screen and (max-width: 1205px) {
   .auto {
     max-width: 95%;
   }
@@ -669,10 +669,10 @@ form > span {
 
 #jumbo-image {
   max-height: 20rem;
-  /* TODO: Invert banner colors using CSS */
+  filter: invert(100%);
 }
 
-@media (max-width: 600px) {
+@media screen and (max-width: 600px) {
   .modal-content {
     margin: 0 10px;
     width: auto !important;
@@ -705,7 +705,7 @@ form > span {
     width: 100%;
   }
 }
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .modal-content {
     width: 500px;
   }
@@ -713,7 +713,7 @@ form > span {
     padding-top: 50px;
   }
 }
-@media (min-width: 993px) {
+@media screen and (min-width: 993px) {
   .modal-content {
     width: 900px;
   }
@@ -724,12 +724,12 @@ form > span {
     display: block !important;
   }
 }
-@media (max-width: 992px) and (min-width: 601px) {
+@media screen and (max-width: 992px) and (min-width: 601px) {
   .hide-medium {
     display: none !important;
   }
 }
-@media (max-width: 992px) {
+@media screen and (max-width: 992px) {
   .sidebar.collapse {
     display: none;
   }
@@ -876,8 +876,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: 1fr 1fr;
   grid-auto-rows: 10rem;
   gap: 1rem;
   padding-top: 2rem;
