diff --git a/frontend/src/BackstoryApp.css b/frontend/src/BackstoryApp.css
index 0142ca6..04d6700 100644
--- a/frontend/src/BackstoryApp.css
+++ b/frontend/src/BackstoryApp.css
@@ -205,7 +205,7 @@ button {
 }
 
 /* Reduce space between headings and content */
-* h1.MuiTypography-root,
+/* * h1.MuiTypography-root,
 * h2.MuiTypography-root,
 * h3.MuiTypography-root,
 * h4.MuiTypography-root,
@@ -214,7 +214,7 @@ button {
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   font-size: 1rem;
-}
+} */
 
 /* Reduce space in lists */
 * ul.MuiTypography-root,
diff --git a/frontend/src/components/JobMatchAnalysis.tsx b/frontend/src/components/JobMatchAnalysis.tsx
index 1ba25bf..30d016f 100644
--- a/frontend/src/components/JobMatchAnalysis.tsx
+++ b/frontend/src/components/JobMatchAnalysis.tsx
@@ -13,6 +13,7 @@ import {
   LinearProgress,
   useMediaQuery,
   Button,
+  Paper,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -53,6 +54,7 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
   const [analyzing, setAnalyzing] = useState<boolean>(false);
   const [matchStatus, setMatchStatus] = useState<string>('');
   const [_matchStatusType, setMatchStatusType] = useState<Types.ApiActivityType | null>(null);
+  const [percentage, setPercentage] = useState<number>(0);
 
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -239,10 +241,12 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
             return updated;
           });
         }
+        setPercentage(Math.round(((i + 1) / requirements.length) * 100));
       }
     };
 
     setAnalyzing(true);
+    setPercentage(0);
     const skills: SkillAssessment[] = [];
     fetchMatchData(skills).then(() => {
       setAnalyzing(false);
@@ -305,62 +309,95 @@ const JobMatchAnalysis: React.FC<JobAnalysisProps> = (props: JobAnalysisProps) =
             gap: 1,
           }}
         >
-          {overallScore !== 0 && (
-            <>
-              <Typography variant="h5" component="h2" sx={{ mr: 2 }}>
-                Overall Match:
-              </Typography>
-              <Box
-                sx={{
-                  position: 'relative',
-                  display: 'inline-flex',
-                  mr: 2,
-                }}
-              >
-                <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>
-              <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'
-                }
+                      ? '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}
                 sx={{
-                  bgcolor: getMatchColor(overallScore),
-                  color: 'white',
-                  fontWeight: 'bold',
+                  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>
+          </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
+              sx={{
+                position: 'relative',
+                display: 'inline-flex',
+              }}
+            >
+              <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>
+          </Paper>}
+
         </Box>
         <Button
           sx={{ marginLeft: 'auto' }}