diff --git a/src/index.css b/src/index.css
index a6dc688..cbfd7e1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,14 +25,15 @@ body,
 /* Popup Styling */
 .popup {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
+  top: 50%;
+  left: 50%;
+  width: 600px;
   height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
+  transform: translate(-50%, -50%);
 }
 
 .popup.hidden {
diff --git a/src/nodes/NoteFlow.tsx b/src/nodes/NoteFlow.tsx
index 43fd200..638fc6e 100644
--- a/src/nodes/NoteFlow.tsx
+++ b/src/nodes/NoteFlow.tsx
@@ -3,7 +3,6 @@ import {ReactFlow, addEdge, Controls, Background, MarkerType  } from '@xyflow/re
 import '@xyflow/react/dist/style.css';
 import { FiUser, FiMail, FiCheckCircle,FiList } from 'react-icons/fi';
 import {FaShuffle  } from "react-icons/fa6";
-import { event } from 'jquery';
 
 
 const initialNode = {
@@ -200,6 +199,7 @@ const NoteFlow = () => {
 
   const hideenPopup = () => {
     setShowPopup(false);
+    console.log('hide')
   }
 
   const onConnect = (params) => setEdges((eds) => addEdge(params, eds));
@@ -269,7 +269,7 @@ const NoteFlow = () => {
       )}
       {showPopup && (
         <>
-        <div className="popup-overlay" onClick={hideenPopup}></div>
+        <button className="popup-overlay" onClick={hideenPopup}></button>
         <div
          className={`popup global-popup ${showPopup ? '' : 'hidden'}`}
         >
@@ -277,7 +277,7 @@ const NoteFlow = () => {
             <div  className="conent-form">
               <form>
                 <div dangerouslySetInnerHTML={{ __html: selectedNodeContent }} />
-                <button onClick={() => setShowPopup(false)}>Close</button>
+                <button onClick={hideenPopup}>Close</button>
               </form>
             </div>
           </div>