diff --git a/src/api/authentication.js b/src/api/authentication.js
index 77cc1ae..4587110 100644
--- a/src/api/authentication.js
+++ b/src/api/authentication.js
@@ -18,7 +18,6 @@ export const login = async (username, password) => {
 
     return response.data;
   } catch (error) {
-    window.location.reload();
     return error.response.data;
   }
 };
diff --git a/src/api/items.js b/src/api/items.js
index de8a7bc..0f8ca38 100644
--- a/src/api/items.js
+++ b/src/api/items.js
@@ -35,6 +35,12 @@ export const updateItem = async (settings) => {
     formData.append("description", settings.description);
     formData.append("purchaseDate", settings.purchaseDate);
     formData.append("link", settings.link);
+    formData.append("invoice", settings.invoice);
+
+    // je ne sais pas si ca va bug sans je verrai apres
+    if (settings.image) {
+      formData.append("image", settings.image);
+    }
 
     const response = await axios.put(`/item/${settings._id}`, formData);
     return response.data;
diff --git a/src/api/rooms.js b/src/api/rooms.js
index 159962e..266a25e 100644
--- a/src/api/rooms.js
+++ b/src/api/rooms.js
@@ -103,6 +103,16 @@ export const getRooms = async () => {
   }
 };
 
+export const getRoomsLength = async () => {
+  try {
+    const response = await getRooms();
+    return response.length;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+};
+
 export const getRoom = async (id) => {
   try {
     const response = await axios.get(`/room/${id}`);
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 6651f60..b9514b1 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -2,37 +2,60 @@ import { useAuth } from "../../hooks";
 import "./NavBar.scss";
 import { logout } from "../../api";
 import { Link } from "react-router-dom/";
+import { getRoomsLength } from "../../api";
+import { useEffect } from "react";
+import { useState } from "react";
+import refresh from "../../services/pageManagement";
 
 export default function NavBar() {
   const { user } = useAuth();
+  const [roomsLength, setRoomsLength] = useState(null);
 
   const onLogout = () => {
     logout().then((res) => {
       if (res === "Ok") {
-        window.location.reload();
+        refresh();
       }
     });
   };
 
+  const refreshAllDatas = async () => {
+    const roomsLen = await getRoomsLength();
+    if (!roomsLen) {
+      return;
+    }
+    setRoomsLength(roomsLen);
+  };
+
+  useEffect(() => {
+    refreshAllDatas();
+  }, []);
+
   return (
     <nav id="nav-container">
       <ul id="leafs-container">
         {user && (
           <li className="leaf">
-            <Link to="/">Accueil</Link>
+            <Link onClick={refreshAllDatas} to="/">
+              Accueil
+            </Link>
           </li>
         )}
 
         {user && (
           <li className="leaf">
-            <Link to="rooms">Pieces</Link>
+            <Link onClick={refreshAllDatas} to="rooms">
+              Pieces {roomsLength ? `(${roomsLength})` : "(██)"}
+            </Link>
           </li>
         )}
 
         {user ? (
           <div className="leaf-into">
             <li className="leaf">
-              <Link to="profile">Profil</Link>
+              <Link onClick={refreshAllDatas} to="profile">
+                Profil
+              </Link>
             </li>
 
             <button className="leaf-btn" onClick={onLogout}>
diff --git a/src/pages/profile/Profile.jsx b/src/pages/profile/Profile.jsx
index a946b0a..b49b2c7 100644
--- a/src/pages/profile/Profile.jsx
+++ b/src/pages/profile/Profile.jsx
@@ -12,6 +12,7 @@ import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
 import passwordCheck from "../../services/password";
 import LoaderSpace from "./../../components/LoaderSpace/LoaderSpace";
 import clipboardCopy from "clipboard-copy";
+import refresh from "../../services/pageManagement";
 //Bilouuuuuuu94!@@
 
 export default function Profile() {
@@ -99,7 +100,7 @@ export default function Profile() {
       _id: user.user._id,
     }).then((res) => {
       logout().then((_) => {
-        window.location.reload();
+        refresh();
       });
       console.log(res);
       console.log(oldPPassword, password, confirmPassword);
@@ -122,7 +123,7 @@ export default function Profile() {
   const handleDeleteUser = () => {
     deleteUser(user.user._id).then((_) => {
       logout().then((res) => {
-        window.location.reload();
+        refresh();
       });
     });
   };
diff --git a/src/pages/room/Room.jsx b/src/pages/room/Room.jsx
index 952510d..aa67538 100644
--- a/src/pages/room/Room.jsx
+++ b/src/pages/room/Room.jsx
@@ -7,6 +7,8 @@ import { createItem, deleteItem, updateItem } from "../../api/";
 import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
 import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 import { useAuth } from "../../hooks";
+import { Link } from "react-router-dom";
+import refresh from "../../services/pageManagement";
 
 export default function Room() {
   const { _user } = useAuth();
@@ -29,12 +31,15 @@ export default function Room() {
   }, []);
 
   const handleFormUpdateDataChange = (e, name) => {
-    console.log(e.target.value);
     const cpy = { ...formUpdateData };
+
     cpy[name] =
       name === "purchaseDate"
         ? new Date(e.target.value).toISOString()
-        : e.target.value;
+        : name === "image" || name === "invoice"
+          ? e.target.files[0]
+          : e.target.value;
+
     setFormUpdateData(cpy);
   };
 
@@ -46,8 +51,6 @@ export default function Room() {
     if (item) {
       const cpy = { ...item };
       delete cpy.createdAt;
-      delete cpy.image;
-      delete cpy.invoice;
       delete cpy.user;
       delete cpy.updatedAt;
       delete cpy.__v;
@@ -78,6 +81,7 @@ export default function Room() {
         // TODO: Je ferai une modification unitaire plus tard
         getRoom(id).then((res) => {
           handleFormUpdate();
+          console.log(res);
           setData(res);
         });
       });
@@ -103,7 +107,7 @@ export default function Room() {
       createItem(settings).then((_) => {
         // Je prefere faire ca que d'actualiser le state[data.items] car
         // l'image ne se charge pas correctement
-        window.location.reload();
+        refresh();
       });
 
       handleForm();
@@ -195,6 +199,26 @@ export default function Room() {
                   {new Date(e.purchaseDate).toLocaleDateString("FR-fr")}
                 </span>
               </div>
+
+              <div className="item-invoice-container">
+                Facture ➜
+                <span className="item-invoice">
+                  {e.invoice ? (
+                    <Link
+                      target="_blank"
+                      to={
+                        e.invoice._id
+                          ? `https://but-3-dev-project-back.onrender.com/api/file/${e.invoice._id}`
+                          : "#"
+                      }
+                    >
+                      {e.invoice._id ? "ICI" : "Pas de facture"}
+                    </Link>
+                  ) : (
+                    <div>Pas de facture.</div>
+                  )}
+                </span>
+              </div>
             </div>
           ))}
         </div>
@@ -292,6 +316,18 @@ export default function Room() {
               type="text"
               placeholder={`(Lien) ${formUpdateData.link}`}
             />
+            <input
+              type="file"
+              onChange={(e) => {
+                handleFormUpdateDataChange(e, "image");
+              }}
+            />
+            <input
+              type="file"
+              onChange={(e) => {
+                handleFormUpdateDataChange(e, "invoice");
+              }}
+            />
 
             <div id="actions">
               <StylizedBtn
diff --git a/src/pages/room/Room.scss b/src/pages/room/Room.scss
index f303694..82096dc 100644
--- a/src/pages/room/Room.scss
+++ b/src/pages/room/Room.scss
@@ -135,6 +135,17 @@
                     font-weight: bold;
                 }
             }
+
+            .item-invoice-container {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                gap: 5px;
+
+                .item-invoice {
+                    font-weight: bold;
+                }
+            }
         }
     }
 
diff --git a/src/pages/rooms/Rooms.jsx b/src/pages/rooms/Rooms.jsx
index 1bb03d1..4856733 100644
--- a/src/pages/rooms/Rooms.jsx
+++ b/src/pages/rooms/Rooms.jsx
@@ -5,13 +5,17 @@ import { Link } from "react-router-dom";
 import LoaderSpace from "../../components/LoaderSpace/LoaderSpace";
 import AddBtn from "./../../components/AddBtn/AddBtn";
 import { useAuth } from "../../hooks";
+import { useParams } from "react-router-dom";
+import StylizedBtn from "../../components/StylizedBtn/StylizedBtn";
 
 export default function Rooms() {
   const { _user } = useAuth();
   const [rooms, setRooms] = useState(null);
   const [isLoad, setIsLoad] = useState(true);
   const [isErr, setIsErr] = useState(false);
-  const [splicedRooms, setSplicedRooms] = useState(null);
+  const [displayRooms, setDisplayRooms] = useState(null);
+  const { pageIndex } = useParams();
+  const [virtualIndex, setVirtualIndex] = useState(0);
 
   const onClickCreate = () => {
     const name = prompt("Nom de la piece ?");
@@ -37,7 +41,44 @@ export default function Rooms() {
       return partitions;
     };
 
-    console.log(splicer(data, 8));
+    const newData = splicer(data, 8);
+    const blabla = newData[pageIndex ? pageIndex : 0];
+
+    if (pageIndex) {
+      setVirtualIndex(parseInt(pageIndex, 10));
+    }
+
+    setRooms(newData);
+
+    console.log(newData[pageIndex ? pageIndex : 0]);
+    setDisplayRooms(newData[pageIndex ? pageIndex : 0]);
+
+    if (!blabla) {
+      window.location.href = "/rooms/0";
+      setVirtualIndex(0);
+    }
+  };
+
+  const handleBefore = () => {
+    if (virtualIndex === 0) {
+      return;
+    }
+
+    const index = virtualIndex - 1;
+    console.log(rooms[index]);
+    setDisplayRooms(rooms[index]);
+    setVirtualIndex(index);
+  };
+
+  const handleNext = () => {
+    if (virtualIndex >= rooms.length - 1) {
+      return;
+    }
+
+    const index = virtualIndex + 1;
+    console.log(rooms[index]);
+    setDisplayRooms(rooms[index]);
+    setVirtualIndex(index);
   };
 
   const onClickDelete = (id, name) => {
@@ -70,9 +111,9 @@ export default function Rooms() {
 
   return (
     <div id="rooms-container">
-      {rooms ? (
+      {displayRooms ? (
         <div id="rooms-list-container">
-          {rooms.map((i, j) => (
+          {displayRooms.map((i, j) => (
             <div className="room" key={j}>
               <div
                 className="room-delete"
@@ -86,12 +127,7 @@ export default function Rooms() {
               <div className="room-id-container">
                 <span className="label-id">ID</span>
                 <span className="room-id">
-                  {i._id[0]}
-                  {i._id[1]}
-                  {i._id[2]}
-                  {i._id[3]}
-                  {i._id[4]}
-                  {i._id[5]}
+                  {i._id.slice(0, 5)}
                   ...
                 </span>
               </div>
@@ -109,6 +145,28 @@ export default function Rooms() {
         <LoaderSpace isVisible={isLoad} isCenterLoader={true} />
       )}
 
+      {rooms ? (
+        <div id="pagination-container">
+          {virtualIndex > 0 ? (
+            <StylizedBtn
+              perso_style={{ width: "90px", height: "40px" }}
+              text="Precedent"
+              handle={handleBefore}
+            />
+          ) : null}
+
+          <div id="pagination-index">{virtualIndex}</div>
+
+          {virtualIndex < rooms.length - 1 ? (
+            <StylizedBtn
+              perso_style={{ width: "90px", height: "40px" }}
+              text="Suivant"
+              handle={handleNext}
+            />
+          ) : null}
+        </div>
+      ) : null}
+
       {isErr && !isLoad ? (
         <span id="err-no-rooms">Vous n'avez pas de piece pour le moment !</span>
       ) : null}
diff --git a/src/pages/rooms/Rooms.scss b/src/pages/rooms/Rooms.scss
index a5828ea..9be159b 100644
--- a/src/pages/rooms/Rooms.scss
+++ b/src/pages/rooms/Rooms.scss
@@ -3,6 +3,39 @@
 #rooms-container {
     height: 100%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+    #pagination-container {
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        #pagination-index {
+            border-radius: 50px;
+            background: $white;
+            color: $primary;
+            border: 2px dashed $primary;
+            font-weight: bold;
+            width: 35px;
+            height: 35px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &::selection {
+                background: transparent;
+                color: $primary;
+            }
+        }
+
+        button {
+        }
+    }
 
     #err-no-rooms {
         height: 100%;
diff --git a/src/router.jsx b/src/router.jsx
index 81dcca8..134a17d 100644
--- a/src/router.jsx
+++ b/src/router.jsx
@@ -13,7 +13,7 @@ export const Router = () => (
     <Route path="login" element={<Login />} />
     <Route path="register" element={<Register />} />
     <Route path="rooms/" element={<Rooms />} />
-    {/* maybe <Route path="rooms/:page" element={<Rooms />} /> */}
+    <Route path="rooms/:pageIndex" element={<Rooms />} />
     <Route path="room/:id" element={<Room />} />
     <Route path="profile" element={<Profile />} />
   </Routes>
diff --git a/src/services/pageManagement.js b/src/services/pageManagement.js
new file mode 100644
index 0000000..f3fb596
--- /dev/null
+++ b/src/services/pageManagement.js
@@ -0,0 +1,6 @@
+/**
+ * Par preference je prefere utiliser ca que la modification reactive.
+ */
+export default function refresh() {
+  window.location.reload();
+}