diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
index 0fb6dc40..f3ab8910 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx
@@ -4,12 +4,14 @@ import {
RiQuestionLine,
RiSettings3Line,
} from '@remixicon/react'
+import { useState } from 'react'
import { styled } from '@/styled-system/jsx'
import {
Menu as RACMenu,
MenuItem as RACMenuItem,
Popover as RACPopover,
} from 'react-aria-components'
+import { SettingsDialog } from '@/features/settings'
// Styled components to be refactored
const StyledMenu = styled(RACMenu, {
@@ -60,29 +62,35 @@ const StyledPopover = styled(RACPopover, {
export const OptionsMenu = () => {
const { t } = useTranslation('rooms')
-
+ const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false)
return (
-
-
-
-
- {t('options.items.support')}
-
-
-
- {t('options.items.feedbacks')}
-
- alert('delete')}>
-
- {t('options.items.settings')}
-
-
-
+ <>
+
+
+
+
+ {t('options.items.support')}
+
+
+
+ {t('options.items.feedbacks')}
+
+ setIsSettingsDialogOpen(true)}>
+
+ {t('options.items.settings')}
+
+
+
+ setIsSettingsDialogOpen(v)}
+ />
+ >
)
}
diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx
index 69a65182..ea4aabfa 100644
--- a/src/frontend/src/features/settings/components/SettingsDialog.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx
@@ -1,12 +1,14 @@
import { useTranslation } from 'react-i18next'
import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { Dialog, Field, H } from '@/primitives'
+import { Dialog, type DialogProps, Field, H } from '@/primitives'
-export const SettingsDialog = () => {
+export type SettingsDialogProps = Pick
+
+export const SettingsDialog = (props: SettingsDialogProps) => {
const { t, i18n } = useTranslation('settings')
const { languagesList, currentLanguage } = useLanguageLabels()
return (
-