From b25c518dd06d1df9c8253a0e657f922f8b5ad476 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Thu, 9 Oct 2025 18:48:30 -0400
Subject: [PATCH] Move to section

---
 src/components/ThemeSettings/ThemesTab.tsx    | 10 ++++----
 .../components/SettingBooleanComponent.tsx    |  5 ++--
 .../components/SettingColorComponent.tsx      |  6 ++---
 .../components/SettingNumberComponent.tsx     |  4 ++--
 .../components/SettingRangeComponent.tsx      |  4 ++--
 .../components/SettingSelectComponent.tsx     |  4 ++--
 .../components/SettingTextComponent.tsx       |  4 ++--
 .../settings/tabs/plugins/PluginModal.tsx     |  4 ++--
 .../betterBanReasons/index.tsx                |  5 ++--
 .../channelTabs/util/constants.tsx            |  4 ++--
 .../customTimestamps/index.tsx                |  4 ++--
 .../components/FormatSetting.tsx              |  4 ++--
 .../downloadify.desktop/settings.tsx          |  4 ++--
 src/equicordplugins/fontLoader/index.tsx      |  4 ++--
 src/equicordplugins/gifCollections/index.tsx  |  8 +++----
 .../instantScreenshare/utils.tsx              |  4 ++--
 .../components/FolderSelectInput.tsx          |  4 ++--
 .../musicControls/settings.tsx                | 16 ++++++-------
 src/equicordplugins/questify/settings.tsx     | 24 +++++++++----------
 .../components/SettingColorComponent.tsx      |  6 ++---
 .../soundBoardLogger/settings.tsx             |  4 ++--
 .../themeLibrary/utils/settings.tsx           |  4 ++--
 .../vcNarratorCustom/index.tsx                |  4 ++--
 23 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx
index 16262aafc..ae5f6d13c 100644
--- a/src/components/ThemeSettings/ThemesTab.tsx
+++ b/src/components/ThemeSettings/ThemesTab.tsx
@@ -331,7 +331,8 @@ function ThemesTab() {
                     <Forms.FormText>If using the BD site, click on "Download" and place the downloaded .theme.css file into your themes folder.</Forms.FormText>
                 </Card>
 
-                <Forms.FormSection title="Local Themes">
+                <section>
+                    <Forms.FormTitle tag="h5">Local Themes</Forms.FormTitle>
                     <QuickActionCard>
                         <>
                             {IS_WEB ?
@@ -408,7 +409,7 @@ function ThemesTab() {
                                 />
                             )))}
                     </div>
-                </Forms.FormSection>
+                </section>
             </>
         );
     }
@@ -463,7 +464,8 @@ function ThemesTab() {
 
         return (
             <>;
-                <Forms.FormSection title="Online Themes" tag="h5">
+                <section>
+                    <Forms.FormTitle tag="h5">Online Themes</Forms.FormTitle>
                     <Card className="vc-settings-theme-add-card">
                         <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
                         <Flex flexDirection="row">
@@ -506,7 +508,7 @@ function ThemesTab() {
                             );
                         })}
                     </div>
-                </Forms.FormSection>
+                </section>
             </>
         );
     }
diff --git a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
index 111aae073..c17a72628 100644
--- a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
@@ -8,7 +8,6 @@ import "./styles.css";
 
 import { classNameFactory } from "@api/Styles";
 import { FormSwitch } from "@components/FormSwitch";
-import { Forms } from "@webpack/common";
 
 interface Props {
     label: string;
@@ -26,7 +25,7 @@ export function SettingBooleanComponent({ label, name, themeSettings }: Props) {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <FormSwitch
                 title={label}
                 key={name}
@@ -35,6 +34,6 @@ export function SettingBooleanComponent({ label, name, themeSettings }: Props) {
                 onChange={handleChange}
                 hideBorder
             />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/ThemeSettings/components/SettingColorComponent.tsx b/src/components/ThemeSettings/components/SettingColorComponent.tsx
index 5ebf86e50..86be59edd 100644
--- a/src/components/ThemeSettings/components/SettingColorComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingColorComponent.tsx
@@ -8,7 +8,7 @@ import "./colorStyles.css";
 
 import { classNameFactory } from "@api/Styles";
 import { findByCodeLazy } from "@webpack";
-import { ColorPicker, Forms, useMemo } from "@webpack/common";
+import { ColorPicker, useMemo } from "@webpack/common";
 
 // TinyColor is completely unmangled and it's duplicated in two modules! Fun!
 const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
@@ -31,7 +31,7 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
     const normalizedValue = useMemo(() => parseInt(TinyColor(themeSettings[name]).toHex(), 16), [themeSettings[name]]);
 
     return (
-        <Forms.FormSection>
+        <section>
             <div className={cl("swatch-row")}>
                 <span>{label}</span>
                 <ColorPicker
@@ -40,6 +40,6 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
                     onChange={handleChange}
                 />
             </div>
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/ThemeSettings/components/SettingNumberComponent.tsx b/src/components/ThemeSettings/components/SettingNumberComponent.tsx
index d59c21e0d..66e30f84a 100644
--- a/src/components/ThemeSettings/components/SettingNumberComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingNumberComponent.tsx
@@ -18,7 +18,7 @@ export function SettingNumberComponent({ label, name, themeSettings }: Props) {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
             <TextInput
                 type="number"
@@ -27,6 +27,6 @@ export function SettingNumberComponent({ label, name, themeSettings }: Props) {
                 value={themeSettings[name]}
                 onChange={handleChange}
             />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/ThemeSettings/components/SettingRangeComponent.tsx b/src/components/ThemeSettings/components/SettingRangeComponent.tsx
index b6437582d..d8c177db5 100644
--- a/src/components/ThemeSettings/components/SettingRangeComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingRangeComponent.tsx
@@ -35,7 +35,7 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
     }, [min, max, step]);
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
             <Slider
                 initialValue={parseInt(themeSettings[name], 10)}
@@ -47,6 +47,6 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
                 markers={markers}
                 stickToMarkers={true}
             />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/ThemeSettings/components/SettingSelectComponent.tsx b/src/components/ThemeSettings/components/SettingSelectComponent.tsx
index 2c6cf089d..f6cc8b4e2 100644
--- a/src/components/ThemeSettings/components/SettingSelectComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingSelectComponent.tsx
@@ -35,7 +35,7 @@ export function SettingSelectComponent({ label, name, options, default: def, the
     } satisfies SelectOption)), [options, def]);
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
             <Select
                 placeholder={label}
@@ -47,6 +47,6 @@ export function SettingSelectComponent({ label, name, options, default: def, the
                 isSelected={v => v === themeSettings[name]}
                 serialize={identity}
             />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/ThemeSettings/components/SettingTextComponent.tsx b/src/components/ThemeSettings/components/SettingTextComponent.tsx
index be3ccf42e..fa6760944 100644
--- a/src/components/ThemeSettings/components/SettingTextComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingTextComponent.tsx
@@ -18,13 +18,13 @@ export function SettingTextComponent({ label, name, themeSettings }: Props) {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
             <TextInput
                 key={name}
                 value={themeSettings[name]}
                 onChange={handleChange}
             />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx
index 87fd174ec..8da750877 100644
--- a/src/components/settings/tabs/plugins/PluginModal.tsx
+++ b/src/components/settings/tabs/plugins/PluginModal.tsx
@@ -325,7 +325,7 @@ export function openWarningModal(plugin?: Plugin | null, pluginModalProps?: Moda
                 <ModalCloseButton onClick={warningModalProps.onClose} className="vc-modal-close-button" />
             </ModalHeader>
             <ModalContent>
-                <Forms.FormSection>
+                <section>
                     <Flex className="vc-warning-info">
                         <Text className="text-normal">
                             {text}
@@ -337,7 +337,7 @@ export function openWarningModal(plugin?: Plugin | null, pluginModalProps?: Moda
                             If you are certain you want to proceed, click <strong>Confirm Reset</strong>. Otherwise, click <strong>Cancel</strong>.
                         </Text>
                     </Flex>
-                </Forms.FormSection>
+                </section>
             </ModalContent>
             <ModalFooter className="vc-modal-footer">
                 <Flex className="vc-button-container">
diff --git a/src/equicordplugins/betterBanReasons/index.tsx b/src/equicordplugins/betterBanReasons/index.tsx
index 4743ee28b..2206eceb5 100644
--- a/src/equicordplugins/betterBanReasons/index.tsx
+++ b/src/equicordplugins/betterBanReasons/index.tsx
@@ -19,7 +19,8 @@ function ReasonsComponent() {
     const { reasons } = settings.store;
 
     return (
-        <Forms.FormSection title="Reasons">
+        <section>
+            <Forms.FormTitle tag="h5">Reasons</Forms.FormTitle>
             {reasons.map((r, i) => (
                 <div
                     key={i}
@@ -52,7 +53,7 @@ function ReasonsComponent() {
                     <PlusIcon /> Add another reason
                 </Button>
             </div>
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/equicordplugins/channelTabs/util/constants.tsx b/src/equicordplugins/channelTabs/util/constants.tsx
index 48fe388ea..10c1024d8 100644
--- a/src/equicordplugins/channelTabs/util/constants.tsx
+++ b/src/equicordplugins/channelTabs/util/constants.tsx
@@ -83,7 +83,7 @@ function AnimationSettings(): JSX.Element {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle>Animation Controls</Forms.FormTitle>
             <Forms.FormText>
                 Enable or disable specific animations for channel tabs. Each option can be toggled independently.
@@ -100,7 +100,7 @@ function AnimationSettings(): JSX.Element {
                     closeOnSelect={false}
                 />
             </div>
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/equicordplugins/customTimestamps/index.tsx b/src/equicordplugins/customTimestamps/index.tsx
index 8a6b4864a..e8be77807 100644
--- a/src/equicordplugins/customTimestamps/index.tsx
+++ b/src/equicordplugins/customTimestamps/index.tsx
@@ -195,7 +195,7 @@ const settings = definePluginSettings({
                 <>
                     <DemoMessageContainer />
                     {Object.entries(timeFormats).map(([key, value]) => (
-                        <Forms.FormSection key={key}>
+                        <section key={key}>
                             {key === "sameDayFormat" && (
                                 <div className={Margins.bottom20}>
                                     <Forms.FormDivider style={{ marginBottom: "10px" }} />
@@ -211,7 +211,7 @@ const settings = definePluginSettings({
                                 onChange={setNewValue}
                                 pluginSettings={settingsState}
                             />
-                        </Forms.FormSection>
+                        </section>
                     ))}
                 </>);
         }
diff --git a/src/equicordplugins/discordDevBanner/components/FormatSetting.tsx b/src/equicordplugins/discordDevBanner/components/FormatSetting.tsx
index 4f59dad6d..0b77ceba5 100644
--- a/src/equicordplugins/discordDevBanner/components/FormatSetting.tsx
+++ b/src/equicordplugins/discordDevBanner/components/FormatSetting.tsx
@@ -27,7 +27,7 @@ export function FormatSetting(setValue) {
     const preview = makeDevBanner(state);
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormText className={"vc-discord-dev-banner-text"}>
                 The format for the Discord Dev Banner. You can use the following variables:
                 {"\n\n"}
@@ -67,6 +67,6 @@ export function FormatSetting(setValue) {
             {error && (
                 <Forms.FormText className={"vc-discord-dev-banner-error"}>{error}</Forms.FormText>
             )}
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/equicordplugins/downloadify.desktop/settings.tsx b/src/equicordplugins/downloadify.desktop/settings.tsx
index da21af8d8..1d06f859f 100644
--- a/src/equicordplugins/downloadify.desktop/settings.tsx
+++ b/src/equicordplugins/downloadify.desktop/settings.tsx
@@ -38,7 +38,7 @@ function DefaultDirectorySetting(): JSX.Element {
 
     return (
         <ErrorBoundary>
-            <Forms.FormSection>
+            <section>
                 <Forms.FormTitle className={d("form-title")}>
                     Default Directory
                 </Forms.FormTitle>
@@ -68,7 +68,7 @@ function DefaultDirectorySetting(): JSX.Element {
                         </Button>
                     </div>
                 </div>
-            </Forms.FormSection>
+            </section>
         </ErrorBoundary>
     );
 }
diff --git a/src/equicordplugins/fontLoader/index.tsx b/src/equicordplugins/fontLoader/index.tsx
index 7bc5593d0..e049a251c 100644
--- a/src/equicordplugins/fontLoader/index.tsx
+++ b/src/equicordplugins/fontLoader/index.tsx
@@ -130,7 +130,7 @@ function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) =
     };
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h3">Search Google Fonts</Forms.FormTitle>
             <Forms.FormText>Click on any font to apply it.</Forms.FormText>
 
@@ -163,7 +163,7 @@ function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) =
                     ))}
                 </div>
             )}
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/equicordplugins/gifCollections/index.tsx b/src/equicordplugins/gifCollections/index.tsx
index 772aa574f..a92f92ad2 100644
--- a/src/equicordplugins/gifCollections/index.tsx
+++ b/src/equicordplugins/gifCollections/index.tsx
@@ -461,7 +461,7 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
                                     <Forms.FormText className="custom-modal-title">Collection Information</Forms.FormText>
                                 </ModalHeader>
                                 <ModalContent className="custom-modal-content">
-                                    <Forms.FormSection>
+                                    <section>
                                         <Flex className="collection-info">
                                             <Forms.FormTitle tag="h5" className="collection-info-title">Name</Forms.FormTitle>
                                             <Forms.FormText className="collection-info-text">{collection.name.replace(/.+?:/, "")}</Forms.FormText>
@@ -478,7 +478,7 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
                                             <Forms.FormTitle tag="h5" className="collection-info-title">Last Updated</Forms.FormTitle>
                                             <Forms.FormText className="collection-info-text">{collection.lastUpdated ? new Date(collection.lastUpdated).toLocaleString() : "Unknown"}</Forms.FormText>
                                         </Flex>
-                                    </Forms.FormSection>
+                                    </section>
                                 </ModalContent>
                                 <ModalFooter className="custom-modal-footer">
                                     <Button onClick={modalProps.onClose} className="custom-modal-button">Close</Button>
@@ -522,7 +522,7 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
                                     <Forms.FormText className="custom-modal-title">Information</Forms.FormText>
                                 </ModalHeader>
                                 <ModalContent className="custom-modal-content">
-                                    <Forms.FormSection>
+                                    <section>
                                         <Flex className="gif-info">
                                             <Forms.FormTitle tag="h5" className="gif-info-title">Added At</Forms.FormTitle>
                                             <Forms.FormText className="gif-info-text">{gifInfo.addedAt ? new Date(gifInfo.addedAt).toLocaleString() : "Unknown"}</Forms.FormText>
@@ -535,7 +535,7 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
                                             <Forms.FormTitle tag="h5" className="gif-info-title">Height</Forms.FormTitle>
                                             <Forms.FormText className="gif-info-text">{gifInfo.height}</Forms.FormText>
                                         </Flex>
-                                    </Forms.FormSection>
+                                    </section>
                                 </ModalContent>
                                 <ModalFooter className="custom-modal-footer">
                                     <Button onClick={modalProps.onClose} className="custom-modal-button">Close</Button>
diff --git a/src/equicordplugins/instantScreenshare/utils.tsx b/src/equicordplugins/instantScreenshare/utils.tsx
index 31bade9f5..a6bc11b53 100644
--- a/src/equicordplugins/instantScreenshare/utils.tsx
+++ b/src/equicordplugins/instantScreenshare/utils.tsx
@@ -92,10 +92,10 @@ function ScreenSetting() {
 
 function SettingSection() {
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle>Media source to stream</Forms.FormTitle>
             <Forms.FormText>Resets to main screen if not found</Forms.FormText>
             <ScreenSetting />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx b/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
index ab71ff79f..136fb0145 100644
--- a/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
+++ b/src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
@@ -30,13 +30,13 @@ function createDirSelector(settingKey: "logsDir" | "imageCacheDir", successMessa
         if (IS_WEB) return null;
 
         return (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormTitle>{option.description}</Forms.FormTitle>
                 <SelectFolderInput
                     settingsKey={settingKey}
                     successMessage={successMessage}
                 />
-            </Forms.FormSection>
+            </section>
         );
     };
 }
diff --git a/src/equicordplugins/musicControls/settings.tsx b/src/equicordplugins/musicControls/settings.tsx
index f14155ec1..a4b2f25be 100644
--- a/src/equicordplugins/musicControls/settings.tsx
+++ b/src/equicordplugins/musicControls/settings.tsx
@@ -25,12 +25,12 @@ export function toggleHoverControls(value: boolean) {
 
 function InstallInstructions() {
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h3">How to install</Forms.FormTitle>
             <Forms.FormText>
                 Install <MaskedLink href="https://github.com/Inrixia/TidaLuna#installation">TidaLuna</MaskedLink> from here, then go to TidalLuna settings &rarr; Plugin stores &rarr; Install <code>@vmohammad/api</code>
             </Forms.FormText>
-        </Forms.FormSection>
+        </section>
     );
 }
 
@@ -114,9 +114,9 @@ export const settings = definePluginSettings({
     SpotifySectionTitle: {
         type: OptionType.COMPONENT,
         component: () => (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormTitle tag="h3">Spotify</Forms.FormTitle>
-            </Forms.FormSection>
+            </section>
         )
     },
     showSpotifyControls: {
@@ -143,9 +143,9 @@ export const settings = definePluginSettings({
     TidalSectionTitle: {
         type: OptionType.COMPONENT,
         component: () => (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormTitle tag="h3">Tidal</Forms.FormTitle>
-            </Forms.FormSection>
+            </section>
         )
     },
     installTidalWithWS: {
@@ -193,9 +193,9 @@ export const settings = definePluginSettings({
     YtmSectionTitle: {
         type: OptionType.COMPONENT,
         component: () => (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormTitle tag="h3">Youtube Music</Forms.FormTitle>
-            </Forms.FormSection>
+            </section>
         )
     },
     showYoutubeMusicControls: {
diff --git a/src/equicordplugins/questify/settings.tsx b/src/equicordplugins/questify/settings.tsx
index c6c4321a1..c5f19d622 100644
--- a/src/equicordplugins/questify/settings.tsx
+++ b/src/equicordplugins/questify/settings.tsx
@@ -522,7 +522,7 @@ function QuestButtonSettings(): JSX.Element {
         <ErrorBoundary>
             <Forms.FormDivider className={q("setting-divider")} />
             <div className={q("setting", "quest-icon-setting")}>
-                <Forms.FormSection>
+                <section>
                     <div className={q("main-inline-group")}>
                         <div>
                             <Forms.FormTitle className={q("form-title")}>
@@ -632,7 +632,7 @@ function QuestButtonSettings(): JSX.Element {
                         </div>
                     </div>
                     <div className={q("main-inline-group")}>
-                        <Forms.FormSection>
+                        <section>
                             <Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
                                 Included Reward Types
                             </Forms.FormTitle>
@@ -653,9 +653,9 @@ function QuestButtonSettings(): JSX.Element {
                                 closeOnSelect={false}
                             >
                             </DynamicDropdown>
-                        </Forms.FormSection>
+                        </section>
                     </div>
-                </Forms.FormSection>
+                </section>
             </div>
         </ErrorBoundary>
     );
@@ -771,7 +771,7 @@ function DisableQuestsSetting(): JSX.Element {
         <ErrorBoundary>
             <Forms.FormDivider className={q("setting-divider")} />
             <div className={q("setting", "disable-quests-setting")}>
-                <Forms.FormSection>
+                <section>
                     <Forms.FormTitle className={q("form-title")}>
                         Quest Features
                     </Forms.FormTitle>
@@ -807,7 +807,7 @@ function DisableQuestsSetting(): JSX.Element {
                         closeOnSelect={false}
                     >
                     </DynamicDropdown>
-                </Forms.FormSection>
+                </section>
             </div>
         </ErrorBoundary>
     );
@@ -949,7 +949,7 @@ function RestyleQuestsSetting() {
         <ErrorBoundary>
             <Forms.FormDivider className={q("setting-divider")} />
             <div className={q("setting", "restyle-quests-setting")}>
-                <Forms.FormSection>
+                <section>
                     <div>
                         <Forms.FormTitle className={q("form-title")}>
                             Restyle Quests
@@ -1026,7 +1026,7 @@ function RestyleQuestsSetting() {
                             <DummyQuestPreview quest={dummyQuest} dummyColor={dummyColor} dummyGradient={dummyGradient} />
                         )}
                     </div>
-                </Forms.FormSection>
+                </section>
             </div>
         </ErrorBoundary>
     );
@@ -1085,7 +1085,7 @@ function ReorderQuestsSetting(): JSX.Element {
         <ErrorBoundary>
             <Forms.FormDivider className={q("setting-divider")} />
             <div className={q("setting", "reorder-quests-setting")}>
-                <Forms.FormSection>
+                <section>
                     <div>
                         <Forms.FormTitle className={q("form-title")}>
                             Reorder Quests
@@ -1245,7 +1245,7 @@ function ReorderQuestsSetting(): JSX.Element {
                             If remembering is disabled, the sort or filter options will be reset each time you open the Quest page.
                         </Forms.FormText>
                     </div>
-                </Forms.FormSection>
+                </section>
             </div>
         </ErrorBoundary>
     );
@@ -1463,7 +1463,7 @@ function FetchingQuestsSetting(): JSX.Element {
         <ErrorBoundary>
             <Forms.FormDivider className={q("setting-divider")} />
             <div className={q("setting", "fetching-quests-setting")}>
-                <Forms.FormSection>
+                <section>
                     <div>
                         <Forms.FormTitle className={q("form-title")}>
                             Fetching Quests
@@ -1560,7 +1560,7 @@ function FetchingQuestsSetting(): JSX.Element {
                             </div>
                         </div>
                     </div>
-                </Forms.FormSection>
+                </section>
             </div>
         </ErrorBoundary>
     );
diff --git a/src/equicordplugins/remix/editor/components/SettingColorComponent.tsx b/src/equicordplugins/remix/editor/components/SettingColorComponent.tsx
index 85b28416b..fa159ee10 100644
--- a/src/equicordplugins/remix/editor/components/SettingColorComponent.tsx
+++ b/src/equicordplugins/remix/editor/components/SettingColorComponent.tsx
@@ -10,7 +10,7 @@
 import "./colorStyles.css";
 
 import { classNameFactory } from "@api/Styles";
-import { ColorPicker, Forms } from "@webpack/common";
+import { ColorPicker } from "@webpack/common";
 
 const cl = classNameFactory("vc-remix-settings-color-");
 
@@ -30,7 +30,7 @@ export function SettingColorComponent({ name, onChange, color }: Props) {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <div className={cl("swatch-row")}>
                 <ColorPicker
                     key={name}
@@ -38,6 +38,6 @@ export function SettingColorComponent({ name, onChange, color }: Props) {
                     onChange={handleChange}
                 />
             </div>
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/equicordplugins/soundBoardLogger/settings.tsx b/src/equicordplugins/soundBoardLogger/settings.tsx
index cf5c3ca5c..43fd9452a 100644
--- a/src/equicordplugins/soundBoardLogger/settings.tsx
+++ b/src/equicordplugins/soundBoardLogger/settings.tsx
@@ -46,7 +46,7 @@ const settings = definePluginSettings({
 
 
             return (
-                <Forms.FormSection>
+                <section>
                     <Forms.FormTitle>The amount of soundboard ids you want to save at a time (0 lets you save infinite)</Forms.FormTitle>
                     <TextInput
                         type="number"
@@ -57,7 +57,7 @@ const settings = definePluginSettings({
                     />
                     {shouldShowWarning && <Forms.FormText style={{ color: "var(--text-danger)" }}>Warning! Setting the number to a lower value will reset the log!</Forms.FormText>}
                     {errorMessage && <Forms.FormText style={{ color: "var(--text-danger)" }}>{errorMessage}</Forms.FormText>}
-                </Forms.FormSection>
+                </section>
             );
         }
 
diff --git a/src/equicordplugins/themeLibrary/utils/settings.tsx b/src/equicordplugins/themeLibrary/utils/settings.tsx
index 939d51dd1..3abcd0a31 100644
--- a/src/equicordplugins/themeLibrary/utils/settings.tsx
+++ b/src/equicordplugins/themeLibrary/utils/settings.tsx
@@ -54,7 +54,7 @@ export const settings = definePluginSettings({
             };
 
             return (
-                <Forms.FormSection>
+                <section>
                     <Forms.FormTitle tag="h3" style={{ marginTop: 0, marginBottom: 8 }}>ThemeLibrary Auth</Forms.FormTitle>
                     <div className={cl("button-grid")}>
                         <Button onClick={() => authorizeUser()}>
@@ -74,7 +74,7 @@ export const settings = definePluginSettings({
                             Request Theme Removal <OpenExternalIcon height={16} width={16} />
                         </Button>
                     </div>
-                </Forms.FormSection>
+                </section>
             );
         }
     }
diff --git a/src/equicordplugins/vcNarratorCustom/index.tsx b/src/equicordplugins/vcNarratorCustom/index.tsx
index f11c12daf..dc28b5ec7 100644
--- a/src/equicordplugins/vcNarratorCustom/index.tsx
+++ b/src/equicordplugins/vcNarratorCustom/index.tsx
@@ -373,7 +373,7 @@ export default definePlugin({
         const errorComponent: React.ReactElement | null = null;
 
         return (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormText>
                     You can customise the spoken messages below. You can disable
                     specific messages by setting them to nothing
@@ -415,7 +415,7 @@ export default definePlugin({
                     ))}
                 </div>
                 {errorComponent}
-            </Forms.FormSection>
+            </section>
         );
     },
 });