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/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..4bf00039 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -7,32 +7,36 @@
 
 	.content {
 		display: flex;
-		align-items: center;
 		height: calc(100vh - 83px);
-		width: 100%;
 
 		.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..b1cf2d53 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={classes["sides"]}>{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..6f8600c7
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
@@ -0,0 +1,3 @@
+.root {
+	margin: 64px 0 0 64px;
+}
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..b62354ba
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -0,0 +1,26 @@
+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";
+
+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="/" />
+				</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 />;
+}