diff --git a/src/components/monitor-list/monitor-list.css b/src/components/monitor-list/monitor-list.css
index 6ee78ce05ed030cfce98c4331f0c56f3905d70a9..c5fad0b649ea3ce7da2ea0534a728d77e1dfb299 100644
--- a/src/components/monitor-list/monitor-list.css
+++ b/src/components/monitor-list/monitor-list.css
@@ -2,4 +2,6 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+    /* Scaling for monitors should happen from the top left */
+    transform-origin: left top;
 }
diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index 07b6a817be90020956891f340b73a344f5b21afd..d229b3b291ebd0986bf0a38f5f12f27d97fc2e2e 100644
--- a/src/components/monitor-list/monitor-list.jsx
+++ b/src/components/monitor-list/monitor-list.jsx
@@ -7,10 +7,19 @@ import {OrderedMap} from 'immutable';
 
 import styles from './monitor-list.css';
 
+const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => {
+    const scaleX = width / widthDefault;
+    const scaleY = height / heightDefault;
+    return `scale(${scaleX},${scaleY})`;
+};
+
 const MonitorList = props => (
     <Box
         // Use static `monitor-overlay` class for bounds of draggables
         className={classNames(styles.monitorList, 'monitor-overlay')}
+        style={{
+            transform: stageSizeToTransform(props.stageSize)
+        }}
     >
         {props.monitors.valueSeq().filter(m => m.visible)
             .map(monitorData => (
@@ -37,7 +46,13 @@ const MonitorList = props => (
 
 MonitorList.propTypes = {
     monitors: PropTypes.instanceOf(OrderedMap),
-    onMonitorChange: PropTypes.func.isRequired
+    onMonitorChange: PropTypes.func.isRequired,
+    stageSize: PropTypes.shape({
+        width: PropTypes.number,
+        height: PropTypes.number,
+        widthDefault: PropTypes.number,
+        heightDefault: PropTypes.number
+    }).isRequired
 };
 
 export default MonitorList;
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index 348f11e0cdee8f91d279438f12c6a2a3548573bc..8856799791d074a3a3b524cdd6d33f95aa409dff 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -93,6 +93,7 @@
     align-items: center;
     padding: 2px;
     flex-shrink: 0;
+    transform: translateZ(0); /* Keep sharp when scaled */
 }
 
 .list-index {
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 37f12706b0cc0de16bb334dc1fc7f8b8d6e8d5d4..d974375ac4d430e0bed6084037d11d2cfc0e756f 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -47,7 +47,7 @@ const StageComponent = props => {
                     {...boxProps}
                 />
                 <Box className={styles.monitorWrapper}>
-                    <MonitorList />
+                    <MonitorList stageSize={stageSize} />
                 </Box>
                 {isColorPicking && colorInfo ? (
                     <Box className={styles.colorPickerWrapper}>