diff --git a/frontend/src/pages/HowItWorks.tsx b/frontend/src/pages/HowItWorks.tsx
index b28db17..e09a71f 100644
--- a/frontend/src/pages/HowItWorks.tsx
+++ b/frontend/src/pages/HowItWorks.tsx
@@ -15,6 +15,8 @@ import {
     Stepper,
     Stack,
     ButtonProps,
+    useMediaQuery,
+    useTheme,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
@@ -215,6 +217,8 @@ const HeroButton = (props: HeroButtonProps) => {
 
 const HowItWorks: React.FC = () => {
     const navigate = useNavigate();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
     const handleGetStarted = () => {
         navigate('/job-analysis');
@@ -289,7 +293,7 @@ const HowItWorks: React.FC = () => {
                 </Container>
             </HeroSection>
             <HeroSection sx={{ display: "flex", position: "relative", overflow: "hidden", border: "2px solid orange" }}>
-                <Beta sx={{ left: "-90px" }} />
+                <Beta adaptive={false} sx={{ left: "-90px" }} />
                 <Container sx={{ display: "flex", position: "relative" }}>
                     <Box sx={{ display: "flex", flexDirection: "column", textAlign: 'center', maxWidth: 800, mx: 'auto', position: "relative" }}>
                         <Typography