diff --git a/apps/releaf/mobile/package-lock.json b/apps/releaf/mobile/package-lock.json
index 1b3816b..747510a 100644
--- a/apps/releaf/mobile/package-lock.json
+++ b/apps/releaf/mobile/package-lock.json
@@ -18,6 +18,7 @@
         "@react-navigation/native-stack": "^6.9.26",
         "date-fns": "^3.6.0",
         "metro-config": "^0.80.3",
+        "moment": "^2.30.1",
         "nativewind": "^2.0.11",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -9941,6 +9942,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/apps/releaf/mobile/package.json b/apps/releaf/mobile/package.json
index d6f6f54..11beac5 100644
--- a/apps/releaf/mobile/package.json
+++ b/apps/releaf/mobile/package.json
@@ -13,6 +13,7 @@
     "@react-navigation/native-stack": "^6.9.26",
     "date-fns": "^3.6.0",
     "metro-config": "^0.80.3",
+    "moment": "^2.30.1",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/apps/releaf/mobile/src/app/box/Box.tsx b/apps/releaf/mobile/src/app/box/Box.tsx
index ee4bd92..2b30f85 100644
--- a/apps/releaf/mobile/src/app/box/Box.tsx
+++ b/apps/releaf/mobile/src/app/box/Box.tsx
@@ -96,25 +96,8 @@ function BoxScreen({ navigation }) {
   const fetchBoxes = useCallback(async () => {
     setIsLoading(true);
     try {
-      //const allBoxes = await boxService.getAll();
-      const allBoxes = [];
-      for (let i = 0; i < 3; i++) {
-        const seeds = [];
-        for (let j = 0; j < 25; j++) {
-          seeds.push({ name: `seed-${i}-${j}` });
-        }
-        const box: BoxItem = {
-          id: `box-${i}`,
-          seeds: seeds,
-          growthInfo: {
-            seedsAverageInchHeight: Math.random() * 10,
-            germinationDay: new Date(),
-          },
-        };
-        allBoxes.push(box);
-      }
-      setBoxes(allBoxes);
-      console.info(allBoxes);
+      const allBoxes = await boxService.getAll();
+      setBoxes(allBoxes.map((box) => new BoxItem(box)));
     } catch (error) {
       console.error(error);
     }
@@ -130,7 +113,6 @@ function BoxScreen({ navigation }) {
   }
 
   return (
-    //icitte on va afficher les boites
     <SafeAreaView>
       <ScrollView>
         <View style={{ backgroundColor: '#ffffff' }}>
@@ -164,7 +146,7 @@ function BoxScreen({ navigation }) {
                       Narrow-leaved Meadowsweet
                     </SText>
                     <SText className="text-end font-lato-bold">
-                      <SText className='text-base'>93 </SText>
+                      <SText className='text-base'>{box.dateSinceGermination} </SText>
                       <SText className='text-sm'>jours</SText>
                     </SText>
                   </SView>
@@ -175,7 +157,7 @@ function BoxScreen({ navigation }) {
                       return acc;
                     }, [])
                     .map((seeds, rowIndex) => (
-                      <SView className="flex-wrap h-full gap-1 flex-1 flex-row">
+                      <SView key={`${boxIndex}-${rowIndex}`} className="flex-wrap h-full gap-1 flex-1 flex-row">
                         {seeds.map((seed, i) => (
                           <SLinearGradient
                             colors={['#987851', '#f1d4b1']}
@@ -184,10 +166,7 @@ function BoxScreen({ navigation }) {
                           >
                             <SView className="absolute z-20 top-2 left-0 right-0 bottom-0 bg-releaf-brown-900 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
                             <SView className="absolute z-10 top-0 left-0 right-0 bottom-0 bg-releaf-brown-800 rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"></SView>
-                            <SView
-                              key={`${boxIndex}-${rowIndex}-${i}`}
-                              className="h-full z-40 flex-1 bg-transparent justify-end  items-center rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100"
-                            >
+                            <SView className="h-full z-40 flex-1 bg-transparent justify-end  items-center rounded-md ml-vw0.5/100 mb-vw0.5/100 mt-vw0.5/100 mr-vw0.5/100">
                               <SText className="min-w-full text-center z-30 color-releaf-brown-100">
                                 {(seed.name as string).substring(
                                   0,
@@ -210,9 +189,9 @@ function BoxScreen({ navigation }) {
                         navigation.navigate('BoxDetails', { id: '11111' })
                       }
                     >
-                      <SText className="text-center flex-1 text-base font-caveat-bold bg-releaf-brown-500 rounded-l-md">28 cm</SText>
-                      <SText className="text-center flex-2 text-base font-caveat-bold bg-releaf-brown-500">22 novembre 2024</SText>
-                      <SText className="text-center flex-1 text-base bg-white rounded-r-md elevation-md"><Edit size={20}></Edit></SText> 
+                      <SText className="text-center flex-1 text-base font-caveat-bold bg-releaf-brown-500 rounded-l-md">{box.seedsAverageInchHeight} cm</SText>
+                      <SText className="text-center flex-2 text-base font-caveat-bold bg-releaf-brown-500">{box.germinationDay}</SText>
+                      <SText className="text-center flex-1 text-base bg-white rounded-r-md elevation-md"><Edit size={20}></Edit></SText>
                     </STouchableOpacity>
                   </SView>
                 </SView>
diff --git a/apps/releaf/mobile/src/app/infrastructure/entities/box.ts b/apps/releaf/mobile/src/app/infrastructure/entities/box.ts
index c3c9b55..67ad186 100644
--- a/apps/releaf/mobile/src/app/infrastructure/entities/box.ts
+++ b/apps/releaf/mobile/src/app/infrastructure/entities/box.ts
@@ -1,8 +1,22 @@
-import { GrowthInfo } from "./growthInfo";
+import { BoxDetails } from "./boxDetails";
 import { Seed } from "./seed";
+import moment from 'moment'
 
-export interface BoxItem {
+export class BoxItem {
   id: string;
   seeds: Seed[];
-  growthInfo: GrowthInfo;
+  seedsAverageInchHeight: number;
+  germinationDay: string;
+  dateSinceGermination: string;
+
+  constructor(boxDetails: BoxDetails) {
+    this.id = boxDetails.id.value;
+    this.seeds = boxDetails.seeds;
+    this.seedsAverageInchHeight = boxDetails.growthInfo.seedsAverageInchHeight;
+
+    const momentGerminationDay = moment(boxDetails.growthInfo.germinationDay);
+    const now = moment(new Date());
+    this.germinationDay = momentGerminationDay.format("Do MMMM YYYY");
+    this.dateSinceGermination = moment.duration(now.diff(momentGerminationDay)).asDays().toFixed(0);
+  }
 }
\ No newline at end of file
diff --git a/apps/releaf/mobile/src/app/infrastructure/services/box.service.ts b/apps/releaf/mobile/src/app/infrastructure/services/box.service.ts
index 24b7e63..647989e 100644
--- a/apps/releaf/mobile/src/app/infrastructure/services/box.service.ts
+++ b/apps/releaf/mobile/src/app/infrastructure/services/box.service.ts
@@ -8,14 +8,14 @@ export interface IBoxService {
 
 export class BoxService {
 
-  async getAll(): Promise<string[]> {
-    let boxes: string[] = [];
+  async getAll(): Promise<BoxDetails[]> {
+    let boxes: BoxDetails[] = [];
     try {
       const response = await fetch(
-        'https://api.genparker.releaftrees.life/boxes/', { 
+        'https://api.genparker.releaftrees.life/boxes/', {
         headers: new Headers({
           'Authorization': 'Basic bXJiYW1ib286bXJiYW1ib28='
-        }), 
+        }),
       }
       );
       boxes = await response.json();
@@ -29,10 +29,10 @@ export class BoxService {
     let boxDetails: BoxDetails;
     try {
       const response = await fetch(
-        'https://api.genparker.releaftrees.life/boxes/' + id, { 
+        'https://api.genparker.releaftrees.life/boxes/' + id, {
         headers: new Headers({
           'Authorization': 'Basic bXJiYW1ib286bXJiYW1ib28='
-        }), 
+        }),
       }
       );
       boxDetails = await response.json();