diff --git a/src/api/user.ts b/src/api/user.ts
index 71ccf84..7c0a382 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -19,5 +19,5 @@ export const loginAPI = async (email: string, password: string) => {
     email,
     password,
   });
-  response.data;
+  return response.data;
 };
diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx
index f9807de..0803ec5 100755
--- a/src/components/LoginPage/LoginPage.tsx
+++ b/src/components/LoginPage/LoginPage.tsx
@@ -1,16 +1,19 @@
 import SpinnerLogin from "../SpinnerLogin";
-import React, { useEffect, useState } from "react";
-import env from "../../enviroment/envFrontEnd";
-import { getUserAPI } from "../../api/user";
+import React, { useEffect, useMemo, useState } from "react";
+import { getUserAPI, loginAPI } from "../../api/user";
 import { useLocation, useNavigate } from "react-router-dom";
 import { setUser } from "../../reducers/user";
 import { useAppDispatch } from "../../hooks/store";
+import { capitalize } from "lodash";
+import AlertIcon from "../../icons/AlertIcon";
 
-const LoginPage = (props) => {
+const LoginPage = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [verifyPassword, setVerifyPassword] = useState("");
+  const [mode, setMode] = useState<"login" | "create" | "reset">("login");
   const [attemptingLogin, setAttemptingLogin] = useState(false);
+  const [loginExpired, setLoginExpired] = useState(false);
   const dispatch = useAppDispatch();
   const location = useLocation();
   const navigate = useNavigate();
@@ -35,10 +38,56 @@ const LoginPage = (props) => {
     } catch (e) {
       console.log("Login Error", e);
       setAttemptingLogin(false);
+      if (window.localStorage.getItem("hasPreviouslyLoggedIn")) {
+        setLoginExpired(true);
+      }
     }
   };
 
-  const onSubmit = () => {};
+  const login = async () => {
+    try {
+      const loginResponse = await loginAPI(email, password);
+      console.log("login response", loginResponse);
+      window.localStorage.setItem("hasPreviouslyLoggedIn", "true");
+      dispatch(setUser(loginResponse));
+      navigate("/home");
+    } catch (e) {
+      console.log("Login Error", e);
+    }
+  };
+
+  const isSubmitDisabled = useMemo(() => {
+    switch (mode) {
+      case "login":
+        return !email || !password;
+      case "create":
+        return !email || !password || !verifyPassword;
+      case "reset":
+        return !email;
+      default:
+        return false;
+    }
+  }, [email, password, verifyPassword, mode]);
+
+  const onSubmit = (e: any) => {
+    e.preventDefault();
+    if (mode === "login") {
+      login();
+    }
+  };
+
+  const headerTitle = useMemo(() => {
+    switch (mode) {
+      case "login":
+        return "Login to your account";
+      case "create":
+        return "Create an account";
+      case "reset":
+        return "Reset Password";
+      default:
+        return "Login to your account";
+    }
+  }, [mode]);
 
   useEffect(() => {
     attemptLoginWithToken();
@@ -58,103 +107,102 @@ const LoginPage = (props) => {
 
   return (
     <div>
-      <div className="sign__back">
-        <div className="login__block">
-          <div className="login__inner">
-            <div className="login__logo">
-              <img src="/images/icon.png" alt="logo" />
-            </div>
-
-            {/* <!-- Login form block --> */}
-            <div
-              className="login__form"
-              style={
-                props.loginFailed && props.loginFailedCode === 404
-                  ? { display: "none" }
-                  : { display: "block" }
-              }
-            >
-              <h2>
-                {props.state.loginMode
-                  ? "Login to your account"
-                  : "Create an account"}
-              </h2>
-              <form onSubmit={props.login}>
-                <div className="group__input">
-                  <input
-                    type="text"
-                    placeholder="Email address"
-                    onChange={(e) => setEmail(e.target.value)}
-                    value={email}
-                  />
-                </div>
-                {!props.state.resetPasswordMode ? (
-                  <div className="group__input forgot__pass">
-                    <input
-                      type="password"
-                      placeholder="Password"
-                      onChange={(e) => setPassword(e.target.value)}
-                      value={password}
-                    />
-                    {props.state.loginMode ? (
-                      <a onClick={props.switchResetPasswordMode}>Forgot?</a>
-                    ) : undefined}
-                  </div>
-                ) : undefined}
-                {props.state.loginMode ? undefined : (
-                  <div className="group__input">
-                    <input
-                      type="password"
-                      placeholder="Verify Password"
-                      onChange={(e) => setVerifyPassword(e.target.value)}
-                      value={verifyPassword}
-                    />
-                  </div>
-                )}
-                <div className="group__submit">
-                  <input
-                    type="submit"
-                    value={
-                      props.state.resetPasswordMode
-                        ? "Reset"
-                        : props.state.loginMode
-                        ? "Login"
-                        : "Create"
-                    }
-                  />
-                </div>
-
-                {!props.state.resetPasswordMode ? (
-                  <div className="create__account">
-                    {props.state.loginMode ? (
-                      <p>
-                        Don't have an account?{" "}
-                        <a onClick={props.switchLoginMode}>Create account</a>
-                      </p>
-                    ) : (
-                      <p>
-                        Back to <a onClick={props.switchLoginMode}>Login</a>
-                      </p>
-                    )}
-                  </div>
-                ) : (
-                  <div className="create__account">
-                    <p>
-                      Back to{" "}
-                      <a onClick={props.switchResetPasswordMode}>Login</a>
-                    </p>
-                  </div>
-                )}
-
-                {props.loginFailed && (
-                  <div className="login__image__wrapper">
-                    <img className="login__image" src="/images/error-red.png" />
-                    <p className="login__title">{props.loginFailed}</p>
-                  </div>
-                )}
-              </form>
+      <div className="bg-[#F4F4F6] w-screen h-screen flex justify-center items-center">
+        <div className="rounded-md shadow-lg bg-white p-10 relative min-w-[500px]">
+          <div className="absolute -top-10 left-0 right-0 flex justify-center items-center">
+            <div className="flex items-center justify-center rounded-full bg-white p-3 shadow-md">
+              <img src="/images/icon.png" alt="logo" className="w-[45px]" />
             </div>
           </div>
+          <form onSubmit={onSubmit}>
+            <p className="text-[#212B36] font-medium text-[25px] mt-0 mb-[15px] text-center">
+              {headerTitle}
+            </p>
+            {/* Email Address */}
+            <input
+              type="text"
+              placeholder="Email address"
+              className="w-full h-[48px] pl-[12px] pr-[12px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px]"
+              onChange={(e) => setEmail(e.target.value)}
+              value={email}
+            />
+
+            {/* Password */}
+            {(mode === "login" || mode === "create") && (
+              <div className="relative">
+                <input
+                  type="password"
+                  placeholder="Password"
+                  className="w-full h-[48px] pl-[12px] pr-[70px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+                  onChange={(e) => setPassword(e.target.value)}
+                  value={password}
+                />
+                {mode === "login" && (
+                  <div className="absolute right-0 top-0 bottom-0 flex items-center justify-center">
+                    <a
+                      className="text-[#3c85ee] text-[15px] font-medium no-underline mr-2 mt-4"
+                      onClick={() => setMode("reset")}
+                    >
+                      Forgot?
+                    </a>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Verify Password */}
+            {mode === "create" && (
+              <input
+                type="password"
+                placeholder="Verify Password"
+                className="w-full h-[48px] pl-[12px] pr-[12px] text-black border border-[#637381] rounded-[5px] outline-none text-[15px] mt-4"
+                onChange={(e) => setVerifyPassword(e.target.value)}
+                value={verifyPassword}
+              />
+            )}
+
+            <div className="flex justify-center items-center mt-4">
+              <input
+                type="submit"
+                value={capitalize(mode)}
+                disabled={isSubmitDisabled}
+                className="bg-[#3c85ee] border border-[#3c85ee] rounded-[5px] text-white text-[15px] font-medium cursor-pointer py-2 px-4 disabled:opacity-50"
+              />
+            </div>
+
+            <div className="mt-2">
+              {mode === "login" && (
+                <p className="text-center text-[#637381] text-[15px] font-normal">
+                  Don't have an account?{" "}
+                  <a
+                    onClick={() => setMode("create")}
+                    className="text-[#3c85ee] text-[15px] font-medium no-underline"
+                  >
+                    Create account
+                  </a>
+                </p>
+              )}
+              {(mode === "create" || mode === "reset") && (
+                <p className="text-center text-[#637381] text-[15px] font-normal">
+                  Back to{" "}
+                  <a
+                    onClick={() => setMode("login")}
+                    className="text-[#3c85ee] text-[15px] font-medium no-underline"
+                  >
+                    Login
+                  </a>
+                </p>
+              )}
+            </div>
+            {loginExpired && (
+              <div className="mt-4">
+                <div className="flex justify-center items-center">
+                  <AlertIcon className="w-[20px] text-red-600 mr-2" />
+                  <p className="text-[#637381] text-[15px]">Login expired</p>
+                </div>
+              </div>
+            )}
+          </form>
         </div>
       </div>
     </div>
diff --git a/src/icons/AlertIcon.tsx b/src/icons/AlertIcon.tsx
new file mode 100644
index 0000000..9c64752
--- /dev/null
+++ b/src/icons/AlertIcon.tsx
@@ -0,0 +1,15 @@
+type AlertIconType = React.SVGAttributes<SVGSVGElement>;
+
+const AlertIcon: React.FC<AlertIconType> = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <title>alert-circle</title>
+      <path
+        d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default AlertIcon;