diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 425ebde1f8b091e99c822632249448fff3f62c94..8188751d1d6112ddf66b5f204ffc75e12a23723f 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -51,6 +51,8 @@
     margin: auto;
     border: 3px solid rgb(126, 133, 151);
     padding: 0;
+    margin-top: 3px;
+    margin-bottom: 3px;
     border-radius: $space;
 
     overflow: hidden;
@@ -59,6 +61,10 @@
     justify-content: center;
 }
 
+.stage-overlay-content-border-override {
+    border: none;
+}
+
 .question-wrapper {
     position: absolute;
 }
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index ed21d930b4a88018cf448d700b69dafc6fba25fb..47981e04ab0f44cbd416212420be64e64aeac819 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -21,25 +21,37 @@ const StageComponent = props => {
         onQuestionAnswered,
         ...boxProps
     } = props;
-    let heightCorrectedAspect = window.innerHeight - 40;
-    let widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3);
-    if (widthCorrectedAspect > window.innerWidth) {
-        widthCorrectedAspect = window.innerWidth;
-        heightCorrectedAspect = widthCorrectedAspect * .75;
+
+    let heightCorrectedAspect = height;
+    let widthCorrectedAspect = width;
+    const spacingBorderAdjustment = 9;
+    const stageMenuHeightAdjustment = 40;
+    if (isZoomed) {
+        heightCorrectedAspect = window.innerHeight - stageMenuHeightAdjustment - spacingBorderAdjustment;
+        widthCorrectedAspect = heightCorrectedAspect + (heightCorrectedAspect / 3);
+        if (widthCorrectedAspect > window.innerWidth) {
+            widthCorrectedAspect = window.innerWidth;
+            heightCorrectedAspect = widthCorrectedAspect * .75;
+        }
     }
-    return isZoomed === false ? (
+    return (
         <div>
             <Box
-                className={classNames(styles.stageWrapper, {
-                    [styles.withColorPicker]: isColorPicking
+                className={classNames({
+                    [styles.stageWrapper]: !isZoomed,
+                    [styles.stageWrapperOverlay]: isZoomed,
+                    [styles.withColorPicker]: !isZoomed && isColorPicking
                 })}
             >
                 <Box
-                    className={styles.stage}
+                    className={classNames(
+                        styles.stage,
+                        {[styles.stageOverlayContent]: isZoomed}
+                    )}
                     componentRef={canvasRef}
                     element="canvas"
-                    height={height}
-                    width={width}
+                    height={heightCorrectedAspect}
+                    width={widthCorrectedAspect}
                     {...boxProps}
                 />
                 <Box className={styles.monitorWrapper}>
@@ -51,47 +63,30 @@ const StageComponent = props => {
                     </Box>
                 ) : null}
                 {question === null ? null : (
-                    <Question
-                        question={question}
-                        onQuestionAnswered={onQuestionAnswered}
-                    />
-                )}
-            </Box>
-            {isColorPicking ? (
-                <Box
-                    className={styles.colorPickerBackground}
-                    onClick={onDeactivateColorPicker}
-                />
-            ) : null}
-        </div>
-    ) : (
-        <div>
-            <Box className={styles.stageWrapperOverlay}>
-                <Box
-                    className={classNames(styles.stage, styles.stageOverlayContent)}
-                    componentRef={canvasRef}
-                    element="canvas"
-                    height={heightCorrectedAspect}
-                    width={widthCorrectedAspect}
-                    {...boxProps}
-                />
-                <Box className={styles.monitorWrapper}>
-                    <MonitorList />
-                </Box>
-                <div className={styles.stageOverlayContent}>
                     <div
-                        className={styles.questionWrapper}
-                        style={{width: widthCorrectedAspect}}
+                        className={classNames(
+                            styles.stageOverlayContent,
+                            styles.stageOverlayContentBorderOverride
+                        )}
                     >
-                        {question === null ? null : (
+                        <div
+                            className={styles.questionWrapper}
+                            style={{width: widthCorrectedAspect}}
+                        >
                             <Question
                                 question={question}
                                 onQuestionAnswered={onQuestionAnswered}
                             />
-                        )}
+                        </div>
                     </div>
-                </div>
+                )}
             </Box>
+            {isColorPicking ? (
+                <Box
+                    className={styles.colorPickerBackground}
+                    onClick={onDeactivateColorPicker}
+                />
+            ) : null}
         </div>
     );
 };
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 2bea636afd2c51fe0af6deaf001dd941c6d5c8da..d3acba94ee1501098034a2eda728f49866e9d00b 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -7,12 +7,8 @@ import {connect} from 'react-redux';
 
 import StageHeaderComponent from '../components/stage-header/stage-header.jsx';
 
+// eslint-disable-next-line react/prefer-stateless-function
 class StageHeader extends React.Component {
-    shouldComponentUpdate (nextProps) {
-        return this.props.width !== nextProps.width ||
-               this.props.height !== nextProps.height ||
-               this.props.isZoomed !== nextProps.isZoomed;
-    }
     render () {
         const {
             ...props