2 files changed, 3 insertions, 32 deletions
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index 6576cf5..47af656 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -14,21 +14,6 @@
   }
 }
 
-.form {
-  display: flex;
-  flex-flow: row wrap;
-  column-gap: var(--spacing-lg);
-}
-
-.item {
-  width: 100%;
-  margin: 0 0 var(--spacing-2xs);
-
-  > *:last-child {
-    margin-left: auto;
-  }
-}
-
 .icon {
   margin-right: var(--spacing-2xs);
 }
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 5fea491..94d69e2 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,12 +1,7 @@
 import { useCallback, type FC, type FormEvent } from 'react';
 import { useIntl } from 'react-intl';
-import { Form, Heading, Icon, Modal, type ModalProps } from '../../atoms';
-import {
-  AckeeToggle,
-  MotionToggle,
-  PrismThemeToggle,
-  ThemeToggle,
-} from '../forms';
+import { Heading, Icon, Modal, type ModalProps } from '../../atoms';
+import { SettingsForm } from '../forms';
 import styles from './settings-modal.module.scss';
 
 export type SettingsModalProps = Pick<ModalProps, 'className'>;
@@ -43,16 +38,7 @@ export const SettingsModal: FC<SettingsModalProps> = ({ className = '' }) => {
         </Heading>
       }
     >
-      <Form
-        aria-label={ariaLabel}
-        className={styles.form}
-        onSubmit={submitHandler}
-      >
-        <ThemeToggle className={styles.item} />
-        <PrismThemeToggle className={styles.item} />
-        <MotionToggle className={styles.item} />
-        <AckeeToggle className={styles.item} direction="upwards" />
-      </Form>
+      <SettingsForm aria-label={ariaLabel} onSubmit={submitHandler} />
     </Modal>
   );
 };