diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx
index ce4e7fea..fbf70c86 100644
--- a/apps/frontend/src/app.tsx
+++ b/apps/frontend/src/app.tsx
@@ -7,26 +7,55 @@ import ApplicationsPage from '@features/applications/pages/ApplicationsPage';
 import ApplicationDetailPage from '@features/applications/pages/ApplicationDetailPage';
 import LoginContext from '@features/auth/components/LoginPage/LoginContext';
 import ProtectedRoutes from '@features/auth/components/ProtectedRoutes';
-import LoginPage from '@features/auth/components/LoginPage';
 import AdminRoutes from '@features/auth/components/AdminRoutes';
 import HomePage from '@shared/pages/HomePage';
 
 export const App: React.FC = () => {
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>(() => {
+    const storedToken = localStorage.getItem('token');
+    return storedToken ? JSON.parse(storedToken) : '';
+  });
+
   return (
     <LoginContext.Provider value={{ setToken, token }}>
       <BrowserRouter>
         <Routes>
-          <Route path="/login" element={<LoginPage />} />
+          <Route path="/login" element={<HomePage />} />
           <Route path="/home" element={<HomePage />} />
 
-          <Route element={<ProtectedRoutes token={token} />}>
+          <Route element={<ProtectedRoutes />}>
             <Route element={<AdminRoutes />}>
-              <Route path="/" element={<ApplicationsPage />} />
-              <Route path="/applications" element={<ApplicationsPage />} />
+              <Route
+                path="/"
+                element={
+                  <Navigation>
+                    <DashboardPage />
+                  </Navigation>
+                }
+              />
+              <Route
+                path="/applications"
+                element={
+                  <Navigation>
+                    <ApplicationsPage />
+                  </Navigation>
+                }
+              />
               <Route
                 path="/applications/:userId"
-                element={<ApplicationDetailPage />}
+                element={
+                  <Navigation>
+                    <ApplicationDetailPage />
+                  </Navigation>
+                }
+              />
+              <Route
+                path="/settings"
+                element={
+                  <Navigation>
+                    <SettingsPage />
+                  </Navigation>
+                }
               />
             </Route>
 
diff --git a/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx b/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
index 11e17abb..c9f7115d 100644
--- a/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
+++ b/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
@@ -125,8 +125,7 @@ export const ApplicantView = ({ user }: ApplicantViewProps) => {
                 </Box>
                 {!isLoading &&
                   selectedApplication &&
-                  String(selectedApplication.stage) ===
-                    ApplicationStage.PM_CHALLENGE && (
+                  String(selectedApplication.stage) === 'PM_CHALLENGE' && (
                     <FileUploadBox
                       accessToken={accessToken}
                       applicationId={applicationId}
diff --git a/apps/frontend/src/features/auth/components/LoginPage/index.tsx b/apps/frontend/src/features/auth/components/LoginPage/index.tsx
index b9093a3d..5e18acbb 100644
--- a/apps/frontend/src/features/auth/components/LoginPage/index.tsx
+++ b/apps/frontend/src/features/auth/components/LoginPage/index.tsx
@@ -2,19 +2,15 @@ import { useEffect } from 'react';
 import apiClient from '@api/apiClient';
 import useLoginContext from './useLoginContext';
 import { useNavigate } from 'react-router-dom';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Button, Stack } from '@mui/material';
+import { CognitoJwtVerifier } from 'aws-jwt-verify';
+
+const verifier = CognitoJwtVerifier.create({
+  userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID as string,
+  tokenUse: 'access',
+  clientId: import.meta.env.VITE_COGNITO_CLIENT_ID as string,
+});
 
-/**
- * LoginPage - Handles Cognito OAuth callback only
- *
- * This page is responsible for:
- * 1. Receiving the auth code from Cognito redirect
- * 2. Exchanging it for access/refresh tokens
- * 3. Storing tokens and redirecting to dashboard
- *
- * This is NOT a landing page - users should not visit this directly.
- * They arrive here only after authenticating with Cognito.
- */
 export default function LoginPage() {
   const { setToken } = useLoginContext();
   const navigate = useNavigate();
@@ -23,12 +19,23 @@ export default function LoginPage() {
     const urlParams = new URLSearchParams(window.location.search);
     const authCode = urlParams.get('code');
 
-    async function handleCognitoCallback() {
-      if (authCode) {
+    async function getToken() {
+      const localToken = localStorage.getItem('token');
+
+      if (localToken) {
+        try {
+          const token = JSON.parse(localToken);
+          await verifier.verify(token);
+          setToken(token);
+          navigate('/');
+        } catch (error) {
+          console.log('Error verifying token:', error);
+          localStorage.removeItem('token');
+        }
+      } else if (authCode) {
         try {
           const tokenResponse = await apiClient.getToken(authCode);
 
-          // Store both tokens in localStorage for persistence
           localStorage.setItem(
             'auth_tokens',
             JSON.stringify({
@@ -37,47 +44,35 @@ export default function LoginPage() {
             }),
           );
 
-          // Keep backward compatibility - store access token for existing code
-          sessionStorage.setItem(
+          localStorage.setItem(
             'token',
             JSON.stringify(tokenResponse.access_token),
           );
 
           setToken(tokenResponse.access_token);
-
-          // Redirect to dashboard after successful login
-          navigate('/');
+          window.location.href = '/';
         } catch (error) {
           console.error('Error fetching token:', error);
-          // Redirect to home page on error
-          navigate('/home');
         }
-      } else {
-        // No auth code - redirect to home page
-        navigate('/home');
       }
     }
-
-    handleCognitoCallback();
+    getToken();
   }, [navigate, setToken]);
 
   return (
-    <Box
-      sx={{
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: '#181818',
-      }}
+    <Stack
+      width="100vw"
+      height="100vh"
+      justifyContent="center"
+      alignItems="center"
     >
-      <CircularProgress size={60} sx={{ color: '#4a5fa8' }} />
-      <Typography variant="h6" sx={{ color: '#ffffff' }}>
-        Logging you in...
-      </Typography>
-    </Box>
+      <Button
+        variant="contained"
+        color="primary"
+        href="https://scaffolding.auth.us-east-2.amazoncognito.com/login?client_id=4c5b8m6tno9fvljmseqgmk82fv&response_type=code&scope=email+openid&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin"
+      >
+        Login
+      </Button>
+    </Stack>
   );
 }
diff --git a/apps/frontend/src/features/auth/components/ProtectedRoutes/index.tsx b/apps/frontend/src/features/auth/components/ProtectedRoutes/index.tsx
index 07e64b0d..9ab01015 100644
--- a/apps/frontend/src/features/auth/components/ProtectedRoutes/index.tsx
+++ b/apps/frontend/src/features/auth/components/ProtectedRoutes/index.tsx
@@ -5,7 +5,10 @@ import { Navigate, Outlet } from 'react-router-dom';
  * if the user is authenticated (i.e if an access token exists).
  * If the user is not authenticated, it redirects to the login page.
  */
-function ProtectedRoutes({ token }: { token: string }) {
+function ProtectedRoutes() {
+  const storedToken = localStorage.getItem('token');
+  const token = storedToken ? JSON.parse(storedToken) : '';
+
   return token ? <Outlet /> : <Navigate to="/login" />;
 }
 
diff --git a/apps/frontend/src/shared/pages/HomePage.tsx b/apps/frontend/src/shared/pages/HomePage.tsx
index 6eac0cfa..a680a9c5 100644
--- a/apps/frontend/src/shared/pages/HomePage.tsx
+++ b/apps/frontend/src/shared/pages/HomePage.tsx
@@ -1,29 +1,127 @@
-import { Box, Container, Stack } from '@mui/material';
-import { useAuth } from '@shared/hooks/useAuth';
-import {
-  Header,
-  WelcomeBanner,
-  RoleSelector,
-  DeadlineCountdown,
-} from '@features/homepage/components';
-
-/**
- * HomePage - Application landing page
- *
- * Clean, presentational component that composes smaller, reusable components.
- * Authentication logic is delegated to the useAuth hook.
- *
- * Responsibilities:
- * - Display welcome banner
- * - Show role selection options
- * - Display application deadline countdown
- * - Show login/logout based on authentication state
- */
+import React, { useState, useEffect } from 'react';
+import { Box, Button, Container, Stack, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { CognitoJwtVerifier } from 'aws-jwt-verify';
+import apiClient from '@api/apiClient';
+import useLoginContext from '@features/auth/components/LoginPage/useLoginContext';
+
+const verifier = CognitoJwtVerifier.create({
+  userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID as string,
+  tokenUse: 'access',
+  clientId: import.meta.env.VITE_COGNITO_CLIENT_ID as string,
+});
+
 const HomePage = () => {
-  const { isAuthenticated, signOut } = useAuth();
+  const navigate = useNavigate();
+  const { setToken, token } = useLoginContext();
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  // Hardcoded deadline: October 31, 2025
+  const deadline = new Date('2025-10-31T23:59:59').getTime();
+
+  // Authentication logic - handle auth code and token verification
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const authCode = urlParams.get('code');
+
+    async function handleAuth() {
+      const localToken = localStorage.getItem('token');
+
+      if (localToken) {
+        try {
+          const token = JSON.parse(localToken);
+          await verifier.verify(token);
+          setToken(token);
+          setIsAuthenticated(true);
+          // Don't navigate away - let them stay on the home page
+        } catch (error) {
+          console.log('Error verifying token:', error);
+          localStorage.removeItem('token');
+          setIsAuthenticated(false);
+        }
+      } else if (authCode) {
+        try {
+          const tokenResponse = await apiClient.getToken(authCode);
+
+          // Store both tokens in localStorage for persistence
+          localStorage.setItem(
+            'auth_tokens',
+            JSON.stringify({
+              accessToken: tokenResponse.access_token,
+              refreshToken: tokenResponse.refresh_token,
+            }),
+          );
+
+          // Keep backward compatibility - store access token for existing code
+          localStorage.setItem(
+            'token',
+            JSON.stringify(tokenResponse.access_token),
+          );
+          setToken(tokenResponse.access_token);
+          setIsAuthenticated(true);
+
+          // Redirect to dashboard after successful login from Cognito
+          navigate('/');
+        } catch (error) {
+          console.error('Error fetching token:', error);
+          setIsAuthenticated(false);
+        }
+      } else {
+        // No token and no auth code - user is not authenticated
+        setIsAuthenticated(false);
+      }
+    }
+    handleAuth();
+  }, [navigate, setToken]);
+
+  // Countdown timer logic
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = new Date().getTime();
+      const distance = deadline - now;
 
-  // Application deadline
-  const deadline = new Date('2025-10-31T23:59:59');
+      if (distance < 0) {
+        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        clearInterval(timer);
+      } else {
+        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        const hours = Math.floor(
+          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+        );
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        setTimeLeft({ days, hours, minutes, seconds });
+      }
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [deadline]);
+
+  const formatTime = (value: number) => String(value).padStart(2, '0');
+
+  const handleLearnMore = (role: string) => {
+    const urls: { [key: string]: string } = {
+      designer: 'https://www.c4cneu.com/apply/Product-Designer',
+      developer: 'https://www.c4cneu.com/apply/Software-Developer',
+      pm: 'https://www.c4cneu.com/apply/Product-Manager',
+    };
+    window.open(urls[role], '_blank');
+  };
+
+  const handleSignOut = () => {
+    // Clear all authentication data
+    localStorage.removeItem('token');
+    localStorage.removeItem('auth_tokens');
+    setToken('');
+    setIsAuthenticated(false);
+  };
 
   return (
     <Box
@@ -34,13 +132,285 @@ const HomePage = () => {
         flexDirection: 'column',
       }}
     >
-      <Header isAuthenticated={isAuthenticated} onSignOut={signOut} />
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '20px 40px',
+          borderBottom: '1px solid #2a2a2a',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <img
+            src="/c4clogo.png"
+            alt="C4C Logo"
+            style={{ height: '40px', width: 'auto' }}
+          />
+          <Typography variant="h5" sx={{ fontWeight: 500 }}>
+            2025 Application
+          </Typography>
+        </Box>
+        {isAuthenticated ? (
+          <Button
+            variant="contained"
+            onClick={handleSignOut}
+            sx={{
+              backgroundColor: '#6e6e6e !important',
+              color: '#ffffff !important',
+              fontSize: '16px',
+              fontWeight: 600,
+              padding: '10px 24px',
+              textTransform: 'none',
+              borderRadius: '6px',
+              '&:hover': {
+                backgroundColor: '#5a5a5a !important',
+              },
+            }}
+          >
+            Sign Out
+          </Button>
+        ) : (
+          <Button
+            variant="contained"
+            href="https://scaffolding.auth.us-east-2.amazoncognito.com/login?client_id=4c5b8m6tno9fvljmseqgmk82fv&response_type=code&scope=email+openid&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin"
+            sx={{
+              backgroundColor: '#4a5fa8 !important',
+              color: '#ffffff !important',
+              fontSize: '16px',
+              fontWeight: 600,
+              padding: '10px 24px',
+              textTransform: 'none',
+              borderRadius: '6px',
+              '&:hover': {
+                backgroundColor: '#3d4f8f !important',
+              },
+            }}
+          >
+            Login
+          </Button>
+        )}
+      </Box>
 
+      {/* Main Content */}
       <Container maxWidth="md" sx={{ flex: 1, py: 8 }}>
         <Stack spacing={4}>
-          <WelcomeBanner />
-          <RoleSelector />
-          <DeadlineCountdown deadline={deadline} />
+          {/* Welcome Banner */}
+          <Box
+            sx={{
+              backgroundColor: '#3a3a3a',
+              borderRadius: '8px',
+              padding: '48px 32px',
+              textAlign: 'center',
+            }}
+          >
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 600,
+                marginBottom: 2,
+                color: '#ffffff !important',
+              }}
+            >
+              Welcome to the C4C Application page!
+            </Typography>
+            <Typography
+              variant="h6"
+              sx={{ color: '#cccccc !important', fontWeight: 400 }}
+            >
+              Apply as a Developer, Designer, or Project Manager here.
+            </Typography>
+          </Box>
+
+          {/* Role Buttons */}
+          <Box
+            sx={{
+              backgroundColor: '#3a3a3a',
+              borderRadius: '8px',
+              padding: '32px',
+            }}
+          >
+            <Stack spacing={3}>
+              {/* Designer Row */}
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: '1.5fr 1fr',
+                  gap: 2,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  sx={{
+                    backgroundColor: '#4a5fa8 !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#3d4f8f !important',
+                    },
+                  }}
+                >
+                  Designer
+                </Button>
+                <Button
+                  variant="contained"
+                  onClick={() => handleLearnMore('designer')}
+                  sx={{
+                    backgroundColor: '#6e6e6e !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#5a5a5a !important',
+                    },
+                  }}
+                >
+                  Learn More →
+                </Button>
+              </Box>
+
+              {/* Software Developer Row */}
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: '1.5fr 1fr',
+                  gap: 2,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  sx={{
+                    backgroundColor: '#4a5fa8 !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#3d4f8f !important',
+                    },
+                  }}
+                >
+                  Software Developer
+                </Button>
+                <Button
+                  variant="contained"
+                  onClick={() => handleLearnMore('developer')}
+                  sx={{
+                    backgroundColor: '#6e6e6e !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#5a5a5a !important',
+                    },
+                  }}
+                >
+                  Learn More →
+                </Button>
+              </Box>
+
+              {/* Product Manager Row */}
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: '1.5fr 1fr',
+                  gap: 2,
+                }}
+              >
+                <Button
+                  variant="contained"
+                  sx={{
+                    backgroundColor: '#4a5fa8 !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#3d4f8f !important',
+                    },
+                  }}
+                >
+                  Product Manager
+                </Button>
+                <Button
+                  variant="contained"
+                  onClick={() => handleLearnMore('pm')}
+                  sx={{
+                    backgroundColor: '#6e6e6e !important',
+                    color: '#ffffff !important',
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    padding: '16px 32px',
+                    textTransform: 'none',
+                    borderRadius: '8px',
+                    '&:hover': {
+                      backgroundColor: '#5a5a5a !important',
+                    },
+                  }}
+                >
+                  Learn More →
+                </Button>
+              </Box>
+            </Stack>
+          </Box>
+
+          {/* Deadline Section */}
+          <Box
+            sx={{
+              backgroundColor: '#3a3a3a',
+              borderRadius: '8px',
+              padding: '40px 32px',
+              textAlign: 'center',
+            }}
+          >
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 600,
+                marginBottom: 3,
+                color: '#ffffff !important',
+              }}
+            >
+              Deadline: October 31, 2025
+            </Typography>
+
+            {/* Countdown Timer */}
+            <Box
+              sx={{
+                backgroundColor: '#7b4db8',
+                borderRadius: '8px',
+                padding: '32px',
+              }}
+            >
+              <Typography
+                variant="h4"
+                sx={{
+                  fontWeight: 700,
+                  color: '#ffffff !important',
+                  letterSpacing: '2px',
+                }}
+              >
+                {formatTime(timeLeft.days)} days, {formatTime(timeLeft.hours)}{' '}
+                hours, {formatTime(timeLeft.minutes)} minutes, and{' '}
+                {formatTime(timeLeft.seconds)} seconds left!
+              </Typography>
+            </Box>
+          </Box>
         </Stack>
       </Container>
     </Box>