diff --git a/.vscode/custom.code-snippets b/.vscode/custom.code-snippets
index 0a5a06ae..1999e949 100644
--- a/.vscode/custom.code-snippets
+++ b/.vscode/custom.code-snippets
@@ -6,4 +6,10 @@
         ],
         "description": "media queries"
     },
+    "Default div": {
+        "prefix": "<div",
+        "body": [
+            "<div className={classes[\"$1\"]}>$2</div>"
+        ]
+    }
 }
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index 4f13a71b..b2744692 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -5,6 +5,7 @@ import SearchBar from "@Front/Components/DesignSystem/SearchBar";
 import User from "le-coffre-resources/dist/Notary";
 import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
 import { useRouter } from "next/router";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	collaborators: User[];
@@ -32,7 +33,8 @@ export default function CollaboratorListContainer(props: IProps) {
 	const onSelectedBlock = useCallback(
 		(block: IBlock) => {
 			props.onCloseLeftSide && props.onCloseLeftSide();
-			router.push("/collaborators/" + block.id);
+			const redirectPath = Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.props.path;
+			router.push(redirectPath.replace("[uid]", block.id));
 		},
 		[props, router],
 	);
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
new file mode 100644
index 00000000..489a53e9
--- /dev/null
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
@@ -0,0 +1,45 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.user-infos {
+		background-color: var(--grey-soft);
+		display: flex;
+		justify-content: space-between;
+		padding: 24px;
+
+		margin-top: 32px;
+
+		@media (max-width: $screen-l) {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 32px;
+		}
+
+		@media (max-width: $screen-s) {
+			grid-template-columns: repeat(1, 1fr);
+		}
+		.user-infos-row {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+	}
+
+	.role-container {
+		padding: 32px 16px;
+		border: 1px solid var(--grey);
+
+		margin-top: 32px;
+
+		.first-line {
+			display: flex;
+			justify-content: space-between;
+		}
+		.second-line {
+			margin-top: 32px;
+		}
+		.third-line {
+			margin-top: 32px;
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
new file mode 100644
index 00000000..78933727
--- /dev/null
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -0,0 +1,101 @@
+import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
+import User from "le-coffre-resources/dist/Notary";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+import SelectField from "@Front/Components/DesignSystem/Form/SelectField";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import ChevronIcon from "@Assets/Icons/chevron.svg";
+type IProps = {};
+export default function CollaboratorInformations(props: IProps) {
+	const router = useRouter();
+	let { collaboratorUid } = router.query;
+
+	const [userSelected, setUserSelected] = useState<User | null>(null);
+
+	useEffect(() => {
+		console.log("Getting user with uid ", collaboratorUid);
+		async function getUser() {
+			if (!collaboratorUid) return;
+			const user = await Users.getInstance().getByUid(collaboratorUid as string, {
+				q: {
+					contact: true,
+				},
+			});
+			if (!user) return;
+			setUserSelected(user);
+		}
+
+		getUser();
+	}, [collaboratorUid]);
+
+	const mockedRole = { value: "1", label: "Clerc de notaire" };
+	return (
+		<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
+			<div className={classes["root"]}>
+				<div className={classes["folder-header"]}>
+					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
+				</div>
+				<div className={classes["user-infos"]}>
+					<div className={classes["user-infos-row"]}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							Nom
+						</Typography>
+						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
+					</div>
+					<div className={classes["user-infos-row"]}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							Prénom
+						</Typography>
+						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+					</div>
+					<div className={classes["user-infos-row"]}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							Numéro de téléphone
+						</Typography>
+						<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
+					</div>
+					<div className={classes["user-infos-row"]}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							Email
+						</Typography>
+						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+					</div>
+				</div>
+
+				<div className={classes["role-container"]}>
+					<div className={classes["first-line"]}>
+						<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography>
+						<div className={classes["gestion-role"]}>
+							<Link href={`/collaborators/${collaboratorUid}/role`}>
+								<Button
+									icon={ChevronIcon}
+									iconposition={"right"}
+									iconstyle={{ width: "22px", height: "22px" }}
+									variant={EButtonVariant.LINE}>
+									Gestion des rôles
+								</Button>
+							</Link>
+						</div>
+					</div>
+					<div className={classes["second-line"]}>
+						<SelectField placeholder="Rôle" name="role" options={[mockedRole]} selectedOption={mockedRole} />
+					</div>
+					<div className={classes["third-line"]}>
+						<CheckBox
+							option={{
+								value: "1",
+								label: "Nommer administrateur de l'office",
+							}}
+							toolTip="blabla"
+						/>
+					</div>
+				</div>
+			</div>
+		</DefaultCollaboratorDashboard>
+	);
+}
diff --git a/src/front/Components/Layouts/Collaborators/index.tsx b/src/front/Components/Layouts/Collaborators/index.tsx
index c0cfc8f7..48bfc0a4 100644
--- a/src/front/Components/Layouts/Collaborators/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/index.tsx
@@ -23,7 +23,7 @@ export default class Folder extends BasePage<IProps, IState> {
 	// TODO: Message if the user has not created any folder yet
 	public override render(): JSX.Element {
 		return (
-			<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurss"}>
+			<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du collaboraeur</Typography>
diff --git a/src/front/Config/Module/development.json b/src/front/Config/Module/development.json
index fd9cced8..86554edc 100644
--- a/src/front/Config/Module/development.json
+++ b/src/front/Config/Module/development.json
@@ -124,6 +124,15 @@
 				"props": {
 					"path": "/collaborators",
 					"labelKey": "collaborators"
+				},
+				"pages": {
+					"CollaboratorInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/collaborators/[uid]",
+							"labelKey": "collaborator_informations"
+						}
+					}
 				}
 			},
 			"404": {
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index fd9cced8..86554edc 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -124,6 +124,15 @@
 				"props": {
 					"path": "/collaborators",
 					"labelKey": "collaborators"
+				},
+				"pages": {
+					"CollaboratorInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/collaborators/[uid]",
+							"labelKey": "collaborator_informations"
+						}
+					}
 				}
 			},
 			"404": {
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index fd9cced8..86554edc 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -124,6 +124,15 @@
 				"props": {
 					"path": "/collaborators",
 					"labelKey": "collaborators"
+				},
+				"pages": {
+					"CollaboratorInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/collaborators/[uid]",
+							"labelKey": "collaborator_informations"
+						}
+					}
 				}
 			},
 			"404": {
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index fd9cced8..86554edc 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -124,6 +124,15 @@
 				"props": {
 					"path": "/collaborators",
 					"labelKey": "collaborators"
+				},
+				"pages": {
+					"CollaboratorInformations": {
+						"enabled": true,
+						"props": {
+							"path": "/collaborators/[uid]",
+							"labelKey": "collaborator_informations"
+						}
+					}
 				}
 			},
 			"404": {
diff --git a/src/pages/collaborators/[collaboratorUid]/index.tsx b/src/pages/collaborators/[collaboratorUid]/index.tsx
index 300413ce..ec6a1b3d 100644
--- a/src/pages/collaborators/[collaboratorUid]/index.tsx
+++ b/src/pages/collaborators/[collaboratorUid]/index.tsx
@@ -1,5 +1,5 @@
-import Collaborators from "@Front/Components/Layouts/Collaborators";
+import CollaboratorInformations from "@Front/Components/Layouts/Collaborators/CollaboratorInformations";
 
 export default function Route() {
-	return <Collaborators />;
+	return <CollaboratorInformations />;
 }