diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
index 690197d..6e3c1c7 100644
--- a/src/components/topbar/TopBar.tsx
+++ b/src/components/topbar/TopBar.tsx
@@ -9,6 +9,8 @@ import Dropdown from '../utils/Dropdown'
 import Seperator from '../utils/Seperator'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import useToggle from '@/hooks/helpers/useToggle'
+import LogoutPrompt from '@/features/general/LogoutPrompt'
 
 type Props = {
     profileDropState: boolean,
@@ -24,6 +26,7 @@ type Props = {
 function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: Props) {
     const params = useParams();
     const { name } = params;
+    const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
 
     return (
         <div className="w-full">
@@ -116,13 +119,25 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
 
                     <Seperator className='my-6' />
                     <button
-                        onClick={() => { }}
+                        onClick={(e) => {
+                            toggleLogoutModal(e);
+                            toggleProfileDropState?.(e)
+                        }}
                         className='flex items-center gap-3 px-6'>
                         <LogoutCurve size={20} className='stroke-foreground' />
                         <div className='text-xs'>خروج</div>
                     </button>
                 </Dropdown>
             </div>
+
+            <div
+                data-active={logoutModal}
+                className='fixed inset-0 data-[active=false]:pointer-events-none z-50'>
+                <LogoutPrompt
+                    visible={logoutModal}
+                    onClick={toggleLogoutModal}
+                />
+            </div>
         </div>
     )
 }