diff --git a/src/assets/images/apple-black.svg b/src/assets/images/apple-black.svg
new file mode 100644
index 0000000..0359029
--- /dev/null
+++ b/src/assets/images/apple-black.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2036" height="2500" viewBox="0 0 456.008 560.035"><path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"/></svg>
\ No newline at end of file
diff --git a/src/assets/images/facebook-4.svg b/src/assets/images/facebook-4.svg
new file mode 100644
index 0000000..70a3d90
--- /dev/null
+++ b/src/assets/images/facebook-4.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
+<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
+</svg>
diff --git a/src/assets/images/login-dots.jpg b/src/assets/images/login-dots.jpg
new file mode 100644
index 0000000..92dfa72
Binary files /dev/null and b/src/assets/images/login-dots.jpg differ
diff --git a/src/components/AuthPages/AuthLayout.jsx b/src/components/AuthPages/AuthLayout.jsx
index 0a744fb..3ebd286 100644
--- a/src/components/AuthPages/AuthLayout.jsx
+++ b/src/components/AuthPages/AuthLayout.jsx
@@ -12,8 +12,8 @@ export default function LoginLayout({ slogan, children }) {
     screen = "h-screen";
   }
   return (
-    <div className="layout-wrapper">
-      <div className={`main-wrapper w-full ${screen}`}>
+    <div className="layout-wrapper login">
+      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
         <div className="flex w-full h-full">
 
           <div className="flex-1 flex justify-center items-center">
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 8ba202b..643d7dc 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -1,9 +1,12 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import googleLogo from "../../../assets/images/google-logo.svg";
+import appleLogo from "../../../assets/images/apple-black.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
 // import titleShape from "../../../assets/images/shape/title-shape.svg";
 import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -41,7 +44,7 @@ export default function Login() {
       const loginResult = await userApi.logInUser(postData);  // just for a test
       //debugger;
       // if (email === "support@mermsemr.com") {
-      if (loginResult.data.status > 0 && loginResult.data.internal_return ==100 && loginResult.data.session !='') { // just for a start
+      if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
         localStorage.setItem("email", `${loginResult.data.email}`);
         localStorage.setItem("member_id", `${loginResult.data.member_id}`);
         localStorage.setItem("uid", `${loginResult.data.uid}`);
@@ -56,7 +59,7 @@ export default function Login() {
         localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
         localStorage.setItem("session", `${loginResult.data.session}`);
         setLoginLoading(true);
-         // userApi.getUserReminders(); //testing
+        // userApi.getUserReminders(); //testing
         setTimeout(() => {
           toast.success("Login Successfully");
           navigate("/", { replace: true });
@@ -74,37 +77,47 @@ export default function Login() {
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper w-full  flex justify-center items-center xl:bg-white dark:bg-dark-white   2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
-          <div className="w-full">
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-              <h1 className="text-5xl font-bold leading-[74px]   text-dark-gray dark:text-white">
-                Log In
-              </h1>
-            </div>
-            <div className="input-area">
-              <div className="input-item mb-5">
-                <InputCom
-                  value={email}
-                  inputHandler={handleEmail}
-                  placeholder="support@mermsemr.com"
-                  label="Email Address"
-                  name="email"
-                  type="email"
-                  iconName="message"
-                />
+        <div className="w-full">
+         <div className='mb-12'>
+         <Link to='#'>
+            <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          </Link>
+         </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+            <div className="w-full">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
+                  fontSize: 'calc(1rem + .6vw)'
+                }}>
+                  Sign In to WrenchBoard
+                </h1>
+                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
               </div>
-              <div className="input-item mb-5">
-                <InputCom
-                  value={password}
-                  inputHandler={handlePassword}
-                  placeholder="● ● ● ● ● ●"
-                  label="Password"
-                  name="password"
-                  type="password"
-                  iconName="password"
-                />
-              </div>
-              <div className="forgot-password-area flex justify-between items-center mb-7">
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    value={email}
+                    inputHandler={handleEmail}
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    iconName="message"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    value={password}
+                    inputHandler={handlePassword}
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                    forgotPassword
+                  />
+                </div>
+                {/* <div className="forgot-password-area flex justify-between items-center mb-7">
                 <div className="remember-checkbox flex items-center space-x-2.5">
                   <button
                     onClick={rememberMe}
@@ -136,64 +149,36 @@ export default function Login() {
                 <a href="/forgot-password" className="text-base text-purple">
                   Forgot Password
                 </a>
-              </div>
-              <div className="signin-area mb-3.5">
-                <div className="flex justify-center">
-                  <button
-                    onClick={doLogin}
-                    type="button"
-                    className={`btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center ${loginLoading ? "active" : ""
-                      }`}
-                  >
-                    {loginLoading ? (
-                      <div className="signup btn-loader"></div>
-                    ) : (
-                      <span>Sign In</span>
-                    )}
-                  </button>
+              </div> */}
+                <div className="signin-area mb-3.5">
+                  <div className="flex justify-center">
+                    <button
+                      onClick={doLogin}
+                      type="button"
+                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
+                        }`}
+                    >
+                      {loginLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Continue</span>
+                      )}
+                    </button>
+                  </div>
+                  {loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
+                  <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
+                  <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
+                  <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
                 </div>
-                {loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
-                <div className="flex justify-center bottomMargin">
-                <a
-                  href="#"
-                  className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with Google
-                  </span>
-                </a>
-                </div>
-                <div className="flex justify-center bottomMargin">
-                <a
-                    href="#"
-                    className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with faceBook
-                  </span>
-                </a>
-                </div>
-                <div className="flex justify-center bottomMargin">
-                <a
-                    href="#"
-                    className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with Apple
-                  </span>
-                </a>
-                </div>
-              </div>
-              <div className="signup-area flex justify-center">
+                {/* <div className="signup-area flex justify-center">
                 <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
                   Don't have an account ?
                   <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
                     Sign up free
                   </a>
                 </p>
+              </div> */}
+              <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>
@@ -201,4 +186,24 @@ export default function Login() {
       </AuthLayout>
     </>
   );
+}
+
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand
+}) => {
+  return (
+    <div className="flex justify-center bottomMargin">
+      <a
+        href={link}
+        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+      >
+        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+        <span className="text-lg text-thin-light-gray font-normal">
+          Sign In with {brand}
+        </span>
+      </a>
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 86aec14..25ab9c7 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Icons from "../../Icons";
+import { Link } from "react-router-dom";
 
 export default function InputCom({
   label,
@@ -9,18 +10,22 @@ export default function InputCom({
   iconName,
   inputHandler,
   value,
+  forgotPassword
 }) {
   return (
     <div className="input-com">
+      <div className="flex items-center justify-between">
       {label && (
         <label
-          className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       )}
-      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
+      {forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      </div>
+      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[58px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input
           placeholder={placeholder}
           value={value}
diff --git a/src/index.css b/src/index.css
index 67745b5..de1d043 100644
--- a/src/index.css
+++ b/src/index.css
@@ -533,14 +533,14 @@ input[type="number"] {
 /* TODO: =================================login ================================= */
 .btn-login {
   width: 100%;
-  height: 58px;
-  @apply bg-purple;
+  height: 48px;
+  /* @apply bg-purple; */
 }
 .btn-login.active {
   transition: all 0.5s ease-in-out;
   width: 58px;
-  height: 58px;
-  @apply bg-pink;
+  height: 48px;
+  /* @apply bg-pink; */
 }
 
 /* TODO: =================================login end================================= */
@@ -690,3 +690,23 @@ TODO: Responsive ===========================
     @apply mb-2;
   }
 }
+
+
+/* LoginPage */
+.main-wrapper{
+  background-image: url('./assets/images/login-dots.jpg');
+  background-attachment: fixed;
+  background-size: contain;
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+}
+
+.layout-wrapper.login{
+  background: rgb(236,237,241);
+  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+}
+
+.content-wrapper.login{
+  --bg-color: 255,255,255;
+  background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
+}
\ No newline at end of file