diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index ca71230..d5ebc1b 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -40,6 +40,7 @@ const Header = ({
   const [selectedColor, setSelectedColor] = useState(null);
   const [showRiskScore, setShowRiskScore] = useState(false);
   const [riskScore, setRiskScore] = useState('');
+  const iconContainerRef = useRef(null);
 
   const handleRiskScoreChange = (e) => {
     const val = e.target.value;
@@ -100,6 +101,24 @@ const Header = ({
     }
   };
 
+   // Hide on outside click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        iconContainerRef.current &&
+        !iconContainerRef.current.contains(event.target)
+      ) {
+        setActiveControl(false);
+        setShowPopup(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   const toggleHide = (iconName) => {
     if (iconName === 'RiEyeLine') {
       const newValue = !hide;
@@ -202,6 +221,8 @@ const Header = ({
   return (
     <header>
       <img width="250" height="50" className="logo" alt="NRF Logo" src={NRFLogo} />
+      <span>Dev Build</span>
+
       {showFailAlert && <Alert classStyle="alert-fail" heading={alertHeading} value={alertVal} />}
       {responseSubmit && <Alert classStyle="alert-success" heading={alertHeading} value={alertVal} />}
 
@@ -217,7 +238,7 @@ const Header = ({
             Import Data
           </button>
 
-          <div style={{ position: 'relative' }}>
+          <div style={{ position: 'relative' }} ref={iconContainerRef}>
             <button className="header-button" onClick={() => setActiveControl(!activeControl)}>
               <RiSettings5Fill style={{ fontSize: '30px' }} />
               Technique Controls