diff --git a/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx b/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
index 8e6caa8..81c2990 100644
--- a/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
+++ b/frontend/src/components/pages/dashboard/navigationBars/Sidebar.tsx
@@ -1,12 +1,11 @@
 import React from "react";
-import Cookies from "js-cookie";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import {
   useAssignedProjectsQuery,
   useMyProjectsQuery,
 } from "@/features/project";
-import { useLoggedInUserQuery } from "@/features/user";
+import { useLoggedInUserQuery, useLogoutUserMutation } from "@/features/user";
 import { IUser } from "@/interfaces/user.interface";
 import { CgProfile } from "react-icons/cg";
 import { TbBrandTeams } from "react-icons/tb";
@@ -18,10 +17,12 @@ import {
 import { FcLeave } from "react-icons/fc";
 import { BiLogoMicrosoftTeams } from "react-icons/bi";
 import { GrProjects } from "react-icons/gr";
+import Swal from "sweetalert2";
 
 const Sidebar = ({ setActiveView, activeView }: any) => {
   const router = useRouter();
   const { data: userData } = useLoggedInUserQuery({});
+  const [logout] = useLogoutUserMutation({});
   const user: IUser = userData?.data;
   const { data: projects } = useMyProjectsQuery(user?.id);
   const { data: assignedProjects } = useAssignedProjectsQuery(user?.id);
@@ -36,9 +37,17 @@ const Sidebar = ({ setActiveView, activeView }: any) => {
     });
   };
 
-  const handleLogOut = () => {
-    Cookies.remove("tmAccessToken");
-    window.location.replace("/");
+  const handleLogOut = async () => {
+    const res: any = await logout("");
+    if (res?.data?.statusCode === 200) {
+      Swal.fire({
+        position: "center",
+        icon: "success",
+        title: res?.data?.message,
+        showConfirmButton: false,
+      });
+      window.location.replace("/");
+    }
   };
 
   return (
diff --git a/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx b/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
index 00530f1..54625f0 100644
--- a/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
+++ b/frontend/src/components/pages/dashboard/navigationBars/TopBar.tsx
@@ -1,18 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect } from "react";
-import Cookies from "js-cookie";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import {
   useAssignedProjectsQuery,
   useMyProjectsQuery,
 } from "@/features/project";
-import { useLoggedInUserQuery } from "@/features/user";
+import { useLoggedInUserQuery, useLogoutUserMutation } from "@/features/user";
 import { IUser } from "@/interfaces/user.interface";
+import Swal from "sweetalert2";
 
 const TopBar = ({ setActiveView, activeView }: any) => {
   const router = useRouter();
   const { data: userData } = useLoggedInUserQuery({});
+  const [logout] = useLogoutUserMutation({});
   const user: IUser = userData?.data;
   const { data: projects } = useMyProjectsQuery(user?.id);
   const { data: assignedProjects } = useAssignedProjectsQuery(user?.id);
@@ -38,9 +39,17 @@ const TopBar = ({ setActiveView, activeView }: any) => {
     }
   };
 
-  const handleLogOut = () => {
-    Cookies.remove("tmAccessToken");
-    window.location.replace("/");
+  const handleLogOut = async () => {
+    const res: any = await logout("");
+    if (res?.data?.statusCode === 200) {
+      Swal.fire({
+        position: "center",
+        icon: "success",
+        title: res?.data?.message,
+        showConfirmButton: false,
+      });
+      window.location.replace("/");
+    }
   };
 
   useEffect(() => {
diff --git a/frontend/src/components/shared/Navbar.tsx b/frontend/src/components/shared/Navbar.tsx
index bde9768..1a16df0 100644
--- a/frontend/src/components/shared/Navbar.tsx
+++ b/frontend/src/components/shared/Navbar.tsx
@@ -5,7 +5,7 @@ import { BiX } from "react-icons/bi";
 import NotificationModal from "../pages/notifications/NotificationModal";
 import { useContext, useEffect, useState } from "react";
 import { IUser } from "@/interfaces/user.interface";
-import { useLoggedInUserQuery } from "@/features/user";
+import { useLoggedInUserQuery, useLogoutUserMutation } from "@/features/user";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import Cookies from "js-cookie";
@@ -17,6 +17,7 @@ const Navbar = () => {
   const { socket }: any = useContext(SocketContext);
   const { theme, setTheme } = useTheme();
   const { data }: any = useLoggedInUserQuery({});
+  const [logout] = useLogoutUserMutation({});
   const user: IUser = data?.data;
   const [isOpen, setIsOpen] = useState(false);
   const [toggle, setToggle] = useState(false);
@@ -26,9 +27,10 @@ const Navbar = () => {
     INotification[]
   >([]);
 
-  const handleLogOut = () => {
-    Cookies.remove("tmAccessToken");
-    window.location.replace("/");
+  const handleLogOut = async () => {
+    const res = await logout("");
+    console.log(res);
+    // window.location.replace("/");
   };
 
   useEffect(() => {
diff --git a/frontend/src/features/user/index.ts b/frontend/src/features/user/index.ts
index 3d968da..80e9fb4 100644
--- a/frontend/src/features/user/index.ts
+++ b/frontend/src/features/user/index.ts
@@ -39,6 +39,14 @@ const userApi = apiSlice.injectEndpoints({
       }),
       invalidatesTags: ["user", "team"] as any,
     }),
+    logoutUser: builder.mutation({
+      query: () => ({
+        method: "DELETE",
+        url: `/user/logout`,
+        credentials: "include",
+      }),
+      invalidatesTags: ["user"] as any,
+    }),
   }),
 });
 
@@ -48,4 +56,5 @@ export const {
   useLoginUserMutation,
   useLoggedInUserQuery,
   useUpdateUserMutation,
+  useLogoutUserMutation,
 } = userApi;