diff --git a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
index fee4c733..536c24ef 100644
--- a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
+++ b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
@@ -10,6 +10,20 @@
 		border: 1px solid $grey-medium;
 		background-color: transparent;
 
+		.placeholder {
+			position: absolute;
+			top: 24px;
+			left: 24px;
+			pointer-events: none;
+			display: flex;
+			align-items: center;
+			transition: top 0.3s ease-in-out;
+			background-color: white;
+			padding: 0 4px;
+			&[data-selected="true"] {
+				top: -12px;
+			}
+		}
 		.label {
 			font-family: var(--font-primary);
 			font-style: normal;
diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx
index aa476069..516ab2ac 100644
--- a/src/front/Components/DesignSystem/MultiSelect/index.tsx
+++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx
@@ -1,11 +1,11 @@
+import classNames from "classnames";
 import React from "react";
 import ReactSelect, { ActionMeta, MultiValue, Options, PropsValue } from "react-select";
 
-import { styles } from "./styles";
-import classes from "./classes.module.scss";
 import { IOption } from "../Select";
 import Typography, { ITypo } from "../Typography";
-import classNames from "classnames";
+import classes from "./classes.module.scss";
+import { styles } from "./styles";
 
 type IProps = {
 	options: IOption[];
@@ -20,6 +20,7 @@ type IProps = {
 };
 type IState = {
 	isSelectedOption: boolean;
+	isFocused: boolean;
 };
 
 export default class MultiSelect extends React.Component<IProps, IState> {
@@ -31,25 +32,28 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		super(props);
 		this.state = {
 			isSelectedOption: this.props.defaultValue ? true : false,
+			isFocused: false,
 		};
 		this.onChange = this.onChange.bind(this);
 		this.onEmptyResearch = this.onEmptyResearch.bind(this);
+		this.onFocus = this.onFocus.bind(this);
+		this.onBlur = this.onBlur.bind(this);
 	}
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
 				<div className={classNames(classes["label-container"], this.state.isSelectedOption && classes["active"])}>
 					{this.props.label && <div className={classes["label"]}>{this.props.label}</div>}
-					{this.state.isSelectedOption && (
-						<>
-							<Typography typo={ITypo.NAV_INPUT_16}>
-								<div className={classes["is-active-placeholder"]}>{this.props.placeholder}</div>
-							</Typography>
-						</>
+					{this.props.placeholder && (
+						<div
+							className={classes["placeholder"]}
+							data-selected={(this.state.isFocused || this.state.isSelectedOption).toString()}>
+							<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
+						</div>
 					)}
 					<div className={classes["input-container"]}>
 						<ReactSelect
-							placeholder={this.props.placeholder}
+							placeholder={""}
 							options={this.props.options}
 							styles={styles}
 							onChange={this.onChange}
@@ -59,6 +63,8 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 							isMulti
 							isOptionDisabled={this.props.isOptionDisabled}
 							noOptionsMessage={this.onEmptyResearch}
+							onFocus={this.onFocus}
+							onBlur={this.onBlur}
 						/>
 					</div>
 				</div>
@@ -66,6 +72,14 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		);
 	}
 
+	private onFocus() {
+		this.setState({ isFocused: true });
+	}
+
+	private onBlur() {
+		this.setState({ isFocused: false });
+	}
+
 	private onChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
 		this.props.onChange && this.props.onChange(newValue, actionMeta);
 		this.setState({ isSelectedOption: newValue.length > 0 });