diff --git a/src/apps/chat/components/applayout/ChatDrawerItems.tsx b/src/apps/chat/components/applayout/ChatDrawerItems.tsx
index b3ce23936a..559062e17c 100644
--- a/src/apps/chat/components/applayout/ChatDrawerItems.tsx
+++ b/src/apps/chat/components/applayout/ChatDrawerItems.tsx
@@ -7,7 +7,7 @@ import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 
 import { OpenAIIcon } from '~/common/components/icons/OpenAIIcon';
-import { closeLayoutDrawerMenu } from '~/common/layout/store-applayout';
+import { closeLayoutDrawer } from '~/common/layout/store-applayout';
 import { useChatStore } from '~/common/state/store-chats';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
@@ -51,13 +51,13 @@ export function ChatDrawerItems(props: {
       setActiveConversationId(topNewConversationId);
     else
       createConversation();
-    closeLayoutDrawerMenu();
+    closeLayoutDrawer();
   };
 
   const handleConversationActivate = React.useCallback((conversationId: string, closeMenu: boolean) => {
     setActiveConversationId(conversationId);
     if (closeMenu)
-      closeLayoutDrawerMenu();
+      closeLayoutDrawer();
   }, [setActiveConversationId]);
 
   const handleConversationDelete = React.useCallback((conversationId: string) => {
diff --git a/src/apps/chat/components/applayout/ChatMenuItems.tsx b/src/apps/chat/components/applayout/ChatMenuItems.tsx
index 480af698e4..4488ab8dbf 100644
--- a/src/apps/chat/components/applayout/ChatMenuItems.tsx
+++ b/src/apps/chat/components/applayout/ChatMenuItems.tsx
@@ -10,7 +10,7 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ForkRightIcon from '@mui/icons-material/ForkRight';
 import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
 
-import { setLayoutMenuAnchor } from '~/common/layout/store-applayout';
+import { closeLayoutMenu } from '~/common/layout/store-applayout';
 import { useUICounter, useUIPreferencesStore } from '~/common/state/store-ui';
 
 
@@ -32,32 +32,30 @@ export function ChatMenuItems(props: {
   // derived state
   const disabled = !props.conversationId || props.isConversationEmpty;
 
-  const closeContextMenu = () => setLayoutMenuAnchor(null);
-
   const handleSystemMessagesToggle = () => setShowSystemMessages(!showSystemMessages);
 
   const handleConversationExport = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
-    closeContextMenu();
+    closeLayoutMenu();
     props.onExportConversation(!disabled ? props.conversationId : null);
     shareTouch();
   };
 
   const handleConversationDuplicate = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
-    closeContextMenu();
+    closeLayoutMenu();
     props.conversationId && props.onDuplicateConversation(props.conversationId);
   };
 
   const handleConversationFlatten = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
-    closeContextMenu();
+    closeLayoutMenu();
     props.conversationId && props.onFlattenConversation(props.conversationId);
   };
 
   const handleToggleMessageSelectionMode = (e: React.MouseEvent) => {
     e.stopPropagation();
-    closeContextMenu();
+    closeLayoutMenu();
     props.setIsMessageSelectionMode(!props.isMessageSelectionMode);
   };
 
diff --git a/src/apps/chat/components/applayout/useLLMDropdown.tsx b/src/apps/chat/components/applayout/useLLMDropdown.tsx
index e8fe71c5a4..0d78448cab 100644
--- a/src/apps/chat/components/applayout/useLLMDropdown.tsx
+++ b/src/apps/chat/components/applayout/useLLMDropdown.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { ListItemButton, ListItemDecorator } from '@mui/joy';
+import { ListItemButton, ListItemDecorator, Tooltip } from '@mui/joy';
 import BuildCircleIcon from '@mui/icons-material/BuildCircle';
 import SettingsIcon from '@mui/icons-material/Settings';
 
 import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
 
 import { AppBarDropdown, DropdownItems } from '~/common/layout/AppBarDropdown';
-import { useUIStateStore } from '~/common/state/store-ui';
+import { KeyStroke } from '~/common/components/KeyStroke';
+import { openLayoutLLMOptions, openLayoutModelsSetup } from '~/common/layout/store-applayout';
 
 
 function AppBarLLMDropdown(props: {
@@ -34,9 +35,8 @@ function AppBarLLMDropdown(props: {
 
   const handleChatLLMChange = (_event: any, value: DLLMId | null) => value && props.setLlmId(value);
 
-  const handleOpenLLMOptions = () => props.llmId && useUIStateStore.getState().openLLMOptions(props.llmId);
+  const handleOpenLLMOptions = () => props.llmId && openLayoutLLMOptions(props.llmId);
 
-  const handleOpenModelsSetup = () => useUIStateStore.getState().openModelsSetup();
 
   return (
     <AppBarDropdown
@@ -52,10 +52,12 @@ function AppBarLLMDropdown(props: {
           </ListItemButton>
         )}
 
-        <ListItemButton key='menu-llms' onClick={handleOpenModelsSetup}>
-          <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
-          Models
-        </ListItemButton>
+        <Tooltip title={<KeyStroke combo='Ctrl + Alt + M' />}>
+          <ListItemButton key='menu-llms' onClick={openLayoutModelsSetup}>
+            <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
+            Models
+          </ListItemButton>
+        </Tooltip>
 
       </>}
     />
diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
index e8dfe8646c..820636d179 100644
--- a/src/apps/chat/components/composer/Composer.tsx
+++ b/src/apps/chat/components/composer/Composer.tsx
@@ -21,16 +21,18 @@ import { ContentReducer } from '~/modules/aifn/summarize/ContentReducer';
 import { LLMOptionsOpenAI } from '~/modules/llms/vendors/openai/openai.vendor';
 import { useChatLLM } from '~/modules/llms/store-llms';
 
+import { KeyStroke } from '~/common/components/KeyStroke';
 import { SpeechResult, useSpeechRecognition } from '~/common/components/useSpeechRecognition';
 import { countModelTokens } from '~/common/util/token-counter';
 import { extractFilePathsWithCommonRadix } from '~/common/util/dropTextUtils';
 import { hideOnDesktop, hideOnMobile } from '~/common/theme';
 import { htmlTableToMarkdown } from '~/common/util/htmlTableToMarkdown';
 import { launchAppCall } from '~/common/routes';
+import { openLayoutPreferences } from '~/common/layout/store-applayout';
 import { pdfToText } from '~/common/util/pdfToText';
 import { useChatStore } from '~/common/state/store-chats';
 import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
-import { useUIPreferencesStore, useUIStateStore } from '~/common/state/store-ui';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 import { CameraCaptureButton } from './CameraCaptureButton';
 import { ChatModeId, useComposerStartupText } from './store-composer';
@@ -88,11 +90,11 @@ const pasteClipboardLegend =
   <Box sx={{ p: 1, lineHeight: 2 }}>
     <b>Paste as 📚 Markdown attachment</b><br />
     Also converts Code and Tables<br />
-    Ctrl + Shift + V
+    <KeyStroke combo='Ctrl + Shift + V' />
   </Box>;
 
 const MicButton = (props: { variant: VariantProp, color: ColorPaletteProp, onClick: () => void, sx?: SxProps }) =>
-  <Tooltip title='Ctrl + M' placement='top'>
+  <Tooltip title={<KeyStroke combo='Ctrl + M' />} placement='top'>
     <IconButton variant={props.variant} color={props.color} onClick={props.onClick} sx={props.sx}>
       <MicIcon />
     </IconButton>
@@ -189,7 +191,7 @@ export function Composer(props: {
 
   const handleCallClicked = () => props.conversationId && systemPurposeId && launchAppCall(props.conversationId, systemPurposeId);
 
-  const handleDrawOptionsClicked = () => useUIStateStore.getState().openSettings(2);
+  const handleDrawOptionsClicked = () => openLayoutPreferences(2);
 
 
   const handleToggleChatMode = (event: React.MouseEvent<HTMLAnchorElement>) =>
diff --git a/src/apps/link/AppChatLinkDrawerItems.tsx b/src/apps/link/AppChatLinkDrawerItems.tsx
index c8fcb3dc48..086edb5ac7 100644
--- a/src/apps/link/AppChatLinkDrawerItems.tsx
+++ b/src/apps/link/AppChatLinkDrawerItems.tsx
@@ -8,7 +8,7 @@ import { useChatLinkItems } from '../chat/trade/store-sharing';
 
 import { Brand } from '~/common/brand';
 import { Link } from '~/common/components/Link';
-import { closeLayoutDrawerMenu } from '~/common/layout/store-applayout';
+import { closeLayoutDrawer } from '~/common/layout/store-applayout';
 import { getChatLinkRelativePath, getHomeLink } from '~/common/routes';
 
 
@@ -27,7 +27,7 @@ export function AppChatLinkDrawerItems() {
   return <>
 
     <MenuItem
-      onClick={closeLayoutDrawerMenu}
+      onClick={closeLayoutDrawer}
       component={Link} href={getHomeLink()} noLinkStyle
     >
       <ListItemDecorator><ArrowBackIcon /></ListItemDecorator>
diff --git a/src/apps/models-modal/LLMOptionsModal.tsx b/src/apps/models-modal/LLMOptionsModal.tsx
index 4b5a682aea..863a9157ed 100644
--- a/src/apps/models-modal/LLMOptionsModal.tsx
+++ b/src/apps/models-modal/LLMOptionsModal.tsx
@@ -9,7 +9,7 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { DLLMId, useModelsStore } from '~/modules/llms/store-llms';
 
 import { GoodModal } from '~/common/components/GoodModal';
-import { useUIStateStore } from '~/common/state/store-ui';
+import { closeLayoutLLMOptions } from '~/common/layout/store-applayout';
 
 import { VendorLLMOptions } from './VendorLLMOptions';
 
@@ -20,7 +20,6 @@ export function LLMOptionsModal(props: { id: DLLMId }) {
   const [showDetails, setShowDetails] = React.useState(false);
 
   // external state
-  const closeLLMOptions = useUIStateStore(state => state.closeLLMOptions);
   const {
     llm,
     removeLLM, updateLLM,
@@ -49,14 +48,14 @@ export function LLMOptionsModal(props: { id: DLLMId }) {
 
   const handleLlmDelete = () => {
     removeLLM(llm.id);
-    closeLLMOptions();
+    closeLayoutLLMOptions();
   };
 
   return (
 
     <GoodModal
       title={<><b>{llm.label}</b> options</>}
-      open={!!props.id} onClose={closeLLMOptions}
+      open={!!props.id} onClose={closeLayoutLLMOptions}
       startButton={
         <Button variant='plain' color='neutral' onClick={handleLlmDelete} startDecorator={<DeleteOutlineIcon />}>
           Delete
diff --git a/src/apps/models-modal/ModelsList.tsx b/src/apps/models-modal/ModelsList.tsx
index b490372615..930efcf02c 100644
--- a/src/apps/models-modal/ModelsList.tsx
+++ b/src/apps/models-modal/ModelsList.tsx
@@ -9,14 +9,11 @@ import { DLLM, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms'
 import { IModelVendor } from '~/modules/llms/vendors/IModelVendor';
 import { findVendorById } from '~/modules/llms/vendors/vendor.registry';
 
-import { useUIStateStore } from '~/common/state/store-ui';
+import { openLayoutLLMOptions } from '~/common/layout/store-applayout';
 
 
 function ModelItem(props: { llm: DLLM, vendor: IModelVendor, chipChat: boolean, chipFast: boolean, chipFunc: boolean }) {
 
-  // external state
-  const openLLMOptions = useUIStateStore(state => state.openLLMOptions);
-
   // derived
   const llm = props.llm;
   const label = llm.label;
@@ -24,7 +21,7 @@ function ModelItem(props: { llm: DLLM, vendor: IModelVendor, chipChat: boolean,
 
   return (
     <ListItem>
-      <ListItemButton onClick={() => openLLMOptions(llm.id)} sx={{ alignItems: 'center', gap: 1 }}>
+      <ListItemButton onClick={() => openLayoutLLMOptions(llm.id)} sx={{ alignItems: 'center', gap: 1 }}>
 
         {/* Model Name */}
         <Tooltip title={tooltip}>
diff --git a/src/apps/models-modal/ModelsModal.tsx b/src/apps/models-modal/ModelsModal.tsx
index c4f1c58978..9dd08a5850 100644
--- a/src/apps/models-modal/ModelsModal.tsx
+++ b/src/apps/models-modal/ModelsModal.tsx
@@ -4,7 +4,8 @@ import { shallow } from 'zustand/shallow';
 import { Checkbox, Divider } from '@mui/joy';
 
 import { GoodModal } from '~/common/components/GoodModal';
-import { useUIStateStore } from '~/common/state/store-ui';
+import { closeLayoutModelsSetup, openLayoutModelsSetup, useLayoutModelsSetup } from '~/common/layout/store-applayout';
+import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
 
 import { DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
 import { createModelSourceForDefaultVendor } from '~/modules/llms/vendors/vendor.registry';
@@ -22,11 +23,12 @@ export function ModelsModal(props: { suspendAutoModelsSetup?: boolean }) {
   const [showAllSources, setShowAllSources] = React.useState<boolean>(false);
 
   // external state
-  const { modelsSetupOpen, openModelsSetup, closeModelsSetup, llmOptionsId } = useUIStateStore();
+  const [modelsSetupOpen, llmOptionsId] = useLayoutModelsSetup();
   const { modelSources, llmCount } = useModelsStore(state => ({
     modelSources: state.sources,
     llmCount: state.llms.length,
   }), shallow);
+  useGlobalShortcut('m', true, true, openLayoutModelsSetup);
 
   // auto-select the first source - note: we could use a useEffect() here, but this is more efficient
   // also note that state-persistence is unneeded
@@ -39,8 +41,8 @@ export function ModelsModal(props: { suspendAutoModelsSetup?: boolean }) {
   // if no sources at startup, open the modal
   React.useEffect(() => {
     if (!selectedSourceId && !props.suspendAutoModelsSetup)
-      openModelsSetup();
-  }, [selectedSourceId, openModelsSetup, props.suspendAutoModelsSetup]);
+      openLayoutModelsSetup();
+  }, [selectedSourceId, props.suspendAutoModelsSetup]);
 
   // add the default source on cold - will require setup
   React.useEffect(() => {
@@ -61,7 +63,7 @@ export function ModelsModal(props: { suspendAutoModelsSetup?: boolean }) {
           checked={showAllSources} onChange={() => setShowAllSources(all => !all)}
         /> : undefined
       }
-      open={modelsSetupOpen} onClose={closeModelsSetup}
+      open onClose={closeLayoutModelsSetup}
     >
 
       <ModelsSourceSelector selectedSourceId={selectedSourceId} setSelectedSourceId={setSelectedSourceId} />
diff --git a/src/apps/settings-modal/SettingsModal.tsx b/src/apps/settings-modal/SettingsModal.tsx
index 74c0942a16..2b973f66b1 100644
--- a/src/apps/settings-modal/SettingsModal.tsx
+++ b/src/apps/settings-modal/SettingsModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Divider, Tab, TabList, TabPanel, Tabs, useTheme } from '@mui/joy';
+import { Button, Divider, Tab, TabList, TabPanel, Tabs } from '@mui/joy';
 import { tabClasses } from '@mui/joy/Tab';
 import BuildCircleIcon from '@mui/icons-material/BuildCircle';
 
@@ -8,7 +8,8 @@ import { ElevenlabsSettings } from '~/modules/elevenlabs/ElevenlabsSettings';
 import { ProdiaSettings } from '~/modules/prodia/ProdiaSettings';
 
 import { GoodModal } from '~/common/components/GoodModal';
-import { useUIStateStore } from '~/common/state/store-ui';
+import { closeLayoutPreferences, openLayoutModelsSetup, openLayoutPreferences, useLayoutPreferencesTab } from '~/common/layout/store-applayout';
+import { useGlobalShortcut } from '~/common/components/useGlobalShortcut';
 
 import { ToolsSettings } from './ToolsSettings';
 import { UISettings } from './UISettings';
@@ -19,18 +20,19 @@ import { UISettings } from './UISettings';
  * persisted on the client via localStorage.
  */
 export function SettingsModal() {
+
   // external state
-  const theme = useTheme();
-  const { settingsOpenTab, closeSettings, openModelsSetup } = useUIStateStore();
+  const settingsTabIndex = useLayoutPreferencesTab();
+  useGlobalShortcut('p', true, true, openLayoutPreferences);
 
-  const tabFixSx = { fontFamily: theme.fontFamily.body, flex: 1, p: 0, m: 0 };
+  const tabFixSx = { fontFamily: 'body', flex: 1, p: 0, m: 0 };
 
   return (
     <GoodModal
       title='Preferences' strongerTitle
-      open={!!settingsOpenTab} onClose={closeSettings}
+      open={!!settingsTabIndex} onClose={closeLayoutPreferences}
       startButton={
-        <Button variant='soft' color='success' onClick={openModelsSetup} startDecorator={<BuildCircleIcon />} sx={{
+        <Button variant='soft' color='success' onClick={openLayoutModelsSetup} startDecorator={<BuildCircleIcon />} sx={{
           '--Icon-fontSize': 'var(--joy-fontSize-xl2)',
         }}>
           Models
@@ -41,7 +43,7 @@ export function SettingsModal() {
 
       {/*<Divider />*/}
 
-      <Tabs aria-label='Settings tabbed menu' defaultValue={settingsOpenTab}>
+      <Tabs aria-label='Settings tabbed menu' defaultValue={settingsTabIndex}>
         <TabList
           variant='soft'
           disableUnderline
diff --git a/src/apps/settings-modal/UISettings.tsx b/src/apps/settings-modal/UISettings.tsx
index 2f587eb310..7f662cb855 100644
--- a/src/apps/settings-modal/UISettings.tsx
+++ b/src/apps/settings-modal/UISettings.tsx
@@ -9,9 +9,10 @@ import WidthNormalIcon from '@mui/icons-material/WidthNormal';
 import WidthWideIcon from '@mui/icons-material/WidthWide';
 
 import { Link } from '~/common/components/Link';
+import { closeLayoutPreferences } from '~/common/layout/store-applayout';
 import { hideOnMobile, settingsGap } from '~/common/theme';
 import { isPwa } from '~/common/util/pwaUtils';
-import { useUIPreferencesStore, useUIStateStore } from '~/common/state/store-ui';
+import { useUIPreferencesStore } from '~/common/state/store-ui';
 
 
 // configuration
@@ -37,7 +38,6 @@ export function UISettings() {
     showPurposeFinder: state.showPurposeFinder, setShowPurposeFinder: state.setShowPurposeFinder,
     zenMode: state.zenMode, setZenMode: state.setZenMode,
   }), shallow);
-  const { closeSettings } = useUIStateStore(state => ({ closeSettings: state.closeSettings }), shallow);
 
   const handleCenterModeChange = (event: React.ChangeEvent<HTMLInputElement>) => setCenterMode(event.target.value as 'narrow' | 'wide' | 'full' || 'wide');
 
@@ -123,7 +123,7 @@ export function UISettings() {
 
       <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
         <Box>
-          <FormLabel component={Link} href='/labs' onClick={closeSettings}>
+          <FormLabel component={Link} href='/labs' onClick={closeLayoutPreferences}>
             <u>Experiments</u>
             <InfoOutlinedIcon sx={{ mx: 0.5 }} />
           </FormLabel>
diff --git a/src/common/components/KeyStroke.tsx b/src/common/components/KeyStroke.tsx
new file mode 100644
index 0000000000..59945497c8
--- /dev/null
+++ b/src/common/components/KeyStroke.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Chip } from '@mui/joy';
+
+/**
+ * Shows a shortcut combo in a nicely presented dark box.
+ */
+export function KeyStroke(props: { combo: string }) {
+  return (
+    <Chip variant='solid' color='neutral'>
+      {props.combo}
+    </Chip>
+    // <Box sx={{
+    //   position: 'relative', display: 'inline-block', px: 1, py: 0.5,
+    //   bg: 'rgba(0,0,0,0.75)', color: 'white', borderRadius: 1,
+    //   fontSize: 12, fontWeight: 500, lineHeight: 1, whiteSpace: 'nowrap',
+    // }}>
+    //   <Box sx={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', bg: 'rgba(0,0,0,0.5)', borderRadius: 1 }} />
+    //   {props.combo}
+    // </Box>
+  );
+}
\ No newline at end of file
diff --git a/src/common/layout/AppBar.tsx b/src/common/layout/AppBar.tsx
index 92384b71a1..d9b5e29c9f 100644
--- a/src/common/layout/AppBar.tsx
+++ b/src/common/layout/AppBar.tsx
@@ -13,11 +13,10 @@ import { Brand } from '~/common/brand';
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { Link } from '~/common/components/Link';
 import { LogoSquircle } from '~/common/components/LogoSquircle';
-import { useUIStateStore } from '~/common/state/store-ui';
 
 // import { AppBarSupportItem } from './AppBarSupportItem';
 import { AppBarSwitcherItem } from './AppBarSwitcherItem';
-import { setLayoutDrawerAnchor, setLayoutMenuAnchor, useLayoutComponents } from './store-applayout';
+import { closeLayoutDrawer, closeLayoutMenu, openLayoutPreferences, setLayoutDrawerAnchor, setLayoutMenuAnchor, useLayoutComponents } from './store-applayout';
 
 
 function AppBarTitle() {
@@ -46,7 +45,7 @@ function CommonMenuItems(props: { onClose: () => void }) {
 
   const handleShowSettings = (event: React.MouseEvent) => {
     event.stopPropagation();
-    useUIStateStore.getState().openSettings();
+    openLayoutPreferences();
     props.onClose();
   };
 
@@ -64,6 +63,7 @@ function CommonMenuItems(props: { onClose: () => void }) {
     {/*</MenuItem>*/}
 
     {/* Preferences |...| Dark Mode Toggle */}
+    {/*<Tooltip title={<KeyStroke combo='Ctrl + Alt + P' />}>*/}
     <MenuItem onClick={handleShowSettings}>
       <ListItemDecorator><SettingsOutlinedIcon /></ListItemDecorator>
       Preferences
@@ -75,6 +75,7 @@ function CommonMenuItems(props: { onClose: () => void }) {
         {colorMode !== 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
       </IconButton>
     </MenuItem>
+    {/*</Tooltip>*/}
 
   </>;
 }
@@ -95,12 +96,8 @@ export function AppBar(props: { sx?: SxProps }) {
   // const { push } = useRouter();
   const { centerItems, drawerAnchor, drawerItems, menuAnchor, menuItems } = useLayoutComponents();
 
-  const closeDrawerMenu = () => setLayoutDrawerAnchor(null);
-
-  const closeMenuMenu = () => setLayoutMenuAnchor(null);
-
   const commonMenuItems = React.useMemo(() =>
-    <CommonMenuItems onClose={closeMenuMenu} />, []);
+    <CommonMenuItems onClose={closeLayoutMenu} />, []);
 
   return <>
 
@@ -139,7 +136,7 @@ export function AppBar(props: { sx?: SxProps }) {
     {/* Drawer Menu */}
     {!!drawerItems && <CloseableMenu
       maxHeightGapPx={56 + 24} sx={{ minWidth: 320 }}
-      open={!!drawerAnchor} anchorEl={drawerAnchor} onClose={closeDrawerMenu}
+      open={!!drawerAnchor} anchorEl={drawerAnchor} onClose={closeLayoutDrawer}
       placement='bottom-start'
     >
       {drawerItems}
@@ -148,7 +145,7 @@ export function AppBar(props: { sx?: SxProps }) {
     {/* Menu Menu */}
     <CloseableMenu
       maxHeightGapPx={56 + 24} noBottomPadding noTopPadding sx={{ minWidth: 320 }}
-      open={!!menuAnchor} anchorEl={menuAnchor} onClose={closeMenuMenu}
+      open={!!menuAnchor} anchorEl={menuAnchor} onClose={closeLayoutMenu}
       placement='bottom-end'
     >
       {commonMenuItems}
diff --git a/src/common/layout/AppBarSwitcherItem.tsx b/src/common/layout/AppBarSwitcherItem.tsx
index 2621347074..7e1fab74e3 100644
--- a/src/common/layout/AppBarSwitcherItem.tsx
+++ b/src/common/layout/AppBarSwitcherItem.tsx
@@ -7,7 +7,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import { BringTheLove, DiscordIcon } from '~/common/layout/AppBarSupportItem';
 import { Brand } from '~/common/brand';
 
-import { setLayoutMenuAnchor } from './store-applayout';
+import { closeLayoutMenu } from './store-applayout';
 
 
 // routes for the quick switcher menu item
@@ -42,7 +42,7 @@ export function AppBarSwitcherItem() {
   // switcher
   const switchApp = (app: ContainedAppType) => {
     if (currentApp !== app) {
-      setLayoutMenuAnchor(null);
+      closeLayoutMenu();
       routerPush(AppRouteMap[app].route).then(() => null);
     }
   };
diff --git a/src/common/layout/store-applayout.ts b/src/common/layout/store-applayout.ts
index fdd9cf4330..9c1e37e5d1 100644
--- a/src/common/layout/store-applayout.ts
+++ b/src/common/layout/store-applayout.ts
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { create } from 'zustand';
 import { shallow } from 'zustand/shallow';
 
+import type { DLLMId } from '~/modules/llms/store-llms';
+
 interface AppLayoutStore {
 
   // pluggable UI
@@ -13,6 +15,11 @@ interface AppLayoutStore {
   drawerAnchor: HTMLElement | null;
   menuAnchor: HTMLElement | null;
 
+  // modals, which are on the AppLayout
+  preferencesTab: number; // 0: closed, 1..N: tab index
+  modelsSetupOpen: boolean;
+  llmOptionsId: DLLMId | null;
+
 }
 
 const useAppLayoutStore = create<AppLayoutStore>()(
@@ -25,6 +32,10 @@ const useAppLayoutStore = create<AppLayoutStore>()(
     drawerAnchor: null,
     menuAnchor: null,
 
+    preferencesTab: 0,
+    modelsSetupOpen: false,
+    llmOptionsId: null,
+
   }),
 );
 
@@ -49,14 +60,18 @@ export function useLayoutComponents() {
   }), shallow);
 }
 
-export function setLayoutDrawerAnchor(anchor: HTMLElement | null) {
-  useAppLayoutStore.setState({ drawerAnchor: anchor });
-}
+export const setLayoutDrawerAnchor = (anchor: HTMLElement | null) => useAppLayoutStore.setState({ drawerAnchor: anchor });
+export const closeLayoutDrawer = () => useAppLayoutStore.setState({ drawerAnchor: null });
 
-export function closeLayoutDrawerMenu() {
-  useAppLayoutStore.setState({ drawerAnchor: null });
-}
+export const setLayoutMenuAnchor = (anchor: HTMLElement) => useAppLayoutStore.setState({ menuAnchor: anchor });
+export const closeLayoutMenu = () => useAppLayoutStore.setState({ menuAnchor: null });
+
+export const useLayoutPreferencesTab = () => useAppLayoutStore(state => state.preferencesTab);
+export const openLayoutPreferences = (tab?: number) => useAppLayoutStore.setState({ preferencesTab: tab || 1 });
+export const closeLayoutPreferences = () => useAppLayoutStore.setState({ preferencesTab: 0 });
 
-export function setLayoutMenuAnchor(anchor: HTMLElement | null) {
-  useAppLayoutStore.setState({ menuAnchor: anchor });
-}
\ No newline at end of file
+export const useLayoutModelsSetup = (): [open: boolean, llmId: DLLMId | null] => useAppLayoutStore(state => [state.modelsSetupOpen, state.llmOptionsId], shallow);
+export const openLayoutModelsSetup = () => useAppLayoutStore.setState({ modelsSetupOpen: true });
+export const closeLayoutModelsSetup = () => useAppLayoutStore.setState({ modelsSetupOpen: false });
+export const openLayoutLLMOptions = (llmId: DLLMId) => useAppLayoutStore.setState({ llmOptionsId: llmId });
+export const closeLayoutLLMOptions = () => useAppLayoutStore.setState({ llmOptionsId: null });
\ No newline at end of file
diff --git a/src/common/state/store-ui.ts b/src/common/state/store-ui.ts
index 9c1a0d07ff..6feb2cd70d 100644
--- a/src/common/state/store-ui.ts
+++ b/src/common/state/store-ui.ts
@@ -1,45 +1,6 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-import { DLLMId } from '~/modules/llms/store-llms';
-
-
-// UI State - not persisted
-
-interface UIStateStore {
-
-  settingsOpenTab: number; // 0: closed, 1..N: tab index
-  openSettings: (tab?: number) => void;
-  closeSettings: () => void;
-
-  modelsSetupOpen: boolean;
-  openModelsSetup: () => void;
-  closeModelsSetup: () => void;
-
-  llmOptionsId: DLLMId | null;
-  openLLMOptions: (llmId: DLLMId) => void;
-  closeLLMOptions: () => void;
-
-}
-
-export const useUIStateStore = create<UIStateStore>()(
-  (set) => ({
-
-    settingsOpenTab: 0,
-    openSettings: (tab?: number) => set({ settingsOpenTab: tab || 1 }),
-    closeSettings: () => set({ settingsOpenTab: 0 }),
-
-    modelsSetupOpen: false,
-    openModelsSetup: () => set({ modelsSetupOpen: true }),
-    closeModelsSetup: () => set({ modelsSetupOpen: false }),
-
-    llmOptionsId: null,
-    openLLMOptions: (llmId: DLLMId) => set({ llmOptionsId: llmId }),
-    closeLLMOptions: () => set({ llmOptionsId: null }),
-
-  }),
-);
-
 
 // UI Counters