diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts
index 0bef5a44..252c615b 100644
--- a/src/front/Components/Layouts/DesignSystem/dummyData.ts
+++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts
@@ -131,7 +131,7 @@ export const documentPending: Document = {
 	document_type: docType,
 	updated_at: new Date(),
 	created_at: new Date(),
-	files: [fileMock2],
+	files: [fileMock,fileMock2],
 };
 
 export const documentDeposited: Document = {
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 6a2dd5e3..bcc68904 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -11,7 +11,7 @@ import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import { Document } from "le-coffre-resources/dist/Customer";
+import { Document, File } from "le-coffre-resources/dist/Customer";
 import Image from "next/image";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
@@ -19,9 +19,9 @@ import React from "react";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 
+
 type IProps = {};
 type IPropsClass = {
-	documentsList: Document[];
 	selectedDocument: Document | null;
 	router: NextRouter;
 	folderUid: string;
@@ -32,8 +32,8 @@ type IState = {
 	isValidateModalVisible: boolean;
 	refuseText: string;
 	hasValidateAnchoring: boolean;
-	selectedDocument: Document | null;
-	selectedDocumentIndex: number;
+	selectedFileIndex: number;
+	selectedFile: File | null;
 };
 
 class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
@@ -45,8 +45,8 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			isRefuseModalVisible: false,
 			refuseText: "",
 			hasValidateAnchoring: false,
-			selectedDocument: null,
-			selectedDocumentIndex: -1,
+			selectedFileIndex: 0,
+			selectedFile: null,
 		};
 
 		this.closeModals = this.closeModals.bind(this);
@@ -59,21 +59,23 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 
 		this.hasPrevious = this.hasPrevious.bind(this);
 		this.hasNext = this.hasNext.bind(this);
+
+		this.downloadFile = this.downloadFile.bind(this);
 	}
 
 	public override render(): JSX.Element | null {
 		return (
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
-				{this.state.selectedDocument && (
+				{this.props.selectedDocument && this.props.selectedDocument.files && this.state.selectedFile && (
 					<div className={classes["root"]}>
 						<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
 							App 23 rue Torus Toulon
 						</Typography>
 						<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
-							{this.state.selectedDocument.document_type.name}
+							{this.props.selectedDocument.document_type.name}
 						</Typography>
 						<div className={classes["document-container"]}>
-							{this.props.documentsList.length > 1 && (
+							{this.props.selectedDocument.files.length > 1 && (
 								<div
 									className={classes["arrow-container"]}
 									onClick={this.goToPrevious}
@@ -82,11 +84,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 								</div>
 							)}
 							<div className={classes["file-container"]}>
-								{this.state.selectedDocument.files?.map((file) => (
-									<FilePreview href={file.file_path as string} key={file.uid} />
-								))}
+								<FilePreview href={this.state.selectedFile.file_path as string} key={this.state.selectedFile.uid} />
 							</div>
-							{this.props.documentsList.length > 1 && (
+							{this.props.selectedDocument.files.length > 1 && (
 								<div
 									className={classes["arrow-container"]}
 									onClick={this.goToNext}
@@ -96,11 +96,20 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							)}
 						</div>
 						<div className={classes["buttons-container"]}>
-							<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
-								Refuser
-							</Button>
-							<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
-							<Button disabled>Télécharger</Button>
+							{this.props.selectedDocument?.document_status === "PENDING" && (
+								<>
+									<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
+										Refuser
+									</Button>
+									<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
+									<Button disabled>Télécharger</Button>
+								</>
+							)}
+							{this.props.selectedDocument?.document_status === "VALIDATED" && (
+								<>
+									<Button onClick={this.downloadFile}>Télécharger</Button>
+								</>
+							)}
 						</div>
 						<Confirm
 							isOpen={this.state.isValidateModalVisible}
@@ -138,8 +147,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							closeBtn
 							header={"Refuser le document ?"}
 							cancelText={"Annuler"}
-							confirmText={"Refuser"}
-							>
+							confirmText={"Refuser"}>
 							<div className={classes["refuse-document-container"]}>
 								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
 									Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
@@ -150,7 +158,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 						</Confirm>
 					</div>
 				)}
-				{!this.state.selectedDocument && (
+				{(!this.state.selectedFile || !this.props.selectedDocument) && (
 					<div className={classes["root"]}>
 						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
@@ -162,46 +170,52 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	}
 
 	override componentDidMount(): void {
-		if (!this.props.selectedDocument) return;
+		if (!this.props.selectedDocument || !this.props.selectedDocument.files || !this.props.selectedDocument.files[0]) return;
 		this.setState({
-			selectedDocument: this.props.selectedDocument,
-			selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
+			selectedFile: this.props.selectedDocument.files[0],
+			selectedFileIndex: 0,
 		});
 	}
 
-	override componentDidUpdate(prevProps: Readonly<IPropsClass>, prevState: Readonly<IState>, snapshot?: any): void {
-		if (prevProps.selectedDocument !== this.props.selectedDocument) {
-			this.setState({
-				selectedDocument: this.props.selectedDocument,
-				selectedDocumentIndex: this.props.documentsList.findIndex((doc) => doc.uid === this.props.selectedDocument!.uid),
-			});
-		}
+	private downloadFile() {
+		var link = document.createElement("a");
+		// If you don't know the name or want to use
+		// the webserver default set name = ''
+		link.setAttribute("download", "super_nom.pdf");
+		link.href = "/";
+		document.body.appendChild(link);
+		link.click();
+		link.remove();
 	}
 
 	private goToPrevious() {
+		const index = this.state.selectedFileIndex - 1;
 		if (this.hasPrevious()) {
-			this.props.router.push(
-				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex - 1]!.uid}`,
-			);
+			this.setState({
+				selectedFile: this.props.selectedDocument!.files![index]!,
+				selectedFileIndex: index,
+			});
 		}
 	}
 
 	private goToNext() {
 		if (this.hasNext()) {
-			this.props.router.push(
-				`/folders/${this.props.folderUid}/documents/${this.props.documentsList[this.state.selectedDocumentIndex + 1]!.uid}`,
-			);
+			const index = this.state.selectedFileIndex + 1;
+			this.setState({
+				selectedFile: this.props.selectedDocument!.files![index]!,
+				selectedFileIndex: index,
+			});
 		}
 	}
 
 	private hasPrevious() {
-		const index = this.state.selectedDocumentIndex - 1;
+		const index = this.state.selectedFileIndex - 1;
 		return index >= 0;
 	}
 
 	private hasNext() {
-		const index = this.state.selectedDocumentIndex + 1;
-		return index < this.props.documentsList.length;
+		const index = this.state.selectedFileIndex + 1;
+		return index < this.props.selectedDocument!.files!.length;
 	}
 
 	private validateAnchoring() {
@@ -256,13 +270,5 @@ export default function ViewDocuments(props: IProps) {
 	const folder = folders[0]!;
 	const documents = folder.documents!.filter((document) => document.document_status !== "ASKED");
 	const selectedDocument = documents.find((document) => document.uid === documentUid) ?? null;
-	return (
-		<ViewDocumentsClass
-			{...props}
-			documentsList={documents}
-			selectedDocument={selectedDocument}
-			router={router}
-			folderUid={folderUid as string}
-		/>
-	);
+	return <ViewDocumentsClass {...props} selectedDocument={selectedDocument} router={router} folderUid={folderUid as string} />;
 }