diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
index f219bb3e..6de10b1a 100644
--- a/src/components/AboutDialog.tsx
+++ b/src/components/AboutDialog.tsx
@@ -37,7 +37,9 @@ class AboutDialog extends React.Component<AboutDialogProps> {
                     <p>{pybricksCopyright}</p>
                 </div>
                 <div className={Classes.DIALOG_FOOTER}>
-                    <p>{legoDisclaimer}</p>
+                    <p>
+                        <small>{legoDisclaimer}</small>
+                    </p>
                     <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                         <AnchorButton href={pybricksWebsiteUrl} target="blank_">
                             {i18n.translate(AboutStringId.WebsiteButtonLabel)}
diff --git a/src/components/SettingsDrawer.tsx b/src/components/SettingsDrawer.tsx
index 056c65ea..983cdf2d 100644
--- a/src/components/SettingsDrawer.tsx
+++ b/src/components/SettingsDrawer.tsx
@@ -1,7 +1,14 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2021 The Pybricks Authors
 
-import { Drawer, FormGroup, Position, Switch, Tooltip } from '@blueprintjs/core';
+import {
+    Classes,
+    Drawer,
+    FormGroup,
+    Position,
+    Switch,
+    Tooltip,
+} from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { connect } from 'react-redux';
@@ -15,8 +22,6 @@ import { isMacOS } from '../utils/os';
 import { SettingsStringId } from './settings-i18n';
 import en from './settings-i18n.en.json';
 
-import './settings.scss';
-
 type StateProps = {
     open: boolean;
     showDocs: boolean;
@@ -56,93 +61,97 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                 title={i18n.translate(SettingsStringId.Title)}
                 onClose={() => onClose()}
             >
-                <div className="pb-settings">
-                    <FormGroup
-                        label={i18n.translate(SettingsStringId.AppearanceTitle)}
-                        helperText={i18n.translate(
-                            SettingsStringId.AppearanceZoomHelp,
-                            {
-                                in: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}-+</span>,
-                                out: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}--</span>,
-                            },
-                        )}
-                    >
-                        <Tooltip
-                            content={i18n.translate(
-                                SettingsStringId.AppearanceDocumentationTooltip,
+                <div className={Classes.DRAWER_BODY}>
+                    <div className={Classes.DIALOG_BODY}>
+                        <FormGroup
+                            label={i18n.translate(SettingsStringId.AppearanceTitle)}
+                            helperText={i18n.translate(
+                                SettingsStringId.AppearanceZoomHelp,
+                                {
+                                    in: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}-+</span>,
+                                    out: <span>{isMacOS() ? 'Cmd' : 'Ctrl'}--</span>,
+                                },
                             )}
-                            position={Position.LEFT}
-                            targetTagName="div"
-                            hoverOpenDelay={tooltipDelay}
                         >
-                            <Switch
-                                label={i18n.translate(
-                                    SettingsStringId.AppearanceDocumentationLabel,
+                            <Tooltip
+                                content={i18n.translate(
+                                    SettingsStringId.AppearanceDocumentationTooltip,
                                 )}
-                                large={true}
-                                checked={showDocs}
-                                onChange={(e) =>
-                                    onShowDocsChanged(
-                                        (e.target as HTMLInputElement).checked,
-                                    )
-                                }
-                            />
-                        </Tooltip>
-                        <Tooltip
-                            content={i18n.translate(
-                                SettingsStringId.AppearanceDarkModeTooltip,
-                            )}
-                            position={Position.LEFT}
-                            targetTagName="div"
-                            hoverOpenDelay={tooltipDelay}
-                        >
-                            <Switch
-                                label={i18n.translate(
-                                    SettingsStringId.AppearanceDarkModeLabel,
+                                boundary="window"
+                                position={Position.LEFT}
+                                targetTagName="div"
+                                hoverOpenDelay={tooltipDelay}
+                            >
+                                <Switch
+                                    label={i18n.translate(
+                                        SettingsStringId.AppearanceDocumentationLabel,
+                                    )}
+                                    checked={showDocs}
+                                    onChange={(e) =>
+                                        onShowDocsChanged(
+                                            (e.target as HTMLInputElement).checked,
+                                        )
+                                    }
+                                />
+                            </Tooltip>
+                            <Tooltip
+                                content={i18n.translate(
+                                    SettingsStringId.AppearanceDarkModeTooltip,
                                 )}
-                                large={true}
-                                checked={darkMode}
-                                onChange={(e) =>
-                                    onDarkModeChanged(
-                                        (e.target as HTMLInputElement).checked,
-                                    )
-                                }
-                            />
-                        </Tooltip>
-                    </FormGroup>
-                    <FormGroup label={i18n.translate(SettingsStringId.FirmwareTitle)}>
-                        <Tooltip
-                            content={i18n.translate(
-                                SettingsStringId.FirmwareCurrentProgramTooltip,
-                            )}
-                            position={Position.LEFT}
-                            targetTagName="div"
-                            hoverOpenDelay={tooltipDelay}
+                                boundary="window"
+                                position={Position.LEFT}
+                                targetTagName="div"
+                                hoverOpenDelay={tooltipDelay}
+                            >
+                                <Switch
+                                    label={i18n.translate(
+                                        SettingsStringId.AppearanceDarkModeLabel,
+                                    )}
+                                    checked={darkMode}
+                                    onChange={(e) =>
+                                        onDarkModeChanged(
+                                            (e.target as HTMLInputElement).checked,
+                                        )
+                                    }
+                                />
+                            </Tooltip>
+                        </FormGroup>
+                        <FormGroup
+                            label={i18n.translate(SettingsStringId.FirmwareTitle)}
                         >
-                            <Switch
-                                label={i18n.translate(
-                                    SettingsStringId.FirmwareCurrentProgramLabel,
+                            <Tooltip
+                                content={i18n.translate(
+                                    SettingsStringId.FirmwareCurrentProgramTooltip,
                                 )}
-                                large={true}
-                                checked={flashCurrentProgram}
-                                onChange={(e) =>
-                                    onFlashCurrentProgramChanged(
-                                        (e.target as HTMLInputElement).checked,
-                                    )
-                                }
-                            />
-                        </Tooltip>
-                    </FormGroup>
-                    <FormGroup label={i18n.translate(SettingsStringId.HelpTitle)}>
-                        <a
-                            onClick={() => {
-                                onAbout();
-                                return true;
-                            }}
-                        >
-                            {i18n.translate(SettingsStringId.HelpAboutLabel)}
-                        </a>
-                    </FormGroup>
+                                boundary="window"
+                                position={Position.LEFT}
+                                targetTagName="div"
+                                hoverOpenDelay={tooltipDelay}
+                            >
+                                <Switch
+                                    label={i18n.translate(
+                                        SettingsStringId.FirmwareCurrentProgramLabel,
+                                    )}
+                                    checked={flashCurrentProgram}
+                                    onChange={(e) =>
+                                        onFlashCurrentProgramChanged(
+                                            (e.target as HTMLInputElement).checked,
+                                        )
+                                    }
+                                />
+                            </Tooltip>
+                        </FormGroup>
+                        <FormGroup label={i18n.translate(SettingsStringId.HelpTitle)}>
+                            <a
+                                onClick={() => {
+                                    onAbout();
+                                    return true;
+                                }}
+                            >
+                                {i18n.translate(SettingsStringId.HelpAboutLabel)}
+                            </a>
+                        </FormGroup>
+                    </div>
                 </div>
             </Drawer>
         );
diff --git a/src/components/settings.scss b/src/components/settings.scss
deleted file mode 100644
index 18fcfb4a..00000000
--- a/src/components/settings.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
-
-// Custom styling for the Settings* controls.
-
-.pb-settings .bp3-form-group {
-    margin: 25px;
-}
-
-.pb-settings .bp3-label {
-    font-size: 18px;
-    font-weight: bolder;
-}
-
-.pb-settings .bp3-form-helper-text {
-    font-size: 14px;
-}
-
-.pb-settings a {
-    font-size: 16px;
-}
diff --git a/src/index.scss b/src/index.scss
index b1bab40c..f20c7f1f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -36,3 +36,9 @@ body {
 .no-box-shadow {
     box-shadow: unset !important;
 }
+
+// global style tweaks
+
+.bp3-form-group > .bp3-label {
+    font-weight: bolder;
+}
diff --git a/src/variables.scss b/src/variables.scss
index 3005c042..17189444 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -6,6 +6,10 @@
 // override variables here
 // See https://blueprintjs.com/docs/#core/variables
 
+$pt-font-size: $pt-grid-size * 1.6;
+$pt-font-size-large: $pt-grid-size * 1.8;
+$pt-font-size-small: $pt-grid-size * 1.4;
+
 $pt-navbar-height: 72px;
 $pb-status-bar-height: 3vh;