From 5b33d7fa5f3e3175a4c0478f36dee0d01d6fc773 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Thu, 12 Jun 2025 16:35:20 -0700
Subject: [PATCH] Beta on How It Works positioning

---
 frontend/src/pages/HowItWorks.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

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