diff --git a/src/components/Button/Button.definitions.ts b/src/components/Button/Button.definitions.ts
index 431d0e5..ea0d335 100644
--- a/src/components/Button/Button.definitions.ts
+++ b/src/components/Button/Button.definitions.ts
@@ -15,6 +15,8 @@ export enum ButtonVariant {
   Compact = "Compact",
   Regular = "Regular",
   Large = "Large",
+  Login = "Login",
+  Signup = "Signup",
 }
 
 export enum ButtonColor {
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index b7c3d3a..9e0eca2 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -56,6 +56,23 @@
   font-size: 1.625rem;
 }
 
+.Login {
+  width: 180px;
+  height: 46px;
+  border-radius: 40px;
+  font-size: 1rem;
+  font-weight: 600;
+  background-color: var(--miracle-color-blue);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Login:hover {
+  background-color: var(--miracle-color-blue-dark);
+}
+
 .Blue {
   background-color: var(--miracle-color-blue);
   color: white;
@@ -102,3 +119,25 @@
   justify-content: center;
   padding-left: 0.625rem;
 }
+
+.Signup {
+  width: 180px;
+  height: 46px;
+  border-radius: 40px;
+  border: 1px solid #7196d0;
+  background: #ffffff;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: #7196d0;
+  cursor: pointer;
+  gap: 0px;
+  margin-top: 16px;
+}
+
+.Signup:hover {
+  opacity: 0.9;
+}
diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
index 71d26ca..f4269ef 100644
--- a/src/components/Input/Input.module.css
+++ b/src/components/Input/Input.module.css
@@ -6,30 +6,37 @@
 }
 
 .form-field input {
-  max-width: 100%;
+  width: 264px;
+  height: 53px;
   padding: 0.625rem;
-  border: 0.0625rem solid var(--miracle-color-medium);
-  font-size: 1rem;
+  border: 0.8px solid var(--miracle-color-medium);
   transition: 0.2s ease-in-out;
   font-family: "Inter", sans-serif;
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding-right: 2rem;
+  font-family: Inter;
 }
 
 .form-field input:focus {
   outline: none;
-  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  border: 0.8px solid var(--miracle-color-red-extra-dark);
   transition: var(--transition-duration-short) ease-in-out;
 }
 
 .form-field input:hover {
   outline: none;
-  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  border: 0.8px solid var(--miracle-color-red-extra-dark);
   transition: var(--transition-duration-short) ease-in-out;
 }
 
 .form-field input::placeholder {
   font-family: "Inter", sans-serif;
-  font-size: 1rem;
+  font-size: 15px;
   font-weight: 400;
+  text-align: left;
+  color: #7c7b7c;
+  opacity: 80%;
 }
 
 .label-and-error {
diff --git a/src/pages/LoginPage/LoginPage.module.css b/src/pages/LoginPage/LoginPage.module.css
index b7eb364..361b780 100644
--- a/src/pages/LoginPage/LoginPage.module.css
+++ b/src/pages/LoginPage/LoginPage.module.css
@@ -7,6 +7,32 @@
   height: 100vh;
 }
 
+.navbar {
+  width: 100%;
+  background-color: white;
+  padding: 16px 32px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  z-index: 10;
+}
+
+.contentContainer {
+  width: 100%;
+  background: linear-gradient(
+    to bottom,
+    var(--miracle-color-blue),
+    var(--miracle-color-blue-light)
+  );
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 19px;
+  height: auto;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
 .logo {
   align-self: flex-start; /* Align the logo to the top left */
   height: 50px;
@@ -16,26 +42,33 @@
 
 .loginContainer {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  margin: 72px 0;
+  padding-left: 19px;
+  width: 70%;
 }
 
 .loginBlock {
   background-color: var(--miracle-color-white);
   box-shadow: var(--box-shadow);
-  padding: 20px;
-  width: 300px;
-  border-radius: 8px;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 999px;
+  height: 676px;
+  top: 127px;
+  left: 19px;
+  border-radius: 15px;
+  max-height: 90vh;
 }
 
 .loginBlockHeader {
-  font-size: 24px;
-  font-weight: 400;
-  margin-bottom: 8px;
-  color: #333;
+  font-size: 35px;
+  font-weight: 700;
+  color: black;
+  text-align: center;
+  margin-bottom: 32px;
 }
 
 .loginBlockSubtitle {
@@ -48,22 +81,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
 }
 
-.loginInputContainerUpper,
-.loginInputContainerLower {
-  width: 100%;
+.loginInputContainerUpper {
+  width: 264px;
   margin-bottom: 16px;
+  justify-content: center;
 }
 
-.loginInput {
-  padding: 8px;
-  font-size: 14px;
-  border: 1px solid var(--miracle-color-medium-light);
-  border-radius: 4px;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 8px;
+.loginInputContainerLower {
+  width: 264px;
+  justify-content: center;
 }
 
 .loginBlockLink {
@@ -87,12 +116,36 @@
 }
 
 .Icon {
-  margin: -30px 10px 0 auto;
+  margin: -35px 10px 0 auto;
 }
 
 .forgotPassword {
   font-size: 12px;
   color: var(--miracle-color-medium-dark);
+  margin-top: 8px;
+  align-self: flex-start;
+  margin-left: 0;
+  margin-bottom: 32px;
+}
+
+.rightSideContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: white;
+  padding-right: 4rem;
+  padding-left: 1rem;
+}
+
+.rightSideHeader {
+  font-size: 55px;
+  font-weight: 700;
   margin-bottom: 16px;
-  margin-left: auto;
+}
+
+.rightSideText {
+  font-size: 20px;
+  margin-bottom: 24px;
+  font-weight: 300;
 }
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
index 3905429..1117c50 100644
--- a/src/pages/LoginPage/LoginPage.tsx
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import styles from "./LoginPage.module.css";
 import Button from "../../components/Button/Button";
+import { ButtonVariant } from "../../components/Button/Button.definitions";
 import Icon from "../../components/CustomIcon/Icon";
 import Input from "../../components/Input/Input";
 import logo from "../../public/0GAGNk.tif.png";
@@ -22,11 +22,16 @@ const LoginPage = () => {
     password: string;
   }
 
-  // eslint-disable-next-line autofix/no-unused-vars
+  interface CustomError {
+    code: string;
+  }
+
+  interface ErrorWithDetails {
+    errors: CustomError[];
+  }
+
   enum FormValueNames {
-    // eslint-disable-next-line autofix/no-unused-vars
     email = "email",
-    // eslint-disable-next-line autofix/no-unused-vars
     password = "password",
   }
 
@@ -44,7 +49,7 @@ const LoginPage = () => {
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid }, // Add isValid to formState
+    formState: { errors, isValid },
     setError: setSignInError,
   } = useForm<FormValues>({
     defaultValues: {
@@ -60,27 +65,22 @@ const LoginPage = () => {
       return;
     }
 
-    //  Clear the session to attempt to sign in
     await setActive({ session: null });
 
     try {
-      // Complete the sign in and get the session with Clerk
       const completeSignIn = await signIn.create({
         identifier: inputData.email,
         password: inputData.password,
       });
 
-      // If the sign in was successful, set the active session and make the user request
       if (completeSignIn.status === "complete") {
         await setActive({ session: completeSignIn.createdSessionId });
         navigate("/dashboard");
       }
-    } catch (err: any) {
-      // if the error is form_identifier_not_found, set the error message on the email field
+    } catch (err) {
+      const error = err as ErrorWithDetails;
       if (
-        err.errors.some(
-          (error: any) => error.code === "form_identifier_not_found",
-        )
+        error.errors.some((error) => error.code === "form_identifier_not_found")
       ) {
         setSignInError("email", {
           type: "manual",
@@ -89,9 +89,7 @@ const LoginPage = () => {
       }
 
       if (
-        err.errors.some(
-          (error: any) => error.code === "form_password_incorrect",
-        )
+        error.errors.some((error) => error.code === "form_password_incorrect")
       ) {
         setSignInError("password", {
           type: "manual",
@@ -99,80 +97,87 @@ const LoginPage = () => {
         });
       }
 
-      // If the sign in was not successful, clear the session
       await setActive({ session: null });
-
-      // Handle errors
       console.error(JSON.stringify(err, null, 2));
     }
   };
 
-  // Update the disabled state based on whether there are errors and the form is valid
   useEffect(() => {
     setDisabled(!isValid);
   }, [isValid]);
 
   return (
-    <>
-      <img src={logo} alt="Description of the image" className={styles.logo} />
-      <div className={styles.loginContainer}>
-        <div className={styles.loginBlock}>
-          <div className={styles.loginBlockHeader}>Log In</div>
-          <div className={styles.loginRedirect}>
-            Dont have an account?
-            <div
-              onClick={() => navigate("/sign-up")}
-              className={styles.loginBlockLink}
+    <div className={styles.pageContainer}>
+      <div className={styles.navbar}>
+        <img src={logo} alt="Miracle Flights Logo" className={styles.logo} />
+      </div>
+      <div className={styles.contentContainer}>
+        {/* Left side: login container */}
+        <div className={styles.loginContainer}>
+          <div className={styles.loginBlock}>
+            <div className={styles.loginBlockHeader}>Login to your Account</div>
+            <form
+              onSubmit={handleSubmit(Submit)}
+              className={styles.loginBlockContent}
             >
-              Sign up
-            </div>
-          </div>
-          <form
-            onSubmit={handleSubmit(Submit)}
-            className={styles.loginBlockContent}
-          >
-            <div className={styles.loginInputContainerUpper}>
-              <Input
-                name="email"
-                register={register}
-                error={errors[FormValueNames.email]?.message}
-                label="Email"
-                type="text"
-                placeholder="Email"
-              />
-            </div>
-            <div className={styles.loginInputContainerLower}>
-              <Input
-                name="password"
-                register={register}
-                error={errors[FormValueNames.password]?.message}
-                label="Password"
-                type={passwordVisible ? "text" : "password"}
-                placeholder="Password"
-              />
-
-              <div
-                className={styles.passwordToggle}
-                onClick={() => setPasswordVisible(!passwordVisible)}
-              >
-                <div className={styles.Icon}>
-                  <Icon glyph={passwordVisible ? "eye-slash" : "eye"} />
+              <div className={styles.loginInputContainerUpper}>
+                <Input
+                  name="email"
+                  register={register}
+                  error={errors[FormValueNames.email]?.message}
+                  type="text"
+                  placeholder="Email"
+                />
+              </div>
+              <div className={styles.loginInputContainerLower}>
+                <Input
+                  name="password"
+                  register={register}
+                  error={errors[FormValueNames.password]?.message}
+                  type={passwordVisible ? "text" : "password"}
+                  placeholder="Password"
+                />
+                <div
+                  className={styles.passwordToggle}
+                  onClick={() => setPasswordVisible(!passwordVisible)}
+                >
+                  <div className={styles.Icon}>
+                    <Icon glyph={passwordVisible ? "eye-slash" : "eye"} />
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className={styles.forgotPassword}>
-              <div
-                onClick={() => navigate("/forgot-password")}
-                className={styles.loginBlockLink}
-              >
-                Forgot password?
+              <div className={styles.forgotPassword}>
+                <div
+                  onClick={() => navigate("/forgot-password")}
+                  className={styles.loginBlockLink}
+                >
+                  Forgot password?
+                </div>
               </div>
-            </div>
-            <Button type="submit" text={"Login"} disabled={disabled} />
-          </form>
+              <Button
+                variant={ButtonVariant.Login}
+                type="submit"
+                text="Login"
+                disabled={disabled}
+              />
+            </form>
+          </div>
+        </div>
+
+        <div className={styles.rightSideContent}>
+          <div className={styles.rightSideHeader}>New Here?</div>
+          <div className={styles.rightSideText}>
+            Create your account with us today!
+          </div>
+          <Button
+            text="Sign Up"
+            type="button"
+            variant={ButtonVariant.Signup}
+            onClick={() => navigate("/sign-up")}
+          />
         </div>
       </div>
-    </>
+    </div>
   );
 };