diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
index f8af930..47cf653 100644
--- a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
+++ b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useStore from '@store/store';
 import { useTranslation } from 'react-i18next';
 import { matchSorter } from 'match-sorter';
@@ -14,6 +14,7 @@ const CommandPrompt = ({
   const [dropDown, setDropDown] = useState<boolean>(false);
   const [_prompts, _setPrompts] = useState<Prompt[]>(prompts);
   const [input, setInput] = useState<string>('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const filteredPrompts = matchSorter(useStore.getState().prompts, input, {
@@ -27,8 +28,29 @@ const CommandPrompt = ({
     setInput('');
   }, [prompts]);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setDropDown(false);
+      }
+    };
+
+    if (dropDown) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownRef, dropDown]);
+
   return (
-    <div className='relative max-wd-sm'>
+    <div className='relative max-wd-sm' ref={dropdownRef}>
       <button
         className='btn btn-neutral btn-small'
         onClick={() => setDropDown(!dropDown)}
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index c85bc55..ad93d59 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -37,6 +37,7 @@ const ChatFolder = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const folderRef = useRef<HTMLDivElement>(null);
   const gradientRef = useRef<HTMLDivElement>(null);
+  const paletteRef = useRef<HTMLDivElement>(null);
 
   const [_folderName, _setFolderName] = useState<string>(folderName);
   const [isEdit, setIsEdit] = useState<boolean>(false);
@@ -144,6 +145,27 @@ const ChatFolder = ({
     if (inputRef && inputRef.current) inputRef.current.focus();
   }, [isEdit]);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        paletteRef.current &&
+        !paletteRef.current.contains(event.target as Node)
+      ) {
+        setShowPalette(false);
+      }
+    };
+
+    if (showPalette) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [paletteRef, showPalette]);
+
   return (
     <div
       className={`w-full transition-colors group/folder ${
@@ -217,7 +239,10 @@ const ChatFolder = ({
             </>
           ) : (
             <>
-              <div className='relative md:hidden group-hover/folder:md:inline'>
+              <div
+                className='relative md:hidden group-hover/folder:md:inline'
+                ref={paletteRef}
+              >
                 <button
                   className='p-1 hover:text-white'
                   onClick={() => {