diff --git a/client/src/components/Logout/Logout.tsx b/client/src/components/Logout/Logout.tsx
index 34cb705dd4650dd4d09e16434ca697cfc02f9cb9..b7ee851f7cdc9d8295c0f2c2cd56185e8c3e0c98 100644
--- a/client/src/components/Logout/Logout.tsx
+++ b/client/src/components/Logout/Logout.tsx
@@ -1,38 +1,33 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { useLoaderData } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
-import Spinner from '../Spinner/Spinner';
 import './Logout.scss';
 
 function Logout() {
-  const [loading, setLoading] = useState(true);
-  const { isAuth, removeAuth } = useAuth();
+  const { removeAuth } = useAuth();
+  const error = useLoaderData();
 
   useEffect(() => {
-    // TODO: do logout api call
-    if (isAuth) {
-      removeAuth();
-      setLoading(false);
-    } else {
-      setLoading(false);
-    }
+    removeAuth();
   }, []);
 
   return (
     <>
-      {
-        loading ?
-        <div className='full-main'>
-          <Spinner></Spinner>
-        </div> :
-        <div className='logout'>
-          <div className='card logout-card'>
+      <div className='logout'>
+        <div className='card logout-card'>
+          {
+            error ?
+            <div className='logout-content'>
+              <span>Logout failed</span>
+              <span>Use the Header to navigate!</span>
+            </div> :
             <div className='logout-content'>
               <span>Sucessfully logged out!</span>
               <span>Use the Header to navigate!</span>
             </div>
-          </div>
+          }
         </div>
-      }
+      </div>
     </>
   );
 }
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 64d8bf3af88b7ddf69928fa91eecc49067778b7b..54cf1485cddff0f71f975071c934d44d417096fb 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -9,6 +9,8 @@ import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute.tsx';
 import CustomerDashboard from './components/CustomerDashboard/CustomerDashboard.tsx';
 import BookingQuery from './components/BookingQuery/BookingQuery.tsx';
 import BookingList from './components/BookingList/BookingList.tsx';
+import { AuthoriseUser } from './services/Authorise/Authorise.ts';
+import { LogoutUser } from './services/Logout/Logout.ts';
 import { GetCustomerDashboardData } from './services/CustomerDashboard/CustomerDashboard.ts';
 import { GetBookingList } from './services/BookingList/BookingList.ts';
 import './index.scss';
@@ -16,6 +18,7 @@ import './index.scss';
 const router = createBrowserRouter([
   {
     path: '/',
+    loader: AuthoriseUser,
     element: <App></App>,
     children: [
       {
@@ -28,6 +31,7 @@ const router = createBrowserRouter([
       },
       {
         path: 'logout',
+        loader: LogoutUser,
         element: <Logout></Logout>
       },
       {
diff --git a/client/src/providers/AuthProvider.tsx b/client/src/providers/AuthProvider.tsx
index 9322a12e7de940ce2e70e6413db3a10922b809a3..d6dd38332ba2574c3a99ace4f32e5f61e54555ed 100644
--- a/client/src/providers/AuthProvider.tsx
+++ b/client/src/providers/AuthProvider.tsx
@@ -1,7 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
+import { useLoaderData } from 'react-router-dom';
 import { AuthContext } from '../contexts/AuthContext';
-import Spinner from '../components/Spinner/Spinner';
-import { authoriseUser } from '../services/Authorise/Authorise';
 
 export interface IUser {
   id: number;
@@ -11,23 +10,15 @@ export interface IUser {
 }
 
 function AuthProvider({ children }: { children: ReactNode }) {
-  const [loading, setLoading] = useState(true);
   const [auth, setAuth] = useState(false);
   const [user, setUser] = useState<IUser>();
+  const data = useLoaderData() as IUser | null;
 
   useEffect(() => {
-    async function authUser() {
-      try {
-        const result = await authoriseUser();
-        giveAuth();
-        updateUser(result.data);
-        setLoading(false);
-      } catch (error) {
-        setLoading(false);
-      }
+    if (data) {
+      giveAuth();
+      setUser(data);
     }
-
-    authUser();
   }, []);
 
   const giveAuth = () => {
@@ -42,17 +33,9 @@ function AuthProvider({ children }: { children: ReactNode }) {
     setUser(newUser);
   }
 
-  if (loading) {
-    return (
-      <div className='full'>
-        <Spinner></Spinner>
-      </div>
-    );
-  }
-
   return (
     <AuthContext.Provider value={{ isAuth: auth, giveAuth, removeAuth, user, updateUser }}>
-      {!loading && children}
+      {children}
     </AuthContext.Provider>
   );
 }
diff --git a/client/src/services/Authorise/Authorise.ts b/client/src/services/Authorise/Authorise.ts
index d01fa960af5c0dafdb6200bc410a623ed5d33e7e..46fb901eeb88a1fd1a231d63f2b2b8fde7ae76ed 100644
--- a/client/src/services/Authorise/Authorise.ts
+++ b/client/src/services/Authorise/Authorise.ts
@@ -2,6 +2,11 @@ import { AxiosResponse } from 'axios';
 import Api from '../../helpers/Api';
 import { IUser } from '../../providers/AuthProvider';
 
-export async function authoriseUser(): Promise<AxiosResponse<IUser>> {
-  return Api.post('User/authorize', {}, { withCredentials: true });
+export async function AuthoriseUser(): Promise<AxiosResponse<IUser> | null> {
+  try {
+    const result = await Api.post('User/authorize', {}, { withCredentials: true });
+    return result.data;
+  } catch (error) {
+    return null;
+  }
 }
diff --git a/client/src/services/Logout/Logout.ts b/client/src/services/Logout/Logout.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0596d409e494f255888bf125d85d3a1512986c3
--- /dev/null
+++ b/client/src/services/Logout/Logout.ts
@@ -0,0 +1,11 @@
+import { AxiosError } from 'axios';
+import Api from '../../helpers/Api';
+
+export async function LogoutUser(): Promise<AxiosError | null> {
+  try {
+    await Api.post('User/logout', {}, { withCredentials: true });
+    return null;
+  } catch (error) {
+    return error as AxiosError;
+  }
+}