diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/classes.module.scss b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/classes.module.scss
index d24db555..5c8539d8 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/classes.module.scss
@@ -3,59 +3,34 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
-	align-items: flex-start;
-	width: fit-content;
+	width: 472px;
+	margin: auto;
+	margin-top: 24px;
+	gap: var(--spacing-xl, 32px);
 
-	.back-arrow {
-		margin-bottom: 24px;
+	@media (max-width: 504px) {
+		width: unset;
+		margin: 24px 16px;
 	}
 
 	.form {
-		width: 100%;
-
-		.content {
-			margin-top: 32px;
-
-			>:not(:last-child) {
-				margin-bottom: 24px;
-			}
-
-		}
-
-		.sub-content {
-			margin-top: 32px;
-			margin-bottom: 24px;
-		}
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xl, 32px);
 
 		.button-container {
-			width: 100%;
 			display: flex;
-			text-align: center;
-			margin-top: 24px;
+			gap: var(--spacing-md, 16px);
 
-			.cancel-button {
-				display: flex;
-				margin-right: 12px;
-			}
-
-			@media (max-width: $screen-m) {
-				display: flex;
+			@media (max-width: 504px) {
 				flex-direction: column-reverse;
-
-				.cancel-button {
-					margin-left: 0;
-					margin-top: 12px;
-
-					>* {
-						flex: 1;
-					}
+				> button {
+					width: 100%;
 				}
-
-				>* {
+				> a > button {
 					width: 100%;
 				}
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
index 1dd32553..de94f5c0 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
@@ -7,122 +7,71 @@ import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import User from "le-coffre-resources/dist/Notary/User";
-import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
-import { NextRouter, useRouter } from "next/router";
+import { useRouter } from "next/router";
 
-import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import { ValidationError } from "class-validator";
-
-type IPropsClass = {
-	selectedFolderUid: string;
-	router: NextRouter;
-};
-type IState = {
-	selectedFolder: OfficeFolder | null;
-	selectedOption?: ERadioBoxValue;
-	availableCollaborators: User[];
-	defaultCheckedAllOffice: boolean;
-	selectedCollaborators: readonly IOption[];
-	loading: boolean;
-	validationError?: ValidationError[];
-};
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import { useCallback, useEffect, useState } from "react";
 
 enum ERadioBoxValue {
 	ALL = "all",
 	SELECTION = "selection",
 }
 
-class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
-	constructor(props: IPropsClass) {
-		super(props);
-		this.state = {
-			selectedFolder: null,
-			availableCollaborators: [],
-			selectedCollaborators: [],
-			defaultCheckedAllOffice: false,
-			selectedOption: ERadioBoxValue.SELECTION,
-			loading: true,
-		};
-		this.onSelectedFolder = this.onSelectedFolder.bind(this);
-		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
-		this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-		this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this);
-	}
-	public override render(): JSX.Element {
-		const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
-		const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
-		const selectOptions: IOption[] = this.state.availableCollaborators.map((collaborator) => {
-			return {
-				label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
-				value: collaborator.uid,
-			};
-		});
+export default function UpdateFolderCollaborators() {
+	const router = useRouter();
+	let { folderUid } = router.query;
 
-		return (
-			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
-				<div className={classes["root"]}>
-					<div className={classes["back-arrow"]}>
-						<BackArrow url={backwardPath} />
-					</div>
-					<Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
+	const [availableCollaborators, setAvailableCollaborators] = useState<User[]>([]);
+	const [selectedCollaborators, setSelectedCollaborators] = useState<readonly IOption[]>([]);
+	const [defaultCheckedAllOffice, setDefaultCheckedAllOffice] = useState<boolean>(false);
+	const [selectedOption, setSelectedOption] = useState<ERadioBoxValue>(ERadioBoxValue.SELECTION);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [validationError, setValidationError] = useState<ValidationError[]>([]);
 
-					{!this.state.loading && (
-						<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-							<div className={classes["content"]}>
-								<RadioBox
-									name="office"
-									value={ERadioBoxValue.ALL}
-									defaultChecked={this.state.defaultCheckedAllOffice}
-									onChange={this.onSelectedOptionAllOffice}>
-									Tout l'office
-								</RadioBox>
-								<RadioBox
-									name="office"
-									value={ERadioBoxValue.SELECTION}
-									defaultChecked={!this.state.defaultCheckedAllOffice}
-									onChange={this.onSelectedOptionSpecific}>
-									Sélectionner des collaborateurs
-								</RadioBox>
-							</div>
+	const onFormSubmit = useCallback(
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+			if (!folderUid || typeof folderUid !== "string") return;
+			try {
+				let collaboratorsUid: User[] = availableCollaborators;
+				if (selectedOption === ERadioBoxValue.SELECTION) {
+					collaboratorsUid = selectedCollaborators.map((collaborator) =>
+						User.hydrate<User>({ uid: collaborator.value as string }),
+					);
+				}
+				await Folders.getInstance().put(folderUid, { stakeholders: collaboratorsUid });
+				router.push(
+					Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid),
+				);
+			} catch (error) {
+				if (!Array.isArray(error)) return;
+				setValidationError(error as ValidationError[]);
+			}
+		},
+		[availableCollaborators, folderUid, router, selectedCollaborators, selectedOption],
+	);
 
-							{this.state.selectedOption === ERadioBoxValue.SELECTION && (
-								<div className={classes["sub-content"]}>
-									<MultiSelect
-										onChange={this.onChangeSelectedCollaborators}
-										options={selectOptions}
-										placeholder="Collaborateurs"
-										defaultValue={this.state.selectedCollaborators}
-										validationError={this.state.validationError?.find((error) => error.property === "stakeholders")}
-									/>
-								</div>
-							)}
+	const onSelectedOptionAllOffice = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+		if (event.target.value !== ERadioBoxValue.ALL) return;
+		setSelectedOption(ERadioBoxValue.ALL);
+	}, []);
 
-							<div className={classes["button-container"]}>
-								<Link href={backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
-										Annuler
-									</Button>
-								</Link>
-								<Button type="submit">Enregistrer</Button>
-							</div>
-						</Form>
-					)}
-				</div>
-			</DefaultNotaryDashboard>
-		);
-	}
+	const onChangeSelectedCollaborators = useCallback((selectedCollaborators: readonly IOption[]) => {
+		setSelectedCollaborators(selectedCollaborators);
+	}, []);
 
-	public override async componentDidMount() {
-		await this.getFolderAvailableCollaborators(this.props.selectedFolderUid);
-	}
+	const onSelectedOptionSpecific = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+		if (event.target.value !== ERadioBoxValue.SELECTION) return;
+		setSelectedOption(ERadioBoxValue.SELECTION);
+	}, []);
 
-	private async getFolderAvailableCollaborators(folderUid: string) {
+	const getFolderInfos = useCallback(async () => {
+		if (!folderUid || typeof folderUid !== "string") return;
 		const query = {
 			q: {
 				office: true,
@@ -158,66 +107,82 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 			const availableCollaborators = await Users.getInstance().get(userQuery);
 
-			this.setState({
-				loading: false,
-				availableCollaborators,
-				selectedCollaborators: preSelectedCollaborators,
-				defaultCheckedAllOffice: preSelectedCollaborators.length === availableCollaborators.length,
-				selectedOption:
-					preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
-			});
-		} catch (error) {
-			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
-			return;
-		}
-	}
-
-	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
-		if (event.target.value !== ERadioBoxValue.ALL) return;
-		this.setState({
-			selectedOption: ERadioBoxValue.ALL,
-		});
-	}
-
-	private onChangeSelectedCollaborators(selectedCollaborators: readonly IOption[]) {
-		this.setState({ selectedCollaborators });
-	}
-
-	private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
-		if (event.target.value !== ERadioBoxValue.SELECTION) return;
-		this.setState({
-			selectedOption: ERadioBoxValue.SELECTION,
-		});
-	}
-
-	private onSelectedFolder(folder: OfficeFolder): void {
-		this.setState({ selectedFolder: folder });
-	}
-
-	private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
-		try {
-			let collaboratorsUid: User[] = this.state.availableCollaborators;
-			if (this.state.selectedOption === ERadioBoxValue.SELECTION) {
-				collaboratorsUid = this.state.selectedCollaborators.map((collaborator) =>
-					User.hydrate<User>({ uid: collaborator.value as string }),
-				);
-			}
-			await Folders.getInstance().put(this.props.selectedFolderUid, { stakeholders: collaboratorsUid });
-			this.props.router.push(
-				Module.getInstance()
-					.get()
-					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
+			setLoading(false);
+			setAvailableCollaborators(availableCollaborators);
+			setSelectedCollaborators(preSelectedCollaborators);
+			setDefaultCheckedAllOffice(preSelectedCollaborators.length === availableCollaborators.length);
+			setSelectedOption(
+				preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
 			);
 		} catch (error) {
-			if (!Array.isArray(error)) return;
-			this.setState({ validationError: error });
+			router.push(Module.getInstance().get().modules.pages["404"].props.path);
+			return;
 		}
-	}
-}
+	}, [folderUid, router]);
 
-export default function UpdateFolderCollaborators() {
-	const router = useRouter();
-	let { folderUid } = router.query;
-	folderUid = folderUid as string;
-	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router} />;
+	useEffect(() => {
+		getFolderInfos();
+	}, [getFolderInfos]);
+
+	const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
+	const backwardPath = foldersInformationPath.replace("[folderUid]", folderUid as string);
+	const selectOptions: IOption[] = availableCollaborators.map((collaborator) => {
+		return {
+			label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
+			value: collaborator.uid,
+		};
+	});
+
+	return (
+		<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
+			<div className={classes["root"]}>
+				<div className={classes["back-arrow"]}>
+					<BackArrow url={backwardPath} />
+				</div>
+				<Typography typo={ETypo.TITLE_H1}>Modifier les collaborateurs</Typography>
+
+				{!loading && (
+					<Form className={classes["form"]} onSubmit={onFormSubmit}>
+						<div className={classes["content"]}>
+							<RadioBox
+								name="office"
+								value={ERadioBoxValue.ALL}
+								defaultChecked={defaultCheckedAllOffice}
+								onChange={onSelectedOptionAllOffice}>
+								Tout l'office
+							</RadioBox>
+							<RadioBox
+								name="office"
+								value={ERadioBoxValue.SELECTION}
+								defaultChecked={!defaultCheckedAllOffice}
+								onChange={onSelectedOptionSpecific}>
+								Sélectionner des collaborateurs
+							</RadioBox>
+						</div>
+
+						{selectedOption === ERadioBoxValue.SELECTION && (
+							<div className={classes["sub-content"]}>
+								<MultiSelect
+									onChange={onChangeSelectedCollaborators}
+									options={selectOptions}
+									placeholder="Collaborateurs"
+									defaultValue={selectedCollaborators}
+									validationError={validationError?.find((error) => error.property === "stakeholders")}
+								/>
+							</div>
+						)}
+
+						<div className={classes["button-container"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
+									Annuler
+								</Button>
+							</Link>
+							<Button type="submit">Enregistrer</Button>
+						</div>
+					</Form>
+				)}
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }