diff --git a/src/front/Assets/images/create-folder/right-image.png b/src/front/Assets/images/create-folder/right-image.png
new file mode 100644
index 00000000..f8ac748e
Binary files /dev/null and b/src/front/Assets/images/create-folder/right-image.png differ
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index f7f82637..6e710213 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -15,11 +15,11 @@ type IProps = {
 	variant?: EButtonVariant;
 	fullwidth?: "true" | "false";
 	icon?: string;
-	iconStyle?: CSSProperties;
+	iconstyle?: CSSProperties;
 	disabled?: boolean;
 	type?: "button" | "submit";
 	isloading?: string;
-	iconPosition?: "left" | "right";
+	iconposition?: "left" | "right";
 };
 
 export default function Button(props: IProps) {
@@ -29,11 +29,11 @@ export default function Button(props: IProps) {
 		type = "button",
 		isloading = "false",
 		fullwidth = "false",
-		iconPosition = "right",
+		iconposition = "right",
 		onClick,
 		children,
 		icon,
-		iconStyle,
+		iconstyle,
 	} = props;
 
 	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
@@ -42,9 +42,9 @@ export default function Button(props: IProps) {
 	delete attributes.iconPosition;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
-			{icon && iconPosition === "left" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 			{children}
-			{icon && iconPosition === "right" && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 		</button>
 	);
 }
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
index 499ce8f9..97c0a300 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	padding: 24px;
 	width: 100%;
 	display: flex;
diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
index a5d17db0..dc8f366a 100644
--- a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
@@ -26,31 +26,27 @@
 		border: 1px solid $grey-medium;
 
 		&:focus {
-			~.fake-placeholder {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform 0.3s ease-in-out;
 			}
 		}
 
-		&:not([value=""]) {
-			~.fake-placeholder {
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform;
 			}
 		}
 
 		&[type="number"] {
 			&:focus {
-				~.fake-placeholder {
+				~ .fake-placeholder {
 					transform: translateY(-35px);
-					transition: transform 0.3s ease-in-out;
 				}
 			}
 
-			&:not([value=""]) {
-				~.fake-placeholder {
+			&:not([data-value=""]) {
+				~ .fake-placeholder {
 					transform: translateY(-35px);
-					transition: transform;
 				}
 			}
 
@@ -75,14 +71,13 @@
 			}
 		}
 
-		&:not([value=""]) {
-			~.fake-placeholder {
+		&:not([data-value=""]) {
+			~ .fake-placeholder {
 				transform: translateY(-35px);
-				transition: transform 0.3s ease-in-out;
 			}
 		}
 
-		~.fake-placeholder {
+		~ .fake-placeholder {
 			z-index: 2;
 			top: 35%;
 			margin-left: 8px;
@@ -90,6 +85,7 @@
 			pointer-events: none;
 			position: absolute;
 			background: $white;
+			transition: transform 0.3s ease-in-out;
 		}
 	}
 }
@@ -106,7 +102,7 @@
 	height: 70px;
 	border: 1px solid $grey-medium;
 
-	~.fake-placeholder {
+	~ .fake-placeholder {
 		z-index: 2;
 		top: -12px;
 		margin-left: 8px;
@@ -114,6 +110,19 @@
 		pointer-events: none;
 		position: absolute;
 		background: $white;
-		// transform: translateY(-35px);
+		transform: translateY(35px);
+		transition: transform 0.3s ease-in-out;
 	}
-}
\ No newline at end of file
+
+	&:focus {
+		~ .fake-placeholder {
+			transform: translateY(0px);
+		}
+	}
+
+	&:not([data-value=""]) {
+		~ .fake-placeholder {
+			transform: translateY(0px);
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
index 9071adff..76e79771 100644
--- a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
@@ -40,7 +40,7 @@ export default class InputField extends BaseField<IProps> {
 							required={this.props.required}
 							ref={this.props.fieldRef}
 							rows={4}
-							value={value}
+							data-value={value}
 							onChange={this.onChange}
 							data-has-validation-errors={this.state.errors.length > 0}
 							className={
@@ -61,7 +61,7 @@ export default class InputField extends BaseField<IProps> {
 							pattern={pattern}
 							onChange={this.onChange}
 							onBlur={this.onBlur}
-							value={value}
+							data-value={value}
 							data-has-validation-errors={this.state.errors.length > 0}
 							className={
 								this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index 8119888b..2e13a657 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/src/front/Components/DesignSystem/RadioBox/index.tsx
@@ -14,7 +14,7 @@ type IProps = {
 export default class RadioBox extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
 					<input type="radio" name={this.props.name} defaultChecked={this.props.defaultChecked} onChange={this.props.onChange} />
 					{this.props.children}
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index f9d08e11..59d8e329 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -125,4 +125,8 @@
 	&.black {
 		color: $black;
 	}
+
+	&.purple-flash {
+		color: var(--purple-flash);
+	}
 }
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 44e95082..f3e799af 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -6,6 +6,7 @@ type IProps = {
 	typo: ITypo;
 	children: React.ReactNode;
 	color?: ITypoColor;
+	className?: string;
 };
 type IState = {};
 
@@ -33,12 +34,19 @@ export enum ITypoColor {
 	RE_HOVER = "re-hover",
 	GREY = "grey",
 	BLACK = "black",
+	PURPLE_FLASH = "purple-flash",
 }
 
 export default class Typography extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
-			<div className={classNames(classes["root"], classes[this.props.typo], classes[this.props.color ?? ""])}>
+			<div
+				className={classNames(
+					classes["root"],
+					classes[this.props.typo],
+					classes[this.props.color ?? ""],
+					this.props.className ?? "",
+				)}>
 				{this.props.children}
 			</div>
 		);
diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
index c34c80b5..7221872a 100644
--- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
+++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: $grey-soft;
+	background-color: var(--grey-soft);
 	width: 100%;
 
 	.content {
diff --git a/src/front/Components/Elements/BackArrow/classes.module.scss b/src/front/Components/Elements/BackArrow/classes.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/front/Components/Elements/BackArrow/index.tsx b/src/front/Components/Elements/BackArrow/index.tsx
new file mode 100644
index 00000000..8ed19bdc
--- /dev/null
+++ b/src/front/Components/Elements/BackArrow/index.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import React from "react";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import ChevronIcon from "@Assets/icons/chevron.svg";
+type IProps = {
+	url: string;
+};
+
+type IState = {};
+export default class BackArrow extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<Link href={this.props.url}>
+				<Button
+					icon={ChevronIcon}
+					iconposition={"left"}
+					iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+					variant={EButtonVariant.LINE}>
+					Retour
+				</Button>
+			</Link>
+		);
+	}
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
index 59709265..7388ab8c 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -7,32 +7,40 @@
 
 	.content {
 		display: flex;
-		align-items: center;
 		height: calc(100vh - 83px);
-		width: 100%;
 
+		.side-left {
+			max-height: 100vh;
+			overflow: auto;
+		}
 		.sides {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+			width: 50%;
 
 			&.image-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
 				@media (max-width: $screen-m) {
 					display: none;
 				}
+				background: var(--grey-soft);
+				.image {
+					height: 100%;
+					object-fit: contain;
+				}
 			}
 
-			.side-content {
-				max-width: 530px;
-			}
+			&.background-image-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
 
-			.image {
-				height: 100%;
-				width: 100%;
-				object-fit: cover;
+				.background-image {
+					height: 100%;
+					width: 100%;
+					object-fit: cover;
+				}
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
index 54e42b58..705d1cef 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
@@ -13,12 +13,15 @@ type IProps = {
 	 */
 	scrollTop: number | null;
 	image: StaticImageData;
+	type: "background" | "image";
 };
+
 type IState = {};
 
 export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
 	public static defaultProps = {
 		scrollTop: 0,
+		type: "background",
 	};
 
 	public override render(): JSX.Element {
@@ -26,12 +29,17 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 			<div className={classes["root"]}>
 				<Header isUserConnected={false} />
 				<div className={classes["content"]}>
-					<div className={classes["sides"]}>
-						<div className={classes["side-content"]}>{this.props.children}</div>
-					</div>
-					<div className={classNames(classes["sides"], classes["image-container"])}>
-						<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
-					</div>
+					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
+					{this.props.type === "image" && (
+						<div className={classNames(classes["sides"], classes["image-container"])}>
+							<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
+						</div>
+					)}
+					{this.props.type === "background" && (
+						<div className={classNames(classes["sides"], classes["background-image-container"])}>
+							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} />
+						</div>
+					)}
 				</div>
 				<Version />
 			</div>
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index 5fda5fec..753d61dd 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -9,9 +9,8 @@ import { ActionMeta, MultiValue } from "react-select";
 import { IOption } from "@Front/Components/DesignSystem/Select";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Form from "@Front/Components/DesignSystem/Form";
-import ChevonIcon from "@Assets/icons/chevron.svg";
-import Link from "next/link";
 import { useRouter } from "next/router";
+import BackArrow from "@Front/Components/Elements/BackArrow";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -45,15 +44,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					<Link href={"/dossier/".concat(this.props.selectedFolderUid)}>
-						<Button
-							icon={ChevonIcon}
-							iconPosition={"left"}
-							iconStyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-							variant={EButtonVariant.LINE}>
-							Retour
-						</Button>
-					</Link>
+					<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
 					<Form>
 						<div className={classes["radiobox-container"]}>
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
new file mode 100644
index 00000000..dc540580
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
@@ -0,0 +1,29 @@
+.root {
+	margin: 64px 0 0 64px;
+	width: 530px;
+	.title {
+		margin-top: 24px;
+	}
+
+	.subtitle {
+		margin-top: 32px;
+	}
+
+	.form-container {
+		margin-top: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.access-container {
+		margin-top: 16px;
+
+		.radio-container {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
new file mode 100644
index 00000000..541516dc
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -0,0 +1,63 @@
+import BasePage from "../../Base";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import RightImage from "@Front/Assets/images/create-folder/right-image.png";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import Form from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Select from "@Front/Components/DesignSystem/Select";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+
+type IProps = {};
+type IState = {};
+export default class CreateFolder extends BasePage<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+	}
+
+	// TODO: Message if the user has not created any folder yet
+	public override render(): JSX.Element {
+		return (
+			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
+				<div className={classes["root"]}>
+					<BackArrow url="/" />
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Créer un dossier
+					</Typography>
+					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
+						Informations dossier
+					</Typography>
+					<Form>
+						<div className={classes["form-container"]}>
+							<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
+							<InputField name="entitled" fakeplaceholder="Intitulé" />
+							<Select
+								options={[
+									{ label: "Divorce", value: "divorce" },
+									{ label: "Succession", value: "succession" },
+									{ label: "Vente immobilière", value: "vente_immobiliere" },
+								]}
+								onChange={() => {}}
+								placeholder={"Type d’acte"}
+							/>
+							<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
+						</div>
+						<div className={classes["access-container"]}>
+							<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
+								Accès au dossier
+							</Typography>
+							<div className={classes["radio-container"]}>
+								<RadioBox name="file_access" defaultChecked>
+									Sélectionner tout l'office
+								</RadioBox>
+								<RadioBox name="file_access">Sélectionner certains collaborateurs</RadioBox>
+							</div>
+						</div>
+					</Form>
+				</div>
+			</DefaultDoubleSidePage>
+		);
+	}
+	public override async componentDidMount() {}
+}
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index 6f817e8d..9bdcf0ec 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -9,26 +9,26 @@
 
 	--colormerdum: blue;
 
-	--green-flash: $green-flash;
-	--blue-flash: $blue-flash;
-	--turquoise-flash: $turquoise-flash;
-	--purple-flash: $purple-flash;
-	--purple-hover: $purple-hover;
-	--orange-flash: $orange-flash;
-	--red-flash: $red-flash;
-	--re-hover: $re-hover;
-	--pink-flash: $pink-flash;
-	--pink-hover: $pink-hover;
+	--green-flash: #{$green-flash};
+	--blue-flash: #{$blue-flash};
+	--turquoise-flash: #{$turquoise-flash};
+	--purple-flash: #{$purple-flash};
+	--purple-hover: #{$purple-hover};
+	--orange-flash: #{$orange-flash};
+	--red-flash: #{$red-flash};
+	--re-hover: #{$re-hover};
+	--pink-flash: #{$pink-flash};
+	--pink-hover: #{$pink-hover};
 
-	--green-soft: $green-soft;
-	--blue-soft: $blue-soft;
-	--turquoise-soft: $turquoise-soft;
-	--purple-soft: $purple-soft;
-	--orange-soft: $orange-soft;
-	--red-soft: $red-soft;
-	--pink-soft: $pink-soft;
+	--green-soft: #{$green-soft};
+	--blue-soft: #{$blue-soft};
+	--turquoise-soft: #{$turquoise-soft};
+	--purple-soft: #{$purple-soft};
+	--orange-soft: #{$orange-soft};
+	--red-soft: #{$red-soft};
+	--pink-soft: #{$pink-soft};
 
-	--grey: $grey;
-	--grey-medium: $grey-medium;
-	--grey-soft: $grey-soft;
+	--grey: #{$grey};
+	--grey-medium: #{$grey-medium};
+	--grey-soft: #{$grey-soft};
 }
diff --git a/src/pages/dossier/creer-dossier.tsx b/src/pages/dossier/creer-dossier.tsx
new file mode 100644
index 00000000..81d566ea
--- /dev/null
+++ b/src/pages/dossier/creer-dossier.tsx
@@ -0,0 +1,5 @@
+import CreateFolder from "@Front/Components/Layouts/Folder/CreateFolder";
+
+export default function Route() {
+	return <CreateFolder />;
+}