diff --git a/packages/frontend/src/components/Dialog/Dialog.tsx b/packages/frontend/src/components/Dialog/Dialog.tsx
index 804db65a01..df4db2a367 100644
--- a/packages/frontend/src/components/Dialog/Dialog.tsx
+++ b/packages/frontend/src/components/Dialog/Dialog.tsx
@@ -60,7 +60,6 @@ const Dialog = React.memo<Props>(
 
     const onClose = (value: any) => {
       props.onClose && props.onClose(value)
-      dialog.current!.style.display = 'none'
     }
 
     const onCancel = (ev: React.BaseSyntheticEvent) => {
@@ -72,7 +71,6 @@ const Dialog = React.memo<Props>(
     useEffect(() => {
       // calling showModal is "only" the way to have ::backdrop
       dialog.current?.showModal()
-      dialog.current!.style.display = 'flex'
     })
 
     let style
diff --git a/packages/frontend/src/components/Dialog/styles.module.scss b/packages/frontend/src/components/Dialog/styles.module.scss
index 1debebf310..c3c231311a 100644
--- a/packages/frontend/src/components/Dialog/styles.module.scss
+++ b/packages/frontend/src/components/Dialog/styles.module.scss
@@ -3,8 +3,13 @@ $paddingHorizontal: 30px;
 $paddingVertical: 20px;
 
 .dialog {
+  opacity: 0;
   padding: 0;
 
+  &:last-of-type {
+    opacity: 1;
+  }
+
   &.unstyled {
     background: none;
     width: 100vw;
diff --git a/packages/frontend/src/components/Settings/Settings.tsx b/packages/frontend/src/components/Settings/Settings.tsx
index 2a6991feb9..a397864595 100644
--- a/packages/frontend/src/components/Settings/Settings.tsx
+++ b/packages/frontend/src/components/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import { useSettingsStore } from '../../stores/settings'
 import { SendBackupDialog } from '../dialogs/SetupMultiDevice'
@@ -20,19 +20,11 @@ import useTranslationFunction from '../../hooks/useTranslationFunction'
 
 import type { DialogProps } from '../../contexts/DialogContext'
 
-type SettingsView =
-  | 'main'
-  | 'chats_and_media'
-  | 'notifications'
-  | 'appearance'
-  | 'advanced'
-
 export default function Settings({ onClose }: DialogProps) {
   const { openDialog } = useDialog()
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const settingsStore = useSettingsStore()[0]!
   const tx = useTranslationFunction()
-  const [settingsMode, setSettingsMode] = useState<SettingsView>('main')
 
   useEffect(() => {
     if (window.__settingsOpened) {
@@ -48,137 +40,157 @@ export default function Settings({ onClose }: DialogProps) {
 
   return (
     <Dialog onClose={onClose} fixed width={400} data-testid='settings-dialog'>
-      {settingsMode === 'main' && (
-        <>
-          <DialogHeader
-            title={tx('menu_settings')}
-            onClose={onClose}
-            data-testid='close-settings'
-          />
-          <DialogBody>
-            <Profile settingsStore={settingsStore} />
-            <SettingsIconButton
-              icon='person'
-              onClick={() => {
-                openDialog(EditProfileDialog, {
-                  settingsStore,
-                })
-              }}
-            >
-              {tx('pref_edit_profile')}
-            </SettingsIconButton>
-            <SettingsSeparator />
-            <SettingsIconButton
-              icon='forum'
-              onClick={() => setSettingsMode('chats_and_media')}
-            >
-              {tx('pref_chats_and_media')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='bell'
-              onClick={() => setSettingsMode('notifications')}
-            >
-              {tx('pref_notifications')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='brightness-6'
-              onClick={() => setSettingsMode('appearance')}
-            >
-              {tx('pref_appearance')}
-            </SettingsIconButton>
-            <SettingsIconButton
-              icon='devices'
-              onClick={() => {
-                openDialog(SendBackupDialog)
-                onClose()
-              }}
-            >
-              {tx('multidevice_title')}
-            </SettingsIconButton>
-            <ConnectivityButton />
-            <SettingsIconButton
-              icon='code-tags'
-              onClick={() => setSettingsMode('advanced')}
-            >
-              {tx('menu_advanced')}
-            </SettingsIconButton>
-            <SettingsSeparator />
-            {!runtime.getRuntimeInfo().isMac && (
-              <SettingsIconButton
-                icon='favorite'
-                onClick={() => runtime.openLink(donationUrl)}
-                isLink
-              >
-                {tx('donate')}
-              </SettingsIconButton>
-            )}
-            <SettingsIconButton
-              icon='question_mark'
-              onClick={() => runtime.openHelpWindow()}
-            >
-              {tx('menu_help')}
-            </SettingsIconButton>
-            <SettingsIconButton icon='info' onClick={() => openDialog(About)}>
-              {tx('global_menu_help_about_desktop')}
-            </SettingsIconButton>
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'chats_and_media' && (
-        <>
-          <DialogHeader
-            title={tx('pref_chats_and_media')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <ChatsAndMedia
-              settingsStore={settingsStore}
-              desktopSettings={settingsStore.desktopSettings}
-            />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'notifications' && (
-        <>
-          <DialogHeader
-            title={tx('pref_notifications')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Notifications desktopSettings={settingsStore.desktopSettings} />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'appearance' && (
-        <>
-          <DialogHeader
-            title={tx('pref_appearance')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Appearance
-              rc={settingsStore.rc}
-              desktopSettings={settingsStore.desktopSettings}
-              settingsStore={settingsStore}
-            />
-          </DialogBody>
-        </>
-      )}
-      {settingsMode === 'advanced' && (
-        <>
-          <DialogHeader
-            title={tx('menu_advanced')}
-            onClickBack={() => setSettingsMode('main')}
-            onClose={onClose}
-          />
-          <DialogBody>
-            <Advanced settingsStore={settingsStore} />
-          </DialogBody>
-        </>
-      )}
+      <DialogHeader
+        title={tx('menu_settings')}
+        onClose={onClose}
+        data-testid='close-settings'
+      />
+      <DialogBody>
+        <Profile settingsStore={settingsStore} />
+        <SettingsIconButton
+          icon='person'
+          onClick={() => {
+            openDialog(EditProfileDialog, {
+              settingsStore,
+            })
+          }}
+        >
+          {tx('pref_edit_profile')}
+        </SettingsIconButton>
+        <SettingsSeparator />
+        <SettingsIconButton
+          icon='forum'
+          onClick={() => openDialog(SettingsDialogChatsAndMedia)}
+        >
+          {tx('pref_chats_and_media')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='bell'
+          onClick={() => openDialog(SettingsDialogNotifications)}
+        >
+          {tx('pref_notifications')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='brightness-6'
+          onClick={() => openDialog(SettingsDialogAppearance)}
+        >
+          {tx('pref_appearance')}
+        </SettingsIconButton>
+        <SettingsIconButton
+          icon='devices'
+          onClick={() => {
+            openDialog(SendBackupDialog)
+          }}
+        >
+          {tx('multidevice_title')}
+        </SettingsIconButton>
+        <ConnectivityButton />
+        <SettingsIconButton
+          icon='code-tags'
+          onClick={() => openDialog(SettingsDialogAdvanced)}
+        >
+          {tx('menu_advanced')}
+        </SettingsIconButton>
+        <SettingsSeparator />
+        {!runtime.getRuntimeInfo().isMac && (
+          <SettingsIconButton
+            icon='favorite'
+            onClick={() => runtime.openLink(donationUrl)}
+            isLink
+          >
+            {tx('donate')}
+          </SettingsIconButton>
+        )}
+        <SettingsIconButton
+          icon='question_mark'
+          onClick={() => runtime.openHelpWindow()}
+        >
+          {tx('menu_help')}
+        </SettingsIconButton>
+        <SettingsIconButton icon='info' onClick={() => openDialog(About)}>
+          {tx('global_menu_help_about_desktop')}
+        </SettingsIconButton>
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogChatsAndMedia({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader
+        title={tx('pref_chats_and_media')}
+        onClickBack={onClose}
+        onClose={onClose}
+      />
+      <DialogBody>
+        <ChatsAndMedia
+          settingsStore={settingsStore}
+          desktopSettings={settingsStore.desktopSettings}
+        />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogNotifications({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader
+        title={tx('pref_notifications')}
+        onClickBack={onClose}
+        onClose={onClose}
+      />
+      <DialogBody>
+        <Notifications desktopSettings={settingsStore.desktopSettings} />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogAppearance({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader
+        title={tx('pref_appearance')}
+        onClickBack={onClose}
+        onClose={onClose}
+      />
+      <DialogBody>
+        <Appearance
+          rc={settingsStore.rc}
+          desktopSettings={settingsStore.desktopSettings}
+          settingsStore={settingsStore}
+        />
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+function SettingsDialogAdvanced({ onClose }: DialogProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const settingsStore = useSettingsStore()[0]!
+  const tx = useTranslationFunction()
+  return (
+    <Dialog onClose={onClose} fixed width={400}>
+      <DialogHeader
+        title={tx('menu_advanced')}
+        onClickBack={onClose}
+        onClose={onClose}
+      />
+      <DialogBody>
+        <Advanced settingsStore={settingsStore} />
+      </DialogBody>
     </Dialog>
   )
 }