diff --git a/frontend/src/api/authService.js b/frontend/src/api/authService.js
index 0a03486..15d8fae 100644
--- a/frontend/src/api/authService.js
+++ b/frontend/src/api/authService.js
@@ -1,16 +1,21 @@
 import api from "./axios";
 
 export async function login(payload) {
-    const { data } = await api.post("/auth/login", payload);
-    return data;
+  const { data } = await api.post("/auth/login", payload);
+  return data;
 }
 
 export async function signup(payload) {
-    const { data } = await api.post("/auth/register", payload);
-    return data;
+  const { data } = await api.post("/auth/register", payload);
+  return data;
+}
+
+export async function logout() {
+  const { data } = await api.post("/auth/logout");
+  return data;
 }
 
 export async function getMe() {
-    const { data } = await api.get("/auth/me");
-    return data;
+  const { data } = await api.get("/auth/me");
+  return data;
 }
diff --git a/frontend/src/app/router.jsx b/frontend/src/app/router.jsx
index 7c05760..bdde82f 100644
--- a/frontend/src/app/router.jsx
+++ b/frontend/src/app/router.jsx
@@ -47,7 +47,7 @@ export function AppRouter() {
         <Route
           path="/manager"
           element={
-            <ProtectedRoute allowedRoles={["manager", "admin"]}>
+            <ProtectedRoute allowedRoles={["manager", "finance", "director", "admin"]}>
               <ApprovalQueuePage />
             </ProtectedRoute>
           }
@@ -60,22 +60,18 @@ export function AppRouter() {
             </ProtectedRoute>
           }
         />
+        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/expenses" element={<ExpensePage />} />
         <Route
-  path="/dashboard"
-  element={<DashboardPage />}
-/>
-        <Route
-  path="/expenses"
-  element={<ExpensePage />}
-/>
-        <Route
-  path="/approvals"
-  element={
-    <ProtectedRoute allowedRoles={["manager", "admin"]}>
-      <ApprovalQueuePage />
-    </ProtectedRoute>
-  }
-/>
+          path="/approvals"
+          element={
+            <ProtectedRoute
+              allowedRoles={["manager", "finance", "director", "admin"]}
+            >
+              <ApprovalQueuePage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/analytics"
           element={
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index 937b9bd..f1858f0 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -10,6 +10,7 @@ import { jwtDecode } from "jwt-decode";
 import {
   login as loginRequest,
   signup as signupRequest,
+  logout as logoutRequest,
 } from "../api/authService";
 
 const AuthContext = createContext(null);
@@ -93,12 +94,18 @@ export function AuthProvider({ children }) {
     [persistAuth],
   );
 
-  const logout = useCallback(() => {
-    setUser(null);
-    setToken(null);
-    localStorage.removeItem("token");
-    localStorage.removeItem("auth_user");
-    window.location.href = "/login";
+  const logout = useCallback(async () => {
+    try {
+      await logoutRequest();
+    } catch {
+      // proceed with client-side cleanup even if server call fails
+    } finally {
+      setUser(null);
+      setToken(null);
+      localStorage.removeItem("token");
+      localStorage.removeItem("auth_user");
+      window.location.href = "/login";
+    }
   }, []);
 
   const switchRole = useCallback((role) => {