diff --git a/frontend/app/hooks/useUsers.ts b/frontend/app/hooks/useUsers.ts
new file mode 100644
index 00000000..aadc2430
--- /dev/null
+++ b/frontend/app/hooks/useUsers.ts
@@ -0,0 +1,43 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getUsers, updateUserRole, updateProfile } from '../lib/api/usersApi';
+import { getReportsSummary } from '../lib/api/reportsApi';
+import { User, ReportSummary } from '../lib/types/users';
+import { useAuthStore } from '../store/authStore';
+
+export function useUsersList() {
+  return useQuery<User[]>({
+    queryKey: ['users'],
+    queryFn: getUsers,
+  });
+}
+
+export function useUpdateUserRole() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, role }: { id: string; role: string }) =>
+      updateUserRole(id, role),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+}
+
+export function useUpdateProfile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<User> }) =>
+      updateProfile(id, payload),
+    onSuccess: (updatedUser) => {
+      // Update Zustand store to keep sidebar in sync
+      useAuthStore.getState().setUser(updatedUser);
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+}
+
+export function useReportsSummary() {
+  return useQuery<ReportSummary>({
+    queryKey: ['reportsSummary'],
+    queryFn: getReportsSummary,
+  });
+}
diff --git a/frontend/app/users/page.tsx b/frontend/app/users/page.tsx
new file mode 100644
index 00000000..287b41f0
--- /dev/null
+++ b/frontend/app/users/page.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useUsers, useUpdateUserRole } from '../hooks/useUsers';
+import { Avatar } from '../../components/ui/Avatar';
+
+export default function UsersPage() {
+  const { data: users = [], isLoading } = useUsers();
+  const updateRole = useUpdateUserRole();
+
+  const [search, setSearch] = useState('');
+  const [roleFilter, setRoleFilter] = useState('');
+
+  if (isLoading) return <div>Loading...</div>;
+
+  const filteredUsers = users.filter((u: any) =>
+    (u.name.toLowerCase().includes(search.toLowerCase()) ||
+      u.email.toLowerCase().includes(search.toLowerCase())) &&
+    (roleFilter ? u.role === roleFilter : true)
+  );
+
+  return (
+    <div className="p-6">
+      <h1 className="text-xl font-bold mb-4">Users Management</h1>
+
+      <div className="flex gap-4 mb-4">
+        <input
+          type="text"
+          placeholder="Search by name or email"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="border p-2"
+        />
+        <select
+          value={roleFilter}
+          onChange={(e) => setRoleFilter(e.target.value)}
+          className="border p-2"
+        >
+          <option value="">All Roles</option>
+          <option value="admin">Admin</option>
+          <option value="manager">Manager</option>
+          <option value="staff">Staff</option>
+        </select>
+      </div>
+
+      <table className="w-full border">
+        <thead>
+          <tr>
+            <th>Avatar + Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Joined</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredUsers.map((user: any) => (
+            <tr key={user.id}>
+              <td className="flex items-center gap-2">
+                <Avatar
+                  firstName={user.firstName}
+                  lastName={user.lastName}
+                  isCurrentUser={user.isCurrentUser}
+                />
+                {user.name}{' '}
+                {user.isCurrentUser && (
+                  <span className="ml-2 text-xs bg-gray-200 px-2 py-1 rounded">
+                    You
+                  </span>
+                )}
+              </td>
+              <td>{user.email}</td>
+              <td>
+                <select
+                  value={user.role}
+                  disabled={user.isCurrentUser}
+                  onChange={(e) =>
+                    updateRole.mutate({ id: user.id, role: e.target.value })
+                  }
+                  className="border p-1"
+                >
+                  <option value="admin">Admin</option>
+                  <option value="manager">Manager</option>
+                  <option value="staff">Staff</option>
+                </select>
+              </td>
+              <td>{new Date(user.joinedAt).toLocaleDateString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <div className="mt-4">
+        <h2 className="font-semibold">Role Legend</h2>
+        <ul>
+          <li>
+            <span className="text-red-600">Admin</span> — full access
+          </li>
+          <li>
+            <span className="text-blue-600">Manager</span> — manage teams
+          </li>
+          <li>
+            <span className="text-green-600">Staff</span> — standard user
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/ui/Avatar.tsx b/frontend/components/ui/Avatar.tsx
new file mode 100644
index 00000000..e03dc214
--- /dev/null
+++ b/frontend/components/ui/Avatar.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export function Avatar({
+  firstName,
+  lastName,
+  isCurrentUser,
+}: {
+  firstName: string;
+  lastName: string;
+  isCurrentUser?: boolean;
+}) {
+  const initials = `${firstName[0]}${lastName[0]}`.toUpperCase();
+  const bgColor = isCurrentUser ? 'bg-gray-800' : 'bg-gray-400';
+
+  return (
+    <div
+      className={`w-8 h-8 rounded-full flex items-center justify-center text-white ${bgColor}`}
+    >
+      {initials}
+    </div>
+  );
+}
diff --git a/frontend/lib/api/reportsApi.ts b/frontend/lib/api/reportsApi.ts
new file mode 100644
index 00000000..c8564927
--- /dev/null
+++ b/frontend/lib/api/reportsApi.ts
@@ -0,0 +1,7 @@
+import api from './client';
+import { ReportSummary } from '../users';
+
+export async function getReportsSummary(): Promise<ReportSummary> {
+  const res = await api.get('/api/reports/summary');
+  return res.data;
+}
diff --git a/frontend/lib/api/usersApi.ts b/frontend/lib/api/usersApi.ts
new file mode 100644
index 00000000..8737ae3b
--- /dev/null
+++ b/frontend/lib/api/usersApi.ts
@@ -0,0 +1,17 @@
+import api from './client';
+import { User } from '../users';
+
+export async function getUsers(): Promise<User[]> {
+  const res = await api.get('/api/users');
+  return res.data;
+}
+
+export async function updateUserRole(id: string, role: string): Promise<User> {
+  const res = await api.patch(`/api/users/${id}/role`, { role });
+  return res.data;
+}
+
+export async function updateProfile(id: string, payload: Partial<User>): Promise<User> {
+  const res = await api.patch(`/api/users/${id}`, payload);
+  return res.data;
+}
diff --git a/frontend/lib/users.ts b/frontend/lib/users.ts
new file mode 100644
index 00000000..1a0e89e7
--- /dev/null
+++ b/frontend/lib/users.ts
@@ -0,0 +1,13 @@
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'manager' | 'staff';
+  joinedAt: string;
+}
+
+export interface ReportSummary {
+  totalUsers: number;
+  activeUsers: number;
+  inactiveUsers: number;
+}