diff --git a/src/main/Body.tsx b/src/main/Body.tsx
index ff52ffc74..3d69bfe5e 100644
--- a/src/main/Body.tsx
+++ b/src/main/Body.tsx
@@ -6,6 +6,8 @@ import TheEnd from './TheEnd';
 import Error from './Error';
 import Landing from "./Landing";
 
+import { css } from '@emotion/react'
+
 import { useSelector } from 'react-redux';
 import { selectIsEnd } from '../redux/endSlice'
 import { selectIsError } from "../redux/errorSlice";
@@ -42,11 +44,11 @@ const Body: React.FC<{}> = () => {
     }
   }
 
-  const bodyStyle = {
+  const bodyStyle = css({
     display: 'flex',
-    flexDirection: 'row' as const,
+    flexDirection: 'row',
     height: '100%',
-  };
+  });
 
   return (
     <React.Fragment>
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index 72b166f33..fe8d81d3c 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -49,89 +49,57 @@ const MainContent: React.FC<{}> = () => {
     }
   });
 
-  const cuttingStyle = css({
+  const mainContentStyle = css({
     display: 'flex',
-    flexDirection: 'column' as const,
-    justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
+    width: '100%',
     paddingRight: '20px',
-    paddingLeft: '161px',
+    paddingLeft: '20px',
+    ...(flexGapReplacementStyle(20, false)),
     background: `${theme.background}`,
+    overflow: 'vertical',
+  })
+
+  const cuttingStyle = css({
+    flexDirection: 'column',
   })
 
   const metadataStyle = css({
-    display: 'flex',
-    // flexDirection: 'column' as const,
-    // justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const trackSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const subtitleSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     justifyContent: 'space-around',
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    height: '100%',
-    background: `${theme.background}`,
   })
 
   const thumbnailSelectStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
   })
 
   const finishStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    minHeight: '100vh',
-    background: `${theme.background}`,
   })
 
   const keyboardControlsStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
-    // justifyContent: 'space-around',
-    ...(flexGapReplacementStyle(20, false)),
-    paddingRight: '20px',
-    paddingLeft: '161px',
-    background: `${theme.background}`,
+    flexDirection: 'column',
   })
 
   const defaultStyle = css({
-    display: 'flex',
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
     alignItems: 'center',
     padding: '20px',
-    ...(flexGapReplacementStyle(20, false)),
   })
 
   const render = () => {
     if (mainMenuState === MainMenuStateNames.cutting) {
       return (
-        <div css={cuttingStyle}>
+        <div css={[mainContentStyle, cuttingStyle]} role="main">
           <Video />
           <CuttingActions />
           <CuttingTimeline />
@@ -139,43 +107,43 @@ const MainContent: React.FC<{}> = () => {
       )
     } else if (mainMenuState === MainMenuStateNames.metadata) {
       return (
-        <div css={metadataStyle}>
+        <div css={[mainContentStyle, metadataStyle]} role="main">
           <Metadata />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.trackSelection) {
       return (
-        <div css={trackSelectStyle}>
+        <div css={[mainContentStyle, trackSelectStyle]} role="main">
           <TrackSelection />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.subtitles) {
       return (
-        <div css={subtitleSelectStyle}>
+        <div css={[mainContentStyle, subtitleSelectStyle]} role="main">
           <Subtitle />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.thumbnail) {
       return (
-        <div css={thumbnailSelectStyle}>
+        <div css={[mainContentStyle, thumbnailSelectStyle]} role="main">
           <Thumbnail />
         </div>
       )
     } else if (mainMenuState === MainMenuStateNames.finish) {
       return (
-        <div css={finishStyle}>
+        <div css={[mainContentStyle, finishStyle]} role="main">
           <Finish />
         </div>
         )
     } else if (mainMenuState === MainMenuStateNames.keyboardControls) {
       return (
-        <div css={keyboardControlsStyle}>
+        <div css={[mainContentStyle, keyboardControlsStyle]} role="main">
           <ThemeSwitcher/>
           <KeyboardControls />
         </div>
         )
     } else {
-      <div css={defaultStyle}>
+      <div css={[mainContentStyle, defaultStyle]} role="main">
         <FontAwesomeIcon icon={faTools} size="10x" />
         Placeholder
       </div>
@@ -183,9 +151,7 @@ const MainContent: React.FC<{}> = () => {
   }
 
   return (
-     <main css={{width: '100%'}} role="main">
-      {render()}
-     </main>
+    <>{render()}</>
   );
 };
 
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index 440f8c3d1..3d74aa290 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -33,15 +33,12 @@ const MainMenu: React.FC<{}> = () => {
 
   const mainMenuStyle = css({
     borderRight: `${theme.menuBorder}`,
-    width: '100px',
+    minWidth: '100px',
     display: 'flex',
-    flexDirection: 'column' as const,
-    flexShrink: 0,
+    flexDirection: 'column',
     alignItems: 'center',
     padding: '20px',
-    height: '100%',
-    position: 'fixed',
-    overflow: 'auto',
+    overflow: 'vertical',
     ...(flexGapReplacementStyle(30, false)),
   });
 
@@ -151,13 +148,12 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       backgroundColor: `${theme.button_color}`,
       color: `${theme.selected_text}`,
     },
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
   });
 
   const miniMenuButtonStyle = css({
     width: '75px',
     height: '67px',
-    marginBottom: '35px',
     outline: `${theme.menuButton_outline}`,
     ...(activeState === stateName) && {
       backgroundColor: `${theme.button_color}`,
@@ -167,7 +163,7 @@ const MainMenuButton: React.FC<mainMenuButtonInterface> = ({iconName, stateName,
       backgroundColor: `${theme.button_color}`,
       color: `${theme.selected_text}`,
     },
-    flexDirection: 'column' as const,
+    flexDirection: 'column',
   });
 
   return (