diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index a54155c2..fe87dc62 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -4,11 +4,9 @@
 	display: inline-flex;
 	justify-content: center;
 	border: 1px solid;
-	gap: 12px;
 	box-sizing: border-box;
 	height: fit-content;
 	align-items: center;
-	gap: 6px;
 	background: transparent;
 	font-style: normal;
 	font-weight: 500;
@@ -22,59 +20,137 @@
 		height: 18px;
 	}
 
+	/**
+	 * Every possible variants
+	*/
+
 	&[variant="primary"] {
-		color: var(--color-generic-white);
-		background-color: var(--color-primary-500);
+		color: var(--color-primary-500);
+		background: var(--color-primary-500);
 		border-color: var(--color-primary-500);
-		padding: 24px 48px;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
 
 		&:hover {
+			background: var(--color-primary-700);
 			border-color: var(--color-primary-700);
-			background-color: var(--color-primary-700);
 		}
 
-		&:disabled {
-			border-color: var(--color-primary-500-soft);
-			background-color: var(--color-primary-500-soft);
-			pointer-events: none;
+		&:focus,
+		&:active {
+			background: var(--color-primary-800);
+			border-color: var(--color-primary-800);
+		}
+
+		&[styleType="outlined"] {
+			color: var(--color-primary-500);
+			border-color: var(--color-primary-500);
+
+			&:hover {
+				background-color: var(--color-primary-50);
+			}
+
+			&:focus,
+			&:active {
+				background-color: var(--color-primary-100);
+				color: var(--color-primary-700);
+				border-color: var(--color-primary-700);
+			}
+		}
+
+		&[styleType="text"] {
+			color: var(--color-primary-500);
+			border-color: var(--color-primary-500);
+
+			&:hover {
+				background-color: transparent;
+			}
+
+			&:focus,
+			&:active {
+				background-color: transparent;
+				color: var(--color-primary-800);
+				border-color: var(--color-primary-800);
+			}
 		}
 	}
 
 	&[variant="secondary"] {
-		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: var(--color-error-800);
-			background-color: var(--color-error-800);
-		}
-
-		&:disabled {
-			border-color: var(--color-error-600-soft);
-			background-color: var(--color-error-600-soft);
-			pointer-events: none;
-		}
-	}
-
-	&[variant="line"] {
 		color: var(--color-secondary-500);
-		background-color: transparent;
-		border-color: transparent;
-		padding: 0;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-		text-decoration-line: underline;
+		background: var(--color-secondary-500);
+		border-color: var(--color-secondary-500);
 	}
 
+	&[variant="neutral"] {
+		color: var(--color-neutral-500);
+		background: var(--color-neutral-500);
+		border-color: var(--color-neutral-500);
+	}
+
+	&[variant="error"] {
+		color: var(--color-error-600);
+		background: var(--color-error-600);
+		border-color: var(--color-error-600);
+	}
+
+	&[variant="warning"] {
+		color: var(--color-warning-600);
+		background: var(--color-warning-600);
+		border-color: var(--color-warning-600);
+	}
+
+	&[variant="success"] {
+		color: var(--color-success-600);
+		background: var(--color-success-600);
+		border-color: var(--color-success-600);
+	}
+
+	&[variant="info"] {
+		color: var(--color-info-700);
+		background: var(--color-info-700);
+		border-color: var(--color-info-700);
+	}
+
+	/**
+	 * Every possible sizes
+	*/
+
+	&[sizing="sm"] {
+		padding: var(--spacing-0-5) var(--spacing-1-5);
+		gap: var(--spacing-0-75);
+		font-size: 14px;
+	}
+
+	&[sizing="md"] {
+		padding: var(--spacing-1) var(--spacing-2);
+		gap: var(--spacing-0-75);
+		font-size: 16px;
+	}
+
+	&[sizing="lg"] {
+		padding: var(--spacing-2) var(--spacing-3);
+		gap: var(--spacing-1-5);
+		font-size: 16px;
+	}
+
+	/**
+	 * Every possible style types
+	*/
+	&[styleType="contained"] {
+		color: var(--color-generic-white);
+	}
+
+	&[styleType="outlined"] {
+		background: transparent;
+	}
+
+	&[styleType="text"] {
+		background: transparent;
+		border: none;
+		border-bottom: 1px solid;
+	}
+
+	/**
+	 * Every possible states
+	*/
 	&[fullwidthattr="true"] {
 		width: 100%;
 		flex: 1;
@@ -87,4 +163,8 @@
 	&[touppercase="false"] {
 		text-transform: inherit;
 	}
+
+	&[disabled="true"] {
+		opacity: var(--opacity-disabled, 0.3);
+	}
 }
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index e6da6291..4c2e7baa 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -45,7 +45,7 @@ type IProps = {
 export default function Button(props: IProps) {
 	let {
 		variant = EButtonVariant.PRIMARY,
-		size = EButtonSize.MD,
+		size = EButtonSize.LG,
 		styleType = EButtonStyleType.CONTAINED,
 		disabled = false,
 		type = "button",
@@ -62,7 +62,7 @@ export default function Button(props: IProps) {
 	const fullwidthattr = fullwidth.toString();
 	const isloadingattr = isLoading.toString();
 
-	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, size, styleType };
+	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
 	delete attributes.fullwidth;
 	delete attributes.icon;
 	delete attributes.iconstyle;