diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 0000000..59ea9c5
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,2 @@
+src/types/*
+
diff --git a/frontend/src/components/JobMatchAnalysis.tsx b/frontend/src/components/JobMatchAnalysis.tsx
index 30d016f..e6a145b 100644
--- a/frontend/src/components/JobMatchAnalysis.tsx
+++ b/frontend/src/components/JobMatchAnalysis.tsx
@@ -309,95 +309,119 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
             gap: 1,
           }}
         >
-          {overallScore !== 0 && <Paper sx={{ width: '10rem', ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
-            <Chip
-              label={
-                overallScore >= 80
-                  ? 'Excellent Match'
-                  : overallScore >= 60
+          {overallScore !== 0 && (
+            <Paper
+              sx={{
+                width: '10rem',
+                ml: 1,
+                p: 1,
+                gap: 1,
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexDirection: 'column',
+              }}
+            >
+              <Chip
+                label={
+                  overallScore >= 80
+                    ? 'Excellent Match'
+                    : overallScore >= 60
                     ? 'Good Match'
                     : overallScore >= 40
-                      ? 'Partial Match'
-                      : 'Low Match'
-              }
-              sx={{
-                bgcolor: getMatchColor(overallScore),
-                color: 'white',
-                fontWeight: 'bold',
-              }}
-            />
-            <Box
-              sx={{
-                position: 'relative',
-                display: 'inline-flex',
-              }}
-            >
-              <CircularProgress
-                variant="determinate"
-                value={overallScore}
-                size={60}
-                thickness={5}
+                    ? 'Partial Match'
+                    : 'Low Match'
+                }
                 sx={{
-                  color: getMatchColor(overallScore),
+                  bgcolor: getMatchColor(overallScore),
+                  color: 'white',
+                  fontWeight: 'bold',
                 }}
               />
               <Box
                 sx={{
-                  top: 0,
-                  left: 0,
-                  bottom: 0,
-                  right: 0,
-                  position: 'absolute',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  position: 'relative',
+                  display: 'inline-flex',
                 }}
               >
-                <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
-                  {`${Math.round(overallScore)}%`}
-                </Typography>
+                <CircularProgress
+                  variant="determinate"
+                  value={overallScore}
+                  size={60}
+                  thickness={5}
+                  sx={{
+                    color: getMatchColor(overallScore),
+                  }}
+                />
+                <Box
+                  sx={{
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: 'absolute',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
+                    {`${Math.round(overallScore)}%`}
+                  </Typography>
+                </Box>
               </Box>
-            </Box>
-          </Paper>
-          }
-          {analyzing && <Paper sx={{ width: "10rem", ml: 1, p: 1, gap: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexDirection: 'column' }}>
-            <Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
-              Analyzing
-            </Typography>
-            <Box
+            </Paper>
+          )}
+          {analyzing && (
+            <Paper
               sx={{
-                position: 'relative',
-                display: 'inline-flex',
+                width: '10rem',
+                ml: 1,
+                p: 1,
+                gap: 1,
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexDirection: 'column',
               }}
             >
-              <CircularProgress
-                variant="determinate"
-                value={percentage}
-                size={60}
-                thickness={5}
-                sx={{
-                  color: "orange",
-                }}
-              />
+              <Typography variant="h5" component="h2" sx={{ m: 0, fontSize: '1rem' }}>
+                Analyzing
+              </Typography>
               <Box
                 sx={{
-                  top: 0,
-                  left: 0,
-                  bottom: 0,
-                  right: 0,
-                  position: 'absolute',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  position: 'relative',
+                  display: 'inline-flex',
                 }}
               >
-                <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
-                  {`${Math.round(percentage)}%`}
-                </Typography>
+                <CircularProgress
+                  variant="determinate"
+                  value={percentage}
+                  size={60}
+                  thickness={5}
+                  sx={{
+                    color: 'orange',
+                  }}
+                />
+                <Box
+                  sx={{
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    position: 'absolute',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Typography variant="caption" component="div" sx={{ fontWeight: 'bold' }}>
+                    {`${Math.round(percentage)}%`}
+                  </Typography>
+                </Box>
               </Box>
-            </Box>
-          </Paper>}
-
+            </Paper>
+          )}
         </Box>
         <Button
           sx={{ marginLeft: 'auto' }}
diff --git a/frontend/src/components/layout/BackstoryLayout.tsx b/frontend/src/components/layout/BackstoryLayout.tsx
index bed6a01..2d17ccb 100644
--- a/frontend/src/components/layout/BackstoryLayout.tsx
+++ b/frontend/src/components/layout/BackstoryLayout.tsx
@@ -125,7 +125,7 @@ const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutP
         {
           path: route.path,
           exact: true,
-          caseSensitive: false
+          caseSensitive: false,
         },
         currentPath
       );
diff --git a/frontend/src/components/ui/JobsTable.tsx b/frontend/src/components/ui/JobsTable.tsx
index b4391a7..654d77b 100644
--- a/frontend/src/components/ui/JobsTable.tsx
+++ b/frontend/src/components/ui/JobsTable.tsx
@@ -58,35 +58,38 @@ const JobsTable: React.FC<JobsTableProps> = ({
   const [selectedJobs, setSelectedJobs] = React.useState<Set<string>>(new Set());
 
   // Fetch jobs from API
-  const fetchJobs = React.useCallback(async (pageNum: number = 0, searchTerm: string = '') => {
-    try {
-      setLoading(true);
-      setError(null);
-      const paginationRequest : Partial<Types.PaginatedRequest> = {
-        page: pageNum + 1,
-        limit: limit,
-        sortBy: 'createdAt',
-        sortOrder: 'desc',
-      };
+  const fetchJobs = React.useCallback(
+    async (pageNum: number = 0, searchTerm: string = '') => {
+      try {
+        setLoading(true);
+        setError(null);
+        const paginationRequest: Partial<Types.PaginatedRequest> = {
+          page: pageNum + 1,
+          limit: limit,
+          sortBy: 'createdAt',
+          sortOrder: 'desc',
+        };
 
-      let paginationResponse : Types.PaginatedResponse;
-      let url = `/api/1.0/jobs`;
-      if (searchTerm.trim()) {
-        paginationResponse = await apiClient.searchJobs(searchTerm);
-      } else {
-        paginationResponse = await apiClient.getJobs(paginationRequest);
+        let paginationResponse: Types.PaginatedResponse;
+        let url = `/api/1.0/jobs`;
+        if (searchTerm.trim()) {
+          paginationResponse = await apiClient.searchJobs(searchTerm);
+        } else {
+          paginationResponse = await apiClient.getJobs(paginationRequest);
+        }
+
+        setJobs(paginationResponse.data);
+        setTotal(paginationResponse.totalPages);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
+        setJobs([]);
+        setTotal(0);
+      } finally {
+        setLoading(false);
       }
-
-      setJobs(paginationResponse.data);
-      setTotal(paginationResponse.totalPages);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred while fetching jobs');
-      setJobs([]);
-      setTotal(0);
-    } finally {
-      setLoading(false);
-    }
-  }, [limit]);
+    },
+    [limit]
+  );
 
   // Initial load
   React.useEffect(() => {
@@ -97,16 +100,16 @@ const JobsTable: React.FC<JobsTableProps> = ({
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchQuery(value);
-    
+
     if (searchTimeout) {
       clearTimeout(searchTimeout);
     }
-    
+
     const timeout = setTimeout(() => {
       setPage(0);
       fetchJobs(0, value);
     }, 500);
-    
+
     setSearchTimeout(timeout);
   };
 
@@ -144,7 +147,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
       newSelected.add(jobId);
     }
     setSelectedJobs(newSelected);
-    
+
     const selectedJobsList = jobs.filter(job => newSelected.has(job.id || ''));
     onJobSelect?.(selectedJobsList);
   };
@@ -182,7 +185,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
         <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
           Jobs ({total})
         </Typography>
-        
+
         <TextField
           fullWidth
           size="small"
@@ -202,7 +205,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
 
       <TableContainer>
         <Table size="small" aria-label="jobs table">
-          <TableHead sx={{"& th": { whiteSpace: "nowrap" }}}>
+          <TableHead sx={{ '& th': { whiteSpace: 'nowrap' } }}>
             <TableRow>
               {selectable && (
                 <TableCell padding="checkbox">
@@ -227,23 +230,29 @@ const JobsTable: React.FC<JobsTableProps> = ({
               {showActions && <TableCell align="center">Actions</TableCell>}
             </TableRow>
           </TableHead>
-          <TableBody sx={{  "& p, & td" : { m: 0, p: 0.5, fontSize: '0.75rem !important'}}}>
+          <TableBody sx={{ '& p, & td': { m: 0, p: 0.5, fontSize: '0.75rem !important' } }}>
             {loading ? (
               <TableRow>
-                <TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center">
+                <TableCell
+                  colSpan={selectable ? (showActions ? 9 : 8) : showActions ? 8 : 7}
+                  align="center"
+                >
                   <CircularProgress size={24} />
                 </TableCell>
               </TableRow>
             ) : jobs.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={selectable ? (showActions ? 9 : 8) : (showActions ? 8 : 7)} align="center">
+                <TableCell
+                  colSpan={selectable ? (showActions ? 9 : 8) : showActions ? 8 : 7}
+                  align="center"
+                >
                   <Typography variant="body2" color="textSecondary">
                     No jobs found
                   </Typography>
                 </TableCell>
               </TableRow>
             ) : (
-              jobs.map((job) => {
+              jobs.map(job => {
                 const isItemSelected = isSelected(job.id || '');
                 return (
                   <TableRow
@@ -287,9 +296,7 @@ const JobsTable: React.FC<JobsTableProps> = ({
                       </Box>
                     </TableCell> */}
                     <TableCell>
-                      <Typography variant="body2">
-                        {getOwnerName(job.owner)}
-                      </Typography>
+                      <Typography variant="body2">{getOwnerName(job.owner)}</Typography>
                     </TableCell>
                     {/* <TableCell align="right">
                       <Typography variant="body2">
@@ -303,10 +310,8 @@ const JobsTable: React.FC<JobsTableProps> = ({
                         size="small"
                       />
                     </TableCell>
-                    <TableCell sx={{whiteSpace: "nowrap" }}>
-                      <Typography variant="body2">
-                        {job.createdAt?.toLocaleDateString()}
-                      </Typography>
+                    <TableCell sx={{ whiteSpace: 'nowrap' }}>
+                      <Typography variant="body2">{job.createdAt?.toLocaleDateString()}</Typography>
                     </TableCell>
                     {showActions && (
                       <TableCell align="center">
@@ -356,4 +361,4 @@ const JobsTable: React.FC<JobsTableProps> = ({
   );
 };
 
-export { JobsTable };
\ No newline at end of file
+export { JobsTable };
diff --git a/frontend/src/components/ui/ResumeInfo.tsx b/frontend/src/components/ui/ResumeInfo.tsx
index 6b7b071..49e8a20 100644
--- a/frontend/src/components/ui/ResumeInfo.tsx
+++ b/frontend/src/components/ui/ResumeInfo.tsx
@@ -132,7 +132,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
       console.log('Resume updated:', result);
       const updatedResume = {
         ...activeResume,
-        ...result
+        ...result,
       };
       setActiveResume(updatedResume);
       setSnack('Resume updated successfully.');
@@ -491,12 +491,38 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
             height: '100%',
           }}
         >
-          <Box sx={{ display: 'flex', flexDirection: 'row', height: '100%', gap: 1, pt: 1, width: '100%', position: 'relative', overflow: 'hidden' }}>
-            <Paper sx={{ p: 1, flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', maxWidth: "100%", height: '100%', overflow: 'hidden' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              height: '100%',
+              gap: 1,
+              pt: 1,
+              width: '100%',
+              position: 'relative',
+              overflow: 'hidden',
+            }}
+          >
+            <Paper
+              sx={{
+                p: 1,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                maxWidth: '100%',
+                height: '100%',
+                overflow: 'hidden',
+              }}
+            >
               <Tabs value={tabValue} onChange={handleTabChange} centered>
                 <Tab value="markdown" icon={<EditDocumentIcon />} label="Markdown" />
-                {activeResume.systemPrompt && <Tab value="systemPrompt" icon={<TuneIcon />} label="System Prompt" />}
-                {activeResume.systemPrompt && <Tab value="prompt" icon={<InputIcon />} label="Prompt" />}
+                {activeResume.systemPrompt && (
+                  <Tab value="systemPrompt" icon={<TuneIcon />} label="System Prompt" />
+                )}
+                {activeResume.systemPrompt && (
+                  <Tab value="prompt" icon={<InputIcon />} label="Prompt" />
+                )}
                 <Tab value="preview" icon={<PreviewIcon />} label="Preview" />
                 <Tab value="print" icon={<PrintIcon />} label="Print" />
                 <Tab value="regenerate" icon={<ModelTraining />} label="Regenerate" />
@@ -532,7 +558,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                     onChange={value => setEditContent(value)}
                     style={{
                       position: 'relative',
-                      maxHeight: "100%",
+                      maxHeight: '100%',
                       height: '100%',
                       width: '100%',
                       display: 'flex',
@@ -551,7 +577,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                     onChange={value => setEditSystemPrompt(value)}
                     style={{
                       position: 'relative',
-                      maxHeight: "100%",
+                      maxHeight: '100%',
                       // height: '100%',
                       width: '100%',
                       display: 'flex',
@@ -569,7 +595,7 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                     onChange={value => setEditPrompt(value)}
                     style={{
                       position: 'relative',
-                      maxHeight: "100%",
+                      maxHeight: '100%',
                       height: '100%',
                       width: '100%',
                       display: 'flex',
@@ -602,11 +628,35 @@ const ResumeInfo: React.FC<ResumeInfoProps> = (props: ResumeInfoProps) => {
                 )}
               </Scrollable>
             </Paper>
-            <Scrollable sx={{ flex: 1, display: 'flex', height: '100%', overflowY: 'auto', position: 'relative' }}>
-              <Paper sx={{ p: 1, flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', backgroundColor: "#f8f0e0" }}>
-                {activeResume.job !== undefined && <JobInfo variant={"all"} job={activeResume.job} sx={{
-                  mt: 2, backgroundColor: "#f8f0e0", //theme.palette.background.paper,
-                }} />}
+            <Scrollable
+              sx={{
+                flex: 1,
+                display: 'flex',
+                height: '100%',
+                overflowY: 'auto',
+                position: 'relative',
+              }}
+            >
+              <Paper
+                sx={{
+                  p: 1,
+                  flex: 1,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  position: 'relative',
+                  backgroundColor: '#f8f0e0',
+                }}
+              >
+                {activeResume.job !== undefined && (
+                  <JobInfo
+                    variant={'all'}
+                    job={activeResume.job}
+                    sx={{
+                      mt: 2,
+                      backgroundColor: '#f8f0e0', //theme.palette.background.paper,
+                    }}
+                  />
+                )}
               </Paper>
             </Scrollable>
           </Box>
diff --git a/frontend/src/config/navigationConfig.tsx b/frontend/src/config/navigationConfig.tsx
index 0e07578..7325561 100644
--- a/frontend/src/config/navigationConfig.tsx
+++ b/frontend/src/config/navigationConfig.tsx
@@ -203,14 +203,16 @@ export const navigationConfig: NavigationConfig = {
       label: 'Jobs Table',
       path: '/candidate/jobs-table/:jobId?',
       icon: <WorkIcon />,
-      component: <JobsTable
-        onJobSelect={(selectedJobs: Types.Job[]) => console.log('Selected:', selectedJobs)}
-        onJobView={(job: Types.Job) => console.log('View job:', job)}
-        onJobEdit={(job: Types.Job) => console.log('Edit job:', job)}
-        onJobDelete={(job: Types.Job) => console.log('Delete job:', job)}
-        selectable={true}
-        showActions={true}
-      />,
+      component: (
+        <JobsTable
+          onJobSelect={(selectedJobs: Types.Job[]) => console.log('Selected:', selectedJobs)}
+          onJobView={(job: Types.Job) => console.log('View job:', job)}
+          onJobEdit={(job: Types.Job) => console.log('Edit job:', job)}
+          onJobDelete={(job: Types.Job) => console.log('Delete job:', job)}
+          selectable={true}
+          showActions={true}
+        />
+      ),
       userTypes: ['candidate', 'guest', 'employer'],
       showInNavigation: false,
       showInUserMenu: true,