diff --git a/src/front/Assets/Icons/document-check.svg b/src/front/Assets/Icons/document-check.svg
new file mode 100644
index 00000000..09925cc3
--- /dev/null
+++ b/src/front/Assets/Icons/document-check.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16ZM4 16C4 22.6274 9.37258 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16Z" fill="#3FA79E"/>
+<path d="M22 12L13.75 20.5714L10 16.6753" stroke="#3FA79E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
index cbe37af9..75681546 100644
--- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
@@ -13,7 +13,7 @@
 		.separator {
 			background-color: #939393;
 			width: 1px;
-            align-self: stretch;
+			align-self: stretch;
 		}
 
 		.right {
@@ -27,13 +27,33 @@
 		}
 	}
 
+	.documents-container {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		margin-top: 16px;
+
+		.file-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            
+			.left-part {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+		}
+	}
+
 	.bottom-container {
-        .add-button{
-            .add-document{
-                display: flex;
-                align-items: center;
-                gap: 14px;
-            }
-        }
+		margin-top: 16px;
+		.add-button {
+			.add-document {
+				display: flex;
+				align-items: center;
+				gap: 14px;
+			}
+		}
 	}
 }
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 3bef2c68..f7c1b220 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -1,5 +1,7 @@
 import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
+import CrossIcon from "@Assets/Icons/cross.svg";
+import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 import React from "react";
 
@@ -7,17 +9,43 @@ import Button, { EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import { Document } from "le-coffre-resources/dist/Customer";
 
 type IProps = {
 	title: string;
 	dateAsked: Date;
+	defaultDocuments?: Document[];
+};
+
+type IFile = {
+	index: number;
+	file: File;
+};
+
+type IState = {
+	files: IFile[];
 };
-type IState = {};
 
 export default class DepositDocument extends React.Component<IProps, IState> {
+	private inputRef = React.createRef<HTMLInputElement>();
+	private index = 0;
+
+	public constructor(props: IProps) {
+		super(props);
+
+		this.state = {
+			files: [],
+		};
+
+		this.addDocument = this.addDocument.bind(this);
+		this.onFileChange = this.onFileChange.bind(this);
+		this.removeFile = this.removeFile.bind(this);
+	}
+
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
+				<input type="file" ref={this.inputRef} hidden onChange={this.onFileChange} />
 				<div className={classes["top-container"]}>
 					<div className={classes["left"]}>
 						<Image src={DepositDocumentIcon} alt="Deposit document" />
@@ -32,6 +60,31 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</Typography>
 					</div>
 				</div>
+				{this.state.files.length > 0 && (
+					<div className={classes["documents-container"]}>
+						{this.state.files.map((file) => {
+							const fileObj = file.file;
+							return (
+								<div className={classes["file-container"]} key={fileObj.name + file.index}>
+									<div className={classes["left-part"]}>
+										<Image src={DocumentCheckIcon} alt="Document check" />
+										<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+											{fileObj.name}
+										</Typography>
+									</div>
+									<Image
+										src={CrossIcon}
+										alt="Cross icon"
+										className={classes["cross"]}
+										onClick={this.removeFile}
+										data-file={file.index}
+									/>
+								</div>
+							);
+						})}
+					</div>
+				)}
+
 				<div className={classes["bottom-container"]}>
 					<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
 						<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
@@ -43,7 +96,37 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		);
 	}
 
-	private addDocument() {}
+	private removeFile(e: any) {
+		const image = e.target as HTMLElement;
+		const indexToRemove = image.getAttribute("data-file");
+		if (!indexToRemove) return;
+		this.setState({
+			files: this.state.files.filter((file) => file.index !== parseInt(indexToRemove)),
+		});
+	}
+
+	private async onFileChange() {
+		if (!this.inputRef.current) return;
+		const files = this.inputRef.current.files;
+		if (!files) return;
+		const file = files[0];
+
+		if (!file) return;
+		this.setState({
+			files: [
+				...this.state.files,
+				{
+					index: this.index++,
+					file: file,
+				},
+			],
+		});
+	}
+
+	private addDocument() {
+		if (!this.inputRef.current) return;
+		this.inputRef.current.click();
+	}
 
 	private formatDate(date: Date) {
 		return date.toLocaleDateString("fr-FR");