diff --git a/src/ScriptEditor/ui/ThemeEditorModal.tsx b/src/ScriptEditor/ui/ThemeEditorModal.tsx
index bf979359d..327731414 100644
--- a/src/ScriptEditor/ui/ThemeEditorModal.tsx
+++ b/src/ScriptEditor/ui/ThemeEditorModal.tsx
@@ -7,6 +7,7 @@ import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
 import TextField from "@mui/material/TextField";
+import Paper from "@mui/material/Paper";
 import IconButton from "@mui/material/IconButton";
 import ReplyIcon from "@mui/icons-material/Reply";
 import HistoryIcon from '@mui/icons-material/History';
@@ -104,168 +105,172 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
     }}>
       <Typography variant="h4">Customize Editor theme</Typography>
       <Typography>Hover over input boxes for more information</Typography>
-      <OptionSwitch
-        checked={themeCopy.base === "vs"}
-        onChange={(val) => {
-          setThemeCopy(_.set(themeCopy, "base", val ? "vs" : "vs-dark"));
-          rerender();
-        }}
-        text="Use light theme as base"
-        tooltip={
-          <>
-            If enabled, the vs light theme will be used as the
-            theme base, otherwise, vs-dark will be used.
-          </>
-        }
-      />
-      <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "fit-content", gap: 1 }}>
-        <Box>
-          <Typography variant="h6">UI</Typography>
-          <ColorEditor
-            label="Background color"
-            themePath="common.bg"
-            onColorChange={onColorChange}
-            color={themeCopy.common.bg}
-            defaultColor={defaultMonacoTheme.common.bg}
-          />
-          <ColorEditor
-            label="Current line and minimap background color"
-            themePath="ui.line"
-            onColorChange={onColorChange}
-            color={themeCopy.ui.line}
-            defaultColor={defaultMonacoTheme.ui.line}
-          />
-          <ColorEditor
-            label="Base text color"
-            themePath="common.fg"
-            onColorChange={onColorChange}
-            color={themeCopy.common.fg}
-            defaultColor={defaultMonacoTheme.common.fg}
-          />
-          <ColorEditor
-            label="Popup background color"
-            themePath="ui.panel.bg"
-            onColorChange={onColorChange}
-            color={themeCopy.ui.panel.bg}
-            defaultColor={defaultMonacoTheme.ui.panel.bg}
-          />
-          <ColorEditor
-            label="Background color for selected item in popup"
-            themePath="ui.panel.selected"
-            onColorChange={onColorChange}
-            color={themeCopy.ui.panel.selected}
-            defaultColor={defaultMonacoTheme.ui.panel.selected}
-          />
-          <ColorEditor
-            label="Popup border color"
-            themePath="ui.panel.border"
-            onColorChange={onColorChange}
-            color={themeCopy.ui.panel.border}
-            defaultColor={defaultMonacoTheme.ui.panel.border}
-          />
-          <ColorEditor
-            label="Background color of highlighted text"
-            themePath="ui.selection.bg"
-            onColorChange={onColorChange}
-            color={themeCopy.ui.selection.bg}
-            defaultColor={defaultMonacoTheme.ui.selection.bg}
-          />
-        </Box>
-        <Box>
-          <Typography variant="h6">Syntax</Typography>
-          <ColorEditor
-            label="Numbers, function names, and other key vars"
-            themePath="common.accent"
-            onColorChange={onColorChange}
-            color={themeCopy.common.accent}
-            defaultColor={defaultMonacoTheme.common.accent}
-          />
-          <ColorEditor
-            label="Keywords"
-            themePath="syntax.keyword"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.keyword}
-            defaultColor={defaultMonacoTheme.syntax.keyword}
-          />
-          <ColorEditor
-            label="Strings"
-            themePath="syntax.string"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.string}
-            defaultColor={defaultMonacoTheme.syntax.string}
-          />
-          <ColorEditor
-            label="Regexp literals as well as escapes within strings"
-            themePath="syntax.regexp"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.regexp}
-            defaultColor={defaultMonacoTheme.syntax.regexp}
-          />
-          <ColorEditor
-            label="Constants"
-            themePath="syntax.constant"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.constant}
-            defaultColor={defaultMonacoTheme.syntax.constant}
-          />
-          <ColorEditor
-            label="Entities"
-            themePath="syntax.entity"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.entity}
-            defaultColor={defaultMonacoTheme.syntax.entity}
-          />
-          <ColorEditor
-            label="'this', 'ns', types, and tags"
-            themePath="syntax.tag"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.tag}
-            defaultColor={defaultMonacoTheme.syntax.tag}
-          />
-          <ColorEditor
-            label="Netscript functions and constructors"
-            themePath="syntax.markup"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.markup}
-            defaultColor={defaultMonacoTheme.syntax.markup}
-          />
-          <ColorEditor
-            label="Errors"
-            themePath="syntax.error"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.error}
-            defaultColor={defaultMonacoTheme.syntax.error}
-          />
-          <ColorEditor
-            label="Comments"
-            themePath="syntax.comment"
-            onColorChange={onColorChange}
-            color={themeCopy.syntax.comment}
-            defaultColor={defaultMonacoTheme.syntax.comment}
-          />
-        </Box>
-      </Box>
-      <TextField
-        multiline
-        fullWidth
-        maxRows={10}
-        label={"import / export theme"}
-        value={JSON.stringify(themeCopy, undefined, 2)}
-        onChange={onThemeChange}
-      />
-      <Box sx={{ my: 1 }}>
-        <Button onClick={() => {
-          Settings.EditorTheme = { ...themeCopy };
-          props.onClose()
-        }} startIcon={<SaveIcon />}>Save</Button>
-        <Button
-          onClick={() => {
-            setThemeCopy(defaultMonacoTheme);
+      <Paper sx={{ p: 1, my: 1 }}>
+        <OptionSwitch
+          checked={themeCopy.base === "vs"}
+          onChange={(val) => {
+            setThemeCopy(_.set(themeCopy, "base", val ? "vs" : "vs-dark"));
             rerender();
           }}
-          startIcon={<HistoryIcon />}
-        >Reset to default</Button>
-      </Box>
+          text="Use light theme as base"
+          tooltip={
+            <>
+              If enabled, the <code>vs</code> light theme will be used as the
+              theme base, otherwise, <code>vs-dark</code> will be used.
+            </>
+          }
+        />
+        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "fit-content", gap: 1 }}>
+          <Box>
+            <Typography variant="h6">UI</Typography>
+            <ColorEditor
+              label="Background color"
+              themePath="common.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.common.bg}
+              defaultColor={defaultMonacoTheme.common.bg}
+            />
+            <ColorEditor
+              label="Current line and minimap background color"
+              themePath="ui.line"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.line}
+              defaultColor={defaultMonacoTheme.ui.line}
+            />
+            <ColorEditor
+              label="Base text color"
+              themePath="common.fg"
+              onColorChange={onColorChange}
+              color={themeCopy.common.fg}
+              defaultColor={defaultMonacoTheme.common.fg}
+            />
+            <ColorEditor
+              label="Popup background color"
+              themePath="ui.panel.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.bg}
+              defaultColor={defaultMonacoTheme.ui.panel.bg}
+            />
+            <ColorEditor
+              label="Background color for selected item in popup"
+              themePath="ui.panel.selected"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.selected}
+              defaultColor={defaultMonacoTheme.ui.panel.selected}
+            />
+            <ColorEditor
+              label="Popup border color"
+              themePath="ui.panel.border"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.border}
+              defaultColor={defaultMonacoTheme.ui.panel.border}
+            />
+            <ColorEditor
+              label="Background color of highlighted text"
+              themePath="ui.selection.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.selection.bg}
+              defaultColor={defaultMonacoTheme.ui.selection.bg}
+            />
+          </Box>
+          <Box>
+            <Typography variant="h6">Syntax</Typography>
+            <ColorEditor
+              label="Numbers, function names, and other key vars"
+              themePath="common.accent"
+              onColorChange={onColorChange}
+              color={themeCopy.common.accent}
+              defaultColor={defaultMonacoTheme.common.accent}
+            />
+            <ColorEditor
+              label="Keywords"
+              themePath="syntax.keyword"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.keyword}
+              defaultColor={defaultMonacoTheme.syntax.keyword}
+            />
+            <ColorEditor
+              label="Strings"
+              themePath="syntax.string"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.string}
+              defaultColor={defaultMonacoTheme.syntax.string}
+            />
+            <ColorEditor
+              label="Regexp literals as well as escapes within strings"
+              themePath="syntax.regexp"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.regexp}
+              defaultColor={defaultMonacoTheme.syntax.regexp}
+            />
+            <ColorEditor
+              label="Constants"
+              themePath="syntax.constant"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.constant}
+              defaultColor={defaultMonacoTheme.syntax.constant}
+            />
+            <ColorEditor
+              label="Entities"
+              themePath="syntax.entity"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.entity}
+              defaultColor={defaultMonacoTheme.syntax.entity}
+            />
+            <ColorEditor
+              label="'this', 'ns', types, and tags"
+              themePath="syntax.tag"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.tag}
+              defaultColor={defaultMonacoTheme.syntax.tag}
+            />
+            <ColorEditor
+              label="Netscript functions and constructors"
+              themePath="syntax.markup"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.markup}
+              defaultColor={defaultMonacoTheme.syntax.markup}
+            />
+            <ColorEditor
+              label="Errors"
+              themePath="syntax.error"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.error}
+              defaultColor={defaultMonacoTheme.syntax.error}
+            />
+            <ColorEditor
+              label="Comments"
+              themePath="syntax.comment"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.comment}
+              defaultColor={defaultMonacoTheme.syntax.comment}
+            />
+          </Box>
+        </Box>
+      </Paper>
+      <Paper sx={{ p: 1 }}>
+        <TextField
+          multiline
+          fullWidth
+          maxRows={10}
+          label={"import / export theme"}
+          value={JSON.stringify(themeCopy, undefined, 2)}
+          onChange={onThemeChange}
+        />
+        <Box sx={{ mt: 1 }}>
+          <Button onClick={() => {
+            Settings.EditorTheme = { ...themeCopy };
+            props.onClose()
+          }} startIcon={<SaveIcon />}>Save</Button>
+          <Button
+            onClick={() => {
+              setThemeCopy(defaultMonacoTheme);
+              rerender();
+            }}
+            startIcon={<HistoryIcon />}
+          >Reset to default</Button>
+        </Box>
+      </Paper>
     </Modal>
   )
 }
\ No newline at end of file