diff --git a/apps/client/src/ee/page-permission/queries/page-permission-query.ts b/apps/client/src/ee/page-permission/queries/page-permission-query.ts
new file mode 100644
index 00000000..d76fd0d7
--- /dev/null
+++ b/apps/client/src/ee/page-permission/queries/page-permission-query.ts
@@ -0,0 +1,159 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  IAddPagePermission,
+  IPagePermission,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  addPagePermission,
+  getPagePermissions,
+  getPageRestrictionInfo,
+  removePagePermission,
+  restrictPage,
+  unrestrictPage,
+  updatePagePermissionRole,
+} from "@/ee/page-permission/services/page-permission-service";
+import { notifications } from "@mantine/notifications";
+import { IPagination, QueryParams } from "@/lib/types";
+import { useTranslation } from "react-i18next";
+
+export function usePageRestrictionInfoQuery(
+  pageId: string,
+): UseQueryResult<IPageRestrictionInfo, Error> {
+  return useQuery({
+    queryKey: ["page-restriction-info", pageId],
+    queryFn: () => getPageRestrictionInfo(pageId),
+    enabled: !!pageId,
+  });
+}
+
+export function usePagePermissionsQuery(
+  pageId: string,
+  params?: QueryParams,
+): UseQueryResult<IPagination<IPagePermission>, Error> {
+  return useQuery({
+    queryKey: ["page-permissions", pageId, params],
+    queryFn: () => getPagePermissions(pageId, params),
+    enabled: !!pageId,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useRestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => restrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to restrict page"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUnrestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => unrestrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to unrestrict page"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useAddPagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IAddPagePermission>({
+    mutationFn: (data) => addPagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to add page permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useRemovePagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IRemovePagePermission>({
+    mutationFn: (data) => removePagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to remove page permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdatePagePermissionRoleMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IUpdatePagePermissionRole>({
+    mutationFn: (data) => updatePagePermissionRole(data),
+    onSuccess: (_, variables) => {
+      queryClient.refetchQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to update page permission role"),
+        color: "red",
+      });
+    },
+  });
+}
diff --git a/apps/client/src/ee/page-permission/services/page-permission-service.ts b/apps/client/src/ee/page-permission/services/page-permission-service.ts
new file mode 100644
index 00000000..86bef081
--- /dev/null
+++ b/apps/client/src/ee/page-permission/services/page-permission-service.ts
@@ -0,0 +1,55 @@
+import api from "@/lib/api-client";
+import { IPagination, QueryParams } from "@/lib/types";
+import {
+  IAddPagePermission,
+  IPagePermission,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+
+export async function restrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/permissions/restrict", { pageId });
+}
+
+export async function addPagePermission(
+  data: IAddPagePermission,
+): Promise<void> {
+  await api.post("/pages/permissions/add-members", data);
+}
+
+export async function removePagePermission(
+  data: IRemovePagePermission,
+): Promise<void> {
+  await api.post("/pages/permissions/remove-members", data);
+}
+
+export async function updatePagePermissionRole(
+  data: IUpdatePagePermissionRole,
+): Promise<void> {
+  await api.post("/pages/permissions/change-role", data);
+}
+
+export async function unrestrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/permissions/unrestrict", { pageId });
+}
+
+export async function getPagePermissions(
+  pageId: string,
+  params?: QueryParams,
+): Promise<IPagination<IPagePermission>> {
+  const req = await api.post<IPagination<IPagePermission>>(
+    "/pages/permissions/members",
+    { pageId, ...params },
+  );
+  return req.data;
+}
+
+export async function getPageRestrictionInfo(
+  pageId: string,
+): Promise<IPageRestrictionInfo> {
+  const req = await api.post<IPageRestrictionInfo>("/pages/permissions/info", {
+    pageId,
+  });
+  return req.data;
+}
diff --git a/apps/client/src/ee/page-permission/types/page-permission.types.ts b/apps/client/src/ee/page-permission/types/page-permission.types.ts
new file mode 100644
index 00000000..92955bbf
--- /dev/null
+++ b/apps/client/src/ee/page-permission/types/page-permission.types.ts
@@ -0,0 +1,55 @@
+export enum PagePermissionRole {
+  READER = "reader",
+  WRITER = "writer",
+}
+
+export type IRestrictPage = {
+  pageId: string;
+};
+
+export type IAddPagePermission = {
+  pageId: string;
+  role: PagePermissionRole;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IRemovePagePermission = {
+  pageId: string;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IUpdatePagePermissionRole = {
+  pageId: string;
+  role: PagePermissionRole;
+  userId?: string;
+  groupId?: string;
+};
+
+export type IRemovePageRestriction = {
+  pageId: string;
+};
+
+export type IPagePermission = {
+  id: string;
+  pageId: string;
+  role: PagePermissionRole;
+  userId?: string;
+  groupId?: string;
+  user?: {
+    id: string;
+    name: string;
+    avatarUrl: string;
+  };
+  group?: {
+    id: string;
+    name: string;
+  };
+};
+
+export type IPageRestrictionInfo = {
+  isRestricted: boolean;
+  hasAccess: boolean;
+  role?: PagePermissionRole;
+};