diff --git a/src/views/login.ejs b/src/views/login.ejs
new file mode 100644
index 0000000..c4a045b
--- /dev/null
+++ b/src/views/login.ejs
@@ -0,0 +1,62 @@
+<div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 75%;">
+    <h1 class="mb-4" style="display: flex; justify-content: center;">Sign in to your account</h1>
+    <form action="/user/signin" id="form" enctype="application/x-www-form-urlencoded" method="post"
+        style="max-width: 550px; margin: 0 auto; background-color: #ffffff; border: 1px solid #ccc; padding: 40px; border-radius: 10px;">
+        <div class="mb-3">
+            <label for="email" class="form-label">Email</label>
+            <div class="input-group">
+                <span class="input-group-text" id="emailSymbol">🖋️</span>
+                <input type="text" class="form-control" id="email" aria-describedby="emailSymbol"
+                    placeholder="Email" name="email">
+            </div>
+        </div>
+        <div class="mb-3">
+            <label for="password" class="form-label">Password</label>
+            <div class="input-group">
+                <span class="input-group-text" id="passwordSymbol">🔑</span>
+                <input type="password" class="form-control" id="password" placeholder="Password" name="password">
+            </div>
+        </div>
+        <div class="form-check mb-4">
+            <input type="checkbox" class="form-check-input" id="rememberMe" name="rememberMe">
+            <label class="form-check-label" for="rememberMe">Keep me signed in</label>
+        </div>
+        <button type="submit" class="btn btn-success w-100">Sign in</button>
+    </form>
+    <script>
+        const form = document.getElementById("form");
+       
+       form.addEventListener("submit", async (e) => {
+         e.preventDefault();
+       
+         let email = document.getElementById("email").value;
+         let password = document.getElementById("password").value;
+         //let isDefault = document.getElementById("isDefault").value;
+       
+         try {
+               const response = await fetch(`/api/auth/signin`, {
+                 method: 'POST',
+                 headers: {
+                   'Content-Type': 'application/json',
+                 },
+                 body: JSON.stringify({
+                   email: email,
+                   password: password,
+                  }),
+                 credentials: 'same-origin' 
+               });
+         
+               if (!response.ok) {
+                 throw new Error('Failed to login user.');
+               }
+               console.log(response.response)
+               location.href = "/";
+             } catch (error) {
+               console.error('Error adding to cart:', error);
+               alert('Failed to update the user. Please try again.');
+             }
+       
+       });
+       
+       </script>
+    </div>
\ No newline at end of file
diff --git a/src/views/signup.ejs b/src/views/signup.ejs
new file mode 100644
index 0000000..dad069d
--- /dev/null
+++ b/src/views/signup.ejs
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>User Signup</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      line-height: 1.6;
+      margin: 0;
+      padding: 0;
+      background-color: #f9f9f9;
+    }
+
+    h1 {
+      text-align: center;
+      margin: 30px 0;
+    }
+
+    form {
+      max-width: 400px;
+      margin: 0 auto;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    }
+
+    label {
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    input,
+    select {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 15px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      font-size: 16px;
+    }
+
+    input[type="submit"] {
+      background-color: #007bff;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    input[type="submit"]:hover {
+      background-color: #0056b3;
+    }
+
+    .error {
+      color: red;
+      margin-bottom: 10px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>User Signup</h1>
+  <form action="/api/auth/signup" method="post" id="form">
+    <label for="firstName">First Name:</label>
+    <input type="text" id="firstName" name="firstName" required>
+
+    <label for="lastName">Last Name:</label>
+    <input type="text" id="lastName" name="lastName" required>
+
+    <label for="username">Username:</label>
+    <input type="text" id="username" name="username" required>
+
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" required>
+
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password" required>
+
+    <label for="avatar">Avatar URL:</label>
+    <input type="text" id="avatar" name="avatar">
+    <!-- <input type="customer" id="role" name="role" hidden value="customer"> -->
+
+   
+
+    <input type="submit" value="Sign Up">
+  </form>
+</body>
+<script>
+  const form = document.getElementById("form");
+ 
+ form.addEventListener("submit", async (e) => {
+   e.preventDefault();
+ 
+   let username = document.getElementById("username").value;
+   let firstName = document.getElementById("firstName").value;
+   let lastName = document.getElementById("lastName").value;
+   let email = document.getElementById("email").value;
+   let password = document.getElementById("password").value;
+   //let isDefault = document.getElementById("isDefault").value;
+ 
+   try {
+         const response = await fetch(`/api/auth/signup`, {
+           method: 'POST',
+           headers: {
+             'Content-Type': 'application/json',
+           },
+           body: JSON.stringify({ 
+             username: username,
+             name: username,
+             firstName: firstName,
+             lastName: lastName,
+             email: email,
+             password: password,
+            }),
+           credentials: 'same-origin' 
+         });
+   
+         if (!response.ok) {
+           throw new Error('Failed to update user.');
+         }
+         console.log(response.response)
+         location.href = "/role";
+       } catch (error) {
+         console.error('Error adding to cart:', error);
+         alert('Failed to update the user. Please try again.');
+       }
+ 
+ });
+ 
+ </script>
+</html>
