diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts
index 2992b609..166621bc 100644
--- a/src/front/Api/BaseApiService.ts
+++ b/src/front/Api/BaseApiService.ts
@@ -119,17 +119,18 @@ export default abstract class BaseApiService {
 			responseJson = await response.json();
 		} catch (err: unknown) {
 			responseJson = null;
+			return Promise.reject(err);
 		}
 
 		if (!response.ok) {
-			return Promise.reject(response);
+			return Promise.reject(responseJson);
 		}
 
 		return responseJson as T;
 	}
 
 	protected onError(error: unknown) {
-		console.error(error);
+		//console.error(error);
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 109a776e..43898868 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FormContext, IFormContext } from ".";
 import { ValidationError } from "class-validator";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 
 export type IProps = {
 	value?: string;
@@ -34,6 +35,10 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 	constructor(props: P) {
 		super(props);
 		this.onChange = this.onChange.bind(this);
+		this.onFocus = this.onFocus.bind(this);
+		this.onBlur = this.onBlur.bind(this);
+		this.hasError = this.hasError.bind(this);
+		this.renderErrors = this.renderErrors.bind(this);
 	}
 
 	public override componentDidMount() {
@@ -68,11 +73,39 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		};
 	}
 
+	protected onFocus(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
+		this.context?.onFieldFocusChange(this.props.name, this, true);
+	}
+
+	protected onBlur(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
+		this.context?.onFieldFocusChange(this.props.name, this, false);
+	}
+
 	protected onChange(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
 		this.context?.onFieldChange(this.props.name, this);
-		this.setState({ value: event.currentTarget.value });
+		this.setState({ value: event.currentTarget.value, validationError: null });
 		if (this.props.onChange) {
 			this.props.onChange(event);
 		}
 	}
+
+	protected hasError(): boolean {
+		return this.state.validationError !== null;
+		// if(!this.context) return false;
+		// if(!this.context.hasOneFocusedInput() && this.state.validationError !== null) return true;
+		// return this.state.validationError !== null && this.context.isInputFocused(this.props.name);
+	}
+
+	protected renderErrors(): JSX.Element[] | null {
+		if (!this.state.validationError || !this.state.validationError.constraints) return null;
+		let errors: JSX.Element[] = [];
+		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
+			errors.push(
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+					{value}
+				</Typography>,
+			);
+		});
+		return errors;
+	}
 }
diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
index 6abd2dbe..bf08aa3b 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
@@ -15,7 +15,7 @@ type IProps = {
 	hasBorderRightCollapsed?: boolean;
 	placeholder?: string;
 	className?: string;
-	name?: string;
+	name: string;
 	disabled: boolean;
 	errors?: ValidationError;
 };
@@ -60,53 +60,58 @@ export default class SelectField extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
 		return (
-			<div
-				className={classNames(classes["root"], this.props.className)}
-				ref={this.rootRef}
-				data-disabled={this.props.disabled.toString()}
-				data-errored={(this.state.errors !== null).toString()}>
-				{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
-				<label
-					className={classNames(classes["container-label"])}
-					data-open={this.state.isOpen}
-					onClick={this.toggle}
-					data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
-					<div className={classNames(classes["container-input"])}>
-						{selectedOption && (
-							<>
-								<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
-								<Typography typo={ITypo.P_18}>
-									<span className={classes["text"]}>{selectedOption?.label}</span>
-								</Typography>
-							</>
-						)}
-						{!selectedOption && (
-							<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
-								<Typography typo={ITypo.NAV_INPUT_16}>
-									<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
-								</Typography>
-							</div>
-						)}
-					</div>
-					<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
-				</label>
+			<div className={classes["container"]}>
+				<div
+					className={classNames(classes["root"], this.props.className)}
+					ref={this.rootRef}
+					data-disabled={this.props.disabled.toString()}
+					data-errored={(this.state.errors !== null).toString()}>
+					{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
+					<label
+						className={classNames(classes["container-label"])}
+						data-open={this.state.isOpen}
+						onClick={this.toggle}
+						data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
+						<div className={classNames(classes["container-input"])}>
+							{selectedOption && (
+								<>
+									<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
+									<Typography typo={ITypo.P_18}>
+										<span className={classes["text"]}>{selectedOption?.label}</span>
+									</Typography>
+								</>
+							)}
+							{!selectedOption && (
+								<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
+									<Typography typo={ITypo.NAV_INPUT_16}>
+										<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
+									</Typography>
+								</div>
+							)}
+						</div>
+						<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
+					</label>
 
-				<ul
-					className={classes["container-ul"]}
-					data-open={this.state.isOpen}
-					ref={this.contentRef}
-					style={{
-						height: this.state.listHeight + "px",
-					}}>
-					{this.props.options.map((option, index) => (
-						<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}>
-							<div className={classes["token-icon"]}>{option.icon}</div>
-							<Typography typo={ITypo.P_18}>{option.label}</Typography>
-						</li>
-					))}
-				</ul>
+					<ul
+						className={classes["container-ul"]}
+						data-open={this.state.isOpen}
+						ref={this.contentRef}
+						style={{
+							height: this.state.listHeight + "px",
+						}}>
+						{this.props.options.map((option, index) => (
+							<li
+								key={`${index}-${option.value}`}
+								className={classes["container-li"]}
+								onClick={(e) => this.onSelect(option, e)}>
+								<div className={classes["token-icon"]}>{option.icon}</div>
+								<Typography typo={ITypo.P_18}>{option.label}</Typography>
+							</li>
+						))}
+					</ul>
 
-				{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
+					{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
+				</div>
 				{this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</div>
 		);
@@ -172,16 +177,12 @@ export default class SelectField extends React.Component<IProps, IState> {
 		this.toggle(e);
 	}
 
-	private renderErrors(): JSX.Element[] | null {
-		if (!this.state.errors || !this.state.errors.constraints) return null;
-		let errors: JSX.Element[] = [];
-		Object.entries(this.state.errors.constraints).forEach(([key, value]) => {
-			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
-					{value}
-				</Typography>,
-			);
-		});
-		return errors;
+	private renderErrors(): JSX.Element | null {
+		if (!this.state.errors) return null;
+		return (
+			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				{this.props.placeholder} est requis
+			</Typography>
+		);
 	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index 76cb1e53..366e6f61 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextField/index.tsx
@@ -18,34 +18,23 @@ export default class TextField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-				<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
+				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
 						data-value={value}
 						data-has-validation-errors={(this.state.validationError === null).toString()}
 						className={classnames(classes["input"], this.props.className)}
 						value={value}
+						onFocus={this.onFocus}
+						onBlur={this.onBlur}
 						name={this.props.name}
 					/>
 					<div className={classes["fake-placeholder"]}>
 						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
 					</div>
 				</div>
-				{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</Typography>
 		);
 	}
-
-	private renderErrors(): JSX.Element[] | null {
-		if (!this.state.validationError || !this.state.validationError.constraints) return null;
-		let errors: JSX.Element[] = [];
-		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
-			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
-					{value}
-				</Typography>,
-			);
-		});
-		return errors;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index 4115c557..43dd9c75 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
@@ -18,7 +18,7 @@ export default class TextAreaField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-				<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
+				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}
 						rows={4}
@@ -27,11 +27,13 @@ export default class TextAreaField extends BaseField<IProps> {
 						className={classnames(classes["textarea"], this.props.className)}
 						value={value}
 						readOnly={this.props.readonly}
+						onFocus={this.onFocus}
+						onBlur={this.onBlur}
 					/>
 					<div className={classes["fake-placeholder"]}>
 						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
 					</div>
-					{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+					{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 				</div>
 			</Typography>
 		);
@@ -42,17 +44,4 @@ export default class TextAreaField extends BaseField<IProps> {
 			value: this.props.defaultValue ?? "",
 		});
 	}
-
-	private renderErrors(): JSX.Element[] | null {
-		if (!this.state.validationError || !this.state.validationError.constraints) return null;
-		let errors: JSX.Element[] = [];
-		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
-			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
-					{value}
-				</Typography>,
-			);
-		});
-		return errors;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Form/index.tsx b/src/front/Components/DesignSystem/Form/index.tsx
index 7ad9b593..94a9f082 100644
--- a/src/front/Components/DesignSystem/Form/index.tsx
+++ b/src/front/Components/DesignSystem/Form/index.tsx
@@ -8,25 +8,39 @@ export type IFormContext = {
 	setField: (name: string, field: IBaseField) => void;
 	unSetField: (name: string) => void;
 	onFieldChange: (name: string, field: IBaseField) => void;
+	onFieldFocusChange: (name: string, field: IBaseField, focused: boolean) => void;
+	isInputFocused: (name: string) => boolean;
+	hasOneFocusedInput: () => boolean;
 };
 
 type IFields = {
 	[key: string]: IBaseField;
 };
 
-type IState = {};
+type IState = {
+	inputFocused: {
+		name: string;
+		field: IBaseField;
+		focused: boolean;
+	};
+};
 
 export type IProps = {
+	onFieldFocusChange?: (name: string, field: IBaseField, focused: boolean) => void;
 	onFieldChange?: (name: string, field: IBaseField) => void;
-	onSubmit?: (
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: { [key: string]: string },
-	) => void;
+	onSubmit?: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
 	className?: string;
 	children?: ReactNode;
 };
 
-export const FormContext = React.createContext<IFormContext>({ setField: () => {}, unSetField: () => {}, onFieldChange: () => {} });
+export const FormContext = React.createContext<IFormContext>({
+	setField: () => {},
+	unSetField: () => {},
+	onFieldChange: () => {},
+	onFieldFocusChange: () => {},
+	isInputFocused: () => false,
+	hasOneFocusedInput: () => false,
+});
 
 export default class Form extends React.Component<IProps, IState> {
 	protected fields: IFields = {};
@@ -35,12 +49,22 @@ export default class Form extends React.Component<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 
-		this.state = {};
+		this.state = {
+			inputFocused: {
+				name: "",
+				field: {} as IBaseField,
+				focused: false,
+			},
+		};
+
 		this.setField = this.setField.bind(this);
 		this.unSetField = this.unSetField.bind(this);
 		this.onFieldChange = this.onFieldChange.bind(this);
 		this.onSubmit = this.onSubmit.bind(this);
 		this.formRef = React.createRef();
+		this.onFieldFocusChange = this.onFieldFocusChange.bind(this);
+		this.isInputFocused = this.isInputFocused.bind(this);
+		this.hasOneFocusedInput = this.hasOneFocusedInput.bind(this);
 	}
 
 	public override render() {
@@ -50,6 +74,9 @@ export default class Form extends React.Component<IProps, IState> {
 					setField: this.setField,
 					unSetField: this.unSetField,
 					onFieldChange: this.onFieldChange,
+					onFieldFocusChange: this.onFieldFocusChange,
+					isInputFocused: this.isInputFocused,
+					hasOneFocusedInput: this.hasOneFocusedInput,
 				}}>
 				<form className={this.props.className} ref={this.formRef} onSubmit={this.onSubmit}>
 					{this.props.children}
@@ -108,7 +135,29 @@ export default class Form extends React.Component<IProps, IState> {
 		delete this.fields[name];
 	}
 
-	protected async onFieldChange(name: string, field: IBaseField) {
+	protected hasOneFocusedInput() {
+		return this.state.inputFocused.focused;
+	}
+
+	protected isInputFocused(name: string) {
+		return this.state.inputFocused.name === name && this.state.inputFocused.focused;
+	}
+
+	protected onFieldFocusChange(name: string, field: IBaseField, focused: boolean) {
+		this.setState({
+			inputFocused: {
+				name,
+				field,
+				focused,
+			},
+		});
+
+		if (this.props.onFieldFocusChange) {
+			this.props.onFieldFocusChange(name, field, focused);
+		}
+	}
+
+	protected onFieldChange(name: string, field: IBaseField) {
 		if (this.props.onFieldChange) {
 			this.props.onFieldChange(name, field);
 		}
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 05a1af1c..20a6108e 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -200,6 +200,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						<div className={classes["sub-section"]}>
 							<div className={classes["folder-conatainer"]}>
 								<SelectField
+									name="select"
 									options={selectOptions}
 									onChange={this.onSelectedOption}
 									placeholder={"Type d'acte"}
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 2bde07bb..bbae4b7b 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -4,13 +4,16 @@ import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import Button from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
+import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import { ValidationError } from "class-validator";
 import { Deed, DeedType, Office, OfficeFolder, OfficeFolderHasStakeholder } from "le-coffre-resources/dist/Notary";
-
 import User from "le-coffre-resources/dist/Notary";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
@@ -18,10 +21,6 @@ import { ActionMeta, MultiValue } from "react-select";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
-import { ValidationError } from "class-validator";
-import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 
 type IFormValues = {
 	folder_number: string;
@@ -103,6 +102,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 							/>
 							<SelectField
 								options={this.state.deedTypesOptions}
+								name="deed"
 								placeholder={"Type d'acte"}
 								onChange={this.onActTypeChange}
 								errors={this.state.validationError.find((error) => error.property === "deed")}
@@ -112,6 +112,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 								placeholder="Note du dossier"
 								onChange={this.onPersonalNoteChange}
 								validationError={this.state.validationError.find((error) => error.property === "description")}
+								required={false}
 							/>
 						</div>
 						<div className={classes["access-container"]}>
@@ -273,7 +274,6 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 		try {
 			await officeFolderForm.validateOrReject?.({ groups: ["createFolder"], forbidUnknownValues: false });
 		} catch (validationErrors) {
-			console.log(validationErrors);
 			this.setState({
 				validationError: validationErrors as ValidationError[],
 			});
@@ -285,22 +285,9 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			if (!newOfficeFolder) return;
 			this.props.router.push(`/folders/${newOfficeFolder.uid}`);
 		} catch (backError: any) {
-			if(backError.target && backError.property){
-				
-				this.setState({
-					validationError: backError as ValidationError[],
-				});
-			}else{
-				console.error(backError);
-				this.setState({
-					validationError: [{
-						constraints: {
-							unique: "Le numéro de dossier est déjà utilisé"
-						},
-						property: "folder_number",
-					} as ValidationError],
-				});
-			}
+			this.setState({
+				validationError: backError as ValidationError[],
+			});
 		}
 	}
 
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
index 5fb1b8f2..3f480fe7 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
@@ -58,7 +58,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 								placeholder="Numéro de dossier"
 								defaultValue={this.state.selectedFolder?.folder_number}
 							/>
-							<Select options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
+							<Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
 							<TextField placeholder="Ouverture du dossier" defaultValue={openingDate.toLocaleDateString("fr-FR")} disabled />
 						</div>
 
diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
index f71fa184..5c48f290 100644
--- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
@@ -50,6 +50,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 							<TextField name="input field" placeholder="Intitulé du dossier" />
 							<TextField name="input field" placeholder="Numéro de dossier" />
 							<Select
+								name="deed"
 								options={selectOptions}
 								onChange={this.onSelectedOption}
 								placeholder={"Type d'acte"}