diff --git a/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts b/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts
index 0c82cc4e..06691262 100644
--- a/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts
+++ b/src/front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles.ts
@@ -13,6 +13,11 @@ export type IPutRoleParams = {
 	rules: OfficeRole["rules"];
 };
 
+export type IPostRoleParams = {
+	name: OfficeRole["name"];
+	office: OfficeRole["office"];
+};
+
 export default class OfficeRoles extends BaseAdmin {
 	private static instance: OfficeRoles;
 	private readonly baseURl = this.namespaceUrl.concat("/office-roles");
@@ -63,4 +68,14 @@ export default class OfficeRoles extends BaseAdmin {
 			return Promise.reject(err);
 		}
 	}
+
+	public async post(body: IPostRoleParams) {
+		const url = new URL(this.baseURl);
+		try {
+			return await this.postRequest<OfficeRole>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
 }
diff --git a/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts b/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
index b0e51a69..88bfed5a 100644
--- a/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
+++ b/src/front/Api/LeCoffreApi/Admin/Roles/Roles.ts
@@ -13,6 +13,9 @@ export type IPutRoleParams = {
 	rules: Role["rules"];
 };
 
+export type IPostRoleParams = {
+	name: Role["name"];
+};
 export default class Roles extends BaseAdmin {
 	private static instance: Roles;
 	private readonly baseURl = this.namespaceUrl.concat("/roles");
@@ -43,6 +46,16 @@ export default class Roles extends BaseAdmin {
 		}
 	}
 
+	public async post(body: IPostRoleParams) {
+		const url = new URL(this.baseURl);
+		try {
+			return await this.postRequest<Role>(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+
 	public async getOne(q?: IGetRolesParams): Promise<Role | null> {
 		const url = new URL(this.baseURl);
 		if (q) {
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
index a27e911b..d787f90f 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
@@ -15,8 +15,8 @@
 	}
 
 	.folderlist-container {
-		max-height: 100vh;
-		height: 100vh;
+		max-height: calc(100vh - 290px);
+		height: calc(100vh - 290px);
 		overflow: auto;
 		border-right: 1px solid var(--grey-medium);
 	}
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
index 360b58e6..3a992ba6 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/index.tsx
@@ -6,6 +6,8 @@ import { useRouter } from "next/router";
 import React, { useCallback, useState } from "react";
 
 import classes from "./classes.module.scss";
+import Link from "next/link";
+import Button from "@Front/Components/DesignSystem/Button";
 
 type IProps = {
 	roles: OfficeRole[];
@@ -62,6 +64,11 @@ export default function RoleListContainer(props: IProps) {
 					/>
 				</div>
 			</div>
+			<div>
+				<Link href={Module.getInstance().get().modules.pages.Roles.pages.Create.props.path}>
+					<Button fullwidth={true}>Créer un rôle</Button>
+				</Link>
+			</div>
 		</div>
 	);
 }
diff --git a/src/front/Components/Layouts/Roles/RolesCreate/classes.module.scss b/src/front/Components/Layouts/Roles/RolesCreate/classes.module.scss
new file mode 100644
index 00000000..848ef4bc
--- /dev/null
+++ b/src/front/Components/Layouts/Roles/RolesCreate/classes.module.scss
@@ -0,0 +1,24 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.header {
+		margin-top: 24px;
+	}
+
+	.form-container {
+		margin-top: 32px;
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	.buttons-container {
+		display: flex;
+		gap: 32px;
+
+		@media (max-width: $screen-s) {
+			flex-direction: column-reverse;
+			gap: 16px;
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
new file mode 100644
index 00000000..0fbbd749
--- /dev/null
+++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
@@ -0,0 +1,95 @@
+import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
+import Module from "@Front/Config/Module";
+import { Office, OfficeRole } from "le-coffre-resources/dist/Admin";
+import { useRouter } from "next/router";
+import { useCallback, useState } from "react";
+
+import classes from "./classes.module.scss";
+import JwtService from "@Front/Services/JwtService/JwtService";
+
+type IProps = {};
+export default function RolesCreate(props: IProps) {
+	const [hasChanged, setHasChanged] = useState<boolean>(false);
+	const [isConfirmModalVisible, setIsConfirmModalVisible] = useState<boolean>(false);
+
+	const router = useRouter();
+	const onSubmitHandler = useCallback(
+		async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+			try {
+				const jwt = JwtService.getInstance().decodeJwt();
+				const role = await OfficeRoles.getInstance().post(
+					OfficeRole.hydrate<OfficeRole>({
+						name: values["name"],
+						office: Office.hydrate<Office>({
+							uid: jwt?.office_Id,
+						}),
+					}),
+				);
+
+				router.push(Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path.replace("[uid]", role.uid!));
+			} catch (e) {
+				console.error(e);
+			}
+		},
+		[router],
+	);
+
+	const closeConfirmModal = useCallback(() => {
+		setIsConfirmModalVisible(false);
+	}, []);
+
+	const onFieldChange = useCallback((name: string, field: any) => {
+		setHasChanged(true);
+	}, []);
+
+	const redirect = useCallback(() => {
+		router.push(Module.getInstance().get().modules.pages.Roles.props.path);
+	}, [router]);
+
+	const onCancel = useCallback(() => {
+		if (hasChanged) {
+			setIsConfirmModalVisible(true);
+		} else {
+			redirect();
+		}
+	}, [hasChanged, redirect]);
+
+	return (
+		<DefaultRolesDashboard mobileBackText={"Liste des rôles"} hasBackArrow title="Créer un rôle">
+			<div className={classes["root"]}>
+				<div className={classes["header"]}>
+					<Typography typo={ITypo.H1Bis}>Créer un rôle</Typography>
+				</div>
+				<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
+					<TextField name="name" placeholder="Nom du rôle" />
+					<div className={classes["buttons-container"]}>
+						<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
+							Annuler
+						</Button>
+						<Button type="submit">Créer le rôle</Button>
+					</div>
+				</Form>
+				<Confirm
+					isOpen={isConfirmModalVisible}
+					onClose={closeConfirmModal}
+					onAccept={redirect}
+					closeBtn
+					header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+					cancelText={"Annuler"}
+					confirmText={"Quitter"}>
+					<div className={classes["modal-content"]}>
+						<Typography typo={ITypo.P_16} className={classes["text"]}>
+							Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
+						</Typography>
+					</div>
+				</Confirm>
+			</div>
+		</DefaultRolesDashboard>
+	);
+}
diff --git a/src/front/Config/Module/development.json b/src/front/Config/Module/development.json
index 187d64de..b2464999 100644
--- a/src/front/Config/Module/development.json
+++ b/src/front/Config/Module/development.json
@@ -155,6 +155,13 @@
 							"path": "/roles/[uid]",
 							"labelKey": "roles_informations"
 						}
+					},
+					"Create": {
+						"enabled": true,
+						"props": {
+							"path": "/roles/create",
+							"labelKey": "create_role"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index 187d64de..b2464999 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -155,6 +155,13 @@
 							"path": "/roles/[uid]",
 							"labelKey": "roles_informations"
 						}
+					},
+					"Create": {
+						"enabled": true,
+						"props": {
+							"path": "/roles/create",
+							"labelKey": "create_role"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index 187d64de..b2464999 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -155,6 +155,13 @@
 							"path": "/roles/[uid]",
 							"labelKey": "roles_informations"
 						}
+					},
+					"Create": {
+						"enabled": true,
+						"props": {
+							"path": "/roles/create",
+							"labelKey": "create_role"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index 187d64de..b2464999 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -155,6 +155,13 @@
 							"path": "/roles/[uid]",
 							"labelKey": "roles_informations"
 						}
+					},
+					"Create": {
+						"enabled": true,
+						"props": {
+							"path": "/roles/create",
+							"labelKey": "create_role"
+						}
 					}
 				}
 			},
diff --git a/src/pages/roles/create/index.tsx b/src/pages/roles/create/index.tsx
new file mode 100644
index 00000000..a947ffeb
--- /dev/null
+++ b/src/pages/roles/create/index.tsx
@@ -0,0 +1,5 @@
+import RolesCreate from "@Front/Components/Layouts/Roles/RolesCreate";
+
+export default function Route() {
+	return <RolesCreate />;
+}