From acc8e97a7ac018823feda1d46ee81c2cce55d7d6 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Fri, 5 Jul 2024 11:27:08 +0200
Subject: [PATCH] :sparkles: New buttons created

---
 .../BlockList/classes.module.scss             |  6 +-
 .../DesignSystem/Button/classes.module.scss   | 92 ++++---------------
 .../Components/DesignSystem/Button/index.tsx  | 33 +++++--
 .../DesignSystem/CheckBox/classes.module.scss |  4 +-
 .../DesignSystem/DepositDocument/index.tsx    | 11 ++-
 .../DepositOtherDocument/index.tsx            |  8 +-
 .../DesignSystem/DepositRib/index.tsx         |  8 +-
 .../DocumentNotary/classes.module.scss        | 14 +--
 .../FolderContainer/classes.module.scss       |  4 +-
 .../Form/DateField/classes.module.scss        |  2 +-
 .../Form/SelectField/classes.module.scss      |  8 +-
 .../Form/TextField/classes.module.scss        |  2 +-
 .../Form/TextareaField/classes.module.scss    |  2 +-
 .../BurgerModal/classes.module.scss           |  4 +-
 .../Header/HeaderLink/classes.module.scss     |  4 +-
 .../Header/HeaderSubmenu/classes.module.scss  |  4 +-
 .../NotificationModal/classes.module.scss     |  2 +-
 .../Profile/ProfileModal/classes.module.scss  |  4 +-
 .../DesignSystem/Header/classes.module.scss   |  2 +-
 .../DesignSystem/Modal/Confirm/index.tsx      | 10 +-
 .../DesignSystem/Modal/classes.module.scss    |  2 +-
 .../MultiSelect/classes.module.scss           |  2 +-
 .../DesignSystem/Newsletter/index.tsx         |  2 +-
 .../ProgressBar/classes.module.scss           |  4 +-
 .../DesignSystem/RadioBox/classes.module.scss |  4 +-
 .../SearchBar/classes.module.scss             |  8 +-
 .../ToolTip/Content/classes.module.scss       |  4 +-
 .../Typography/classes.module.scss            |  2 +-
 .../Typography/old-classes.module.scss        | 16 ++--
 .../UserFolder/classes.module.scss            |  2 +-
 .../DesignSystem/UserFolder/index.tsx         |  4 +-
 .../WarningBadge/classes.module.scss          |  2 +-
 .../Components/Elements/BackArrow/index.tsx   |  5 +-
 .../classes.module.scss                       |  6 +-
 .../DefaultCollaboratorDashboard/index.tsx    |  5 +-
 .../classes.module.scss                       |  6 +-
 .../DefaultDeedTypeDashboard/index.tsx        |  5 +-
 .../classes.module.scss                       |  6 +-
 .../DefaultDocumentTypesDashboard/index.tsx   |  5 +-
 .../classes.module.scss                       |  6 +-
 .../DefaultNotaryDashboard/index.tsx          |  5 +-
 .../classes.module.scss                       |  6 +-
 .../DefaultOfficeDashboard/index.tsx          |  5 +-
 .../DefaultRoleDashboard/classes.module.scss  |  6 +-
 .../DefaultRoleDashboard/index.tsx            |  5 +-
 .../DefaultUserDashboard/classes.module.scss  |  6 +-
 .../DefaultUserDashboard/index.tsx            |  5 +-
 .../Layouts/ClientDashboard/index.tsx         | 14 ++-
 .../Layouts/ClientDashboard/index2.tsx        |  8 +-
 .../CollaboratorInformations/index.tsx        |  5 +-
 .../DeedTypes/DeedTypesCreate/index.tsx       |  4 +-
 .../Layouts/DeedTypes/DeedTypesEdit/index.tsx |  4 +-
 .../DeedTypes/DeedTypesInformations/index.tsx |  6 +-
 .../DocumentTypesCreate/index.tsx             |  6 +-
 .../DocumentTypes/DocumentTypesEdit/index.tsx |  6 +-
 .../DocumentTypesInformations/index.tsx       |  4 +-
 .../Folder/AddClientToFolder/index.tsx        | 10 +-
 .../Layouts/Folder/AskDocuments/index.tsx     |  7 +-
 .../Folder/CreateCustomerNote/index.tsx       |  6 +-
 .../FolderInformation/ClientSection/index.tsx |  6 +-
 .../Folder/FolderInformation/index.tsx        |  9 +-
 .../Layouts/Folder/UpdateClient/index.tsx     | 12 ++-
 .../Folder/UpdateCustomerNote/index.tsx       |  6 +-
 .../UpdateFolderCollaborators/index.tsx       |  6 +-
 .../Folder/UpdateFolderDescription/index.tsx  |  6 +-
 .../Folder/UpdateFolderMetadata/index.tsx     |  6 +-
 .../Layouts/Folder/ViewDocuments/index.tsx    |  7 +-
 .../FolderInformation/index.tsx               |  9 +-
 .../UpdateFolderMetadata/index.tsx            |  6 +-
 src/front/Components/Layouts/Login/index.tsx  |  6 +-
 .../Layouts/LoginCallback/index.tsx           |  6 +-
 .../Layouts/LoginCallbackCustomer/index.tsx   |  6 +-
 .../Layouts/LoginCustomer/StepEmail/index.tsx |  2 +-
 .../Layouts/LoginCustomer/StepTotp/index.tsx  |  5 +-
 .../Components/Layouts/LoginHome/index.tsx    |  6 +-
 src/front/Components/Layouts/Rib/index.tsx    |  4 +-
 .../Layouts/Roles/RolesCreate/index.tsx       |  4 +-
 .../SubscribeIllimityComponent/index.tsx      |  4 +-
 .../SubscribeStandardComponent/index.tsx      |  4 +-
 .../SubscriptionManageCollaborators/index.tsx |  9 +-
 .../SubscriptionFacturation/index.tsx         | 18 +++-
 .../Subscription/SubscriptionInvite/index.tsx |  8 +-
 82 files changed, 330 insertions(+), 263 deletions(-)

diff --git a/src/front/Components/DesignSystem/BlockList/classes.module.scss b/src/front/Components/DesignSystem/BlockList/classes.module.scss
index a297cd3d..fcf2657b 100644
--- a/src/front/Components/DesignSystem/BlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/BlockList/classes.module.scss
@@ -6,15 +6,15 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $color-neutral-200;
+	border: 1px solid var(--color-neutral-200);
 	cursor: pointer;
 
 	&:hover {
-		background-color: $color-neutral-200;
+		background-color: var(--color-neutral-200);
 	}
 
 	&[data-selected="true"] {
-		background-color: $color-neutral-200;
+		background-color: var(--color-neutral-200);
 	}
 
 	.left-side {
diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index dd3440d1..a54155c2 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -23,99 +23,56 @@
 	}
 
 	&[variant="primary"] {
-		color: $color-generic-white;
-		background-color: $color-primary-500;
-		border-color: $color-primary-500;
+		color: var(--color-generic-white);
+		background-color: var(--color-primary-500);
+		border-color: var(--color-primary-500);
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $color-primary-700;
-			background-color: $color-primary-700;
+			border-color: var(--color-primary-700);
+			background-color: var(--color-primary-700);
 		}
 
 		&:disabled {
-			border-color: $color-primary-500-soft;
-			background-color: $color-primary-500-soft;
+			border-color: var(--color-primary-500-soft);
+			background-color: var(--color-primary-500-soft);
 			pointer-events: none;
 		}
 	}
 
 	&[variant="secondary"] {
-		color: $color-generic-white;
-		background-color: $color-error-600;
-		border-color: $color-error-600;
+		color: var(--color-generic-white);
+		background-color: var(--color-error-600);
+		border-color: var(--color-error-600);
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $color-error-800;
-			background-color: $color-error-800;
+			border-color: var(--color-error-800);
+			background-color: var(--color-error-800);
 		}
 
 		&:disabled {
-			border-color: $color-error-600-soft;
-			background-color: $color-error-600-soft;
+			border-color: var(--color-error-600-soft);
+			background-color: var(--color-error-600-soft);
 			pointer-events: none;
 		}
 	}
 
-	&[variant="ghost"] {
-		color: $color-secondary-500;
+	&[variant="line"] {
+		color: var(--color-secondary-500);
 		background-color: transparent;
-		border-color: $color-secondary-500;
-		padding: 24px 48px;
+		border-color: transparent;
+		padding: 0;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
-
-		svg {
-			path {
-				stroke: $color-generic-white;
-			}
-		}
-
-		&:hover {
-			border-color: $color-secondary-700;
-			color: $color-secondary-700;
-		}
-
-		&:disabled {
-			border-color: $color-secondary-500-soft;
-			background-color: $color-secondary-500-soft;
-			pointer-events: none;
-		}
-	}
-
-	&[variant="white"] {
-		color: $color-secondary-500;
-		background-color: white;
-		border-color: $color-secondary-500;
-		padding: 24px 48px;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-
-		svg {
-			path {
-				stroke: $color-generic-white;
-			}
-		}
-
-		&:hover {
-			border-color: $color-secondary-700;
-			color: $color-secondary-700;
-		}
-
-		&:disabled {
-			border-color: $color-secondary-500-soft;
-			background-color: $color-secondary-500-soft;
-			pointer-events: none;
-		}
+		text-decoration-line: underline;
 	}
 
 	&[fullwidthattr="true"] {
@@ -130,15 +87,4 @@
 	&[touppercase="false"] {
 		text-transform: inherit;
 	}
-
-	&[variant="line"] {
-		color: $color-secondary-500;
-		background-color: transparent;
-		border-color: transparent;
-		padding: 0;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-		text-decoration-line: underline;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index 258a3d63..e6da6291 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -7,21 +7,37 @@ import classNames from "classnames";
 export enum EButtonVariant {
 	PRIMARY = "primary",
 	SECONDARY = "secondary",
-	GHOST = "ghost",
-	LINE = "line",
-	WHITE = "white",
+	NEUTRAL = "neutral",
+	ERROR = "error",
+	WARNING = "warning",
+	SUCCESS = "success",
+	INFO = "info",
+}
+
+export enum EButtonSize {
+	LG = "lg",
+	MD = "md",
+	SM = "sm",
+}
+
+export enum EButtonStyleType {
+	CONTAINED = "contained",
+	OUTLINED = "outlined",
+	TEXT = "text",
 }
 
 type IProps = {
 	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	children?: React.ReactNode;
 	variant?: EButtonVariant;
+	size?: EButtonSize;
+	styleType?: EButtonStyleType;
 	fullwidth?: boolean;
 	icon?: string;
 	iconstyle?: CSSProperties;
 	disabled?: boolean;
+	isLoading?: boolean;
 	type?: "button" | "submit";
-	isloading?: string;
 	iconposition?: "left" | "right";
 	className?: string;
 };
@@ -29,9 +45,11 @@ type IProps = {
 export default function Button(props: IProps) {
 	let {
 		variant = EButtonVariant.PRIMARY,
+		size = EButtonSize.MD,
+		styleType = EButtonStyleType.CONTAINED,
 		disabled = false,
 		type = "button",
-		isloading = "false",
+		isLoading = false,
 		fullwidth = false,
 		iconposition = "right",
 		onClick,
@@ -42,13 +60,14 @@ export default function Button(props: IProps) {
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
-	const isloadingattr = isloading.toString();
+	const isloadingattr = isLoading.toString();
 
-	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr };
+	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, size, styleType };
 	delete attributes.fullwidth;
 	delete attributes.icon;
 	delete attributes.iconstyle;
 	delete attributes.iconposition;
+
 	return (
 		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
 			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
index 2eb130fb..5f943fd1 100644
--- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
@@ -13,7 +13,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid $color-secondary-500;
+		border: 1px solid var(--color-secondary-500);
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -30,7 +30,7 @@
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: $color-secondary-500;
+		background-color: var(--color-secondary-500);
 		border-radius: 2px;
 		transform: scale(0);
 	}
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index dd3b0007..62118d5b 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -5,7 +5,7 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 import React from "react";
 
-import Button, { EButtonVariant } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
@@ -190,7 +190,11 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					</div>
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
-							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
+							<Button
+								variant={EButtonVariant.PRIMARY}
+								styleType={EButtonStyleType.TEXT}
+								className={classes["add-button"]}
+								onClick={this.addDocument}>
 								<Typography
 									typo={ITypo.TEXT_MD_SEMIBOLD}
 									color={ITypoColor.COLOR_SECONDARY_500}
@@ -291,7 +295,8 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
-								variant={EButtonVariant.LINE}
+								variant={EButtonVariant.PRIMARY}
+								styleType={EButtonStyleType.TEXT}
 								className={classes["refused-button"]}
 								onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
 								Voir le motif de refus
diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
index c248c89a..22e5bcb5 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
@@ -12,7 +12,7 @@ import { Document } from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 
-import Button, { EButtonVariant } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Confirm from "../Modal/Confirm";
 import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@@ -154,7 +154,11 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 									</div>
 								)}
 								<div className={classes["bottom-container"]}>
-									<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
+									<Button
+										variant={EButtonVariant.PRIMARY}
+										styleType={EButtonStyleType.TEXT}
+										className={classes["add-button"]}
+										onClick={this.addDocument}>
 										<Typography
 											typo={ITypo.TEXT_MD_SEMIBOLD}
 											color={ITypoColor.COLOR_SECONDARY_500}
diff --git a/src/front/Components/DesignSystem/DepositRib/index.tsx b/src/front/Components/DesignSystem/DepositRib/index.tsx
index 034653c5..fd183857 100644
--- a/src/front/Components/DesignSystem/DepositRib/index.tsx
+++ b/src/front/Components/DesignSystem/DepositRib/index.tsx
@@ -6,7 +6,7 @@ import CrossIcon from "@Assets/Icons/cross.svg";
 import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 
-import Button, { EButtonVariant } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 
 type IProps = {
@@ -160,7 +160,11 @@ export default class DepositRib extends React.Component<IProps, IState> {
 					</div>
 
 					<div className={classes["bottom-container"]}>
-						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.TEXT}
+							className={classes["add-button"]}
+							onClick={() => this.fileInput!.click()}>
 							<Typography
 								typo={ITypo.TEXT_MD_SEMIBOLD}
 								color={ITypoColor.COLOR_SECONDARY_500}
diff --git a/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss b/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
index c9b9fd5b..68d7d77a 100644
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
@@ -1,25 +1,25 @@
 @import "@Themes/constants.scss";
 
 .root {
-	border: 1px solid $color-neutral-200;
+	border: 1px solid var(--color-neutral-200);
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	&.DEPOSITED {
 		cursor: pointer;
-		border: 1px solid $color-warning-500-soft;
+		border: 1px solid var(--color-warning-500-soft);
 		&:hover {
-			border: 1px solid $color-warning-500-soft;
-			outline: 1px solid $color-warning-500-soft;
+			border: 1px solid var(--color-warning-500-soft);
+			outline: 1px solid var(--color-warning-500-soft);
 		}
 	}
 	&.VALIDATED {
 		cursor: pointer;
-		border: 1px solid $color-success-600-soft;
+		border: 1px solid var(--color-success-600-soft);
 		&:hover {
-			border: 1px solid $color-success-600-soft;
-			outline: 1px solid $color-success-600-soft;
+			border: 1px solid var(--color-success-600-soft);
+			outline: 1px solid var(--color-success-600-soft);
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
index 302d29e1..92155d09 100644
--- a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
@@ -6,11 +6,11 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $color-neutral-200;
+	border: 1px solid var(--color-neutral-200);
 	cursor: pointer;
 
 	&:hover {
-		background-color: $color-neutral-200;
+		background-color: var(--color-neutral-200);
 	}
 
 	.left-side {
diff --git a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
index bac68da9..8cfc21c9 100644
--- a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
@@ -76,7 +76,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $color-generic-white;
+			background: var(--color-generic-white);
 			transition: transform 0.3s ease-in-out;
 		}
 	}
diff --git a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
index d1dedc0e..07a3b243 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
@@ -23,7 +23,7 @@
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
-		background-color: $color-generic-white;
+		background-color: var(--color-generic-white);
 		cursor: pointer;
 		padding: 24px;
 		z-index: 1;
@@ -50,7 +50,7 @@
 				position: absolute;
 				top: 24px;
 				left: 8px;
-				background-color: $color-generic-white;
+				background-color: var(--color-generic-white);
 				padding: 0 16px;
 
 				&[data-open="true"] {
@@ -62,7 +62,7 @@
 		.chevron-icon {
 			height: 24px;
 
-			fill: $color-neutral-500;
+			fill: var(--color-neutral-500);
 			transition: all 350ms $custom-easing;
 			transform: rotate(90deg);
 
@@ -85,7 +85,7 @@
 		opacity: 1;
 		overflow: hidden;
 		top: 50px;
-		background-color: $color-generic-white;
+		background-color: var(--color-generic-white);
 
 		&[data-open="false"] {
 			height: 0;
diff --git a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
index bac68da9..8cfc21c9 100644
--- a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
@@ -76,7 +76,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $color-generic-white;
+			background: var(--color-generic-white);
 			transition: transform 0.3s ease-in-out;
 		}
 	}
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
index e3a2701b..42a5c80a 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
@@ -34,7 +34,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $color-generic-white;
+			background: var(--color-generic-white);
 			transform: translateY(35px);
 			transition: transform 0.3s ease-in-out;
 		}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
index 10a680ac..da462747 100644
--- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $color-generic-white;
+	background-color: var(--color-generic-white);
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -19,7 +19,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $color-neutral-200;
+		border: 1px solid var(--color-neutral-200);
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
index 082128ea..bc36281f 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
@@ -14,13 +14,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $color-generic-white;
+		background-color: var(--color-generic-white);
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $color-generic-black;
+			background-color: var(--color-generic-black);
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
index 1fa4e0c9..0e84d6a6 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
@@ -13,13 +13,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $color-generic-white;
+		background-color: var(--color-generic-white);
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $color-generic-black;
+			background-color: var(--color-generic-black);
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index 0a697368..d3421913 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -5,7 +5,7 @@
 	flex-direction: column;
 	width: 390px;
 	max-height: 80vh;
-	background-color: $color-generic-white;
+	background-color: var(--color-generic-white);
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
index fe11828d..d2eabeed 100644
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $color-generic-white;
+	background-color: var(--color-generic-white);
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -27,7 +27,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $color-neutral-200;
+		border: 1px solid var(--color-neutral-200);
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss
index dda80b19..932272ab 100644
--- a/src/front/Components/DesignSystem/Header/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/classes.module.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	height: 83px;
-	background-color: $color-generic-white;
+	background-color: var(--color-generic-white);
 	box-shadow: $shadow-nav;
 	padding: 0 48px;
 	position: sticky;
diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
index 1466d972..06e394a7 100644
--- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import React from "react";
 
 import Modal, { IProps as IPropsModal } from "..";
-import Button, { EButtonVariant } from "../../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
 type IProps = IPropsModal & {
@@ -47,13 +47,17 @@ export default class Confirm extends React.Component<IProps, IState> {
 				{this.props.showCancelButton &&
 					(this.props.cancelPath ? (
 						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
-							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
+							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
 								{this.props.cancelText}
 							</Button>
 						</Link>
 					) : (
 						<div className={classes["sub-container"]}>
-							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
+							<Button
+								variant={EButtonVariant.PRIMARY}
+								styleType={EButtonStyleType.OUTLINED}
+								onClick={this.props.onClose}
+								className={classes["sub-container"]}>
 								{this.props.cancelText}
 							</Button>
 						</div>
diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss
index b2bf7912..408155b3 100644
--- a/src/front/Components/DesignSystem/Modal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Modal/classes.module.scss
@@ -51,7 +51,7 @@
 		position: relative;
 		width: 610px;
 		max-height: 90%;
-		background: $color-generic-white;
+		background: var(--color-generic-white);
 		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
 		overflow: auto;
 		padding: 32px;
diff --git a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
index 449f38c9..4e71fd93 100644
--- a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
+++ b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
@@ -7,7 +7,7 @@
 		flex-direction: column;
 		flex: 1;
 		position: relative;
-		border: 1px solid $color-neutral-200;
+		border: 1px solid var(--color-neutral-200);
 		background-color: transparent;
 
 		.placeholder {
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
index 14e2a9a7..d9ee82f5 100644
--- a/src/front/Components/DesignSystem/Newsletter/index.tsx
+++ b/src/front/Components/DesignSystem/Newsletter/index.tsx
@@ -96,7 +96,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
 								<Form onSubmit={this.handleSubmit} className={classes["form"]}>
 									<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
 									<div className={classes["buttons-container"]}>
-										<Button fullwidth type="submit" variant={EButtonVariant.WHITE}>
+										<Button fullwidth type="submit" variant={EButtonVariant.PRIMARY}>
 											Envoyer
 										</Button>
 									</div>
diff --git a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
index 67a147c5..9f7aeadf 100644
--- a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
@@ -2,7 +2,7 @@
 
 .root {
 	position: relative;
-	background-color: $color-neutral-200;
+	background-color: var(--color-neutral-200);
 	box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
 	height: 12px;
 	border-radius: 5px;
@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 	transition: width 300ms;
-	background-color: $color-secondary-500;
+	background-color: var(--color-secondary-500);
 
 	.percentage {
 		width: 0;
diff --git a/src/front/Components/DesignSystem/RadioBox/classes.module.scss b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
index 3e1d0397..b0a5de0e 100644
--- a/src/front/Components/DesignSystem/RadioBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
@@ -11,7 +11,7 @@
 		background-color: transparent;
 		width: 15px;
 		height: 15px;
-		border: 1px solid $color-secondary-500;
+		border: 1px solid var(--color-secondary-500);
 		border-radius: 100px;
 		margin-right: 16px;
 		display: flex;
@@ -25,7 +25,7 @@
 		content: "";
 		width: 11px;
 		height: 11px;
-		background-color: $color-secondary-500;
+		background-color: var(--color-secondary-500);
 		border-radius: 100px;
 		transform: scale(0);
 	}
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
index a36281f1..326e7950 100644
--- a/src/front/Components/DesignSystem/SearchBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -4,15 +4,15 @@
 	display: flex;
 	align-items: center;
 	padding-left: 24px;
-	background-color: $color-generic-white;
-	border: 1px solid $color-neutral-200;
+	background-color: var(--color-generic-white);
+	border: 1px solid var(--color-neutral-200);
 	position: relative;
 
 	.fake-placeholder {
 		position: absolute;
 		left: 47px;
 		top: 24px;
-		color: $color-neutral-500;
+		color: var(--color-neutral-500);
 		pointer-events: none;
 	}
 
@@ -26,6 +26,6 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
-		color: $color-neutral-500;
+		color: var(--color-neutral-500);
 	}
 }
diff --git a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
index 8bffcf6c..ad1d786a 100644
--- a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
+++ b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	min-width: 100px;
 	max-width: 320px;
-	background: $color-generic-white;
+	background: var(--color-generic-white);
 	border-radius: 5px !important;
 	position: fixed;
 	transition: opacity 0.2s ease-in-out;
@@ -29,5 +29,5 @@
 	position: absolute;
 	right: 20px;
 	margin-top: -4px;
-	fill: $color-generic-white;
+	fill: var(--color-generic-white);
 }
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index f77acf04..dbb6bad7 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -2,7 +2,7 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $color-neutral-950;
+	color: var(--color-neutral-950);
 	vertical-align: center;
 	font-family: "Poppins", sans-serif;
 
diff --git a/src/front/Components/DesignSystem/Typography/old-classes.module.scss b/src/front/Components/DesignSystem/Typography/old-classes.module.scss
index 7596398d..da61f6ce 100644
--- a/src/front/Components/DesignSystem/Typography/old-classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/old-classes.module.scss
@@ -2,7 +2,7 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $color-generic-black;
+	color: var(--color-generic-black);
 	vertical-align: center;
 	font-family: "Inter", sans-serif;
 	&.H1-60 {
@@ -67,7 +67,7 @@
 		font-size: 18px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $color-neutral-500;
+		color: var(--color-neutral-500);
 	}
 
 	&.Paragraphe-18-error {
@@ -92,7 +92,7 @@
 		font-size: 16px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $color-neutral-500;
+		color: var(--color-neutral-500);
 	}
 
 	&.Paragraphe-simple-16 {
@@ -104,7 +104,7 @@
 	}
 
 	&.Paragraphe-16-error {
-		color: $color-error-800;
+		color: var(--color-error-800;
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
@@ -129,15 +129,15 @@
 	}
 
 	&.color-error-800 {
-		color: $color-error-800;
+		color: var(--color-error-800;
 	}
 
 	&.color-neutral-500 {
-		color: $color-neutral-500;
+		color: var(--color-neutral-500);
 	}
 
 	&.color-generic-black {
-		color: $color-generic-black;
+		color: var(--color-generic-black);
 	}
 
 	&.color-primary-500 {
@@ -161,6 +161,6 @@
 	}
 
 	&.white {
-		color: $color-generic-white;
+		color: var(--color-generic-white);
 	}
 }
diff --git a/src/front/Components/DesignSystem/UserFolder/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/classes.module.scss
index 1885438b..cc245763 100644
--- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss
+++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss
@@ -21,7 +21,7 @@
 }
 
 .root {
-	border: 1px solid $color-neutral-500;
+	border: 1px solid var(--color-neutral-500);
 	padding: 16px;
 	transition: all 350ms $custom-easing;
 
diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx
index 7d2705e2..cb1ea3bb 100644
--- a/src/front/Components/DesignSystem/UserFolder/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/index.tsx
@@ -10,7 +10,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import Button, { EButtonVariant } from "../Button";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
 import Confirm from "../Modal/Confirm";
 import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
@@ -138,7 +138,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							{!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 								<div className={classes["button-container"]}>
 									<Link href={redirectPath}>
-										<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+										<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
 											Demander des documents
 										</Button>
 									</Link>
diff --git a/src/front/Components/DesignSystem/WarningBadge/classes.module.scss b/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
index fd811cde..e64b6d25 100644
--- a/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
+++ b/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $color-warning-500;
+	background-color: var(--color-warning-500);
 	padding: 6px;
 	border-radius: 20px;
 }
diff --git a/src/front/Components/Elements/BackArrow/index.tsx b/src/front/Components/Elements/BackArrow/index.tsx
index 8e7bc0c8..d075a098 100644
--- a/src/front/Components/Elements/BackArrow/index.tsx
+++ b/src/front/Components/Elements/BackArrow/index.tsx
@@ -1,5 +1,5 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
@@ -24,7 +24,8 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
 				icon={ChevronIcon}
 				iconposition={"left"}
 				iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-				variant={EButtonVariant.LINE}
+				variant={EButtonVariant.PRIMARY}
+				styleType={EButtonStyleType.TEXT}
 				onClick={this.handleClick}>
 				Retour
 			</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
index ca531f0b..26cbc385 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,8 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
index 130e237e..d7ebc0e8 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -71,7 +71,8 @@ export default class DefaultDeedTypesDashboard extends React.Component<IProps, I
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
index 377ed3ef..c5b976a5 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,8 @@ export default class DefaultDocumentTypesDashboard extends React.Component<IProp
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
index 4fd445e3..c8a0fee7 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
@@ -88,7 +88,8 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
index 37bb5770..3344e843 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,8 @@ export default class DefaultOfficeDashboard extends React.Component<IProps, ISta
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
index bfcc6ff8..9b23977b 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200) solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
index a50ac12e..55183c54 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,8 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
index bfcc6ff8..356d936e 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
@@ -27,7 +27,7 @@
 		}
 
 		.left-side {
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $color-generic-white;
+			background-color: var(--color-generic-white);
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $color-neutral-200 solid;
+			border-right: 1px var(--color-neutral-200 solid);
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
index 0b32d8ca..bf3f4509 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,8 @@ export default class DefaultUserDashboard extends React.Component<IProps, IState
 									icon={ChevronIcon}
 									iconposition={"left"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>
diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx
index 4430a6ec..4aaedf31 100644
--- a/src/front/Components/Layouts/ClientDashboard/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@@ -178,6 +178,11 @@ export default function ClientDashboard(props: IProps) {
 			</div>
 		);
 	}, [
+		contact?.cell_phone_number,
+		contact?.email,
+		contact?.first_name,
+		contact?.last_name,
+		contact?.phone_number,
 		customer?.contact?.first_name,
 		customer?.contact?.last_name,
 		downloadFile,
@@ -185,6 +190,7 @@ export default function ClientDashboard(props: IProps) {
 		folder?.name,
 		folder?.office?.name,
 		folder?.office?.rib_name,
+		note?.content,
 	]);
 
 	const renderBox = useCallback(() => {
@@ -217,7 +223,11 @@ export default function ClientDashboard(props: IProps) {
 					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Vous souhaitez envoyer d'autres documents à votre notaire ?
 					</Typography>
-					<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={onOpenModalAddDocument}>
+					<Button
+						variant={EButtonVariant.PRIMARY}
+						styleType={EButtonStyleType.OUTLINED}
+						className={classes["button"]}
+						onClick={onOpenModalAddDocument}>
 						Ajouter d'autres documents
 					</Button>
 				</div>
diff --git a/src/front/Components/Layouts/ClientDashboard/index2.tsx b/src/front/Components/Layouts/ClientDashboard/index2.tsx
index 5ac5414c..0976756c 100644
--- a/src/front/Components/Layouts/ClientDashboard/index2.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index2.tsx
@@ -1,5 +1,5 @@
 //import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -45,7 +45,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
 						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Vous souhaitez envoyer d'autres documents à votre notaire ?
 						</Typography>
-						<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.OUTLINED}
+							className={classes["button"]}
+							onClick={this.onOpenModalAddDocument}>
 							Ajouter d'autres documents
 						</Button>
 					</div>
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index 41cf6212..ff841cc7 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
@@ -197,7 +197,8 @@ export default function CollaboratorInformations(props: IProps) {
 									icon={ChevronIcon}
 									iconposition={"right"}
 									iconstyle={{ width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}>
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}>
 									Gestion des rôles
 								</Button>
 							</Link>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
index 016a76a1..50b580c8 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -101,7 +101,7 @@ export default function DeedTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Créer le type d'acte</Button>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
index 09e17c6c..1bd4c6a6 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -119,7 +119,7 @@ export default function DeedTypesEdit() {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Enregistrer</Button>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
index 41f8331c..d39d5741 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PenICon from "@Assets/Icons/pen.svg";
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -123,7 +123,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["header"]}>
 					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
-						<Button variant={EButtonVariant.LINE}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 							Modifier la liste des documents
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>
@@ -174,7 +174,7 @@ export default function DeedTypesInformations(props: IProps) {
 					</Form>
 				</div>
 				<div className={classes["delete-container"]}>
-					<Button variant={EButtonVariant.GHOST} onClick={openDeleteModal}>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={openDeleteModal}>
 						Supprimer
 					</Button>
 				</div>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
index 7271a660..e724624d 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -71,7 +71,9 @@ export default function DocumentTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+							Annuler
+						</Button>
 						<Button type="submit">Créer le document</Button>
 					</div>
 				</Form>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
index b3958e6f..72fef6a0 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -91,7 +91,9 @@ export default function DocumentTypesEdit() {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+							Annuler
+						</Button>
 						<Button type="submit">Enregistrer</Button>
 					</div>
 				</Form>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
index 9f055668..ac80069e 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 
 export default function DocumentTypesInformations() {
 	const router = useRouter();
@@ -38,7 +38,7 @@ export default function DocumentTypesInformations() {
 				<div className={classes["header"]}>
 					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
-						<Button variant={EButtonVariant.LINE}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
 							Retour au paramétrage des types d'actes
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index cead18f7..70b5be53 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -1,6 +1,6 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -99,7 +99,9 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+													Annuler
+												</Button>
 											</Link>
 											<Button type="submit">Associer au dossier</Button>
 										</div>
@@ -132,7 +134,9 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+													Annuler
+												</Button>
 											</Link>
 											<Button type="submit">Associer au dossier</Button>
 										</div>
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
index e48e6e95..9eb75762 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@@ -1,7 +1,7 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
@@ -78,14 +78,15 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 									icon={PlusIcon}
 									iconposition={"right"}
 									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
-									variant={EButtonVariant.LINE}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
 									onClick={this.openModal}>
 									Ajouter un document
 								</Button>
 							</div>
 							<div className={classes["buttons-container"]}>
 								<a href={backUrl}>
-									<Button variant={EButtonVariant.GHOST} onClick={this.cancel}>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.cancel}>
 										Annuler
 									</Button>
 								</a>
diff --git a/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx b/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
index b9c032c9..f15fbc8b 100644
--- a/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
@@ -1,4 +1,4 @@
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@@ -63,7 +63,9 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									Annuler
+								</Button>
 							</Link>
 							<Button type="submit">Enregistrer</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index e4e9910c..ad25b95f 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -1,5 +1,5 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@@ -41,7 +41,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
 									Ajouter un client
 								</Button>
 							</Link>
@@ -56,7 +56,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
 									Ajouter un client
 								</Button>
 							</Link>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 586e0699..3f5cc6a7 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -1,7 +1,7 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -96,7 +96,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
@@ -140,7 +140,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								)}
 
 								<div className={classes["button-container"]}>
-									<Button variant={EButtonVariant.GHOST} onClick={this.openArchivedModal}>
+									<Button
+										variant={EButtonVariant.PRIMARY}
+										styleType={EButtonStyleType.OUTLINED}
+										onClick={this.openArchivedModal}>
 										Archiver le dossier
 									</Button>
 									{this.everyDocumentValidated() && !this.props.isLoading && (
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
index a9bb53d1..67ec9a1a 100644
--- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
@@ -1,5 +1,5 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, 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";
@@ -130,10 +130,16 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 						<div className={classes["button-container"]}>
 							{!this.doesInputsHaveValues() ? (
 								<Link href={this.backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+										Annuler
+									</Button>
 								</Link>
 							) : (
-								<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}>
+								<Button
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.OUTLINED}
+									onClick={this.openLeavingModal}
+									className={classes["cancel-button"]}>
 									Annuler
 								</Button>
 							)}
diff --git a/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx b/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
index 86d19c6a..308c1ad4 100644
--- a/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
@@ -1,4 +1,4 @@
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@@ -53,7 +53,9 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.state.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									Annuler
+								</Button>
 							</Link>
 							<Button type="submit">Enregistrer</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
index 7fee6ded..6ad395bb 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
@@ -1,6 +1,6 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -105,7 +105,9 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 							<div className={classes["button-container"]}>
 								<Link href={backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+										Annuler
+									</Button>
 								</Link>
 								<Button type="submit">Enregistrer</Button>
 							</div>
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
index e68e01de..e3273c6b 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
@@ -1,5 +1,5 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
@@ -54,7 +54,9 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									Annuler
+								</Button>
 							</Link>
 							<Button type="submit">Enregistrer</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
index 222c4896..9c5b7143 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
@@ -1,5 +1,5 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -77,7 +77,9 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									Annuler
+								</Button>
 							</Link>
 							<Button type="submit">Enregistrer</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index f8faff65..883e231f 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -1,7 +1,7 @@
 import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
 import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -117,7 +117,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["buttons-container"]}>
 								{this.state.document?.document_status === EDocumentStatus.DEPOSITED && (
 									<>
-										<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
+										<Button
+											variant={EButtonVariant.PRIMARY}
+											styleType={EButtonStyleType.OUTLINED}
+											onClick={this.openRefuseModal}>
 											Refuser
 										</Button>
 										<Button onClick={this.openValidateModal}>Valider</Button>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
index 8396e6e3..1084d02b 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -66,7 +66,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
+											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={ChevronIcon}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
@@ -115,7 +115,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								)}
 
 								<div className={classes["button-container"]}>
-									<Button variant={EButtonVariant.GHOST} onClick={this.restoreFolder}>
+									<Button
+										variant={EButtonVariant.PRIMARY}
+										styleType={EButtonStyleType.OUTLINED}
+										onClick={this.restoreFolder}>
 										Restaurer le dossier
 									</Button>
 									{this.props.isAnchored === AnchorStatus.VERIFIED_ON_CHAIN && (
diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
index d253528e..fbe9eb9d 100644
--- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
@@ -1,4 +1,4 @@
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -62,7 +62,9 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									Annuler
+								</Button>
 							</Link>
 							<Button type="submit">Enregistrer</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx
index 81f9fd8a..168b35c4 100644
--- a/src/front/Components/Layouts/Login/index.tsx
+++ b/src/front/Components/Layouts/Login/index.tsx
@@ -1,6 +1,6 @@
 import CoffreIcon from "@Assets/Icons/coffre.svg";
 import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
@@ -65,7 +65,9 @@ export default function Login() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						Contacter l'administrateur
+					</Button>
 				</Link>
 			</div>
 			<Confirm
diff --git a/src/front/Components/Layouts/LoginCallback/index.tsx b/src/front/Components/Layouts/LoginCallback/index.tsx
index 8525e647..5ff99e5e 100644
--- a/src/front/Components/Layouts/LoginCallback/index.tsx
+++ b/src/front/Components/Layouts/LoginCallback/index.tsx
@@ -8,7 +8,7 @@ import Module from "@Front/Config/Module";
 import Auth from "@Front/Api/Auth/IdNot";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import UserStore from "@Front/Stores/UserStore";
 import Link from "next/link";
@@ -73,7 +73,9 @@ export default function LoginCallBack() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						Contacter l'administrateur
+					</Button>
 				</Link>
 			</div>
 		</DefaultDoubleSidePage>
diff --git a/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx b/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
index 2975bb26..3f78ca9d 100644
--- a/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
+++ b/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
@@ -6,7 +6,7 @@ import React, { useEffect } from "react";
 import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers";
 import CustomerStore from "@Front/Stores/CustomerStore";
@@ -59,7 +59,9 @@ export default function LoginCallBackCustomer() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						Contacter l'administrateur
+					</Button>
 				</Link>
 			</div>
 		</DefaultDoubleSidePage>
diff --git a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
index a73b00bf..f01e5937 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
@@ -57,7 +57,7 @@ export default function StepEmail(props: IProps) {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>Contacter l'administrateur</Button>
 				</Link> */}
 		</div>
 	);
diff --git a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
index 4b4355be..97170cba 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@@ -55,7 +55,8 @@ export default function StepTotp(props: IProps) {
 			<div className={classes["ask-another-code"]}>
 				<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
 				<Button
-					variant={EButtonVariant.LINE}
+					variant={EButtonVariant.PRIMARY}
+					styleType={EButtonStyleType.TEXT}
 					disabled={disableNewCodeButton}
 					data-disabled={disableNewCodeButton.toString()}
 					onClick={sendAnotherCode}
diff --git a/src/front/Components/Layouts/LoginHome/index.tsx b/src/front/Components/Layouts/LoginHome/index.tsx
index dfc32379..8f363508 100644
--- a/src/front/Components/Layouts/LoginHome/index.tsx
+++ b/src/front/Components/Layouts/LoginHome/index.tsx
@@ -3,7 +3,7 @@ import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoub
 
 import classes from "./classes.module.scss";
 import LandingImage from "../Login/landing-connect.jpeg";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 
@@ -38,7 +38,9 @@ export default function LoginHome() {
 						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 					</Typography>
 					<Link href="mailto:support@lecoffre.io">
-						<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+							Contacter l'administrateur
+						</Button>
 					</Link>
 				</div>
 			</div>
diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx
index 0941c56b..9f887f64 100644
--- a/src/front/Components/Layouts/Rib/index.tsx
+++ b/src/front/Components/Layouts/Rib/index.tsx
@@ -3,7 +3,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
@@ -133,7 +133,7 @@ export default function Rib() {
 								<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
 									Supprimer
 								</Button>
-								<Button onClick={openRibModal} variant={EButtonVariant.GHOST}>
+								<Button onClick={openRibModal} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 									Modifier
 								</Button>
 								<Button onClick={downloadFile}>Télécharger</Button>
diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
index 3b0880f9..c7dd8847 100644
--- a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
+++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
@@ -1,5 +1,5 @@
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, 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";
@@ -100,7 +100,7 @@ export default function RolesCreate(props: IProps) {
 							validationError={validationError.find((error) => error.property === "name")}
 						/>
 						<div className={classes["buttons-container"]}>
-							<Button variant={EButtonVariant.GHOST} onClick={onCancel}>
+							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
 								Annuler
 							</Button>
 							<Button type="submit">Créer le rôle</Button>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
index 7fcc1613..c60b33d3 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
@@ -6,7 +6,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -135,7 +135,7 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonVariant.LINE} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
index 94dd619c..316155c8 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
@@ -7,7 +7,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -130,7 +130,7 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonVariant.LINE} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>
diff --git a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
index a1456bd7..abd591ed 100644
--- a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Form from "@Front/Components/DesignSystem/Form";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import React, { useCallback, useEffect, useState } from "react";
 import User, { Subscription } from "le-coffre-resources/dist/Admin";
 import JwtService, { IUserJwtPayload } from "@Front/Services/JwtService/JwtService";
@@ -116,7 +116,12 @@ export default function SubscriptionManageCollaborators() {
 							<Button type="submit" variant={EButtonVariant.PRIMARY} fullwidth>
 								Enregistrer
 							</Button>
-							<Button variant={EButtonVariant.GHOST} fullwidth onClick={cancelAll} type="button">
+							<Button
+								variant={EButtonVariant.PRIMARY}
+								styleType={EButtonStyleType.OUTLINED}
+								fullwidth
+								onClick={cancelAll}
+								type="button">
 								Annuler
 							</Button>
 						</div>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
index cbcecbfb..f320d7cd 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
@@ -1,7 +1,7 @@
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -150,7 +150,11 @@ export default function SubscriptionFacturation() {
 								{subscription.type === "UNLIMITED" && (
 									// <Link
 									// 	href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Standard.props.path}>
-									<Button onClick={manageSubscription} fullwidth variant={EButtonVariant.GHOST}>
+									<Button
+										onClick={manageSubscription}
+										fullwidth
+										variant={EButtonVariant.PRIMARY}
+										styleType={EButtonStyleType.OUTLINED}>
 										Rétrograder mon abonnement
 									</Button>
 									// </Link>
@@ -169,7 +173,7 @@ export default function SubscriptionFacturation() {
 											href={
 												Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
 											}>
-											<Button fullwidth variant={EButtonVariant.GHOST}>
+											<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
 												Gérer mes attributions
 											</Button>
 										</Link>
@@ -226,7 +230,11 @@ export default function SubscriptionFacturation() {
 								{subscription.type === "STANDARD" && (
 									// <Link
 									// 	href={Module.getInstance().get().modules.pages.Subscription.pages.Manage.pages.Illimity.props.path}>
-									<Button onClick={manageSubscription} fullwidth variant={EButtonVariant.GHOST}>
+									<Button
+										onClick={manageSubscription}
+										fullwidth
+										variant={EButtonVariant.PRIMARY}
+										styleType={EButtonStyleType.OUTLINED}>
 										Améliorer mon abonnement
 									</Button>
 									// </Link>
@@ -235,7 +243,7 @@ export default function SubscriptionFacturation() {
 						</div>
 					</div>
 					<div className={classes["actions-container"]}>
-						<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
+						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
 								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
index 535af14c..775cbdd3 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import { useRouter } from "next/router";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
 import { useCallback, useState } from "react";
@@ -108,7 +108,11 @@ export default function SubscriptionInvite() {
 						))}
 						{isNaN(nbOfCollaborators) && (
 							<div className={classes["add-line-container"]}>
-								<Button onClick={addLine} variant={EButtonVariant.LINE} icon={PlusIcon}>
+								<Button
+									onClick={addLine}
+									variant={EButtonVariant.PRIMARY}
+									styleType={EButtonStyleType.TEXT}
+									icon={PlusIcon}>
 									Ajouter une adresse email
 								</Button>
 							</div>