diff --git a/api/schema.ts b/api/schema.ts
index 9aba5ef..868b32e 100644
--- a/api/schema.ts
+++ b/api/schema.ts
@@ -95,6 +95,10 @@ const users = (customFetch: CustomFetch) =>
       const res = await customFetch('POST', 'DH_BE', '/user-update', args)
       return res.data as {}
     },
+    userLogout: async () => {
+      const res = await customFetch('POST', 'DH_BE', '/user-logout')
+      return res.data as {}
+    },
   } as const)
 
 // Mock Data Response for Development
diff --git a/components/Dashboard/TileUser/index.tsx b/components/Dashboard/TileUser/index.tsx
index c5c0e08..1f35df2 100644
--- a/components/Dashboard/TileUser/index.tsx
+++ b/components/Dashboard/TileUser/index.tsx
@@ -16,7 +16,8 @@ import Typography from '@mui/material/Typography'
 
 import ModalAccount from '@/components/Dashboard/ModalAccount'
 import ModalQRCode from '@/components/Dashboard/ModalQRCode'
-import { useAPI } from '@/contexts/API'
+import { useToast } from '@/contexts/Toast'
+import { useUserLogout } from '@/hooks/User/useUserLogout'
 import { User, UserStatusDescription } from '@/types/User'
 
 type Props = {
@@ -26,7 +27,8 @@ type Props = {
 const TileUser = (props: Props) => {
   const { user } = props
 
-  const api = useAPI()
+  const { setToast } = useToast()
+  const { isLoading, mutate: userLogout } = useUserLogout()
 
   const [openAccountDetails, setOpenAccountDetails] = useState(!user.first_name || !user.last_name)
 
@@ -164,11 +166,14 @@ const TileUser = (props: Props) => {
               <Chip
                 label="Sign Out"
                 icon={<OutboundTwoToneIcon />}
+                disabled={isLoading}
                 clickable
-                onClick={() => {
-                  document.cookie = 'Authorization=; expires=Tue, 27 Feb 2001 13:00:00 UTC; path=/;'
-                  api.queryClient.invalidateQueries({ queryKey: ['userGet'] })
-                }}
+                onClick={() =>
+                  userLogout(null, {
+                    onError: () =>
+                      setToast({ type: 'error', message: 'Something went wrong, try again.' }),
+                  })
+                }
               />
             </Box>
           </Grid>
diff --git a/hooks/User/useUserLogout.ts b/hooks/User/useUserLogout.ts
new file mode 100644
index 0000000..a4e9a1a
--- /dev/null
+++ b/hooks/User/useUserLogout.ts
@@ -0,0 +1,10 @@
+import { useAPI } from '@/contexts/API'
+
+export const useUserLogout = () => {
+  const api = useAPI()
+  return api.useMutation('userLogout', {
+    onSettled: () => {
+      api.queryClient.invalidateQueries({ queryKey: ['userGet'] })
+    },
+  })
+}