diff --git a/frontend/src/components/Dropdown.jsx b/frontend/src/components/Dropdown.jsx
index a72c39c..9069fdd 100644
--- a/frontend/src/components/Dropdown.jsx
+++ b/frontend/src/components/Dropdown.jsx
@@ -1,18 +1,21 @@
-import React ,{useState , useEffect}from "react";
+import React, { useState, useEffect } from "react";
 import { useRef } from "react";
-
+import LogoutModal from "./LogoutModal";
 
 const Dropdown = () => {
     const [visible, setVisible] = useState(false);
+    const [modalVisible, setModalVisible] = useState(false); 
     const dropdownRef = useRef(null);
     
-    // Function to handle the click event
+    
     const handleClick = () => { setVisible(!visible); };
 
     // Function to handle the click outside the dropdown
     const handleClickOutside = (event) => { 
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target))
-             { setVisible(false); } }; 
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setVisible(false); 
+        } 
+    }; 
 
     // useEffect hook to add an event listener when the component mounts
     useEffect(() => { 
@@ -20,19 +23,26 @@ const Dropdown = () => {
         return () => { document.removeEventListener('mousedown', handleClickOutside); }; 
     }, []);
 
+    // Function to handle logout click
+    const handleLogoutClick = () => {
+        setModalVisible(true); 
+        setVisible(false); 
+    };
+
     return (
-    <div className="relative" id="profileDropdown">
-    <button id="profileButton" className="flex items-center" onClick={handleClick}>
-        <img src="https://via.placeholder.com/30" alt="Profile" className="rounded-full w-8 h-8 mr-2"/>
-        <span className="text-gray-700 hidden md:inline">John Doe</span>
-    </button>
-    <div id="dropdownMenu" ref={dropdownRef} className={`${visible ? 'block' : 'hidden'} space-y-4 absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg`}>
-        <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
-        <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
-        <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
-    </div>
-</div>
+        <div className="relative" id="profileDropdown">
+            <button id="profileButton" className="flex items-center" onClick={handleClick}>
+                <img src="https://via.placeholder.com/30" alt="Profile" className="rounded-full w-8 h-8 mr-2"/>
+                <span className="text-gray-700 hidden md:inline">John Doe</span>
+            </button>
+            <div id="dropdownMenu" ref={dropdownRef} className={`${visible ? 'block' : 'hidden'} space-y-4 absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg`}>
+                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
+                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
+                <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onClick={handleLogoutClick}>Logout</a>
+            </div>
+            {modalVisible && <LogoutModal setVisible={setModalVisible} />} {/* Render LogoutModal */}
+        </div>
     )
 }
 
-export default Dropdown;    
\ No newline at end of file
+export default Dropdown;
\ No newline at end of file
diff --git a/frontend/src/components/LogoutModal.jsx b/frontend/src/components/LogoutModal.jsx
new file mode 100644
index 0000000..82fdd5c
--- /dev/null
+++ b/frontend/src/components/LogoutModal.jsx
@@ -0,0 +1,38 @@
+import React, { useState, useRef } from 'react';
+
+const LogoutModal = ({ setVisible }) => { 
+    const modalRef = useRef(null);
+
+    const handleClick = () => { setVisible(false); }; 
+
+    const handleLogout = () => {
+        // Logout logic here
+        setVisible(false); 
+    }
+
+    return (
+        <>
+            <div id="popup-modal" tabindex="-1" ref={modalRef} class="block overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+                <div class="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 w-full max-w-md max-h-full">
+                    <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                        <div class="p-6 text-center">
+                            <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                            </svg>
+                            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to logout?</h3>
+                            <button data-modal-hide="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800" onClick={handleLogout}>
+                                Logout
+                            </button>
+                            <button data-modal-hide="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500" onClick={handleClick}>
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="fixed inset-0 bg-black opacity-30"></div>
+        </>
+    );
+}
+
+export default LogoutModal;
\ No newline at end of file