diff --git a/src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts b/src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts
new file mode 100644
index 00000000..ec7a4d1b
--- /dev/null
+++ b/src/front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp.ts
@@ -0,0 +1,35 @@
+import BaseNotary from "../BaseNotary";
+
+// export interface IPostMailchimpParams {
+// 	email: string;
+// }
+
+export default class Mailchimp extends BaseNotary {
+	private static instance: Mailchimp;
+	private readonly baseURl = this.namespaceUrl.concat("/mailchimp");
+
+	private constructor() {
+		super();
+	}
+
+	public static getInstance() {
+		if (!this.instance) {
+			return new this();
+		} else {
+			return this.instance;
+		}
+	}
+
+	/**
+	 * @description : Add to mail list
+	 */
+	public async post(body: any) {
+		const url = new URL(this.baseURl);
+		try {
+			return await this.postRequest(url, body);
+		} catch (err) {
+			this.onError(err);
+			return Promise.reject(err);
+		}
+	}
+}
diff --git a/src/front/Assets/Icons/mail.svg b/src/front/Assets/Icons/mail.svg
new file mode 100644
index 00000000..61fc88c6
--- /dev/null
+++ b/src/front/Assets/Icons/mail.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.75 3.75V14.25C20.75 15.4926 19.7426 16.5 18.5 16.5H3.5C2.25736 16.5 1.25 15.4926 1.25 14.25V3.75M20.75 3.75C20.75 2.50736 19.7426 1.5 18.5 1.5H3.5C2.25736 1.5 1.25 2.50736 1.25 3.75M20.75 3.75V3.99271C20.75 4.77405 20.3447 5.49945 19.6792 5.90894L12.1792 10.5243C11.4561 10.9694 10.5439 10.9694 9.82078 10.5243L2.32078 5.90894C1.65535 5.49945 1.25 4.77405 1.25 3.99271V3.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index 1b7192e5..bc86a437 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -91,6 +91,33 @@
 		}
 	}
 
+	&[variant="white"] {
+		color: $pink-flash;
+		background-color: white;
+		border-color: $pink-flash;
+		padding: 24px 48px;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+
+		svg {
+			path {
+				stroke: $white;
+			}
+		}
+
+		&:hover {
+			border-color: $pink-hover;
+			color: $pink-hover;
+		}
+
+		&:disabled {
+			border-color: $pink-soft;
+			background-color: $pink-soft;
+			pointer-events: none;
+		}
+	}
+
 	&[fullwidthattr="true"] {
 		width: 100%;
 		flex: 1;
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index a9b28008..258a3d63 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -9,6 +9,7 @@ export enum EButtonVariant {
 	SECONDARY = "secondary",
 	GHOST = "ghost",
 	LINE = "line",
+	WHITE = "white",
 }
 
 type IProps = {
diff --git a/src/front/Components/DesignSystem/Newsletter/classes.module.scss b/src/front/Components/DesignSystem/Newsletter/classes.module.scss
new file mode 100644
index 00000000..3800eef5
--- /dev/null
+++ b/src/front/Components/DesignSystem/Newsletter/classes.module.scss
@@ -0,0 +1,38 @@
+.container {
+	padding: 4px;
+	background-color: #320756; // Adjusted to match the background color in the image
+	border-radius: 10px;
+	max-width: 504px;
+	margin: auto;
+	text-align: left;
+	position: absolute;
+	bottom: 114px;
+	right: 48px;
+
+	.root {
+		margin: 44px;
+		background-color: #320756;
+		height: fit-content;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.text {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		.form {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		.buttons {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+	}
+}
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
new file mode 100644
index 00000000..9d8b4483
--- /dev/null
+++ b/src/front/Components/DesignSystem/Newsletter/index.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import TextField from "../Form/TextField";
+import Button, { EButtonVariant } from "../Button";
+import Typography, { ITypo, ITypoColor } from "../Typography";
+import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
+import Form from "../Form";
+
+type IProps = {};
+
+interface IState {
+	email: string;
+	errorMessage: string;
+	successMessage: string;
+}
+
+export default class Newsletter extends React.Component<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			email: "",
+			errorMessage: "",
+			successMessage: "",
+		};
+	}
+
+	handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+		this.setState({ email: e.target.value });
+	};
+
+	handleSubmit = async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
+		if (!e) return;
+		e.preventDefault();
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(this.state.email)) {
+			this.setState({ errorMessage: "Invalid email address", successMessage: "" });
+			return;
+		}
+
+		Mailchimp.getInstance().post({ email: this.state.email });
+		// Clear error message
+		this.setState({ errorMessage: "" });
+
+		// Normally, form submission would happen here
+		// For demo purposes, we'll just show a success message
+		this.setState({ successMessage: "Subscription successful!", email: "" });
+	};
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["container"]}>
+				<div className={classes["root"]}>
+					<div className={classes["text"]}>
+						<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
+							Restez Informé(e) avec notre Newsletter
+						</Typography>
+						<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
+							Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
+						</Typography>
+						{this.state.errorMessage && (
+							<div>
+								<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
+									{this.state.errorMessage}
+								</Typography>
+							</div>
+						)}
+						{this.state.successMessage && (
+							<div>
+								<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
+									{this.state.successMessage}
+								</Typography>
+							</div>
+						)}
+					</div>
+
+					<div className={classes["buttons"]}>
+						<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}>
+									Envoyer
+								</Button>
+							</div>
+						</Form>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index 35ad1b15..e3b047b2 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -159,4 +159,8 @@
 	&.orange-flash {
 		color: var(--orange-flash);
 	}
+
+	&.white {
+		color: $white;
+	}
 }
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 0e812ac4..1cc80368 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -41,6 +41,7 @@ export enum ITypoColor {
 	GREEN_FLASH = "green-flash",
 	ORANGE_FLASH = "orange-flash",
 	RED_FLASH = "red-flash",
+	WHITE = "white",
 }
 
 export default class Typography extends React.Component<IProps, IState> {
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index a425a01a..25f65c9c 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -69,4 +69,24 @@
 			margin-bottom: 24px;
 		}
 	}
+	.newsletter {
+		position: absolute;
+		bottom: 44px;
+		right: 48px;
+		background-color: #320756;
+		width: 56px;
+		height: 56px;
+		border-radius: 50%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+
+		.newsletter-icon {
+			width: 24px;
+			height: 24px;
+
+			font-size: 24px;
+		}
+	}
 }
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 6601c2e3..72f16926 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -4,11 +4,15 @@ import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
+import Newletter from "@Front/Components/DesignSystem/Newsletter";
+import Image from "next/image";
+import Mail from "@Assets/Icons/mail.svg";
 
 type IProps = {};
 type IState = {
 	selectedFolder: OfficeFolder | null;
 	isArchivedModalOpen: boolean;
+	isNewsletterOpen: boolean;
 };
 export default class Folder extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
@@ -16,6 +20,7 @@ export default class Folder extends BasePage<IProps, IState> {
 		this.state = {
 			selectedFolder: null,
 			isArchivedModalOpen: false,
+			isNewsletterOpen: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
@@ -32,6 +37,16 @@ export default class Folder extends BasePage<IProps, IState> {
 								Sélectionnez un dossier
 							</Typography>
 						</div>
+						{this.state.isNewsletterOpen && <Newletter />}
+
+						<div className={classes["newsletter"]}>
+							<Image
+								src={Mail}
+								alt="newsletter-icon"
+								className={classes["newsletter-icon"]}
+								onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
+							/>
+						</div>
 					</div>
 				</div>
 			</DefaultNotaryDashboard>
@@ -41,4 +56,8 @@ export default class Folder extends BasePage<IProps, IState> {
 	private onSelectedFolder(folder: OfficeFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
+
+	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
+		this.setState({ isNewsletterOpen: !isNewsletterOpen });
+	}
 }