diff --git a/src/components/Modal/LogoutUserModal/index.tsx b/src/components/Modal/LogoutUserModal/index.tsx
new file mode 100644
index 0000000..58ea293
--- /dev/null
+++ b/src/components/Modal/LogoutUserModal/index.tsx
@@ -0,0 +1,98 @@
+import { request } from "@/utils/request";
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import { toast } from "react-toastify";
+import Cookies from "universal-cookie";
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/router";
+
+export default function LogoutUserModal({
+  isOpenUserLogoutModal, setIsOpenUserLogoutModal
+}) {
+  const cookie = new Cookies();
+  const router = useRouter();
+  console.log(isOpenUserLogoutModal);
+
+  //   const isModalOpen = isOpenDeleteModal ? true : false;
+
+  function closeModal() {
+    setIsOpenUserLogoutModal(false);
+  }
+
+  const handleExit = () => {
+    cookie.remove("userID");
+    cookie.remove("userToken");
+    cookie.remove("refreshToken");
+    setIsOpenUserLogoutModal(false);
+  };
+
+  return (
+    <>
+      <Transition appear show={isOpenUserLogoutModal} as={Fragment}>
+        <Dialog
+          as="div"
+          dir="rtl"
+          className="relative z-10"
+          onClose={closeModal}
+        >
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black bg-opacity-25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-900 flex"
+                  >
+                    خروج
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500 flex">
+                      از خروج اطمینان دارید؟
+                    </p>
+                  </div>
+
+                  <div className="mt-4 flex gap-4">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
+                      onClick={closeModal}
+                    >
+                      خیر
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent bg-green-100 px-4 py-2 text-sm font-medium text-green-900 hover:bg-green-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
+                      onClick={() => handleExit()}
+                    >
+                      بله
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
diff --git a/src/layout/MainLayout/Navbar/index.tsx b/src/layout/MainLayout/Navbar/index.tsx
index 349fbed..9fd1513 100644
--- a/src/layout/MainLayout/Navbar/index.tsx
+++ b/src/layout/MainLayout/Navbar/index.tsx
@@ -9,6 +9,7 @@ import { CiShoppingCart } from "react-icons/ci";
 import Cookies from "universal-cookie";
 import SearchBoxProducts from "./../../../components/SearchBox/index";
 import { useDispatch, useSelector } from "react-redux";
+import LogoutUserModal from "@/components/Modal/LogoutUserModal";
 
 // useEffect(() => {
 //   const getData = async () => {
@@ -50,7 +51,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 
 const Navbar = () => {
-  
+  const [isOpenUserLogoutModal, setIsOpenUserLogoutModal] = useState(false);
   const cart = useSelector((state) => state.cartSlices.CartProducts);
   console.log(cart.length);
   const cookie = new Cookies();
@@ -70,10 +71,7 @@ const Navbar = () => {
   if (isLoadingcategory) {
     return <div>Loading...</div>;
   }
-  // if (isError1) {
-  //   return <div>Error:{error1}</div>;
-  // }
-
+ 
   // console.log(data1.categories);
 
   const toggleDropdown = () => {
@@ -81,9 +79,7 @@ const Navbar = () => {
   };
   // =========================================================
 const handleLogout=()=>{
-  cookie.remove("userID")
-  cookie.remove("userToken")
-  cookie.remove("refreshToken")
+  setIsOpenUserLogoutModal(true)
 }
   // =======================================================================
 
@@ -162,6 +158,7 @@ const handleLogout=()=>{
         setOpenSerchBox={setOpenSerchBox}
         openSerchBox={openSerchBox}
       />
+      {isOpenUserLogoutModal && <LogoutUserModal isOpenUserLogoutModal={isOpenUserLogoutModal} setIsOpenUserLogoutModal={setIsOpenUserLogoutModal}/>}
     </div>
   );
 };