diff --git a/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts b/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts
new file mode 100644
index 00000000..d526d752
--- /dev/null
+++ b/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts
@@ -0,0 +1,67 @@
+import { Role } from "le-coffre-resources/dist/Admin";
+
+import BaseAdmin from "../BaseAdmin";
+
+export type IGetRolesParams = {
+	where?: {};
+	include?: {};
+	select?: {};
+};
+
+export type IPutRoleParams = {
+	rules: Role["rules"];
+};
+
+export default class OfficeRoles extends BaseAdmin {
+	private static instance: OfficeRoles;
+	private readonly baseURl = this.namespaceUrl.concat("/office-roles");
+
+	private constructor() {
+		super();
+	}
+
+	public static getInstance() {
+		if (!this.instance) {
+			return new OfficeRoles();
+		} else {
+			return this.instance;
+		}
+	}
+
+	public async get(q?: IGetRolesParams): Promise<Role[]> {
+		const url = new URL(this.baseURl);
+
+		if (q) {
+			const query = { q };
+			Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		}
+
+		try {
+			return await this.getRequest<Role[]>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async getByUid(uid: string, q?: any): Promise<Role> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		if (q) Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		try {
+			return await this.getRequest<Role>(url);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
+	public async put(uid: string, body: IPutRoleParams): Promise<Role> {
+		const url = new URL(this.baseURl.concat(`/${uid}`));
+		try {
+			return await this.putRequest<Role>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+}
diff --git a/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts b/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
index 50770418..5246b6a1 100644
--- a/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
+++ b/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
@@ -28,10 +28,14 @@ export default class Roles extends BaseAdmin {
 		}
 	}
 
-	public async get(q: IGetRolesParams): Promise<Role[]> {
+	public async get(q?: IGetRolesParams): Promise<Role[]> {
 		const url = new URL(this.baseURl);
-		const query = { q };
-		Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+
+		if (q) {
+			const query = { q };
+			Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		}
+
 		try {
 			return await this.getRequest<Role[]>(url);
 		} catch (err) {
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index fdad6652..3b93c202 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -17,6 +17,7 @@ export default function CollaboratorListContainer(props: IProps) {
 	const [filteredUsers, setFilteredUsers] = useState<User[]>(props.collaborators);
 	const router = useRouter();
 
+	const { collaboratorUid } = router.query;
 	const filterUsers = useCallback(
 		(input: string) => {
 			const filteredUsers = props.collaborators.filter((user) => {
@@ -51,7 +52,7 @@ export default function CollaboratorListContainer(props: IProps) {
 							return {
 								name: user.contact?.first_name + " " + user.contact?.last_name,
 								id: user.uid!,
-								selected: false,
+								selected: user.uid === collaboratorUid,
 							};
 						})}
 						onSelectedBlock={onSelectedBlock}
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index 84113d9a..fc8b58f5 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
-import SelectField from "@Front/Components/DesignSystem/Form/SelectField";
+import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
 import User from "le-coffre-resources/dist/Notary";
@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import Module from "@Front/Config/Module";
+import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 
 type IProps = {};
 export default function CollaboratorInformations(props: IProps) {
@@ -19,6 +20,7 @@ export default function CollaboratorInformations(props: IProps) {
 	let { collaboratorUid } = router.query;
 
 	const [userSelected, setUserSelected] = useState<User | null>(null);
+	const [availableRoles, setAvailableRoles] = useState<IOption[]>([]);
 
 	useEffect(() => {
 		async function getUser() {
@@ -26,16 +28,20 @@ export default function CollaboratorInformations(props: IProps) {
 			const user = await Users.getInstance().getByUid(collaboratorUid as string, {
 				q: {
 					contact: true,
+					office_role: true,
 				},
 			});
 			if (!user) return;
+
+			const roles = await OfficeRoles.getInstance().get();
+			if (!roles) return;
+			setAvailableRoles(roles.map((role) => ({ value: role.uid, label: role.name })));
 			setUserSelected(user);
 		}
 
 		getUser();
 	}, [collaboratorUid]);
 
-	const mockedRole = { value: "1", label: "Clerc de notaire" };
 	return (
 		<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
@@ -85,7 +91,15 @@ export default function CollaboratorInformations(props: IProps) {
 						</div>
 					</div>
 					<div className={classes["second-line"]}>
-						<SelectField placeholder="Rôle" name="role" options={[mockedRole]} selectedOption={mockedRole} />
+						<SelectField
+							placeholder="Rôle"
+							name="role"
+							options={availableRoles}
+							selectedOption={{
+								value: userSelected?.office_role?.uid,
+								label: userSelected?.office_role?.name!,
+							}}
+						/>
 					</div>
 					<div className={classes["third-line"]}>
 						<CheckBox