diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
index d91ab100..9f260643 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
@@ -3,6 +3,8 @@ import { RiChat1Line } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
 
 export const ChatToggle = () => {
   const { t } = useTranslation('rooms')
@@ -10,6 +12,9 @@ export const ChatToggle = () => {
   const { dispatch, state } = useLayoutContext().widget
   const tooltipLabel = state?.showChat ? 'open' : 'closed'
 
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
   return (
     <div
       className={css({
@@ -25,6 +30,7 @@ export const ChatToggle = () => {
         tooltip={t(`controls.chat.${tooltipLabel}`)}
         isSelected={state?.showChat}
         onPress={() => {
+          if (showParticipants) participantsStore.showParticipants = false
           if (dispatch) dispatch({ msg: 'toggle_chat' })
         }}
       >
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
index d8049b46..1f955f52 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -2,13 +2,15 @@ import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
-import { useParticipants } from '@livekit/components-react'
+import { useLayoutContext, useParticipants } from '@livekit/components-react'
 import { useSnapshot } from 'valtio'
 import { participantsStore } from '@/stores/participants'
 
 export const ParticipantsToggle = () => {
   const { t } = useTranslation('rooms')
 
+  const { dispatch, state } = useLayoutContext().widget
+
   /**
    * Context could not be used due to inconsistent refresh behavior.
    * The 'numParticipant' property on the room only updates when the room's metadata changes,
@@ -36,7 +38,10 @@ export const ParticipantsToggle = () => {
         aria-label={t(`controls.participants.${tooltipLabel}`)}
         tooltip={t(`controls.participants.${tooltipLabel}`)}
         isSelected={showParticipants}
-        onPress={() => (participantsStore.showParticipants = !showParticipants)}
+        onPress={() => {
+          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
+          participantsStore.showParticipants = !showParticipants
+        }}
       >
         <RiGroupLine />
       </Button>