diff --git a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
index 8b25310c..bb0578ca 100644
--- a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
@@ -3,6 +3,7 @@
 .root {
 	position: relative;
 
+
 	&[data-is-disabled="true"] {
 		opacity: var(--opacity-disabled, 0.3);
 		.input-container {
@@ -27,6 +28,8 @@
 	}
 
 	.input-container {
+		height: 56px;
+
 		display: flex;
 		padding: var(--spacing-2, 16px) var(--spacing-sm, 8px);
 		align-items: center;
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index 915cc7c0..713874cf 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextField/index.tsx
@@ -5,6 +5,9 @@ import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
 import classes from "./classes.module.scss";
 import classnames from "classnames";
 import { XMarkIcon, Square2StackIcon } from "@heroicons/react/24/outline";
+import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
+
+
 export type IProps = IBaseFieldProps & {
 	canCopy?: boolean;
 	password?: boolean;
@@ -36,6 +39,7 @@ export default class TextField extends BaseField<IProps> {
 							onBlur={this.onBlur}
 							name={this.props.name}
 							disabled={this.props.disabled}
+							readOnly={this.props.readonly}
 							type={this.props.password ? "password" : "text"}
 						/>
 						{this.props.canCopy && !this.hasError() && (
@@ -58,6 +62,7 @@ export default class TextField extends BaseField<IProps> {
 	private onCopyClick = (): void => {
 		if (this.props.canCopy) {
 			navigator.clipboard.writeText(this.state.value ?? "");
+			ToasterService.getInstance().success({ title: "Copié avec succès !", description: this.state.value });
 		}
 	};
 }
diff --git a/src/front/Components/DesignSystem/Loader/index.tsx b/src/front/Components/DesignSystem/Loader/index.tsx
index c2152759..27f911a0 100644
--- a/src/front/Components/DesignSystem/Loader/index.tsx
+++ b/src/front/Components/DesignSystem/Loader/index.tsx
@@ -5,9 +5,11 @@ import classes from "./classes.module.scss";
 
 interface IProps {
 	className?: string;
+	width?: string | number;
+	color?: string;
 }
 export default class Loader extends React.Component<IProps> {
 	public override render(): JSX.Element {
-		return <ArrowPathIcon className={classes["root"]} />;
+		return <ArrowPathIcon className={classes["root"]} color={this.props.color} width={this.props.width} />;
 	}
 }
diff --git a/src/front/Components/Elements/HelpBox/index.tsx b/src/front/Components/Elements/HelpBox/index.tsx
index 9770f464..1b6903f9 100644
--- a/src/front/Components/Elements/HelpBox/index.tsx
+++ b/src/front/Components/Elements/HelpBox/index.tsx
@@ -26,12 +26,12 @@ export default function HelpBox(props: IProps) {
 						styletype={EButtonstyletype.TEXT}
 						size={EButtonSize.MD}
 						onClick={button.onClick}>
-						Contactez le support
+						{button.text}
 					</Button>
 				</Link>
 			) : (
 				<Button variant={EButtonVariant.SECONDARY} styletype={EButtonstyletype.TEXT} size={EButtonSize.MD} onClick={button.onClick}>
-					Contactez le support
+					{button.text}
 				</Button>
 			)}
 		</div>
diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx
index d1fe593d..da2fb194 100644
--- a/src/front/Components/Layouts/ClientDashboard/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index.tsx
@@ -177,7 +177,8 @@ export default function ClientDashboard(props: IProps) {
 								.modules.pages.ClientDashboard.pages.ReceiveDocuments.props.path.replace(
 									"[folderUid]",
 									folderUid as string,
-								)}>
+								)}
+							style={{ width: "100%" }}>
 							<Button fullwidth variant={EButtonVariant.PRIMARY} size={EButtonSize.LG} styletype={EButtonstyletype.OUTLINED}>
 								Voir les documents reçus
 							</Button>
diff --git a/src/front/Components/Layouts/LoginCallback/classes.module.scss b/src/front/Components/Layouts/LoginCallback/classes.module.scss
index 72ae8ab8..4ef895b8 100644
--- a/src/front/Components/Layouts/LoginCallback/classes.module.scss
+++ b/src/front/Components/Layouts/LoginCallback/classes.module.scss
@@ -1,29 +1,22 @@
 @import "@Themes/constants.scss";
 
 .root {
+	margin: 80px auto;
+	width: 474px;
+
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	flex-direction: column;
-	height: 100%;
-	max-width: 530px;
-	margin: auto;
+	gap: var(--spacing-xl, 32px);
 
-	.title {
-		margin: 32px 0;
-		text-align: center;
-		@media (max-width: $screen-s) {
-			font-family: 48px;
-		}
+	.title-container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
 	}
 
-	.loader {
-		width: 32px;
-		height: 32px;
-	}
-
-	.forget-password {
-		margin-top: 32px;
-		margin-bottom: 8px;
+	@media (max-width: $screen-s) {
+		width: 100%;
+		margin: auto;
+		padding: var(--spacing-md, 16px);
 	}
 }
diff --git a/src/front/Components/Layouts/LoginCallback/index.tsx b/src/front/Components/Layouts/LoginCallback/index.tsx
index 8011f092..9c8ff248 100644
--- a/src/front/Components/Layouts/LoginCallback/index.tsx
+++ b/src/front/Components/Layouts/LoginCallback/index.tsx
@@ -1,19 +1,19 @@
-import LandingImage from "../Login/landing-connect.jpeg";
-import Image from "next/image";
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import CoffreIcon from "@Assets/logo_small_blue.svg";
+import Auth from "@Front/Api/Auth/IdNot";
+import Loader from "@Front/Components/DesignSystem/Loader";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import HelpBox from "@Front/Components/Elements/HelpBox";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import Module from "@Front/Config/Module";
+import CookieService from "@Front/Services/CookieService/CookieService";
+import JwtService from "@Front/Services/JwtService/JwtService";
+import UserStore from "@Front/Stores/UserStore";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
+
 import classes from "./classes.module.scss";
-import Module from "@Front/Config/Module";
-import Auth from "@Front/Api/Auth/IdNot";
-import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
-import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-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";
-import JwtService from "@Front/Services/JwtService/JwtService";
-import CookieService from "@Front/Services/CookieService/CookieService";
 
 export default function LoginCallBack() {
 	const router = useRouter();
@@ -60,23 +60,22 @@ export default function LoginCallBack() {
 		[router];
 
 	return (
-		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
+		<DefaultDoubleSidePage title={"Login"} image={backgroundImage}>
 			<div className={classes["root"]}>
-				<Image alt="coffre" src={CoffreIcon} />
-				<Typography typo={ETypo.DISPLAY_LARGE}>
-					<div className={classes["title"]}>Connexion espace professionnel</div>
-				</Typography>
-				<div className={classes["loader"]}>
-					<Loader />
+				<div className={classes["title-container"]}>
+					<Image alt="coffre" src={CoffreIcon} width={56} />
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
+						Connexion à votre espace professionnel
+					</Typography>
 				</div>
-				<Typography typo={ETypo.TEXT_LG_REGULAR}>
-					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
-				</Typography>
-				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
-						Contacter l'administrateur
-					</Button>
-				</Link>
+
+				<Loader color={"var(--secondary-default-base, #FF4617)"} width={29} />
+				<div />
+				<HelpBox
+					title="Vous n'arrivez pas à vous connecter ?"
+					description="Notre équipe de support est là pour vous aider."
+					button={{ text: "Contacter l'administrateur", link: "mailto:support@lecoffre.io" }}
+				/>
 			</div>
 		</DefaultDoubleSidePage>
 	);
diff --git a/src/front/Components/Layouts/MyAccount/classes.module.scss b/src/front/Components/Layouts/MyAccount/classes.module.scss
index 7e5b5fbd..b868e543 100644
--- a/src/front/Components/Layouts/MyAccount/classes.module.scss
+++ b/src/front/Components/Layouts/MyAccount/classes.module.scss
@@ -1,27 +1,32 @@
 @import "@Themes/constants.scss";
 
 .root {
-	.title {
-		margin-top: 24px;
+	margin: 24px auto;
+	width: 566px;
+
+	@media (max-width: $screen-m) {
+		width: 474px;
 	}
 
-	.parts-container {
+	@media (max-width: $screen-s) {
+		width: 100%;
+		padding: var(--spacing-md, 16px);
+	}
+
+	
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
+
+	.title-container {
 		display: flex;
-		gap: 64px;
-		margin-top: 32px;
+		flex-direction: column;
+		gap: var(--spacing-sm, 8px);
+	}
 
-		@media (max-width: $screen-m) {
-			flex-direction: column;
-		}
-		.part {
-			flex: 1;
-
-			.form-container {
-				display: flex;
-				flex-direction: column;
-				gap: 24px;
-				margin-top: 32px;
-			}
-		}
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-md, 16px);
 	}
 }
diff --git a/src/front/Components/Layouts/MyAccount/index.tsx b/src/front/Components/Layouts/MyAccount/index.tsx
index 0c9169f1..13ef4111 100644
--- a/src/front/Components/Layouts/MyAccount/index.tsx
+++ b/src/front/Components/Layouts/MyAccount/index.tsx
@@ -1,142 +1,96 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
-import Base from "@Front/Components/Layouts/Base";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import React from "react";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import JwtService from "@Front/Services/JwtService/JwtService";
+import User from "le-coffre-resources/dist/Notary";
+import React, { useEffect } from "react";
 
 import classes from "./classes.module.scss";
-import User from "le-coffre-resources/dist/Notary";
-import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import JwtService from "@Front/Services/JwtService/JwtService";
 
-type IProps = {};
-type IState = {
-	user: User | null;
-};
+export default function MyAccount() {
+	const [user, setUser] = React.useState<User | null>(null);
 
-export default class MyAccount extends Base<IProps, IState> {
-	constructor(props: IProps) {
-		super(props);
-		this.state = {
-			user: null,
-		};
-	}
-
-	public override render(): JSX.Element {
-		return (
-			<DefaultTemplate title={"Mon compte"}>
-				<div className={classes["root"]}>
-					<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
-						Mon compte
-					</Typography>
-					<div className={classes["parts-container"]}>
-						<div className={classes["part"]}>
-							<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
-								Mes informations
-							</Typography>
-							<Form onSubmit={this.onFormSubmit}>
-								<div className={classes["form-container"]}>
-									<TextField
-										name="name"
-										placeholder="Nom"
-										defaultValue={this.state.user?.contact?.last_name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="surname"
-										placeholder="Prénom"
-										defaultValue={this.state.user?.contact?.first_name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="email"
-										placeholder="E-mail"
-										defaultValue={this.state.user?.contact?.email}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="phone"
-										placeholder="Numéro de téléphone"
-										defaultValue={this.state.user?.contact?.cell_phone_number as string}
-										disabled
-										canCopy
-									/>
-								</div>
-							</Form>
-						</div>
-						<div className={classes["part"]}>
-							<Typography typo={ETypo.TITLE_H3} color={ETypoColor.COLOR_GENERIC_BLACK}>
-								Mon office
-							</Typography>
-							<Form onSubmit={this.onFormSubmit}>
-								<div className={classes["form-container"]}>
-									<TextField
-										name="office_denomination"
-										placeholder="Dénomination de l'office"
-										defaultValue={this.state.user?.office_membership?.name}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="crpcen"
-										placeholder="CRPCEN"
-										defaultValue={this.state.user?.office_membership?.crpcen}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="cp_address"
-										placeholder="Adresse"
-										defaultValue={this.state.user?.office_membership?.address?.address}
-										disabled
-										canCopy
-									/>
-									<TextField
-										name="city"
-										placeholder="Ville"
-										defaultValue={
-											this.state.user?.office_membership?.address?.zip_code +
-											" - " +
-											this.state.user?.office_membership?.address?.city
-										}
-										disabled
-										canCopy
-									/>
-								</div>
-							</Form>
-						</div>
-					</div>
-				</div>
-			</DefaultTemplate>
-		);
-	}
-
-	public override async componentDidMount() {
+	useEffect(() => {
 		const jwtDecoded = JwtService.getInstance().decodeJwt();
 		if (!jwtDecoded) return;
-		const user = await Users.getInstance().getByUid(jwtDecoded.userId, {
-			q: {
-				office_membership: {
-					include: {
-						address: true,
+		Users.getInstance()
+			.getByUid(jwtDecoded.userId, {
+				q: {
+					office_membership: {
+						include: {
+							address: true,
+						},
 					},
+					contact: true,
 				},
-				contact: true,
-			},
-		});
-		if (!user) return;
-		this.setState({
-			user,
-		});
-	}
-	private onFormSubmit(
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: {
-			[key: string]: string;
-		},
-	) {}
+			})
+			.then((user) => {
+				if (!user) return;
+				setUser(user);
+			});
+	}, []);
+
+	return (
+		<DefaultDoubleSidePage title={"Mon Compte"} image={backgroundImage}>
+			<div className={classes["root"]}>
+				<div className={classes["title-container"]}>
+					<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
+						Mon compte
+					</Typography>
+					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
+						Mes informations
+					</Typography>
+				</div>
+
+				<Form className={classes["form"]}>
+					<TextField name="name" label="Nom" placeholder="Nom" defaultValue={user?.contact?.last_name} readonly canCopy />
+					<TextField name="surname" label="Prénom" placeholder="Prénom" defaultValue={user?.contact?.first_name} readonly canCopy />
+					<TextField name="email" label="E-mail" placeholder="E-mail" defaultValue={user?.contact?.email} readonly canCopy />
+					<TextField
+						name="phone"
+						label="Numéro de téléphone"
+						placeholder="Numéro de téléphone"
+						defaultValue={user?.contact?.cell_phone_number as string}
+						readonly
+						canCopy
+					/>
+				</Form>
+
+				<Typography typo={ETypo.TITLE_H5} color={ETypoColor.TEXT_ACCENT}>
+					Mon office
+				</Typography>
+
+				<Form className={classes["form"]}>
+					<TextField
+						name="office_denomination"
+						label="Dénomination de l'office"
+						placeholder="Dénomination de l'office"
+						defaultValue={user?.office_membership?.name}
+						readonly
+						canCopy
+					/>
+					<TextField name="crpcen" label="CRPCEN" placeholder="CRPCEN" defaultValue={user?.office_membership?.crpcen} readonly canCopy />
+					<TextField
+						name="cp_address"
+						label="Adresse"
+						placeholder="Adresse"
+						defaultValue={user?.office_membership?.address?.address as string}
+						readonly
+						canCopy
+					/>
+					<TextField
+						name="city"
+						label="Ville"
+						placeholder="Ville"
+						defaultValue={user?.office_membership?.address?.zip_code + " - " + user?.office_membership?.address?.city}
+						readonly
+						canCopy
+					/>
+				</Form>
+			</div>
+		</DefaultDoubleSidePage>
+	);
 }