diff --git a/.changeset/plenty-poets-nail.md b/.changeset/plenty-poets-nail.md
new file mode 100644
index 00000000..f6fcdacc
--- /dev/null
+++ b/.changeset/plenty-poets-nail.md
@@ -0,0 +1,8 @@
+---
+'playroom': patch
+---
+
+Move Title setting from Settings Panel to Frame Panel to group current playroom settings together and improve discoverability.
+
+Now, all settings that affect the current playroom tab live in the Frame Panel.
+Settings affecting all playroom tabs live in the Settings Panel.
diff --git a/src/Playroom/FramesPanel/FramesPanel.css.ts b/src/Playroom/FramesPanel/FramesPanel.css.ts
index 56381632..babbd4f8 100644
--- a/src/Playroom/FramesPanel/FramesPanel.css.ts
+++ b/src/Playroom/FramesPanel/FramesPanel.css.ts
@@ -144,3 +144,22 @@ globalStyle(`${checkbox}:checked ~ ${fakeCheckbox} > svg `, {
   transform: 'none',
   transition: vars.transition.fast,
 });
+
+export const textField = style([
+  sprinkles({
+    font: 'large',
+    width: 'full',
+    paddingX: 'large',
+    boxSizing: 'border-box',
+    borderRadius: 'medium',
+  }),
+  {
+    color: colorPaletteVars.foreground.neutral,
+    height: vars.touchableSize,
+    background: colorPaletteVars.background.surface,
+    '::placeholder': {
+      color: colorPaletteVars.foreground.neutralSoft,
+    },
+    border: `1px solid ${colorPaletteVars.border.standard}`,
+  },
+]);
diff --git a/src/Playroom/FramesPanel/FramesPanel.tsx b/src/Playroom/FramesPanel/FramesPanel.tsx
index f0fdd385..9c1319e3 100644
--- a/src/Playroom/FramesPanel/FramesPanel.tsx
+++ b/src/Playroom/FramesPanel/FramesPanel.tsx
@@ -7,6 +7,21 @@ import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
 
 import * as styles from './FramesPanel.css';
+import { Helmet } from 'react-helmet';
+
+const getTitle = (title: string | undefined) => {
+  if (title) {
+    return `${title} | Playroom`;
+  }
+
+  const configTitle = window?.__playroomConfig__.title;
+
+  if (configTitle) {
+    return `${configTitle} | Playroom`;
+  }
+
+  return 'Playroom';
+};
 
 interface FramesPanelProps {
   availableWidths: number[];
@@ -77,7 +92,7 @@ function FrameOption<Option>({
 }
 
 export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
-  const [{ visibleWidths = [], visibleThemes = [] }, dispatch] =
+  const [{ visibleWidths = [], visibleThemes = [], title }, dispatch] =
     useContext(StoreContext);
   const hasThemes =
     availableThemes.filter(
@@ -88,69 +103,97 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
   const hasFilteredThemes =
     visibleThemes.length > 0 && visibleThemes.length <= availableThemes.length;
 
+  const displayedTitle = getTitle(title);
+
   return (
-    <ToolbarPanel data-testid="frame-panel">
-      <Stack space="xxxlarge">
-        <div data-testid="widthsPreferences">
-          <FrameHeading
-            showReset={hasFilteredWidths}
-            onReset={() => dispatch({ type: 'resetVisibleWidths' })}
-          >
-            Widths
-          </FrameHeading>
-
-          {availableWidths.map((option) => (
-            <FrameOption
-              key={option}
-              option={option}
-              selected={hasFilteredWidths && visibleWidths.includes(option)}
-              visible={visibleWidths}
-              available={availableWidths}
-              onChange={(newWidths) => {
-                if (newWidths) {
+    <>
+      {title === undefined ? null : (
+        <Helmet>
+          <title>{displayedTitle}</title>
+        </Helmet>
+      )}
+      <ToolbarPanel data-testid="frame-panel">
+        <Stack space="xxxlarge">
+          <label>
+            <Stack space="medium">
+              <Heading level="3">Title</Heading>
+              <input
+                type="text"
+                id="playroomTitleField"
+                placeholder="Enter a title for this Playroom..."
+                className={styles.textField}
+                value={title}
+                onChange={(e) =>
                   dispatch({
-                    type: 'updateVisibleWidths',
-                    payload: { widths: newWidths },
-                  });
-                } else {
-                  dispatch({ type: 'resetVisibleWidths' });
+                    type: 'updateTitle',
+                    payload: { title: e.target.value },
+                  })
                 }
-              }}
-            />
-          ))}
-        </div>
+              />
+            </Stack>
+          </label>
 
-        {hasThemes ? (
-          <div data-testid="themePreferences">
+          <div data-testid="widthsPreferences">
             <FrameHeading
-              showReset={hasFilteredThemes}
-              onReset={() => dispatch({ type: 'resetVisibleThemes' })}
+              showReset={hasFilteredWidths}
+              onReset={() => dispatch({ type: 'resetVisibleWidths' })}
             >
-              Themes
+              Widths
             </FrameHeading>
 
-            {availableThemes.map((option) => (
+            {availableWidths.map((option) => (
               <FrameOption
                 key={option}
                 option={option}
-                selected={hasFilteredThemes && visibleThemes.includes(option)}
-                visible={visibleThemes}
-                available={availableThemes}
-                onChange={(newThemes) => {
-                  if (newThemes) {
+                selected={hasFilteredWidths && visibleWidths.includes(option)}
+                visible={visibleWidths}
+                available={availableWidths}
+                onChange={(newWidths) => {
+                  if (newWidths) {
                     dispatch({
-                      type: 'updateVisibleThemes',
-                      payload: { themes: newThemes },
+                      type: 'updateVisibleWidths',
+                      payload: { widths: newWidths },
                     });
                   } else {
-                    dispatch({ type: 'resetVisibleThemes' });
+                    dispatch({ type: 'resetVisibleWidths' });
                   }
                 }}
               />
             ))}
           </div>
-        ) : null}
-      </Stack>
-    </ToolbarPanel>
+
+          {hasThemes ? (
+            <div data-testid="themePreferences">
+              <FrameHeading
+                showReset={hasFilteredThemes}
+                onReset={() => dispatch({ type: 'resetVisibleThemes' })}
+              >
+                Themes
+              </FrameHeading>
+
+              {availableThemes.map((option) => (
+                <FrameOption
+                  key={option}
+                  option={option}
+                  selected={hasFilteredThemes && visibleThemes.includes(option)}
+                  visible={visibleThemes}
+                  available={availableThemes}
+                  onChange={(newThemes) => {
+                    if (newThemes) {
+                      dispatch({
+                        type: 'updateVisibleThemes',
+                        payload: { themes: newThemes },
+                      });
+                    } else {
+                      dispatch({ type: 'resetVisibleThemes' });
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          ) : null}
+        </Stack>
+      </ToolbarPanel>
+    </>
   );
 };
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.css.ts b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
index e32e0569..ac3811b2 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.css.ts
+++ b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
@@ -98,22 +98,3 @@ export const label = style([
     },
   },
 ]);
-
-export const textField = style([
-  sprinkles({
-    font: 'large',
-    width: 'full',
-    paddingX: 'large',
-    boxSizing: 'border-box',
-    borderRadius: 'medium',
-  }),
-  {
-    color: colorPaletteVars.foreground.neutral,
-    height: vars.touchableSize,
-    background: colorPaletteVars.background.surface,
-    '::placeholder': {
-      color: colorPaletteVars.foreground.neutralSoft,
-    },
-    border: `1px solid ${colorPaletteVars.border.standard}`,
-  },
-]);
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.tsx b/src/Playroom/SettingsPanel/SettingsPanel.tsx
index 40903ada..186b898b 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.tsx
+++ b/src/Playroom/SettingsPanel/SettingsPanel.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, type ReactChild } from 'react';
-import { Helmet } from 'react-helmet';
 import { Heading } from '../Heading/Heading';
 import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import {
@@ -77,144 +76,101 @@ const KeyboardShortcut = ({
   );
 };
 
-const getTitle = (title: string | undefined) => {
-  if (title) {
-    return `${title} | Playroom`;
-  }
-
-  const configTitle = window?.__playroomConfig__.title;
-
-  if (configTitle) {
-    return `${configTitle} | Playroom`;
-  }
-
-  return 'Playroom';
-};
-
 export default React.memo(() => {
-  const [{ editorPosition, colorScheme, title }, dispatch] =
-    useContext(StoreContext);
+  const [{ editorPosition, colorScheme }, dispatch] = useContext(StoreContext);
 
   const keybindings = getKeyBindings();
 
-  const displayedTitle = getTitle(title);
-
   return (
-    <>
-      {title === undefined ? null : (
-        <Helmet>
-          <title>{displayedTitle}</title>
-        </Helmet>
-      )}
-      <ToolbarPanel data-testid="settings-panel">
-        <Stack space="xxxlarge">
-          <label>
-            <Stack space="medium">
-              <Heading level="3">Title</Heading>
-              <input
-                type="text"
-                id="playroomTitleField"
-                placeholder="Enter a title for this Playroom..."
-                className={styles.textField}
-                value={title}
-                onChange={(e) =>
-                  dispatch({
-                    type: 'updateTitle',
-                    payload: { title: e.target.value },
-                  })
-                }
-              />
-            </Stack>
-          </label>
-
-          <fieldset className={styles.fieldset}>
-            <legend>
-              <Heading level="3">Editor Position</Heading>
-            </legend>
-            <div className={styles.radioContainer}>
-              {['Bottom', 'Right'].map((option) => (
-                <div key={option}>
-                  <input
-                    type="radio"
-                    name="editorPosition"
-                    id={`editorPosition${option}`}
-                    value={option.toLowerCase()}
-                    title={option}
-                    checked={option.toLowerCase() === editorPosition}
-                    onChange={() =>
-                      dispatch({
-                        type: 'updateEditorPosition',
-                        payload: {
-                          position: option.toLowerCase() as EditorPosition,
-                        },
-                      })
-                    }
-                    className={styles.realRadio}
-                  />
-                  <label
-                    htmlFor={`editorPosition${option}`}
-                    className={styles.label}
-                    title={option}
-                  >
-                    <span className={styles.labelText}>
-                      {positionIcon[option.toLowerCase() as EditorPosition]}
-                    </span>
-                  </label>
-                </div>
-              ))}
-            </div>
-          </fieldset>
-
-          <fieldset className={styles.fieldset}>
-            <legend>
-              <Heading level="3">Color Scheme</Heading>
-            </legend>
-            <div className={styles.radioContainer}>
-              {['Light', 'Dark', 'System'].map((option) => (
-                <div key={option}>
-                  <input
-                    type="radio"
-                    name="colorScheme"
-                    id={`colorScheme${option}`}
-                    value={option.toLowerCase()}
-                    title={option}
-                    checked={option.toLowerCase() === colorScheme}
-                    onChange={() =>
-                      dispatch({
-                        type: 'updateColorScheme',
-                        payload: {
-                          colorScheme: option.toLowerCase() as ColorScheme,
-                        },
-                      })
-                    }
-                    className={styles.realRadio}
-                  />
-                  <label
-                    htmlFor={`colorScheme${option}`}
-                    className={styles.label}
-                    title={option}
-                  >
-                    <span className={styles.labelText}>
-                      {colorModeIcon[option.toLowerCase() as ColorScheme]}
-                    </span>
-                  </label>
-                </div>
-              ))}
-            </div>
-          </fieldset>
-
-          <Stack space="xlarge">
-            <Heading level="3">Keyboard Shortcuts</Heading>
-            {Object.entries(keybindings).map(([description, keybinding]) => (
-              <KeyboardShortcut
-                description={description}
-                keybinding={keybinding}
-                key={description}
-              />
+    <ToolbarPanel data-testid="settings-panel">
+      <Stack space="xxxlarge">
+        <fieldset className={styles.fieldset}>
+          <legend>
+            <Heading level="3">Editor Position</Heading>
+          </legend>
+          <div className={styles.radioContainer}>
+            {['Bottom', 'Right'].map((option) => (
+              <div key={option}>
+                <input
+                  type="radio"
+                  name="editorPosition"
+                  id={`editorPosition${option}`}
+                  value={option.toLowerCase()}
+                  title={option}
+                  checked={option.toLowerCase() === editorPosition}
+                  onChange={() =>
+                    dispatch({
+                      type: 'updateEditorPosition',
+                      payload: {
+                        position: option.toLowerCase() as EditorPosition,
+                      },
+                    })
+                  }
+                  className={styles.realRadio}
+                />
+                <label
+                  htmlFor={`editorPosition${option}`}
+                  className={styles.label}
+                  title={option}
+                >
+                  <span className={styles.labelText}>
+                    {positionIcon[option.toLowerCase() as EditorPosition]}
+                  </span>
+                </label>
+              </div>
+            ))}
+          </div>
+        </fieldset>
+
+        <fieldset className={styles.fieldset}>
+          <legend>
+            <Heading level="3">Color Scheme</Heading>
+          </legend>
+          <div className={styles.radioContainer}>
+            {['Light', 'Dark', 'System'].map((option) => (
+              <div key={option}>
+                <input
+                  type="radio"
+                  name="colorScheme"
+                  id={`colorScheme${option}`}
+                  value={option.toLowerCase()}
+                  title={option}
+                  checked={option.toLowerCase() === colorScheme}
+                  onChange={() =>
+                    dispatch({
+                      type: 'updateColorScheme',
+                      payload: {
+                        colorScheme: option.toLowerCase() as ColorScheme,
+                      },
+                    })
+                  }
+                  className={styles.realRadio}
+                />
+                <label
+                  htmlFor={`colorScheme${option}`}
+                  className={styles.label}
+                  title={option}
+                >
+                  <span className={styles.labelText}>
+                    {colorModeIcon[option.toLowerCase() as ColorScheme]}
+                  </span>
+                </label>
+              </div>
             ))}
-          </Stack>
+          </div>
+        </fieldset>
+
+        <Stack space="xlarge">
+          <Heading level="3">Keyboard Shortcuts</Heading>
+          {Object.entries(keybindings).map(([description, keybinding]) => (
+            <KeyboardShortcut
+              description={description}
+              keybinding={keybinding}
+              key={description}
+            />
+          ))}
         </Stack>
-      </ToolbarPanel>
-    </>
+      </Stack>
+    </ToolbarPanel>
   );
 });