diff --git a/frontend/src/pages/JobAnalysisPage.tsx b/frontend/src/pages/JobAnalysisPage.tsx
index 1615b16..b5705e8 100644
--- a/frontend/src/pages/JobAnalysisPage.tsx
+++ b/frontend/src/pages/JobAnalysisPage.tsx
@@ -36,6 +36,7 @@ import { CandidateInfo } from 'components/CandidateInfo';
 import { ComingSoon } from 'components/ui/ComingSoon';
 import { JobManagement } from 'components/JobManagement';
 import { LoginRequired } from 'components/ui/LoginRequired';
+import { Scrollable } from 'components/Scrollable';
 
 // Main component
 const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps) => {
@@ -257,82 +258,78 @@ const JobAnalysisPage: React.FC<BackstoryPageProps> = (props: BackstoryPageProps
   }
 
   return (
-    <Container maxWidth="lg">
-      <Paper elevation={1} sx={{ p: 3, mt: 3, borderRadius: 2 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Candidate Analysis
-        </Typography>
-        {selectedCandidate && <CandidateInfo variant="small" candidate={selectedCandidate} />}
+    <Box sx={{ maxHeight: "100%", position: "relative", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+      <Paper elevation={4} sx={{ m: 0, borderRadius: 0, mb: 1, p: 0 }}>{selectedCandidate && <CandidateInfo variant="small" candidate={selectedCandidate} sx={{ width: "100%" }} />}</Paper>
+      <Scrollable sx={{ display: "flex", flexGrow: 1, maxHeight: "calc(100dvh - 234px)", position: "relative" }}>
+        <Box sx={{ display: "flex", justifyContent: "center" }}>
         <Typography variant="subtitle1" color="text.secondary" gutterBottom>
           Match candidates to job requirements with AI-powered analysis
         </Typography>
-      </Paper>
-      
-      <Box sx={{ mt: 4, mb: 4 }}>
-        <Stepper activeStep={activeStep} alternativeLabel>
-          {steps.map(step => (
-            <Step key={step.index}>
-              <StepLabel slots={{
-                stepIcon: () => (
-                <Avatar 
-                  sx={{ 
-                      bgcolor: activeStep >= step.index ? theme.palette.primary.main : theme.palette.grey[300],
-                    color: 'white'
-                  }}
+        </Box>
+        <Box sx={{ mt: 4, mb: 4 }}>
+          <Stepper activeStep={activeStep} alternativeLabel>
+            {steps.map(step => (
+              <Step key={step.index}>
+                <StepLabel slots={{
+                  stepIcon: () => (
+                    <Avatar
+                      sx={{
+                        bgcolor: activeStep >= step.index ? theme.palette.primary.main : theme.palette.grey[300],
+                        color: 'white'
+                      }}
+                    >
+                      {step.icon}
+                    </Avatar>
+                  )
+                }}
                 >
-                  {step.icon}
-                </Avatar>
-                )
-              }}
-              >
-                {step.label}
-              </StepLabel>
-            </Step>
-          ))}
-        </Stepper>
-      </Box>
-      
-      {activeStep === 0 && renderCandidateSelection()}
-      {activeStep === 1 && renderJobDescription()}
-      {activeStep === 2 && renderAnalysis()}
-      {activeStep === 3 && renderResume()}
-      
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-        <Button
-          color="inherit"
-          disabled={activeStep === steps[0].index}
-          onClick={handleBack}
-          sx={{ mr: 1 }}
-        >
-          Back
-        </Button>
-        <Box sx={{ flex: '1 1 auto' }} />
-        
-        {activeStep === steps[steps.length - 1].index ? (
-          <Button onClick={handleReset} variant="outlined">
-            Start New Analysis
-          </Button>
-        ) : (
-          <Button onClick={handleNext} variant="contained">
-              {activeStep === steps[steps.length - 1].index - 1 ? 'Start Analysis' : 'Next'}
-          </Button>
-        )}
-      </Box>
-      
-      {/* Error Snackbar */}
-      <Snackbar
-        open={!!error}
-        autoHideDuration={6000}
-        onClose={() => setError(null)}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      >
-        <Alert onClose={() => setError(null)} severity="error" sx={{ width: '100%' }}>
-          {error}
-        </Alert>
-      </Snackbar>
+                  {step.label}
+                </StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+        </Box>
 
-    </Container>
-  );
+        {activeStep === 0 && renderCandidateSelection()}
+        {activeStep === 1 && renderJobDescription()}
+        {activeStep === 2 && renderAnalysis()}
+        {activeStep === 3 && renderResume()}
+
+        <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+          <Button
+            color="inherit"
+            disabled={activeStep === steps[0].index}
+            onClick={handleBack}
+            sx={{ mr: 1 }}
+          >
+            Back
+          </Button>
+          <Box sx={{ flex: '1 1 auto' }} />
+
+          {activeStep === steps[steps.length - 1].index ? (
+            <Button onClick={handleReset} variant="outlined">
+              Start New Analysis
+            </Button>
+          ) : (
+            <Button onClick={handleNext} variant="contained">
+              {activeStep === steps[steps.length - 1].index - 1 ? 'Start Analysis' : 'Next'}
+            </Button>
+          )}
+        </Box>
+
+        {/* Error Snackbar */}
+        <Snackbar
+          open={!!error}
+          autoHideDuration={6000}
+          onClose={() => setError(null)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        >
+          <Alert onClose={() => setError(null)} severity="error" sx={{ width: '100%' }}>
+            {error}
+          </Alert>
+        </Snackbar>
+      </Scrollable>
+    </Box>);
 };
 
 export { JobAnalysisPage };
\ No newline at end of file