diff --git a/package.json b/package.json
index 1f272ce1..1677b398 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "ag-grid-react": "^32.0.2",
     "axios": "^1.7.8",
     "chart.js": "^4.4.6",
+    "dayjs": "^1.11.13",
     "fabric": "^5.3.0",
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",
@@ -32,12 +33,12 @@
     "react-icons": "^5.3.0",
     "react-loading-skeleton": "^3.5.0",
     "react-responsive-modal": "^6.4.2",
+    "react-select": "^5.8.1",
     "recoil": "^0.7.7",
     "sweetalert2": "^11.14.1",
     "sweetalert2-react-content": "^5.0.7",
-    "uuid": "^10.0.0",
-    "dayjs": "^1.11.13",
-    "react-select": "^5.8.1"
+    "usehooks-ts": "^3.1.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@turf/turf": "^7.0.0",
diff --git a/src/components/common/select/QSelectBox.jsx b/src/components/common/select/QSelectBox.jsx
index 3da9f30b..b2381c00 100644
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@@ -1,21 +1,29 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useOnClickOutside } from 'usehooks-ts'
 
 export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
   const [openSelect, setOpenSelect] = useState(false)
   const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+  const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
     setSelected(option.name)
     onChange?.(option, params)
   }
 
+  const handleClose = () => {
+    setOpenSelect(false)
+  }
+
   useEffect(() => {
     value && handleClickSelectOption(value)
   }, [value])
 
+  useOnClickOutside(ref, handleClose)
+
   return (
-    <div className={`sort-select ${openSelect ? 'active' : ''}`} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
+    <div className={`sort-select ${openSelect ? 'active' : ''}`} ref={ref} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
       <p>{selected}</p>
       <ul className="select-item-wrap">
         {options?.map((option, index) => (