diff --git a/package.json b/package.json
index 094d3524..5a06c791 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
   "dependencies": {
     "@bufbuild/protobuf": "2.2.0",
     "@excalidraw/excalidraw": "0.17.6",
-    "@headlessui/react": "1.7.19",
-    "@nats-io/jetstream": "3.0.0-10",
+    "@headlessui/react": "2.1.10",
+    "@nats-io/jetstream": "3.0.0-11",
     "@nats-io/nats-core": "3.0.0-27",
     "@reduxjs/toolkit": "2.3.0",
     "@tensorflow-models/body-pix": "2.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c101d9c..4991a0cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,11 +15,11 @@ importers:
         specifier: 0.17.6
         version: 0.17.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@headlessui/react':
-        specifier: 1.7.19
-        version: 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 2.1.10
+        version: 2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@nats-io/jetstream':
-        specifier: 3.0.0-10
-        version: 3.0.0-10
+        specifier: 3.0.0-11
+        version: 3.0.0-11
       '@nats-io/nats-core':
         specifier: 3.0.0-27
         version: 3.0.0-27
@@ -328,12 +328,33 @@ packages:
       react: ^17.0.2 || ^18.2.0
       react-dom: ^17.0.2 || ^18.2.0
 
-  '@headlessui/react@1.7.19':
-    resolution: {integrity: sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==}
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.11':
+    resolution: {integrity: sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==}
+
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.26.25':
+    resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@headlessui/react@2.1.10':
+    resolution: {integrity: sha512-6mLa2fjMDAFQi+/R10B+zU3edsUk/MDtENB2zHho0lqKU1uzhAfJLUduWds4nCo8wbl3vULtC5rJfZAQ1yqIng==}
     engines: {node: '>=10'}
     peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
+      react: ^18
+      react-dom: ^18
 
   '@humanfs/core@0.19.0':
     resolution: {integrity: sha512-2cbWIHbZVEweE853g8jymffCA+NCMiuqeECeBBLm8dg2oFdjuGJhgN4UAbI+6v0CKbbhvtXA4qV8YR5Ji86nmw==}
@@ -408,8 +429,8 @@ packages:
   '@livekit/protocol@1.24.0':
     resolution: {integrity: sha512-9dCsqnkMn7lvbI4NGh18zhLDsrXyUcpS++TEFgEk5Xv1WM3R2kT3EzqgL1P/mr3jaabM6rJ8wZA/KJLuQNpF5w==}
 
-  '@nats-io/jetstream@3.0.0-10':
-    resolution: {integrity: sha512-FOdwBximucQszBAsSAckqhXxh0WZozKbRTMzODCudcHpOEv0jUwnoqFLG/8r607pJDX1gdiYADF5hpeV3gvh7A==}
+  '@nats-io/jetstream@3.0.0-11':
+    resolution: {integrity: sha512-puevQAeiETf7QhaQtGKhLKnhVW9eC3D2Ao/qPMezRfvzDlH14JmNOyWAWPS5haIKxKbK1oCVKqnte3aYsaqbUw==}
 
   '@nats-io/nats-core@3.0.0-27':
     resolution: {integrity: sha512-xJvUWoRvUTG/3K4Ppf5KXTZezicbvd2o/psMyI7YPtIxKZsZALXL/bLoNb7FB/Hw4jECioZE7LZCSK41npFD2A==}
@@ -554,6 +575,27 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@react-aria/focus@3.18.4':
+    resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
+  '@react-aria/interactions@3.22.4':
+    resolution: {integrity: sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
+  '@react-aria/ssr@3.9.6':
+    resolution: {integrity: sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
+  '@react-aria/utils@3.25.3':
+    resolution: {integrity: sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
   '@react-dnd/asap@5.0.2':
     resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==}
 
@@ -563,6 +605,16 @@ packages:
   '@react-dnd/shallowequal@4.0.2':
     resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}
 
+  '@react-stately/utils@3.10.4':
+    resolution: {integrity: sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
+  '@react-types/shared@3.25.0':
+    resolution: {integrity: sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0
+
   '@reduxjs/toolkit@2.3.0':
     resolution: {integrity: sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==}
     peerDependencies:
@@ -602,6 +654,9 @@ packages:
     peerDependencies:
       size-limit: 11.1.6
 
+  '@swc/helpers@0.5.13':
+    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
   '@tanstack/react-virtual@3.10.8':
     resolution: {integrity: sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==}
     peerDependencies:
@@ -1260,9 +1315,6 @@ packages:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
 
-  client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-
   cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
 
@@ -3680,6 +3732,9 @@ packages:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
   tailwindcss@3.4.14:
     resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
     engines: {node: '>=14.0.0'}
@@ -4159,10 +4214,37 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.11':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/dom': 1.6.11
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
+  '@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@floating-ui/utils': 0.2.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.8': {}
+
+  '@headlessui/react@2.1.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/focus': 3.18.4(react@18.3.1)
+      '@react-aria/interactions': 3.22.4(react@18.3.1)
       '@tanstack/react-virtual': 3.10.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      client-only: 0.0.1
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -4243,7 +4325,7 @@ snapshots:
     dependencies:
       '@bufbuild/protobuf': 1.10.0
 
-  '@nats-io/jetstream@3.0.0-10':
+  '@nats-io/jetstream@3.0.0-11':
     dependencies:
       '@nats-io/nats-core': 3.0.0-27
 
@@ -4371,12 +4453,52 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@react-aria/focus@3.18.4(react@18.3.1)':
+    dependencies:
+      '@react-aria/interactions': 3.22.4(react@18.3.1)
+      '@react-aria/utils': 3.25.3(react@18.3.1)
+      '@react-types/shared': 3.25.0(react@18.3.1)
+      '@swc/helpers': 0.5.13
+      clsx: 2.1.1
+      react: 18.3.1
+
+  '@react-aria/interactions@3.22.4(react@18.3.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.6(react@18.3.1)
+      '@react-aria/utils': 3.25.3(react@18.3.1)
+      '@react-types/shared': 3.25.0(react@18.3.1)
+      '@swc/helpers': 0.5.13
+      react: 18.3.1
+
+  '@react-aria/ssr@3.9.6(react@18.3.1)':
+    dependencies:
+      '@swc/helpers': 0.5.13
+      react: 18.3.1
+
+  '@react-aria/utils@3.25.3(react@18.3.1)':
+    dependencies:
+      '@react-aria/ssr': 3.9.6(react@18.3.1)
+      '@react-stately/utils': 3.10.4(react@18.3.1)
+      '@react-types/shared': 3.25.0(react@18.3.1)
+      '@swc/helpers': 0.5.13
+      clsx: 2.1.1
+      react: 18.3.1
+
   '@react-dnd/asap@5.0.2': {}
 
   '@react-dnd/invariant@4.0.2': {}
 
   '@react-dnd/shallowequal@4.0.2': {}
 
+  '@react-stately/utils@3.10.4(react@18.3.1)':
+    dependencies:
+      '@swc/helpers': 0.5.13
+      react: 18.3.1
+
+  '@react-types/shared@3.25.0(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@reduxjs/toolkit@2.3.0(react-redux@9.1.2(@types/react@18.3.11)(react@18.3.1)(redux@5.0.1))(react@18.3.1)':
     dependencies:
       immer: 10.1.1
@@ -4420,6 +4542,10 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  '@swc/helpers@0.5.13':
+    dependencies:
+      tslib: 2.7.0
+
   '@tanstack/react-virtual@3.10.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@tanstack/virtual-core': 3.10.8
@@ -5193,8 +5319,6 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 7.2.0
 
-  client-only@0.0.1: {}
-
   cliui@7.0.4:
     dependencies:
       string-width: 4.2.3
@@ -7631,6 +7755,8 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.7.0
 
+  tabbable@6.2.0: {}
+
   tailwindcss@3.4.14:
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/src/components/breakout-room/breakoutRoomInvitation.tsx b/src/components/breakout-room/breakoutRoomInvitation.tsx
index 116dfc8e..6e3d63b6 100644
--- a/src/components/breakout-room/breakoutRoomInvitation.tsx
+++ b/src/components/breakout-room/breakoutRoomInvitation.tsx
@@ -2,7 +2,12 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
 import { LocalAudioTrack, Track } from 'livekit-client';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import copy from 'copy-text-to-clipboard';
 import { JoinBreakoutRoomReqSchema } from 'plugnmeet-protocol-js';
@@ -137,7 +142,7 @@ const BreakoutRoomInvitation = () => {
             static={false}
           >
             <div className="min-h-screen px-4 text-center flex items-end justify-end">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -146,8 +151,8 @@ const BreakoutRoomInvitation = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -155,7 +160,7 @@ const BreakoutRoomInvitation = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -174,12 +179,12 @@ const BreakoutRoomInvitation = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-base font-medium leading-6 text-gray-900 dark:text-darkText text-left mb-2"
                   >
                     {t('breakout-room.invitation-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     <span className="text-black dark:text-darkText text-sm">
@@ -216,7 +221,7 @@ const BreakoutRoomInvitation = () => {
                     </div>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/breakout-room/form/index.tsx b/src/components/breakout-room/form/index.tsx
index c41097fa..8ec950c8 100644
--- a/src/components/breakout-room/form/index.tsx
+++ b/src/components/breakout-room/form/index.tsx
@@ -152,7 +152,7 @@ const FromElems = () => {
       store.getState().session.currentRoom.metadata?.roomFeatures
         ?.breakoutRoomFeatures?.allowedNumberRooms ?? 6;
 
-    const options: Array<JSX.Element> = [];
+    const options: Array<React.JSX.Element> = [];
     for (let i = 0; i < max; i++) {
       options.push(
         <option key={i} value={i + 1}>
diff --git a/src/components/breakout-room/index.tsx b/src/components/breakout-room/index.tsx
index c9ffa7a3..ba3681ec 100644
--- a/src/components/breakout-room/index.tsx
+++ b/src/components/breakout-room/index.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { store, useAppDispatch } from '../../store';
@@ -31,7 +36,7 @@ const BreakoutRoom = () => {
             static={false}
           >
             <div className="min-h-screen px-4 text-center flex items-center justify-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -40,8 +45,8 @@ const BreakoutRoom = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -49,7 +54,7 @@ const BreakoutRoom = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -68,12 +73,12 @@ const BreakoutRoom = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white ltr:text-left rtl:text-right mb-2"
                   >
                     {t('breakout-room.modal-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     {breakoutRoomIsActive ? (
@@ -83,7 +88,7 @@ const BreakoutRoom = () => {
                     )}
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/chat/chatTabs.tsx b/src/components/chat/chatTabs.tsx
index f2a7bdff..0e946af9 100644
--- a/src/components/chat/chatTabs.tsx
+++ b/src/components/chat/chatTabs.tsx
@@ -1,6 +1,11 @@
 import React, { useEffect, useState, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 
 import { RootState, store, useAppDispatch, useAppSelector } from '../../store';
@@ -154,13 +159,13 @@ const ChatTabs = () => {
             leaveFrom="opacity-100 z-90"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-darkPrimary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOptions className="absolute max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-darkPrimary py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {chatOptions.map((option) => (
-                <Listbox.Option
+                <ListboxOption
                   key={option.id}
-                  className={({ active }) =>
+                  className={({ focus }) =>
                     `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-                      active
+                      focus
                         ? 'bg-primaryColor text-white'
                         : 'text-gray-900 dark:text-darkText'
                     }`
@@ -202,9 +207,9 @@ const ChatTabs = () => {
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
diff --git a/src/components/footer/icons/menus.tsx b/src/components/footer/icons/menus.tsx
index ca1d88ad..d9ff2124 100644
--- a/src/components/footer/icons/menus.tsx
+++ b/src/components/footer/icons/menus.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { createSelector } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
@@ -325,9 +331,9 @@ const MenusIcon = () => {
         <Menu>
           {({ open }) => (
             <>
-              <Menu.Button className="footer-icon h-[35px] lg:h-[40px] w-[35px] lg:w-[40px] rounded-full bg-[#F2F2F2] dark:bg-darkSecondary2 hover:bg-[#ECF4FF] flex items-center justify-center cursor-pointer">
+              <MenuButton className="footer-icon h-[35px] lg:h-[40px] w-[35px] lg:w-[40px] rounded-full bg-[#F2F2F2] dark:bg-darkSecondary2 hover:bg-[#ECF4FF] flex items-center justify-center cursor-pointer">
                 <i className="pnm-menu-horizontal primaryColor dark:text-darkText text-[5px] lg:text-[5px]" />
-              </Menu.Button>
+              </MenuButton>
 
               {/* Use the Transition component. */}
               <Transition
@@ -340,13 +346,13 @@ const MenusIcon = () => {
                 leaveTo="transform scale-95 opacity-0"
               >
                 {/* Mark this component as `static` */}
-                <Menu.Items
+                <MenuItems
                   static
                   className="origin-bottom-left sm:-left-20 lg:-left-28 right-0 sm:right-auto z-[9999] absolute mt-2 w-60 lg:w-72 bottom-[48px] rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 dark:divide-secondaryColor focus:outline-none"
                 >
                   {roomFeatures?.allowRtmp ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="footer-podcast-button text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => openRtmpModal()}
@@ -362,11 +368,11 @@ const MenusIcon = () => {
                             ? t('footer.icons.stop-rtmp-broadcasting')
                             : t('footer.icons.start-rtmp-broadcasting')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   <div className="py-1" role="none">
-                    <Menu.Item>
+                    <MenuItem>
                       <button
                         className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                         onClick={() => muteAllUsers()}
@@ -374,11 +380,11 @@ const MenusIcon = () => {
                         <i className="pnm-mic-mute text-primaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor" />
                         {t('footer.menus.mute-all-users')}
                       </button>
-                    </Menu.Item>
+                    </MenuItem>
                   </div>
                   {roomFeatures?.sharedNotePadFeatures?.allowedSharedNotePad ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => toggleSharedNotepad()}
@@ -388,13 +394,13 @@ const MenusIcon = () => {
                             ? t('footer.menus.disable-shared-notepad')
                             : t('footer.menus.enable-shared-notepad')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   {roomFeatures?.externalMediaPlayerFeatures
                     ?.allowedExternalMediaPlayer ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => toggleExternalMediaPlayer()}
@@ -404,12 +410,12 @@ const MenusIcon = () => {
                             ? t('footer.menus.stop-external-media-player')
                             : t('footer.menus.start-external-media-player')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   {roomFeatures?.displayExternalLinkFeatures?.isAllow ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => toggleDisplayExternalLinkModal()}
@@ -419,12 +425,12 @@ const MenusIcon = () => {
                             ? t('footer.menus.stop-display-external-link')
                             : t('footer.menus.start-display-external-link')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   {roomFeatures?.waitingRoomFeatures?.isActive ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => openManageWaitingRoomModal()}
@@ -432,12 +438,12 @@ const MenusIcon = () => {
                           <i className="pnm-waiting-room text-primaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor" />
                           {t('footer.menus.manage-waiting-room')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   {roomFeatures?.speechToTextTranslationFeatures?.isAllow ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => openSpeechServiceSettingsModal()}
@@ -445,12 +451,12 @@ const MenusIcon = () => {
                           <i className="pnm-closed-captioning text-primaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor" />
                           {t('footer.menus.speech-to-text-settings')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   {roomFeatures?.breakoutRoomFeatures?.isAllow ? (
                     <div className="py-1" role="none">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                           onClick={() => openManageBreakoutRoomModal()}
@@ -458,11 +464,11 @@ const MenusIcon = () => {
                           <i className="pnm-breakout-room text-primaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor" />
                           {t('footer.menus.manage-breakout-room')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
                   ) : null}
                   <div className="py-1" role="none">
-                    <Menu.Item>
+                    <MenuItem>
                       <button
                         className="text-gray-700 dark:text-darkText rounded group flex items-center py-1 lg:py-2 px-4 text-xs lg:text-sm ltr:text-left rtl:text-right w-full transition ease-in hover:text-secondaryColor hover:dark:text-secondaryColor"
                         onClick={() => openLockSettingsModal()}
@@ -470,9 +476,9 @@ const MenusIcon = () => {
                         <i className="pnm-lock text-primaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor" />
                         {t('footer.menus.room-lock-settings')}
                       </button>
-                    </Menu.Item>
+                    </MenuItem>
                   </div>
-                </Menu.Items>
+                </MenuItems>
               </Transition>
             </>
           )}
diff --git a/src/components/footer/icons/mic-menu/index.tsx b/src/components/footer/icons/mic-menu/index.tsx
index 5576feee..dc77b400 100644
--- a/src/components/footer/icons/mic-menu/index.tsx
+++ b/src/components/footer/icons/mic-menu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, Transition } from '@headlessui/react';
 import { Room } from 'livekit-client';
 
 import MicMenuItems from './items';
@@ -15,11 +15,11 @@ const MicMenu = ({ currentRoom }: IMicMenuProps) => {
         <Menu>
           {({ open }) => (
             <>
-              <Menu.Button>
+              <MenuButton>
                 <div className="arrow-down absolute -bottom-1 -right-1 w-[15px] h-[15px] rounded-full bg-white dark:bg-secondaryColor flex items-center justify-center">
                   <i className="pnm-arrow-below text-[10px] dark:text-darkPrimary sm:text-[12px]" />
                 </div>
-              </Menu.Button>
+              </MenuButton>
 
               <Transition
                 show={open}
diff --git a/src/components/footer/icons/mic-menu/items.tsx b/src/components/footer/icons/mic-menu/items.tsx
index bb468219..de93853c 100644
--- a/src/components/footer/icons/mic-menu/items.tsx
+++ b/src/components/footer/icons/mic-menu/items.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem, MenuItems } from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { Room, Track } from 'livekit-client';
 import { useTranslation } from 'react-i18next';
@@ -36,14 +36,14 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
   const isMicMuted = useAppSelector(isMicMutedSelector);
   const selectedAudioDevice = useAppSelector(selectedAudioDeviceSelector);
 
-  const [devicesMenu, setDevicesMenu] = useState<Array<JSX.Element>>();
+  const [devicesMenu, setDevicesMenu] = useState<Array<React.JSX.Element>>();
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
     const devicesMenu = audioDevices.map((device) => {
       return (
         <div className="" role="none" key={device.id}>
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <p
                 className={`${
@@ -56,7 +56,7 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
                 {device.label}
               </p>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
       );
     });
@@ -110,13 +110,13 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
 
   const menuItems = () => {
     return (
-      <Menu.Items
+      <MenuItems
         static
         className="origin-bottom-right z-[9999] absolute ltr:left-0 rtl:-left-4 mt-2 w-40 bottom-[40px] rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 dark:divide-secondaryColor focus:outline-none"
       >
         {devicesMenu}
         <div className="" role="none">
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <p
                 className="text-gray-700 dark:text-darkText rounded group flex items-center px-3 py-[0.4rem] text-xs transition ease-in hover:bg-primaryColor hover:text-white cursor-pointer"
@@ -127,10 +127,10 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
                   : t('footer.menus.mute-microphone')}
               </p>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
         <div className="" role="none">
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <p
                 className="text-red-900 group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs transition ease-in hover:bg-red-400 hover:text-white cursor-pointer"
@@ -139,9 +139,9 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
                 {t('footer.menus.leave-microphone')}
               </p>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
-      </Menu.Items>
+      </MenuItems>
     );
   };
 
diff --git a/src/components/footer/icons/recording/recordingModal.tsx b/src/components/footer/icons/recording/recordingModal.tsx
index 57115a00..25320986 100644
--- a/src/components/footer/icons/recording/recordingModal.tsx
+++ b/src/components/footer/icons/recording/recordingModal.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { RecordingFeatures } from 'plugnmeet-protocol-js';
 
@@ -42,7 +47,7 @@ const RecordingModal = ({
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -51,8 +56,8 @@ const RecordingModal = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -60,7 +65,7 @@ const RecordingModal = ({
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -79,12 +84,12 @@ const RecordingModal = ({
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white ltr:text-left rtl:text-right mb-2"
                   >
                     {t('footer.icons.how-to-record')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">
                     <form
@@ -161,7 +166,7 @@ const RecordingModal = ({
                     </form>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/footer/icons/webcam-menu/index.tsx b/src/components/footer/icons/webcam-menu/index.tsx
index d60ffbd5..5079a9e0 100644
--- a/src/components/footer/icons/webcam-menu/index.tsx
+++ b/src/components/footer/icons/webcam-menu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, Transition } from '@headlessui/react';
 import { Room } from 'livekit-client';
 import WebcamMenuItems from './items';
 
@@ -14,11 +14,11 @@ const WebcamMenu = ({ currentRoom }: IWebcamMenuProps) => {
         <Menu>
           {({ open }) => (
             <>
-              <Menu.Button>
+              <MenuButton>
                 <div className="arrow-down absolute -bottom-1 -right-1 w-[15px] h-[15px] rounded-full bg-white dark:bg-secondaryColor flex items-center justify-center">
                   <i className="pnm-arrow-below text-[10px] sm:text-[12px] dark:text-darkSecondary" />
                 </div>
-              </Menu.Button>
+              </MenuButton>
 
               {/* Use the Transition component. */}
               <Transition
diff --git a/src/components/footer/icons/webcam-menu/items.tsx b/src/components/footer/icons/webcam-menu/items.tsx
index e734950d..f6ac886c 100644
--- a/src/components/footer/icons/webcam-menu/items.tsx
+++ b/src/components/footer/icons/webcam-menu/items.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem, MenuItems } from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { Room, Track } from 'livekit-client';
 import { useTranslation } from 'react-i18next';
@@ -31,14 +31,14 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
   const videoDevices = useAppSelector(videoDevicesSelector);
   const selectedVideoDevice = useAppSelector(selectedVideoDeviceSelector);
 
-  const [devicesMenu, setDevicesMenu] = useState<Array<JSX.Element>>();
+  const [devicesMenu, setDevicesMenu] = useState<Array<React.JSX.Element>>();
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
     const devicesMenu = videoDevices.map((device) => {
       return (
         <div className="" role="none" key={device.id}>
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <p
                 className={`${
@@ -51,7 +51,7 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
                 {device.label}
               </p>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
       );
     });
@@ -88,13 +88,13 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
   };
 
   return (
-    <Menu.Items
+    <MenuItems
       static
       className="origin-bottom-right z-[9999] absolute ltr:left-0 rtl:-left-4 mt-2 w-40 bottom-[40px] rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 dark:divide-secondaryColor focus:outline-none"
     >
       {devicesMenu}
       <div className="" role="none">
-        <Menu.Item>
+        <MenuItem>
           {() => (
             <p
               className="text-red-900 group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs transition ease-in hover:bg-red-400 hover:text-white cursor-pointer"
@@ -103,9 +103,9 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
               {t('footer.menus.leave-webcam')}
             </p>
           )}
-        </Menu.Item>
+        </MenuItem>
       </div>
-    </Menu.Items>
+    </MenuItems>
   );
 };
 
diff --git a/src/components/footer/modals/displayExternalLinkModal.tsx b/src/components/footer/modals/displayExternalLinkModal.tsx
index b10b98e0..068f1783 100644
--- a/src/components/footer/modals/displayExternalLinkModal.tsx
+++ b/src/components/footer/modals/displayExternalLinkModal.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { createSelector } from '@reduxjs/toolkit';
@@ -113,7 +118,7 @@ const DisplayExternalLinkModal = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -122,8 +127,8 @@ const DisplayExternalLinkModal = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -131,7 +136,7 @@ const DisplayExternalLinkModal = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -150,12 +155,12 @@ const DisplayExternalLinkModal = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white ltr:text-left rtl:text-right mb-2"
                   >
                     {t('external-display-link-display.modal-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">
                     <form method="POST" onSubmit={(e) => onSubmit(e)}>
@@ -324,7 +329,7 @@ const DisplayExternalLinkModal = () => {
                     </form>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/footer/modals/externalMediaPlayer/start.tsx b/src/components/footer/modals/externalMediaPlayer/start.tsx
index 2d7cb39d..e1450e56 100644
--- a/src/components/footer/modals/externalMediaPlayer/start.tsx
+++ b/src/components/footer/modals/externalMediaPlayer/start.tsx
@@ -1,5 +1,11 @@
 import React, { Fragment } from 'react';
-import { Dialog, Tab, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Tab,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { updateShowExternalMediaPlayerModal } from '../../../../store/slices/bottomIconsActivitySlice';
@@ -45,7 +51,7 @@ const StartPlaybackModal = ({ isActive }: IStartPlaybackModalProps) => {
           onClose={() => false}
         >
           <div className="min-h-screen px-4 text-center">
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
@@ -54,8 +60,8 @@ const StartPlaybackModal = ({ isActive }: IStartPlaybackModalProps) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-            </Transition.Child>
+              <div className="fixed inset-0 bg-black opacity-30" />
+            </TransitionChild>
 
             <span
               className="inline-block h-screen align-middle"
@@ -63,7 +69,7 @@ const StartPlaybackModal = ({ isActive }: IStartPlaybackModalProps) => {
             >
               &#8203;
             </span>
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -82,12 +88,12 @@ const StartPlaybackModal = ({ isActive }: IStartPlaybackModalProps) => {
                   <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                 </button>
 
-                <Dialog.Title
+                <DialogTitle
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900 dark:text-white ltr:text-left rtl:text-right mb-2"
                 >
                   {t('footer.modal.external-media-player-title')}
-                </Dialog.Title>
+                </DialogTitle>
                 <hr />
                 <div className="mt-6">
                   <Tab.Group vertical>
@@ -127,7 +133,7 @@ const StartPlaybackModal = ({ isActive }: IStartPlaybackModalProps) => {
                   </Tab.Group>
                 </div>
               </div>
-            </Transition.Child>
+            </TransitionChild>
           </div>
         </Dialog>
       </Transition>
diff --git a/src/components/footer/modals/lockSettingsModal.tsx b/src/components/footer/modals/lockSettingsModal.tsx
index 510ec926..7c0dac04 100644
--- a/src/components/footer/modals/lockSettingsModal.tsx
+++ b/src/components/footer/modals/lockSettingsModal.tsx
@@ -1,6 +1,14 @@
 import React, { Fragment } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { Transition, Dialog, Switch } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Switch,
+  Field,
+  Transition,
+  TransitionChild,
+  Label,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import {
@@ -66,11 +74,11 @@ const LockSettingsModal = () => {
 
   const showLockItems = () => {
     return (
-      <Switch.Group>
+      <Field>
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-microphone')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockMicrophone ?? false}
             onChange={(e) => updateLockSettings(e, 'mic')}
@@ -91,9 +99,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-webcams')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockWebcam ?? false}
             onChange={(e) => updateLockSettings(e, 'webcam')}
@@ -114,9 +122,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-screen-sharing')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockScreenSharing ?? false}
             onChange={(e) => updateLockSettings(e, 'screenShare')}
@@ -137,9 +145,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-whiteboard')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockWhiteboard ?? false}
             onChange={(e) => updateLockSettings(e, 'whiteboard')}
@@ -160,9 +168,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-shared-notepad')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockSharedNotepad ?? false}
             onChange={(e) => updateLockSettings(e, 'sharedNotepad')}
@@ -183,9 +191,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-chat')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockChat ?? false}
             onChange={(e) => updateLockSettings(e, 'chat')}
@@ -206,9 +214,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-send-message')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockChatSendMessage ?? false}
             onChange={(e) => updateLockSettings(e, 'sendChatMsg')}
@@ -229,9 +237,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-chat-file-share')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockChatFileShare ?? false}
             onChange={(e) => updateLockSettings(e, 'chatFile')}
@@ -252,9 +260,9 @@ const LockSettingsModal = () => {
         </div>
 
         <div className="flex items-center justify-between mb-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('footer.modal.lock-private-chat')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={roomLockSettings?.lockPrivateChat ?? false}
             onChange={(e) => updateLockSettings(e, 'privateChat')}
@@ -273,7 +281,7 @@ const LockSettingsModal = () => {
             />
           </Switch>
         </div>
-      </Switch.Group>
+      </Field>
     );
   };
 
@@ -287,7 +295,7 @@ const LockSettingsModal = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -296,8 +304,8 @@ const LockSettingsModal = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -305,7 +313,7 @@ const LockSettingsModal = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -324,16 +332,16 @@ const LockSettingsModal = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-2 ltr:text-left rtl:text-right"
                   >
                     {t('footer.modal.lock-settings-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">{showLockItems()}</div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/footer/modals/microphoneModal.tsx b/src/components/footer/modals/microphoneModal.tsx
index 441e017d..a349f969 100644
--- a/src/components/footer/modals/microphoneModal.tsx
+++ b/src/components/footer/modals/microphoneModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogTitle, Transition } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { getDevices } from '../../../helpers/utils';
 import { IMediaDevice } from '../../../store/slices/interfaces/roomSettings';
@@ -16,7 +16,7 @@ const MicrophoneModal = ({
 }: MicrophoneModalProps) => {
   const { t } = useTranslation();
   const [selectedMic, setSelectMic] = useState<string>('');
-  const [devices, setDevices] = useState<Array<JSX.Element>>([]);
+  const [devices, setDevices] = useState<Array<React.JSX.Element>>([]);
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -45,7 +45,7 @@ const MicrophoneModal = ({
         dispatch(addAudioDevices(audioDevices));
       }
     };
-    getDeviceMics();
+    getDeviceMics().then();
   }, [dispatch]);
 
   const selectOrClose = (onlyClose = false) => {
@@ -69,7 +69,7 @@ const MicrophoneModal = ({
           className="share-microphone-popup-wrap fixed z-[99999] inset-0 overflow-y-auto"
         >
           <div className="flex items-center justify-center min-h-screen">
-            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+            <div className="fixed inset-0 bg-black opacity-30" />
 
             <div className="popup-inner bg-white dark:bg-darkPrimary w-full max-w-sm rounded-3xl shadow-header relative px-6 py-14">
               <button
@@ -80,9 +80,9 @@ const MicrophoneModal = ({
                 <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 rotate-45" />
                 <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
               </button>
-              <Dialog.Title className="mb-6 dark:text-darkText">
+              <DialogTitle className="mb-6 dark:text-darkText">
                 {t('footer.modal.select-microphone')}
-              </Dialog.Title>
+              </DialogTitle>
 
               <div className="col-span-6 sm:col-span-3">
                 <select
diff --git a/src/components/footer/modals/rtmpModal.tsx b/src/components/footer/modals/rtmpModal.tsx
index b8fe48bb..60fb35a6 100644
--- a/src/components/footer/modals/rtmpModal.tsx
+++ b/src/components/footer/modals/rtmpModal.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState, useEffect } from 'react';
-import { Transition, Dialog } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { isURL, isEmpty } from 'validator';
 import { toast } from 'react-toastify';
@@ -60,7 +65,7 @@ const RtmpModal = () => {
     if (isEmpty(serverKey)) {
       return;
     }
-    let url = '';
+    let url: string;
     if (provider === 'other') {
       url = serverUrl;
     } else {
@@ -120,7 +125,7 @@ const RtmpModal = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -129,8 +134,8 @@ const RtmpModal = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -138,7 +143,7 @@ const RtmpModal = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -157,12 +162,12 @@ const RtmpModal = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white ltr:text-left rtl:text-right mb-2"
                   >
                     {t('footer.modal.rtmp-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">
                     <form
@@ -244,7 +249,7 @@ const RtmpModal = () => {
                     </form>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
@@ -293,7 +298,7 @@ const RtmpModal = () => {
             onClose={onCloseAlertModal}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -302,8 +307,8 @@ const RtmpModal = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -311,7 +316,7 @@ const RtmpModal = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -330,12 +335,12 @@ const RtmpModal = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900"
                   >
                     {t('footer.modal.rtmp-close-confirm')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <div className="mt-2">
                     <p className="text-sm text-gray-500">
                       {t('footer.modal.rtmp-close-msg')}
@@ -358,7 +363,7 @@ const RtmpModal = () => {
                     </button>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/footer/modals/webcam/shareWebcam.tsx b/src/components/footer/modals/webcam/shareWebcam.tsx
index 9a70839f..32fa40cd 100644
--- a/src/components/footer/modals/webcam/shareWebcam.tsx
+++ b/src/components/footer/modals/webcam/shareWebcam.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogTitle, Transition } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { useAppSelector, RootState, useAppDispatch } from '../../../../store';
@@ -26,7 +26,7 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
   const showVideoShareModal = useAppSelector(showVideoShareModalSelector);
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const [selectedWebcam, setSelectWebcam] = useState<string>('');
-  const [devices, setDevices] = useState<Array<JSX.Element>>([]);
+  const [devices, setDevices] = useState<Array<React.JSX.Element>>([]);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -35,7 +35,7 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
       const mics = await getDevices('videoinput');
       const videoDevices: Array<IMediaDevice> = [];
 
-      const options = mics.map((mic) => {
+      const options = mics.map((mic, index) => {
         const device: IMediaDevice = {
           id: mic.deviceId,
           label: mic.label,
@@ -43,7 +43,10 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
         videoDevices.push(device);
 
         return (
-          <option value={mic.deviceId} key={mic.deviceId}>
+          <option
+            value={mic.deviceId}
+            key={`device-id-${mic.deviceId}-${index}`}
+          >
             {mic.label}
           </option>
         );
@@ -55,7 +58,7 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
         dispatch(addVideoDevices(videoDevices));
       }
     };
-    getDeviceWebcams();
+    getDeviceWebcams().then();
   }, [dispatch]);
 
   useEffect(() => {
@@ -99,7 +102,7 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
           className="share-webcam-popup-wrap fixed z-[99999] inset-0 overflow-y-auto"
         >
           <div className="flex items-center justify-center min-h-screen">
-            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+            <div className="fixed inset-0 bg-black opacity-30" />
 
             <div className="popup-inner bg-white dark:bg-darkPrimary w-full max-w-md rounded-3xl shadow-header relative px-6 py-14">
               <button
@@ -110,9 +113,9 @@ const ShareWebcamModal = ({ onSelectedDevice }: IShareWebcamModal) => {
                 <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 rotate-45" />
                 <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
               </button>
-              <Dialog.Title className="mb-6 dark:text-darkText">
+              <DialogTitle className="mb-6 dark:text-darkText">
                 {t('footer.modal.select-webcam')}
-              </Dialog.Title>
+              </DialogTitle>
 
               <div className="col-span-6 sm:col-span-3">
                 <select
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index b6143796..ae1ed007 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -1,6 +1,13 @@
 import React, { useEffect, useState, Fragment } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { Dialog, Menu, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Menu,
+  MenuButton,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import {
@@ -106,7 +113,7 @@ const Header = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -115,8 +122,8 @@ const Header = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -124,7 +131,7 @@ const Header = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -143,12 +150,12 @@ const Header = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                   >
                     {t('header.menus.alert.confirm')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <div className="mt-2">
                     <p className="text-sm text-gray-500 dark:text-darkText">
                       {alertText}
@@ -171,7 +178,7 @@ const Header = () => {
                     </button>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
@@ -220,14 +227,15 @@ const Header = () => {
             <Menu>
               {({ open }) => (
                 <>
-                  <Menu.Button className="relative flex-shrink-0 p-2 rtl:-ml-4">
+                  <MenuButton className="relative flex-shrink-0 p-2 rtl:-ml-4">
                     <div className="h-5 w-5 rotate-90 ">
                       <i className="pnm-menu-small dark:text-secondaryColor" />
                     </div>
-                  </Menu.Button>
+                  </MenuButton>
 
                   {/* Use the Transition component. */}
                   <Transition
+                    as={'div'}
                     show={open}
                     enter="transition duration-100 ease-out"
                     enterFrom="transform scale-95 opacity-0"
diff --git a/src/components/header/keyboardShortcuts.tsx b/src/components/header/keyboardShortcuts.tsx
index ab30897a..11a838b4 100644
--- a/src/components/header/keyboardShortcuts.tsx
+++ b/src/components/header/keyboardShortcuts.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { createSelector } from '@reduxjs/toolkit';
 
@@ -32,7 +37,7 @@ const KeyboardShortcuts = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -41,8 +46,8 @@ const KeyboardShortcuts = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -50,7 +55,7 @@ const KeyboardShortcuts = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -69,12 +74,12 @@ const KeyboardShortcuts = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-2"
                   >
                     {t('header.keyboard-shortcuts.title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     <table className="border-collapse border border-slate-500 dark:border-darkText w-full">
@@ -189,7 +194,7 @@ const KeyboardShortcuts = () => {
                     </table>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/header/menus.tsx b/src/components/header/menus.tsx
index c5664c2f..e7c532d5 100644
--- a/src/components/header/menus.tsx
+++ b/src/components/header/menus.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem, MenuItems } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { store, useAppDispatch } from '../../store';
@@ -34,12 +34,12 @@ const HeaderMenus = ({ onOpenAlert }: IHeaderMenusProps) => {
 
   const render = () => {
     return (
-      <Menu.Items
+      <MenuItems
         static
         className="HeaderSettingMenu origin-top-right z-10 absolute ltr:right-0 rtl:-left-4 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
       >
         <div className="py-1" role="none">
-          <Menu.Item>
+          <MenuItem>
             <button
               className="text-gray-700 dark:text-darkText rounded group flex items-center py-2 px-4 text-sm text-left w-full transition ease-in hover:text-secondaryColor"
               onClick={() => showRoomSettings()}
@@ -47,10 +47,10 @@ const HeaderMenus = ({ onOpenAlert }: IHeaderMenusProps) => {
               <i className="pnm-settings text-primaryColor dark:text-secondaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor dark:group-hover:text-white" />
               {t('header.menus.settings')}
             </button>
-          </Menu.Item>
+          </MenuItem>
         </div>
         <div className="py-1" role="none">
-          <Menu.Item>
+          <MenuItem>
             <button
               className="text-gray-700 dark:text-darkText rounded group flex items-center py-2 px-4 text-sm text-left w-full transition ease-in hover:text-secondaryColor"
               onClick={() => showKeyboardShortcuts()}
@@ -58,10 +58,10 @@ const HeaderMenus = ({ onOpenAlert }: IHeaderMenusProps) => {
               <i className="pnm-keyboard text-primaryColor dark:text-secondaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor dark:group-hover:text-white" />
               {t('header.menus.keyboard-shortcuts')}
             </button>
-          </Menu.Item>
+          </MenuItem>
         </div>
         <div className="py-1" role="none">
-          <Menu.Item>
+          <MenuItem>
             <button
               className="text-gray-700 dark:text-darkText rounded group flex items-center py-2 px-4 text-sm text-left w-full transition ease-in hover:text-secondaryColor"
               onClick={() => logout()}
@@ -69,11 +69,11 @@ const HeaderMenus = ({ onOpenAlert }: IHeaderMenusProps) => {
               <i className="pnm-logout text-primaryColor dark:text-secondaryColor ltr:mr-2 rtl:ml-2 transition ease-in group-hover:text-secondaryColor dark:group-hover:text-white" />
               {t('header.menus.logout')}
             </button>
-          </Menu.Item>
+          </MenuItem>
         </div>
         {isAdmin ? (
           <div className="py-1" role="none">
-            <Menu.Item>
+            <MenuItem>
               <button
                 className="text-red-900 dark:text-brandRed rounded group flex items-center py-2 px-4 text-sm text-left w-full transition ease-in"
                 onClick={() => endRoom()}
@@ -81,10 +81,10 @@ const HeaderMenus = ({ onOpenAlert }: IHeaderMenusProps) => {
                 <i className="pnm-call text-red-900 dark:text-brandRed ltr:mr-2 rtl:ml-2 transition ease-in " />
                 {t('header.menus.end')}
               </button>
-            </Menu.Item>
+            </MenuItem>
           </div>
         ) : null}
-      </Menu.Items>
+      </MenuItems>
     );
   };
   return <>{render()}</>;
diff --git a/src/components/header/room-settings/application.tsx b/src/components/header/room-settings/application.tsx
index c162551c..89906bf2 100644
--- a/src/components/header/room-settings/application.tsx
+++ b/src/components/header/room-settings/application.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '@headlessui/react';
+import { Field, Label, Switch } from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 
 import languages from '../../../helpers/languages';
@@ -74,11 +74,11 @@ const ApplicationSettings = () => {
             </select>
           </div>
         </div>
-        <Switch.Group>
+        <Field>
           <div className="flex items-center justify-between my-4">
-            <Switch.Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+            <Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
               {t('header.room-settings.enable-dark-theme')}
-            </Switch.Label>
+            </Label>
             <Switch
               checked={theme === 'dark'}
               onChange={toggleTheme}
@@ -97,7 +97,7 @@ const ApplicationSettings = () => {
               />
             </Switch>
           </div>
-        </Switch.Group>
+        </Field>
         <div className="grid">
           <div className="flex items-center justify-start">
             <label
diff --git a/src/components/header/room-settings/dataSavings.tsx b/src/components/header/room-settings/dataSavings.tsx
index de62ba21..3770ff9f 100644
--- a/src/components/header/room-settings/dataSavings.tsx
+++ b/src/components/header/room-settings/dataSavings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Switch } from '@headlessui/react';
+import { Field, Label, Switch } from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
 import { VideoQuality } from 'livekit-client';
@@ -79,11 +79,11 @@ const DataSavings = () => {
           </select>
         </div>
 
-        <Switch.Group>
+        <Field>
           <div className="flex items-center justify-between mb-2">
-            <Switch.Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+            <Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
               {t('header.room-settings.show-webcams')}
-            </Switch.Label>
+            </Label>
             <Switch
               checked={activateWebcamsView}
               onChange={toggleWebcamView}
@@ -103,9 +103,9 @@ const DataSavings = () => {
             </Switch>
           </div>
           <div className="flex items-center justify-between">
-            <Switch.Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+            <Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
               {t('header.room-settings.show-screen-share')}
-            </Switch.Label>
+            </Label>
             <Switch
               checked={activeScreenSharingView}
               onChange={toggleScreenShareView}
@@ -124,7 +124,7 @@ const DataSavings = () => {
               />
             </Switch>
           </div>
-        </Switch.Group>
+        </Field>
       </>
     );
   };
diff --git a/src/components/header/room-settings/index.tsx b/src/components/header/room-settings/index.tsx
index 4220ad5f..80e8571e 100644
--- a/src/components/header/room-settings/index.tsx
+++ b/src/components/header/room-settings/index.tsx
@@ -1,6 +1,12 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { createSelector } from '@reduxjs/toolkit';
-import { Transition, Dialog, Tab } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Tab,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import sanitizeHtml from 'sanitize-html';
 
@@ -154,7 +160,7 @@ const RoomSettings = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -163,8 +169,8 @@ const RoomSettings = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -172,7 +178,7 @@ const RoomSettings = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -191,17 +197,17 @@ const RoomSettings = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-2 ltr:text-left rtl:text-right"
                   >
                     {t('header.room-settings.title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">{showTabItems()}</div>
                   {displayBottomText()}
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/header/room-settings/notification.tsx b/src/components/header/room-settings/notification.tsx
index 9e1cf200..17ce01c1 100644
--- a/src/components/header/room-settings/notification.tsx
+++ b/src/components/header/room-settings/notification.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch } from '@headlessui/react';
+import { Field, Label, Switch } from '@headlessui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
 
@@ -24,11 +24,11 @@ const Notification = () => {
 
   const render = () => {
     return (
-      <Switch.Group>
+      <Field>
         <div className="flex items-center justify-between mb-2">
-          <Switch.Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
+          <Label className="pr-4 w-full dark:text-darkText ltr:text-left rtl:text-right">
             {t('header.room-settings.allow-audio-notification')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={allowPlayAudioNotification}
             onChange={toggleAudioNotification}
@@ -47,7 +47,7 @@ const Notification = () => {
             />
           </Switch>
         </div>
-      </Switch.Group>
+      </Field>
     );
   };
 
diff --git a/src/components/header/volumeControl.tsx b/src/components/header/volumeControl.tsx
index 3e73aa2e..8625552b 100644
--- a/src/components/header/volumeControl.tsx
+++ b/src/components/header/volumeControl.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, Transition, MenuItems } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import useStorePreviousInt from '../../helpers/hooks/useStorePreviousInt';
@@ -59,7 +59,7 @@ const VolumeControl = () => {
       <Menu>
         {({ open }) => (
           <>
-            <Menu.Button className="relative flex-shrink-0 p-2">
+            <MenuButton className="relative flex-shrink-0 p-2">
               <div className="h-4 w-4 -mt-[2px]">
                 {volume > 0 ? (
                   <i className="pnm-speaker primaryColor dark:text-secondaryColor" />
@@ -67,7 +67,7 @@ const VolumeControl = () => {
                   <i className="pnm-speaker-muted primaryColor dark:text-secondaryColor" />
                 )}
               </div>
-            </Menu.Button>
+            </MenuButton>
 
             {/* Use the Transition component. */}
             <Transition
@@ -79,7 +79,7 @@ const VolumeControl = () => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Menu.Items
+              <MenuItems
                 static
                 className="volume-popup-wrapper origin-top-right z-10 absolute ltr:right-0 rtl:left-0 top-4 mt-2 w-64 py-5 px-2 rounded-md shadow-lg bg-white dark:bg-darkPrimary/90 ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
               >
@@ -135,7 +135,7 @@ const VolumeControl = () => {
                     )}
                   </button>
                 </section>
-              </Menu.Items>
+              </MenuItems>
             </Transition>
           </>
         )}
diff --git a/src/components/main-area/index.tsx b/src/components/main-area/index.tsx
index c6506af3..c23e1510 100644
--- a/src/components/main-area/index.tsx
+++ b/src/components/main-area/index.tsx
@@ -164,7 +164,6 @@ const MainArea = () => {
   const renderLeftPanel = useMemo(() => {
     return (
       <Transition
-        className="transition-left-panel"
         show={isActiveParticipantsPanel}
         unmount={false}
         enter="transform transition duration-[400ms]"
@@ -174,7 +173,9 @@ const MainArea = () => {
         leaveFrom="opacity-100"
         leaveTo="opacity-0 -translate-x-full"
       >
-        <LeftPanel />
+        <div className="transition-left-panel">
+          <LeftPanel />
+        </div>
       </Transition>
     );
   }, [isActiveParticipantsPanel]);
@@ -199,7 +200,6 @@ const MainArea = () => {
     if (allowChat) {
       return (
         <Transition
-          className="transition-right-panel"
           show={isActiveChatPanel}
           unmount={false}
           enter="transform transition duration-[400ms]"
@@ -209,7 +209,9 @@ const MainArea = () => {
           leaveFrom="opacity-100"
           leaveTo="opacity-0 translate-x-full"
         >
-          <RightPanel />
+          <div className="transition-right-panel">
+            <RightPanel />
+          </div>
         </Transition>
       );
     }
diff --git a/src/components/media-elements/audios/audio.tsx b/src/components/media-elements/audios/audio.tsx
index c13cdd51..95feb930 100644
--- a/src/components/media-elements/audios/audio.tsx
+++ b/src/components/media-elements/audios/audio.tsx
@@ -1,16 +1,23 @@
 import React, { useEffect, useRef } from 'react';
 import { RemoteAudioTrack } from 'livekit-client';
 
-import { useAppSelector } from '../../../store';
+import { RootState, useAppSelector } from '../../../store';
 import { participantsSelector } from '../../../store/slices/participantSlice';
+import { createSelector } from '@reduxjs/toolkit';
 
 interface IAudioElmProps {
   audioTrack: RemoteAudioTrack;
   userId: string;
 }
 
+const isNatsServerConnectedSelector = createSelector(
+  (state: RootState) => state.roomSettings,
+  (roomSettings) => roomSettings.isNatsServerConnected,
+);
+
 const AudioElm = ({ audioTrack, userId }: IAudioElmProps) => {
   const ref = useRef<HTMLAudioElement>(null);
+  const isNatsServerConnected = useAppSelector(isNatsServerConnectedSelector);
   const participant = useAppSelector((state) =>
     participantsSelector.selectById(state, userId),
   );
@@ -42,6 +49,18 @@ const AudioElm = ({ audioTrack, userId }: IAudioElmProps) => {
     }
   }, [audioTrack, participant]);
 
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (!isNatsServerConnected) {
+      el.pause();
+    } else if (isNatsServerConnected && el.paused) {
+      el.play().then();
+    }
+  }, [isNatsServerConnected]);
+
   return (
     <div style={{ display: 'none' }}>
       <audio autoPlay ref={ref} />
diff --git a/src/components/media-elements/audios/index.tsx b/src/components/media-elements/audios/index.tsx
index 8538751e..74343a73 100644
--- a/src/components/media-elements/audios/index.tsx
+++ b/src/components/media-elements/audios/index.tsx
@@ -34,7 +34,7 @@ const AudioElements = () => {
     if (!audioSubscribers) {
       return null;
     }
-    const elms: Array<JSX.Element> = [];
+    const elms: Array<React.JSX.Element> = [];
     audioSubscribers.forEach((participant) => {
       participant.audioTrackPublications.forEach((track) => {
         if (track.audioTrack && track.audioTrack instanceof RemoteAudioTrack) {
diff --git a/src/components/media-elements/screenshare/audioElm.tsx b/src/components/media-elements/screenshare/audioElm.tsx
index 8eca950d..55c6ce60 100644
--- a/src/components/media-elements/screenshare/audioElm.tsx
+++ b/src/components/media-elements/screenshare/audioElm.tsx
@@ -10,11 +10,16 @@ const roomScreenShareAudioVolumeSelector = createSelector(
   (state: RootState) => state.roomSettings.roomScreenShareAudioVolume,
   (roomScreenShareAudioVolume) => roomScreenShareAudioVolume,
 );
+const isNatsServerConnectedSelector = createSelector(
+  (state: RootState) => state.roomSettings,
+  (roomSettings) => roomSettings.isNatsServerConnected,
+);
 
 const AudioElm = ({ audioTrack }: IAudioElmProps) => {
   const roomScreenShareAudioVolume = useAppSelector(
     roomScreenShareAudioVolumeSelector,
   );
+  const isNatsServerConnected = useAppSelector(isNatsServerConnectedSelector);
   const ref = useRef<HTMLAudioElement>(null);
 
   useEffect(() => {
@@ -36,6 +41,18 @@ const AudioElm = ({ audioTrack }: IAudioElmProps) => {
     audioTrack.setVolume(roomScreenShareAudioVolume);
   }, [audioTrack, roomScreenShareAudioVolume]);
 
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (!isNatsServerConnected) {
+      el.pause();
+    } else if (isNatsServerConnected && el.paused) {
+      el.play().then();
+    }
+  }, [isNatsServerConnected]);
+
   return (
     <div style={{ display: 'none' }}>
       <audio autoPlay ref={ref} />
diff --git a/src/components/media-elements/screenshare/index.tsx b/src/components/media-elements/screenshare/index.tsx
index c20bb142..a3c38bbd 100644
--- a/src/components/media-elements/screenshare/index.tsx
+++ b/src/components/media-elements/screenshare/index.tsx
@@ -36,7 +36,7 @@ const ScreenShareElements = () => {
 
   const renderElms = useMemo(() => {
     if (screenShareTracks) {
-      const elm = Array<JSX.Element>();
+      const elm = Array<React.JSX.Element>();
 
       screenShareTracks.forEach((tracks) => {
         tracks.forEach((track) => {
diff --git a/src/components/media-elements/screenshare/videoElm.tsx b/src/components/media-elements/screenshare/videoElm.tsx
index c54b827d..273cb147 100644
--- a/src/components/media-elements/screenshare/videoElm.tsx
+++ b/src/components/media-elements/screenshare/videoElm.tsx
@@ -2,13 +2,21 @@ import React, { useEffect, useState, useRef } from 'react';
 import { LocalTrackPublication, RemoteTrackPublication } from 'livekit-client';
 
 import './style.scss';
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState, useAppSelector } from '../../../store';
 
 interface IVideoElmProps {
   track: RemoteTrackPublication | LocalTrackPublication;
 }
 
+const isNatsServerConnectedSelector = createSelector(
+  (state: RootState) => state.roomSettings,
+  (roomSettings) => roomSettings.isNatsServerConnected,
+);
+
 const VideoElm = ({ track }: IVideoElmProps) => {
   const ref = useRef<HTMLVideoElement>(null);
+  const isNatsServerConnected = useAppSelector(isNatsServerConnectedSelector);
   const [loaded, setLoaded] = useState<boolean>(false);
   const [self, setSelf] = useState<boolean>(false);
 
@@ -29,6 +37,18 @@ const VideoElm = ({ track }: IVideoElmProps) => {
     };
   }, [track]);
 
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (!isNatsServerConnected) {
+      el.pause();
+    } else if (isNatsServerConnected && el.paused) {
+      el.play().then();
+    }
+  }, [isNatsServerConnected]);
+
   const onLoadedData = () => {
     setLoaded(true);
   };
diff --git a/src/components/media-elements/videos/helpers/utils.tsx b/src/components/media-elements/videos/helpers/utils.tsx
index b5101e06..f30817b8 100644
--- a/src/components/media-elements/videos/helpers/utils.tsx
+++ b/src/components/media-elements/videos/helpers/utils.tsx
@@ -5,9 +5,11 @@ import { chunk } from 'lodash';
  * For Mobile landscape mode,
  * 2 rows for any number
  */
-export const setForMobileLandscape = (participantsToRender: JSX.Element[]) => {
+export const setForMobileLandscape = (
+  participantsToRender: React.JSX.Element[],
+) => {
   const length = participantsToRender.length;
-  const elms: Array<JSX.Element> = [];
+  const elms: Array<React.JSX.Element> = [];
 
   if (length <= 3) {
     elms.push(
@@ -37,9 +39,11 @@ export const setForMobileLandscape = (participantsToRender: JSX.Element[]) => {
  * From 4 webcam,  2 rows
  * More than 4, 3 rows
  */
-export const setForMobileAndTablet = (participantsToRender: JSX.Element[]) => {
+export const setForMobileAndTablet = (
+  participantsToRender: React.JSX.Element[],
+) => {
   const length = participantsToRender.length;
-  const elms: Array<JSX.Element> = [];
+  const elms: Array<React.JSX.Element> = [];
 
   if (length <= 3) {
     elms.push(
@@ -81,9 +85,9 @@ export const setForMobileAndTablet = (participantsToRender: JSX.Element[]) => {
  * From 4 to 10, 2 rows
  * More than 10, 3 rows
  */
-export const setForPC = (participantsToRender: JSX.Element[]) => {
+export const setForPC = (participantsToRender: React.JSX.Element[]) => {
   const length = participantsToRender.length;
-  const elms: Array<JSX.Element> = [];
+  const elms: Array<React.JSX.Element> = [];
 
   if (length < 4) {
     elms.push(
diff --git a/src/components/media-elements/videos/index.tsx b/src/components/media-elements/videos/index.tsx
index 39b70ba0..3eb9ba04 100644
--- a/src/components/media-elements/videos/index.tsx
+++ b/src/components/media-elements/videos/index.tsx
@@ -26,9 +26,9 @@ const VideosComponent = ({ isVertical }: IVideosComponentProps) => {
   const refreshWebcams = useAppSelector(refreshWebcamsSelector);
   const [videoSubscribers, setVideoSubscribers] =
     useState<Map<string, LocalParticipant | RemoteParticipant>>();
-  const [allParticipants, setAllParticipants] = useState<Array<JSX.Element>>(
-    [],
-  );
+  const [allParticipants, setAllParticipants] = useState<
+    Array<React.JSX.Element>
+  >([]);
   const [totalNumWebcams, setTotalNumWebcams] = useState<number>(0);
   const currentConnection = getMediaServerConn();
 
@@ -54,11 +54,11 @@ const VideosComponent = ({ isVertical }: IVideosComponentProps) => {
     }
 
     let totalNumWebcams = 0;
-    const localSubscribers: Array<JSX.Element> = [];
-    const adminPinSubscribers: Array<JSX.Element> = [];
-    const adminSubscribers: Array<JSX.Element> = [];
-    const otherPinSubscribers: Array<JSX.Element> = [];
-    const otherSubscribers: Array<JSX.Element> = [];
+    const localSubscribers: Array<React.JSX.Element> = [];
+    const adminPinSubscribers: Array<React.JSX.Element> = [];
+    const adminSubscribers: Array<React.JSX.Element> = [];
+    const otherPinSubscribers: Array<React.JSX.Element> = [];
+    const otherSubscribers: Array<React.JSX.Element> = [];
 
     videoSubscribers.forEach((participant) => {
       // we will only take if source from Camera
diff --git a/src/components/media-elements/videos/video/videoElm.tsx b/src/components/media-elements/videos/video/videoElm.tsx
index 4435bd9f..5ae75352 100644
--- a/src/components/media-elements/videos/video/videoElm.tsx
+++ b/src/components/media-elements/videos/video/videoElm.tsx
@@ -18,12 +18,17 @@ const videoObjectFitSelector = createSelector(
   (state: RootState) => state.roomSettings,
   (roomSettings) => roomSettings.videoObjectFit,
 );
+const isNatsServerConnectedSelector = createSelector(
+  (state: RootState) => state.roomSettings,
+  (roomSettings) => roomSettings.isNatsServerConnected,
+);
 
 const VideoElm = ({ track }: IVideoElmProps) => {
   const ref = useRef<HTMLVideoElement>(null);
   const [loaded, setLoaded] = useState<boolean>();
   const roomVideoQuality = useAppSelector(roomVideoQualitySelector);
   const videoObjectFit = useAppSelector(videoObjectFitSelector);
+  const isNatsServerConnected = useAppSelector(isNatsServerConnectedSelector);
   const [videoFit, setVideoFit] = useState<any>(videoObjectFit);
 
   useEffect(() => {
@@ -53,6 +58,18 @@ const VideoElm = ({ track }: IVideoElmProps) => {
     }
   }, [track, videoObjectFit]);
 
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    if (!isNatsServerConnected) {
+      el.pause();
+    } else if (isNatsServerConnected && el.paused) {
+      el.play().then();
+    }
+  }, [isNatsServerConnected]);
+
   const onLoadedData = () => {
     setLoaded(true);
   };
diff --git a/src/components/media-elements/videos/videoParticipant.tsx b/src/components/media-elements/videos/videoParticipant.tsx
index c4177a09..d3e9a9e2 100644
--- a/src/components/media-elements/videos/videoParticipant.tsx
+++ b/src/components/media-elements/videos/videoParticipant.tsx
@@ -19,7 +19,7 @@ const VideoParticipant = ({
   );
 
   const renderVideoElms = useMemo(() => {
-    const elements: Array<JSX.Element> = [];
+    const elements: Array<React.JSX.Element> = [];
     participant.videoTrackPublications.forEach((track) => {
       if (track.source === Track.Source.Camera) {
         const elm = (
diff --git a/src/components/media-elements/videos/videosComponentElms.tsx b/src/components/media-elements/videos/videosComponentElms.tsx
index 2aef4768..7fba4488 100644
--- a/src/components/media-elements/videos/videosComponentElms.tsx
+++ b/src/components/media-elements/videos/videosComponentElms.tsx
@@ -18,7 +18,7 @@ import {
 import { ColumnCameraPosition } from '../../../store/slices/interfaces/roomSettings';
 
 interface IVideosComponentElmsProps {
-  allParticipants: JSX.Element[];
+  allParticipants: React.JSX.Element[];
   totalNumWebcams: number;
   isVertical?: boolean;
 }
@@ -60,7 +60,7 @@ const VideosComponentElms = ({
   const deviceType = store.getState().session.userDeviceType;
 
   const [participantsToRender, setParticipantsToRender] = useState<
-    Array<JSX.Element>
+    Array<React.JSX.Element>
   >([]);
   const [webcamPerPage, setWebcamPerPage] = useState<number>(
     isVertical ? VERTICAL_PER_PAGE : DESKTOP_PER_PAGE,
@@ -117,7 +117,7 @@ const VideosComponentElms = ({
   }, [isVertical, screenWidth, columnCameraPosition, deviceOrientation]);
 
   const setParticipantsToDisplay = (
-    [...allParticipants]: Array<JSX.Element>,
+    [...allParticipants]: Array<React.JSX.Element>,
     page_number: number,
     per_page: number,
   ) => {
@@ -178,7 +178,7 @@ const VideosComponentElms = ({
     if (isVertical) {
       return participantsToRender;
     }
-    let elms: Array<JSX.Element>;
+    let elms: Array<React.JSX.Element>;
 
     if (
       deviceType === UserDeviceType.MOBILE &&
diff --git a/src/components/participants/participant/icons/menu-items/lock.tsx b/src/components/participants/participant/icons/menu-items/lock.tsx
index 6ccd8230..e47fb574 100644
--- a/src/components/participants/participant/icons/menu-items/lock.tsx
+++ b/src/components/participants/participant/icons/menu-items/lock.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import {
@@ -99,7 +99,7 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
     return (
       <>
         <div className="" role="none">
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <button
                 className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -110,12 +110,12 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                   : t('left-panel.menus.items.lock-microphone')}
               </button>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
 
         {roomFeatures?.allowWebcams && !roomFeatures?.adminOnlyWebcams ? (
           <div className="" role="none">
-            <Menu.Item>
+            <MenuItem>
               {() => (
                 <button
                   className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -126,13 +126,13 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                     : t('left-panel.menus.items.lock-webcam')}
                 </button>
               )}
-            </Menu.Item>
+            </MenuItem>
           </div>
         ) : null}
 
         {roomFeatures?.allowScreenShare ? (
           <div className="" role="none">
-            <Menu.Item>
+            <MenuItem>
               {() => (
                 <button
                   className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -143,13 +143,13 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                     : t('left-panel.menus.items.lock-screen-sharing')}
                 </button>
               )}
-            </Menu.Item>
+            </MenuItem>
           </div>
         ) : null}
 
         {roomFeatures?.whiteboardFeatures?.allowedWhiteboard ? (
           <div className="" role="none">
-            <Menu.Item>
+            <MenuItem>
               {() => (
                 <button
                   className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -160,13 +160,13 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                     : t('left-panel.menus.items.lock-whiteboard')}
                 </button>
               )}
-            </Menu.Item>
+            </MenuItem>
           </div>
         ) : null}
 
         {roomFeatures?.sharedNotePadFeatures?.allowedSharedNotePad ? (
           <div className="" role="none">
-            <Menu.Item>
+            <MenuItem>
               {() => (
                 <button
                   className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -177,14 +177,14 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                     : t('left-panel.menus.items.lock-shared-notepad')}
                 </button>
               )}
-            </Menu.Item>
+            </MenuItem>
           </div>
         ) : null}
 
         {roomFeatures?.chatFeatures?.allowChat ? (
           <>
             <div className="" role="none">
-              <Menu.Item>
+              <MenuItem>
                 {() => (
                   <button
                     className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -195,11 +195,11 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                       : t('left-panel.menus.items.lock-chat')}
                   </button>
                 )}
-              </Menu.Item>
+              </MenuItem>
             </div>
 
             <div className="" role="none">
-              <Menu.Item>
+              <MenuItem>
                 {() => (
                   <button
                     className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -210,12 +210,12 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                       : t('left-panel.menus.items.lock-send-chat-message')}
                   </button>
                 )}
-              </Menu.Item>
+              </MenuItem>
             </div>
 
             {roomFeatures.chatFeatures.allowFileUpload ? (
               <div className="" role="none">
-                <Menu.Item>
+                <MenuItem>
                   {() => (
                     <button
                       className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -226,7 +226,7 @@ const LockSettingMenuItem = ({ userId }: ILockSettingMenuItemProps) => {
                         : t('left-panel.menus.items.lock-send-file')}
                     </button>
                   )}
-                </Menu.Item>
+                </MenuItem>
               </div>
             ) : null}
           </>
diff --git a/src/components/participants/participant/icons/menu-items/lowerHand.tsx b/src/components/participants/participant/icons/menu-items/lowerHand.tsx
index 413914a7..7f893f9a 100644
--- a/src/components/participants/participant/icons/menu-items/lowerHand.tsx
+++ b/src/components/participants/participant/icons/menu-items/lowerHand.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import {
   NatsMsgClientToServerSchema,
@@ -33,7 +33,7 @@ const LowerHandMenuItem = ({ userId }: ILowerHandMenuItemProps) => {
   const render = () => {
     return (
       <div className="" role="none">
-        <Menu.Item>
+        <MenuItem>
           {() => (
             <button
               className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -42,7 +42,7 @@ const LowerHandMenuItem = ({ userId }: ILowerHandMenuItemProps) => {
               {t('footer.icons.lower-hand')}
             </button>
           )}
-        </Menu.Item>
+        </MenuItem>
       </div>
     );
   };
diff --git a/src/components/participants/participant/icons/menu-items/mic.tsx b/src/components/participants/participant/icons/menu-items/mic.tsx
index e3b9f4a4..a1ad90df 100644
--- a/src/components/participants/participant/icons/menu-items/mic.tsx
+++ b/src/components/participants/participant/icons/menu-items/mic.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import {
@@ -105,7 +105,7 @@ const MicMenuItem = ({ userId }: IMicMenuItemProps) => {
   const render = () => {
     return (
       <div className="" role="none">
-        <Menu.Item>
+        <MenuItem>
           {() => (
             <button
               className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -114,7 +114,7 @@ const MicMenuItem = ({ userId }: IMicMenuItemProps) => {
               {text}
             </button>
           )}
-        </Menu.Item>
+        </MenuItem>
       </div>
     );
   };
diff --git a/src/components/participants/participant/icons/menu-items/privateChatMenuItem.tsx b/src/components/participants/participant/icons/menu-items/privateChatMenuItem.tsx
index 62ae9f82..efb25385 100644
--- a/src/components/participants/participant/icons/menu-items/privateChatMenuItem.tsx
+++ b/src/components/participants/participant/icons/menu-items/privateChatMenuItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { useAppDispatch } from '../../../../../store';
@@ -29,7 +29,7 @@ const PrivateChatMenuItem = ({ name, userId }: IChatMenuItemProps) => {
   };
   return (
     <div className="" role="none">
-      <Menu.Item>
+      <MenuItem>
         {() => (
           <button
             className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -38,7 +38,7 @@ const PrivateChatMenuItem = ({ name, userId }: IChatMenuItemProps) => {
             {t('left-panel.menus.items.private-chat')}
           </button>
         )}
-      </Menu.Item>
+      </MenuItem>
     </div>
   );
 };
diff --git a/src/components/participants/participant/icons/menu-items/removeUser.tsx b/src/components/participants/participant/icons/menu-items/removeUser.tsx
index 7b304e07..36aba612 100644
--- a/src/components/participants/participant/icons/menu-items/removeUser.tsx
+++ b/src/components/participants/participant/icons/menu-items/removeUser.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 interface IRemoveUserMenuItemProps {
@@ -21,7 +21,7 @@ const RemoveUserMenuItem = ({
     return (
       <>
         <div className="" role="none">
-          <Menu.Item>
+          <MenuItem>
             {() => (
               <button
                 className="text-red-900 group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-red-400 hover:text-white"
@@ -30,7 +30,7 @@ const RemoveUserMenuItem = ({
                 {t('left-panel.menus.items.remove-participant')}
               </button>
             )}
-          </Menu.Item>
+          </MenuItem>
         </div>
       </>
     );
diff --git a/src/components/participants/participant/icons/menu-items/switchPresenter.tsx b/src/components/participants/participant/icons/menu-items/switchPresenter.tsx
index 646c0432..8c787ac7 100644
--- a/src/components/participants/participant/icons/menu-items/switchPresenter.tsx
+++ b/src/components/participants/participant/icons/menu-items/switchPresenter.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { toast } from 'react-toastify';
 import {
   CommonResponseSchema,
@@ -56,7 +56,7 @@ const SwitchPresenterMenuItem = ({ userId }: ISwitchPresenterMenuItemProps) => {
   const render = () => {
     return (
       <div className="" role="none">
-        <Menu.Item>
+        <MenuItem>
           {() => (
             <button
               className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -67,7 +67,7 @@ const SwitchPresenterMenuItem = ({ userId }: ISwitchPresenterMenuItemProps) => {
                 : t('footer.icons.promote-presenter')}
             </button>
           )}
-        </Menu.Item>
+        </MenuItem>
       </div>
     );
   };
diff --git a/src/components/participants/participant/icons/menu-items/webcam.tsx b/src/components/participants/participant/icons/menu-items/webcam.tsx
index d3c8ecaf..bc22b596 100644
--- a/src/components/participants/participant/icons/menu-items/webcam.tsx
+++ b/src/components/participants/participant/icons/menu-items/webcam.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Menu } from '@headlessui/react';
+import { MenuItem } from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { DataMsgBodyType } from 'plugnmeet-protocol-js';
@@ -58,7 +58,7 @@ const WebcamMenuItem = ({ userId }: IWebcamMenuItemProps) => {
   const render = () => {
     return (
       <div className="" role="none">
-        <Menu.Item>
+        <MenuItem>
           {() => (
             <button
               className="text-gray-900 dark:text-darkText group flex rounded-md items-center text-left w-full px-2 py-[0.4rem] text-xs lg:text-sm transition ease-in hover:bg-primaryColor hover:text-white"
@@ -67,7 +67,7 @@ const WebcamMenuItem = ({ userId }: IWebcamMenuItemProps) => {
               {text}
             </button>
           )}
-        </Menu.Item>
+        </MenuItem>
       </div>
     );
   };
diff --git a/src/components/participants/participant/icons/menu.tsx b/src/components/participants/participant/icons/menu.tsx
index 92e6872b..a8ab015d 100644
--- a/src/components/participants/participant/icons/menu.tsx
+++ b/src/components/participants/participant/icons/menu.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react';
 
 import MicMenuItem from './menu-items/mic';
 import WebcamMenuItem from './menu-items/webcam';
@@ -86,9 +86,9 @@ const MenuIcon = ({
         <Menu>
           {({ open }) => (
             <>
-              <Menu.Button className="relative flex-shrink-0 mt-2">
+              <MenuButton className="relative flex-shrink-0 mt-2">
                 <i className="pnm-menu-small primaryColor dark:text-secondaryColor opacity-50" />
-              </Menu.Button>
+              </MenuButton>
 
               {/* Use the Transition component. */}
               <Transition
@@ -101,12 +101,12 @@ const MenuIcon = ({
                 leaveTo="transform scale-95 opacity-0"
               >
                 {/* Mark this component as `static` */}
-                <Menu.Items
+                <MenuItems
                   static
                   className="origin-top-right z-10 absolute ltr:right-0 rtl:left-0 mt-2 w-44 rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 dark:divide-secondaryColor focus:outline-none"
                 >
                   {renderMenuItems()}
-                </Menu.Items>
+                </MenuItems>
               </Transition>
             </>
           )}
diff --git a/src/components/participants/participant/icons/mic.tsx b/src/components/participants/participant/icons/mic.tsx
index 005908a6..f0172f26 100644
--- a/src/components/participants/participant/icons/mic.tsx
+++ b/src/components/participants/participant/icons/mic.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react';
 
 import { useAppDispatch, useAppSelector } from '../../../../store';
 import {
@@ -48,9 +48,9 @@ const MicIcon = ({ userId, isRemoteParticipant }: MicIconProps) => {
         <Menu>
           {({ open }) => (
             <>
-              <Menu.Button>
+              <MenuButton>
                 <i className="pnm-mic-unmute secondaryColor text-[10px]" />
-              </Menu.Button>
+              </MenuButton>
 
               <Transition
                 show={open}
@@ -61,7 +61,7 @@ const MicIcon = ({ userId, isRemoteParticipant }: MicIconProps) => {
                 leaveFrom="transform scale-100 opacity-100"
                 leaveTo="transform scale-95 opacity-0"
               >
-                <Menu.Items
+                <MenuItems
                   static
                   className="volume-popup-wrapper origin-top-right z-10 absolute ltr:-right-6 rtl:-left-6 -top-2 mt-2 w-48 xl:w-60 py-5 px-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
                 >
@@ -84,7 +84,7 @@ const MicIcon = ({ userId, isRemoteParticipant }: MicIconProps) => {
                       <i className="pnm-speaker primaryColor" />
                     </button>
                   </section>
-                </Menu.Items>
+                </MenuItems>
               </Transition>
             </>
           )}
diff --git a/src/components/participants/removeParticipantAlertModal.tsx b/src/components/participants/removeParticipantAlertModal.tsx
index 2a761b0b..0bb5e4bb 100644
--- a/src/components/participants/removeParticipantAlertModal.tsx
+++ b/src/components/participants/removeParticipantAlertModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Dialog, DialogTitle, Transition } from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import {
@@ -89,7 +89,7 @@ const RemoveParticipantAlertModal = ({
         className="remove-participants-popup fixed z-[99999] inset-0 overflow-y-auto"
       >
         <div className="flex items-center justify-center min-h-screen">
-          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          <div className="fixed inset-0 bg-black opacity-30" />
 
           <div className="popup-inner bg-white dark:bg-darkPrimary w-full max-w-sm rounded-3xl shadow-header relative px-4 lg:px-6 py-12 lg:py-14">
             <button
@@ -100,13 +100,13 @@ const RemoveParticipantAlertModal = ({
               <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 rotate-45" />
               <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
             </button>
-            <Dialog.Title className="mb-4 md:mb-6 text-sm">
+            <DialogTitle className="mb-4 md:mb-6 text-sm">
               <legend className="text-base font-medium text-gray-900 dark:text-white">
                 {t('left-panel.menus.notice.confirm', {
                   name,
                 })}
               </legend>
-            </Dialog.Title>
+            </DialogTitle>
 
             <div className="mb-10 pl-3">
               <p className="text-sm text-gray-500 dark:text-darkText">
diff --git a/src/components/polls/create.tsx b/src/components/polls/create.tsx
index 61737b32..c5e58b56 100644
--- a/src/components/polls/create.tsx
+++ b/src/components/polls/create.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState, useEffect } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { CreatePollReqSchema } from 'plugnmeet-protocol-js';
@@ -179,7 +184,7 @@ const Create = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -188,8 +193,8 @@ const Create = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -197,7 +202,7 @@ const Create = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -216,16 +221,16 @@ const Create = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white text-left mb-2"
                   >
                     {t('polls.create')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">{renderForm()}</div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/polls/viewDetails.tsx b/src/components/polls/viewDetails.tsx
index 6a0317d1..0fa92123 100644
--- a/src/components/polls/viewDetails.tsx
+++ b/src/components/polls/viewDetails.tsx
@@ -1,7 +1,12 @@
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { useTranslation } from 'react-i18next';
-import { Dialog, Disclosure, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  Disclosure,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { toast } from 'react-toastify';
 import { ClosePollReqSchema } from 'plugnmeet-protocol-js';
 import { create } from '@bufbuild/protobuf';
@@ -12,6 +17,7 @@ import {
   useGetPollResponsesDetailsQuery,
 } from '../../store/services/pollsApi';
 import { getNatsConn } from '../../helpers/nats';
+import { DialogTitle } from '@headlessui/react';
 
 interface IViewDetailsProps {
   onCloseViewDetails(): void;
@@ -175,7 +181,7 @@ const ViewDetails = ({ pollId, onCloseViewDetails }: IViewDetailsProps) => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -184,8 +190,8 @@ const ViewDetails = ({ pollId, onCloseViewDetails }: IViewDetailsProps) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -193,7 +199,7 @@ const ViewDetails = ({ pollId, onCloseViewDetails }: IViewDetailsProps) => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -212,12 +218,12 @@ const ViewDetails = ({ pollId, onCloseViewDetails }: IViewDetailsProps) => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white text-left mb-2"
                   >
                     {t('polls.view-details-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     <div className="headline flex flex-wrap pb-5">
@@ -270,7 +276,7 @@ const ViewDetails = ({ pollId, onCloseViewDetails }: IViewDetailsProps) => {
                     </div>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/polls/viewResult.tsx b/src/components/polls/viewResult.tsx
index bac89ff6..de0a3ceb 100644
--- a/src/components/polls/viewResult.tsx
+++ b/src/components/polls/viewResult.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { useGetPollResponsesResultQuery } from '../../store/services/pollsApi';
 
@@ -28,7 +33,7 @@ const ViewResult = ({ pollId, onCloseViewResult }: IViewResultProps) => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -37,8 +42,8 @@ const ViewResult = ({ pollId, onCloseViewResult }: IViewResultProps) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -46,7 +51,7 @@ const ViewResult = ({ pollId, onCloseViewResult }: IViewResultProps) => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -65,12 +70,12 @@ const ViewResult = ({ pollId, onCloseViewResult }: IViewResultProps) => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white text-left mb-2"
                   >
                     {t('polls.view-result-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">
                     <p className="w-full text-lg font-bold text-black dark:text-darkText capitalize mb-2 pb-1 border-b border-solid border-primaryColor/20 dark:dark:border-darkText/20">
@@ -118,7 +123,7 @@ const ViewResult = ({ pollId, onCloseViewResult }: IViewResultProps) => {
                     </div>
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/polls/voteForm.tsx b/src/components/polls/voteForm.tsx
index 151e8d98..01afe8e7 100644
--- a/src/components/polls/voteForm.tsx
+++ b/src/components/polls/voteForm.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useState, useEffect } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import { create } from '@bufbuild/protobuf';
@@ -139,7 +144,7 @@ const VoteForm = ({ onCloseForm, pollId }: IVoteFormProps) => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -148,8 +153,8 @@ const VoteForm = ({ onCloseForm, pollId }: IVoteFormProps) => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -157,7 +162,7 @@ const VoteForm = ({ onCloseForm, pollId }: IVoteFormProps) => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -176,16 +181,16 @@ const VoteForm = ({ onCloseForm, pollId }: IVoteFormProps) => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-white text-left mb-2"
                   >
                     {t('polls.submit-vote-form-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-2">{renderForm()}</div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/speech-to-text-service/selectOptions/index.tsx b/src/components/speech-to-text-service/selectOptions/index.tsx
index 6ac724f1..387cac11 100644
--- a/src/components/speech-to-text-service/selectOptions/index.tsx
+++ b/src/components/speech-to-text-service/selectOptions/index.tsx
@@ -1,6 +1,11 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { isEmpty } from 'lodash';
 import {
   SpeechRecognizer,
@@ -104,7 +109,7 @@ const SelectOptions = ({
           onClose={() => false}
         >
           <div className="min-h-screen px-4 text-center">
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
@@ -113,8 +118,8 @@ const SelectOptions = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-            </Transition.Child>
+              <div className="fixed inset-0 bg-black opacity-30" />
+            </TransitionChild>
 
             <span
               className="inline-block h-screen align-middle"
@@ -122,7 +127,7 @@ const SelectOptions = ({
             >
               &#8203;
             </span>
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -141,12 +146,12 @@ const SelectOptions = ({
                   <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                 </button>
 
-                <Dialog.Title
+                <DialogTitle
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-2 ltr:text-left rtl:text-right"
                 >
                   {t('speech-services.start-modal-title')}
-                </Dialog.Title>
+                </DialogTitle>
                 <hr />
                 <div className="mt-6">
                   {canShowSpeechSetting ? (
@@ -189,7 +194,7 @@ const SelectOptions = ({
                   ) : null}
                 </div>
               </div>
-            </Transition.Child>
+            </TransitionChild>
           </div>
         </Dialog>
       </Transition>
diff --git a/src/components/speech-to-text-service/selectOptions/micElms.tsx b/src/components/speech-to-text-service/selectOptions/micElms.tsx
index 30bd4ff2..7046fa3a 100644
--- a/src/components/speech-to-text-service/selectOptions/micElms.tsx
+++ b/src/components/speech-to-text-service/selectOptions/micElms.tsx
@@ -1,7 +1,12 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'lodash';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 
 import { getDevices } from '../../../helpers/utils';
 
@@ -72,13 +77,13 @@ const MicElms = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full scrollBar scrollBar4 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full scrollBar scrollBar4 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                   {devices.map((d) => {
                     return (
-                      <Listbox.Option
-                        className={({ active }) =>
+                      <ListboxOption
+                        className={({ focus }) =>
                           `relative cursor-default select-none py-2 pl-7 pr-4 ${
-                            active
+                            focus
                               ? 'bg-amber-100 text-amber-900'
                               : 'text-gray-900'
                           }`
@@ -103,10 +108,10 @@ const MicElms = ({
                             ) : null}
                           </>
                         )}
-                      </Listbox.Option>
+                      </ListboxOption>
                     );
                   })}
-                </Listbox.Options>
+                </ListboxOptions>
               </Transition>
             </div>
           </Listbox>
diff --git a/src/components/speech-to-text-service/selectOptions/speechToTextLangElms.tsx b/src/components/speech-to-text-service/selectOptions/speechToTextLangElms.tsx
index eacf74e3..6b863f6b 100644
--- a/src/components/speech-to-text-service/selectOptions/speechToTextLangElms.tsx
+++ b/src/components/speech-to-text-service/selectOptions/speechToTextLangElms.tsx
@@ -1,5 +1,13 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Listbox, Switch, Transition } from '@headlessui/react';
+import {
+  Field,
+  Label,
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Switch,
+  Transition,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import {
   SpeechRecognizer,
@@ -75,13 +83,13 @@ const SpeechToTextLangElms = ({
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full scrollBar scrollBar4 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full scrollBar scrollBar4 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                   {speechService.allowedSpeechLangs?.map((l) => (
-                    <Listbox.Option
+                    <ListboxOption
                       key={l}
-                      className={({ active }) =>
+                      className={({ focus }) =>
                         `relative cursor-default select-none py-2 pl-7 pr-4 ${
-                          active
+                          focus
                             ? 'bg-amber-100 text-amber-900'
                             : 'text-gray-900'
                         }`
@@ -108,9 +116,9 @@ const SpeechToTextLangElms = ({
                           ) : null}
                         </>
                       )}
-                    </Listbox.Option>
+                    </ListboxOption>
                   ))}
-                </Listbox.Options>
+                </ListboxOptions>
               </Transition>
             </div>
           </Listbox>
@@ -127,11 +135,11 @@ const SpeechToTextLangElms = ({
 
   return (
     <>
-      <Switch.Group>
+      <Field>
         <div className="flex items-center justify-between my-4">
-          <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText">
+          <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText">
             {t('speech-services.enable-speech-to-text')}
-          </Switch.Label>
+          </Label>
           <Switch
             checked={enableSpeechToText}
             onChange={setEnableSpeechToText}
@@ -151,7 +159,7 @@ const SpeechToTextLangElms = ({
             />
           </Switch>
         </div>
-      </Switch.Group>
+      </Field>
       {enableSpeechToText ? speechLangElms() : null}
     </>
   );
diff --git a/src/components/speech-to-text-service/selectOptions/subtitleLangElms.tsx b/src/components/speech-to-text-service/selectOptions/subtitleLangElms.tsx
index 85558f55..42ecd987 100644
--- a/src/components/speech-to-text-service/selectOptions/subtitleLangElms.tsx
+++ b/src/components/speech-to-text-service/selectOptions/subtitleLangElms.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useMemo, useState } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { SpeechToTextTranslationFeatures } from 'plugnmeet-protocol-js';
 
@@ -54,13 +59,13 @@ const SubtitleLangElms = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {displayLangs.map((l) => (
-                <Listbox.Option
+                <ListboxOption
                   key={l.code}
-                  className={({ active }) =>
+                  className={({ focus }) =>
                     `relative cursor-default select-none py-2 pl-7 pr-4 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                      focus ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                     }`
                   }
                   value={l.code}
@@ -81,9 +86,9 @@ const SubtitleLangElms = ({
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
diff --git a/src/components/speech-to-text-service/speech-service-settings-modal/defaultSubtitleLangElms.tsx b/src/components/speech-to-text-service/speech-service-settings-modal/defaultSubtitleLangElms.tsx
index 7ca487f4..003b9680 100644
--- a/src/components/speech-to-text-service/speech-service-settings-modal/defaultSubtitleLangElms.tsx
+++ b/src/components/speech-to-text-service/speech-service-settings-modal/defaultSubtitleLangElms.tsx
@@ -1,6 +1,12 @@
 import React, { Dispatch, Fragment, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 
 import { getSubtitleLangs, SupportedLangs } from '../helpers/supportedLangs';
 
@@ -40,7 +46,7 @@ const DefaultSubtitleLangElms = ({
         multiple={false}
       >
         <div className="relative mt-1 w-[150px] sm:w-[250px]">
-          <Listbox.Button className="relative mt-1 min-h-[36px] w-full cursor-default py-1 pl-3 pr-7 text-left border border-gray-300 dark:border-darkText dark:text-darkText bg-transparent rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
+          <ListboxButton className="relative mt-1 min-h-[36px] w-full cursor-default py-1 pl-3 pr-7 text-left border border-gray-300 dark:border-darkText dark:text-darkText bg-transparent rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm">
             <span className="block">
               {availableSubtitleLangs
                 .map((l) =>
@@ -51,7 +57,7 @@ const DefaultSubtitleLangElms = ({
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 ">
               <i className="pnm-updown text-xl primaryColor dark:text-darkText" />
             </span>
-          </Listbox.Button>
+          </ListboxButton>
 
           <Transition
             as={Fragment}
@@ -59,13 +65,13 @@ const DefaultSubtitleLangElms = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOptions className="absolute mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {availableSubtitleLangs.map((l) => (
-                <Listbox.Option
+                <ListboxOption
                   key={`trans_${l.code}`}
-                  className={({ active }) =>
+                  className={({ focus }) =>
                     `relative cursor-default select-none py-2 pr-4 pl-7 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                      focus ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                     }`
                   }
                   value={l.code}
@@ -86,9 +92,9 @@ const DefaultSubtitleLangElms = ({
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
diff --git a/src/components/speech-to-text-service/speech-service-settings-modal/index.tsx b/src/components/speech-to-text-service/speech-service-settings-modal/index.tsx
index fbcb617d..dc1ceb93 100644
--- a/src/components/speech-to-text-service/speech-service-settings-modal/index.tsx
+++ b/src/components/speech-to-text-service/speech-service-settings-modal/index.tsx
@@ -1,5 +1,13 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Dialog, Switch, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Field,
+  Label,
+  Switch,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { createSelector } from '@reduxjs/toolkit';
 import { toast } from 'react-toastify';
@@ -138,7 +146,7 @@ const SpeechServiceSettingsModal = () => {
           onClose={() => false}
         >
           <div className="min-h-screen px-4 text-center">
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0"
@@ -147,8 +155,8 @@ const SpeechServiceSettingsModal = () => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-            </Transition.Child>
+              <div className="fixed inset-0 bg-black opacity-30" />
+            </TransitionChild>
 
             <span
               className="inline-block h-screen align-middle"
@@ -156,7 +164,7 @@ const SpeechServiceSettingsModal = () => {
             >
               &#8203;
             </span>
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -175,12 +183,12 @@ const SpeechServiceSettingsModal = () => {
                   <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                 </button>
 
-                <Dialog.Title
+                <DialogTitle
                   as="h3"
                   className="text-lg font-medium leading-6 text-gray-900 dark:text-white mb-2 ltr:text-left rtl:text-right"
                 >
                   {t('speech-services.modal-settings-title')}
-                </Dialog.Title>
+                </DialogTitle>
                 <hr />
                 <div className="mt-6">
                   <SpeechLangsElms
@@ -191,11 +199,11 @@ const SpeechServiceSettingsModal = () => {
                     selectedSpeechUsers={selectedSpeechUsers}
                     setSelectedSpeechUsers={setSelectedSpeechUsers}
                   />
-                  <Switch.Group>
+                  <Field>
                     <div className="flex items-center justify-between my-4">
-                      <Switch.Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText text-sm">
+                      <Label className="ltr:pr-4 rtl:pl-4 w-full dark:text-darkText text-sm">
                         {t('speech-services.enable-translation')}
-                      </Switch.Label>
+                      </Label>
                       <Switch
                         checked={enableTranslation}
                         onChange={setEnableTranslation}
@@ -214,7 +222,7 @@ const SpeechServiceSettingsModal = () => {
                         />
                       </Switch>
                     </div>
-                  </Switch.Group>
+                  </Field>
                   {enableTranslation ? (
                     <TransLangsElm
                       selectedTransLangs={selectedTransLangs}
@@ -257,7 +265,7 @@ const SpeechServiceSettingsModal = () => {
                   ) : null}
                 </div>
               </div>
-            </Transition.Child>
+            </TransitionChild>
           </div>
         </Dialog>
       </Transition>
diff --git a/src/components/speech-to-text-service/speech-service-settings-modal/speechLangsElms.tsx b/src/components/speech-to-text-service/speech-service-settings-modal/speechLangsElms.tsx
index 9f04a4c0..bcf31de2 100644
--- a/src/components/speech-to-text-service/speech-service-settings-modal/speechLangsElms.tsx
+++ b/src/components/speech-to-text-service/speech-service-settings-modal/speechLangsElms.tsx
@@ -1,6 +1,11 @@
 import React, { Fragment, Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 
 import { supportedSpeechToTextLangs } from '../helpers/supportedLangs';
 
@@ -51,13 +56,13 @@ const SpeechLangsElms = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {supportedSpeechToTextLangs.map((l) => (
-                <Listbox.Option
+                <ListboxOption
                   key={l.code}
-                  className={({ active }) =>
+                  className={({ focus }) =>
                     `relative cursor-default select-none py-2 pr-4 pl-7 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                      focus ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                     }`
                   }
                   value={l.code}
@@ -78,9 +83,9 @@ const SpeechLangsElms = ({
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
diff --git a/src/components/speech-to-text-service/speech-service-settings-modal/speechUsersElms.tsx b/src/components/speech-to-text-service/speech-service-settings-modal/speechUsersElms.tsx
index 242b4b31..de9aafff 100644
--- a/src/components/speech-to-text-service/speech-service-settings-modal/speechUsersElms.tsx
+++ b/src/components/speech-to-text-service/speech-service-settings-modal/speechUsersElms.tsx
@@ -1,5 +1,10 @@
 import React, { Dispatch, Fragment, useMemo } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { useAppSelector } from '../../../store';
@@ -53,13 +58,13 @@ const SpeechUsersElms = ({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                 {users.map((u) => (
-                  <Listbox.Option
+                  <ListboxOption
                     key={u.userId}
-                    className={({ active }) =>
+                    className={({ focus }) =>
                       `relative cursor-default select-none py-2 pr-4 pl-7 ${
-                        active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                        focus ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                       }`
                     }
                     value={u.userId}
@@ -80,9 +85,9 @@ const SpeechUsersElms = ({
                         ) : null}
                       </>
                     )}
-                  </Listbox.Option>
+                  </ListboxOption>
                 ))}
-              </Listbox.Options>
+              </ListboxOptions>
             </Transition>
           </div>
         </Listbox>
diff --git a/src/components/speech-to-text-service/speech-service-settings-modal/transLangsElm.tsx b/src/components/speech-to-text-service/speech-service-settings-modal/transLangsElm.tsx
index 0ff1d554..ea0afce2 100644
--- a/src/components/speech-to-text-service/speech-service-settings-modal/transLangsElm.tsx
+++ b/src/components/speech-to-text-service/speech-service-settings-modal/transLangsElm.tsx
@@ -1,5 +1,10 @@
 import React, { Dispatch, Fragment, useEffect, useState } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import {
+  Listbox,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { supportedTranslationLangs } from '../helpers/supportedLangs';
@@ -66,13 +71,13 @@ const TransLangsElm = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOptions className="absolute z-50 mt-1 max-h-60 w-full overflow-auto scrollBar scrollBar4 rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {supportedTranslationLangs.map((l) => (
-                <Listbox.Option
+                <ListboxOption
                   key={`trans_${l.code}`}
-                  className={({ active }) =>
+                  className={({ focus }) =>
                     `relative cursor-default select-none py-2 pr-4 pl-7 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                      focus ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
                     }`
                   }
                   value={l.code}
@@ -93,9 +98,9 @@ const TransLangsElm = ({
                       ) : null}
                     </>
                   )}
-                </Listbox.Option>
+                </ListboxOption>
               ))}
-            </Listbox.Options>
+            </ListboxOptions>
           </Transition>
         </div>
       </Listbox>
diff --git a/src/components/waiting-room/index.tsx b/src/components/waiting-room/index.tsx
index e87210a1..153ac7e9 100644
--- a/src/components/waiting-room/index.tsx
+++ b/src/components/waiting-room/index.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+  Dialog,
+  DialogTitle,
+  Transition,
+  TransitionChild,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 
 import { store, useAppDispatch, useAppSelector } from '../../store';
@@ -43,7 +48,7 @@ const ManageWaitingRoom = () => {
             onClose={() => false}
           >
             <div className="min-h-screen px-4 text-center">
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0"
@@ -52,8 +57,8 @@ const ManageWaitingRoom = () => {
                 leaveFrom="opacity-100"
                 leaveTo="opacity-0"
               >
-                <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-              </Transition.Child>
+                <div className="fixed inset-0 bg-black opacity-30" />
+              </TransitionChild>
 
               <span
                 className="inline-block h-screen align-middle"
@@ -61,7 +66,7 @@ const ManageWaitingRoom = () => {
               >
                 &#8203;
               </span>
-              <Transition.Child
+              <TransitionChild
                 as={Fragment}
                 enter="ease-out duration-300"
                 enterFrom="opacity-0 scale-95"
@@ -80,12 +85,12 @@ const ManageWaitingRoom = () => {
                     <span className="inline-block h-[1px] w-[20px] bg-primaryColor dark:bg-darkText absolute top-0 left-0 -rotate-45" />
                   </button>
 
-                  <Dialog.Title
+                  <DialogTitle
                     as="h3"
                     className="text-lg font-medium leading-6 text-gray-900 dark:text-darkText ltr:text-left rtl:text-right mb-2"
                   >
                     {t('waiting-room.modal-title')}
-                  </Dialog.Title>
+                  </DialogTitle>
                   <hr />
                   <div className="mt-6">
                     <UpdateRoomMessage />
@@ -97,7 +102,7 @@ const ManageWaitingRoom = () => {
                     />
                   </div>
                 </div>
-              </Transition.Child>
+              </TransitionChild>
             </div>
           </Dialog>
         </Transition>
diff --git a/src/components/whiteboard/footerUI.tsx b/src/components/whiteboard/footerUI.tsx
index 2e36f8f4..544b7048 100644
--- a/src/components/whiteboard/footerUI.tsx
+++ b/src/components/whiteboard/footerUI.tsx
@@ -42,7 +42,7 @@ const FooterUI = ({ excalidrawAPI, isPresenter }: IFooterUIProps) => {
     currentWhiteboardOfficeFileIdSelector,
   );
   const previousFileId = usePreviousFileId(currentWhiteboardOfficeFileId);
-  const [options, setOptions] = useState<Array<JSX.Element>>();
+  const [options, setOptions] = useState<Array<React.JSX.Element>>();
   const [disablePre, setDisablePre] = useState(true);
   const [disableNext, setDisableNext] = useState(false);
   const previousPage = usePreviousPage(currentPage);
@@ -80,7 +80,7 @@ const FooterUI = ({ excalidrawAPI, isPresenter }: IFooterUIProps) => {
   }, [currentPage, disableNext, totalPages]);
 
   useEffect(() => {
-    const element: Array<JSX.Element> = [];
+    const element: Array<React.JSX.Element> = [];
     for (let i = 0; i < totalPages; i++) {
       element.push(
         <option key={i} value={i + 1}>
diff --git a/src/components/whiteboard/manageFiles.tsx b/src/components/whiteboard/manageFiles.tsx
index 865d7072..b67daf2c 100644
--- a/src/components/whiteboard/manageFiles.tsx
+++ b/src/components/whiteboard/manageFiles.tsx
@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Menu, Transition } from '@headlessui/react';
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from '@headlessui/react';
 import { useTranslation } from 'react-i18next';
 import { createSelector } from '@reduxjs/toolkit';
 import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types';
@@ -34,7 +40,7 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
     whiteboardUploadedOfficeFilesSelector,
   );
   const [refreshFileBrowser, setRefreshFileBrowser] = useState<number>(0);
-  const [menuItems, setMenuItems] = useState<JSX.Element[]>([]);
+  const [menuItems, setMenuItems] = useState<React.JSX.Element[]>([]);
   const [fileType, setFileType] = useState<Array<string>>([]);
 
   useEffect(() => {
@@ -45,14 +51,14 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
           className="border-b border-solid border-primaryColor/10 last:border-none"
           key={f.fileId}
         >
-          <Menu.Item>
+          <MenuItem>
             <button
               className="!rounded !w-full flex items-center !px-3 !py-[0.4rem] !text-[10px] lg:!text-xs transition ease-in !bg-transparent hover:!bg-primaryColor hover:text-white text-gray-700 dark:text-darkText"
               onClick={() => switchOfficeFile(f)}
             >
               {f.fileName}
             </button>
-          </Menu.Item>
+          </MenuItem>
         </div>
       );
     });
@@ -105,12 +111,12 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
           <Menu>
             {({ open }) => (
               <>
-                <Menu.Button className="manage-icon h-[30px] lg:h-[32px] max-w text-xs !px-2 rounded-lg border border-solid border-[#3d3d3d] text-[#3d3d3d] dark:text-[#b8b8b8] dark:bg-[#262627] dark:hover:bg-[#3d3d3d] hover:bg-[#3d3d3d] hover:text-[#b8b8b8] font-semibold flex items-center justify-center cursor-pointer">
+                <MenuButton className="manage-icon h-[30px] lg:h-[32px] max-w text-xs !px-2 rounded-lg border border-solid border-[#3d3d3d] text-[#3d3d3d] dark:text-[#b8b8b8] dark:bg-[#262627] dark:hover:bg-[#3d3d3d] hover:bg-[#3d3d3d] hover:text-[#b8b8b8] font-semibold flex items-center justify-center cursor-pointer">
                   <>
                     <i className="pnm-attachment text-[14px] ltr:mr-1 rtl:ml-1" />
                     {t('whiteboard.manage-files')}
                   </>
-                </Menu.Button>
+                </MenuButton>
 
                 {/* Use the Transition component. */}
                 <Transition
@@ -123,7 +129,7 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
                   leaveTo="transform scale-95 opacity-0"
                 >
                   {/* Mark this component as `static` */}
-                  <Menu.Items
+                  <MenuItems
                     static
                     className="origin-top-right z-10 absolute ltr:right-0 rtl:left-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-darkPrimary ring-1 ring-black dark:ring-secondaryColor ring-opacity-5 divide-y divide-gray-100 dark:divide-secondaryColor focus:outline-none"
                   >
@@ -131,7 +137,7 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
                       {menuItems}
                     </div>
                     <div className="py-3 !border-t-2 border-solid !border-primaryColor !mt-2">
-                      <Menu.Item>
+                      <MenuItem>
                         <button
                           onClick={() => openFileBrowser('office')}
                           className="w-[100px] !m-auto text-xs h-7 flex items-center justify-center !bg-primaryColor hover:!bg-secondaryColor text-white"
@@ -139,9 +145,9 @@ const ManageFiles = ({ excalidrawAPI }: IManageFilesProps) => {
                           <i className="pnm-attachment text-white text-[14px] opacity-50 ltr:mr-1 rtl:ml-1" />
                           {t('whiteboard.upload-file')}
                         </button>
-                      </Menu.Item>
+                      </MenuItem>
                     </div>
-                  </Menu.Items>
+                  </MenuItems>
                 </Transition>
               </>
             )}
diff --git a/src/helpers/nats/ConnectNats.ts b/src/helpers/nats/ConnectNats.ts
index cab01a60..70a67969 100644
--- a/src/helpers/nats/ConnectNats.ts
+++ b/src/helpers/nats/ConnectNats.ts
@@ -57,6 +57,7 @@ import MessageQueue from './MessageQueue';
 import { encryptMessage } from '../cryptoMessages';
 import { ICurrentRoom } from '../../store/slices/interfaces/session';
 import { formatNatsError, getWhiteboardDonors } from '../utils';
+import { updateIsNatsServerConnected } from '../../store/slices/roomSettingsSlice';
 
 const RENEW_TOKEN_FREQUENT = 3 * 60 * 1000;
 const PING_INTERVAL = 60 * 1000;
@@ -170,6 +171,9 @@ export default class ConnectNats {
     this._js = jetstream(this._nc);
     this.messageQueue.js(this._js);
 
+    // now change status to connected
+    store.dispatch(updateIsNatsServerConnected(true));
+    // start monitoring connection
     this.monitorConnStatus().then();
 
     // now we'll subscribe to the system only
@@ -374,6 +378,7 @@ export default class ConnectNats {
           if (this._nc?.isClosed()) {
             this.messageQueue.isConnected(false);
             this.endSession('notifications.room-disconnected-network-error');
+            store.dispatch(updateIsNatsServerConnected(false));
 
             clearInterval(this.statusCheckerInterval);
             this.statusCheckerInterval = undefined;
@@ -385,11 +390,14 @@ export default class ConnectNats {
 
     for await (const s of this._nc.status()) {
       if (s.type === 'reconnecting' && !this.isRoomReconnecting) {
+        this._setRoomConnectionStatusState('re-connecting');
+        store.dispatch(updateIsNatsServerConnected(false));
+
         this.isRoomReconnecting = true;
         startStatusChecker();
-        this._setRoomConnectionStatusState('re-connecting');
       } else if (s.type === 'reconnect') {
         this._setRoomConnectionStatusState('connected');
+        store.dispatch(updateIsNatsServerConnected(true));
 
         clearInterval(this.statusCheckerInterval);
         this.statusCheckerInterval = undefined;
diff --git a/src/store/slices/interfaces/roomSettings.ts b/src/store/slices/interfaces/roomSettings.ts
index d2feff07..04ae3506 100644
--- a/src/store/slices/interfaces/roomSettings.ts
+++ b/src/store/slices/interfaces/roomSettings.ts
@@ -11,6 +11,7 @@ export enum VideoObjectFit {
 export interface IRoomSettings {
   isShowRoomSettingsModal: boolean;
   isShowKeyboardShortcuts: boolean;
+  isNatsServerConnected: boolean;
 
   audioDevices: Array<IMediaDevice>;
   videoDevices: Array<IMediaDevice>;
diff --git a/src/store/slices/roomSettingsSlice.ts b/src/store/slices/roomSettingsSlice.ts
index 0a4760a4..a3ed97dd 100644
--- a/src/store/slices/roomSettingsSlice.ts
+++ b/src/store/slices/roomSettingsSlice.ts
@@ -16,6 +16,7 @@ import { AzureTokenInfo } from '../../components/speech-to-text-service/helpers/
 const initialState: IRoomSettings = {
   isShowRoomSettingsModal: false,
   isShowKeyboardShortcuts: false,
+  isNatsServerConnected: false,
 
   audioDevices: [],
   videoDevices: [],
@@ -59,6 +60,9 @@ const roomSettingsSlice = createSlice({
     ) => {
       state.isShowKeyboardShortcuts = action.payload;
     },
+    updateIsNatsServerConnected: (state, action: PayloadAction<boolean>) => {
+      state.isNatsServerConnected = action.payload;
+    },
     addAudioDevices: (state, action: PayloadAction<Array<IMediaDevice>>) => {
       state.audioDevices = action.payload;
     },
@@ -190,6 +194,7 @@ export const {
   toggleFooterVisibility,
   updateAzureTokenInfo,
   cleanAzureToken,
+  updateIsNatsServerConnected,
 } = roomSettingsSlice.actions;
 
 export default roomSettingsSlice.reducer;