diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 1b881e001dc0..9f23bff592dd 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -58,7 +58,6 @@ import { when } from '../../../utils/react-conditionals'
 import { useColorTheme, UtopiaStyles } from '../../../uuiui'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { Substores, useEditorState, useRefEditorState } from '../../editor/store/store-hook'
-import { useRollYourOwnFeatures } from '../../navigator/left-pane/roll-your-own-pane'
 import CanvasActions from '../canvas-actions'
 import type { ControlWithProps } from '../canvas-strategies/canvas-strategy-types'
 import { controlForStrategyMemoized } from '../canvas-strategies/canvas-strategy-types'
diff --git a/editor/src/components/canvas/design-panel-root.tsx b/editor/src/components/canvas/design-panel-root.tsx
index 5852f12f0e23..13d381968d01 100644
--- a/editor/src/components/canvas/design-panel-root.tsx
+++ b/editor/src/components/canvas/design-panel-root.tsx
@@ -35,8 +35,6 @@ import { EditorModes, isCommentMode } from '../editor/editor-modes'
 import { useAllowedToEditProject } from '../editor/store/collaborative-editing'
 import { useCanComment } from '../../core/commenting/comment-hooks'
 import { ElementsOutsideVisibleAreaIndicator } from '../editor/elements-outside-visible-area-indicator'
-import { isFeatureEnabled } from '../../utils/feature-switches'
-import { RollYourOwnFeaturesPane } from '../navigator/left-pane/roll-your-own-pane'
 import { AnimationContext } from './ui-jsx-canvas-renderer/animation-context'
 
 function isCodeEditorEnabled(): boolean {
@@ -163,10 +161,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
     onClickTab(RightMenuTab.Settings)
   }, [onClickTab])
 
-  const onClickRollYourOwnTab = React.useCallback(() => {
-    onClickTab(RightMenuTab.RollYourOwn)
-  }, [onClickTab])
-
   const canComment = useCanComment()
 
   const allowedToEdit = useAllowedToEditProject()
@@ -235,14 +229,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
             selected={selectedTab === RightMenuTab.Settings}
             onClick={onClickSettingsTab}
           />
-          {when(
-            isFeatureEnabled('Roll Your Own'),
-            <MenuTab
-              label={'RYO'}
-              selected={selectedTab === RightMenuTab.RollYourOwn}
-              onClick={onClickRollYourOwnTab}
-            />,
-          )}
         </FlexRow>
         <SimpleFlexRow
           className='Inspector-entrypoint'
@@ -260,7 +246,6 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           {when(selectedTab === RightMenuTab.Inspector, <InspectorEntryPoint />)}
           {when(selectedTab === RightMenuTab.Settings, <SettingsPane />)}
           {when(selectedTab === RightMenuTab.Comments, <CommentsPane />)}
-          {when(selectedTab === RightMenuTab.RollYourOwn, <RollYourOwnFeaturesPane />)}
         </SimpleFlexRow>
         <CanvasStrategyInspector />
       </FlexColumn>
diff --git a/editor/src/components/editor/store/editor-state.ts b/editor/src/components/editor/store/editor-state.ts
index 1e83b99dda2f..6f4b09dd4bb9 100644
--- a/editor/src/components/editor/store/editor-state.ts
+++ b/editor/src/components/editor/store/editor-state.ts
@@ -214,7 +214,6 @@ export enum RightMenuTab {
   Inspector = 'inspector',
   Settings = 'settings',
   Comments = 'comments',
-  RollYourOwn = 'roll-your-own',
 }
 
 // TODO: this should just contain an NpmDependency and a status
diff --git a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx b/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
deleted file mode 100644
index 08b1df58930f..000000000000
--- a/editor/src/components/navigator/left-pane/roll-your-own-pane.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import React from 'react'
-import { Button, FlexColumn, FlexRow, Section } from '../../../uuiui'
-import { when } from '../../../utils/react-conditionals'
-import { atom, useAtom, useSetAtom } from 'jotai'
-import { UIGridRow } from '../../inspector/widgets/ui-grid-row'
-import { atomWithStorage } from 'jotai/utils'
-import { IS_TEST_ENVIRONMENT } from '../../../common/env-vars'
-import { Ellipsis } from './github-pane/github-file-changes-list'
-import { deleteParseCache } from '../../../core/shared/parse-cache-utils'
-import { useRefEditorState } from '../../../components/editor/store/store-hook'
-import type { FeatureName } from '../../../utils/feature-switches'
-import { isFeatureEnabled, setFeatureEnabled } from '../../../utils/feature-switches'
-import { getParseCacheVersion } from '../../../core/workers/parser-printer/parse-cache-utils.worker'
-
-const sections = ['Performance'] as const
-type Section = (typeof sections)[number]
-
-type PerformanceFeatures = {
-  parseCache: boolean
-  parallelParsing: boolean
-  cacheArbitraryCode: boolean
-  verboseLogCache: boolean
-  logParseTimings: boolean
-}
-
-type RollYourOwnFeaturesTypes = {
-  Performance: PerformanceFeatures
-}
-
-type RollYourOwnFeatures = {
-  [K in Section]: RollYourOwnFeaturesTypes[K]
-}
-
-const featureToFeatureFlagMap: Record<keyof Partial<PerformanceFeatures>, FeatureName> = {
-  parseCache: 'Use Parsing Cache',
-  verboseLogCache: 'Verbose Log Cache',
-  cacheArbitraryCode: 'Arbitrary Code Cache',
-  parallelParsing: 'Parallel Parsing',
-  logParseTimings: 'Log Parse Timings',
-}
-
-const defaultRollYourOwnFeatures: () => RollYourOwnFeatures = () => ({
-  Performance: {
-    parseCache: getFeatureFlagValue('parseCache'),
-    parallelParsing: getFeatureFlagValue('parallelParsing'),
-    cacheArbitraryCode: getFeatureFlagValue('cacheArbitraryCode'),
-    logParseTimings: getFeatureFlagValue('logParseTimings'),
-    verboseLogCache: getFeatureFlagValue('verboseLogCache'),
-  },
-})
-
-const ROLL_YOUR_OWN_FEATURES_KEY: string = 'roll-your-own-features'
-
-let rollYourOwnFeaturesAtom:
-  | ReturnType<typeof atom<RollYourOwnFeatures>>
-  | ReturnType<typeof atomWithStorage<RollYourOwnFeatures>>
-  | null = null
-
-function getRollYourOwnFeaturesAtom() {
-  if (rollYourOwnFeaturesAtom == null) {
-    rollYourOwnFeaturesAtom = IS_TEST_ENVIRONMENT
-      ? atom(defaultRollYourOwnFeatures())
-      : atomWithStorage(ROLL_YOUR_OWN_FEATURES_KEY, defaultRollYourOwnFeatures())
-  }
-  return rollYourOwnFeaturesAtom
-}
-
-export function useRollYourOwnFeatures() {
-  const [features] = useAtom(getRollYourOwnFeaturesAtom())
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  const merged: RollYourOwnFeatures = {
-    Performance: {
-      ...defaultFeatures.Performance,
-      ...syncWithFeatureFlags(features.Performance),
-    },
-  }
-  return merged
-}
-
-export const RollYourOwnFeaturesPane = React.memo(() => {
-  const [currentSection, setCurrentSection] = React.useState<Section | null>(null)
-
-  const onChangeSection = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    const maybeSectionValue = e.target.value as Section
-    if (sections.includes(maybeSectionValue)) {
-      setCurrentSection(maybeSectionValue)
-    } else {
-      setCurrentSection(null)
-    }
-  }, [])
-
-  return (
-    <FlexColumn
-      id='leftPaneRollYourOwn'
-      key='leftPaneRollYourOwn'
-      style={{
-        display: 'relative',
-        alignItems: 'stretch',
-        paddingBottom: 50,
-        overflowY: 'scroll',
-        alignSelf: 'stretch',
-      }}
-    >
-      <Section>
-        <FlexRow
-          style={{
-            margin: 8,
-            gap: 12,
-            height: 22,
-          }}
-        >
-          <span style={{ fontWeight: 600 }}>Roll Your Own</span>
-        </FlexRow>
-        <FlexRow style={{ gap: 12, margin: 8 }}>
-          <select
-            value={currentSection ?? undefined}
-            style={{ flex: 1 }}
-            onChange={onChangeSection}
-          >
-            <option value=''>–</option>
-            {sections.map((section) => {
-              return (
-                <option key={`section-${section}`} value={section}>
-                  {section}
-                </option>
-              )
-            })}
-          </select>
-        </FlexRow>
-
-        {when(currentSection === 'Performance', <PerformanceSection />)}
-      </Section>
-    </FlexColumn>
-  )
-})
-RollYourOwnFeaturesPane.displayName = 'RollYourOwnFeaturesPane'
-
-function getNewFeatureValueOrNull(currentValue: any, e: React.ChangeEvent<HTMLInputElement>) {
-  switch (typeof currentValue) {
-    case 'boolean':
-      return e.target.checked
-    case 'string':
-      return e.target.value
-    case 'number':
-      return parseFloat(e.target.value)
-    default:
-      return null
-  }
-}
-
-/** PERFORMANCE SECTION */
-const PerformanceSection = React.memo(() => {
-  const workersRef = useRefEditorState((store) => {
-    return store.workers
-  })
-  const handleDeleteParseCache = React.useCallback(() => {
-    deleteParseCache(workersRef.current)
-  }, [workersRef])
-  return (
-    <FlexColumn style={{ gap: 10 }}>
-      <SimpleFeatureControls subsection='Performance' />
-      <UIGridRow padded variant='<--1fr--><--1fr-->' key={`feat-cache-version`}>
-        <Ellipsis title='Cache Version'>Cache Version</Ellipsis>
-        <Ellipsis title={getParseCacheVersion()}>{getParseCacheVersion()}</Ellipsis>
-      </UIGridRow>
-      <UIGridRow padded variant='<-------------1fr------------->'>
-        <Button highlight spotlight onClick={handleDeleteParseCache}>
-          Clear cache
-        </Button>
-      </UIGridRow>
-    </FlexColumn>
-  )
-})
-PerformanceSection.displayName = 'PerformanceSection'
-
-/** GENERAL COMPONENTS */
-
-const ResetDefaultsButton = React.memo(({ subsection }: { subsection: Section }) => {
-  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  const resetDefaults = React.useCallback(() => {
-    setFeatures((prevFeatures) => ({
-      ...prevFeatures,
-      [subsection]: defaultFeatures[subsection],
-    }))
-  }, [defaultFeatures, setFeatures, subsection])
-  return (
-    <UIGridRow padded variant='<-------------1fr------------->'>
-      <Button highlight spotlight onClick={resetDefaults}>
-        Reset defaults
-      </Button>
-    </UIGridRow>
-  )
-})
-ResetDefaultsButton.displayName = 'ResetDefaultsButton'
-
-const SimpleFeatureControls = React.memo(({ subsection }: { subsection: Section }) => {
-  const features = useRollYourOwnFeatures()
-  const setFeatures = useSetAtom(getRollYourOwnFeaturesAtom())
-  const onChange = React.useCallback(
-    (feat: keyof RollYourOwnFeaturesTypes[Section]) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = getNewFeatureValueOrNull(features[subsection][feat], e)
-      if (newValue != null) {
-        setFeatures({
-          ...features,
-          [subsection]: {
-            ...features[subsection],
-            [feat]: newValue,
-          },
-        })
-        if (typeof newValue === 'boolean') {
-          syncFeatureFlagIfExists(feat, newValue)
-        }
-      }
-    },
-    [features, setFeatures, subsection],
-  )
-  const defaultFeatures = defaultRollYourOwnFeatures()
-  return (
-    <React.Fragment>
-      {Object.keys(defaultFeatures[subsection]).map((key) => {
-        const feat = key as keyof RollYourOwnFeaturesTypes[Section]
-        const featName = Object.keys(featureToFeatureFlagMap).includes(
-          feat as keyof typeof featureToFeatureFlagMap,
-        )
-          ? featureToFeatureFlagMap[feat as keyof typeof featureToFeatureFlagMap]
-          : feat
-        const value = features[subsection][feat] ?? defaultFeatures[subsection][feat]
-        return (
-          <UIGridRow padded variant='<----------1fr---------><-auto->' key={`feat-${feat}`}>
-            <Ellipsis title={featName}>{featName}</Ellipsis>
-            {typeof value === 'boolean' ? (
-              <input type='checkbox' checked={value} onChange={onChange(feat)} />
-            ) : typeof value === 'string' ? (
-              <input type='text' value={value} onChange={onChange(feat)} />
-            ) : typeof value === 'number' ? (
-              <input type='number' value={value} onChange={onChange(feat)} />
-            ) : null}
-          </UIGridRow>
-        )
-      })}
-    </React.Fragment>
-  )
-})
-SimpleFeatureControls.displayName = 'SimpleFeatureControls'
-
-function getFeatureFlagValue(featureName: keyof typeof featureToFeatureFlagMap): boolean {
-  const featureFlag = featureToFeatureFlagMap[featureName]
-  return isFeatureEnabled(featureFlag)
-}
-
-function syncFeatureFlagIfExists(
-  featureName: keyof typeof featureToFeatureFlagMap,
-  value: boolean,
-) {
-  const featureFlag = featureToFeatureFlagMap[featureName]
-  if (featureFlag == null) {
-    return
-  }
-  setFeatureEnabled(featureFlag, value)
-}
-
-function syncWithFeatureFlags(features: Record<string, any> | undefined) {
-  if (features == null) {
-    return {}
-  }
-  return Object.fromEntries(
-    Object.entries(features).map(([key, value]) => {
-      if (typeof value === 'boolean' && key in featureToFeatureFlagMap) {
-        return [key, getFeatureFlagValue(key as keyof typeof featureToFeatureFlagMap)]
-      }
-      return [key, value]
-    }),
-  )
-}
diff --git a/editor/src/components/navigator/left-pane/settings-pane.tsx b/editor/src/components/navigator/left-pane/settings-pane.tsx
index 90a22afbac08..76741a0993c3 100644
--- a/editor/src/components/navigator/left-pane/settings-pane.tsx
+++ b/editor/src/components/navigator/left-pane/settings-pane.tsx
@@ -27,8 +27,7 @@ import type { FeatureName } from '../../../utils/feature-switches'
 import {
   toggleFeatureEnabled,
   isFeatureEnabled,
-  AllFeatureNames,
-  FeaturesHiddenFromMainSettingsPane,
+  getFeaturesToDisplay,
 } from '../../../utils/feature-switches'
 import json5 from 'json5'
 import { load } from '../../../components/editor/actions/actions'
@@ -60,10 +59,11 @@ const themeOptions = [
 const defaultTheme = themeOptions[0]
 
 export const FeatureSwitchesSection = React.memo(() => {
-  const featuresToDisplay = React.useMemo(
-    () => AllFeatureNames.filter((name) => !FeaturesHiddenFromMainSettingsPane.includes(name)),
-    [],
-  )
+  const [changeCount, setChangeCount] = React.useState(0)
+  // this replaces the 'forceRender' in the original implementation
+  const onFeatureChange = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const featuresToDisplay = React.useMemo(() => getFeaturesToDisplay(), [changeCount])
   if (featuresToDisplay.length > 0) {
     return (
       <Section>
@@ -71,7 +71,11 @@ export const FeatureSwitchesSection = React.memo(() => {
           <H2>Experimental Toggle Features</H2>
         </UIGridRow>
         {featuresToDisplay.map((name) => (
-          <FeatureSwitchRow key={`feature-switch-${name}`} name={name} />
+          <FeatureSwitchRow
+            key={`feature-switch-${name}`}
+            name={name}
+            onFeatureChange={onFeatureChange}
+          />
         ))}
       </Section>
     )
@@ -80,15 +84,14 @@ export const FeatureSwitchesSection = React.memo(() => {
   }
 })
 
-const FeatureSwitchRow = React.memo((props: { name: FeatureName }) => {
+const FeatureSwitchRow = React.memo((props: { name: FeatureName; onFeatureChange: () => void }) => {
   const name = props.name
+  const onFeatureChange = props.onFeatureChange
   const id = `toggle-${name}`
-  const [changeCount, setChangeCount] = React.useState(0)
-  const forceRender = React.useCallback(() => setChangeCount(changeCount + 1), [changeCount])
   const onChange = React.useCallback(() => {
     toggleFeatureEnabled(name)
-    forceRender()
-  }, [forceRender, name])
+    onFeatureChange()
+  }, [name, onFeatureChange])
   return (
     <FlexRow style={{ paddingLeft: 16, height: UtopiaTheme.layout.rowHeight.normal }}>
       <CheckboxInput
diff --git a/editor/src/core/shared/parse-cache-utils.ts b/editor/src/core/shared/parse-cache-utils.ts
index 3bb102961280..c20d4015e59e 100644
--- a/editor/src/core/shared/parse-cache-utils.ts
+++ b/editor/src/core/shared/parse-cache-utils.ts
@@ -12,11 +12,11 @@ function isParseCacheEnabled(): boolean {
 }
 
 function isVerboseLogCacheEnabled(): boolean {
-  return isFeatureEnabled('Verbose Log Cache')
+  return isFeatureEnabled('Debug - Verbose Log Cache')
 }
 
 function isArbitraryCodeCacheEnabled(): boolean {
-  return isFeatureEnabled('Arbitrary Code Cache')
+  return isFeatureEnabled('Debug - Arbitrary Code Cache')
 }
 
 export function getParseCacheOptions(): ParseCacheOptions {
diff --git a/editor/src/core/workers/common/concurrency-utils.ts b/editor/src/core/workers/common/concurrency-utils.ts
index c8d5e015e22d..d9a88ebedfe8 100644
--- a/editor/src/core/workers/common/concurrency-utils.ts
+++ b/editor/src/core/workers/common/concurrency-utils.ts
@@ -3,7 +3,7 @@ import { isFeatureEnabled } from '../../../utils/feature-switches'
 // TODO: this will be configurable from the RYO menu
 export const PARSE_CONCURRENCY = 3
 const PARSER_CONCURRENCY_FEATURE = 'Parallel Parsing'
-const LOG_CONCURRENCY_TIMINGS_FEATURE = 'Log Parse Timings'
+const LOG_CONCURRENCY_TIMINGS_FEATURE = 'Debug - Log Parse Timings'
 
 export function isConcurrencyEnabled() {
   return isFeatureEnabled(PARSER_CONCURRENCY_FEATURE)
diff --git a/editor/src/utils/feature-switches.ts b/editor/src/utils/feature-switches.ts
index 31674c965b38..7ea53ffa2188 100644
--- a/editor/src/utils/feature-switches.ts
+++ b/editor/src/utils/feature-switches.ts
@@ -15,36 +15,36 @@ export type FeatureName =
   | 'Debug - Print UIDs'
   | 'Debug – Connections'
   | 'Parallel Parsing'
-  | 'Log Parse Timings'
+  | 'Debug - Log Parse Timings'
   | 'Condensed Navigator Entries'
   | 'Use Parsing Cache'
-  | 'Verbose Log Cache'
-  | 'Arbitrary Code Cache'
+  | 'Debug - Verbose Log Cache'
+  | 'Debug - Arbitrary Code Cache'
   | 'Canvas Fast Selection Hack'
-  | 'Roll Your Own'
   | 'Tailwind'
+  | 'Show Debug Features'
 
 export const AllFeatureNames: FeatureName[] = [
   // 'Dragging Reparents By Default', // Removing this option so that we can experiment on this later
   // 'Dragging Shows Overlay', // Removing this option so that we can experiment on this later
+  'Show Debug Features',
   'Debug – Redux Devtools',
   'Debug – Performance Marks (Slow)',
   'Debug – Performance Marks (Fast)',
   'Debug – Measure Selectors',
+  'Debug – Connections',
+  'Debug - Log Parse Timings',
+  'Debug - Verbose Log Cache',
+  'Debug - Arbitrary Code Cache',
+  'Debug - Print UIDs',
   'Re-parse Project Button',
   'Performance Test Triggers',
   'Canvas Strategies Debug Panel',
   'Project Thumbnail Generation',
-  'Debug - Print UIDs',
-  'Debug – Connections',
   'Parallel Parsing',
-  'Log Parse Timings',
-  'Condensed Navigator Entries',
   'Use Parsing Cache',
-  'Verbose Log Cache',
-  'Arbitrary Code Cache',
+  'Condensed Navigator Entries',
   'Canvas Fast Selection Hack',
-  'Roll Your Own',
   'Tailwind',
 ]
 
@@ -53,32 +53,24 @@ let FeatureSwitches: { [feature in FeatureName]: boolean } = {
   'Debug – Performance Marks (Slow)': false,
   'Debug – Performance Marks (Fast)': false,
   'Debug – Measure Selectors': false,
+  'Debug – Connections': false,
+  'Debug - Verbose Log Cache': false,
+  'Debug - Arbitrary Code Cache': false,
   'Dragging Reparents By Default': false,
   'Re-parse Project Button': !(PRODUCTION_CONFIG as boolean),
   'Performance Test Triggers': !(PRODUCTION_CONFIG as boolean),
   'Canvas Strategies Debug Panel': false,
   'Project Thumbnail Generation': false,
   'Debug - Print UIDs': false,
-  'Debug – Connections': false,
   'Parallel Parsing': !IS_TEST_ENVIRONMENT,
-  'Log Parse Timings': false,
+  'Debug - Log Parse Timings': false,
   Tailwind: false,
   'Condensed Navigator Entries': !IS_TEST_ENVIRONMENT,
   'Use Parsing Cache': !IS_TEST_ENVIRONMENT,
-  'Verbose Log Cache': false,
-  'Arbitrary Code Cache': false,
   'Canvas Fast Selection Hack': true,
-  'Roll Your Own': false,
+  'Show Debug Features': false,
 }
 
-export const FeaturesHiddenFromMainSettingsPane: FeatureName[] = [
-  'Use Parsing Cache',
-  'Verbose Log Cache',
-  'Arbitrary Code Cache',
-  'Parallel Parsing',
-  'Log Parse Timings',
-]
-
 export const STEGANOGRAPHY_ENABLED = false
 
 let FeatureSwitchLoaded: { [feature in FeatureName]?: boolean } = {}
@@ -141,12 +133,13 @@ export function isFeatureEnabled(featureName: FeatureName): boolean {
   return FeatureSwitches[featureName] ?? false
 }
 
-export function toggleFeatureEnabled(featureName: FeatureName): void {
+export function toggleFeatureEnabled(featureName: FeatureName): boolean {
   const newValue = !isFeatureEnabled(featureName)
   FeatureSwitches[featureName] = newValue
   if (isBrowserEnvironment) {
     void localforage.setItem(settingKeyForName(featureName), newValue)
   }
+  return newValue
 }
 
 export function setFeatureEnabled(featureName: FeatureName, newValue: boolean): void {
@@ -155,3 +148,11 @@ export function setFeatureEnabled(featureName: FeatureName, newValue: boolean):
     void localforage.setItem(settingKeyForName(featureName), newValue)
   }
 }
+
+export function getFeaturesToDisplay(): FeatureName[] {
+  if (isFeatureEnabled('Show Debug Features')) {
+    return AllFeatureNames
+  } else {
+    return AllFeatureNames.filter((name) => !name.startsWith('Debug'))
+  }
+}