diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 804d599..7b51e8c 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -68,8 +68,8 @@ export default function HeaderBar(props: Props) {
     "&:hover": {
       backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
-    marginLeft: 'auto',
-    width: "auto"
+    marginLeft: "auto",
+    width: "auto",
   }));
 
   const SearchIconWrapper = styled("div")(({ theme }) => ({
@@ -88,13 +88,10 @@ export default function HeaderBar(props: Props) {
       padding: theme.spacing(1, 1, 1, 0),
       // vertical padding + font size from searchIcon
       paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-      transition: theme.transitions.create('width'),
-      width: "100%",
-      [theme.breakpoints.up("sm")]: {
-        width: "12ch",
-        "&:focus": {
-          width: "20ch",
-        },
+      transition: theme.transitions.create("width"),
+      width: "12ch",
+      "&:focus": {
+        width: "20ch",
       },
     },
   }));
@@ -109,18 +106,18 @@ export default function HeaderBar(props: Props) {
   const location = useLocation();
 
   function leftButton() {
-    if(location.pathname.split("/")[1] === "foodpage") {
+    if (location.pathname.split("/")[1] === "foodpage") {
       return (
         <IconButton
-        size="large"
-        edge="start"
-        color="inherit"
-        aria-label="open drawer"
-        onClick={() => navigate(-1)}
-      >
-        <ArrowBackIosNew />
-      </IconButton>
-      )
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="open drawer"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowBackIosNew />
+        </IconButton>
+      );
     }
     return (
       <IconButton
@@ -132,7 +129,7 @@ export default function HeaderBar(props: Props) {
       >
         <MenuIcon />
       </IconButton>
-    )
+    );
   }
 
   return (
diff --git a/src/components/RenderFoods.tsx b/src/components/RenderFoods.tsx
index 65893bd..9c9626c 100644
--- a/src/components/RenderFoods.tsx
+++ b/src/components/RenderFoods.tsx
@@ -1,14 +1,11 @@
 import type { FoodList } from "../types/food";
 import Item from "./Item";
-import { Grid, styled } from "@mui/material";
-import { FunctionComponent } from "react"
+import { Box, Stack } from "@mui/material";
+import { FunctionComponent } from "react";
 
-const StyledGrid = styled(Grid)(() => ({
-  display: "flex",
-  justifyContent: "space-around",
-  alignItems: "center",
-  margin: "0.25em",
-}));
+interface RenderFoodProps {
+  foodList: FoodList
+}
 
 interface RenderFoodProps {
   foodList: FoodList
@@ -19,15 +16,15 @@ const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) =
   const foodList = props.foodList
   const foodItems = foodList.map((item, key) => {
     return (
-      <Grid item xs={4} key={key}>
-        <Item key={key} {...item} />
-      </Grid>
+      <Box sx={{m: 2, display: 'flex', flexGrow: 1, justifyContent: "center"}} key={key}>
+        <Item {...item} />
+      </Box>
     );
   });
   return (
-    <StyledGrid container spacing={2}>
+    <Stack direction="row" flexWrap="wrap">
       {foodItems}
-    </StyledGrid>
+    </Stack>
   );
 }
 
diff --git a/src/main.css b/src/main.css
index 805fd35..aa8c2b2 100644
--- a/src/main.css
+++ b/src/main.css
@@ -8,7 +8,6 @@ body {
 }
 
 .App {
-  text-align: center;
   width:100%;
   margin: 0 auto;
 
@@ -66,18 +65,14 @@ a {
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
- 
 }
 
 /* FOODPAGE COMPONENT LAYOUT */
 
 .foodPage-image {
-  align-items: end;
-  border-radius: 8px;
-  box-shadow: 3px 4px 8px #888888;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  width:100%;
-  height: 160px;
   }
 
 .season-status{
@@ -99,12 +94,12 @@ a {
   display: flex;
   justify-content: flex-start;
   gap:1em;
-  
+
 }
 .wiki-logo{
   height: 2rem;
   color:#0b7b5c;
-  
+
 }
 
 .months-in-season-title{
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index 54f2ad9..23ff8f0 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,32 +1,46 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
-import { ChangeEvent, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
-import { Box, Tab, Tabs, styled, alpha } from "@mui/material";
+import {
+  Box,
+  Tab,
+  Tabs,
+  styled,
+  alpha,
+  Chip,
+  Typography,
+  Stack,
+} from "@mui/material";
 import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import RenderFoods from "../components/RenderFoods";
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB"
 import React from "react"
 
+
 export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext)
-  const { selectedMonthNum  } = useParams();
-  const { t } = useTranslation()
-  const monthNum = Number(selectedMonthNum) - 1
-  const filteredFood:{[foodType:string]: FoodList} = {'Fruits': [], 'Veggies': []}
+  const { selectedMonthNum } = useParams();
+  const { t } = useTranslation();
+  const monthNum = Number(selectedMonthNum) - 1;
+  const filteredFood: { [foodType: string]: FoodList } = {
+    Fruits: [],
+    Veggies: [],
+  };
+
 
   //month change arrows function
   const navigate = useNavigate();
   useEffect(() => {
-    if(monthNum < 0 || monthNum > 11) {
+    if (monthNum < 0 || monthNum > 11) {
       return navigate("/NotFound");
     }
-  })
+  });
 
   const monthFood = [] as FoodObject[];
-  food.forEach(item => {
-    if(item.season[monthNum] === true) monthFood.push(item);
-  })
+  food.forEach((item) => {
+    if (item.season[monthNum] === true) monthFood.push(item);
+  });
 
 
   //filters the fruits and vegetables
@@ -34,15 +48,14 @@ export default function FoodOfTheMonth() {
     monthFood.filter((item) => item.category === foodCategory);
   filteredFood["Fruits"] = filterFoodType(monthFood, "Fruits");
   filteredFood["Veggies"] = filterFoodType(monthFood, "Veggies");
-  const num_fruits = filteredFood["Fruits"].length
-  const num_veggies = filteredFood["Veggies"].length
+  const num_fruits = filteredFood["Fruits"].length;
+  const num_veggies = filteredFood["Veggies"].length;
 
   //variables to handle the changing tabs
   const [foodType, setFoodType] = useState("Fruits" as FoodCategory);
   // @ts-ignore
-  const handleChange = (event: ChangeEvent<EventTarget>, newFoodCategory: FoodCategory) => {
+  const handleChange = (newFoodCategory: FoodCategory) => {
     setFoodType(newFoodCategory);
-
   };
 
   //variables to change month when pressing the arrows
@@ -52,56 +65,54 @@ export default function FoodOfTheMonth() {
   //styled MUI arrows
   const ArrowButton = styled(Link)(({ theme }) => ({
     color: alpha(theme.palette.common.black, 0.75),
-    width: "2em",
     "&:hover": {
       color: alpha(theme.palette.common.black, 0.95),
     },
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(1),
-      width: "auto",
-    },
+    marginLeft: theme.spacing(1),
+    width: "auto",
   }));
 
-  const ItemsBox = styled(Box)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
-    margin: "0",
-    display: "flex",
-  }));
   return (
     <Box>
-      <div className="month-container">
-        <div className="selected-month">
-          <ArrowButton to={`/month/${prevMonth + 1}`}>
-            <ArrowLeft />
-          </ArrowButton>
-          <div className="month-title">
-            <h4>{t(`month_${monthNum}`)}</h4>
-          </div>
-          <ArrowButton to={`/month/${nextMonth + 1}`}>
-            <ArrowRight />
-          </ArrowButton>
-        </div>
-            <p className="food-counter-text">
-              {t('FoodOfTheMonth_fruitsNumber', { count: num_fruits, fruits: num_fruits})
-               + ' ' + t('FoodOfTheMonth_veggiesNumber', { count: num_veggies, veggies: num_veggies})}
-            </p>
-         
-        <div className="button-wrapper">
-          <Tabs
-            value={foodType}
-            onChange={(e, value) => handleChange(e, value)}
-            sx={{ fontWeight: 700 }}
-            aria-label="tabs for the selection of fruits, vegetables or others"
-          >
-            <Tab label={t('FoodOfTheMonth_fruitsTabText')} value="Fruits" />
-            <Tab label={t('FoodOfTheMonth_vegetablesTabText')} value="Veggies"  />
-          </Tabs>
+      <Stack direction="row" justifyContent="space-between" sx={{ mt: 2 }}>
+        <ArrowButton to={`/month/${prevMonth + 1}`}>
+          <ArrowLeft />
+        </ArrowButton>
+        <div className="month-title">
+          <Typography variant="h6">{t(`month_${monthNum}`)}</Typography>
         </div>
-        <ItemsBox><RenderFoods foodList={filteredFood[foodType]}/></ItemsBox>
-      </div>
-      
+        <ArrowButton to={`/month/${nextMonth + 1}`}>
+          <ArrowRight />
+        </ArrowButton>
+      </Stack>
+      <Tabs
+        value={foodType}
+        onChange={(_, value) => handleChange(value)}
+        variant="fullWidth"
+        sx={{ fontWeight: 700 }}
+        aria-label="tabs for the selection of fruits, vegetables or others"
+      >
+        <Tab
+          label={
+            <span>
+              <Chip label={num_fruits} sx={{ mr: 1 }} size="small" />
+              {t("FoodOfTheMonth_fruitsTabText")}
+            </span>
+          }
+          value="Fruits"
+        />
+        <Tab
+          label={
+            <span>
+              <Chip label={num_veggies} sx={{ mr: 1 }} size="small" />
+              {t("FoodOfTheMonth_vegetablesTabText")}
+            </span>
+          }
+          value="Veggies"
+        />
+      </Tabs>
+      <RenderFoods foodList={filteredFood[foodType]} />
+
     </Box>
   );
-  
 }
-
diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index 1c83ef8..c26d66c 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -1,7 +1,7 @@
 import { currentMonth } from "../utils/utils";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useEffect } from "react";
-import { Box, Typography, Grid } from "@mui/material";
+import { Box, Typography, Stack } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB"
@@ -65,43 +65,33 @@ export default function FoodPage() {
   }));
 
   const ImgBox = styled(Box)(() => ({
-    objectFit: "cover",
-    margin: "1em",
-    width: "40%",
-    maxHeight: "160px",
+    position: "relative",
+    overflow: "hidden",
+    width: "8rem",
+    height: "8rem",
+    borderRadius: "1rem",
+    boxShadow: "3px 4px 8px #888888"
   }));
 
   const renderMonths = () => {
     return months.map((month) => {
       let userNumber = Number(month) + 1
       return (
-        <Grid item
-          className="grid-item"
-          xs={4}
-          key={month.toString()}
-        >
           <GridBox
-            sx={monthColor(month)}>
+            sx={{...monthColor(month), m: 1}}>
             <Link to={`/month/${userNumber}`}>
               {t(`month_${month}`)}
             </Link>
           </GridBox>
-        </Grid>
       );
     });
   }
 
   return (
     <Box
-      marginX={1}
       justifyContent="space-between"
       alignItems="center">
-      <Box
-        display='flex'
-        justifyContent='center'
-        textAlign='left'
-        marginTop='1.5em'
-      >
+      <Stack direction="row" padding={2}>
         <ImgBox>
           <img className='foodPage-image' src={`../images/${image}.png`} alt={`photo of ${image}`} />
         </ImgBox>
@@ -113,27 +103,28 @@ export default function FoodPage() {
           alignItems="left"
           justifyContent="center"
           width="50%">
-          <Typography variant="h6"> {/* typescript problem */}
-            {t(selectedFood?selectedFood.description[0].name:'FOOD NOT FOUND')}:
+          <Typography variant="h5" sx={{fontWeight: 700}}> {/* typescript problem */}
+            {t(selectedFood?selectedFood.description[0].name:'FOOD NOT FOUND')}
           </Typography>
           <Typography>{t(seasonStatus)}</Typography>
-        </Box>
       </Box>
+      </Stack>
 
       {/* BOTTOM GRID WITH MONTHS */}
       <Box
         sx={{
           margin: '1em ',
         }}>
-        <Typography marginY={2} variant="h6" >
+        {/* <Typography marginY={2} variant="h6" >
           {t('FoodPage_monthsInSeason')}
-        </Typography>
-        <Grid container
+        </Typography> */}
+        <Stack
           direction="row"
-          spacing={3}
+          flexWrap="wrap"
+          justifyContent="space-around"
         >
           {renderMonths()}
-        </Grid>
+        </Stack>
       </Box>
     </Box>
   );
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 563ff76..29fa429 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -38,25 +38,13 @@ const theme = createTheme({
       main: "#ff7664", //red
       dark: "#4071d8", //blue
     },
-  },
-  breakpoints: {
-    values: {
-      xs: 450,
-      sm: 600,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  }
 });
 
 function Layout({ food }: { food: FoodList }) {
   const MainBox = styled(Box)(() => ({
     width: "100%",
-    maxWidth: "450px",
     display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
     margin: "0 auto",
     paddingBottom: "1em",
     minHeight: "100%",
@@ -84,7 +72,7 @@ function Layout({ food }: { food: FoodList }) {
   const lngs = {
     en: { nativeName: "English" },
     it: { nativeName: "Italiano" },
-  } as { [key: string]: any };
+  } as { [key: string]: { nativeName: string } };
 
   const SelectLang = (
     <FormControl sx={{ minWidth: '100%' }} size="small">
@@ -97,7 +85,7 @@ function Layout({ food }: { food: FoodList }) {
         onChange={(event: SelectChangeEvent) => i18n.changeLanguage(event.target.value)}
       >
         {Object.keys(lngs).map((lng) => (
-          <MenuItem selected={i18n.resolvedLanguage === lng} value={lng}>{lngs[lng].nativeName}</MenuItem>
+          <MenuItem key={lng} selected={i18n.resolvedLanguage === lng} value={lng}>{lngs[lng].nativeName}</MenuItem>
         ))}
       </Select>
     </FormControl>