diff --git a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
index d8635d4c..838ec4c3 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
@@ -1,49 +1,28 @@
 @import "@Themes/constants.scss";
 
 .root {
-	margin: 64px;
-	width: 530px;
+	width: 472px;
+	margin: 24px auto;
 
-	@media (max-width: $screen-l) {
-		width: 100%;
-		margin: 64px 0;
-		padding: 0 64px;
-	}
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
 
-	@media (max-width: $screen-m) {
-		padding: 0 16px 0 16px;
-	}
-
-	.title {
-		margin-top: 24px;
-	}
-
-	.subtitle {
-		margin-top: 32px;
-	}
-
-	.form-container {
-		margin-top: 16px;
+	.form {
 		display: flex;
 		flex-direction: column;
-		gap: 24px;
-	}
+		gap: var(--spacing-md, 16px);
 
-	.access-container {
-		margin-top: 16px;
-
-		.radio-container {
-			margin-top: 16px;
+		.bottom-container {
 			display: flex;
 			flex-direction: column;
-			gap: 16px;
+			gap: var(--spacing-xl, 32px);
+
+			.radio-container {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-md, 16px);
+			}
 		}
 	}
-
-	.collaborators-container {
-		margin-top: 32px;
-	}
-	.buttons-container {
-		margin-top: 32px;
-	}
 }
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 2845bc86..7f0d2356 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -1,4 +1,4 @@
-import backgroundImage from "@Assets/images/404-background-image.jpeg";
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import DeedTypes from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
@@ -21,6 +21,7 @@ import React, { useEffect, useState } from "react";
 import classes from "./classes.module.scss";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import { DeedType } from "le-coffre-resources/dist/Notary";
+import { MultiValue } from "react-select";
 
 export default function CreateFolder(): JSX.Element {
 	/**
@@ -30,6 +31,7 @@ export default function CreateFolder(): JSX.Element {
 	const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]);
 	const [collaborators, setCollaborators] = useState<User[]>([]);
 	const [validationError, setValidationError] = useState<ValidationError[]>([]);
+	const [selectedCollaborators, setSelectedCollaborators] = useState<User[]>([]);
 
 	/**
 	 * Hooks call
@@ -46,7 +48,6 @@ export default function CreateFolder(): JSX.Element {
 			[key: string]: any;
 		},
 	) => {
-		console.log(values);
 		const officeId = JwtService.getInstance().decodeJwt()?.office_Id;
 
 		const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({
@@ -62,7 +63,7 @@ export default function CreateFolder(): JSX.Element {
 				uid: officeId,
 			}),
 			customers: [],
-			stakeholders: collaborators,
+			stakeholders: folderAccess === "whole_office" ? collaborators : selectedCollaborators,
 		});
 
 		try {
@@ -86,6 +87,11 @@ export default function CreateFolder(): JSX.Element {
 	const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) =>
 		setFolderAccess(e.target.value as "whole_office" | "select_collaborators");
 
+	const onSelectedCollaboratorsChange = (values: MultiValue<IOption>) => {
+		const selectedCollaborators = collaborators.filter((collaborator) => values.some((value) => value.value === collaborator.uid));
+		setSelectedCollaborators(selectedCollaborators);
+	};
+
 	/**
 	 * UseEffect
 	 */
@@ -98,7 +104,10 @@ export default function CreateFolder(): JSX.Element {
 			.get({
 				include: { contact: true },
 			})
-			.then((users) => setCollaborators(users));
+			.then((users) => {
+				setCollaborators(users);
+				setSelectedCollaborators(users);
+			});
 	}, []);
 
 	/**
@@ -108,73 +117,79 @@ export default function CreateFolder(): JSX.Element {
 		<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 			<div className={classes["root"]}>
 				<BackArrow />
-				<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
-					Créer un dossier
-				</Typography>
-				<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
-					Informations dossier
-				</Typography>
-				<Form onSubmit={onFormSubmit}>
-					<div className={classes["form-container"]}>
-						<TextField
-							name="folder_number"
-							placeholder="Numéro de dossier"
-							validationError={validationError.find((error) => error.property === "folder_number")}
-						/>
-						<TextField
-							name="name"
-							placeholder="Intitulé"
-							validationError={validationError.find((error) => error.property === "name")}
-						/>
-						<SelectField
-							options={
-								availableDeedTypes.map((deedType) => ({
-									label: deedType.name,
-									value: deedType.uid,
-								})) as IOption[]
-							}
-							name="deed"
-							placeholder={"Type d'acte"}
-							errors={validationError.find((error) => error.property === "deed")}
-						/>
-						<TextAreaField
-							name="description"
-							placeholder="Note du dossier"
-							validationError={validationError.find((error) => error.property === "description")}
-							required={false}
-						/>
+				<div className={classes["header"]}>
+					<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+						Créer un dossier
+					</Typography>
+					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
+						Informations du dossier
+					</Typography>
+				</div>
 
-						<div className={classes["access-container"]}>
-							<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
-								Accès au dossier
-							</Typography>
-							<div className={classes["radio-container"]}>
-								<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
-									Sélectionner tout l'office
-								</RadioBox>
-								<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
-									Sélectionner certains collaborateurs
-								</RadioBox>
-							</div>
-							{folderAccess === "select_collaborators" && (
-								<div className={classes["collaborators-container"]}>
-									<MultiSelect
-										options={
-											collaborators.map((collaborator) => ({
-												label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name),
-												value: collaborator.uid,
-											})) as IOption[]
-										}
-										placeholder="Sélectionner les collaborateurs"
-										validationError={validationError.find((error) => error.property === "stakeholders")}
-									/>
-								</div>
-							)}
-							<div className={classes["buttons-container"]}>
-								<Button fullwidth type="submit">
-									Créer un dossier
-								</Button>
+				<Form onSubmit={onFormSubmit} className={classes["form"]}>
+					<TextField
+						name="folder_number"
+						placeholder="Numéro de dossier"
+						validationError={validationError.find((error) => error.property === "folder_number")}
+					/>
+					<TextField
+						name="name"
+						placeholder="Intitulé"
+						validationError={validationError.find((error) => error.property === "name")}
+					/>
+					<SelectField
+						options={
+							availableDeedTypes.map((deedType) => ({
+								label: deedType.name,
+								value: deedType.uid,
+							})) as IOption[]
+						}
+						name="deed"
+						placeholder={"Type d'acte"}
+						errors={validationError.find((error) => error.property === "deed")}
+					/>
+					<TextAreaField
+						name="description"
+						placeholder="Note du dossier"
+						validationError={validationError.find((error) => error.property === "description")}
+						required={false}
+					/>
+
+					<div className={classes["bottom-container"]}>
+						<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
+							Donner l'accès au dossier
+						</Typography>
+						<div className={classes["radio-container"]}>
+							<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
+								Sélectionner tout l'office
+							</RadioBox>
+							<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
+								Sélectionner certains collaborateurs
+							</RadioBox>
+						</div>
+						{folderAccess === "select_collaborators" && (
+							<div className={classes["collaborators-container"]}>
+								<MultiSelect
+									options={
+										collaborators.map((collaborator) => ({
+											label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name),
+											value: collaborator.uid,
+										})) as IOption[]
+									}
+									defaultValue={selectedCollaborators.map((collaborator) => ({
+										label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name) as string,
+										value: collaborator.uid!,
+									}))}
+									onChange={onSelectedCollaboratorsChange}
+									placeholder="Sélectionner les collaborateurs"
+									validationError={validationError.find((error) => error.property === "stakeholders")}
+								/>
 							</div>
+						)}
+						<div className={classes["buttons-container"]}>
+							<Button fullwidth type="submit">
+								Créer un dossier
+							</Button>
 						</div>
 					</div>
 				</Form>