diff --git a/desktop/app/src/chrome/SettingsSheet.tsx b/desktop/app/src/chrome/SettingsSheet.tsx
index 9b8fe10a4..3ba7e181c 100644
--- a/desktop/app/src/chrome/SettingsSheet.tsx
+++ b/desktop/app/src/chrome/SettingsSheet.tsx
@@ -27,6 +27,7 @@ import restartFlipper from '../utils/restartFlipper';
 import LauncherSettingsPanel from '../fb-stubs/LauncherSettingsPanel';
 import SandySettingsPanel from '../fb-stubs/SandySettingsPanel';
 import {reportUsage} from '../utils/metrics';
+import {Modal} from 'antd';
 
 const Container = styled(FlexColumn)({
   padding: 20,
@@ -41,6 +42,7 @@ const Title = styled(Text)({
 });
 
 type OwnProps = {
+  useSandy?: boolean;
   onHide: () => void;
   platform: NodeJS.Platform;
 };
@@ -88,6 +90,39 @@ class SettingsSheet extends Component<Props, State> {
     this.props.onHide();
   };
 
+  renderSandyContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
+    return (
+      <Modal
+        visible
+        onCancel={this.props.onHide}
+        width={570}
+        title="Settings"
+        footer={footer}>
+        <FlexColumn>{contents}</FlexColumn>
+      </Modal>
+    );
+  }
+
+  renderNativeContainer(
+    contents: React.ReactElement,
+    footer: React.ReactElement,
+  ) {
+    return (
+      <Container>
+        <Title>Settings</Title>
+        {contents}
+        <br />
+        <FlexRow>
+          <Spacer />
+          {footer}
+        </FlexRow>
+      </Container>
+    );
+  }
+
   render() {
     const {
       enableAndroid,
@@ -100,14 +135,14 @@ class SettingsSheet extends Component<Props, State> {
       enableSandy,
       darkMode,
     } = this.state.updatedSettings;
+    const {useSandy} = this.props;
 
     const settingsPristine =
       isEqual(this.props.settings, this.state.updatedSettings) &&
       isEqual(this.props.launcherSettings, this.state.updatedLauncherSettings);
 
-    return (
-      <Container>
-        <Title>Settings</Title>
+    const contents = (
+      <>
         <ToggledSection
           label="Android Developer"
           toggled={enableAndroid}
@@ -276,30 +311,35 @@ class SettingsSheet extends Component<Props, State> {
             }}
           />
         </ToggledSection>
-        <br />
-        <FlexRow>
-          <Spacer />
-          <Button compact padded onClick={this.props.onHide}>
-            Cancel
-          </Button>
-          <Button
-            disabled={settingsPristine}
-            compact
-            padded
-            onClick={this.applyChangesWithoutRestart}>
-            Apply
-          </Button>
-          <Button
-            disabled={settingsPristine}
-            type="primary"
-            compact
-            padded
-            onClick={this.applyChanges}>
-            Apply and Restart
-          </Button>
-        </FlexRow>
-      </Container>
+      </>
     );
+
+    const footer = (
+      <>
+        <Button compact padded onClick={this.props.onHide}>
+          Cancel
+        </Button>
+        <Button
+          disabled={settingsPristine}
+          compact
+          padded
+          onClick={this.applyChangesWithoutRestart}>
+          Apply
+        </Button>
+        <Button
+          disabled={settingsPristine}
+          type="primary"
+          compact
+          padded
+          onClick={this.applyChanges}>
+          Apply and Restart
+        </Button>
+      </>
+    );
+
+    return useSandy
+      ? this.renderSandyContainer(contents, footer)
+      : this.renderNativeContainer(contents, footer);
   }
 }
 
diff --git a/desktop/app/src/chrome/settings/ToggledSection.tsx b/desktop/app/src/chrome/settings/ToggledSection.tsx
index 64e4e6aaf..4ec60ff08 100644
--- a/desktop/app/src/chrome/settings/ToggledSection.tsx
+++ b/desktop/app/src/chrome/settings/ToggledSection.tsx
@@ -9,13 +9,14 @@
 
 import {FlexColumn, styled, FlexRow, ToggleButton} from 'flipper';
 import React from 'react';
+import {theme} from '../../sandy-chrome/theme';
 
 const IndentedSection = styled(FlexColumn)({
   paddingLeft: 50,
   paddingBottom: 10,
 });
 const GreyedOutOverlay = styled.div({
-  backgroundColor: '#EFEEEF',
+  background: theme.backgroundDefault,
   borderRadius: 4,
   opacity: 0.6,
   height: '100%',
diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx
index 4b660bc73..a803bc449 100644
--- a/desktop/app/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/app/src/sandy-chrome/LeftRail.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {cloneElement} from 'react';
+import React, {cloneElement, useState, useCallback} from 'react';
 import {styled, FlexColumn} from 'flipper';
 import {Button, Divider, Badge, Tooltip} from 'antd';
 import {
@@ -25,6 +25,7 @@ import {SidebarLeft, SidebarRight} from './SandyIcons';
 import {useDispatch, useStore} from '../utils/useStore';
 import {toggleLeftSidebarVisible} from '../reducers/application';
 import {theme} from './theme';
+import SettingsSheet from '../chrome/SettingsSheet';
 
 const LeftRailContainer = styled(FlexColumn)({
   background: theme.backgroundDefault,
@@ -62,7 +63,7 @@ function LeftRailButton({
   icon?: React.ReactElement;
   small?: boolean;
   toggled?: boolean;
-  selected?: boolean;
+  selected?: boolean; // TODO: make sure only one element can be selected
   count?: number;
   title: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
@@ -123,7 +124,7 @@ export function LeftRail() {
           small
           title="Help / Start Screen"
         />
-        <LeftRailButton icon={<SettingOutlined />} small title="Settings" />
+        <ShowSettingsButton />
         <LeftRailButton
           icon={<BugOutlined />}
           small
@@ -160,3 +161,22 @@ function LeftSidebarToggleButton() {
     />
   );
 }
+
+function ShowSettingsButton() {
+  const [showSettings, setShowSettings] = useState(false);
+  const onClose = useCallback(() => setShowSettings(false), []);
+  return (
+    <>
+      <LeftRailButton
+        icon={<SettingOutlined />}
+        small
+        title="Settings"
+        onClick={() => setShowSettings(true)}
+        selected={showSettings}
+      />
+      {showSettings && (
+        <SettingsSheet platform={process.platform} onHide={onClose} useSandy />
+      )}
+    </>
+  );
+}
diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index 2a3f99be7..f3509376e 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/desktop/app/src/sandy-chrome/SandyApp.tsx
@@ -39,7 +39,9 @@ export function SandyApp({logger}: {logger: Logger}) {
         <LeftMenu collapsed={!mainMenuVisible}>
           <LeftRail />
           {mainMenuVisible && (
-            <div style={{background: 'white', width: '100%'}}>LeftMenu</div>
+            <div style={{background: theme.backgroundDefault, width: '100%'}}>
+              LeftMenu
+            </div>
           )}
         </LeftMenu>
         <MainContainer>
diff --git a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
index bee4b0e67..ad9862336 100644
--- a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
+++ b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx
@@ -8,10 +8,7 @@
  */
 
 import React from 'react';
-import {updateSettings} from '../reducers/settings';
 import {styled, colors} from 'flipper';
-import {Button, Space} from 'antd';
-import {CloseCircleOutlined} from '@ant-design/icons';
 import FpsGraph from '../chrome/FpsGraph';
 import NetworkGraph from '../chrome/NetworkGraph';
 import isProduction from '../utils/isProduction';
@@ -20,7 +17,7 @@ import AutoUpdateVersion from '../chrome/AutoUpdateVersion';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import RatingButton from '../chrome/RatingButton';
 import {Version} from '../chrome/TitleBar';
-import {useDispatch, useStore} from '../utils/useStore';
+import {useStore} from '../utils/useStore';
 import config from '../fb-stubs/config';
 import {remote} from 'electron';
 
@@ -51,21 +48,12 @@ const TemporarilyTitlebarContainer = styled('div')<{focused?: boolean}>(
 // This component should be dropped, and insetTitlebar should be removed from Electron startup once Sandy is the default
 // But: figure out where to put the graphs, version numbers, flipper rating ets :)
 export function TemporarilyTitlebar() {
-  const dispatch = useDispatch();
-  const settings = useStore((state) => state.settingsState);
   const launcherMsg = useStore((state) => state.application.launcherMsg);
   const isFocused = useStore((state) => state.application.windowIsFocused);
 
   return (
     <TemporarilyTitlebarContainer focused={isFocused}>
       [Sandy] Flipper{' '}
-      <Button
-        size="small"
-        type="link"
-        icon={<CloseCircleOutlined />}
-        onClick={() =>
-          dispatch(updateSettings({...settings, enableSandy: false}))
-        }></Button>
       {!isProduction() && <NetworkGraph height={20} width={60} />}
       {!isProduction() && <FpsGraph height={20} width={60} />}
       {config.showFlipperRating ? <RatingButton /> : null}