diff --git a/apps/frontend/src/assets/city-bg.png b/apps/frontend/src/assets/city-bg.png
new file mode 100644
index 0000000..cabbd66
Binary files /dev/null and b/apps/frontend/src/assets/city-bg.png differ
diff --git a/apps/frontend/src/assets/fcc-mark.png b/apps/frontend/src/assets/fcc-mark.png
new file mode 100644
index 0000000..963b919
Binary files /dev/null and b/apps/frontend/src/assets/fcc-mark.png differ
diff --git a/apps/frontend/src/components/ui/input-group.tsx b/apps/frontend/src/components/ui/input-group.tsx
new file mode 100644
index 0000000..ad53e41
--- /dev/null
+++ b/apps/frontend/src/components/ui/input-group.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@lib/utils';
+import { Button } from '@components/ui/button';
+import { Input } from '@components/ui/input';
+import { Textarea } from '@components/ui/textarea';
+
+function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        'inline-start':
+          'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+        'inline-end':
+          'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+        'block-start':
+          'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+        'block-end':
+          'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+      },
+    },
+    defaultVariants: {
+      align: 'inline-start',
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = 'inline-start',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest('button')) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector('input')?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  'gap-2 text-sm flex items-center shadow-none',
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: '',
+        'icon-xs':
+          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+      },
+    },
+    defaultVariants: {
+      size: 'xs',
+    },
+  },
+);
+
+function InputGroupButton({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'xs',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<'input'>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};
diff --git a/apps/frontend/src/containers/auth/LoginPage.tsx b/apps/frontend/src/containers/auth/LoginPage.tsx
index e6f6fbf..2dbbf81 100644
--- a/apps/frontend/src/containers/auth/LoginPage.tsx
+++ b/apps/frontend/src/containers/auth/LoginPage.tsx
@@ -2,16 +2,37 @@ import React, { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../components/AuthProvider';
 import { Button } from '../../components/ui/button';
+import cityBg from '../../assets/city-bg.png';
+import fccMark from '../../assets/fcc-mark.png';
+import { Input } from '@components/ui/input';
+import { Label } from '@components/ui/label';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '@components/ui/input-group';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import { PasswordCriterion } from './PasswordCriterion';
+
+enum AuthPage {
+  Login,
+  SignupStepOne,
+  SignupStepTwo,
+  ForgotPassword,
+}
 
 export const LoginPage: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const [error, setError] = useState('');
-  const [isLogin, setIsLogin] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const [authPage, setAuthPage] = useState<AuthPage>(AuthPage.Login);
 
   const { login, signup } = useAuth();
   const navigate = useNavigate();
@@ -22,20 +43,78 @@ export const LoginPage: React.FC = () => {
   } | null;
   const from = locationState?.from?.pathname || '/dashboard';
 
+  const hasMinLength = password.length >= 8;
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasLowercase = /[a-z]/.test(password);
+  const hasNumber = /\d/.test(password);
+  const hasSpecialChar = /[^A-Za-z0-9]/.test(password);
+  const passwordsMatch =
+    password.length > 0 &&
+    confirmPassword.length > 0 &&
+    password === confirmPassword;
+  const allCriteriaMet =
+    hasMinLength &&
+    hasUppercase &&
+    hasLowercase &&
+    hasNumber &&
+    hasSpecialChar &&
+    passwordsMatch;
+
+  const showAuthFieldError =
+    authPage === AuthPage.Login &&
+    !!error &&
+    error !== 'Account created successfully! Please sign in.';
+
+  const headerText = (() => {
+    switch (authPage) {
+      case AuthPage.Login:
+        return 'Admin Dashboard';
+        break;
+
+      case AuthPage.SignupStepOne:
+        return 'New User';
+        break;
+
+      case AuthPage.SignupStepTwo:
+        return 'User Details';
+        break;
+
+      case AuthPage.ForgotPassword:
+        return 'Forgot Password';
+        break;
+
+      default:
+        break;
+    }
+  })();
+
+  const resetFields = () => {
+    setEmail('');
+    setPassword('');
+    setConfirmPassword('');
+    setFirstName('');
+    setLastName('');
+    setShowPassword(false);
+    setShowConfirmPassword(false);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
     setIsLoading(true);
 
     try {
-      if (isLogin) {
+      if (authPage === AuthPage.Login) {
         await login({ email, password });
         navigate(from, { replace: true });
-      } else {
+      } else if (authPage === AuthPage.SignupStepTwo) {
         await signup({ email, password, firstName, lastName });
-        setIsLogin(true);
+        setAuthPage(AuthPage.Login);
         setError('Account created successfully! Please sign in.');
         setPassword('');
+      } else if (authPage === AuthPage.ForgotPassword) {
+        // TODO: Wire up to email-sending endpoint
+        // TODO: Show view confirming email was sent
       }
     } catch (err: unknown) {
       if (err instanceof Error) {
@@ -49,69 +128,300 @@ export const LoginPage: React.FC = () => {
   };
 
   return (
-    <div style={{ padding: '2rem', maxWidth: '400px', margin: '0 auto' }}>
-      <h1>{isLogin ? 'Login' : 'Signup'}</h1>
-
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-
-      <form
-        onSubmit={handleSubmit}
-        style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
-      >
-        {!isLogin && (
-          <>
-            <input
-              type="text"
-              placeholder="First Name"
-              required
-              value={firstName}
-              onChange={(e) => setFirstName(e.target.value)}
-            />
-            <input
-              type="text"
-              placeholder="Last Name"
-              required
-              value={lastName}
-              onChange={(e) => setLastName(e.target.value)}
-            />
-          </>
-        )}
-        <input
-          type="email"
-          placeholder="Email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <input
-          type="password"
-          placeholder="Password"
-          required
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-
-        <Button id="auth-submit-btn" type="submit" disabled={isLoading}>
-          {isLoading ? '...' : isLogin ? 'Login' : 'Signup'}
-        </Button>
-
-        <button
-          type="button"
-          onClick={() => {
-            setIsLogin(!isLogin);
-            setError('');
-          }}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: 'blue',
-            cursor: 'pointer',
-            textDecoration: 'underline',
-          }}
+    <div className="relative flex justify-center items-center min-h-screen bg-[#007B64]">
+      <div
+        className="absolute inset-0 bg-no-repeat bg-cover bg-center opacity-30"
+        style={{ backgroundImage: `url(${cityBg})` }}
+      ></div>
+      <div className="relative z-10 p-10 m-auto bg-white rounded-[50px] w-[32rem]">
+        <div>
+          <img
+            src={fccMark}
+            alt="FCC Logo"
+            className="w-36 h-36 object-contain m-auto"
+          />
+          <h1 className="font-semibold text-[#007B64] text-4xl text-center">
+            {headerText}
+          </h1>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="flex flex-col gap-4 mt-10"
+          noValidate
         >
-          {isLogin ? 'Need an account?' : 'Already have one?'}
-        </button>
-      </form>
+          {authPage === AuthPage.SignupStepTwo && (
+            <>
+              <div>
+                <Label
+                  htmlFor="first-name"
+                  className="font-semibold mb-1 text-[#404040]"
+                >
+                  First Name
+                </Label>
+                <Input
+                  type="text"
+                  placeholder="First Name"
+                  required
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  className="w-full py-5 focus:ring-[2.5px] focus:ring-[#007B64]"
+                  id="first-name"
+                />
+              </div>
+              <div>
+                <Label
+                  htmlFor="last-name"
+                  className="font-semibold mb-1 text-[#404040]"
+                >
+                  Last Name
+                </Label>
+                <Input
+                  type="text"
+                  placeholder="Last Name"
+                  required
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  className="w-full py-5 focus:ring-[2.5px] focus:ring-[#007B64] mb-14"
+                  id="last-name"
+                />
+              </div>
+            </>
+          )}
+
+          {(authPage === AuthPage.Login ||
+            authPage === AuthPage.SignupStepOne ||
+            authPage === AuthPage.ForgotPassword) && (
+            <>
+              <div>
+                <Label
+                  htmlFor="email"
+                  className="font-semibold mb-1 text-[#404040]"
+                >
+                  Email
+                </Label>
+                <Input
+                  type="email"
+                  placeholder="Email"
+                  required
+                  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className={`w-full py-5 focus:ring-[2.5px] focus:ring-[#007B64] peer invalid:[&:not(:placeholder-shown):not(:focus)]:ring-[2.5px] invalid:[&:not(:placeholder-shown):not(:focus)]:ring-[#B4444D] invalid:[&:not(:placeholder-shown):not(:focus)]:bg-[#FFFAFA] ${
+                    showAuthFieldError
+                      ? 'ring-[2.5px] ring-[#B4444D] bg-[#FFFAFA]'
+                      : ''
+                  }`}
+                  id="email"
+                />
+                <span className="mt-2 hidden text-sm text-[#B4444D] peer-[&:not(:placeholder-shown):not(:focus):invalid]:block">
+                  Please enter a valid email address
+                </span>
+              </div>
+              {(authPage === AuthPage.Login ||
+                authPage === AuthPage.SignupStepOne) && (
+                <>
+                  <div>
+                    <Label
+                      htmlFor="password"
+                      className="font-semibold mb-1 text-[#404040]"
+                    >
+                      Password
+                    </Label>
+                    <InputGroup
+                      className={`w-full focus-within:border-[#007B64] focus-within:ring-[2.5px] focus-within:ring-[#007B64] py-5 ${
+                        showAuthFieldError
+                          ? 'border-[#B4444D] ring-[2px] ring-[#B4444D]'
+                          : ''
+                      }`}
+                    >
+                      <InputGroupInput
+                        id="inline-end-input"
+                        type={showPassword ? 'text' : 'password'}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="Password"
+                        className={`focus:ring-[#007B64] ${
+                          showAuthFieldError ? 'bg-[#FFFAFA]' : ''
+                        }`}
+                      />
+                      <InputGroupAddon
+                        align="inline-end"
+                        className="hover:cursor-pointer"
+                        onClick={() => setShowPassword(!showPassword)}
+                      >
+                        {showPassword ? <EyeIcon /> : <EyeOffIcon />}
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </div>
+                  {authPage === AuthPage.SignupStepOne && (
+                    <div>
+                      <Label
+                        htmlFor="password"
+                        className="font-semibold mb-1 text-[#404040]"
+                      >
+                        Confirm Password
+                      </Label>
+                      <InputGroup className="w-full focus-within:border-[#007B64] focus-within:ring-[2.5px] focus-within:ring-[#007B64] py-5">
+                        <InputGroupInput
+                          id="inline-end-input"
+                          type={showConfirmPassword ? 'text' : 'password'}
+                          value={confirmPassword}
+                          onChange={(e) => setConfirmPassword(e.target.value)}
+                          placeholder="Re-enter Password"
+                          className="focus:ring-[#007B64]"
+                        />
+                        <InputGroupAddon
+                          align="inline-end"
+                          className="hover:cursor-pointer"
+                          onClick={() =>
+                            setShowConfirmPassword(!showConfirmPassword)
+                          }
+                        >
+                          {showConfirmPassword ? <EyeIcon /> : <EyeOffIcon />}
+                        </InputGroupAddon>
+                      </InputGroup>
+                    </div>
+                  )}
+                </>
+              )}
+            </>
+          )}
+
+          {authPage === AuthPage.SignupStepOne ? (
+            <div className="flex gap-1 flex-wrap w-full">
+              <PasswordCriterion
+                name="8+ characters"
+                criterionMet={hasMinLength}
+              />
+              <PasswordCriterion name="Uppercase" criterionMet={hasUppercase} />
+              <PasswordCriterion name="Lowercase" criterionMet={hasLowercase} />
+              <PasswordCriterion
+                name="Special character"
+                criterionMet={hasSpecialChar}
+              />
+              <PasswordCriterion name="Number" criterionMet={hasNumber} />
+              <PasswordCriterion
+                name="Matching"
+                criterionMet={passwordsMatch}
+              />
+            </div>
+          ) : (
+            authPage === AuthPage.Login && (
+              <div className="flex items-center w-full">
+                {error && (
+                  <p className="text-sm text-[#B4444D] mr-2">{error}</p>
+                )}
+                <Button
+                  type="button"
+                  className="p-0 text-[#007B64] font-semibold ml-auto"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    resetFields();
+                    setAuthPage(AuthPage.ForgotPassword);
+                  }}
+                >
+                  Forgot Password?
+                </Button>
+              </div>
+            )
+          )}
+
+          {authPage === AuthPage.Login ? (
+            <Button
+              id="auth-submit-btn"
+              type="submit"
+              className={`py-5 h-14 rounded-full font-semibold text-xl text-white ${
+                !email || !password
+                  ? 'bg-[#737373] cursor-not-allowed'
+                  : 'bg-[#007B64]'
+              }`}
+            >
+              {isLoading ? '...' : 'Login'}
+            </Button>
+          ) : authPage === AuthPage.ForgotPassword ? (
+            <Button
+              id="auth-submit-btn"
+              type="submit"
+              disabled={!email || isLoading}
+              className={`py-5 h-14 rounded-full font-semibold text-xl text-white ${
+                !email ? 'bg-[#737373] cursor-not-allowed' : 'bg-[#007B64]'
+              }`}
+            >
+              {isLoading ? '...' : 'Send'}
+            </Button>
+          ) : authPage === AuthPage.SignupStepOne ? (
+            <Button
+              className={`py-5 h-14 rounded-full font-semibold text-xl text-white ${
+                !allCriteriaMet
+                  ? 'bg-[#737373] cursor-not-allowed'
+                  : 'bg-[#007B64]'
+              }`}
+              onClick={(e) => {
+                e.preventDefault();
+                setAuthPage(AuthPage.SignupStepTwo);
+              }}
+            >
+              Create Account
+            </Button>
+          ) : (
+            <Button
+              id="auth-submit-btn"
+              type="submit"
+              disabled={isLoading || !allCriteriaMet}
+              className={`py-5 h-14 rounded-full font-semibold text-xl text-white ${
+                !firstName || !lastName
+                  ? 'bg-[#737373] cursor-not-allowed'
+                  : 'bg-[#007B64]'
+              }`}
+            >
+              {isLoading ? '...' : 'Finish Profile'}
+            </Button>
+          )}
+
+          <div className="flex text-gray-500 justify-center items-center">
+            {authPage === AuthPage.ForgotPassword ? (
+              <>
+                <p>Go back to </p>
+                <Button
+                  type="button"
+                  onClick={() => {
+                    setAuthPage(AuthPage.Login);
+                    resetFields();
+                    setError('');
+                  }}
+                  className="text-md font-semibold text-[#007B64]"
+                >
+                  Sign in
+                </Button>
+              </>
+            ) : (
+              <>
+                <p>
+                  {authPage === AuthPage.Login
+                    ? "Don't have an account?"
+                    : 'Already have an account?'}
+                </p>
+                <Button
+                  type="button"
+                  onClick={() => {
+                    setAuthPage(
+                      authPage === AuthPage.Login
+                        ? AuthPage.SignupStepOne
+                        : AuthPage.Login,
+                    );
+                    setError('');
+                    resetFields();
+                  }}
+                  className="text-md font-semibold text-[#007B64]"
+                >
+                  {authPage === AuthPage.Login ? 'Create Account' : 'Sign in'}
+                </Button>
+              </>
+            )}
+          </div>
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/apps/frontend/src/containers/auth/PasswordCriterion.tsx b/apps/frontend/src/containers/auth/PasswordCriterion.tsx
new file mode 100644
index 0000000..8bff1ab
--- /dev/null
+++ b/apps/frontend/src/containers/auth/PasswordCriterion.tsx
@@ -0,0 +1,31 @@
+import { Check, X } from 'lucide-react';
+import React from 'react';
+
+interface PasswordCriterionProps {
+  name: string;
+  criterionMet: boolean;
+}
+
+export const PasswordCriterion: React.FC<PasswordCriterionProps> = ({
+  name,
+  criterionMet,
+}) => {
+  const Icon = criterionMet ? Check : X;
+  const color = criterionMet ? '#12BA82' : '#737373';
+
+  return (
+    <div className="flex items-center gap-2 rounded-full border border-[#E5E5E5] py-1 px-3">
+      <div
+        className="flex items-center justify-center rounded-full"
+        style={{
+          backgroundColor: color,
+          width: 20,
+          height: 20,
+        }}
+      >
+        <Icon className="w-3 h-3 text-white" strokeWidth={4} />
+      </div>
+      <p style={{ color }}>{name}</p>
+    </div>
+  );
+};