diff --git a/src/components/atoms/AlertSnackbar.tsx b/src/components/atoms/AlertSnackbar.tsx
index 3cf5c554..a2803392 100644
--- a/src/components/atoms/AlertSnackbar.tsx
+++ b/src/components/atoms/AlertSnackbar.tsx
@@ -31,7 +31,7 @@ export const AlertSnackbar = ({ severity, message, isOpen }: AlertSnackbarProps)
   };
 
   return (
-    <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={5000} onClose={handleClose}>
+    <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={3000} onClose={handleClose}>
       <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
         {message}
       </Alert>
diff --git a/src/components/atoms/GenericModal.tsx b/src/components/atoms/GenericModal.tsx
index 56b3df43..bca0f51a 100644
--- a/src/components/atoms/GenericModal.tsx
+++ b/src/components/atoms/GenericModal.tsx
@@ -33,7 +33,7 @@ const defaultModalStyle = {
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
-  width: 500,
+  width: 300,
   bgcolor: 'background.paper',
   boxShadow: 24,
   p: 4,
diff --git a/src/components/atoms/PairDisplayDiv.tsx b/src/components/atoms/PairDisplayDiv.tsx
index c7c4447c..38e3147c 100644
--- a/src/components/atoms/PairDisplayDiv.tsx
+++ b/src/components/atoms/PairDisplayDiv.tsx
@@ -35,7 +35,7 @@ export const PairDisplayDiv: FC<PairDisplayDivProps> = ({ index, pair }) => {
 const DescriptionWrapper = styled.div`
   margin: 0;
   font-family: "Roboto","Helvetica","Arial",sans-serif;
-  font-weight: 400;
+  font-weight: 300;
   font-size: 1rem;
   line-height: 1.5;
   letter-spacing: 0.00938em;
diff --git a/src/components/atoms/RecorderIcon.tsx b/src/components/atoms/RecorderIcon.tsx
index afed1756..c604c150 100644
--- a/src/components/atoms/RecorderIcon.tsx
+++ b/src/components/atoms/RecorderIcon.tsx
@@ -15,7 +15,7 @@ export const RecordingIcon = () => {
               textTransform: 'none',
             }}
             fill="white"
-            d="m82.048,962.36c-0.18271-0.003-0.35147-0.001-0.53125,0.0312-0.69633,0.12662-1.3353,0.54943-1.7812,1.1562l-0.03125-0.0312-0.03125,0.0625-18.031,22.125h-44.438c-2.809,0-5.0938,2.2847-5.0938,5.0938v35.531c0,2.8091,2.2847,5.125,5.0938,5.125h20.562l-1.3125,4.5938h-0.71875c-1.1137,0-2.0312,0.9175-2.0312,2.0312v2.2188c0,1.1137,0.91751,2.0625,2.0312,2.0625h19.938c1.1137,0,2.0312-0.9488,2.0312-2.0625v-2.2188c0-1.1137-0.91751-2.0312-2.0312-2.0312h-0.71875l-1.3438-4.5938h20.438c2.809,0,5.0938-2.3159,5.0938-5.125v-35.531c0-1.7706-0.90663-3.3369-2.2812-4.25l10.531-17.625,0.03125-0.0625c0.84234-1.2783,0.51486-3.0308-0.75-3.9062l-3.0312-2.0938c-0.48208-0.33338-1.0456-0.49073-1.5938-0.5zm-0.21875,1.6875c0.28723-0.0523,0.57635,0.0338,0.84375,0.21875l3.0312,2.0938c0.53421,0.36973,0.65504,1.0569,0.28125,1.5938a0.85008,0.85008,0,0,0,-0.03125,0.0312l-17.906,30.062-9.0938-6.3125,22.094-27.125a0.85008,0.85008,0,0,0,0.03125,-0.0625c0.18694-0.26873,0.46277-0.4477,0.75-0.5zm-64.625,23.344,43.062,0-2.3438,2.9062-40.688,0c-0.0312-0.002-0.06255-0.002-0.09375,0-0.0312-0.002-0.06255-0.002-0.09375,0-0.38644,0.0753-0.69183,0.45007-0.6875,0.84375v34.844c0.003,0.4514,0.42377,0.857,0.875,0.8437h56.781c0.44088,0,0.84048-0.4028,0.84375-0.8437v-34.844c-0.008-0.25538-0.13841-0.50419-0.34375-0.65625l1.5-2.5c0.87419,0.61342,1.4375,1.6512,1.4375,2.8125v35.531c0,1.8967-1.5096,3.4063-3.4062,3.4063h-56.844c-1.8966,0-3.4062-1.5096-3.4062-3.4063v-35.531c0-1.8966,1.5096-3.4062,3.4062-3.4062zm0.875,4.5938,38.469,0-1.0312,1.25,0,0.0312c-0.48971,0.60518-0.64056,1.3922-0.5,2.0312,0.14234,0.64722,0.49536,1.1659,0.84375,1.6562a0.85008,0.85008,0,0,0,0.1875,0.21875l1.2812,0.875c-1.0387,0.79518-2.0706,1.1661-3.2188,1.6562-1.4337,0.61212-3.0045,1.4512-4.3438,3.375-1.1451,1.6448-1.0525,3.5446-0.78125,5.3437,0.27121,1.7991,0.70152,3.5802,0.5625,5.2188a0.85008,0.85008,0,0,0,1.2188,0.8437c1.4928-0.7039,3.3085-0.9361,5.0938-1.3125s3.6049-0.9489,4.75-2.5937c1.34-1.9249,1.5559-3.6628,1.625-5.2188,0.05552-1.2502,0.05447-2.363,0.4375-3.625l1.2812,0.875c1.2744,0.8814,3.0499,0.4785,3.8438-0.8437l0.03125-0.031,1.125-1.9063a0.85008,0.85008,0,0,0,0.03125,-0.0312l0.03125-0.0312a0.85008,0.85008,0,0,0,0.09375,-0.21875l4.0625-6.8125v32.406h-55.094v-33.156zm39.812,1.0625,9.3125,6.4375-0.84375,1.4062a0.85008,0.85008,0,0,0,-0.03125,0c-0.33037,0.5726-0.86691,0.7168-1.4062,0.3438l-2.1875-1.5-0.1875-0.15625-0.65625-0.4375-1.8438-1.2812-0.84375-0.59375-0.0625-0.0312-1.9688-1.3438c-0.25075-0.36937-0.4494-0.7387-0.5-0.96875-0.0558-0.25371-0.0497-0.34572,0.15625-0.59375l1.0625-1.2812zm0.84375,5.9688,0.34375,0.25,1.8438,1.25,0.375,0.25c-0.60662,1.6994-0.69236,3.2017-0.75,4.5-0.0657,1.481-0.18871,2.7295-1.3125,4.3438-0.76502,1.0988-2.0465,1.5537-3.7188,1.9062-1.3283,0.2801-2.854,0.5618-4.3438,1.0625-0.0521-1.5631-0.29881-3.0716-0.5-4.4062-0.25388-1.6841-0.29624-3.0262,0.46875-4.125,1.1246-1.6154,2.2602-2.1673,3.625-2.75,1.1932-0.5094,2.5901-1.1274,3.9688-2.2813zm-30.5,2.5313c-1.6815,0-3.0625,1.4119-3.0625,3.0937s1.381,3.0313,3.0625,3.0313,3.0625-1.3495,3.0625-3.0313-1.381-3.0937-3.0625-3.0937zm0,1.7187c0.76283,0,1.375,0.612,1.375,1.375s-0.61217,1.3438-1.375,1.3438-1.3438-0.5808-1.3438-1.3438,0.58092-1.375,1.3438-1.375zm8,5.6563c-3.3379,0.1812-7.1915,2.4749-10.344,4.6875-3.1522,2.2126-5.5625,4.4062-5.5625,4.4062-0.3273,0.3027-0.36527,0.8915-0.0625,1.2188,0.30273,0.3272,0.89151,0.334,1.2188,0.031,0,0,2.3185-2.1046,5.375-4.25s6.8989-4.2667,9.4688-4.4063c1.6177-0.088,4.3314,1.0381,6.5312,2.25,2.1999,1.212,3.9375,2.4375,3.9375,2.4375,0.35264,0.3353,1.001,0.2728,1.2812-0.125,0.28024-0.3977,0.12188-1.0307-0.3125-1.25,0,0-1.7602-1.2941-4.0625-2.5625-2.3024-1.2684-5.0831-2.567-7.4688-2.4375zm3.2812,22.562,12.344,0,1.3438,4.5312-15,0,1.3125-4.5312zm-3.7812,6.25,19.938,0c0.20135,0,0.3125,0.1424,0.3125,0.3437v2.2188c0,0.2013-0.11115,0.3437-0.3125,0.3437h-19.938c-0.20135,0-0.34375-0.1424-0.34375-0.3437v-2.2188c0-0.2013,0.1424-0.3437,0.34375-0.3437z" />
+            d="m82.048,962.36c-0.18271-0.003-0.35147-0.001-0.53125,0.0312-0.69633,0.12662-1.3353,0.54943-1.7812,1.1562l-0.03125-0.0312-0.03125,0.0625-18.031,22.125h-44.438c-2.809,0-5.0938,2.2847-5.0938,5.0938v35.531c0,2.8091,2.2847,5.125,5.0938,5.125h20.562l-1.3125,4.5938h-0.71875c-1.1137,0-2.0312,0.9175-2.0312,2.0312v2.2188c0,1.1137,0.91751,2.0625,2.0312,2.0625h19.938c1.1137,0,2.0312-0.9488,2.0312-2.0625v-2.2188c0-1.1137-0.91751-2.0312-2.0312-2.0312h-0.71875l-1.3438-4.5938h20.438c2.809,0,5.0938-2.3159,5.0938-5.125v-35.531c0-1.7706-0.90663-3.3369-2.2812-4.25l10.531-17.625,0.03125-0.0625c0.84234-1.2783,0.51486-3.0308-0.75-3.9062l-3.0312-2.0938c-0.48208-0.33338-1.0456-0.49073-1.5938-0.5zm-0.21875,1.6875c0.28723-0.0523,0.57635,0.0338,0.84375,0.21875l3.0312,2.0938c0.53421,0.36973,0.65504,1.0569,0.28125,1.5938a0.83008,0.83008,0,0,0,-0.03125,0.0312l-17.906,30.062-9.0938-6.3125,22.094-27.125a0.83008,0.83008,0,0,0,0.03125,-0.0625c0.18694-0.26873,0.46277-0.4477,0.75-0.5zm-64.625,23.344,43.062,0-2.3438,2.9062-40.688,0c-0.0312-0.002-0.06255-0.002-0.09375,0-0.0312-0.002-0.06255-0.002-0.09375,0-0.38644,0.0753-0.69183,0.43007-0.6875,0.84375v34.844c0.003,0.4514,0.42377,0.857,0.875,0.8437h56.781c0.44088,0,0.84048-0.4028,0.84375-0.8437v-34.844c-0.008-0.25538-0.13841-0.50419-0.34375-0.65625l1.5-2.5c0.87419,0.61342,1.4375,1.6512,1.4375,2.8125v35.531c0,1.8967-1.5096,3.4063-3.4062,3.4063h-56.844c-1.8966,0-3.4062-1.5096-3.4062-3.4063v-35.531c0-1.8966,1.5096-3.4062,3.4062-3.4062zm0.875,4.5938,38.469,0-1.0312,1.25,0,0.0312c-0.48971,0.60518-0.64056,1.3922-0.5,2.0312,0.14234,0.64722,0.49536,1.1659,0.84375,1.6562a0.83008,0.83008,0,0,0,0.1875,0.21875l1.2812,0.875c-1.0387,0.79518-2.0706,1.1661-3.2188,1.6562-1.4337,0.61212-3.0045,1.4512-4.3438,3.375-1.1451,1.6448-1.0525,3.5446-0.78125,5.3437,0.27121,1.7991,0.70152,3.5802,0.5625,5.2188a0.83008,0.83008,0,0,0,1.2188,0.8437c1.4928-0.7039,3.3085-0.9361,5.0938-1.3125s3.6049-0.9489,4.75-2.5937c1.34-1.9249,1.5559-3.6628,1.625-5.2188,0.05552-1.2502,0.05447-2.363,0.4375-3.625l1.2812,0.875c1.2744,0.8814,3.0499,0.4785,3.8438-0.8437l0.03125-0.031,1.125-1.9063a0.83008,0.83008,0,0,0,0.03125,-0.0312l0.03125-0.0312a0.83008,0.83008,0,0,0,0.09375,-0.21875l4.0625-6.8125v32.406h-55.094v-33.156zm39.812,1.0625,9.3125,6.4375-0.84375,1.4062a0.83008,0.83008,0,0,0,-0.03125,0c-0.33037,0.5726-0.86691,0.7168-1.4062,0.3438l-2.1875-1.5-0.1875-0.15625-0.65625-0.4375-1.8438-1.2812-0.84375-0.59375-0.0625-0.0312-1.9688-1.3438c-0.25075-0.36937-0.4494-0.7387-0.5-0.96875-0.0558-0.25371-0.0497-0.34572,0.15625-0.59375l1.0625-1.2812zm0.84375,5.9688,0.34375,0.25,1.8438,1.25,0.375,0.25c-0.60662,1.6994-0.69236,3.2017-0.75,4.5-0.0657,1.481-0.18871,2.7295-1.3125,4.3438-0.76502,1.0988-2.0465,1.5537-3.7188,1.9062-1.3283,0.2801-2.854,0.5618-4.3438,1.0625-0.0521-1.5631-0.29881-3.0716-0.5-4.4062-0.25388-1.6841-0.29624-3.0262,0.46875-4.125,1.1246-1.6154,2.2602-2.1673,3.625-2.75,1.1932-0.5094,2.5901-1.1274,3.9688-2.2813zm-30.5,2.5313c-1.6815,0-3.0625,1.4119-3.0625,3.0937s1.381,3.0313,3.0625,3.0313,3.0625-1.3495,3.0625-3.0313-1.381-3.0937-3.0625-3.0937zm0,1.7187c0.76283,0,1.375,0.612,1.375,1.375s-0.61217,1.3438-1.375,1.3438-1.3438-0.5808-1.3438-1.3438,0.58092-1.375,1.3438-1.375zm8,5.6563c-3.3379,0.1812-7.1915,2.4749-10.344,4.6875-3.1522,2.2126-5.5625,4.4062-5.5625,4.4062-0.3273,0.3027-0.36527,0.8915-0.0625,1.2188,0.30273,0.3272,0.89151,0.334,1.2188,0.031,0,0,2.3185-2.1046,5.375-4.25s6.8989-4.2667,9.4688-4.4063c1.6177-0.088,4.3314,1.0381,6.5312,2.25,2.1999,1.212,3.9375,2.4375,3.9375,2.4375,0.35264,0.3353,1.001,0.2728,1.2812-0.125,0.28024-0.3977,0.12188-1.0307-0.3125-1.25,0,0-1.7602-1.2941-4.0625-2.5625-2.3024-1.2684-5.0831-2.567-7.4688-2.4375zm3.2812,22.562,12.344,0,1.3438,4.5312-15,0,1.3125-4.5312zm-3.7812,6.25,19.938,0c0.20135,0,0.3125,0.1424,0.3125,0.3437v2.2188c0,0.2013-0.11115,0.3437-0.3125,0.3437h-19.938c-0.20135,0-0.34375-0.1424-0.34375-0.3437v-2.2188c0-0.2013,0.1424-0.3437,0.34375-0.3437z" />
         </g>
       </g>
     </svg>
diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index 654c782a..d96e0874 100644
--- a/src/components/atoms/canvas.tsx
+++ b/src/components/atoms/canvas.tsx
@@ -140,8 +140,8 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
         <canvas
             tabIndex={0}
             ref={canvasRef}
-            height={720}
-            width={1280}
+            height={300}
+            width={900}
         />
     );
 
diff --git a/src/components/atoms/texts.tsx b/src/components/atoms/texts.tsx
index e31b9ceb..046b9e55 100644
--- a/src/components/atoms/texts.tsx
+++ b/src/components/atoms/texts.tsx
@@ -9,7 +9,7 @@ export const WarningText = styled.p`
   background: rgba(255,165,0,0.15);
   padding: 5px;
   font-family: "Roboto","Helvetica","Arial",sans-serif;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 1.5;
   letter-spacing: 0.00938em;
 `
diff --git a/src/components/molecules/BrowserNavBar.tsx b/src/components/molecules/BrowserNavBar.tsx
index ad4e7d2d..cf00c8bd 100644
--- a/src/components/molecules/BrowserNavBar.tsx
+++ b/src/components/molecules/BrowserNavBar.tsx
@@ -77,7 +77,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
   };
 
   return (
-    <StyledNavBar browserWidth={browserWidth}>
+    <StyledNavBar browserWidth={900}>
       <NavBarButton
         type="button"
         onClick={() => {
diff --git a/src/components/molecules/BrowserTabs.tsx b/src/components/molecules/BrowserTabs.tsx
index 2cda3937..a430d26f 100644
--- a/src/components/molecules/BrowserTabs.tsx
+++ b/src/components/molecules/BrowserTabs.tsx
@@ -31,7 +31,7 @@ export const BrowserTabs = (
 
   return (
     <Box sx={{
-      width: `${width}px`,
+      width: 800,
       display: 'flex',
       overflow: 'auto',
       alignItems: 'center',
diff --git a/src/components/molecules/InterpretationButtons.tsx b/src/components/molecules/InterpretationButtons.tsx
index c9f45be2..cb82da02 100644
--- a/src/components/molecules/InterpretationButtons.tsx
+++ b/src/components/molecules/InterpretationButtons.tsx
@@ -160,7 +160,7 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          width: 500,
+          width: 300,
           background: 'white',
           border: '2px solid #000',
           boxShadow: '24',
diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 1af5bc8c..9dce3fd7 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -114,7 +114,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           background: '#3f4853',
           border: 'none',
           padding: '10px 20px',
-          width: 1280,
+          width: 900,
           textAlign: 'left'
         }}>
         Interpretation Log
@@ -129,7 +129,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: 'white',
             color: 'black',
             padding: '10px',
-            height: 720,
+            height: 300,
             width: width - 10,
             display: 'flex'
           }
@@ -173,7 +173,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
               <FormLabel>
                 <h4>What is the maximum number of rows you want to extract?</h4>
               </FormLabel>
-              <RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '500px' }}>
+              <RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '300px' }}>
                 <FormControlLabel value="10" control={<Radio />} label="10" />
                 <FormControlLabel value="100" control={<Radio />} label="100" />
                 <FormControlLabel value="custom" control={<Radio />} label="Custom" />
diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index f06bebd3..b20d7ee9 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -94,7 +94,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                         color: 'white',
                         marginRight: '10px',
                         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                        fontWeight: '500',
+                        fontWeight: '300',
                         fontSize: '0.875rem',
                         lineHeight: '1.75',
                         letterSpacing: '0.02857em',
@@ -112,7 +112,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                       color: 'white',
                       marginRight: '10px',
                       fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                      fontWeight: '500',
+                      fontWeight: '300',
                       fontSize: '0.875rem',
                       lineHeight: '1.75',
                       letterSpacing: '0.02857em',
@@ -129,7 +129,7 @@ export const NavBar: React.FC<NavBarProps> = ({ newRecording, recordingName, isR
                   color: 'white',
                   marginRight: '10px',
                   fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-                  fontWeight: '500',
+                  fontWeight: '300',
                   fontSize: '0.875rem',
                   lineHeight: '1.75',
                   letterSpacing: '0.02857em',
diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index c2f6911b..6f2becb3 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -78,7 +78,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
         marginRight: '10px',
         borderRadius: '5px',
         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-        fontWeight: '500',
+        fontWeight: '300',
         fontSize: '0.875rem',
         lineHeight: '1.75',
         letterSpacing: '0.02857em',
diff --git a/src/components/organisms/BrowserContent.tsx b/src/components/organisms/BrowserContent.tsx
index 7017ace3..18fbce19 100644
--- a/src/components/organisms/BrowserContent.tsx
+++ b/src/components/organisms/BrowserContent.tsx
@@ -6,6 +6,7 @@ import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { BrowserTabs } from "../molecules/BrowserTabs";
 import { useSocketStore } from "../../context/socket";
 import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
+import { Box } from '@mui/material';
 
 // TODO: Tab !show currentUrl after recordingUrl global state
 export const BrowserContent = () => {
@@ -114,7 +115,7 @@ export const BrowserContent = () => {
   }, [])
 
   return (
-    <BrowserContentWrapper>
+    <>
       <BrowserTabs
         tabs={tabs}
         handleTabChange={handleTabChange}
@@ -125,14 +126,13 @@ export const BrowserContent = () => {
       />
       <BrowserNavBar
         // todo: use width from browser dimension once fixed
-        browserWidth={1270}
+        browserWidth={900}
         handleUrlChanged={handleUrlChanged}
       />
       <BrowserWindow/>
-    </BrowserContentWrapper>
+    </>
   );
 }
 
 const BrowserContentWrapper = styled.div`
-  grid-area: browser;
 `;
\ No newline at end of file
diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index ddf4d0e1..00b485fd 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -360,15 +360,15 @@ export const BrowserWindow = () => {
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}
                     displayedSelector={highlighterData?.selector}
-                    width={width}
-                    height={height}
+                    width={900}
+                    height={300}
                     canvasRect={canvasRef.current.getBoundingClientRect()}
                 />
                 : null}
             <Canvas
                 onCreateRef={setCanvasReference}
-                width={width}
-                height={height}
+                width={900}
+                height={300}
             />
         </div>
     );
@@ -383,7 +383,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
     img.src = image;
     img.onload = () => {
         URL.revokeObjectURL(img.src);
-        ctx?.drawImage(img, 0, 0, 1280, 720);
+        ctx?.drawImage(img, 0, 0, 900, 300);
     };
 
 };
\ No newline at end of file
diff --git a/src/components/organisms/LeftSidePanel.tsx b/src/components/organisms/LeftSidePanel.tsx
index 09c5fc46..7504be2e 100644
--- a/src/components/organisms/LeftSidePanel.tsx
+++ b/src/components/organisms/LeftSidePanel.tsx
@@ -63,7 +63,7 @@ export const LeftSidePanel = (
       if (id) {
         fetchWorkflow(id, workflowHandler);
       }
-    }, (1000 * 60 * 15));
+    }, (900 * 60 * 15));
     return () => clearInterval(interval)
   }, [id]);
 
diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx
index a799490d..9e0a9f2b 100644
--- a/src/components/organisms/ProxyForm.tsx
+++ b/src/components/organisms/ProxyForm.tsx
@@ -87,7 +87,7 @@ const ProxyForm: React.FC = () => {
             <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
                 Proxy Configuration
             </Typography>
-            <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
+            <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 300, width: '100%' }}>
                 <FormControl>
                     <TextField
                         label="Proxy Server URL"
diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 88307086..278da66b 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -78,7 +78,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       if (id) {
         fetchWorkflow(id, workflowHandler);
       }
-    }, (1000 * 60 * 15));
+    }, (900 * 60 * 15));
     return () => {
       socket?.off("workflow", workflowHandler);
       clearInterval(interval);
@@ -408,7 +408,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
-                width: '500px'
+                width: '300px'
               }}
             >
               <FormControlLabel value="10" control={<Radio />} label="10" />
diff --git a/src/constants/const.ts b/src/constants/const.ts
index 7337da31..ed87d18f 100644
--- a/src/constants/const.ts
+++ b/src/constants/const.ts
@@ -1,5 +1,5 @@
-export const VIEWPORT_W = 1280;
-export const VIEWPORT_H = 720;
+export const VIEWPORT_W = 900;
+export const VIEWPORT_H = 300;
 
 export const ONE_PERCENT_OF_VIEWPORT_W = VIEWPORT_W / 100;
 export const ONE_PERCENT_OF_VIEWPORT_H = VIEWPORT_H / 100;
diff --git a/src/context/browserDimensions.tsx b/src/context/browserDimensions.tsx
index e1d81681..e8b8394a 100644
--- a/src/context/browserDimensions.tsx
+++ b/src/context/browserDimensions.tsx
@@ -7,8 +7,8 @@ interface BrowserDimensions {
 };
 
 class BrowserDimensionsStore implements Partial<BrowserDimensions>{
-  width: number = 1280;
-  height: number = 720;
+  width: number = 900;
+  height: number = 300;
 };
 
 const browserDimensionsStore = new BrowserDimensionsStore();
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index f9eb8ab4..3ad04a82 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -63,7 +63,7 @@ const Login = () => {
             <Typography variant="h4" gutterBottom>
                 Welcome Back!
             </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
+            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 300, width: '100%' }}>
                 <TextField
                     fullWidth
                     label="Email"
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 34d6811d..7f1f0193 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -158,7 +158,7 @@ export const MainPage = ({ handleEditRecording }: MainPageProps) => {
   }
 
   return (
-    <Stack direction='row' spacing={0} sx={{ minHeight: '800px' }}>
+    <Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
       <MainMenu value={content} handleChangeContent={setContent} />
       {DisplayContent()}
     </Stack>
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index 19d94c20..a11258e3 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid, Box } from '@mui/material';
 import { BrowserContent } from "../components/organisms/BrowserContent";
 import { InterpretationLog } from "../components/molecules/InterpretationLog";
 import { startRecording, getActiveBrowserId } from "../api/recording";
-import { LeftSidePanel } from "../components/organisms/LeftSidePanel";
 import { RightSidePanel } from "../components/organisms/RightSidePanel";
 import { Loader } from "../components/atoms/Loader";
 import { useSocketStore } from "../context/socket";
@@ -35,7 +34,6 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
   const [showOutputData, setShowOutputData] = useState(false);
 
   const browserContentRef = React.useRef<HTMLDivElement>(null);
-  const workflowListRef = React.useRef<HTMLDivElement>(null);
 
   const { setId, socket } = useSocketStore();
   const { setWidth } = useBrowserDimensionsStore();
@@ -52,7 +50,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
     });
   };
 
-  useEffect(() => changeBrowserDimensions(), [isLoaded])
+  // useEffect(() => changeBrowserDimensions(), [isLoaded])
 
   useEffect(() => {
     let isCancelled = false;
@@ -113,27 +111,19 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
   return (
     <ActionProvider>
       <BrowserStepsProvider>
-        <div>
-          {isLoaded ?
-            <Grid container direction="row" spacing={0}>
-              <Grid item xs={2} ref={workflowListRef} style={{ display: "flex", flexDirection: "row" }}>
-                <LeftSidePanel
-                  sidePanelRef={workflowListRef.current}
-                  alreadyHasScrollbar={hasScrollbar}
-                  recordingName={recordingName ? recordingName : ''}
-                  handleSelectPairForEdit={handleSelectPairForEdit}
-                />
-              </Grid>
-              <Grid id="browser-content" ref={browserContentRef} item xs>
+        <Box sx={{ flexGrow: 1 }}>
+          {isLoaded ? (
+            <Grid container spacing={1}>
+              <Grid id="browser-content" ref={browserContentRef} item xs={9}>
                 <BrowserContent />
                 <InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
               </Grid>
-              <Grid item xs={2}>
+              <Grid item xs={3}>
                 <RightSidePanel onFinishCapture={handleShowOutputData} />
               </Grid>
             </Grid>
-            : <Loader />}
-        </div>
+          ) : <Loader />}
+        </Box>
       </BrowserStepsProvider>
     </ActionProvider>
   );
@@ -144,4 +134,24 @@ const RecordingPageWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-`;
\ No newline at end of file
+`;
+
+// Fixed grid container to ensure elements stay next to each other
+const FixedGridContainer = styled(Grid)`
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  flex-direction: row;
+  align-items: stretch;
+
+  #browser-content {
+    flex: 1;
+    position: relative;
+    height: 100%;
+  }
+
+  .MuiGrid-item {
+    position: relative;
+    height: 100%;
+  }
+`;
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index d3ccd666..63935051 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -61,7 +61,7 @@ const Register = () => {
             <Typography variant="h4" gutterBottom>
                 Create an account
             </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
+            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 300, width: '100%' }}>
                 <TextField
                     margin="normal"
                     required