diff --git a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
index 6b49ae43a..111aae073 100644
--- a/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
+++ b/src/components/ThemeSettings/components/SettingBooleanComponent.tsx
@@ -4,7 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Forms, Switch } from "@webpack/common";
+import "./styles.css";
+
+import { classNameFactory } from "@api/Styles";
+import { FormSwitch } from "@components/FormSwitch";
+import { Forms } from "@webpack/common";
 
 interface Props {
     label: string;
@@ -12,6 +16,8 @@ interface Props {
     themeSettings: Record<string, string>;
 }
 
+const cl = classNameFactory("vc-settings-boolean-");
+
 export function SettingBooleanComponent({ label, name, themeSettings }: Props) {
     function handleChange(value: boolean) {
         const corrected = value ? "1" : "0";
@@ -21,15 +27,14 @@ export function SettingBooleanComponent({ label, name, themeSettings }: Props) {
 
     return (
         <Forms.FormSection>
-            <Switch
+            <FormSwitch
+                title={label}
                 key={name}
+                className={cl("switch")}
                 value={themeSettings[name] === "1"}
                 onChange={handleChange}
                 hideBorder
-                style={{ marginBottom: "0.5em" }}
-            >
-                {label}
-            </Switch>
+            />
         </Forms.FormSection>
     );
 }
diff --git a/src/components/ThemeSettings/components/styles.css b/src/components/ThemeSettings/components/styles.css
new file mode 100644
index 000000000..422bcd940
--- /dev/null
+++ b/src/components/ThemeSettings/components/styles.css
@@ -0,0 +1,3 @@
+.vc-settings-boolean-switch {
+    margin-bottom: 0.5em;
+}
\ No newline at end of file
diff --git a/src/components/settings/OnlineThemeCard.tsx b/src/components/settings/OnlineThemeCard.tsx
index fce5d3cc9..19d761a50 100644
--- a/src/components/settings/OnlineThemeCard.tsx
+++ b/src/components/settings/OnlineThemeCard.tsx
@@ -19,8 +19,8 @@
 import "./AddonCard.css";
 
 import { classNameFactory } from "@api/Styles";
+import { Switch } from "@components/settings";
 import { AddonBadge } from "@components/settings/PluginBadge";
-import { Switch } from "@components/settings/Switch";
 import { Text, useRef } from "@webpack/common";
 import type { MouseEventHandler, ReactNode } from "react";
 
diff --git a/src/components/settings/tabs/vencord/NotificationSettings.tsx b/src/components/settings/tabs/vencord/NotificationSettings.tsx
index 65057c6d1..2ebd729fc 100644
--- a/src/components/settings/tabs/vencord/NotificationSettings.tsx
+++ b/src/components/settings/tabs/vencord/NotificationSettings.tsx
@@ -8,10 +8,11 @@ import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/Settings";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Button, Forms, Select, Slider, Switch, Text } from "@webpack/common";
+import { Button, Forms, Select, Slider, Text } from "@webpack/common";
 
 export function NotificationSection() {
     return (
@@ -89,12 +90,11 @@ function NotificationSettings() {
             />
 
             <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Missed Notification Count</Forms.FormTitle>
-            <Switch
+            <FormSwitch
+                title="When refocusing discord a notification will popup with how you missed"
                 value={settings.missed}
                 onChange={(v: boolean) => settings.missed = v}
-            >
-                When refocusing discord a notification will popup with how you missed
-            </Switch>
+            />
 
             <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText>
diff --git a/src/equicordplugins/chatButtonsPlus/index.tsx b/src/equicordplugins/chatButtonsPlus/index.tsx
index 2366a1450..2ec188ea1 100644
--- a/src/equicordplugins/chatButtonsPlus/index.tsx
+++ b/src/equicordplugins/chatButtonsPlus/index.tsx
@@ -9,11 +9,12 @@ import "./styles.css";
 import { ChatBarButton } from "@api/ChatButtons";
 import { DataStore } from "@api/index";
 import { definePluginSettings, migratePluginSettings, Settings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { EquicordDevs } from "@utils/constants";
 import { getCurrentChannel, sendMessage } from "@utils/discord";
 import { useForceUpdater } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, Forms, React, Switch, TextInput } from "@webpack/common";
+import { Button, Forms, React, TextInput } from "@webpack/common";
 
 type ButtonEntry = {
     id: string;
@@ -181,13 +182,12 @@ function ButtonEntries() {
                 <div className="chatButtonsPlus-header">
                     <Forms.FormTitle tag="h5" className="chatButtonsPlus-title">Button {i + 1}</Forms.FormTitle>
                     <div className="chatButtonsPlus-controls">
-                        <Switch
+                        <FormSwitch
+                            title="Enabled"
                             value={entry.enabled ?? true}
                             onChange={value => setEnabled(entry.id, value)}
                             className="chatButtonsPlus-toggle"
-                        >
-                            Enabled
-                        </Switch>
+                        />
                         <Button
                             onClick={() => removeButtonEntry(entry.id, update)}
                             look={Button.Looks.OUTLINED}
diff --git a/src/equicordplugins/customSounds/SoundOverrideComponent.tsx b/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
index 5d7aa402a..56d448841 100644
--- a/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
+++ b/src/equicordplugins/customSounds/SoundOverrideComponent.tsx
@@ -6,11 +6,12 @@
 
 import { AudioPlayerInterface, playAudio } from "@api/AudioPlayer";
 import { classNameFactory } from "@api/Styles";
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
 import { useForceUpdater } from "@utils/react";
 import { makeRange } from "@utils/types";
 import { findLazy } from "@webpack";
-import { Button, Card, Forms, React, Select, showToast, Slider, Switch } from "@webpack/common";
+import { Button, Card, Forms, React, Select, showToast, Slider } from "@webpack/common";
 import { ComponentType, Ref, SyntheticEvent } from "react";
 
 import { deleteAudio, getAllAudio, saveAudio, StoredAudioFile } from "./audioStore";
@@ -148,7 +149,8 @@ export function SoundOverrideComponent({ type, override, onChange }: {
 
     return (
         <Card className={cl("card")}>
-            <Switch
+            <FormSwitch
+                title={type.name}
                 value={override.enabled || false}
                 onChange={async val => {
                     console.log(`[CustomSounds] Setting ${type.id} enabled to:`, val);
@@ -169,9 +171,7 @@ export function SoundOverrideComponent({ type, override, onChange }: {
                 }}
                 className={Margins.bottom16}
                 hideBorder
-            >
-                {type.name}
-            </Switch>
+            />
 
             {override.enabled && (
                 <>
diff --git a/src/equicordplugins/keywordNotify/index.tsx b/src/equicordplugins/keywordNotify/index.tsx
index b4d506b95..204031885 100644
--- a/src/equicordplugins/keywordNotify/index.tsx
+++ b/src/equicordplugins/keywordNotify/index.tsx
@@ -10,6 +10,7 @@ import { DataStore } from "@api/index";
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
+import { FormSwitch } from "@components/FormSwitch";
 import { DeleteIcon } from "@components/Icons";
 import { EquicordDevs } from "@utils/constants";
 import { Margins } from "@utils/margins";
@@ -18,7 +19,7 @@ import { useForceUpdater } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
 import { Message } from "@vencord/discord-types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { Button, ChannelStore, FluxDispatcher, Forms, Select, SelectedChannelStore, Switch, TabBar, TextInput, Tooltip, UserStore, useState } from "@webpack/common";
+import { Button, ChannelStore, FluxDispatcher, Forms, Select, SelectedChannelStore, TabBar, TextInput, Tooltip, UserStore, useState } from "@webpack/common";
 import type { JSX, PropsWithChildren } from "react";
 
 type IconProps = JSX.IntrinsicElements["svg"];
@@ -225,15 +226,14 @@ function KeywordEntries() {
                             <DeleteIcon />
                         </Button>
                     </Flex>
-                    <Switch
+                    <FormSwitch
+                        title="Ignore Case"
+                        className={cl("switch")}
                         value={values[i].ignoreCase}
                         onChange={() => {
                             setIgnoreCase(i, !values[i].ignoreCase);
                         }}
-                        style={{ marginTop: "0.5em", marginRight: "40px" }}
-                    >
-                        Ignore Case
-                    </Switch>
+                    />
                     <Forms.FormTitle tag="h5">Whitelist/Blacklist</Forms.FormTitle>
                     <Flex flexDirection="row">
                         <div style={{ flexGrow: 1 }}>
diff --git a/src/equicordplugins/keywordNotify/style.css b/src/equicordplugins/keywordNotify/style.css
index 95fc9da84..68727ee4f 100644
--- a/src/equicordplugins/keywordNotify/style.css
+++ b/src/equicordplugins/keywordNotify/style.css
@@ -14,3 +14,8 @@
     padding: 8px;
     cursor: pointer;
 }
+
+.vc-keywordnotify-switch {
+    margin-top: 0.5em;
+    margin-right: 40px;
+}
\ No newline at end of file
diff --git a/src/equicordplugins/moreUserTags/settings.tsx b/src/equicordplugins/moreUserTags/settings.tsx
index 83577daeb..81e044a8d 100644
--- a/src/equicordplugins/moreUserTags/settings.tsx
+++ b/src/equicordplugins/moreUserTags/settings.tsx
@@ -5,9 +5,10 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
 import { OptionType } from "@utils/types";
-import { Card, Flex, Forms, Switch, TextInput, Tooltip } from "@webpack/common";
+import { Card, Flex, Forms, TextInput, Tooltip } from "@webpack/common";
 
 import { Tag, tags } from "./consts";
 import { TagSettings } from "./types";
@@ -68,21 +69,19 @@ function SettingsComponent() {
                             className={Margins.bottom16}
                         />
 
-                        <Switch
+                        <FormSwitch
+                            title="Show in messages"
                             value={tagSettings[t.name]?.showInChat ?? true}
                             onChange={v => tagSettings[t.name].showInChat = v}
                             hideBorder
-                        >
-                            Show in messages
-                        </Switch>
+                        />
 
-                        <Switch
+                        <FormSwitch
+                            title="Show in member list and profiles"
                             value={tagSettings[t.name]?.showInNotChat ?? true}
                             onChange={v => tagSettings[t.name].showInNotChat = v}
                             hideBorder
-                        >
-                            Show in member list and profiles
-                        </Switch>
+                        />
                     </Card>
                 ))}
             </div>
diff --git a/src/equicordplugins/quoter/index.tsx b/src/equicordplugins/quoter/index.tsx
index d82b9d04d..929a57bc7 100644
--- a/src/equicordplugins/quoter/index.tsx
+++ b/src/equicordplugins/quoter/index.tsx
@@ -6,12 +6,13 @@
 
 import { findGroupChildrenByChildId } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
 import { Message } from "@vencord/discord-types";
-import { Button, Menu, Select, Switch, Text, UploadHandler, useEffect, useState } from "@webpack/common";
+import { Button, Menu, Select, Text, UploadHandler, useEffect, useState } from "@webpack/common";
 
 import { QuoteIcon } from "./components";
 import { canvasToBlob, fetchImageAsBlob, FixUpQuote, wrapText } from "./utils";
@@ -219,7 +220,7 @@ function QuoteModal({ message, ...props }: ModalProps & { message: Message; }) {
                 <img alt="" src="" id="quoterPreview" style={{ borderRadius: "20px", width: "100%" }} />
                 <br /><br />
                 <br /><br />
-                <Switch value={gray} onChange={setGray}>Grayscale</Switch>
+                <FormSwitch title="Grayscale" value={gray} onChange={setGray} />
                 <Select
                     look={1}
                     options={Object.keys(ImageStyle)
diff --git a/src/equicordplugins/rpcEditor/ReplaceSettings.tsx b/src/equicordplugins/rpcEditor/ReplaceSettings.tsx
index ab393408c..e44959c82 100644
--- a/src/equicordplugins/rpcEditor/ReplaceSettings.tsx
+++ b/src/equicordplugins/rpcEditor/ReplaceSettings.tsx
@@ -5,11 +5,12 @@
  */
 
 import { CheckedTextInput } from "@components/CheckedTextInput";
+import { FormSwitch } from "@components/FormSwitch";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { Activity } from "@vencord/discord-types";
 import { ActivityFlags, ActivityType } from "@vencord/discord-types/enums";
-import { Card, Forms, PresenceStore, React, Select, SnowflakeUtils, Switch, TextInput, UserStore } from "@webpack/common";
+import { Card, Forms, PresenceStore, React, Select, SnowflakeUtils, TextInput, UserStore } from "@webpack/common";
 
 import { AppIdSetting, makeEmptyAppId } from ".";
 
@@ -78,16 +79,15 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
                     <Card style={{ padding: "1em", opacity: !setting.enabled ? "60%" : "" }} key={i}>
                         {
                             isValidSnowflake(setting.appId) ?
-                                <Switch
+                                <FormSwitch
+                                    title="Apply edits to app"
                                     value={setting.enabled}
                                     onChange={value => {
                                         onChange(value, i, "enabled");
                                     }}
                                     className={Margins.bottom8}
                                     hideBorder={true}
-                                >
-                                    Apply edits to app
-                                </Switch> : <Forms.FormTitle tag="h3">Add new application</Forms.FormTitle>
+                                /> : <Forms.FormTitle tag="h3">Add new application</Forms.FormTitle>
                         }
                         <Forms.FormTitle className={`${Margins.top8} ${Margins.bottom8}`}>Application ID</Forms.FormTitle>
                         <CheckedTextInput
@@ -201,31 +201,26 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
                                         />
                                     </>
                                 }
-                                <Switch
+                                <FormSwitch
+                                    title="Hide assets (large & small images)"
                                     value={setting.disableAssets}
                                     onChange={value => {
                                         onChange(value, i, "disableAssets");
                                     }}
                                     className={Margins.top8}
                                     hideBorder={true}
-                                    style={{ marginBottom: "0" }}
-                                >
-                                    Hide assets (large & small images)
-                                </Switch>
-                                <Switch
+                                />
+                                <FormSwitch
+                                    title="Hide timestamps"
                                     value={setting.disableTimestamps}
                                     onChange={value => {
                                         onChange(value, i, "disableTimestamps");
                                     }}
                                     className={Margins.top8}
-                                    hideBorder={true}
-                                    style={{ marginBottom: "0" }}
-                                >
-                                    Hide timestamps
-                                </Switch>
+                                    hideBorder={true} />
                             </>
                         }
-                    </Card>
+                    </Card >
                 )
             }
         </>
diff --git a/src/equicordplugins/rpcEditor/style.css b/src/equicordplugins/rpcEditor/style.css
index 8ceda789c..3f4e78851 100644
--- a/src/equicordplugins/rpcEditor/style.css
+++ b/src/equicordplugins/rpcEditor/style.css
@@ -11,4 +11,4 @@
 
 .vc-rpceditor-horizontal div:first-child {
     padding-right: 5px;
-}
+}
\ No newline at end of file
diff --git a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
index 4f2836472..74313d84b 100644
--- a/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
+++ b/src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
@@ -5,8 +5,9 @@
  */
 
 import { Flex } from "@components/Flex";
+import { FormSwitch } from "@components/FormSwitch";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Button, ChannelStore, Forms, React, SelectedChannelStore, Slider, Switch, Text, TextArea, UploadHandler } from "@webpack/common";
+import { Button, ChannelStore, Forms, React, SelectedChannelStore, Slider, Text, TextArea, UploadHandler } from "@webpack/common";
 
 import { characters } from "../characters.json";
 import Canvas from "./Canvas";
@@ -117,7 +118,7 @@ export default function SekaiStickersModal({ modalProps, settings }: { modalProp
                         <Slider minValue={10} asValueChanges={val => setFontSize(Math.round(val))} maxValue={100} initialValue={fontSize} keyboardStep={1} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
                         <Forms.FormTitle>Spacing</Forms.FormTitle>
                         <Slider markers={[18, 36, 72, 100]} stickToMarkers={false} minValue={18} maxValue={100} initialValue={spaceSize} asValueChanges={e => setSpaceSize(e)} onValueRender={e => String(Math.round(e))} />
-                        <Switch value={curve} onChange={val => setCurve(val)}>Enable curve</Switch>
+                        <FormSwitch title="Enable curve" value={curve} onChange={val => setCurve(val)} />
                         <Button onClick={() => openModal(props => <CharSelectModal modalProps={props} setCharacter={setChracter} />)}>Switch Character</Button>
                     </div>
                 </Flex>
diff --git a/src/equicordplugins/webpackTarball/index.tsx b/src/equicordplugins/webpackTarball/index.tsx
index 2d666f31b..e9dfa4cbb 100644
--- a/src/equicordplugins/webpackTarball/index.tsx
+++ b/src/equicordplugins/webpackTarball/index.tsx
@@ -5,12 +5,13 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
+import { FormSwitch } from "@components/FormSwitch";
 import { Devs } from "@utils/constants";
 import { makeLazy } from "@utils/lazy";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByProps, wreq } from "@webpack";
-import { Button, Flex, Forms, Switch, Text, Timestamp, useState } from "@webpack/common";
+import { Button, Flex, Forms, Text, Timestamp, useState } from "@webpack/common";
 
 import TarFile from "./tar";
 import * as Webpack from "./webpack";
@@ -136,13 +137,12 @@ function TarModal({ modalProps, close }: { modalProps: ModalProps; close(): void
                     </Flex>
                 </div>
 
-                <Switch
+                <FormSwitch
                     value={patched}
                     onChange={v => settings.store.patched = v}
+                    title={settings.def.patched.description}
                     hideBorder
-                >
-                    {settings.def.patched.description}
-                </Switch>
+                />
             </ModalContent>
 
             <ModalFooter>