diff --git a/src/App.css b/src/App.css
index 0056c62..be08fb6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -108,17 +108,22 @@ code {
   overflow-y: scroll;
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 1400px) {
   .page {
     flex-direction: column;
   }
 
   .left-pane {
     width: 100%;
+    height: calc(50vh - 3rem);
+    margin-right: 0;
   }
 
   .right-pane {
     width: 100%;
+    height: 42vh;
+    margin-left: 0;
+    margin-top: 0.6rem;
   }
 
   .links {
diff --git a/src/Editor.jsx b/src/Editor.jsx
index 5d2f6b5..6c2a0a6 100644
--- a/src/Editor.jsx
+++ b/src/Editor.jsx
@@ -1,10 +1,25 @@
+import { useState, useEffect } from 'react'
 import AceEditor from 'react-ace'
 
 import 'ace-builds/src-noconflict/mode-flix'
 import 'ace-builds/src-noconflict/theme-xcode'
 import 'ace-builds/src-noconflict/theme-tomorrow_night'
 
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches)
+  useEffect(() => {
+    const mql = window.matchMedia(query)
+    const handler = e => setMatches(e.matches)
+    mql.addEventListener('change', handler)
+    return () => mql.removeEventListener('change', handler)
+  }, [query])
+  return matches
+}
+
 export default function Editor({ code, notifyOnChange, isDark }) {
+  const isSmallScreen = useMediaQuery('(max-width: 1400px)')
+  const editorHeight = isSmallScreen ? 'calc(50vh - 3.5rem)' : 'calc(100vh - 5.8rem)'
+
   return (
     <div>
       <div>
@@ -21,7 +36,7 @@ export default function Editor({ code, notifyOnChange, isDark }) {
             value={code}
             autoScrollEditorIntoView={true}
             width={'100%'}
-            height={'calc(100vh - 5.8rem)'}
+            height={editorHeight}
             editorProps={{
               $blockScrolling: true,
             }}
diff --git a/src/Menu.jsx b/src/Menu.jsx
index 4b4ef9d..de48ef9 100644
--- a/src/Menu.jsx
+++ b/src/Menu.jsx
@@ -113,16 +113,16 @@ export default function Menu({ connected, notifyRun, notifySampleChange, program
         <Button color="light" className="ml-3" onClick={updateLinkUrl}>
           Shareable Link <i className="fa fa-clipboard ml-2" />
         </Button>
-
-        <Button
-          color="light"
-          onClick={toggleDarkMode}
-          style={{ width: '38px', height: '38px', padding: 0, marginLeft: '0.5rem' }}
-          title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-        >
-          <i className={isDark ? 'fa fa-sun-o' : 'fa fa-moon-o'} />
-        </Button>
       </div>
+
+      <Button
+        color="light"
+        onClick={toggleDarkMode}
+        style={{ width: '38px', height: '38px', padding: 0, marginLeft: '0.5rem' }}
+        title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      >
+        <i className={isDark ? 'fa fa-sun-o' : 'fa fa-moon-o'} />
+      </Button>
     </div>
   )
 }