diff --git a/src/components/InfoModal.tsx b/src/components/InfoModal.tsx
index cd63487..b1604ab 100644
--- a/src/components/InfoModal.tsx
+++ b/src/components/InfoModal.tsx
@@ -50,7 +50,7 @@ export default function ModalInfo({barcode}: ModalInfoProps) {
                 selectedImages: [],
                 brands: res.data.product.brands || null,
                 editors_tags: res.data.product.editors_tags || null,
-                categories: res.data.product.categories || null,
+                categories: [],
                 ingrediants: [],
             }
             // loop through the images and build the url
@@ -81,6 +81,15 @@ export default function ModalInfo({barcode}: ModalInfoProps) {
                     }
                 }
             }
+            // loop through the categories and keep only the text
+            const categories = res.data.product.categories_hierarchy
+            if (categories) {
+                for (const key in categories) {
+                    if (categories[key]) {
+                        usedData.categories.push(categories[key]);
+                    }
+                }
+            }
             setTicketInfo(usedData);
             setIsLoaded(true);
         }).catch((err) => {
@@ -125,9 +134,28 @@ export default function ModalInfo({barcode}: ModalInfoProps) {
                         <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                             Brands : {ticketInfo?.brands}
                         </Typography>
-                        <Typography>
-                            Categories : {ticketInfo?.categories}
-                        </Typography>
+                        <Box sx={{ border: 'solid 1px black', p: 2 }}>
+                            <Typography sx={{ mt: 2 }}>
+                                Categories :
+                            </Typography>
+                            {ticketInfo?.categories ? (
+                                <Box sx={{ display: 'flex', gap: '10px', alignItems: 'center', justifyContent: 'center', mt:2}}>
+                                    <Grid container spacing={2}>
+                                        {ticketInfo.categories.map((category: string, index: number) => (
+                                            <Grid key={index}>
+                                                <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                                                    {category}
+                                                </Typography>
+                                            </Grid>
+                                        ))}
+                                    </Grid>
+                                </Box>
+                            ) : (
+                                <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                                    No categories found
+                                </Typography>
+                            )}
+                        </Box>
                         <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                             Selected Images :
                         </Typography>
@@ -154,26 +182,28 @@ export default function ModalInfo({barcode}: ModalInfoProps) {
                                 No selected images found
                             </Typography>
                         )}
-                        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-                            Ingrediants :
-                        </Typography>
-                        {ticketInfo?.ingrediants ? (
-                            <Box sx={{ display: 'flex', gap: '10px', alignItems: 'center', justifyContent: 'center', mt:2}}>
-                                <Grid container spacing={2}>
-                                    {ticketInfo.ingrediants.map((ingrediant: string, index: number) => (
-                                        <Grid key={index}>
-                                            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-                                                {ingrediant}
-                                            </Typography>
-                                        </Grid>
-                                    ))}
-                                </Grid>
-                            </Box>
-                        ) : (
+                        <Box sx={{ border: 'solid 1px black', p: 2 }}>
                             <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-                                No ingrediants found
+                                Ingrediants :
                             </Typography>
-                        )}
+                            {ticketInfo?.ingrediants ? (
+                                <Box sx={{ display: 'flex', gap: '10px', alignItems: 'center', justifyContent: 'center', mt:2}}>
+                                    <Grid container spacing={2}>
+                                        {ticketInfo.ingrediants.map((ingrediant: string, index: number) => (
+                                            <Grid key={index}>
+                                                <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                                                    {ingrediant}
+                                                </Typography>
+                                            </Grid>
+                                        ))}
+                                    </Grid>
+                                </Box>
+                            ) : (
+                                <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                                    No ingrediants found
+                                </Typography>
+                            )}
+                        </Box>
                         <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                             Images :
                         </Typography>