diff --git a/index.html b/index.html
index c78554d..772ad71 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Form Styling</title>
+    <link rel="stylesheet" href="style.css">
     <link
       href="https://fonts.googleapis.com/css?family=Raleway"
       rel="stylesheet"
@@ -19,24 +20,30 @@ <h1>Sign Up</h1>
           <div class="form-group">
             <label for="first-name">First Name</label>
             <input type="text" name="firstName" id="first-name" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="last-name">Last Name</label>
             <input type="text" name="lastName" id="last-name" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="email">Email</label>
             <input type="email" name="email" id="email" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="password">Password</label>
             <input type="password" name="password" id="password" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="password2">Confirm Password</label>
             <input type="password" name="pasword2" id="password2" />
+            <span></span>
           </div>
           <button type="submit" class="btn">Sign Up</button>
+          <span id="success"></span>
           <p class="bottom-text">
             By clicking the Sign Up button, you agree to our
             <a href="#">Terms & Conditions</a> and
@@ -48,5 +55,14 @@ <h1>Sign Up</h1>
         <p>Already have an account? <a href="#">Login Here</a></p>
       </footer>
     </div>
+    <script src="sendEmail.js"></script>
+
+    <script type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
+    </script>
+
+    <script type="text/javascript">
+      emailjs.init('user_RKLb3tmLVxATwmQH3mZ6c')
+    </script>
   </body>
 </html>
diff --git a/sendEmail.js b/sendEmail.js
index bdd9b13..08e5bfc 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -4,3 +4,96 @@
 
 // Let the user know if the passwords to not match
 // Also let the user know when the email has been successfully sent
+
+let fname;
+let lname;
+let email;
+let pwd;
+let pwdc;
+let form;
+let inputArr;
+let btn;
+let errMap;
+
+function main()
+{
+    form = document.querySelector("form");
+
+    fname = form.children[0].children[1];
+    lname = form.children[1].children[1];
+    email = form.children[2].children[1];
+    pwd = form.children[3].children[1];
+    pwdc = form.children[4].children[1];
+    btn = form.children[5];
+
+    inputArr = [fname, lname, email, pwd, pwdc];
+
+    inputArr.forEach(item=>{
+        item.addEventListener("input", evt=> evt.target.nextElementSibling.innerHTML = "")
+    });
+
+    errMap = new Map();
+    errMap.set(fname, "Please enter a first name!");
+    errMap.set(lname, "Please enter a last name!");
+    errMap.set(email, "Please enter an email!");
+    errMap.set(pwd, "Please enter a password!");
+    errMap.set(pwdc, "Please confirm your password!");
+}
+
+function anyFieldsEmpty()
+{
+    return inputArr.some(item=> item.value === "");
+}
+
+function checkEmail()
+{
+    // The following comes from: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
+    var re = /^\S+@\S+\.\S+$/;
+    return !re.test(email.value);
+}
+
+document.addEventListener("DOMContentLoaded", main);
+
+document.querySelector(".btn").addEventListener("click", evt =>
+{
+    evt.preventDefault();
+    btn.nextElementSibling.innerHTML = "";
+
+    if (anyFieldsEmpty())
+    {
+        inputArr.forEach(item=> {
+                if (item.value === "") item.nextElementSibling.innerHTML = errMap.get(item);
+        });
+    }
+    else if (checkEmail())
+    {
+        email.nextElementSibling.innerHTML = "Please enter a valid email address!";
+    }
+    else if (pwd.value !== pwdc.value)
+    {
+        pwdc.nextElementSibling.innerHTML = "Passwords do not match!";
+    }
+    else
+    {
+        // This is the only error message that can be "corrected" by changing another input field,
+        // and so we need this hard-coded here to cover all cases
+        pwdc.nextElementSibling.innerHTML = "";
+
+        btn.innerHTML = 'Creating Account...';
+
+        fname.name = "to_name";
+        email.name = "to_email";
+
+        const serviceID = 'default_service';
+        const templateID = 'template_qp43uzb';
+
+        emailjs.sendForm(serviceID, templateID, form)
+            .then(() => {
+            btn.innerHTML = 'Email Sent!';
+            btn.nextElementSibling.innerHTML = "Signed Up Successfully!";
+            }, (err) => {
+                email.nextElementSibling.innerHTML = "Please enter a valid email address!";
+                btn.innerHTML = "Sign Up";
+            });
+        }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 80ef8c1..5221ece 100644
--- a/style.css
+++ b/style.css
@@ -3,18 +3,44 @@
     -May want to add "border-box for "box-sizing so padding does not affect width
     -Reset margin and padding 
    */
+   
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   font-family: sans-serif;
+   font-weight: 300;
+  }
+
+  /* This is for all error or system messages */
+  span
+  {
+    color: rgb(165, 27, 27);
+    font-weight: bolder;
+    padding: 5px;
+    display: block;
+  }
+
+  /* This will be specifically for the "success" message */
+  span#success
+  {
+    color: seagreen;
+    text-align: center;
   }
 
   body {
     /* 
       -Background color is #344a72
     */
+
+    background-color: #344a72;
   }
 
   a {
     /* 
     Underlined links are ugly :)
    */
+
+   text-decoration: none;
   }
 
   #container {
@@ -23,12 +49,20 @@
     -I would also set a "max-width" for responsiveness
     -May want to add some padding
     */
+
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2rem;
   }
 
   .form-wrap {
     /* 
       This is the white area around the form and heading, etc
     */
+
+    background-color: white;
+    padding: 15px 25px;
   }
 
   .form-wrap h1,
@@ -36,24 +70,45 @@
     /* 
       May want to center these
     */
+
+    text-align: center;
+    color: gray;
+    padding: 0px 0px 10px;
+  }
+
+  /* I wanted this text to be slightly "darker" than the rest of the text */
+  .form-wrap h1 {
+    color: rgb(85, 85, 85);
+    font-weight: 500;
   }
 
   .form-wrap .form-group {
     /* 
       Each label, input is wrapped in .form-group
     */
+    
+    padding: 5px 0px;
   }
 
   .form-wrap .form-group label {
     /* 
       Label should be turned into a block element
     */
+
+    color: gray;
+    display: block;
+    padding: 5px 5px 5px 0px;
   }
 
   .form-wrap .form-group input {
     /* 
       Inputs should reach accross the .form-wrap 100% and have some padding
     */
+
+    width: 100%;
+    padding: .75em;
+    border: 1px solid rgb(216, 216, 216);
+    border-radius: 5px;
   }
 
   .form-wrap button {
@@ -61,28 +116,50 @@
       Button should wrap accross 100% and display as block
       Background color for button is #49c1a2
     */
+
+    display: block;
+    width: 100%;
+    color: white;
+    background-color: #49c1a2;
+    padding: 10px;
+    margin: 10px 0px 0px;
+    border-style: none;
   }
 
   .form-wrap button:hover {
     /* 
       Hover background color for button is #37a08e
     */
+
+    background-color: #37a08e;
   }
 
   .form-wrap .bottom-text {
     /* 
       Bottom text is smaller
     */
+
+    font-size: 0.8em;
+    text-align: center;
+    color: gray;
+    line-height: 1.5rem;
+    padding: 20px 0px 0px;
   }
 
   footer {
     /* 
     Should be centered
    */
+
+   color: white;
+   text-align: center;
+   padding: 10px 0px 0px;
   }
 
   footer a {
     /* 
       Footer link color is #49c1a2
     */
+
+    color: #49c1a2;
   }
\ No newline at end of file