diff --git a/packages/desktop/src/tree/FlowState.tsx b/packages/desktop/src/tree/FlowState.tsx
index c69d262..4388797 100644
--- a/packages/desktop/src/tree/FlowState.tsx
+++ b/packages/desktop/src/tree/FlowState.tsx
@@ -46,7 +46,7 @@ export default function FlowState({ handleReconnect }: { handleReconnect: () =>
 
       {quote && (
         <Container
-          maxWidth={'md'}
+          maxWidth={'sm'}
           sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}
         >
           <Typography variant={'h6'} textAlign={'center'}>
diff --git a/packages/desktop/src/tree/FooterControls.tsx b/packages/desktop/src/tree/FooterControls.tsx
index e0c6c1f..dce3bbf 100644
--- a/packages/desktop/src/tree/FooterControls.tsx
+++ b/packages/desktop/src/tree/FooterControls.tsx
@@ -24,8 +24,11 @@ import { blueGrey } from '@mui/material/colors';
 import useAuth from '../providers/AuthProvider';
 import useConversations from '../providers/ConversationProvider';
 import useSearch from '../providers/SearchProvider';
+import useZen from '../providers/ZenProvider';
 
 export default function FooterControls() {
+  const { handleFlowState } = useZen();
+
   const { omniSearch } = useSearch();
   const { selectedConversation } = useConversations();
   const { user, handleLogout } = useAuth();
@@ -97,7 +100,7 @@ export default function FooterControls() {
             <Switch color="secondary" size="small" />
           </Tooltip>
 
-          <Button size={'small'} color={'secondary'} variant="text">
+          <Button size={'small'} color={'secondary'} variant="text" onClick={handleFlowState}>
             flow
           </Button>
         </Stack>