diff --git a/public/locales/en.json b/public/locales/en.json
index c9f218d8..da0ebcc7 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -580,7 +580,7 @@
       "buttons": {
         "stop": "Stop"
       },
-      "loading": "Loading data...",
+      "loading": "Extracting data...",
       "empty_output": "No output data available",
       "captured_data": {
         "title": "Captured Data",
diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 9feb9551..27897169 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -26,7 +26,8 @@ const Container = styled(Box)`
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
-  margin-left: 50px;
+  margin-left: 70px;
+  margin-right: 70px;
 `;
 
 const ApiKeyManager = () => {
@@ -108,7 +109,7 @@ const ApiKeyManager = () => {
 
   return (
     <Container sx={{ alignSelf: 'flex-start' }}>
-      <Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
+      <Typography variant="body1" sx={{ marginBottom: '40px' }}>
         Start by creating an API key below. Then,
         <a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
           test your API
@@ -139,7 +140,7 @@ const ApiKeyManager = () => {
               <TableRow>
                 <TableCell>{apiKeyName}</TableCell>
                 <TableCell>
-                  <Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
+                  <Box sx={{ fontFamily: 'monospace', width: '20ch' }}>
                     {showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
                   </Box>
                 </TableCell>
@@ -174,6 +175,5 @@ const ApiKeyManager = () => {
       )}
     </Container>
   );
-};
-
+}
 export default ApiKeyManager;
\ No newline at end of file
diff --git a/src/components/dashboard/MainMenu.tsx b/src/components/dashboard/MainMenu.tsx
index 8b500d62..cd98ef21 100644
--- a/src/components/dashboard/MainMenu.tsx
+++ b/src/components/dashboard/MainMenu.tsx
@@ -72,7 +72,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
       <Paper
         sx={{
           height: '100%',
-          width: '250px',
+          width: '230px',
           backgroundColor: theme.palette.background.paper,
           paddingTop: '0.5rem',
           color: defaultcolor,
diff --git a/src/components/proxy/ProxyForm.tsx b/src/components/proxy/ProxyForm.tsx
index 9b1e8ba5..b9e60b86 100644
--- a/src/components/proxy/ProxyForm.tsx
+++ b/src/components/proxy/ProxyForm.tsx
@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
     }, []);
 
     return (
-        <>
-            <FormContainer>
-                <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
+        <Box sx={{
+            display: 'flex',
+            gap: 4,
+            p: 5,
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box'
+        }}>
+            <Box sx={{
+                flex: 1,
+                minWidth: 0,
+                maxWidth: 600
+            }}>
+                <Typography variant="h6" gutterBottom component="div">
                     {t('proxy.title')}
                 </Typography>
-                <Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
+                <Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
                     <Tab label={t('proxy.tab_standard')} />
                 </Tabs>
 
                 {tabIndex === 0 && (
                     isProxyConfigured ? (
-                        <Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
-                            <TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
+                        <Box sx={{ width: '100%', mt: 1 }}>
+                            <TableContainer component={Paper} sx={{ mb: 2 }}>
                                 <Table>
                                     <TableHead>
                                         <TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
                             <Button variant="outlined" color="primary" onClick={testProxy}>
                                 {t('proxy.test_proxy')}
                             </Button>
-                            <Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
+                            <Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
                                 {t('proxy.remove_proxy')}
                             </Button>
                         </Box>
                     ) : (
-                        <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
-                            <FormControl>
+                        <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
+                            <Box sx={{ mb: 2 }}>
                                 <TextField
                                     label={t('proxy.server_url')}
                                     name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
                                         </span>
                                     }
                                 />
-                            </FormControl>
-                            <FormControl>
+                            </Box>
+                            <Box sx={{ mb: 2 }}>
                                 <FormControlLabel
                                     control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
                                     label={t('proxy.requires_auth')}
                                 />
-                            </FormControl>
+                            </Box>
                             {requiresAuth && (
                                 <>
-                                    <FormControl>
+                                    <Box sx={{ mb: 2 }}>
                                         <TextField
                                             label={t('proxy.username')}
                                             name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
                                             error={!!errors.username}
                                             helperText={errors.username || ''}
                                         />
-                                    </FormControl>
-                                    <FormControl>
+                                    </Box>
+                                    <Box sx={{ mb: 2 }}>
                                         <TextField
                                             label={t('proxy.password')}
                                             name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
                                             error={!!errors.password}
                                             helperText={errors.password || ''}
                                         />
-                                    </FormControl>
+                                    </Box>
                                 </>
                             )}
                             <Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
                             </Button>
                         </Box>
                     ))}
-            </FormContainer>
+            </Box>
 
-            <Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
-                <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
-                <br />
-                <b>{t('proxy.alert.right_way')}</b>
-                <br />
-                {t('proxy.alert.proxy_url')} http://proxy.com:1337
-                <br />
-                {t('proxy.alert.username')} myusername
-                <br />
-                {t('proxy.alert.password')} mypassword
-                <br />
-                <br />
-                <b>{t('proxy.alert.wrong_way')}</b>
-                <br />
-
-                {t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
-            </Alert>
-        </>
+            {/* Instructions Section */}
+            <Box sx={{
+                flex: 1,
+                minWidth: 0,
+                maxWidth: 600
+            }}>
+                <Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
+                    <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
+                    <br />
+                    <b>{t('proxy.alert.right_way')}</b>
+                    <br />
+                    {t('proxy.alert.proxy_url')} http://proxy.com:1337
+                    <br />
+                    {t('proxy.alert.username')} myusername
+                    <br />
+                    {t('proxy.alert.password')} mypassword
+                    <br />
+                    <br />
+                    <b>{t('proxy.alert.wrong_way')}</b>
+                    <br />
+                    {t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
+                </Alert>
+            </Box>
+        </Box>
     );
 };
 
+
 export default ProxyForm;
\ No newline at end of file
diff --git a/src/components/robot/pages/RobotConfigPage.tsx b/src/components/robot/pages/RobotConfigPage.tsx
index d52b985e..6675aa3d 100644
--- a/src/components/robot/pages/RobotConfigPage.tsx
+++ b/src/components/robot/pages/RobotConfigPage.tsx
@@ -64,11 +64,10 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       margin: '50px auto',
       display: 'flex',
       flexDirection: 'column',
-      width: '1000px',
-      height: '100%',
-      overflowY: 'auto', // Allow scrolling if content exceeds height
+      width: '100%',
+      height: 'auto',
+      boxSizing: 'border-box'
     }}>
-      {/* Header Section - Fixed Position */}
       <Box sx={{
         display: 'flex',
         alignItems: 'center',
@@ -117,32 +116,29 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       </Box>
       <Divider sx={{ mb: 4, flexShrink: 0 }} />
 
-      {/* Content Section */}
       <Box sx={{
         flex: 1,
         display: 'flex',
         flexDirection: 'column',
         minHeight: 0,
-        mt: 2,
-        mb: 3,
+        mt: 1.8,
+        mb: 5,
       }}>
         {children}
       </Box>
 
-      {/* Action Buttons */}
       {(showSaveButton || showCancelButton || onBackToSelection) && (
         <Box
           sx={{
             display: 'flex',
             justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
             gap: 2,
-            pt: 3, // Reduce padding top to minimize space above
+            pt: 3,
             borderTop: `1px solid ${theme.palette.divider}`,
             flexShrink: 0,
             width: '100%',
           }}
         >
-          {/* Left side - Back to Selection button */}
           {onBackToSelection && (
             <Button
               variant="outlined"
@@ -157,7 +153,6 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
             </Button>
           )}
 
-          {/* Right side - Save/Cancel buttons */}
           <Box sx={{ display: 'flex', gap: 2 }}>
             {showCancelButton && (
               <Button
@@ -165,9 +160,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                 onClick={handleBack}
                 disabled={isLoading}
                 sx={{
-                  color: '#ff00c3 !important',
-                  borderColor: '#ff00c3 !important',
-                  backgroundColor: 'white !important',
+                  backgroundColor: 'inherit !important',
                 }} >
                 {cancelButtonText || t("buttons.cancel")}
               </Button>
@@ -197,4 +190,4 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       )}
     </Box>
   );
-};
+}
diff --git a/src/components/robot/pages/ScheduleSettingsPage.tsx b/src/components/robot/pages/ScheduleSettingsPage.tsx
index e386cfec..8933044b 100644
--- a/src/components/robot/pages/ScheduleSettingsPage.tsx
+++ b/src/components/robot/pages/ScheduleSettingsPage.tsx
@@ -7,7 +7,6 @@ import {
   Box,
   Button,
 } from "@mui/material";
-import { Schedule } from "@mui/icons-material";
 import { Dropdown } from "../../ui/DropdownMui";
 import { validMomentTimezones } from "../../../constants/const";
 import { useGlobalInfoStore } from "../../../context/globalInfo";
@@ -188,8 +187,8 @@ export const ScheduleSettingsPage = ({
           display: "flex",
           flexDirection: "column",
           alignItems: "flex-start",
-          "& > *": { marginBottom: "20px" },
-          marginTop: "-20px",
+          gap: 3,
+          width: "100%",
         }}
       >
         <>
@@ -215,7 +214,7 @@ export const ScheduleSettingsPage = ({
                 {t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
                 {schedule.timezone} {t("schedule_settings.timezone")}
               </Typography>
-              <Box mt={2} display="flex" justifyContent="space-between">
+              <Box sx={{ mt: 2, width: "100%" }}>
                 <Button
                   onClick={deleteRobotSchedule}
                   variant="outlined"
@@ -231,7 +230,7 @@ export const ScheduleSettingsPage = ({
           ) : (
             <>
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginRight: "10px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {t("schedule_settings.labels.run_once_every")}
                 </Typography>
                 <TextField
@@ -263,7 +262,7 @@ export const ScheduleSettingsPage = ({
               </Box>
 
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
                     ? t("schedule_settings.labels.start_from_label")
                     : t("schedule_settings.labels.start_from_label")}
@@ -288,7 +287,7 @@ export const ScheduleSettingsPage = ({
 
               {settings.runEveryUnit === "MONTHS" && (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
                     {t("schedule_settings.labels.on_day_of_month")}
                   </Typography>
                   <TextField
@@ -305,10 +304,10 @@ export const ScheduleSettingsPage = ({
 
               {["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Box sx={{ marginRight: "20px" }}>
-                    <Typography sx={{ marginBottom: "5px" }}>
-                      {t("schedule_settings.labels.in_between")}
-                    </Typography>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
+                    {t("schedule_settings.labels.in_between")}
+                  </Typography>
+                  <Box sx={{ display: "flex", gap: 1 }}>
                     <TextField
                       type="time"
                       value={settings.atTimeStart}
@@ -329,7 +328,7 @@ export const ScheduleSettingsPage = ({
                 </Box>
               ) : (
                 <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                  <Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
+                  <Typography sx={{ width: "200px", flexShrink: 0 }}>
                     {t("schedule_settings.at_around")}
                   </Typography>
                   <TextField
@@ -344,7 +343,7 @@ export const ScheduleSettingsPage = ({
               )}
 
               <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
-                <Typography sx={{ marginRight: "10px" }}>
+                <Typography sx={{ width: "200px", flexShrink: 0 }}>
                   {t("schedule_settings.timezone")}
                 </Typography>
                 <Dropdown
@@ -370,4 +369,4 @@ export const ScheduleSettingsPage = ({
       </Box>
     </RobotConfigPage>
   );
-};
+}
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index bf628fa6..4f302135 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MainMenu } from "../components/dashboard/MainMenu";
-import { Stack } from "@mui/material";
+import { Stack, Box } from "@mui/material";
 import { Recordings } from "../components/robot/Recordings";
 import { Runs } from "../components/run/Runs";
 import ProxyForm from '../components/proxy/ProxyForm';
@@ -318,12 +318,29 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
     }
   }
 
-  return (
-    <Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
-      <Stack sx={{ width: 250, flexShrink: 0 }}>
+return (
+  <Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
+    <Box sx={{ 
+      width: 230,
+      flexShrink: 0,
+      position: 'sticky',
+      top: 64,
+      height: 'calc(100vh - 64px)', 
+      overflowY: 'auto',
+      zIndex: 1000 
+    }}>
       <MainMenu value={content} handleChangeContent={setContent} />
-      </Stack>
+    </Box>
+    
+    <Box sx={{ 
+      flex: 1,
+      minWidth: 0, 
+      overflow: 'auto',
+      minHeight: 'calc(100vh - 64px)',
+      width: 'calc(100% - 250px)' 
+    }}>
       {DisplayContent()}
-    </Stack>
-  );
-};
+    </Box>
+  </Box>
+)
+}
diff --git a/src/pages/PageWrapper.tsx b/src/pages/PageWrapper.tsx
index e257367b..1af53681 100644
--- a/src/pages/PageWrapper.tsx
+++ b/src/pages/PageWrapper.tsx
@@ -13,6 +13,7 @@ import UserRoute from '../routes/userRoute';
 import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
 import { NotFoundPage } from '../components/dashboard/NotFound';
 import RobotCreate from '../components/robot/pages/RobotCreate';
+import { Box } from '@mui/material';
 
 export const PageWrapper = () => {
   const [open, setOpen] = useState(false);
@@ -84,40 +85,57 @@ export const PageWrapper = () => {
       }
     }
   }, [location.pathname, navigate, setBrowserId, setRecordingId, setRecordingName, setRecordingUrl]);
+
+  const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
+  const isRecordingPage = location.pathname === '/recording';
   
   return (
     <div>
       <AuthProvider>
         <SocketProvider>
           <React.Fragment>
-            {/* {!browserId && location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={!!browserId} />} */}
-            {location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={false} />}
-            <Routes>
-              <Route element={<UserRoute />}>
-                <Route path="/" element={<Navigate to="/robots" replace />} />
-                <Route path="/robots/create" element={<RobotCreate />} />
-                <Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
-                <Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
-                <Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
-                <Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
-              </Route>
-              <Route element={<UserRoute />}>
-                <Route path="/recording" element={
-                  <BrowserDimensionsProvider>
-                    <RecordingPage recordingName={recordingName} />
-                  </BrowserDimensionsProvider>
-                } />
-              </Route>
-              <Route
-                path="/login"
-                element={<Login />}
-              />
-              <Route
-                path="/register"
-                element={<Register />}
-              />
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
+            {/* Show NavBar only for main app pages, not for recording pages */}
+            {!isRecordingPage && (
+              <Box sx={{ 
+                position: 'sticky', 
+                top: 0, 
+                zIndex: 1100,
+                backgroundColor: 'background.paper'
+              }}>
+                <NavBar recordingName={recordingName} isRecording={false} />
+              </Box>
+            )}
+            <Box sx={{ 
+              display: isAuthPage || isRecordingPage ? 'block' : 'flex', 
+              minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
+            }}>
+              <Routes>
+                <Route element={<UserRoute />}>
+                  <Route path="/" element={<Navigate to="/robots" replace />} />
+                  <Route path="/robots/create" element={<RobotCreate />} />
+                  <Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
+                  <Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
+                  <Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
+                  <Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
+                </Route>
+                <Route element={<UserRoute />}>
+                  <Route path="/recording" element={
+                    <BrowserDimensionsProvider>
+                      <RecordingPage recordingName={recordingName} />
+                    </BrowserDimensionsProvider>
+                  } />
+                </Route>
+                <Route
+                  path="/login"
+                  element={<Login />}
+                />
+                <Route
+                  path="/register"
+                  element={<Register />}
+                />
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </Box>
           </React.Fragment>
         </SocketProvider>
       </AuthProvider>