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..ac94fbd 100644
--- a/apps/frontend/src/containers/auth/LoginPage.tsx
+++ b/apps/frontend/src/containers/auth/LoginPage.tsx
@@ -2,12 +2,32 @@ 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 SignupStep {
+  ONE = 1,
+  TWO = 2,
+}
 
 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 [signupStep, setSignupStep] = useState<SignupStep>(SignupStep.ONE);
 
   const [error, setError] = useState('');
   const [isLogin, setIsLogin] = useState(true);
@@ -22,6 +42,33 @@ 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 resetFields = () => {
+    setEmail('');
+    setPassword('');
+    setConfirmPassword('');
+    setFirstName('');
+    setLastName('');
+    setShowPassword(false);
+    setShowConfirmPassword(false);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
@@ -49,69 +96,227 @@ 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',
-          }}
-        >
-          {isLogin ? 'Need an account?' : 'Already have one?'}
-        </button>
-      </form>
+    <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">
+            {isLogin ? 'Admin Dashboard' : 'New User'}
+          </h1>
+        </div>
+
+        {error && <p style={{ color: 'red' }}>{error}</p>}
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-10">
+          {!isLogin && signupStep === SignupStep.TWO && (
+            <>
+              <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>
+            </>
+          )}
+
+          {(isLogin || (!isLogin && signupStep === SignupStep.ONE)) && (
+            <>
+              <div>
+                <Label
+                  htmlFor="email"
+                  className="font-semibold mb-1 text-[#404040]"
+                >
+                  Email
+                </Label>
+                <Input
+                  type="email"
+                  placeholder="Email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full py-5 focus:ring-[2.5px] focus:ring-[#007B64]"
+                  id="email"
+                />
+              </div>
+              <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">
+                  <InputGroupInput
+                    id="inline-end-input"
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="Password"
+                    className="focus:ring-[#007B64]"
+                  />
+                  <InputGroupAddon
+                    align="inline-end"
+                    className="hover:cursor-pointer"
+                    onClick={() => setShowPassword(!showPassword)}
+                  >
+                    {showPassword ? <EyeIcon /> : <EyeOffIcon />}
+                  </InputGroupAddon>
+                </InputGroup>
+              </div>
+              {!isLogin && (
+                <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>
+              )}
+            </>
+          )}
+
+          {!isLogin && signupStep === SignupStep.ONE ? (
+            <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>
+          ) : (
+            isLogin && (
+              <Button className="justify-end p-0 text-[#007B64] font-semibold">
+                Forgot Password?
+              </Button>
+            )
+          )}
+
+          {isLogin ? (
+            <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>
+          ) : signupStep === SignupStep.ONE ? (
+            <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();
+                setSignupStep(SignupStep.TWO);
+              }}
+            >
+              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">
+            <p>
+              {isLogin ? "Don't have an account?" : 'Already have an account?'}
+            </p>
+            <Button
+              type="button"
+              onClick={() => {
+                setIsLogin(!isLogin);
+                setError('');
+                setSignupStep(SignupStep.ONE);
+                resetFields();
+              }}
+              className="text-md font-semibold text-[#007B64]"
+            >
+              {isLogin ? '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>
+  );
+};