diff --git a/public/css/index.css b/public/css/index.css
index e68b061..6650e89 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -3,6 +3,7 @@
 @import 'global.css';
 @import 'utilities.css';
 @import 'carousel.css';
+@import 'signUp.css';
 
 
 
diff --git a/public/css/signUp.css b/public/css/signUp.css
index 6d54ded..5fe41b5 100644
--- a/public/css/signUp.css
+++ b/public/css/signUp.css
@@ -1,53 +1,74 @@
 body.signUp {
     /* background-image: url("/site2-sunspel/images/shop_background.jpg");
-    background-attachment: fixed; */
-    font-family: 'Lato', sans-serif;
+    background-attachment: fixed;  */
+    font-family: 'Darker Grotesque', sans-serif;
+}
+
+main.signUp {
+    font-size: 12px;
+    line-height: 1em;
+    padding: 1em;
+    background-color: white;
+}
+
+main.signUp div {
+    margin-bottom: 2em;
 }
 
 h1.signUp {
     text-align: center;
-    font-weight: bold;
-    font-size:x-large;
-    margin-bottom: 1.5em;
+    font-weight: 700;
+    font-size:xx-large;
+    margin-bottom: 1.25em;
 }
 
 h2.signUp {
-    text-align: center;
-    margin-bottom: 1.5em;
+    text-align: left;
+    font-weight: 600;
+    font-size:x-large;
+    margin-bottom: 1.25em;
+    margin-left: 20%;
 }
 
-main.signUp {
-    font-size: 12px;
-    line-height: 1em;
-    padding: 1em;
-    background-color: white;
+p.signUp{
+    font-size:1.5em;
+    margin-bottom:2em;
 }
 
 a.signUp {
     color :black;
+    text-decoration: underline;
+}
+
+a.signUp:hover {
+    font-weight:bolder;
 }
 
 form label.signUp.required:after{
     color:red;
     content: " *";
 }
+
 #prefix {
-    width: 20%;
+    width: 15%;
     display: block;
-    padding: 1em ;
-    margin: 1em 40% 0 19%;
-    
+    padding: .75em ;
+    margin: 1em 45% 0 20%;
+    border: 1px solid black;
 }
 
-#prefix:hover {
-    background-color: antiquewhite;
+#prefix:focus {
+    /* border-style: double;
+    border: 1px solid black, 2px solid orange; */
+    box-shadow:  0 0 0 2px orange, 0 0 0 3px black;
+    border: none;
+    outline: none !important;
 }
 
 .userChoice {
     text-align: center;
     font-size: 12px;
     margin-bottom: 4em;
-    
 }
 
 .userLogIn {
@@ -56,11 +77,11 @@ form label.signUp.required:after{
     align-items: center;
 }
 
-.input_label {
-    font-size: 12px;
-    margin: 0 19%;
+.inputLabel, .checkboxLabel, #interested {
+    font-size: 14px;
+    margin: 0 20%;
     text-align: center;
-    
+    font-weight: 500;
 }
 
 .textInput {
@@ -70,62 +91,160 @@ form label.signUp.required:after{
     padding: 1em;
     padding-right: 0.25em;
     border: 1px solid black;
+    height: 3em;
 }
 
-.passwordMeter {
-    width: 100%;
-    display: block;
-    padding: 1em;
-    padding-right: 0.25em;
-    border: 2px solid black;
-    height: 2em;
-    background: white;
+.textInput:focus{
+    outline: 1px solid black !important;
 }
 
-.textInput:hover {
-    background-color: antiquewhite;
+.checkboxInput{
+    /* display:inline; */
+    position: relative;
+    margin-left:20%;
+    -webbkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    /* vertical-align: -2px; */
+    width: 1em;
+    height: 1em;
+    border: 1px solid black;
 }
 
-div {
-    margin-bottom: 2em;
+.checkboxInput::before{
+    content: "\2713";
+    position: absolute;
+    font-size: 1.2em;
+    right: 0.1em;
+    visibility: hidden;
+    
 }
+.checkboxInput:checked{
+    background-color:transparent;
+    background-size: 30px;
+    background-position: center;
+    background-image: url(https://img.icons8.com/android/24/000000/checked-2.png);
 
-input[type='radio']:after {
+}
+
+.checkboxInput:focus{
+    box-shadow:  0 0 0 2px orange, 0 0 0 3px black;
+    border: none;
+    outline: none !important;
+}
+
+.checkboxLabel{
+    margin: 0 20% 0 0;
+}
+
+.dateInput{
+    display:block;
+    margin: .75em 0 .75em 20%;
+}
+
+.password{
+    margin-bottom:0;
+    
+}
+.passwordMeter, #passwordWarning {
+    width: 60%;
+    display: block;
+    margin: 0 auto;
+    padding: 1em .75em 1em;
+    /* padding-right: 0.25em; */
+    height: 3em;
+    background: #eaebed;
+    font-weight: 400;
+    font-size: 1.5em;
+}
+
+#passwordWarning {
+    font-size: 1.5em;
+    color: red;
+    background: white;
+    line-height: 1em;
+    padding-left:0;
+    font-weight: 400;
+}
+.genderSelect{
+    margin-left: 0;
+}
+
+input[type='radio']{
+    margin-left: 20%;
+    -webbkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     width: 15px;
     height: 15px;
-    border-radius: 15px;
-    top: -2px;
-    left: -1px;
+    border-radius: 50%;
+    box-sizing:border-box;
     position: relative;
+    /* background-color: #d1d3d1;
+    border: 2px solid  #d1d3d1; */
+    border: 1px solid #eaebed;
+    box-shadow: inset 0px 0px 0px 3px #fff,
+    inset 0px 0px 0px 30px #eaebed;
+}
+
+/* input[type='radio'].signUp:after{
+    -webbkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background-color: #d1d3d1;
     content: '';
-    display: inline-block;
+    width: 7px;
+    height: 7px;
+    padding: auto;
+    border-radius: 50%;
+    display: block;
     visibility: visible;
-    border: 2px solid white;
-}
+    border: 2.5px solid white;
+} */
 
-input[type='radio']:checked:after {
+input[type='radio'].signUp:checked:after {
+    -webbkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     width: 15px;
     height: 15px;
-    border-radius: 15px;
-    top: -2px;
-    left: -1px;
+    border-radius: 50%; 
+    box-sizing:border-box;
+    /* top: -2px;
+    left: -1px; */
     position: relative;
-    background-color: black;
+    /* background-color: black; */
     content: '';
-    display: inline-block;
+    display: block;
     visibility: visible;
-    border: 2px solid white;
+    border:1px solid #eaebed;
+    box-shadow: inset 0px 0px 0px 3px #fff,
+    inset 0px 0px 0px 30px #3c3c3c;
+}
+
+input[type='radio'].signUp:focus{
+    box-shadow:  0 0 0 1px orange;
+    animation: box-shadow 3ms 1 ;
+    border: none;
+    outline: none !important;
+}
+
+input[type='radio'].signUp:focus:not(:active){
+    box-shadow:  none;
+    border: none;
+    outline: none !important;
 }
 
-#remember{
+#remember, #newsletter{
     border-radius: 0%;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
 }
 
-
+#interested{
+    text-align:left;
+}
 
 .userInfo {
     border: none;
@@ -133,14 +252,15 @@ input[type='radio']:checked:after {
     align-items: center;
 }
 
-button {
-    height: 2em;
-    font-size: 2em;
-    width: 100%;
-    /* font-family: 'Lato', sans-serif; */
-    font-weight: 700;
+button.signUp {
+    min-height: 3em;
+    font-size: 1.25em;
+    line-height:2em;
+    padding: auto;
+    width: 60%;
+    font-weight: 500;
     color: white;
     background-color: black;
-    margin: 0 0 0 0.7em;
-    padding-right: 0.7em;
+    margin: 0.75em auto;
+    display:block;
 }
\ No newline at end of file
diff --git a/public/js/signUp.js b/public/js/signUp.js
index b6fd762..09cc794 100644
--- a/public/js/signUp.js
+++ b/public/js/signUp.js
@@ -5,7 +5,9 @@
     let input = document.getElementById("password").value;
     input = input.trim();
 
-    if (input.length < 8) {
+    if (input.length == 0) {
+      document.getElementById("passwordMeter").innerHTML = "Password strength: No Password";
+    } else if (input.length < 8) {
       // console.log("Minimum length of this field must be equal or greater than 8 symbols.Leading and trailing spaces will be ignored.");
       document.getElementById("passwordMeter").innerHTML = "Password strength: Weak";
       document.getElementById("passwordWarning").innerHTML = "Minimum length of this field must be equal or greater than 8 symbols.Leading and trailing spaces will be ignored.";
@@ -30,7 +32,33 @@
       document.getElementById("passwordMeter").innerHTML = "Password strength: Weak";
       document.getElementById("passwordWarning").style.visibility = "hidden";
     } else {
-      document.getElementById("passwordWarning").innerHTML = "Minimum of different classes of characters in password is 3. Classes of characters: Lower Case, Upper Case, Digits, Special Characters."
+      document.getElementById("passwordWarning").innerHTML = "Minimum of different classes of characters in password is 3. Classes of characters: Lower Case, Upper Case, Digits, Special Characters.";
     }
   }
-    
\ No newline at end of file
+  
+  // NOT WORKING YET CHECK REQUIRED FIELDS ON SUBMIT
+  // function isRequired(){
+  //   let input = document.getElementsByClassName("required").value;
+
+  //   if (input.length == 0) {
+  //     document.getElementsByClassName("requiredWarning").innerHTML = "This is a required field.";
+  //   }
+  // }
+// const input = document.getElementsByClassName("required");
+// const inputError = document.getElementsByClassName("requiredWarning")
+
+// function isRequired(){
+//   // document.getElementsById('submit').addEventListener('submit', function (event){
+//     if(!input.validity.valid) {
+//       showError();
+//       event.preventDefault();
+//     }
+//   }
+// //   });
+// // }
+
+// function showError() {
+//   if(input.validity.valueMissing){
+//     inputError.textContent = "This is a required field.";
+//   }
+// }
diff --git a/views/auth/logIn.ejs b/views/auth/logIn.ejs
index 6291704..b11eb5a 100644
--- a/views/auth/logIn.ejs
+++ b/views/auth/logIn.ejs
@@ -6,7 +6,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Log in or sign up</title>
-  <link rel="stylesheet" href="/site2-sunspel/styles/logIn.css">
+  <!-- <link rel="stylesheet" href="/site2-sunspel/styles/logIn.css"> -->
 </head>
 <body class="signUp">
   <header></header>
diff --git a/views/auth/signUp.ejs b/views/auth/signUp.ejs
index 7b2e3a0..4f52a5c 100644
--- a/views/auth/signUp.ejs
+++ b/views/auth/signUp.ejs
@@ -6,11 +6,11 @@
   <header></header>
   <main class="signUp">
     <h1 class= "signUp">REGISTER:</h1>
-    <p class="userChoice">Register a new account or <a href="login" class="signUp">sign in.</a></p>
+    <p class="userChoice signUp">Register a new account or <a href="login" class="signUp">sign in.</a></p>
     <form action="" method="POST" >
       <fieldset name="userInfo" class="userInfo">
         <div>
-          <label for="prefix" class="input_label signUp">PREFIX</label>
+          <label for="prefix" class="inputLabel signUp">PREFIX</label>
           <select name="prefix" id="prefix">
             <option value="" default></option>
             <option value="mr">Mr</option>
@@ -20,63 +20,55 @@
           </select>
         </div>
         <div>
-          <label for="firstName" class="input_label required signUp">FIRST NAME</label>
-          <input type="text" id="firstName" name="firstName" class="textInput" required>
-        </div>
+          <label for="firstName" class="inputLabel required signUp">FIRST NAME</label>
+          <input type="text" id="firstName" name="firstName" class="textInput" required >
+           <!-- TRYING TO ADD A WARNING IF REQ'D NOT FILLED -->
+            <!-- <p class="requiredWarning"></p> -->
+        </div> 
         <div>
-          <label for="lastName" class="input_label required signUp">LAST NAME</label>
+          <label for="lastName" class="inputLabel required signUp">LAST NAME</label>
           <input type="text" id="lastName" name="lastName" class="textInput" required>
         </div>
         <div>
-          <input type="checkbox" id="remember" checked name="remember" value="yes">
-          <label for="remember" >SIGN UP FOR OUR NEWSLETTER</label>
+          <input type="checkbox" id="newsletter" checked name="newsletter" value="yes" class="checkboxInput">
+          <label for="newsletter" class=" checkboxLabel">SIGN UP FOR OUR NEWSLETTER</label>
         </div>
         <div>
-          <label for="dateob">DATE OF BIRTH</label>
-          <input type="date" id="dateob" name="dob">
+          <label for="dateob" class="inputLabel">DATE OF BIRTH</label>
+          <input type="date" id="dateob" name="dob" class="dateInput">
         </div>
 
         <div>
-          <p>INTERESTED IN:</p>
-          <p><input type="radio" id="mens" name= "gender" value="mens">
-          <label for="mens">Men's</label></p>
-          <p><input type="radio" id="womens" name="gender" value="womens">
-          <label for="womens">Women's</label></p>
+          <p id="interested">INTERESTED IN</p>
+          <p><input type="radio" id="mens" name= "gender" value="mens" class="signUp">
+          <label for="mens" class="inputLabel genderSelect">Men's</label></p>
+          <p><input type="radio" id="womens" name="gender" value="womens" class="signUp">
+          <label for="womens" class="inputLabel genderSelect">Women's</label></p>
         </div>
       </fieldset>
-      <hr class="break">
+
       <fieldset name="userLogIn" class="userLogIn">
-        <h2>--SIGN-IN INFORMATION--</h2>
+        <h2 class="signUp">SIGN-IN INFORMATION</h2>
         <div>
-          <label for="email" class="input_label required signUp">EMAIL ADDRESS</label>
+          <label for="email" class="inputLabel required signUp">EMAIL ADDRESS</label>
           <input type="email" id="email" name="email" class="textInput" required>
         </div>
         <div>
-<<<<<<< HEAD
-          <label for="password" class="input_label required signUp">PASSWORD</label>
-          <input type="password" id="textInput" name="password" class="textInput" pattern="[0-9a-zA-Z]{8-10}" required>
-=======
-          <label for="password" class="input_label">PASSWORD</label>
-          <input type="password" id="password" name="password" class="textInput" onkeyup="passwordChecker()" required>
-        </div>
-        
-        <div>
-          <p id="passwordMeter" class="passwordMeter"></p>
-        </div>
-        <div>
-          <span id="passwordWarning"></span>
->>>>>>> master
+          <label for="password" class="inputLabel required signUp ">PASSWORD</label>
+          <input type="password" id="password" name="password" class="textInput password" onkeyup="passwordChecker()" required>
+          <span id="passwordMeter" class="passwordMeter signUp">Password Strength: No Password</span>
+          <span id="passwordWarning" class="signUp"></span>
         </div>
         <div>
-          <label for="confPassword" class="input_label required signUp">CONFIRM PASSWORD</label>
+          <label for="confPassword" class="inputLabel required signUp">CONFIRM PASSWORD</label>
           <input type="password" id="textInput" name="confPassword" class="textInput" required>
         </div>
         <div>
-          <input type="checkbox" id="remember" checked name="remember" value="yes">
-          <label for="remember">REMEMBER ME</label>
+          <input type="checkbox" id="remember" checked name="remember" value="yes" class="checkboxInput">
+          <label for="remember" class="checkboxLabel">REMEMBER ME</label>
         </div>
         <div>
-          <button type="submit">REGISTER</button>
+          <button type="submit" class="signUp" id="submit" onclick="isRequired()">CREATE AN ACCOUNT</button>
         </div>
       </fieldset>
     </form>
diff --git a/views/layouts/user-layout.ejs b/views/layouts/user-layout.ejs
index 302c2e0..eaa4f48 100644
--- a/views/layouts/user-layout.ejs
+++ b/views/layouts/user-layout.ejs
@@ -11,9 +11,8 @@
     <link rel="stylesheet" href="/css/index.css">
     <!-- Slick Links -->
     <title>Sunspel Clone</title>
-    <link rel="stylesheet" href="/css/signUp.css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,400;1,700&display=swap" rel="stylesheet">
+    <!-- <link rel="stylesheet" href="/css/signUp.css"> -->
+
 </head>
 
 <body>
diff --git a/workspace.code-workspace b/workspace.code-workspace
new file mode 100644
index 0000000..20c09e9
--- /dev/null
+++ b/workspace.code-workspace
@@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../../../../NewWebDev"
+		}
+	],
+	"settings": {
+		"liveServer.settings.multiRootWorkspaceName": "NewWebDev"
+	}
+}
\ No newline at end of file