diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index d96e0874..654c782a 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={300}
-            width={900}
+            height={720}
+            width={1280}
         />
     );
 
diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 1af5bc8c..e7da5791 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -208,4 +208,4 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
       </SwipeableDrawer>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 00b485fd..ddf4d0e1 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={900}
-                    height={300}
+                    width={width}
+                    height={height}
                     canvasRect={canvasRef.current.getBoundingClientRect()}
                 />
                 : null}
             <Canvas
                 onCreateRef={setCanvasReference}
-                width={900}
-                height={300}
+                width={width}
+                height={height}
             />
         </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, 900, 300);
+        ctx?.drawImage(img, 0, 0, 1280, 720);
     };
 
 };
\ No newline at end of file
diff --git a/src/constants/const.ts b/src/constants/const.ts
index ed87d18f..7337da31 100644
--- a/src/constants/const.ts
+++ b/src/constants/const.ts
@@ -1,5 +1,5 @@
-export const VIEWPORT_W = 900;
-export const VIEWPORT_H = 300;
+export const VIEWPORT_W = 1280;
+export const VIEWPORT_H = 720;
 
 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 e8b8394a..e1d81681 100644
--- a/src/context/browserDimensions.tsx
+++ b/src/context/browserDimensions.tsx
@@ -7,8 +7,8 @@ interface BrowserDimensions {
 };
 
 class BrowserDimensionsStore implements Partial<BrowserDimensions>{
-  width: number = 900;
-  height: number = 300;
+  width: number = 1280;
+  height: number = 720;
 };
 
 const browserDimensionsStore = new BrowserDimensionsStore();
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index a11258e3..19d94c20 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Grid, Box } from '@mui/material';
+import { Grid } 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";
@@ -34,6 +35,7 @@ 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();
@@ -50,7 +52,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
     });
   };
 
-  // useEffect(() => changeBrowserDimensions(), [isLoaded])
+  useEffect(() => changeBrowserDimensions(), [isLoaded])
 
   useEffect(() => {
     let isCancelled = false;
@@ -111,19 +113,27 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
   return (
     <ActionProvider>
       <BrowserStepsProvider>
-        <Box sx={{ flexGrow: 1 }}>
-          {isLoaded ? (
-            <Grid container spacing={1}>
-              <Grid id="browser-content" ref={browserContentRef} item xs={9}>
+        <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>
                 <BrowserContent />
                 <InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
               </Grid>
-              <Grid item xs={3}>
+              <Grid item xs={2}>
                 <RightSidePanel onFinishCapture={handleShowOutputData} />
               </Grid>
             </Grid>
-          ) : <Loader />}
-        </Box>
+            : <Loader />}
+        </div>
       </BrowserStepsProvider>
     </ActionProvider>
   );
@@ -134,24 +144,4 @@ const RecordingPageWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-`;
-
-// 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%;
-  }
-`;
+`;
\ No newline at end of file