diff --git a/.changeset/tricky-onions-care.md b/.changeset/tricky-onions-care.md
new file mode 100644
index 00000000..cb1fbd75
--- /dev/null
+++ b/.changeset/tricky-onions-care.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Fixed not being able to click out of Command Palette
diff --git a/.github/workflows/pr-ci.yml b/.github/workflows/pr-ci.yml
index 876506b5..cb9b1ab4 100644
--- a/.github/workflows/pr-ci.yml
+++ b/.github/workflows/pr-ci.yml
@@ -138,7 +138,7 @@ jobs:
         run: yarn run test
 
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: cypress-artifacts
diff --git a/packages/graph-editor/src/components/commandPalette/index.tsx b/packages/graph-editor/src/components/commandPalette/index.tsx
index d4465728..a9da2b4e 100644
--- a/packages/graph-editor/src/components/commandPalette/index.tsx
+++ b/packages/graph-editor/src/components/commandPalette/index.tsx
@@ -16,6 +16,7 @@ import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
 import React from 'react';
 import Search from '@tokens-studio/icons/Search.js';
 import styles from './index.module.css';
+import useClickOutside from '@/hooks/useClickOutside.js';
 
 export interface ICommandMenu {
   items: DropPanelStore;
@@ -91,6 +92,10 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
   const reactflow = useReactFlow();
   const selectAddedNodes = useSelectAddedNodes();
 
+  const dialogRef = useClickOutside<HTMLDivElement>(() => {
+    dispatch.ui.setShowNodesCmdPalette(!showNodesCmdPalette);
+  }, showNodesCmdPalette);
+
   const handleSelectItem = (item) => {
     const newNode = handleSelectNewNodeType({
       position: reactflow.screenToFlowPosition(cursorPositionRef.current),
@@ -142,6 +147,7 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
 
   return (
     <Command.Dialog
+      ref={dialogRef}
       open={showNodesCmdPalette}
       onOpenChange={() =>
         dispatch.ui.setShowNodesCmdPalette(!showNodesCmdPalette)
diff --git a/packages/graph-editor/src/hooks/useClickOutside.ts b/packages/graph-editor/src/hooks/useClickOutside.ts
new file mode 100644
index 00000000..7fd4fc18
--- /dev/null
+++ b/packages/graph-editor/src/hooks/useClickOutside.ts
@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+export default <T extends HTMLElement>(
+  callback: () => void,
+  active = false,
+) => {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+
+      if (
+        [...target.classList.values()].find((itm) =>
+          itm.includes('react-colorful'),
+        )
+      ) {
+        return;
+      }
+
+      callback();
+    };
+
+    if (active) {
+      document.addEventListener('click', handleClick, true);
+    }
+
+    return () => {
+      document.removeEventListener('click', handleClick, true);
+    };
+  }, [callback, ref, active]);
+
+  return ref;
+};