diff --git a/package-lock.json b/package-lock.json
index 59e4c5e7..e2832b48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -162,9 +162,9 @@
 			}
 		},
 		"node_modules/@babel/runtime": {
-			"version": "7.24.1",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
-			"integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
+			"version": "7.24.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+			"integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
 			"dependencies": {
 				"regenerator-runtime": "^0.14.0"
 			},
@@ -474,23 +474,23 @@
 			}
 		},
 		"node_modules/@mui/core-downloads-tracker": {
-			"version": "5.15.14",
-			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz",
-			"integrity": "sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==",
+			"version": "5.15.15",
+			"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
+			"integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/mui-org"
 			}
 		},
 		"node_modules/@mui/material": {
-			"version": "5.15.14",
-			"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",
-			"integrity": "sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==",
+			"version": "5.15.15",
+			"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
+			"integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"@mui/base": "5.0.0-beta.40",
-				"@mui/core-downloads-tracker": "^5.15.14",
-				"@mui/system": "^5.15.14",
+				"@mui/core-downloads-tracker": "^5.15.15",
+				"@mui/system": "^5.15.15",
 				"@mui/types": "^7.2.14",
 				"@mui/utils": "^5.15.14",
 				"@types/react-transition-group": "^4.4.10",
@@ -584,9 +584,9 @@
 			}
 		},
 		"node_modules/@mui/system": {
-			"version": "5.15.14",
-			"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz",
-			"integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==",
+			"version": "5.15.15",
+			"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+			"integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
 			"dependencies": {
 				"@babel/runtime": "^7.23.9",
 				"@mui/private-theming": "^5.15.14",
@@ -1391,13 +1391,12 @@
 			"optional": true
 		},
 		"node_modules/bare-fs": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.2.tgz",
-			"integrity": "sha512-X9IqgvyB0/VA5OZJyb5ZstoN62AzD7YxVGog13kkfYWYqJYcK0kcqLZ6TrmH5qr4/8//ejVcX4x/a0UvaogXmA==",
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.3.tgz",
+			"integrity": "sha512-amG72llr9pstfXOBOHve1WjiuKKAMnebcmMbPWDZ7BCevAoJLpugjuAPRsDINEyjT0a6tbaVx3DctkXIRbLuJw==",
 			"optional": true,
 			"dependencies": {
 				"bare-events": "^2.0.0",
-				"bare-os": "^2.0.0",
 				"bare-path": "^2.0.0",
 				"streamx": "^2.13.0"
 			}
@@ -4481,9 +4480,9 @@
 			}
 		},
 		"node_modules/sass": {
-			"version": "1.72.0",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
-			"integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+			"version": "1.74.1",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz",
+			"integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==",
 			"dependencies": {
 				"chokidar": ">=3.0.0 <4.0.0",
 				"immutable": "^4.0.0",
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionInvite/classes.module.scss
new file mode 100644
index 00000000..14c07ee3
--- /dev/null
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/classes.module.scss
@@ -0,0 +1,23 @@
+.root {
+	max-width: 1400px;
+	margin: auto;
+
+	.container {
+		display: flex;
+		text-align: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 32px;
+
+		.emails-form {
+			display: flex;
+			flex-direction: column;
+			gap: 32px;
+
+			.button-container {
+				display: flex;
+				justify-content: center;
+			}
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
new file mode 100644
index 00000000..aec39557
--- /dev/null
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
@@ -0,0 +1,56 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+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 from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+
+export enum EForfeitType {
+	"standard",
+	"unlimited",
+}
+export default function SubscriptionInvite() {
+	const router = useRouter();
+	const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);
+
+	const sendInvitations = (e: React.FormEvent<HTMLFormElement> | null) => {
+		if (!e) return;
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+		const emails: string[] = [];
+		Object.keys(form.elements).forEach((key) => {
+			if (isNaN(parseInt(key))) return;
+			const element = form.elements[key as any] as HTMLInputElement;
+			if (element.name.includes("email_")) {
+				emails.push(element.value);
+			}
+		});
+
+		console.log(emails);
+	};
+	return (
+		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
+			<div className={classes["root"]}>
+				<div className={classes["container"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+						Inviter vos collaborateurs
+					</Typography>
+					{nbOfCollaborators && (
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							{nbOfCollaborators} collaborateurs à inviter
+						</Typography>
+					)}
+					<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
+						{Array.from({ length: nbOfCollaborators }).map((_, index) => {
+							return <TextField key={index} placeholder="Email" name={"email_" + index} />;
+						})}
+						<div className={classes["button-container"]}>
+							<Button type="submit">Envoyer l'invitation</Button>
+						</div>
+					</Form>
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}
diff --git a/src/pages/subscription/invite/index.tsx b/src/pages/subscription/invite/index.tsx
new file mode 100644
index 00000000..7034f54b
--- /dev/null
+++ b/src/pages/subscription/invite/index.tsx
@@ -0,0 +1,5 @@
+import SubscriptionInvite from "@Front/Components/Layouts/Subscription/SubscriptionInvite";
+
+export default function Route() {
+	return <SubscriptionInvite />;
+}