diff --git a/Client/index.html b/Client/index.html
index c2198aa5a..3407fb5cd 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="./public/bluewave_favicon.ico" />
+    <link rel="icon" href="./bluewave_favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BlueWave Uptime</title>
   </head>
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 42e7feb1a..dffc87ab9 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -1,12 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import {
-  Box,
-  Divider,
-  FormControlLabel,
-  Stack,
-  Typography,
-} from "@mui/material";
+import { Box, Divider, FormControl, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
@@ -18,6 +12,7 @@ import Field from "../../Components/Inputs/Field";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../assets/icons/mail.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 
 import "./index.css";
 
@@ -154,6 +149,72 @@ const Login = () => {
     );
   };
 
+  const StepOne = () => {
+    const submit = (event) => {
+      event.preventDefault();
+
+      const { error } = credentials.validate(
+        { email: form.email },
+        { abortEarly: false }
+      );
+      if (error) {
+        setErrors((prev) => ({ ...prev, email: error.details[0].message }));
+        createToast({ body: "Invalid email address." });
+      } else {
+        setStep(2);
+      }
+    };
+
+    return (
+      <>
+        <Stack gap={theme.gap.large} textAlign="center">
+          <Box>
+            <Typography component="h1">Log In</Typography>
+            <Typography>Enter your email address</Typography>
+          </Box>
+          <Box textAlign="left">
+            <form onSubmit={submit}>
+              <Field
+                type="email"
+                id="login-email-input"
+                label="Email"
+                isRequired={true}
+                placeholder="john.doe@domain.com"
+                autoComplete="email"
+                value={form.email}
+                onChange={handleChange}
+                error={errors.email}
+              />
+            </form>
+          </Box>
+          <Stack direction="row" justifyContent="space-between">
+            <Button
+              level="secondary"
+              label="Back"
+              animate="slideLeft"
+              img={<ArrowBackRoundedIcon />}
+              onClick={() => setStep(0)}
+              sx={{
+                mb: theme.gap.medium,
+                px: theme.gap.ml,
+                "& svg.MuiSvgIcon-root": {
+                  mr: theme.gap.xs,
+                },
+              }}
+            />
+            <Button
+              level="primary"
+              label="Continue"
+              onClick={submit}
+              disabled={errors.email && true}
+              sx={{ width: "30%" }}
+            />
+          </Stack>
+        </Stack>
+      </>
+    );
+  };
+
   return (
     <Stack className="login-page" overflow="hidden">
       <img
@@ -171,7 +232,8 @@ const Login = () => {
         <Typography>BlueWave Uptime</Typography>
       </Stack>
       <Stack
-        width="fit-content"
+        width="100%"
+        maxWidth={600}
         flex={1}
         justifyContent="center"
         p={theme.gap.xl}
@@ -186,12 +248,11 @@ const Login = () => {
             padding: {
               xs: theme.gap.large,
               sm: theme.gap.xl,
-              lg: theme.gap.xxl,
             },
           },
         }}
       >
-        <LandingPage />
+        {step === 0 ? <LandingPage /> : step === 1 ? <StepOne /> : ""}
       </Stack>
       <Box textAlign="center" p={theme.gap.large}>
         <Typography display="inline-block">Don't have an account? -</Typography>
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 22e9ce96b..6b688b33d 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -107,6 +107,7 @@
   font-weight: 600;
 }
 
+/*  */
 .login-page {
   height: 100vh;
 }
@@ -115,7 +116,6 @@
   font-weight: 600;
   color: var(--env-var-color-3);
 }
-
 .login-page p {
   font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-2-light);
@@ -145,16 +145,24 @@
 .login-page p + span:hover {
   opacity: 1;
 }
-.login-page button:not(.MuiIconButton-root) {
+.login-page button:not(.MuiIconButton-root),
+.login-page .field h3.MuiTypography-root,
+.login-page .field input,
+.login-page .field .input-error {
   font-size: var(--env-var-font-size-medium-plus);
-  height: 40px;
+}
+.login-page button:not(.MuiIconButton-root) {
   border-radius: var(--env-var-radius-2);
+  line-height: 1;
+}
+.login-page button:not(.MuiIconButton-root),
+.field .MuiInputBase-root:has(input) {
+  height: 40px;
 }
 
 .login-page > .MuiStack-root:nth-of-type(1) {
   height: var(--env-var-nav-bar-height);
 }
-
 .login-page .background-pattern-svg {
   top: 14%;
   width: 100%;
