diff --git a/package-lock.json b/package-lock.json
index b1029407..21f2e5ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
 				"react-toastify": "^9.1.3",
 				"sass": "^1.59.2",
 				"sharp": "^0.32.1",
+				"ts-pattern": "^5.1.1",
 				"typescript": "4.9.5",
 				"uuidv4": "^6.2.13"
 			}
@@ -4910,6 +4911,11 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/ts-pattern": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.1.1.tgz",
+			"integrity": "sha512-i+owkHr5RYdQxj8olUgRrqpiWH9x27PuWVfXwDmJ/n/CoF/SAa7WW1i2oUpPDMQpJ4U+bGRUcZkVq7i1m3zFCg=="
+		},
 		"node_modules/tsconfig-paths": {
 			"version": "3.15.0",
 			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
diff --git a/package.json b/package.json
index e1bfc963..2eae3016 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
 		"react-toastify": "^9.1.3",
 		"sass": "^1.59.2",
 		"sharp": "^0.32.1",
+		"ts-pattern": "^5.1.1",
 		"typescript": "4.9.5",
 		"uuidv4": "^6.2.13"
 	}
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/classes.module.scss b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/classes.module.scss
index f9ced6e5..649b6582 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/classes.module.scss
@@ -46,6 +46,10 @@
 				.line-sub-container {
 					display: flex;
 					flex-direction: column;
+
+					.stroked-price {
+						text-decoration: line-through;
+					}
 				}
 			}
 		}
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
index 18352aff..fc52e0c7 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
@@ -8,6 +8,7 @@ import classnames from "classnames";
 import { EType } from "le-coffre-resources/dist/Admin/Subscription";
 import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
 import { useRouter } from "next/router";
+import * as P from "ts-pattern";
 
 type IProps = {
 	forfeitType: EForfeitType;
@@ -27,11 +28,26 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 	const { forfeitType, numberOfCollaborators, hasNavTab = true } = props;
 	const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(props.defaultFrequency ?? EPaymentFrequency.monthly);
 	const [multiplier, setMultiplier] = useState<number>(1);
+	const [totalPlan, setTotalPlan] = useState<number>(0);
+	const [totalCollaborator, setTotalCollaborator] = useState<number>(0);
 
 	useEffect(() => {
 		setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
 	}, [paymentFrequency]);
 
+	useEffect(() => {
+		let multiplierToUse = paymentFrequency === EPaymentFrequency.yearly ? multiplier - 1 : multiplier;
+		P.match(forfeitType)
+			.with(EForfeitType.standard, () => {
+				setTotalPlan(forfeitsPrices[EForfeitType.standard] * multiplierToUse);
+				setTotalCollaborator(collaboratorPrice * numberOfCollaborators * multiplier);
+			})
+			.with(EForfeitType.unlimited, () => {
+				setTotalPlan(forfeitsPrices[EForfeitType.unlimited] * multiplierToUse);
+				setTotalCollaborator(0);
+			});
+	}, [multiplier, forfeitType, numberOfCollaborators, paymentFrequency]);
+
 	const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
 	};
@@ -91,17 +107,24 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 									{forfeitType === EForfeitType.standard
 										? forfeitsPrices[EForfeitType.standard]
 										: forfeitsPrices[EForfeitType.unlimited]}
-									&nbsp;€ x 12
+									&nbsp;€ x 11
 								</Typography>
 							)}
 						</div>
 
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-							{forfeitType === EForfeitType.standard
-								? forfeitsPrices[EForfeitType.standard] * multiplier
-								: forfeitsPrices[EForfeitType.unlimited] * multiplier}
-							€
-						</Typography>
+						<div className={classes["line-sub-container"]}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								{totalPlan}&nbsp;€
+							</Typography>
+							{paymentFrequency === EPaymentFrequency.yearly && (
+								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["stroked-price"]}>
+									{forfeitType === EForfeitType.standard
+										? forfeitsPrices[EForfeitType.standard] * multiplier
+										: forfeitsPrices[EForfeitType.unlimited] * multiplier}
+									&nbsp;€
+								</Typography>
+							)}
+						</div>
 					</div>
 					{forfeitType === EForfeitType.standard && (
 						<div className={classes["line"]}>
@@ -110,11 +133,12 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 									{numberOfCollaborators} collaborateurs
 								</Typography>
 								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
-									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}
+									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
+									{paymentFrequency === EPaymentFrequency.yearly && "x 12"}
 								</Typography>
 							</div>
 							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-								{formatFloat(collaboratorPrice * numberOfCollaborators * multiplier)}&nbsp;€
+								{formatFloat(totalCollaborator)}&nbsp;€
 							</Typography>
 						</div>
 					)}
@@ -128,9 +152,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 									Total HT
 								</Typography>
 								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-									{formatFloat(
-										(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * multiplier,
-									)}
+									{formatFloat(totalCollaborator + totalPlan)}
 									&nbsp;€
 								</Typography>
 							</div>
@@ -139,11 +161,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 									TVA 20%
 								</Typography>
 								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-									{formatFloat(
-										(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) *
-											0.2 *
-											multiplier,
-									)}
+									{formatFloat((totalCollaborator + totalPlan) * 0.2)}
 									&nbsp;€
 								</Typography>
 							</div>
@@ -158,7 +176,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 								TVA 20%
 							</Typography>
 							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-								{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 0.2 * multiplier)}&nbsp;€
+								{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
 							</Typography>
 						</div>
 					)}
@@ -166,20 +184,10 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
 							Total TTC
 						</Typography>
-						{forfeitType === EForfeitType.standard && (
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-								{formatFloat(
-									(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * 1.2 * multiplier,
-								)}
-								&nbsp;€
-							</Typography>
-						)}
-						{forfeitType === EForfeitType.unlimited && (
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
-								{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplier)}
-								&nbsp;€
-							</Typography>
-						)}
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							{formatFloat((totalCollaborator + totalPlan) * 1.2)}
+							&nbsp;€
+						</Typography>
 					</div>
 				</div>
 				{!props.disableInputs && (