diff --git a/apps/backend/scripts/seed.config.json b/apps/backend/scripts/seed.config.json
index 5c0c8672..452ee019 100644
--- a/apps/backend/scripts/seed.config.json
+++ b/apps/backend/scripts/seed.config.json
@@ -1,8 +1,8 @@
 {
   "personalUser": {
-    "firstName": "Ryaken",
-    "lastName": "Nakamoto",
-    "email": "nakamoto.r@husky.neu.edu",
+    "firstName": "Daniel",
+    "lastName": "Huang",
+    "email": "huang.danie@husky.neu.edu",
     "status": "Admin"
   }
 }
diff --git a/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationDetailsCard.tsx b/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationDetailsCard.tsx
new file mode 100644
index 00000000..d07ffcdb
--- /dev/null
+++ b/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationDetailsCard.tsx
@@ -0,0 +1,65 @@
+import { Box, Typography, Stack } from '@mui/material';
+import { Application } from '@sharedTypes/types/application.types';
+
+interface ApplicationDetailsCardProps {
+  application: Application;
+}
+
+export const ApplicationDetailsCard = ({
+  application,
+}: ApplicationDetailsCardProps) => {
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Application Details
+      </Typography>
+      <Box
+        sx={{
+          padding: 3,
+          backgroundColor: '#1e1e1e',
+          borderRadius: 2,
+          boxShadow: 2,
+        }}
+      >
+        <Stack spacing={1.5}>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Year
+            </Typography>
+            <Typography variant="body1">{application.year}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Semester
+            </Typography>
+            <Typography variant="body1">{application.semester}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Position
+            </Typography>
+            <Typography variant="body1">{application.position}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Stage
+            </Typography>
+            <Typography variant="body1">{application.stage}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Status
+            </Typography>
+            <Typography variant="body1">{application.stageProgress}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#999' }}>
+              Applications
+            </Typography>
+            <Typography variant="body1">{application.numApps}</Typography>
+          </Box>
+        </Stack>
+      </Box>
+    </Box>
+  );
+};
diff --git a/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationResponsesList.tsx b/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationResponsesList.tsx
new file mode 100644
index 00000000..aacd4b16
--- /dev/null
+++ b/apps/frontend/src/features/applicant/components/ApplicantView/ApplicationResponsesList.tsx
@@ -0,0 +1,61 @@
+import {
+  Typography,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Box,
+} from '@mui/material';
+import { DoneOutline } from '@mui/icons-material';
+import { Response } from '@sharedTypes/types/application.types';
+
+interface ApplicationResponsesListProps {
+  responses: Response[];
+}
+
+export const ApplicationResponsesList = ({
+  responses,
+}: ApplicationResponsesListProps) => {
+  if (!responses || responses.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Application Responses
+      </Typography>
+      <List disablePadding dense>
+        {responses.map((response, index) => (
+          <ListItem
+            key={index}
+            sx={{
+              alignItems: 'flex-start',
+              backgroundColor: '#1e1e1e',
+              borderRadius: 1,
+              mb: 1,
+              padding: 2,
+            }}
+          >
+            <ListItemIcon sx={{ minWidth: 'auto', mr: 2, mt: 0.5 }}>
+              <DoneOutline sx={{ color: '#4CAF50' }} />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <Typography variant="body2" sx={{ color: '#999', mb: 0.5 }}>
+                  {response.question}
+                </Typography>
+              }
+              secondary={
+                <Typography variant="body1" sx={{ color: 'white' }}>
+                  {response.answer}
+                </Typography>
+              }
+              sx={{ m: 0 }}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
diff --git a/apps/frontend/src/features/applicant/components/ApplicantView/RecruitmentStageCard.tsx b/apps/frontend/src/features/applicant/components/ApplicantView/RecruitmentStageCard.tsx
new file mode 100644
index 00000000..689cf18f
--- /dev/null
+++ b/apps/frontend/src/features/applicant/components/ApplicantView/RecruitmentStageCard.tsx
@@ -0,0 +1,27 @@
+import { Box, Typography } from '@mui/material';
+
+interface RecruitmentStageCardProps {
+  stage: string;
+}
+
+export const RecruitmentStageCard = ({ stage }: RecruitmentStageCardProps) => {
+  return (
+    <Box
+      sx={{
+        padding: 3,
+        backgroundColor: '#1e1e1e',
+        borderRadius: 2,
+        boxShadow: 2,
+        textAlign: 'center',
+        mb: 3,
+      }}
+    >
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Recruitment Stage
+      </Typography>
+      <Typography variant="body1" sx={{ color: '#90caf9' }}>
+        {stage}
+      </Typography>
+    </Box>
+  );
+};
diff --git a/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx b/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
index 6391d5cb..5a89e602 100644
--- a/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
+++ b/apps/frontend/src/features/applicant/components/ApplicantView/user.tsx
@@ -49,40 +49,40 @@ export const ApplicantView = ({ user }: ApplicantViewProps) => {
   return (
     <Box
       sx={{
-        width: '100vw',
         minHeight: '100vh',
-        height: '100vh',
-        backgroundColor: 'black',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-        paddingTop: 2,
-        paddingBottom: 4,
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        '::before, ::after': {
-          content: '""',
-          position: 'absolute',
-          width: '10%',
-          height: '80%',
-          background: 'linear-gradient(180deg, #8A2BE2, #FF00FF, #00FFFF)',
-          filter: 'blur(80px)',
+        backgroundColor: '#000',
+        position: 'relative',
+        py: 4,
+        overflow: 'hidden',
+        '&::before': {
+          content: '"{ }"',
+          position: 'fixed',
+          top: '15%',
+          left: '8%',
+          fontSize: '120px',
+          color: '#8A2BE2',
+          opacity: 0.3,
+          fontFamily: 'monospace',
+          fontWeight: 'bold',
+          pointerEvents: 'none',
           zIndex: 0,
-          opacity: 0.8,
         },
-        '::before': {
-          left: '5%',
-          top: '10%',
-        },
-        '::after': {
-          right: '5%',
-          top: '10%',
+        '&::after': {
+          content: '"< />"',
+          position: 'fixed',
+          bottom: '15%',
+          right: '8%',
+          fontSize: '120px',
+          color: '#00FFFF',
+          opacity: 0.3,
+          fontFamily: 'monospace',
+          fontWeight: 'bold',
+          pointerEvents: 'none',
+          zIndex: 0,
         },
       }}
     >
+      {/* Gradient Blur Effects */}
       <Box
         sx={{
           display: 'flex',
@@ -98,109 +98,171 @@ export const ApplicantView = ({ user }: ApplicantViewProps) => {
           maxWidth: 900,
           position: 'relative',
           zIndex: 1,
+          boxSizing: 'border-box',
+          mx: 'auto',
         }}
       >
-        <Typography variant="h4" sx={{ mb: 3, textAlign: 'center' }}>
-          Welcome back, {fullName || 'User'}!
-        </Typography>
+        <Box
+          sx={{
+            backgroundColor: '#121212',
+            color: 'white',
+            p: 4,
+            borderRadius: 2,
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
+            width: '100%',
+          }}
+        >
+          <Typography variant="h4" sx={{ mb: 4, textAlign: 'center' }}>
+            Welcome back, {fullName || 'User'}!
+          </Typography>
 
-        {isLoading ? (
-          <CircularProgress sx={{ color: 'white' }} />
-        ) : (
-          <div>
-            {selectedApplication && (
-              <>
-                <Box
-                  sx={{
-                    padding: 4,
-                    backgroundColor: '#1e1e1e',
-                    borderRadius: 2,
-                    boxShadow: 2,
-                    textAlign: 'center',
-                    width: '100%',
-                    mb: 3,
-                    alignSelf: 'center',
-                  }}
-                >
-                  <Typography variant="h6">Recruitment Stage</Typography>
-                  <Typography variant="body1">
-                    {selectedApplication.stage}
-                  </Typography>
-                </Box>
-                {!isLoading && selectedApplication && isPM &&
-                  String(selectedApplication.stage) ===
-                    ApplicationStage.PM_CHALLENGE && (
-                    <FileUploadBox
-                      accessToken={accessToken}
-                      applicationId={applicationId}
-                      filePurpose={FilePurpose.PM_CHALLENGE}
-                    />
-                  )}
+          {isLoading ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+              <CircularProgress sx={{ color: 'white' }} />
+            </Box>
+          ) : selectedApplication ? (
+            <Stack spacing={3} sx={{ width: '100%' }}>
+              <Box
+                sx={{
+                  padding: 4,
+                  backgroundColor: '#1e1e1e',
+                  borderRadius: 2,
+                  boxShadow: 2,
+                  textAlign: 'center',
+                  width: '100%',
+                  boxSizing: 'border-box',
+                }}
+              >
+                <Typography variant="h6">Recruitment Stage</Typography>
+                <Typography variant="body1">
+                  {selectedApplication.stage}
+                </Typography>
+              </Box>
+              {isPM &&
+                String(selectedApplication.stage) ===
+                  ApplicationStage.PM_CHALLENGE && (
+                  <FileUploadBox
+                    accessToken={accessToken}
+                    applicationId={applicationId}
+                    filePurpose={FilePurpose.PM_CHALLENGE}
+                  />
+                )}
+              <Box>
                 <Typography variant="h6" mt={2}>
                   Application Details
                 </Typography>
                 <Box
                   sx={{
-                    padding: 4.5,
+                    p: 3,
                     backgroundColor: '#1e1e1e',
                     borderRadius: 2,
                     boxShadow: 2,
                     width: '100%',
                     alignSelf: 'center',
                     mt: 1,
+                    boxSizing: 'border-box',
                   }}
                 >
-                  <Stack
-                    spacing={1}
-                    direction="column"
-                    sx={{ alignItems: 'center' }}
-                  >
-                    <Typography variant="body1">
-                      Year: {selectedApplication.year}
-                    </Typography>
-                    <Typography variant="body1">
-                      Semester: {selectedApplication.semester}
-                    </Typography>
-                    <Typography variant="body1">
-                      Position: {selectedApplication.position}
-                    </Typography>
-                    <Typography variant="body1">
-                      Stage: {selectedApplication.stage}
-                    </Typography>
-                    <Typography variant="body1">
-                      Status: {selectedApplication.stageProgress}
-                    </Typography>
-                    <Typography variant="body1">
-                      Applications: {selectedApplication.numApps}
-                    </Typography>
+                  <Stack spacing={1.5}>
+                    <Box>
+                      <Typography variant="caption" sx={{ color: '#999' }}>
+                        Year
+                      </Typography>
+                      <Typography variant="body1">
+                        {selectedApplication.year}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" sx={{ color: '#999' }}>
+                        Semester
+                      </Typography>
+                      <Typography variant="body1">
+                        {selectedApplication.semester}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" sx={{ color: '#999' }}>
+                        Position
+                      </Typography>
+                      <Typography variant="body1">
+                        {selectedApplication.position}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" sx={{ color: '#999' }}>
+                        Stage
+                      </Typography>
+                      <Typography variant="body1">
+                        {selectedApplication.stage}
+                      </Typography>
+                    </Box>
+                    <Box>
+                      <Typography variant="caption" sx={{ color: '#999' }}>
+                        Status
+                      </Typography>
+                      <Typography variant="body1">
+                        {selectedApplication.stageProgress}
+                      </Typography>
+                    </Box>
                   </Stack>
                 </Box>
-
-                <Typography variant="h6" mt={2}>
-                  Application Responses
-                </Typography>
-                <List disablePadding dense sx={{ width: '100%' }}>
-                  {selectedApplication.response.map((response, index) => (
-                    <ListItem key={index} sx={{ alignItems: 'flex-start' }}>
-                      <ListItemIcon sx={{ minWidth: 'auto', mr: 2 }}>
-                        <DoneOutline sx={{ color: '#4CAF50' }} />
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={`Q: ${response.question}`}
-                        secondary={
-                          <Typography sx={{ color: '#FF4081' }}>
-                            {`A: ${response.answer}`}
-                          </Typography>
-                        }
-                        sx={{ m: 0 }}
-                      />
-                    </ListItem>
-                  ))}
-                </List>
-              </>
-            )}
-          </div>
-        )}
+              </Box>
+              {selectedApplication.response &&
+                selectedApplication.response.length > 0 && (
+                  <Box>
+                    <Typography variant="h6" sx={{ mb: 2 }}>
+                      Application Responses
+                    </Typography>
+                    <List disablePadding dense>
+                      {selectedApplication.response.map((response, index) => (
+                        <ListItem
+                          key={index}
+                          sx={{
+                            alignItems: 'flex-start',
+                            backgroundColor: '#1e1e1e',
+                            borderRadius: 1,
+                            mb: 1,
+                            p: 2,
+                          }}
+                        >
+                          <ListItemIcon
+                            sx={{ minWidth: 'auto', mr: 2, mt: 0.5 }}
+                          >
+                            <DoneOutline sx={{ color: '#4CAF50' }} />
+                          </ListItemIcon>
+                          <ListItemText
+                            primary={
+                              <Typography
+                                variant="body2"
+                                sx={{ color: '#999', mb: 0.5 }}
+                              >
+                                {response.question}
+                              </Typography>
+                            }
+                            secondary={
+                              <Typography
+                                variant="body1"
+                                sx={{ color: 'white' }}
+                              >
+                                {response.answer}
+                              </Typography>
+                            }
+                            sx={{ m: 0 }}
+                          />
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Box>
+                )}
+            </Stack>
+          ) : (
+            <Box sx={{ textAlign: 'center', py: 4 }}>
+              <Typography variant="body1" sx={{ color: '#999' }}>
+                No application data available
+              </Typography>
+            </Box>
+          )}
+        </Box>
       </Box>
     </Box>
   );
diff --git a/apps/frontend/src/features/applicant/components/FileUploadBox.tsx b/apps/frontend/src/features/applicant/components/FileUploadBox.tsx
index 0ed54d72..f7701a13 100644
--- a/apps/frontend/src/features/applicant/components/FileUploadBox.tsx
+++ b/apps/frontend/src/features/applicant/components/FileUploadBox.tsx
@@ -89,10 +89,11 @@ const FileUploadBox: React.FC<FileUploadBoxProps> = ({
       sx={{
         backgroundColor: '#403f3f',
         borderRadius: 2,
-        p: 3,
-        mt: 4,
+        py: 1,
+        px: 1.5,
         textAlign: 'center',
         width: '100%',
+        boxSizing: 'border-box',
       }}
     >
       <Typography
@@ -108,7 +109,8 @@ const FileUploadBox: React.FC<FileUploadBoxProps> = ({
         sx={{
           border: '1px dashed #999',
           borderRadius: 1,
-          p: 3,
+          py: 1.5,
+          px: 1,
           cursor: 'pointer',
           '&:hover': { borderColor: '#d81b60' },
         }}