diff --git a/package-lock.json b/package-lock.json
index a3d3a18..2bce6e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1301,8 +1301,7 @@
         "jsbn": {
           "version": "0.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "json-schema": {
           "version": "0.2.3",
diff --git a/public/comment.html b/public/comment.html
index 47c5d7c..a851ae2 100644
--- a/public/comment.html
+++ b/public/comment.html
@@ -1,40 +1,45 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Add Comment</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<head>
+  <meta charset="utf-8">
+  <title>Add Comment</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-  <nav>
-    <a href="/">home</a>
-    <a href="/public/comment.html">Add Comment</a>
-    <a href="/public/signup.html">Sign Up</a>
-    <a href="/public/login.html">Login</a>
+  <nav class="nav__bar">
+    <button name="button" class="nav__button">
+      <a href="/">home</a>
+    </button>
+    <button name="button" class="nav__button">
+      <a href="/public/comment.html">Add Comment</a>
+    </button>
+    <button name="button" class="nav__button">
+      <a href="/public/signup.html">Sign Up</a>
+    </button>
+    <button name="button" class="nav__button">
+      <a href="/public/login.html">Login</a>
+    </button>
   </nav>
 
-  <form id="comment-form" action="/add-comment" method="POST">
-    <label for="country-input">Select Country</label>
-    <input list="countries" name="country" id="country-input" required autocomplete="off">
-    <datalist id="countries">
-
-    </datalist>
-
-
-    <label for="city-input">Select City</label>
-    <input list="cities" name="city" id="city-input" required autocomplete="off">
-    <datalist id="cities">
-
-    </datalist>
-
-
-    <label for="comment-input">Write your comment</label>
-    <textarea name="comment" cols="30" rows="10" id="comment-input" required autocomplete="off"></textarea>
-
-    <input type="submit" id="commentBtn" value="Comment"/>
-  </form>
-
+  <section class="section__form">
+    <form id="comment-form" action="/add-comment" method="POST">
+      <label for="country-input">Select Country</label>
+      <input class="form__input" list="countries" name="country" id="country-input" required autocomplete="off">
+      <datalist id="countries"></datalist>
+      <label for="city-input">Select City</label>
+      <input class="form__input" list="cities" name="city" id="city-input" required autocomplete="off">
+      <datalist id="cities"></datalist>
+      <label for="comment-input">Write your comment</label>
+      <textarea class="form__textarea" name="comment" cols="30" rows="10" id="comment-input" required autocomplete="off"></textarea>
+      <p class="error" aria-live="polite"></p>
+      <input class="form__submit-button" type="submit" id="commentBtn" value="Comment" />
+    </form>
+  </section>
 
   <script src="./comment.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 3387c80..d7047c7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,13 +7,15 @@
   <link rel="stylesheet" href="public/style.css">
 </head>
   <body>
-    <nav>
-      <a href="/">home</a>
-      <a href="/public/comment.html">Add Comment</a>
-      <a href="/public/signup.html">Sign Up</a>
-      <a href="/public/login.html">Login</a>
+    <nav class="nav__bar">
+      <button name="button" class="nav__button"><a href="/">home</a></button>
+      <button name="button" class="nav__button"><a href="/public/comment.html">Add Comment</a></button>
+      <button name="button" class="nav__button"><a href="/public/signup.html">Sign Up</a></button>
+      <button name="button" class="nav__button"><a href="/public/login.html">Login</a></button>
     </nav>
 
+    <section class="section__results">
+
     <script src="public/index.js" charset="utf-8"></script>
   </body>
 </html>
diff --git a/public/login.html b/public/login.html
index bd7fe60..dc7bee5 100644
--- a/public/login.html
+++ b/public/login.html
@@ -1,34 +1,50 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <title>Log In</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+<head>
+  <meta charset="utf-8">
+  <title>Log In</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="style.css">
 </head>
-  <body>
-    <nav>
+
+<body>
+  <nav class="nav__bar">
+    <button name="button" class="nav__button">
       <a href="/">home</a>
+    </button>
+    <button name="button" class="nav__button">
       <a href="/public/comment.html">Add Comment</a>
+    </button>
+    <button name="button" class="nav__button">
       <a href="/public/signup.html">Sign Up</a>
+    </button>
+    <button name="button" class="nav__button">
       <a href="/public/login.html">Login</a>
-    </nav>
-    <section>
+    </button>
+  </nav>
+
+  <section class="section__form">
 
-      <form class="login__form" action="/login" method="POST">
+    <form class="login__form" action="/login" method="POST">
+
+      <label for="username">Username:</label>
+      <input class="form__input" id="username" type="text" required pattern="^[a-zA-Z0-9]+$" title="Please provide an alphanumeric name"
+        name="username" value="" />
+
+      <label for="password">Password:</label>
+      <input class="form__input" id="password" type="password" name="password" value="" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}"
+        title="Password should contain at least 9 characters, at least 1 capital letter, at least 1 lowercase letter, 1 number &amp a special character."
+      />
 
-        <label for="username">Username:
-          <input id="username" type="text" required pattern="^[a-zA-Z0-9]+$"  title="Please provide an alphanumeric name" name="username" value=""/>
-        </label>
-        <label for="password">Password:
-          <input id="password" type="password" name="password" value="" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}"  title="Password should contain at least 9 characters, at least 1 capital letter, at least 1 lowercase letter, 1 number &amp a special character."/>
-        </label>
 
       <p class="error" aria-live="polite"></p>
 
-      <input type="submit" id="loginButton" value="login"/>
-      </form>
+      <input class="form__submit-button" type="submit" id="loginButton" value="login" />
+    </form>
+
+  </section>
+  <script type="text/javascript" src="login.js"></script>
+</body>
 
-    </section>
-    <script type="text/javascript" src="login.js"></script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/signup.css b/public/signup.css
deleted file mode 100644
index e69de29..0000000
diff --git a/public/signup.html b/public/signup.html
index 47eff92..46a175d 100644
--- a/public/signup.html
+++ b/public/signup.html
@@ -5,30 +5,41 @@
     <meta charset="utf-8">
     <title>Sign Up</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./signup.css">
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
-  <nav>
-    <a href="/">home</a>
-    <a href="/public/comment.html">Add Comment</a>
-    <a href="/public/signup.html">Sign Up</a>
-    <a href="/public/login.html">Login</a>
-  </nav>
+    <nav class="nav__bar">
+        <button name="button" class="nav__button">
+            <a href="/">home</a>
+        </button>
+        <button name="button" class="nav__button">
+            <a href="/public/comment.html">Add Comment</a>
+        </button>
+        <button name="button" class="nav__button">
+            <a href="/public/signup.html">Sign Up</a>
+        </button>
+        <button name="button" class="nav__button">
+            <a href="/public/login.html">Login</a>
+        </button>
+    </nav>
 
     <section class="section__form">
         <form id="signup-form" action="/signup" method="POST">
             <label for="username">Username</label>
-            <input name="username" id="username" pattern="^[a-zA-Z0-9]+$" type="text" required>
+            <input class="form__input" name="username" id="username" pattern="^[a-zA-Z0-9]+$" type="text" required>
             <label for="password">Password</label>
-            <input name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password" required>
+            <input class="form__input" name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}"
+                type="password" required>
             <label for="confirm-password">Confirm Password</label>
-            <input id="confirm-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password" required>
-            <button id="submit" type="submit">Submit</button>
+            <input class="form__input" id="confirm-password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[!$%&amp(-/:-?_{}~])(?=.*[A-Z]).{9,}" type="password"
+                required>
+            <button class="form__submit-button" id="submit" type="submit">Submit</button>
+            <p class="error" aria-live="polite"></p>
         </form>
     </section>
     <script src="./signup.js"></script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index e69de29..b646e0b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,104 @@
+html {
+  margin: 0;
+  padding: 0;
+  color: #302f2f;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+body {
+  background: radial-gradient(#fbfcfd, #e7e8ef, #d2d5e2);
+  height: 100vh;
+  margin: 0;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+.nav__bar {
+  height: 2rem;
+  width: 100%;
+  text-align: end;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+}
+
+.nav__button {
+  font-size: 1.2rem;
+  padding: 0.5%;
+  margin: 0.5%;
+  text-align: center;
+  border: 2px solid black;
+  background: #302f2f;
+  color: #fbfcfd;
+  font-weight: 700;
+  border-radius: 0.6rem;
+}
+
+.header {
+  text-align: center;
+  padding-top: 35vh;
+  margin: 0 1%;
+}
+
+form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin:auto;
+}
+
+label {
+  font-size: 1.2rem;
+  padding: 1rem;
+  font-weight: 700;
+}
+
+.form__submit-button {
+  font-size: 1.5rem;
+  text-transform: capitalize;
+  margin: 5%;
+  padding: 0.5%;
+  text-align: center;
+  border: 2px solid black;
+  background: #302f2f;
+  color: #fbfcfd;
+  font-weight: 700;
+  border-radius: 0.6rem;
+}
+
+.form__input {
+  height: 2rem;
+  padding: 0.2rem 0.5rem;
+  font-size: 1.5rem;
+}
+
+.form__textarea {
+  padding: 0.2rem 0.5rem;
+  font-size: 1.5rem;
+}
+
+.form__submit-button:hover {
+  color: #302f2f;
+  background: #fbfcfd;
+  border: 2px solid #302f2f;
+  outline: none;
+}
+
+.section__results {
+  display: flex;
+  align-items: center;
+  height: 100%;
+   margin:auto;
+}
+
+.section__form {
+  display: flex;
+  align-items: center;
+  height: 100%;
+   margin:auto;
+}
diff --git a/queries/check_user_password.js b/queries/check_user_password.js
index 2b48baa..e4efa4d 100644
--- a/queries/check_user_password.js
+++ b/queries/check_user_password.js
@@ -6,7 +6,7 @@ const check_user_password = (username, cb) => {
     [username],
     (err, res) => {
       if (err) cb(err);
-      else cb(null, res);
+      else cb(null, res.rows[0].password);
     }
   );
 };
diff --git a/queries/check_username.js b/queries/check_username.js
index 605b77d..3bce7fc 100644
--- a/queries/check_username.js
+++ b/queries/check_username.js
@@ -1,4 +1,3 @@
-
 const dbConnection = require("../src/database/db_connection.js");
 
 const check_user_exists = (username, cb) => {
diff --git a/queries/get user_id.js b/queries/get user_id.js
new file mode 100644
index 0000000..78b866a
--- /dev/null
+++ b/queries/get user_id.js	
@@ -0,0 +1,14 @@
+const dbConnection = require("../src/database/db_connection.js");
+
+const get_user_id = (username, cb) => {
+  dbConnection.query(
+    `SELECT id FROM users WHERE username = $1`,
+    [username],
+    (err, res) => {
+      if (err) cb(err);
+      else cb(null, res.rows);
+    }
+  );
+};
+
+module.exports = get_user_id;
diff --git a/src/database/db_build.sql b/src/database/db_build.sql
index a33f93e..a8ddb1a 100644
--- a/src/database/db_build.sql
+++ b/src/database/db_build.sql
@@ -22,10 +22,7 @@ CREATE TABLE comments (
     PRIMARY KEY (userid, destid)
 );
 
-INSERT INTO users(username, password) VALUES ('johndoe', 'Password123!'), ('joedummy', 'Password234!'), ('joecopy', 'Password345!');
-
-INSERT INTO destinations(country , city) VALUES ('United Kingdom', 'London'), ('United Kingdom', 'Southampton'), ('Cyprus', 'Nicosia');
-
-INSERT INTO comments(comment, userid, destid) VALUES ('Great distination. Will visit again', 1, 1), ('Boring city. Not sure if I like it', 2, 2), ('So hot. Avoid in summer', 3, 3);
+CREATE UNIQUE INDEX username_unique_idx ON users(username);
+CREATE INDEX password_idx ON users(password);
 
 COMMIT;
diff --git a/src/handler.js b/src/handler.js
index 577884e..c6671b0 100644
--- a/src/handler.js
+++ b/src/handler.js
@@ -53,6 +53,9 @@ const loginHandler = (req, res) => {
               });
             }
           });
+        // } else {
+        //   res.writeHead(302, {location: "/Public/login.html"});
+        //   res.end();
         }
       }
     });
@@ -89,7 +92,7 @@ const signUpHandler = (req, res) => {
                     res.writeHead(500, {
                       "Content-Type": "text/html"
                     });
-                    res.end("<h1>Something went wrong with our server</h1>");
+                    res.end("<h1>Username already exists. Please use login form instead</h1>");
                   } else {
                     res.writeHead(200, {
                       "Content-Type": "text/html"
@@ -106,6 +109,7 @@ const signUpHandler = (req, res) => {
   });
 };
 
+
 function getUserId() {
   return 1;
 }
@@ -142,8 +146,6 @@ const addCommentHandler = (req, res) => {
   req.on("data", function (chunk) {
     data += chunk;
   });
-
-
   req.on("end", () => {
     const { country, city, comment } = qs.parse(data);
     // get user id from cookie
