diff --git a/examples/vue3/cypress/e2e/layout.cy.js b/examples/vue3/cypress/e2e/layout.cy.js
new file mode 100644
index 00000000..4866cb14
--- /dev/null
+++ b/examples/vue3/cypress/e2e/layout.cy.js
@@ -0,0 +1,77 @@
+/// <reference types="cypress" />
+
+describe('Layout customization', () => {
+  beforeEach(() => {
+    cy.clearLocalStorage()
+    cy.visit('/')
+  })
+
+  it('opens the modal via the header button', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.contains('[data-test-id="layout-modal"]', 'Customize Layout')
+  })
+
+  it('toggles Story List visibility', () => {
+    cy.get('.histoire-base-split-pane').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-list"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('.histoire-base-split-pane').should('not.exist')
+  })
+
+  it('toggles Story Options visibility on a story', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-options"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
+  })
+
+  it('switches Story Options placement to Bottom', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-placement-bottom"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.get('.histoire-base-split-pane.portrait').should('exist')
+  })
+
+  it('persists settings across reload', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-toggle-story-list"]').click()
+    cy.get('[data-test-id="layout-modal-close"]').click()
+    cy.reload()
+    cy.get('.histoire-base-split-pane').should('not.exist')
+  })
+
+  it('hides the Layout button on mobile', () => {
+    cy.viewport(375, 667)
+    cy.get('[data-test-id="layout-btn"]').should('not.exist')
+  })
+
+  it('opens and toggles via keyboard shortcut', () => {
+    cy.get('body').type('{meta}{shift}l')
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.get('body').type('{meta}{shift}l')
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+  })
+
+  it('respects per-story meta.storyOptions override', () => {
+    cy.get('[data-test-id="story-list-item"]').contains('StoryOptions Override').click()
+    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
+    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
+    cy.get('[data-test-id="story-side-panel"]').should('exist')
+  })
+
+  it('closes the modal via backdrop and Esc', () => {
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('[data-test-id="layout-modal"]').should('be.visible')
+    cy.get('body').click(10, 10)
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+    cy.get('[data-test-id="layout-btn"]').click()
+    cy.get('body').type('{esc}')
+    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
+  })
+})
diff --git a/examples/vue3/cypress/e2e/search.cy.js b/examples/vue3/cypress/e2e/search.cy.js
index 7ec5a989..fe64d32d 100644
--- a/examples/vue3/cypress/e2e/search.cy.js
+++ b/examples/vue3/cypress/e2e/search.cy.js
@@ -7,12 +7,12 @@ describe('Search', () => {
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.get('[data-test-id="search-item"]').should('have.length.greaterThan', 3)
     cy.get('[data-test-id="search-item"]').contains('untitled').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     cy.get('[data-test-id="search-btn"]').click()
     cy.get('[data-test-id="search-modal"] input').type('variant 2')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Variant 2')
     cy.get('[data-test-id="search-modal"] input').type('{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
   })
 
   it('should handle keyboard navigation', () => {
@@ -21,13 +21,13 @@ describe('Search', () => {
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Demo')
     cy.get('[data-test-id="search-modal"] input').type('{downArrow}{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     cy.get('[data-test-id="search-btn"]').click()
     cy.get('[data-test-id="search-modal"] input').clear()
     cy.get('[data-test-id="search-modal"] input').type('Demo')
     cy.contains('[data-test-id="search-item"][data-selected]', 'Demo')
     cy.get('[data-test-id="search-modal"] input').type('{downArrow}{downArrow}{enter}')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
   })
 
   it('should close', () => {
diff --git a/examples/vue3/cypress/e2e/stories-list.cy.js b/examples/vue3/cypress/e2e/stories-list.cy.js
index 7a284eb1..654cd9ad 100644
--- a/examples/vue3/cypress/e2e/stories-list.cy.js
+++ b/examples/vue3/cypress/e2e/stories-list.cy.js
@@ -4,7 +4,7 @@ describe('Stories list', () => {
   it('should display the stories', () => {
     cy.clearLocalStorage()
     cy.visit('/')
-    cy.get('[data-test-id="story-list-item"]').should('have.length', 35)
+    cy.get('[data-test-id="story-list-item"]').should('have.length', 36)
     cy.get('[data-test-id="story-list-item"]').contains('🐱 Meow')
     cy.get('[data-test-id="story-list-item"]').contains('BaseButton').contains('3') // Variants count
     cy.get('[data-test-id="story-list-item"]').contains('Demo')
diff --git a/examples/vue3/cypress/e2e/story-preview.cy.js b/examples/vue3/cypress/e2e/story-preview.cy.js
index 766db5c6..a8e1b53e 100644
--- a/examples/vue3/cypress/e2e/story-preview.cy.js
+++ b/examples/vue3/cypress/e2e/story-preview.cy.js
@@ -11,7 +11,7 @@ describe('Story preview', () => {
     cy.get('[data-test-id="story-list-item"]').contains('Demo').click()
     cy.get('[data-test-id="story-variant-list-item"]').should('have.length', 2)
     cy.get('[data-test-id="story-variant-list-item"]').contains('untitled').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('untitled')
+    cy.get('.histoire-toolbar-title').contains('untitled')
     getIframeBody().contains('Hello world!')
     cy.get('[data-test-id="story-source-code"]').should('have.text', '<Demo message="Hello world!" />')
   })
@@ -21,7 +21,7 @@ describe('Story preview', () => {
     cy.get('[data-test-id="story-list-item"]').contains('Demo').click()
     cy.get('[data-test-id="story-variant-list-item"]').should('have.length', 2)
     cy.get('[data-test-id="story-variant-list-item"]').contains('Variant 2').click()
-    cy.get('[data-test-id="story-variant-single-view"]').contains('Variant 2')
+    cy.get('.histoire-toolbar-title').contains('Variant 2')
     getIframeBody().contains('Meow!')
     cy.get('[data-test-id="story-source-code"]').should('have.text', '<Demo message="Meow!" />')
   })
diff --git a/examples/vue3/src/components/StoryOptionsOverride.story.vue b/examples/vue3/src/components/StoryOptionsOverride.story.vue
new file mode 100644
index 00000000..07c26695
--- /dev/null
+++ b/examples/vue3/src/components/StoryOptionsOverride.story.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const meta = { storyOptions: false }
+</script>
+
+<template>
+  <Story
+    title="StoryOptions Override"
+    icon="carbon:no-image"
+    :meta="meta"
+  >
+    <Variant>
+      <p>This story sets <code>meta.storyOptions: false</code>, which forces the right pane hidden regardless of the global Layout setting.</p>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/histoire-app/src/app/App.vue b/packages/histoire-app/src/app/App.vue
index ab4c95ed..7c28bc0c 100644
--- a/packages/histoire-app/src/app/App.vue
+++ b/packages/histoire-app/src/app/App.vue
@@ -9,17 +9,22 @@ import type { StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
 import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$histoire-stories'
 import { computed, onMounted, ref, watch } from 'vue'
+import AppActions from './components/app/AppActions.vue'
 import AppHeader from './components/app/AppHeader.vue'
 import Breadcrumb from './components/app/Breadcrumb.vue'
 import InitialLoading from './components/app/InitialLoading.vue'
+import TopBar from './components/app/TopBar.vue'
 import BaseSplitPane from './components/base/BaseSplitPane.vue'
 import CommandPromptsModal from './components/command/CommandPromptsModal.vue'
+import LayoutModal from './components/layout/LayoutModal.vue'
 import SearchModal from './components/search/SearchModal.vue'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import StoryList from './components/tree/StoryList.vue'
 import { useCommandStore } from './stores/command'
+import { useLayoutStore } from './stores/layout'
 import { useStoryStore } from './stores/story'
 import { histoireConfig } from './util/config'
+import { toggleDark } from './util/dark'
 import { onKeyboardShortcut } from './util/keyboard'
 import { mapFile } from './util/mapping'
 import { isMobile } from './util/responsive'
@@ -61,10 +66,9 @@ useTitle(computed(() => {
   return histoireConfig.theme.title
 }))
 
-// Search
-
 const loadSearch = ref(false)
 const isSearchOpen = ref(false)
+const isLayoutOpen = ref(false)
 
 watch(isSearchOpen, (value) => {
   if (value) {
@@ -77,6 +81,16 @@ onKeyboardShortcut(['ctrl+k', 'meta+k'], (event) => {
   event.preventDefault()
 })
 
+onKeyboardShortcut(['ctrl+shift+l', 'meta+shift+l'], (event) => {
+  isLayoutOpen.value = !isLayoutOpen.value
+  event.preventDefault()
+})
+
+onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
+  event.preventDefault()
+  toggleDark()
+})
+
 const loading = ref(false)
 
 if (import.meta.hot && !rawFiles.length) {
@@ -92,6 +106,7 @@ onMounted(() => {
 })
 
 const commandStore = useCommandStore()
+const layoutStore = useLayoutStore()
 </script>
 
 <template>
@@ -106,7 +121,7 @@ const commandStore = useCommandStore()
   </div>
 
   <div
-    class="htw-h-screen htw-bg-white dark:htw-bg-gray-700 dark:htw-text-gray-100"
+    class="htw-h-screen htw-bg-gray-100 dark:htw-bg-gray-750 dark:htw-text-gray-100"
     :style="{
       // Prevent flash of content
       opacity: mounted ? 1 : 0,
@@ -116,7 +131,14 @@ const commandStore = useCommandStore()
       v-if="isMobile"
       class="htw-h-full htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-800"
     >
-      <AppHeader @search="isSearchOpen = true" />
+      <div class="htw-flex htw-items-center htw-gap-2 htw-pr-4">
+        <AppHeader class="htw-flex-1" />
+        <AppActions
+          class="htw-flex-none"
+          @layout="isLayoutOpen = true"
+          @search="isSearchOpen = true"
+        />
+      </div>
       <Breadcrumb
         :tree="tree"
         :stories="stories"
@@ -125,7 +147,7 @@ const commandStore = useCommandStore()
     </div>
 
     <BaseSplitPane
-      v-else
+      v-else-if="layoutStore.settings.storyListVisible"
       save-id="main-horiz"
       :min="5"
       :max="50"
@@ -134,10 +156,7 @@ const commandStore = useCommandStore()
     >
       <template #first>
         <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
-          <AppHeader
-            class="htw-flex-none"
-            @search="isSearchOpen = true"
-          />
+          <AppHeader class="htw-flex-none" />
           <StoryList
             :tree="tree"
             :stories="stories"
@@ -147,9 +166,31 @@ const commandStore = useCommandStore()
       </template>
 
       <template #last>
-        <RouterView />
+        <div class="htw-flex htw-flex-col htw-h-full">
+          <TopBar
+            @layout="isLayoutOpen = true"
+            @search="isSearchOpen = true"
+          />
+          <RouterView class="htw-flex-1 htw-min-h-0" />
+        </div>
       </template>
     </BaseSplitPane>
+    <div
+      v-else
+      class="htw-h-full htw-flex htw-flex-col"
+    >
+      <TopBar
+        @layout="isLayoutOpen = true"
+        @search="isSearchOpen = true"
+      />
+      <RouterView class="htw-flex-1 htw-min-h-0" />
+    </div>
+
+    <LayoutModal
+      v-if="!isMobile"
+      :shown="isLayoutOpen"
+      @close="isLayoutOpen = false"
+    />
 
     <SearchModal
       v-if="loadSearch"
diff --git a/packages/histoire-app/src/app/components/app/AppActions.vue b/packages/histoire-app/src/app/components/app/AppActions.vue
new file mode 100644
index 00000000..6ef425d7
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/AppActions.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+import { histoireConfig } from '../../util/config'
+import { isDark, toggleDark } from '../../util/dark'
+import { isMobile } from '../../util/responsive'
+import { makeTooltip } from '../../util/tooltip'
+import TopBarChip from './TopBarChip.vue'
+import TopBarChipItem from './TopBarChipItem.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const themeIcon = computed(() => {
+  return isDark.value ? 'carbon:moon' : 'carbon:sun'
+})
+</script>
+
+<template>
+  <TopBarChip>
+    <TopBarChipItem
+      v-if="!isMobile"
+      v-tooltip="makeTooltip('Layout', ({ isMac }) => isMac ? 'meta+shift+l' : 'ctrl+shift+l')"
+      aria-label="Open layout customization"
+      data-test-id="layout-btn"
+      @click="$emit('layout')"
+    >
+      <Icon
+        icon="carbon:panel-expansion"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+      data-test-id="search-btn"
+      @click="$emit('search')"
+    >
+      <Icon
+        icon="carbon:search"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+
+    <TopBarChipItem
+      v-if="!histoireConfig.theme.hideColorSchemeSwitch"
+      v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+      @click="toggleDark()"
+    >
+      <Icon
+        :icon="themeIcon"
+        class="htw-w-4 htw-h-4"
+      />
+    </TopBarChipItem>
+  </TopBarChip>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/AppHeader.vue b/packages/histoire-app/src/app/components/app/AppHeader.vue
index 11d3ab30..db6c7fd8 100644
--- a/packages/histoire-app/src/app/components/app/AppHeader.vue
+++ b/packages/histoire-app/src/app/components/app/AppHeader.vue
@@ -1,29 +1,11 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { histoireConfig } from '../../util/config'
-import { isDark, toggleDark } from '../../util/dark'
-import { onKeyboardShortcut } from '../../util/keyboard'
-import { makeTooltip } from '../../util/tooltip'
 import AppLogo from './AppLogo.vue'
-
-defineEmits({
-  search: () => true,
-})
-
-const themeIcon = computed(() => {
-  return isDark.value ? 'carbon:moon' : 'carbon:sun'
-})
-
-onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
-  event.preventDefault()
-  toggleDark()
-})
 </script>
 
 <template>
   <div
-    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="histoire-app-header htw-px-4 htw-h-14 htw-flex htw-items-center htw-gap-2"
   >
     <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
       <a
@@ -36,30 +18,5 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
         />
       </a>
     </div>
-    <div class="htw-ml-auto htw-flex-none htw-flex">
-      <a
-        v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
-        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
-        data-test-id="search-btn"
-        @click="$emit('search')"
-      >
-        <Icon
-          icon="carbon:search"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-
-      <a
-        v-if="!histoireConfig.theme.hideColorSchemeSwitch"
-        v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
-        class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
-        @click="toggleDark()"
-      >
-        <Icon
-          :icon="themeIcon"
-          class="htw-w-6 htw-h-6 sm:htw-w-4 sm:htw-h-4"
-        />
-      </a>
-    </div>
   </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/app/TopBar.vue b/packages/histoire-app/src/app/components/app/TopBar.vue
new file mode 100644
index 00000000..6dd78018
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { useStoryStore } from '../../stores/story'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
+import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
+import AppActions from './AppActions.vue'
+import TopBarChip from './TopBarChip.vue'
+
+defineEmits({
+  search: () => true,
+  layout: () => true,
+})
+
+const storyStore = useStoryStore()
+</script>
+
+<template>
+  <div class="histoire-top-bar htw-flex-none htw-grid htw-grid-cols-[1fr_auto_1fr] htw-items-center htw-h-14 htw-px-4 htw-gap-3">
+    <AppActions
+      class="htw-justify-self-start"
+      @layout="$emit('layout')"
+      @search="$emit('search')"
+    />
+
+    <TopBarChip
+      v-if="storyStore.currentStory || storyStore.currentVariant"
+      class="htw-px-6 htw-py-1.5 htw-max-w-full"
+    >
+      <ToolbarTitle
+        :variant="storyStore.currentVariant ?? undefined"
+        :story="storyStore.currentStory ?? undefined"
+      />
+    </TopBarChip>
+    <span v-else />
+
+    <TopBarChip
+      v-if="storyStore.currentStory && !storyStore.currentStory.docsOnly"
+      class="htw-justify-self-end"
+    >
+      <ToolbarResponsiveSize
+        v-if="storyStore.currentVariant && !storyStore.currentVariant.responsiveDisabled"
+      />
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+      <ToolbarNewTab
+        v-if="storyStore.currentVariant"
+        :variant="storyStore.currentVariant"
+        :story="storyStore.currentStory"
+      />
+      <DevOnlyToolbarOpenInEditor
+        v-if="__HISTOIRE_DEV__"
+        :file="storyStore.currentStory.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </TopBarChip>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/TopBarChip.vue b/packages/histoire-app/src/app/components/app/TopBarChip.vue
new file mode 100644
index 00000000..d1c42f12
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBarChip.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="histoire-top-bar-chip htw-flex htw-items-center htw-bg-gradient-to-b htw-from-white/85 htw-to-white/60 dark:htw-from-gray-800/65 dark:htw-to-gray-800/40 htw-backdrop-blur-md htw-border htw-border-white/60 dark:htw-border-white/15 htw-rounded-lg htw-overflow-hidden htw-shadow-md">
+    <slot />
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/app/TopBarChipItem.vue b/packages/histoire-app/src/app/components/app/TopBarChipItem.vue
new file mode 100644
index 00000000..55ed9fae
--- /dev/null
+++ b/packages/histoire-app/src/app/components/app/TopBarChipItem.vue
@@ -0,0 +1,7 @@
+<template>
+  <a
+    class="histoire-top-bar-chip-item htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 hover:htw-bg-white/50 active:htw-bg-white/70 dark:hover:htw-bg-white/10 dark:active:htw-bg-white/15 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/packages/histoire-app/src/app/components/base/BaseListItem.vue b/packages/histoire-app/src/app/components/base/BaseListItem.vue
index 0ef27fa1..f3ea8e4e 100644
--- a/packages/histoire-app/src/app/components/base/BaseListItem.vue
+++ b/packages/histoire-app/src/app/components/base/BaseListItem.vue
@@ -14,7 +14,7 @@ function handleNavigate() {
 
 <template>
   <a
-    class="istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-base-list-item htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
     :class="[
       $attrs.class,
       isActive
diff --git a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
index 4b6ac2ea..9ecaec4b 100644
--- a/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
+++ b/packages/histoire-app/src/app/components/base/BaseSplitPane.vue
@@ -45,6 +45,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  showDivider: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits({
@@ -177,7 +182,7 @@ onUnmounted(() => {
       class="htw-relative htw-top-0 htw-left-0 htw-z-20"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape',
+        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape' && showDivider,
         'htw-flex-none': fixed,
       }"
       :style="leftStyle"
@@ -199,7 +204,7 @@ onUnmounted(() => {
       class="htw-relative htw-bottom-0 htw-right-0"
       :class="{
         'htw-pointer-events-none': dragging,
-        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait',
+        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait' && showDivider,
         'htw-flex-1': fixed,
       }"
       :style="rightStyle"
diff --git a/packages/histoire-app/src/app/components/layout/LayoutItem.vue b/packages/histoire-app/src/app/components/layout/LayoutItem.vue
new file mode 100644
index 00000000..e6153901
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import BaseListItem from '../base/BaseListItem.vue'
+
+defineProps<{
+  title: string
+  icon: string
+  stateIcon?: string
+  isActive?: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <BaseListItem
+    :is-active="isActive"
+    class="htw-px-6 htw-py-4 htw-gap-4"
+    @navigate="$emit('click')"
+  >
+    <Icon
+      class="htw-w-4 htw-h-4 htw-flex-none"
+      :icon="icon"
+      aria-hidden="true"
+    />
+    <span class="htw-flex-1">{{ title }}</span>
+    <Icon
+      v-if="stateIcon"
+      class="htw-w-4 htw-h-4 htw-flex-none htw-opacity-70"
+      :icon="stateIcon"
+      aria-hidden="true"
+    />
+  </BaseListItem>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue b/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue
new file mode 100644
index 00000000..98fd6e81
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutItemGroup.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div role="group">
+    <div
+      role="heading"
+      aria-level="3"
+      class="htw-px-6 htw-pt-3 htw-pb-1 htw-text-xs htw-uppercase htw-tracking-wide htw-opacity-50"
+    >
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutModal.vue b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
new file mode 100644
index 00000000..99072c9e
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutModal.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { onKeyboardShortcut } from '../../util/keyboard'
+import LayoutPane from './LayoutPane.vue'
+
+const props = defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+
+onKeyboardShortcut(['escape'], () => {
+  if (props.shown) {
+    close()
+  }
+})
+</script>
+
+<template>
+  <div
+    v-show="shown"
+    class="histoire-layout-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    data-test-id="layout-modal"
+  >
+    <div
+      class="htw-absolute htw-inset-0"
+      @click="close()"
+    />
+    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+      <div class="htw-flex htw-items-center htw-px-6 htw-py-3 htw-text-gray-900 dark:htw-text-gray-100">
+        <h2 class="htw-flex-1 htw-text-sm htw-font-medium htw-m-0">
+          Customize Layout
+        </h2>
+        <button
+          type="button"
+          class="htw-flex htw-items-center htw-justify-center htw-p-1 htw-bg-transparent htw-border-0 htw-text-gray-500 dark:htw-text-gray-400 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer"
+          aria-label="Close layout customization"
+          data-test-id="layout-modal-close"
+          @click="close()"
+        >
+          <Icon
+            icon="carbon:close"
+            class="htw-w-5 htw-h-5"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <LayoutPane />
+    </div>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/layout/LayoutPane.vue b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
new file mode 100644
index 00000000..458c8374
--- /dev/null
+++ b/packages/histoire-app/src/app/components/layout/LayoutPane.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useLayoutStore } from '../../stores/layout'
+import LayoutItem from './LayoutItem.vue'
+import LayoutItemGroup from './LayoutItemGroup.vue'
+
+const settings = useLayoutStore().settings
+</script>
+
+<template>
+  <div class="htw-py-2">
+    <LayoutItemGroup title="Visibility">
+      <LayoutItem
+        title="Story List"
+        icon="carbon:open-panel-filled-left"
+        :state-icon="settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-list"
+        @click="settings.storyListVisible = !settings.storyListVisible"
+      />
+      <LayoutItem
+        title="Story Options"
+        icon="carbon:open-panel-filled-right"
+        :state-icon="settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-options"
+        @click="settings.storyOptionsVisible = !settings.storyOptionsVisible"
+      />
+    </LayoutItemGroup>
+
+    <LayoutItemGroup title="Story Options Placement">
+      <LayoutItem
+        title="Right"
+        icon="carbon:open-panel-filled-right"
+        :is-active="settings.storyOptionsPlacement === 'right'"
+        data-test-id="layout-placement-right"
+        @click="settings.storyOptionsPlacement = 'right'"
+      />
+      <LayoutItem
+        title="Bottom"
+        icon="carbon:open-panel-filled-bottom"
+        :is-active="settings.storyOptionsPlacement === 'bottom'"
+        data-test-id="layout-placement-bottom"
+        @click="settings.storyOptionsPlacement = 'bottom'"
+      />
+    </LayoutItemGroup>
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
index bec3e1bb..2a3bf62b 100644
--- a/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
+++ b/packages/histoire-app/src/app/components/panel/StorySidePanel.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import BaseEmpty from '../base/BaseEmpty.vue'
@@ -12,6 +13,11 @@ import StoryEvents from './StoryEvents.vue'
 import StorySourceCode from './StorySourceCode.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
+
+const innerOrientation = computed(() =>
+  layoutStore.settings.storyOptionsPlacement === 'bottom' ? 'landscape' : 'portrait',
+)
 
 const route = useRoute()
 
@@ -28,49 +34,53 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <BaseEmpty
-    v-if="!storyStore.currentVariant"
-    class="histoire-story-side-panel histoire-selection"
-  >
-    <span>Select a variant</span>
-  </BaseEmpty>
+  <div class="htw-h-full htw-w-full htw-p-2">
+    <div class="htw-h-full htw-w-full htw-rounded-lg htw-border htw-border-gray-200 dark:htw-border-gray-700 htw-overflow-hidden htw-bg-white dark:htw-bg-gray-700">
+      <BaseEmpty
+        v-if="!storyStore.currentVariant"
+        class="histoire-story-side-panel histoire-selection"
+      >
+        <span>Select a variant</span>
+      </BaseEmpty>
 
-  <BaseEmpty
-    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
-    class="histoire-story-side-panel histoire-loading"
-  >
-    <span>Loading...</span>
-  </BaseEmpty>
+      <BaseEmpty
+        v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+        class="histoire-story-side-panel histoire-loading"
+      >
+        <span>Loading...</span>
+      </BaseEmpty>
 
-  <BaseSplitPane
-    v-else
-    save-id="story-sidepane"
-    orientation="portrait"
-    class="histoire-story-side-panel histoire-loaded htw-h-full"
-    data-test-id="story-side-panel"
-  >
-    <template #first>
-      <div class="htw-flex htw-flex-col htw-h-full">
-        <PaneTabs
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-        />
+      <BaseSplitPane
+        v-else
+        :save-id="`story-sidepane-${innerOrientation}`"
+        :orientation="innerOrientation"
+        class="histoire-story-side-panel histoire-loaded htw-h-full"
+        data-test-id="story-side-panel"
+      >
+        <template #first>
+          <div class="htw-flex htw-flex-col htw-h-full">
+            <PaneTabs
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+            />
 
-        <component
-          :is="panelContentComponent"
-          :story="storyStore.currentStory"
-          :variant="storyStore.currentVariant"
-          class="htw-h-full htw-overflow-auto"
-        />
-      </div>
-    </template>
+            <component
+              :is="panelContentComponent"
+              :story="storyStore.currentStory"
+              :variant="storyStore.currentVariant"
+              class="htw-h-full htw-overflow-auto"
+            />
+          </div>
+        </template>
 
-    <template #last>
-      <StorySourceCode
-        :story="storyStore.currentStory"
-        :variant="storyStore.currentVariant"
-        class="htw-h-full"
-      />
-    </template>
-  </BaseSplitPane>
+        <template #last>
+          <StorySourceCode
+            :story="storyStore.currentStory"
+            :variant="storyStore.currentVariant"
+            class="htw-h-full"
+          />
+        </template>
+      </BaseSplitPane>
+    </div>
+  </div>
 </template>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index ba243bdd..095f1113 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -2,10 +2,6 @@
 import { useResizeObserver } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
@@ -120,21 +116,6 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 
 <template>
   <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
-    >
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
     <div
       ref="el"
       class="htw-overflow-y-auto htw-flex htw-flex-1"
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
index 40a707b3..bcfc9edb 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
@@ -1,12 +1,5 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
-import { isMobile } from '../../util/responsive'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
-import ToolbarResponsiveSize from '../toolbar/ToolbarResponsiveSize.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
-import ToolbarTitle from '../toolbar/ToolbarTitle.vue'
 import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
 import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
 
@@ -21,32 +14,6 @@ defineProps<{
     class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
     data-test-id="story-variant-single-view"
   >
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-h-8 -htw-mt-1"
-    >
-      <ToolbarTitle
-        :variant="variant"
-      />
-      <ToolbarResponsiveSize
-        v-if="!variant.responsiveDisabled"
-      />
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-      <ToolbarNewTab
-        :variant="variant"
-        :story="story"
-      />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
-        :file="story.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
-    <!-- Preview -->
     <StoryVariantSinglePreviewNative
       v-if="story.layout?.iframe === false"
       :story="story"
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index 129cf265..612363be 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useLayoutStore } from '../../stores/layout'
 import { useStoryStore } from '../../stores/story'
 
 import { isMobile } from '../../util/responsive'
@@ -12,6 +13,15 @@ import StorySidePanel from '../panel/StorySidePanel.vue'
 import StoryViewer from './StoryViewer.vue'
 
 const storyStore = useStoryStore()
+const layoutStore = useLayoutStore()
+
+const effectiveStoryOptionsVisible = computed(() =>
+  storyStore.currentStory?.meta?.storyOptions ?? layoutStore.settings.storyOptionsVisible,
+)
+
+const placement = computed(() => layoutStore.settings.storyOptionsPlacement)
+const splitOrientation = computed(() => placement.value === 'bottom' ? 'portrait' : 'landscape')
+const splitDefaultSplit = computed(() => placement.value === 'bottom' ? 60 : 75)
 
 const router = useRouter()
 const route = useRoute()
@@ -90,12 +100,17 @@ function scrollDocsToTop() {
     <template v-else-if="isMobile">
       <StoryViewer />
     </template>
+    <template v-else-if="!effectiveStoryOptionsVisible">
+      <StoryViewer />
+    </template>
     <BaseSplitPane
       v-else
-      save-id="story-main"
+      :save-id="`story-main-${placement}`"
+      :orientation="splitOrientation"
       :min="30"
       :max="95"
-      :default-split="75"
+      :default-split="splitDefaultSplit"
+      :show-divider="false"
       class="htw-h-full"
     >
       <template #first>
diff --git a/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue b/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
index a3f9e0ab..32f36013 100644
--- a/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
+++ b/packages/histoire-app/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { openInEditor } from '../../util/open-in-editor.js'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 defineProps<{
   file: string
@@ -9,15 +10,15 @@ defineProps<{
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="tooltip"
     target="_blank"
-    class="histoire-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-open-in-editor"
     @click="openInEditor(file)"
   >
     <Icon
       icon="carbon:script-reference"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
index 5f0d7f7c..c84455c6 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarBackground.vue
@@ -1,14 +1,10 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
-import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { histoireConfig } from '../../util/config'
-import { getContrastColor } from '../../util/preview-settings'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
-
-const contrastColor = computed(() => getContrastColor(settings))
 </script>
 
 <template>
@@ -16,21 +12,20 @@ const contrastColor = computed(() => getContrastColor(settings))
     v-if="histoireConfig.backgroundPresets.length"
     placement="bottom-end"
     :skidding="6"
-    class="histoire-toolbar-background htw-h-full htw-flex-none"
+    class="histoire-toolbar-background htw-flex-none"
     data-test-id="toolbar-background"
   >
     <div
       v-tooltip="'Background color'"
-      class="htw-cursor-pointer hover:htw-text-primary-500 htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      class="htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 hover:htw-bg-white/50 dark:hover:htw-bg-white/10 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors htw-group"
     >
-      <div
-        class="bind-preview-bg htw-w-4 htw-h-4 htw-rounded-full htw-border htw-border-black/50 dark:htw-border-white/50 htw-flex htw-items-center htw-justify-center htw-text-xs"
-      >
-        <span v-if="contrastColor">a</span>
-      </div>
       <Icon
-        icon="carbon:caret-down"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        icon="carbon:color-palette"
+        class="htw-w-4 htw-h-4"
+      />
+      <Icon
+        icon="carbon:chevron-down"
+        class="htw-w-3 htw-h-3 htw-opacity-40 group-hover:htw-opacity-70"
       />
     </div>
 
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
index aa9cddf2..4d4253d7 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarNewTab.vue
@@ -3,6 +3,7 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { getSandboxUrl } from '../../util/sandbox'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const props = defineProps<{
   variant: Variant
@@ -15,15 +16,15 @@ const sandboxUrl = computed(() => {
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
-    class="histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-new-tab"
   >
     <Icon
       icon="carbon:launch"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
index 42dd1082..0f93cdb3 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarResponsiveSize.vue
@@ -13,22 +13,22 @@ const settings = usePreviewSettingsStore().currentSettings
     placement="bottom-end"
     :skidding="6"
     :disabled="!histoireConfig.responsivePresets?.length"
-    class="histoire-toolbar-responsive-size htw-h-full htw-flex-none"
+    class="histoire-toolbar-responsive-size htw-flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
-      class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
+      class="htw-flex htw-items-center htw-gap-1 htw-px-2.5 htw-py-1.5 htw-text-gray-900 dark:htw-text-gray-100 htw-transition-colors htw-group"
       :class="{
-        'htw-cursor-pointer hover:htw-text-primary-500': histoireConfig.responsivePresets?.length,
+        'hover:htw-bg-white/50 dark:hover:htw-bg-white/10 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer': histoireConfig.responsivePresets?.length,
       }"
     >
       <Icon
         icon="carbon:devices"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        class="htw-w-4 htw-h-4"
       />
       <Icon
-        icon="carbon:caret-down"
-        class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        icon="carbon:chevron-down"
+        class="htw-w-3 htw-h-3 htw-opacity-40 group-hover:htw-opacity-70"
       />
     </div>
 
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
index fe44e57b..753507ee 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTextDirection.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import TopBarChipItem from '../app/TopBarChipItem.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
 </script>
 
 <template>
-  <a
+  <TopBarChipItem
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    class="histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="histoire-toolbar-text-direction"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >
     <Icon
       :icon="settings.textDirection === 'ltr' ? 'fluent:text-paragraph-direction-right-16-regular' : 'fluent:text-paragraph-direction-left-16-regular'"
       class="htw-w-4 htw-h-4"
     />
-  </a>
+  </TopBarChipItem>
 </template>
diff --git a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
index 263a616a..ad1f2dc5 100644
--- a/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
+++ b/packages/histoire-app/src/app/components/toolbar/ToolbarTitle.vue
@@ -1,21 +1,45 @@
 <script lang="ts" setup>
-import type { Variant } from '../../types'
+import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
 
-defineProps<{
-  variant: Variant
+const props = defineProps<{
+  variant?: Variant
+  story?: Story
 }>()
+
+const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? 'carbon:cube')
+const iconColor = computed(() => props.variant?.iconColor ?? props.story?.iconColor)
+const title = computed(() => props.variant?.title ?? props.story?.title ?? '')
+const subtitle = computed(() => {
+  if (props.variant && props.story && props.story.title !== props.variant.title) {
+    return props.story.title
+  }
+  return undefined
+})
 </script>
 
 <template>
-  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
+  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-2 htw-min-w-0">
     <Icon
-      :icon="variant.icon ?? 'carbon:cube'"
-      class="htw-w-4 htw-h-4 htw-opacity-50"
+      :icon="icon"
+      class="htw-w-4 htw-h-4 htw-flex-none"
       :class="[
-        variant.iconColor ? 'bind-icon-color' : 'htw-text-gray-500',
+        iconColor ? 'bind-icon-color' : 'htw-text-gray-500 dark:htw-text-gray-400',
       ]"
     />
-    <span>{{ variant.title }}</span>
+    <div class="htw-flex htw-flex-col htw-justify-center htw-min-w-0 htw-leading-tight htw-text-center htw-h-[2.25rem]">
+      <span class="htw-truncate htw-text-sm htw-font-medium htw-text-gray-900 dark:htw-text-gray-100">{{ title }}</span>
+      <span
+        v-if="subtitle"
+        class="htw-truncate htw-text-xs htw-text-gray-500 dark:htw-text-gray-400"
+      >{{ subtitle }}</span>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.bind-icon-color {
+  color: v-bind('iconColor');
+}
+</style>
diff --git a/packages/histoire-app/src/app/stores/layout.ts b/packages/histoire-app/src/app/stores/layout.ts
new file mode 100644
index 00000000..9e4a9728
--- /dev/null
+++ b/packages/histoire-app/src/app/stores/layout.ts
@@ -0,0 +1,22 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+
+export type StoryOptionsPlacement = 'right' | 'bottom'
+
+export interface LayoutSettings {
+  storyListVisible: boolean
+  storyOptionsVisible: boolean
+  storyOptionsPlacement: StoryOptionsPlacement
+}
+
+export const useLayoutStore = defineStore('layout', () => {
+  const settings = useStorage<LayoutSettings>('_histoire-layout-v1', {
+    storyListVisible: true,
+    storyOptionsVisible: true,
+    storyOptionsPlacement: 'right',
+  })
+
+  return {
+    settings,
+  }
+})
diff --git a/packages/histoire-shared/src/types/story.ts b/packages/histoire-shared/src/types/story.ts
index 43622288..6871ca3d 100644
--- a/packages/histoire-shared/src/types/story.ts
+++ b/packages/histoire-shared/src/types/story.ts
@@ -43,7 +43,14 @@ export interface StoryProps extends CommonProps, InheritedProps {
 
 export interface CommonMeta {}
 
-export interface StoryMeta extends CommonMeta {}
+export interface StoryMeta extends CommonMeta {
+  /**
+   * When set, overrides the global Story Options visibility for this story.
+   * `true` forces the right pane visible; `false` forces it hidden.
+   * `undefined` (default) defers to the global layout setting.
+   */
+  storyOptions?: boolean
+}
 
 export interface Story {
   id: string