diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts
index 963ceebf..7b8d0ef0 100644
--- a/src/front/Api/BaseApiService.ts
+++ b/src/front/Api/BaseApiService.ts
@@ -1,125 +1,141 @@
 export enum ContentType {
-	JSON = "application/json",
-	FORM_DATA = "multipart/form-data;",
+  JSON = "application/json",
+  FORM_DATA = "multipart/form-data;",
 }
 
 export default abstract class BaseApiService {
-	protected readonly backUrl =
-		process.env["NEXT_PUBLIC_API_HOSTNAME"] + ":" + process.env["NEXT_PUBLIC_API_PORT"] + process.env["NEXT_PUBLIC_API_ROOT_URL"];
-	protected readonly proxyUrl =
-		process.env["NEXT_PUBLIC_RPC_GATEWAY_HOSTNAME"] +
-		":" +
-		process.env["NEXT_PUBLIC_RPC_GATEWAY_PORT"] +
-		process.env["NEXT_PUBLIC_RPC_GATEWAY_ROOT_URL"];
+  protected readonly backUrl =
+    process.env["NEXT_PUBLIC_API_HOSTNAME"] +
+    ":" +
+    process.env["NEXT_PUBLIC_API_PORT"] +
+    process.env["NEXT_PUBLIC_API_ROOT_URL"];
+  protected readonly proxyUrl =
+    process.env["NEXT_PUBLIC_RPC_GATEWAY_HOSTNAME"] +
+    ":" +
+    process.env["NEXT_PUBLIC_RPC_GATEWAY_PORT"] +
+    process.env["NEXT_PUBLIC_RPC_GATEWAY_ROOT_URL"];
 
-	protected constructor() {}
+  protected constructor() {}
 
-	protected buildHeaders(contentType: ContentType) {
-		const headers = new Headers();
+  protected buildHeaders(contentType: ContentType) {
+    const headers = new Headers();
 
-		if (contentType === ContentType.JSON) {
-			headers.set("Content-Type", contentType);
-		}
-		headers.set("Access-Control-Allow-Origin", "*");
+    if (contentType === ContentType.JSON) {
+      headers.set("Content-Type", contentType);
+    }
+    return headers;
+  }
 
-		return headers;
-	}
+  protected buildBody(body: { [key: string]: unknown }): string {
+    return JSON.stringify(body);
+  }
 
-	protected buildBody(body: { [key: string]: unknown }): string {
-		return JSON.stringify(body);
-	}
+  protected async getRequest<T>(url: URL) {
+    const request = async () =>
+      await fetch(url, {
+        method: "GET",
+        headers: this.buildHeaders(ContentType.JSON),
+        mode: "no-cors",
+      });
+    console.log(request);
+    return this.sendRequest<T>(request);
+  }
 
-	protected async getRequest<T>(url: URL) {
-		const request = async () =>
-			await fetch(url, {
-				method: "GET",
-				headers: this.buildHeaders(ContentType.JSON),
-			});
-			console.log(request);
-		return this.sendRequest<T>(request);
-	}
+  protected async postRequest<T>(
+    url: URL,
+    body: { [key: string]: unknown } = {}
+  ) {
+    const request = async () =>
+      await fetch(url, {
+        method: "POST",
+        headers: this.buildHeaders(ContentType.JSON),
+        body: this.buildBody(body),
+      });
 
-	protected async postRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-		const request = async () =>
-			await fetch(url, {
-				method: "POST",
-				headers: this.buildHeaders(ContentType.JSON),
-				body: this.buildBody(body),
-			});
+    return this.sendRequest<T>(request);
+  }
 
-		return this.sendRequest<T>(request);
-	}
+  protected async putRequest<T>(
+    url: URL,
+    body: { [key: string]: unknown } = {}
+  ) {
+    const request = async () =>
+      await fetch(url, {
+        method: "PUT",
+        headers: this.buildHeaders(ContentType.JSON),
+        body: this.buildBody(body),
+      });
 
-	protected async putRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-		const request = async () =>
-			await fetch(url, {
-				method: "PUT",
-				headers: this.buildHeaders(ContentType.JSON),
-				body: this.buildBody(body),
-			});
+    return this.sendRequest<T>(request);
+  }
 
-		return this.sendRequest<T>(request);
-	}
+  protected async patchRequest<T>(
+    url: URL,
+    body: { [key: string]: unknown } = {}
+  ) {
+    const request = async () =>
+      await fetch(url, {
+        method: "PATCH",
+        headers: this.buildHeaders(ContentType.JSON),
+        body: this.buildBody(body),
+      });
 
-	protected async patchRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-		const request = async () =>
-			await fetch(url, {
-				method: "PATCH",
-				headers: this.buildHeaders(ContentType.JSON),
-				body: this.buildBody(body),
-			});
+    return this.sendRequest<T>(request);
+  }
 
-		return this.sendRequest<T>(request);
-	}
+  protected async deleteRequest<T>(
+    url: URL,
+    body: { [key: string]: unknown } = {}
+  ) {
+    const request = async () =>
+      await fetch(url, {
+        method: "DELETE",
+        headers: this.buildHeaders(ContentType.JSON),
+        body: this.buildBody(body),
+      });
 
-	protected async deleteRequest<T>(url: URL, body: { [key: string]: unknown } = {}) {
-		const request = async () =>
-			await fetch(url, {
-				method: "DELETE",
-				headers: this.buildHeaders(ContentType.JSON),
-				body: this.buildBody(body),
-			});
+    return this.sendRequest<T>(request);
+  }
 
-		return this.sendRequest<T>(request);
-	}
+  protected async putFormDataRequest<T>(url: URL, body: FormData) {
+    const request = async () =>
+      await fetch(url, {
+        method: "PUT",
+        headers: this.buildHeaders(ContentType.FORM_DATA),
+        body,
+      });
 
-	protected async putFormDataRequest<T>(url: URL, body: FormData) {
-		const request = async () =>
-			await fetch(url, {
-				method: "PUT",
-				headers: this.buildHeaders(ContentType.FORM_DATA),
-				body,
-			});
+    return this.sendRequest<T>(request);
+  }
 
-		return this.sendRequest<T>(request);
-	}
+  private async sendRequest<T>(request: () => Promise<Response>): Promise<T> {
+    const response = await request();
+    return this.processResponse<T>(response, request);
+  }
 
-	private async sendRequest<T>(request: () => Promise<Response>): Promise<T> {
-		const response = await request();
-		response.headers.set("Access-Control-Allow-Origin", "*");
-		return this.processResponse<T>(response, request);
-	}
+  protected async processResponse<T>(
+    response: Response,
+    request: () => Promise<Response>
+  ): Promise<T> {
+    let responseJson: any | null;
+    try {
+      responseJson = await response.json();
+    } catch (err: unknown) {
+      responseJson = null;
+    }
 
-	protected async processResponse<T>(response: Response, request: () => Promise<Response>): Promise<T> {
-		let responseJson: any | null;
-		try {
-			responseJson = await response.json();
-		} catch (err: unknown) {
-			responseJson = null;
-		}
+    if (!response.ok) {
+      return Promise.reject(response);
+    }
 
-		if (!response.ok) {
-			return Promise.reject(response);
-		}
+    return responseJson as T;
+  }
 
-		return responseJson as T;
-	}
-
-	protected onError(error: unknown) {
-		console.error(error);
-	}
+  protected onError(error: unknown) {
+    console.error(error);
+  }
 }
 
 export interface IResponse {
-	http_status: number;
+  http_status: number;
 }
diff --git a/src/front/Api/LeCoffreApi/Notary/Users/Users.ts b/src/front/Api/LeCoffreApi/Notary/Users/Users.ts
index bbc5ffa7..00f54229 100644
--- a/src/front/Api/LeCoffreApi/Notary/Users/Users.ts
+++ b/src/front/Api/LeCoffreApi/Notary/Users/Users.ts
@@ -4,61 +4,64 @@ import User from "le-coffre-resources/dist/Notary";
 
 @Service()
 export default class Users extends BaseNotary {
-	private static instance: Users;
-	private readonly baseURl = this.namespaceUrl.concat("/Users");
+  private static instance: Users;
+  private readonly baseURl = this.namespaceUrl.concat("/Users");
 
-	private constructor() {
-		super();
-	}
+  private constructor() {
+    super();
+  }
 
-	public static getInstance() {
-		if (!this.instance) {
-			return new Users();
-		} else {
-			return this.instance;
-		}
-	}
+  public static getInstance() {
+    if (!this.instance) {
+      return new Users();
+    } else {
+      return this.instance;
+    }
+  }
 
-	public async get(): Promise<User[]> {
-		const url = new URL(this.baseURl);
-		try {
-			return await this.getRequest<User[]>(url);
-		} catch (err) {
-			this.onError(err);
-			return Promise.reject(err);
-		}
-	}
+  public async get(): Promise<User[]> {
+    const url = new URL(this.baseURl);
+    try {
+      return await this.getRequest<User[]>(url);
+    } catch (err) {
+      this.onError(err);
+      return Promise.reject(err);
+    }
+  }
 
-	public async getAuthorizationCode(): Promise<any> {
-		try {
-			await this.getRequest(new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
-			client_id=4501646203F3EF67
-			&redirect_uri=http://locahost:3000
-			&scope=openid,profile,offline_access
-			&response_type=code`));
-		} catch (err) {
-			this.onError(err);
-			return Promise.reject(err);
-		}
-	}
+  public async getAuthorizationCode(): Promise<any> {
+    try {
+      const url =
+        new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
+      client_id=4501646203F3EF67
+      &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
+      &scope=openid,profile,offline_access
+      &response_type=code`);
+      //   const url = new URL("https://jsonplaceholder.typicode.com/todos/1");
+      await this.getRequest(url);
+    } catch (err) {
+      this.onError(err);
+      return Promise.reject(err);
+    }
+  }
 
-	public async getOne(uid: string): Promise<User> {
-		const url = new URL(this.baseURl.concat("/").concat(uid));
-		try {
-			return await this.getRequest<User>(url);
-		} catch (err) {
-			this.onError(err);
-			return Promise.reject(err);
-		}
-	}
+  public async getOne(uid: string): Promise<User> {
+    const url = new URL(this.baseURl.concat("/").concat(uid));
+    try {
+      return await this.getRequest<User>(url);
+    } catch (err) {
+      this.onError(err);
+      return Promise.reject(err);
+    }
+  }
 
-	// public async post(params: User): Promise<User> {
-	// 	const url = new URL(this.baseURl);
-	// 	try {
-	// 		return await this.postRequest<User>(url, params);
-	// 	} catch (err) {
-	// 		this.onError(err);
-	// 		return Promise.reject(err);
-	// 	}
-	// }
+  // public async post(params: User): Promise<User> {
+  // 	const url = new URL(this.baseURl);
+  // 	try {
+  // 		return await this.postRequest<User>(url, params);
+  // 	} catch (err) {
+  // 		this.onError(err);
+  // 		return Promise.reject(err);
+  // 	}
+  // }
 }
diff --git a/src/front/Assets/icons/coffre.svg b/src/front/Assets/icons/coffre.svg
new file mode 100644
index 00000000..78198721
--- /dev/null
+++ b/src/front/Assets/icons/coffre.svg
@@ -0,0 +1,22 @@
+<svg width="44" height="56" viewBox="0 0 44 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3026_107168)">
+<path d="M43.8828 9.98633C43.9035 9.4084 43.5713 8.81895 42.8538 8.51041L24.3282 0.58968C22.8379 -0.0481226 21.0845 -0.0481226 19.5942 0.58968L1.17241 8.46666C0.443378 8.7798 0.0996282 9.37616 0.115778 9.96331V46.1454L4.25693 48.091L6.73008 46.9098L18.4499 51.7336V54.1858L22.0396 55.869L25.6617 54.1398V51.7544L37.3584 46.9397L39.8201 48.0887L43.8874 46.1477V9.98633H43.8828Z" fill="#C5B2D4"/>
+<path d="M22.0369 55.9998L18.3318 54.2614V51.8115L6.73196 47.036L4.2565 48.2172L0 46.2209V9.85003C0.0322987 9.21222 0.454488 8.6481 1.12584 8.36259L19.5499 0.483307C21.061 -0.163706 22.8651 -0.163706 24.374 0.483307L42.8995 8.40403C43.5617 8.68725 43.9723 9.24216 43.9977 9.87075V46.2232L39.8173 48.2195L37.3534 47.0682L25.7743 51.8345V54.2153L22.0369 55.9998ZM18.5625 54.1163L22.0369 55.7465L25.5459 54.0725V51.6825L37.3626 46.8173L39.8196 47.9639L43.7716 46.0781V10.101H43.767V9.98127C43.7924 9.39412 43.4325 8.88296 42.8096 8.61587L24.284 0.69514C22.8305 0.073455 21.0956 0.073455 19.6422 0.69514L1.21812 8.57212C0.583683 8.84382 0.216862 9.36189 0.233012 9.96055V10.078V46.0712L4.25881 47.9616L6.72966 46.7827L18.5671 51.6549V54.1117L18.5625 54.1163Z" fill="#4E1480"/>
+<path d="M18.0574 49.0688C17.5222 49.0688 16.9823 48.9629 16.4724 48.7441L4.4412 43.6325C2.94854 42.9993 1.98419 41.5441 1.98419 39.9254L1.97266 17.4319C1.97266 16.0711 2.65093 14.8116 3.79061 14.0633C4.93029 13.315 6.35835 13.1906 7.61108 13.7294L19.6539 18.9171C21.135 19.5549 22.0924 21.0078 22.0924 22.6195V45.037C22.0924 46.3932 21.4141 47.6504 20.2814 48.401C19.61 48.8454 18.8349 49.0711 18.0551 49.0711L18.0574 49.0688ZM6.00999 14.0863C5.36632 14.0863 4.72727 14.2728 4.17127 14.6366C3.22769 15.256 2.66246 16.3014 2.66477 17.4296L2.67631 39.9231C2.67631 41.2632 3.47685 42.4697 4.71343 42.9947L16.7447 48.1063C17.7805 48.5461 18.9618 48.4402 19.9007 47.8185C20.842 47.1991 21.4026 46.1561 21.4026 45.0324V22.6149C21.4026 21.2795 20.609 20.0775 19.3816 19.5479L7.33885 14.3603C6.91204 14.1761 6.45986 14.0863 6.00999 14.0863Z" fill="white"/>
+<path d="M3.09274 20.3118V19.1352C3.09274 19.1052 3.07428 19.0776 3.0466 19.0661L1.58855 18.4375C1.53779 18.4168 1.48242 18.4536 1.48242 18.5066V19.6832C1.48242 19.7131 1.50088 19.7407 1.52856 19.7523L2.98431 20.3808C3.03506 20.4016 3.09043 20.3647 3.09043 20.3118H3.09274Z" fill="white"/>
+<path d="M3.01696 20.7323C2.95929 20.7323 2.90392 20.7208 2.84855 20.6978L1.3928 20.0715C1.23823 20.0047 1.13672 19.8527 1.13672 19.6846V18.508C1.13672 18.3653 1.20824 18.234 1.3259 18.1558C1.44586 18.0775 1.59582 18.0637 1.72502 18.1212L3.18307 18.7498C3.33764 18.8166 3.43915 18.9686 3.43915 19.1366V20.3132C3.43915 20.456 3.36763 20.5872 3.24767 20.6655C3.17846 20.7116 3.09771 20.7346 3.01696 20.7346V20.7323ZM1.82883 19.505L2.74704 19.9011V19.3116L1.82883 18.9156V19.505Z" fill="white"/>
+<path d="M3.14743 38.7512V37.5746C3.14743 37.5447 3.12897 37.5171 3.10129 37.5055L1.64323 36.877C1.59248 36.8562 1.53711 36.8931 1.53711 36.946V38.1226C1.53711 38.1526 1.55557 38.1802 1.58325 38.1917L3.039 38.8203C3.08975 38.841 3.14512 38.8042 3.14512 38.7512H3.14743Z" fill="white"/>
+<path d="M3.0713 39.1721C3.01362 39.1721 2.95825 39.1606 2.90519 39.1376L1.44713 38.509C1.29256 38.4422 1.19336 38.2902 1.19336 38.1221V36.9455C1.19336 36.8051 1.26257 36.6715 1.38254 36.5933C1.5025 36.515 1.65015 36.5012 1.78166 36.5587L3.23971 37.1873C3.39428 37.2541 3.49349 37.4061 3.49349 37.5741V38.7507C3.49349 38.8935 3.42197 39.0247 3.30431 39.103C3.2351 39.1491 3.15435 39.1721 3.0713 39.1721ZM1.88317 37.9448L2.80137 38.3409V37.7514L1.88317 37.3554V37.9448Z" fill="white"/>
+<path d="M22.415 26.6204V25.4438C22.415 25.4138 22.3965 25.3862 22.3689 25.3747L20.9108 24.7461C20.8601 24.7254 20.8047 24.7622 20.8047 24.8152V25.9918C20.8047 26.0217 20.8231 26.0493 20.8508 26.0608L22.3066 26.6894C22.3573 26.7102 22.4127 26.6733 22.4127 26.6204H22.415Z" fill="white"/>
+<path d="M22.3392 27.0412C22.2816 27.0412 22.2262 27.0297 22.1708 27.0067L20.7151 26.3781C20.5605 26.3113 20.459 26.1594 20.459 25.9913V24.8147C20.459 24.6719 20.5305 24.5407 20.6482 24.4624C20.7681 24.3841 20.9158 24.3703 21.0473 24.4279L22.5053 25.0565C22.6599 25.1232 22.7614 25.2752 22.7614 25.4433V26.6199C22.7614 26.7626 22.6899 26.8939 22.5699 26.9722C22.5007 27.0182 22.42 27.0412 22.3392 27.0412ZM21.1511 25.814L22.0693 26.21V25.6206L21.1511 25.2245V25.814Z" fill="white"/>
+<path d="M22.4677 45.0618V43.8852C22.4677 43.8552 22.4493 43.8276 22.4216 43.8161L20.9635 43.1875C20.9128 43.1668 20.8574 43.2036 20.8574 43.2566V44.4332C20.8574 44.4631 20.8759 44.4907 20.9036 44.5023L22.3593 45.1308C22.4101 45.1516 22.4654 45.1147 22.4654 45.0618H22.4677Z" fill="white"/>
+<path d="M22.3916 45.4823C22.3339 45.4823 22.2786 45.4708 22.2232 45.4478L20.7674 44.8215C20.6129 44.7547 20.5137 44.6027 20.5137 44.4346V43.258C20.5137 43.1176 20.5829 42.984 20.7028 42.9058C20.8228 42.8275 20.9728 42.8137 21.102 42.8712L22.56 43.4998C22.7146 43.5666 22.8138 43.7186 22.8138 43.8866V45.0632C22.8138 45.206 22.7423 45.3372 22.6223 45.4155C22.5531 45.4616 22.4724 45.4846 22.3916 45.4846V45.4823ZM21.2035 44.255L22.1217 44.6511V44.0616L21.2035 43.6656V44.255Z" fill="white"/>
+<path d="M8.47164 24.259C6.02617 25.2099 5.44248 29.5617 7.16585 33.9803C8.88921 38.3989 12.269 41.2126 14.7145 40.2616C17.16 39.3107 17.7437 34.9589 16.0203 30.5403C14.2969 26.1217 10.9171 23.308 8.47164 24.259ZM12.5989 32.3478C12.5713 32.2442 12.5367 32.1406 12.4974 32.037C12.4144 31.8228 12.3129 31.6294 12.1975 31.4567L12.7835 27.0911C13.7248 28.0098 14.5876 29.3177 15.1944 30.8742C15.7827 32.3823 16.0364 33.8813 15.9857 35.1661L12.5989 32.3478ZM9.10377 25.804C9.92738 25.4839 10.8802 25.6935 11.8122 26.3036L11.2216 30.6946C11.1178 30.6808 11.0163 30.69 10.924 30.7268C10.8664 30.7498 10.8156 30.7821 10.7671 30.8212L7.43347 28.0467C7.70339 26.9437 8.26862 26.1263 9.10377 25.804ZM8.04945 33.651C7.45192 32.1152 7.19815 30.591 7.26044 29.29L10.458 31.9518C10.4811 32.205 10.5457 32.479 10.6518 32.753C10.7187 32.9234 10.7971 33.08 10.8825 33.2251L10.3334 37.3075C9.4406 36.398 8.62852 35.1362 8.04945 33.651ZM11.3001 38.1341L11.8445 34.077C11.976 34.1092 12.1052 34.1069 12.2229 34.0609C12.3752 34.001 12.4905 33.879 12.5713 33.7132L15.8219 36.4187C15.5566 37.5515 14.9867 38.3897 14.1377 38.7212C13.2772 39.0551 12.2713 38.811 11.2978 38.1341H11.3001Z" fill="white"/>
+<path d="M12.1448 31.9302C12.5924 32.6509 12.5878 33.4591 12.1656 33.7147C11.7434 33.9703 11.0167 33.595 10.6199 32.8466C10.1977 32.0523 10.1885 31.3339 10.583 31.0852C11.0421 30.7951 11.6904 31.1957 12.1471 31.9325L12.1448 31.9302Z" fill="#3FA79E"/>
+</g>
+<defs>
+<clipPath id="clip0_3026_107168">
+<rect width="44" height="56" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index b8c176be..02ebfef5 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -13,10 +13,10 @@ enum EHeaderOpeningState {
 	OPEN = "open",
 	CLOSED = "closed",
 	IDLE = "idle",
-
 }
 
 type IProps = {
+	isUserConnected: boolean;
 };
 type IState = {
 	open: EHeaderOpeningState;
@@ -55,18 +55,23 @@ export default class Header extends React.Component<IProps, IState> {
 						<Image src={LogoIcon} alt="logo" className={classes["logo"]} />
 					</Link>
 				</div>
-				<Navigation />
-				<div className={classes["right-section"]}>
-					<div className={classes["notification-section"]}>
-						<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
-					</div>
-					<div className={classes["profile-section"]}>
-						<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
-					</div>
-					<div className={classes["burger-menu"]}>
-						<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
-					</div>
-				</div>
+				{this.props.isUserConnected &&
+					<>
+						<Navigation />
+						<div className={classes["right-section"]}>
+							<div className={classes["notification-section"]}>
+								<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
+							</div>
+							<div className={classes["profile-section"]}>
+								<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
+							</div>
+							<div className={classes["burger-menu"]}>
+								<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
+							</div>
+						</div>
+					</>
+				}
+
 			</div>
 		);
 	}
@@ -98,7 +103,7 @@ export default class Header extends React.Component<IProps, IState> {
 	}
 
 	private onResize(window: Window) {
-		if(window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
+		if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
 		if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });
 	}
 
diff --git a/src/front/Components/DesignSystem/InformationBox/classes.module.scss b/src/front/Components/DesignSystem/InformationBox/classes.module.scss
new file mode 100644
index 00000000..f68b3ab0
--- /dev/null
+++ b/src/front/Components/DesignSystem/InformationBox/classes.module.scss
@@ -0,0 +1,4 @@
+@import "@Themes/constants.scss";
+
+.root {
+}
diff --git a/src/front/Components/DesignSystem/InformationBox/index.tsx b/src/front/Components/DesignSystem/InformationBox/index.tsx
new file mode 100644
index 00000000..22d60a53
--- /dev/null
+++ b/src/front/Components/DesignSystem/InformationBox/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {
+	informations: IFolderInformation[];
+};
+type IState = {};
+
+type IFolderInformation = {
+	label: string;
+	value: string;
+}
+
+
+export default class InformationBox extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		return <div className={classes["root"]}>
+			{this.props.informations.map((information) => {
+				const output = <div className={classes["information"]}>
+					<span className={classes["label"]}>{information.label}</span>
+					<span className={classes["value"]}>{information.value}</span>
+				</div>;
+				return output;
+			})};
+		</div>;
+	}
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
new file mode 100644
index 00000000..e8e2a204
--- /dev/null
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -0,0 +1,38 @@
+@import "@Themes/constants.scss";
+
+.root {
+	max-height: 100vh;
+	min-height: 100vh;
+	overflow: hidden;
+
+	.content {
+		display: flex;
+		align-items: center;
+		height: 100vh;
+		width: 100%;
+
+		.sides {
+			width: 100%;
+			height: 100vh;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&.image-container {
+				@media (max-width: $screen-m) {
+					display: none;
+				}
+			}
+
+			.side-content {
+				max-width: 530px;
+			}
+
+			.image {
+				height: 100%;
+				width: 100%;
+				object-fit: cover;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
new file mode 100644
index 00000000..b6bd2d98
--- /dev/null
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
@@ -0,0 +1,49 @@
+import React, { ReactNode } from "react";
+import classes from "./classes.module.scss";
+import Header from "@Front/Components/DesignSystem/Header";
+import Version from "@Front/Components/DesignSystem/Version";
+import Image, { StaticImageData } from "next/image";
+import classNames from "classnames";
+
+type IProps = {
+	title: string;
+	children?: ReactNode;
+	/**
+	 * @description scroll top with number or disabled with null
+	 */
+	scrollTop: number | null;
+	image: StaticImageData;
+};
+type IState = {};
+
+export default class DefaultDoubleSidePage extends React.Component<IProps, IState> {
+	public static defaultProps = {
+		scrollTop: 0,
+	};
+
+	public override render(): JSX.Element {
+		return (
+			<div className={classes["root"]}>
+				<Header isUserConnected={false} />
+				<div className={classes["content"]}>
+					<div className={classes["sides"]}>
+						<div className={classes["side-content"]}>
+							{this.props.children}
+						</div>
+					</div>
+					<div className={classNames(classes["sides"], classes["image-container"])}>
+						<Image alt={"right side image"} src={this.props.image} className={classes["image"]} />
+					</div>
+				</div>
+				<Version />
+			</div>
+		);
+	}
+
+	public override componentDidMount() {
+		window.document.title = this.props.title;
+		if (this.props.scrollTop !== null) {
+			window.scrollTo(0, this.props.scrollTop);
+		}
+	}
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
index d639f9c8..c7ecd3e4 100644
--- a/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultTemplate/index.tsx
@@ -21,7 +21,7 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<>
-				<Header />
+				<Header isUserConnected={true}/>
 				<div className={classes["root"]}>
 					<div className={classes["content"]}>{this.props.children}</div>
 				</div>
diff --git a/src/front/Components/Layouts/Login/classes.module.scss b/src/front/Components/Layouts/Login/classes.module.scss
index c3a2af63..53e48bc0 100644
--- a/src/front/Components/Layouts/Login/classes.module.scss
+++ b/src/front/Components/Layouts/Login/classes.module.scss
@@ -1,2 +1,16 @@
 .root {
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    .title {
+        margin: 32px 0;
+        text-align: center;
+    }
+
+    .forget-password {
+        margin-top: 32px;
+        margin-bottom: 8px;
+    }
+}
\ No newline at end of file
diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx
index d4d3c70f..00e1e676 100644
--- a/src/front/Components/Layouts/Login/index.tsx
+++ b/src/front/Components/Layouts/Login/index.tsx
@@ -1,19 +1,46 @@
-import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import Button from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import BasePage from "../Base";
 import classes from "./classes.module.scss";
+import CoffreIcon from "@Assets/Icons/coffre.svg";
+import LandingImage from "./landing-connect.png"
+import Image from "next/image";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 
 export default class Login extends BasePage {
+	//constructor
+	public constructor(props: any) {
+		super(props);
+		// this.getAuthorizationCode = this.getAuthorizationCode.bind(this);
+	}
 	public override render(): JSX.Element {
 		return (
-			<DefaultTemplate title={"HomePage"}>
+			<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1}>login</Typography>
-					<Button onClick={async() => Users.getInstance().getAuthorizationCode()}>IDNOT</Button>
+					<Image alt="coffre" src={CoffreIcon} />
+					<Typography typo={ITypo.H1}><div className={classes["title"]}>Connexion espace professionnel</div></Typography>
+					<Button onClick={this.redirectUserOnConnection}>S’identifier avec ID.not</Button>
+					<a href="https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
+      client_id=4501646203F3EF67
+      &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
+      &scope=openid,profile,offline_access
+      &response_type=code"> <Typography typo={ITypo.P_18}>CONNECT</Typography></a>
+					<Typography typo={ITypo.P_18}><div className={classes["forget-password"]}>Vous n’arrivez pas à vous connecter ?</div></Typography>
+					<Button variant={EButtonVariant.LINE} >Contacter l’administrateur</Button>
 				</div>
-			</DefaultTemplate>
+			</DefaultDoubleSidePage>
 		);
 	}
+
+	private redirectUserOnConnection() {
+		const url = `https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
+      client_id=4501646203F3EF67
+      &scope=openid,profile,offline_access
+      &response_type=code`;
+		window.location.assign(url)
+	}
+
+	// private getAuthorizationCode() {
+	// 	Users.getInstance().getAuthorizationCode()
+	// }
 }
diff --git a/src/front/Components/Layouts/Login/landing-connect.png b/src/front/Components/Layouts/Login/landing-connect.png
new file mode 100644
index 00000000..5fd6f853
Binary files /dev/null and b/src/front/Components/Layouts/Login/landing-connect.png differ