diff --git a/.ssh/id_rsa.pub b/.ssh/id_rsa.pub
new file mode 100644
index 00000000..e1327d66
--- /dev/null
+++ b/.ssh/id_rsa.pub
@@ -0,0 +1 @@
+ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDOfOFPvQNw5XguFuX1YNvED8ulP+tIA/5xw7LHcA0gRj3hwILCAEAjuDs+d13zCsnEb0yd+laT3PU9iRIKa28Tynu+sTjGDyfx8MX/HjJtbEzyd6jLn87uTvw/6lzg2y5ZDEa6PEqrPIv0KEhuq6HuU8qAA0nBpsTIAUTK3XR8qm3I6J9Rs1JyBjvIP5UeICApvoLmgHuz6mKdvoQ8qKDWamsL4pSc4Hr7HlQ8ITNhnyS8XMgQInU/I2TzT/I4Dxx5IeFUQ5KOfJJNgK1d+PByLSWUrn+eRXki8m1hjMiwGIehVAriFW1C309SEHxLHjQKUPXHSv4kH7zqjO+p3kY5gwp/lvsBRSnihj8s1lADsJlMqjnSLeIQ+sY2CNkmXXI8ABkzhuJKTGTl+8pzGGhIHzeU7e7lpSn3gLn4p217kIppHNAr6dZH9UaYbgnwVonwr5cLbatRPFyI1NfXKDyZtSYlGQxLQUt9KDrNvVTZzaTt3YwM/YCsRIADAagKosM= gisele-smartchain@MacBook-Pro-6.local
diff --git a/Dockerfile.front b/Dockerfile.front
new file mode 100644
index 00000000..11d63f6c
--- /dev/null
+++ b/Dockerfile.front
@@ -0,0 +1,44 @@
+# Install dependencies only when needed
+FROM node:19-alpine AS deps
+
+WORKDIR leCoffre-front
+
+COPY package.json ./
+
+RUN apk update && apk add openssh-client git
+
+COPY id_rsa /root/.ssh/id_rsa
+RUN chmod 600 ~/.ssh/id_rsa
+RUN eval "$(ssh-agent -s)" && ssh-add /root/.ssh/id_rsa
+RUN ssh-keyscan github.com smart-chain-fr/leCoffre-resources.git >> /root/.ssh/known_hosts
+
+RUN npm install --frozen-lockfile
+
+# Rebuild the source code only when needed
+FROM node:19-alpine AS builder
+
+WORKDIR leCoffre-front
+
+COPY --from=deps leCoffre-front/node_modules ./node_modules
+COPY --from=deps leCoffre-front/package.json package.json
+COPY tsconfig.json tsconfig.json
+COPY src src
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM node:19-alpine AS production
+
+WORKDIR leCoffre-front
+
+RUN adduser -D lecoffreuser --uid 10000 && chown -R lecoffreuser .
+
+COPY public ./public
+COPY --from=builder --chown=lecoffreuser leCoffre-front/node_modules ./node_modules
+COPY --from=builder --chown=lecoffreuser leCoffre-front/.next ./.next
+COPY --from=builder --chown=lecoffreuser leCoffre-front/package.json ./package.json
+
+USER lecoffreuser
+
+CMD ["npm", "run", "start"]
+EXPOSE 3000
\ No newline at end of file
diff --git a/src/front/Api/LeCoffreApi/SuperAdmin/Files/Files.ts b/src/front/Api/LeCoffreApi/SuperAdmin/Files/Files.ts
index 534d7b8c..fdad59f3 100644
--- a/src/front/Api/LeCoffreApi/SuperAdmin/Files/Files.ts
+++ b/src/front/Api/LeCoffreApi/SuperAdmin/Files/Files.ts
@@ -53,8 +53,7 @@ export default class Files extends BaseSuperAdmin {
 	}
 
 	public getUploadLink(uid: string): string {
-		console.log("uid", uid);
-		return this.baseURl.concat(`/upload/${uid}`);
+		return this.baseURl.concat(`/download/${uid}`);
 	}
 
 	public async getByUid(uid: string, q?: any): Promise<File> {
diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
index 9a4268f2..9bba001b 100644
--- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
@@ -66,6 +66,10 @@
 					display: flex;
 					align-items: center;
 					gap: 8px;
+					.loader {
+						width: 32px;
+						height: 32px;
+					}
 				}
 
 				.cross {
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 1c5a43be..2a85bbfa 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -16,6 +16,7 @@ import classNames from "classnames";
 import Confirm from "../Modal/Confirm";
 import InputField from "../Form/Elements/InputField";
 import GreenCheckIcon from "@Assets/Icons/green-check.svg";
+import Loader from "../Loader";
 
 type IProps = {
 	defaultFiles?: FileCustomer[];
@@ -28,6 +29,7 @@ type IFile = {
 	file: File;
 	uid: string;
 	archived: Date | null;
+	fileName: string;
 };
 
 type IState = {
@@ -36,6 +38,7 @@ type IState = {
 	currentFiles?: FileCustomer[];
 	refusedReason?: string;
 	isShowRefusedReasonModalVisible: boolean;
+	loading: boolean;
 };
 
 export default class DepositDocument extends React.Component<IProps, IState> {
@@ -51,6 +54,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 			currentFiles: this.props.defaultFiles,
 			refusedReason: "",
 			isShowRefusedReasonModalVisible: false,
+			loading: false,
 		};
 
 		this.addDocument = this.addDocument.bind(this);
@@ -118,7 +122,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 										<div className={classes["left-part"]}>
 											<Image src={DocumentCheckIcon} alt="Document check" />
 											<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
-												{this.shortName(fileObj.name)}
+												{this.shortName(file.fileName || fileObj.name)}
 											</Typography>
 										</div>
 										<Image
@@ -131,6 +135,19 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									</div>
 								);
 							})}
+							{this.state.loading && (
+								<div className={classes["file-container"]}>
+									<div className={classes["left-part"]}>
+										<div className={classes["loader"]}>
+											<Loader />
+										</div>
+										<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+											Chargement...
+										</Typography>
+									</div>
+									<div />
+								</div>
+							)}
 						</div>
 					)}
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
@@ -174,6 +191,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					index: this.index++,
 					file: new File([""], file.file_path ?? "", {}),
 					uid: file.uid!,
+					fileName: file.file_name,
 					archived: file.archived_at ? new Date(file.archived_at) : null,
 				})),
 			});
@@ -276,12 +294,15 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		formData.append("file", file, file.name);
 		const query = JSON.stringify({ document: { uid: this.props.document.uid } });
 		formData.append("q", query);
-
+		this.setState({
+			loading: true,
+		});
 		const newFile = await Files.getInstance().post(formData);
 		const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
 
 		this.setState({
 			currentFiles: files,
+			loading: false,
 			files: [
 				...this.state.files,
 				{
@@ -289,6 +310,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					file: file,
 					uid: newFile.uid!,
 					archived: null,
+					fileName: newFile?.file_name ?? "",
 				},
 			],
 		});
diff --git a/src/front/Components/DesignSystem/FilePreview/index.tsx b/src/front/Components/DesignSystem/FilePreview/index.tsx
index 37ad48e0..abc4f51b 100644
--- a/src/front/Components/DesignSystem/FilePreview/index.tsx
+++ b/src/front/Components/DesignSystem/FilePreview/index.tsx
@@ -5,12 +5,14 @@ import classes from "./classes.module.scss";
 
 type IProps = {
 	href: string;
+	fileName?: string;
 };
 type IState = {};
 
 export default class FilePreview extends React.Component<IProps, IState> {
 	override render() {
-		const type = this.props.href.split(".").pop();
+		let type = this.props.href.split(".").pop();
+		if(this.props.fileName) type = this.props.fileName.split(".").pop();
 		return (
 			<div className={classes["root"]}>
 				{!type && (
@@ -18,14 +20,12 @@ export default class FilePreview extends React.Component<IProps, IState> {
 						Erreur lors du chargement du fichier
 					</Typography>
 				)}
-				{type && (
-					<div className={classes["file-container"]}>
-						{type === "pdf" && (
+				<div className={classes["file-container"]}>
+						{type?.toLowerCase() === "pdf" && (
 							<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
 						)}
-						{type !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
+						{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
 					</div>
-				)}
 			</div>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/Loader/classes.module.scss b/src/front/Components/DesignSystem/Loader/classes.module.scss
index 37403d86..e2169b11 100644
--- a/src/front/Components/DesignSystem/Loader/classes.module.scss
+++ b/src/front/Components/DesignSystem/Loader/classes.module.scss
@@ -1,16 +1,15 @@
-@import "@Themes/constants.scss";
-
-.loader {
-	animation: spin 2s linear infinite;
-	width: 100%;
-	height: 100%;
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
+@keyframes s2 {
+	to {
+		transform: rotate(1turn);
 	}
 }
+
+.root {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	border: 8px solid;
+	border-color: var(--grey-soft);
+	border-right-color: var(--blue-soft);
+	animation: s2 1s infinite linear;
+}
diff --git a/src/front/Components/DesignSystem/Loader/index.tsx b/src/front/Components/DesignSystem/Loader/index.tsx
index 09b63940..e2e13e26 100644
--- a/src/front/Components/DesignSystem/Loader/index.tsx
+++ b/src/front/Components/DesignSystem/Loader/index.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import LoaderIcon from "@Assets/Icons/loader.svg";
 import classes from "./classes.module.scss";
-import Image from "next/image";
 
 interface IProps {
 	className?: string;
 }
 export default class Loader extends React.Component<IProps> {
 	public override render(): JSX.Element {
-		return <Image src={LoaderIcon} className={[classes["loader"], this.props.className].filter(Boolean).join(" ")} alt={"Loader"} />;
-		// <LoaderIcon className={[classes["loader"], this.props.className].filter(Boolean).join(" ")} />;
+		return <div className={classes["root"]}></div>;
 	}
 }
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 69c260a9..1ac9c26d 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -91,6 +91,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["file-container"]}>
 								<FilePreview
 									href={Files.getInstance().getUploadLink(this.state.selectedFile?.uid as string)}
+									fileName={this.state.selectedFile.file_name}
 									key={this.state.selectedFile.uid}
 								/>
 							</div>