diff --git a/docs/3_COMMAND_PALETTE.md b/src/plugins/commandPalette/3_COMMAND_PALETTE.md
similarity index 100%
rename from docs/3_COMMAND_PALETTE.md
rename to src/plugins/commandPalette/3_COMMAND_PALETTE.md
diff --git a/src/plugins/commandPalette/index.tsx b/src/plugins/commandPalette/index.tsx
index 678f903f..be8d622d 100644
--- a/src/plugins/commandPalette/index.tsx
+++ b/src/plugins/commandPalette/index.tsx
@@ -9,31 +9,73 @@ import { classNameFactory } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import { closeAllModals } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
-import { SettingsRouter } from "@webpack/common";
+import { SettingsRouter, useState } from "@webpack/common";
 
 import { registerAction } from "./commands";
 import { openCommandPalette } from "./components/CommandPalette";
 
 const cl = classNameFactory("vc-command-palette-");
-let recording: boolean = false;
+let isRecordingGlobal: boolean = false;
 
 export const settings = definePluginSettings({
     hotkey: {
         description: "The hotkey to open the command palette.",
         type: OptionType.COMPONENT,
         default: ["Control", "Shift", "P"],
-        component: () => (
-            <>
-                <div className={cl("key-recorder-container")} onClick={recordKeybind}>
-                    <div className={cl("key-recorder", { "vc-command-palette-recording": recording })}>
-                        {settings.store.hotkey.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" + ")}
-                        <button className={cl("key-recorder-button", { "vc-command-palette-recording-button": recording })} disabled={recording}>
-                            {recording ? "Recording..." : "Record keybind"}
-                        </button>
+        component: () => {
+            const [isRecording, setIsRecording] = useState(false);
+
+            const recordKeybind = (setIsRecording: (value: boolean) => void) => {
+                const keys: Set<string> = new Set();
+                const keyLists: string[][] = [];
+
+                setIsRecording(true);
+                isRecordingGlobal = true;
+
+                const updateKeys = () => {
+                    if (keys.size === 0 || !document.querySelector(`.${cl("key-recorder-button")}`)) {
+                        const longestArray = keyLists.reduce((a, b) => a.length > b.length ? a : b);
+                        if (longestArray.length > 0) {
+                            settings.store.hotkey = longestArray.map(key => key.toLowerCase());
+                        }
+                        setIsRecording(false);
+                        isRecordingGlobal = false;
+                        document.removeEventListener("keydown", keydownListener);
+                        document.removeEventListener("keyup", keyupListener);
+                    }
+                    keyLists.push(Array.from(keys));
+                };
+
+                const keydownListener = (e: KeyboardEvent) => {
+                    const { key } = e;
+                    if (!keys.has(key)) {
+                        keys.add(key);
+                    }
+                    updateKeys();
+                };
+
+                const keyupListener = (e: KeyboardEvent) => {
+                    keys.delete(e.key);
+                    updateKeys();
+                };
+
+                document.addEventListener("keydown", keydownListener);
+                document.addEventListener("keyup", keyupListener);
+            };
+
+            return (
+                <>
+                    <div className={cl("key-recorder-container")} onClick={() => recordKeybind(setIsRecording)}>
+                        <div className={`${cl("key-recorder")} ${isRecording ? cl("recording") : ""}`}>
+                            {settings.store.hotkey.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" + ")}
+                            <button className={`${cl("key-recorder-button")} ${isRecording ? cl("recording-button") : ""}`} disabled={isRecording}>
+                                {isRecording ? "Recording..." : "Record keybind"}
+                            </button>
+                        </div>
                     </div>
-                </div>
-            </>
-        )
+                </>
+            );
+        }
     },
     allowMouseControl: {
         description: "Allow the mouse to control the command palette.",
@@ -42,66 +84,6 @@ export const settings = definePluginSettings({
     }
 });
 
-function recordKeybind() {
-    const keys: Set<string> = new Set();
-    const keyLists: string[][] = [];
-
-    const updateComponentText = () => {
-        const button = document.querySelector(`.${cl("key-recorder-button")}`);
-        const div = document.querySelector(`.${cl("key-recorder")}`);
-
-        if (button) {
-            button.textContent = recording ? "Recording..." : "Record keybind";
-            button.classList.toggle(cl("recording-button"), recording);
-        }
-
-        if (div) {
-            div.classList.toggle(cl("recording"), recording);
-        }
-    };
-
-    recording = true;
-    updateComponentText();
-
-    const updateKeys = () => {
-
-
-        if (keys.size === 0 || !document.querySelector(`.${cl("key-recorder-button")}`)) {
-            const longestArray = keyLists.reduce((a, b) => a.length > b.length ? a : b);
-
-            if (longestArray.length > 0) {
-                settings.store.hotkey = longestArray.map(key => key.toLowerCase());
-            }
-
-            recording = false;
-            updateComponentText();
-
-            document.removeEventListener("keydown", keydownListener);
-            document.removeEventListener("keyup", keyupListener);
-        }
-
-        keyLists.push(Array.from(keys));
-    };
-
-    const keydownListener = (e: KeyboardEvent) => {
-        const { key } = e;
-
-        if (!keys.has(key)) {
-            keys.add(key);
-        }
-
-        updateKeys();
-    };
-
-    const keyupListener = (e: KeyboardEvent) => {
-        keys.delete(e.key);
-        updateKeys();
-    };
-
-    document.addEventListener("keydown", keydownListener);
-    document.addEventListener("keyup", keyupListener);
-}
-
 
 export default definePlugin({
     name: "CommandPalette",
@@ -139,7 +121,7 @@ export default definePlugin({
         const { hotkey } = settings.store;
         const pressedKey = e.key.toLowerCase();
 
-        if (recording) return;
+        if (isRecordingGlobal) return;
 
         for (let i = 0; i < hotkey.length; i++) {
             const lowercasedRequiredKey = hotkey[i].toLowerCase();