diff --git a/src/front/Components/Layouts/Rib/classes.module.scss b/src/front/Components/Layouts/Rib/classes.module.scss
index 13f423ce..0f56bc8b 100644
--- a/src/front/Components/Layouts/Rib/classes.module.scss
+++ b/src/front/Components/Layouts/Rib/classes.module.scss
@@ -5,6 +5,16 @@
 		margin-top: 24px;
 	}
 
+	.loader-container {
+		display: flex;
+		justify-content: center;
+		margin-top: 150px;
+		.loader {
+			width: 32px;
+			height: 32px;
+		}
+	}
+
 	.title {
 		margin-top: 24px;
 	}
diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx
index 0555dd0e..0e4507b7 100644
--- a/src/front/Components/Layouts/Rib/index.tsx
+++ b/src/front/Components/Layouts/Rib/index.tsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Loader from "@Front/Components/DesignSystem/Loader";
 
 export default function Rib() {
 	const [documentList, setDocumentList] = useState<File[]>([]);
@@ -18,13 +19,12 @@ export default function Rib() {
 	const [key, setKey] = useState<string>("");
 	const [isRibModalOpen, setIsRibModalOpen] = useState<boolean>(false);
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
-
+	const [isLoading, setIsLoading] = useState<boolean>(true);
 	//Put fetch data in a useCallback
 
 	const fetchData = useCallback(async () => {
 		try {
 			const blob = await OfficeRib.getInstance().getRibStream();
-
 			setFileBlob(blob.blob);
 			setKey(key);
 			setFileName(blob.fileName);
@@ -33,6 +33,7 @@ export default function Rib() {
 			setFileName("");
 			setKey("");
 		}
+		setIsLoading(false);
 	}, [key]);
 
 	useEffect(() => {
@@ -96,44 +97,49 @@ export default function Rib() {
 				<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
 					RIB de l'office
 				</Typography>
-
-				{!fileBlob && (
-					<div className={classes["document-container"]}>
-						<div>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-								Aucun RIB n'a été déposé pour cet office
-							</Typography>
+				{isLoading && (
+					<div className={classes["loader-container"]}>
+						<div className={classes["loader"]}>
+							<Loader />
 						</div>
 					</div>
 				)}
-
-				{!fileBlob && (
-					<div className={classes["footer"]}>
-						<div className={classes["buttons-container"]}>
-							<Button onClick={openRibModal}>Déposer un RIB</Button>
+				{!isLoading && !fileBlob && (
+					<>
+						<div className={classes["document-container"]}>
+							<div>
+								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									Aucun RIB n'a été déposé pour cet office
+								</Typography>
+							</div>
 						</div>
-					</div>
+						<div className={classes["footer"]}>
+							<div className={classes["buttons-container"]}>
+								<Button onClick={openRibModal}>Déposer un RIB</Button>
+							</div>
+						</div>
+					</>
 				)}
 
-				{fileBlob && (
-					<div className={classes["document-container"]}>
-						<div className={classes["file-container"]}>
-							{fileBlob && <FilePreview href={fileBlob ? URL.createObjectURL(fileBlob) : ""} fileName={fileName} />}
+				{!isLoading && fileBlob && (
+					<>
+						<div className={classes["document-container"]}>
+							<div className={classes["file-container"]}>
+								{fileBlob && <FilePreview href={fileBlob ? URL.createObjectURL(fileBlob) : ""} fileName={fileName} />}
+							</div>
 						</div>
-					</div>
-				)}
-				{fileBlob && (
-					<div className={classes["footer"]}>
-						<div className={classes["buttons-container"]}>
-							<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
-								Supprimer
-							</Button>
-							<Button onClick={openRibModal} variant={EButtonVariant.GHOST}>
-								Modifier
-							</Button>
-							<Button onClick={downloadFile}>Télécharger</Button>
+						<div className={classes["footer"]}>
+							<div className={classes["buttons-container"]}>
+								<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
+									Supprimer
+								</Button>
+								<Button onClick={openRibModal} variant={EButtonVariant.GHOST}>
+									Modifier
+								</Button>
+								<Button onClick={downloadFile}>Télécharger</Button>
+							</div>
 						</div>
-					</div>
+					</>
 				)}
 
 				<Confirm