diff --git a/renderer/src/builtins/customcss.js b/renderer/src/builtins/customcss.js
index 9b9307c1..1f922790 100644
--- a/renderer/src/builtins/customcss.js
+++ b/renderer/src/builtins/customcss.js
@@ -134,7 +134,7 @@ export default new class CustomCSS extends Builtin {
             save: this.saveCSS.bind(this),
             update: this.insertCSS.bind(this),
             openNative: this.openNative.bind(this),
-            onChange: this.onChange.bind(this)
+            onChange: Utilities.debounce(this.onChange.bind(this), 500)
         });
 
         FloatingWindows.open({
diff --git a/renderer/src/styles/builtins/customcss.css b/renderer/src/styles/builtins/customcss.css
index d8351128..b3e5aa5d 100644
--- a/renderer/src/styles/builtins/customcss.css
+++ b/renderer/src/styles/builtins/customcss.css
@@ -55,19 +55,8 @@
     align-items: center;
 }
 
-.controls-section .checkbox-inner {
-    width: 14px;
-    height: 14px;
-}
-
-.controls-section .checkbox-inner .checkbox:checked + span::after {
-    left: 2px;
-    top: -2px;
-}
-
-.controls-section .checkbox-label {
-    font-size: 14px;
-    font-weight: 500;
+.controls-section.controls-right {
+    gap: 15px;
 }
 
 .monaco-editor:not(.rename-box),
diff --git a/renderer/src/ui/customcss/checkbox.jsx b/renderer/src/ui/customcss/checkbox.jsx
deleted file mode 100644
index a17e7cc6..00000000
--- a/renderer/src/ui/customcss/checkbox.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "@modules/react";
-
-const {useState, useCallback} = React;
-
-
-export default function Checkbox({checked: initialState, text, onChange: notifyParent}) {
-    const [checked, setChecked] = useState(initialState);
-    const onClick = useCallback(() => {
-        notifyParent?.(!checked);
-        setChecked(!checked);
-    }, [notifyParent, checked]);
-
-    return <div className="checkbox-item">
-            <div className="checkbox-label label-JWQiNe da-label">{text}</div>
-            <div className="checkbox-wrapper checkbox-3kaeSU da-checkbox checkbox-3EVISJ da-checkbox" onClick={onClick}>
-                <div className="checkbox-inner checkboxInner-3yjcPe da-checkboxInner">
-                    <input className="checkbox checkboxElement-1qV33p da-checkboxElement" checked={checked} type="checkbox" />
-                    <span></span>
-                </div>
-                <span></span>
-            </div>
-        </div>;
-}
\ No newline at end of file
diff --git a/renderer/src/ui/customcss/csseditor.jsx b/renderer/src/ui/customcss/csseditor.jsx
index 3ba43a8b..b9d34422 100644
--- a/renderer/src/ui/customcss/csseditor.jsx
+++ b/renderer/src/ui/customcss/csseditor.jsx
@@ -61,7 +61,7 @@ export default forwardRef(function CssEditor({css, openNative, update, save, onC
                     {label: <Refresh size="18px" />, tooltip: Strings.CustomCSS.update, onClick: updateCss},
                     {label: <Save size="18px" />, tooltip: Strings.CustomCSS.save, onClick: saveCss},
                     {label: <Edit size="18px" />, tooltip: Strings.CustomCSS.openNative, onClick: popoutNative},
-                    {label: Strings.Collections.settings.customcss.liveUpdate.name, type: "checkbox", onChange: toggleLiveUpdate, checked: Settings.get("settings", "customcss", "liveUpdate"), side: "right"},
+                    {label: Strings.Collections.settings.customcss.liveUpdate.name, type: "boolean", onChange: toggleLiveUpdate, checked: Settings.get("settings", "customcss", "liveUpdate"), side: "right"},
                     openDetached && {label: <Detach size="18px" />, tooltip: Strings.CustomCSS.openDetached, onClick: popout, side: "right"}
                 ].filter(c => c)}
                 value={css}
diff --git a/renderer/src/ui/customcss/editor.jsx b/renderer/src/ui/customcss/editor.jsx
index 94de9b14..6062c965 100644
--- a/renderer/src/ui/customcss/editor.jsx
+++ b/renderer/src/ui/customcss/editor.jsx
@@ -3,7 +3,9 @@ import DiscordModules from "@modules/discordmodules";
 import Settings from "@modules/settingsmanager";
 
 import Button from "../base/button";
-import Checkbox from "./checkbox";
+import Flex from "../base/flex";
+import Switch from "../settings/components/switch";
+import Text from "@ui/base/text";
 
 const {useState, useCallback, useEffect, forwardRef, useMemo, useImperativeHandle} = React;
 const ThemeStore = DiscordModules.ThemeStore;
@@ -18,13 +20,16 @@ function makeButton(button, value) {
                 }}
             </DiscordModules.Tooltip>;
 }
-
-function makeCheckbox(checkbox) {
-    return <Checkbox text={checkbox.label} onChange={checkbox.onChange} checked={checkbox.checked} />;
+// <Switch disabled={disabled} checked={isEnabled} onChange={onChange} />
+function makeSwitch(control) {
+    return <Flex align={Flex.Align.CENTER} style={{gap: "10px"}}>
+                <Text>{control.label}</Text>
+                <Switch onChange={control.onChange} checked={control.checked} />
+            </Flex>;
 }
 
 function buildControl(value, control) {
-    if (control.type == "checkbox") return makeCheckbox(control);
+    if (control.type == "boolean") return makeSwitch(control);
     return makeButton(control, value);
 }