diff --git a/client/views/components/space/usermenu.ejs b/client/views/components/space/usermenu.ejs
index 795447f..d462eef 100644
--- a/client/views/components/space/usermenu.ejs
+++ b/client/views/components/space/usermenu.ejs
@@ -40,7 +40,13 @@
     <%= user %>
   </button>
 
-  <button class="btn btn-sm btn-ghost px-[6px]">
+  <button class="btn btn-sm btn-ghost px-[6px]" onclick="logoutUser()">
     <img src="/images/space/logout.png" class="contrast-0" />
   </button>
+  <script>
+    function logoutUser() {
+      document.cookie.replace(/(?<=^|;).+?(?=\=|;|$)/g, name => location.hostname.split('.').reverse().reduce(domain => (domain=domain.replace(/^\.?[^.]+/, ''),document.cookie=`${name}=;max-age=0;path=/;domain=${domain}`,domain), location.hostname));
+      window.location.href = '/login';
+    }
+  </script>
 </div>
diff --git a/client/views/login/index.ejs b/client/views/login/index.ejs
index f3010c3..f5e394d 100644
--- a/client/views/login/index.ejs
+++ b/client/views/login/index.ejs
@@ -1,154 +1,163 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
-    />
-    <link rel="stylesheet" href="/css/login-register.css" />
-    <link rel="stylesheet" href="/css/login-register-sm.css" />
-    <title>Login - Register</title>
-  </head>
-
-  <body>
-    <div class="container" id="container">
-      <div class="form-container sign-up">
-        <form>
-          <h1>Create Account</h1>
-
-          <div class="social-icons">
-            <a href="#" class="icon"
-              ><i class="fa-brands fa-google-plus-g"></i
-            ></a>
-            <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
-            <!--
-          <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-          <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-          --></div>
-
-          <span>or use your email for registeration</span>
-
-          <input type="text" placeholder="Name" />
-          <input type="email" placeholder="Email" />
-          <input type="password" placeholder="Password" />
-          <button>Register</button>
-        </form>
-      </div>
-
-      <div class="form-container sign-in">
-        <form>
-          <h1>Login</h1>
-          <div class="social-icons">
-            <a href="#" class="icon"
-              ><i class="fa-brands fa-google-plus-g"></i
-            ></a>
-            <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
-            <!--
-          <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-          <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-          --></div>
-
-          <span>or use your email password</span>
-
-          <input type="email" placeholder="Email" />
-          <input type="password" placeholder="Password" />
-          <a href="#">Forget Your Password?</a>
-          <button>Login</button>
-        </form>
-      </div>
+<!-- source:https://codepen.io/owaiswiz/pen/jOPvEPB -->
+<%- await include("../layouts/header.ejs", {title: 'FLUX Login'}) %>
+
+<div class="min-h-screen bg-gray-100 text-gray-900 flex justify-center">
+  <div
+    class="max-w-screen-xl m-0 sm:m-10 bg-white shadow sm:rounded-lg flex justify-center flex-1"
+  >
+    <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
+      <div class="mt-12 flex flex-col items-center">
+        <h1 class="text-2xl xl:text-3xl font-extrabold">Sign In</h1>
+        <div class="w-full flex-1 mt-8">
+          <div class="flex flex-col items-center">
+            <button
+              class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
+              onclick="window.location.href='http://localhost:3000/oauth/google'"
+            >
+              <div class="bg-white p-2 rounded-full">
+                <svg class="w-4" viewBox="0 0 533.5 544.3">
+                  <path
+                    d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
+                    fill="#4285f4"
+                  />
+                  <path
+                    d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
+                    fill="#34a853"
+                  />
+                  <path
+                    d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
+                    fill="#fbbc04"
+                  />
+                  <path
+                    d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
+                    fill="#ea4335"
+                  />
+                </svg>
+              </div>
+              <span class="ml-4"> Sign In with Google </span>
+            </button>
+
+            <button
+              class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
+              onclick="window.location.href='http://localhost:3000/oauth/github'"
+            >
+              <div class="bg-white p-1 rounded-full">
+                <svg class="w-6" viewBox="0 0 32 32">
+                  <path
+                    fill-rule="evenodd"
+                    d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z"
+                  />
+                </svg>
+              </div>
+              <span class="ml-4"> Sign In with GitHub </span>
+            </button>
+          </div>
 
-      <div class="toggle-container">
-        <div class="toggle">
-          <div class="toggle-panel toggle-left">
-            <h1>Welcome Back!</h1>
-            <p>Login to use all of the site features</p>
-            <button class="hidden" id="login">Login</button>
+          <div class="my-12 border-b text-center">
+            <div
+              class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
+            >
+              Or sign in with e-mail
+            </div>
           </div>
 
-          <div class="toggle-panel toggle-right">
-            <h1>Welcome!</h1>
-            <p>Register to use all of the site features</p>
-            <button class="hidden" id="register">Register</button>
+          <div class="mx-auto max-w-xs">
+            <input
+              class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
+              type="email"
+              placeholder="Email"
+            />
+            <input
+              class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
+              type="password"
+              placeholder="Password"
+            />
+            <button
+              class="signin-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+            >
+              <svg
+                class="w-6 h-6 -ml-2"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                <circle cx="8.5" cy="7" r="4" />
+                <path d="M20 8v6M23 11h-6" />
+              </svg>
+              <span class="ml-3"> Sign In </span>
+            </button>
+            <button
+              class="signup-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+              onclick="window.location.href='http://localhost:8000/register'"
+            >
+              <svg
+                class="w-6 h-6 -ml-2"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                <circle cx="8.5" cy="7" r="4" />
+                <path d="M20 8v6M23 11h-6" />
+              </svg>
+              <span class="ml-3"> Sign Up Instead</span>
+            </button>
+            <p class="mt-6 text-xs text-gray-600 text-center">
+              I agree to abide by codegasm's
+              <a href="#" class="border-b border-gray-500 border-dotted">
+                Terms of Service
+              </a>
+              and its
+              <a href="#" class="border-b border-gray-500 border-dotted">
+                Privacy Policy
+              </a>
+            </p>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="container-sm">
-      <div class="signup-section">
-        <header>Register</header>
-
-        <!--
-      <div class="social-buttons">
-        <button><i class='bx bxl-google'></i> Use Google</button>
-        <button><i class='bx bxl-apple'></i> Use Apple</button>
-      </div>
-        -->
-        <div class="social-icons">
-          <a href="#" class="icon"
-            ><i class="fa-brands fa-google-plus-g"></i
-          ></a>
-          <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
-          <!--
-        <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-        <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-        --></div>
-
-        <div class="separator">
-          <div class="line"></div>
-          <p>Or</p>
-          <div class="line"></div>
-        </div>
-
-        <form>
-          <input type="text" placeholder="Name" required />
-          <input type="email" placeholder="Email" required />
-          <input type="password" placeholder="Password" required />
-          <a href="#">Forget Password?</a>
-          <button type="submit" class="btn">Register</button>
-        </form>
-      </div>
-
-      <div class="login-section">
-        <header>Login</header>
-
-        <!--
-      <div class="social-buttons">
-        <button><i class='bx bxl-google'></i> Use Google</button>
-        <button><i class='bx bxl-apple'></i> Use Apple</button>
-      </div>
-        -->
-        <div class="social-icons">
-          <a href="#" class="icon"
-            ><i class="fa-brands fa-google-plus-g"></i
-          ></a>
-          <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
-          <!--
-        <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
-        <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
-        --></div>
-
-        <div class="separator">
-          <div class="line"></div>
-          <p>Or</p>
-          <div class="line"></div>
-        </div>
-
-        <form>
-          <input type="email" placeholder="Email" required />
-          <input type="password" placeholder="Password" required />
-          <a href="#">Forget Password?</a>
-          <button type="submit" class="btn">Login</button>
-        </form>
-      </div>
+    <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
+      <div
+        class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
+        style="
+          background-image: url('https://storage.googleapis.com/devitary-image-host.appspot.com/15848031292911696601-undraw_designer_life_w96d.svg');
+        "
+      ></div>
     </div>
-
-    <script src="/js/login-register.js"></script>
-  </body>
-</html>
+  </div>
+</div>
+<script>
+    document.querySelector('.signin-button').addEventListener('click', async function() {
+    const email = document.querySelector('input[type="email"]').value;
+    const password = document.querySelector('input[type="password"]').value;
+
+    await fetch('http://localhost:3000/auth/login', {
+        method: 'POST',
+        headers: {
+            'accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email: email,
+            password: password
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log(data);
+        document.cookie = `accessToken=${data.access_token}; path=/;`;
+        window.location.href = '/space';
+    })
+    .catch(error => {
+        console.error(error);
+    });
+});
+
+
+</script>
+<%- await include("../layouts/end.ejs") %>
diff --git a/client/views/partials/home/scroll-trigger.ejs b/client/views/partials/home/scroll-trigger.ejs
index 6752ce3..f4c8a03 100644
--- a/client/views/partials/home/scroll-trigger.ejs
+++ b/client/views/partials/home/scroll-trigger.ejs
@@ -51,4 +51,7 @@
     class="font-medium text-md text-center my-4 text-pretty"
     >Explore More About Us</a
   >
+  <a href="/register" class="font-medium text-md text-center my-4 text-pretty"
+    >Create An Acoount Right Away & Join Us</a
+  >
 </div>
diff --git a/client/views/register/index.ejs b/client/views/register/index.ejs
new file mode 100644
index 0000000..02a899a
--- /dev/null
+++ b/client/views/register/index.ejs
@@ -0,0 +1,171 @@
+<!-- source:https://codepen.io/owaiswiz/pen/jOPvEPB -->
+<%- await include("../layouts/header.ejs", {title: 'FLUX Register'}) %>
+
+<div class="min-h-screen bg-gray-100 text-gray-900 flex justify-center">
+  <div
+    class="max-w-screen-xl m-0 sm:m-10 bg-white shadow sm:rounded-lg flex justify-center flex-1"
+  >
+    <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
+      <div class="mt-12 flex flex-col items-center">
+        <h1 class="text-2xl xl:text-3xl font-extrabold">Sign up</h1>
+        <div class="w-full flex-1 mt-8">
+          <div class="flex flex-col items-center">
+            <!-- <a href="http://localhost:3000/oauth/google"> -->
+            <button
+              class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
+              onclick="window.location.href='http://localhost:3000/oauth/google'"
+            >
+              <div class="bg-white p-2 rounded-full">
+                <svg class="w-4" viewBox="0 0 533.5 544.3">
+                  <path
+                    d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
+                    fill="#4285f4"
+                  />
+                  <path
+                    d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
+                    fill="#34a853"
+                  />
+                  <path
+                    d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
+                    fill="#fbbc04"
+                  />
+                  <path
+                    d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
+                    fill="#ea4335"
+                  />
+                </svg>
+              </div>
+              <span class="ml-4"> Sign Up with Google </span>
+            </button>
+        <!-- </a> -->
+
+            <button
+              class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5"
+              onclick="window.location.href='http://localhost:3000/oauth/github'"
+            >
+              <div class="bg-white p-1 rounded-full">
+                <svg class="w-6" viewBox="0 0 32 32">
+                  <path
+                    fill-rule="evenodd"
+                    d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z"
+                  />
+                </svg>
+              </div>
+              <span class="ml-4"> Sign Up with GitHub </span>
+            </button>
+          </div>
+
+          <div class="my-12 border-b text-center">
+            <div
+              class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2"
+            >
+              Or sign up with e-mail
+            </div>
+          </div>
+
+          <div class="mx-auto max-w-xs">
+            <input
+              class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
+              type="email"
+              placeholder="Email"
+            />
+            <input
+              class="w-full mt-5 px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
+              type="text"
+              placeholder="Name"
+            />
+            <input
+              class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
+              type="password"
+              placeholder="Password"
+            />
+            <button
+              class="signup-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+            >
+              <svg
+                class="w-6 h-6 -ml-2"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+                <circle cx="8.5" cy="7" r="4" />
+                <path d="M20 8v6M23 11h-6" />
+              </svg>
+              <span class="ml-3"> Sign Up </span>
+            </button>
+            <button
+            class="signin-button mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+            onclick="window.location.href='http://localhost:8000/login'"
+          >
+            <svg
+              class="w-6 h-6 -ml-2"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+              <circle cx="8.5" cy="7" r="4" />
+              <path d="M20 8v6M23 11h-6" />
+            </svg>
+            <span class="ml-3"> Sign In Instead</span>
+          </button>
+            <p class="mt-6 text-xs text-gray-600 text-center">
+              I agree to abide by codegasm's
+              <a href="#" class="border-b border-gray-500 border-dotted">
+                Terms of Service
+              </a>
+              and its
+              <a href="#" class="border-b border-gray-500 border-dotted">
+                Privacy Policy
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
+      <div
+        class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
+        style="
+          background-image: url('https://storage.googleapis.com/devitary-image-host.appspot.com/15848031292911696601-undraw_designer_life_w96d.svg');
+        "
+      ></div>
+    </div>
+  </div>
+</div>
+<script>
+    document.querySelector('.signup-button').addEventListener('click', async function() {
+    const email = document.querySelector('input[type="email"]').value;
+    const name = document.querySelector('input[type="text"]').value;
+    const password = document.querySelector('input[type="password"]').value;
+
+    await fetch('http://localhost:3000/auth/register', {
+        method: 'POST',
+        headers: {
+            'accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            email: email,
+            fullName: name,
+            password: password
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log(data);
+        document.cookie = `accessToken=${data.access_token}; path=/;`;
+        window.location.href = '/space';
+    })
+    .catch(error => {
+        console.error(error);
+    });
+});
+
+</script>
+<%- await include("../layouts/end.ejs") %>
