diff --git a/README.md b/README.md
index b37c38e..07a0c39 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,11 @@
 ## About the app
-This project was developed to address a genuine challenge: determining the availability of fruits and vegetables in a new country or region. Despite searching for solutions and information, I           couldn't find anything intuitive or capable of meeting my needs.
+This project was developed to address a genuine challenge: determining the availability of fruits and vegetables in a new country or region. Despite searching for solutions and information, we couldn't find anything intuitive or capable of meeting my needs.
        
 The concept behind this project was to create a simple and scalable solution, making it easy to modify and expand the database for different countries or regions. The primary objective of this app is to promote the consumption of locally grown produce, empower small-scale farmers, and ultimately reduce our contribution to global warming.
 
-## First Release (August 2023)
+The project is written in React/Typescript, using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
 
+## First Release (August 2023)
 This first release has dat for **Italy only** 🇮🇹. Also in this initial release we have a web version and an Android app, available in English and Italian. 
 
 ## Roadmap
@@ -14,7 +15,7 @@ This first release has dat for **Italy only** 🇮🇹. Also in this initial rel
 * 📊 Create new ways of visualizing the food in season information, with full year diagrams.
 * 🍇 🍉 🍑 🥝 🍒 Make it possible to select a group of fruits and vegetables and see all of them in a calendar.
 * 🔍 Add synonyms or variant names. Some fruits and vegetables have more than one name, depending of the country's region.
-*🛢Create a public dataset with all the information that we are gathering.
+* 🛢Create a public dataset with all the information that we are gathering.
 * 🍎 Release IOS version.
 * Write it in [Svelte](https://svelte.dev/)!
 
@@ -25,7 +26,6 @@ Source of data for fruits and vegetables from [Slow Food Italy](https://www.slow
 
 ![season-fruit](assets/print-1.jpg)
 
-The project is written in React/Typescript using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
 
 # How to use
 
diff --git a/src/App.tsx b/src/App.tsx
index 7897427..6fdf42e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,7 +28,7 @@ export default function App() {
                 element={<Navigate to={`/month/${currentMonth}`} replace />}
               />
               <Route
-                path="/foodpage/:id"
+                path="/:id"
                 element={<FoodPage key="foodpage"/>}
               />
               <Route
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 8d2dbe1..430dd68 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -1,10 +1,9 @@
 import type { FoodList, FoodObject } from "../types/food";
 import Fuse from 'fuse.js'
 import { useRef, useEffect } from "react"
-import { useNavigate, useLocation } from "react-router-dom";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
-import { ArrowBackIosNew, Menu, Search } from "@mui/icons-material";
+import { Menu, Search } from "@mui/icons-material";
 import {
   AppBar,
   styled,
@@ -61,23 +60,7 @@ export default function HeaderBar(props: Props) {
     return fuse.search(searchLanguage).map((i) => i.item)
   };
 
-  const navigate = useNavigate();
-  const location = useLocation();
-
   function leftButton() {
-    if (location.pathname.split("/")[1] === "foodpage") {
-      return (
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="return"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowBackIosNew />
-        </IconButton>
-      );
-    }
     return (
       <IconButton
         size="large"
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 978200e..f7cf751 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -11,8 +11,7 @@ const ImgBox = styled(Stack)(({ theme }) => ({
   boxShadow: "3px 4px 8px #888888",
   overflow: "clip",
   color: theme.palette.primary.light,
-  backgroundColor: theme.palette.primary.main, 
-  
+  backgroundColor: theme.palette.primary.main,
 }));
 
 function Item(props: FoodObject) {
@@ -22,7 +21,7 @@ function Item(props: FoodObject) {
     <Box
       sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
     >
-      <Link to={`/foodpage/${props.description[0].slug}`}>
+      <Link to={`/${props.description[0].slug}`}>
         <ImgBox>
           <Box position="relative" flexGrow={1}>
             <img
@@ -33,7 +32,6 @@ function Item(props: FoodObject) {
           </Box>
           <Box position="relative" height="20%" sx={{ textAlign: 'center'}}>
             <Typography
-              
               top={0}
               fontSize="max(1rem, min(4.5vw, 3rem))"
               fontWeight={400}
diff --git a/src/components/MonthBar.tsx b/src/components/MonthBar.tsx
new file mode 100644
index 0000000..f0a31b0
--- /dev/null
+++ b/src/components/MonthBar.tsx
@@ -0,0 +1,66 @@
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
+import { Stack, Typography, alpha, styled } from "@mui/material";
+import { t } from "i18next";
+import { Fragment } from "react";
+import { Link, useParams } from "react-router-dom";
+
+const MonthBar = () => {
+  const { selectedMonthNum } = useParams();
+  const monthNum = Number(selectedMonthNum) - 1;
+
+  //variables to change month when pressing the arrows
+  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
+  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
+
+  //styled MUI arrows
+  const ArrowButton = styled(Link)(({ theme }) => ({
+    color: alpha(theme.palette.primary.light, 0.75),
+    "&:hover": {
+      color: alpha(theme.palette.primary.light, 0.95),
+    },
+    display: "flex",
+    alignItems: "center",
+    margin: theme.spacing(1),
+    width: "auto",
+  }));
+
+  const ShadowBox = styled(Stack)(({ theme }) => ({
+    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
+  }));
+
+  return (
+    <ShadowBox
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      bgcolor="secondary.main"
+      color="primary.light"
+      boxShadow="0 2px 4px #332323"
+    >
+      {selectedMonthNum ? (
+        <Fragment>
+          <ArrowButton to={`/month/${prevMonth + 1}`}>
+            <ArrowLeft />
+          </ArrowButton>
+          <Link to={`/month/${selectedMonthNum}`}>
+            <Typography variant="h6" display="flex" alignItems="center">
+              {t(`month_${monthNum}`)}
+            </Typography>
+          </Link>
+          <ArrowButton to={`/month/${nextMonth + 1}`}>
+            <ArrowRight />
+          </ArrowButton>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <ArrowButton to={`/`}>
+            <ArrowLeft />
+            <Typography>Return to current month</Typography>
+          </ArrowButton>
+        </Fragment>
+      )}
+    </ShadowBox>
+  );
+};
+
+export default MonthBar;
diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx
index 6738368..692e53b 100644
--- a/src/components/SearchResult.tsx
+++ b/src/components/SearchResult.tsx
@@ -13,6 +13,7 @@ import { TransitionProps } from "@mui/material/transitions";
 import { Close } from "@mui/icons-material";
 
 type Props = {
+  currentSearch: string;
   searchResults: FoodList;
   ifSearched: boolean;
   closeModal: () => void;
@@ -28,7 +29,7 @@ const Transition = forwardRef(function Transition(
 });
 
 function SearchResult(props: Props) {
-  const { searchResults, ifSearched, closeModal } = props;
+  const { currentSearch, searchResults, ifSearched, closeModal } = props;
 
   const foodItems = searchResults.map((item, key) => {
     return <Item key={key} {...item} />;
@@ -44,9 +45,10 @@ function SearchResult(props: Props) {
       aria-describedby="the results of your search are shown here"
       TransitionComponent={Transition}
     >
-      <Stack direction="row">
+      <Stack direction="row" alignItems="center" p={2}>
+        <Typography variant="h5" component="div">Search: {currentSearch}</Typography>
         <IconButton
-          sx={{ m: 2, ml: "auto" }}
+          sx={{ml: "auto" }}
           edge="start"
           color="inherit"
           onClick={closeModal}
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index ff1fc60..a83d13e 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,7 +1,7 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
 import React from "react";
 import { useState, useEffect } from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB";
 import RenderFoods from "../components/RenderFoods";
@@ -9,13 +9,9 @@ import {
   Box,
   Tab,
   Tabs,
-  styled,
-  alpha,
   Chip,
-  Typography,
   Stack,
 } from "@mui/material";
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 
 export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext);
@@ -55,50 +51,13 @@ export default function FoodOfTheMonth() {
     setFoodType(newFoodCategory);
   };
 
-  //variables to change month when pressing the arrows
-  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
-  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
-
-  //styled MUI arrows
-  const ArrowButton = styled(Link)(({ theme }) => ({
-    color: alpha(theme.palette.primary.light, 0.75),
-    "&:hover": {
-      color: alpha(theme.palette.primary.light, 0.95),
-    },
-    display: "flex",
-    alignItems: "center",
-    margin: theme.spacing(1),
-    width: "auto",
-  }));
-
-  const ShadowBox = styled(Stack)(({ theme }) => ({
-    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
-  }));
-
   return (
     <Stack height="100%">
-      <ShadowBox
-        direction="row"
-        justifyContent="space-between"
-        bgcolor="secondary.main"
-        color="primary.light"
-        boxShadow="0 2px 4px #332323"
-      >
-        <ArrowButton to={`/month/${prevMonth + 1}`}>
-          <ArrowLeft />
-        </ArrowButton>
-        <Typography variant="h6" display="flex" alignItems="center">
-          {t(`month_${monthNum}`)}
-        </Typography>
-        <ArrowButton to={`/month/${nextMonth + 1}`}>
-          <ArrowRight />
-        </ArrowButton>
-      </ShadowBox>
       <Tabs
         value={foodType}
         onChange={(_, value) => handleChange(value)}
         variant="fullWidth"
-        sx={{ fontWeight: 700, mt: 1 }}
+        sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
       >
         <Tab
diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index d74d3c9..83e6a2a 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -55,16 +55,14 @@ export default function FoodPage() {
     }
   };
 
-  const GridBox = styled(Box)(({ theme }) => ({
-    width: 80,
-    padding: 10,
-    aspectRatio: 2,
+  const GridBox = styled(Link)(({ theme }) => ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    fontFamily: "Sans",
+    flexGrow: 1,
+    padding: 2,
+    width: '25%',
     [theme.breakpoints.up('md')]: {
-      width: 200,
       fontSize: '1.125rem',
       fontWeight: '400'
     },
@@ -83,23 +81,22 @@ export default function FoodPage() {
     return months.map((month) => {
       let userNumber = Number(month) + 1;
       return (
-          <Link to={`/month/${userNumber}`}>
-            <GridBox sx={{ ...monthColor(month), m: 1 }}>
-              <div >{t(`month_${month}`)}</div>
-            </GridBox>
-          </Link>
+        <GridBox key={month} sx={{ ...monthColor(month), m: 1 }} to={`/month/${userNumber}`}>
+          <Typography>{t(`month_${month}`)}</Typography>
+        </GridBox>
       );
     });
   };
 
   return (
     <Stack
-      justifyContent="space-between"
       width="100%"
+      height="100%"
       overflow="auto"
+      my={1.5}
     >
       <Stack direction="row" width="100%">
-        <ImgBox>
+        <ImgBox borderRadius={1}>
           <img
             className="food-image"
             src={`../images/${image}.png`}
@@ -126,12 +123,10 @@ export default function FoodPage() {
             color={seasonStatus === "FoodPage_inSeasonText" ? "secondary.main" : "primary.main"}>
             {t(seasonStatus)}
           </Typography>
-         
         </Stack>
       </Stack>
       <Typography
         variant="h5"
-        textAlign="center"
         mt={3}
         sx={{ fontWeight: 700 }}
         color="secondary.dark"
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 0468a96..c2976c0 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -11,9 +11,10 @@ import {
   Box,
   Drawer,
   ThemeProvider,
-  Stack,
-} from "@mui/material";
+  Stack
+  } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
+import MonthBar from "../components/MonthBar";
 
 //BASIC MUI COLORS AND BREAKPOINTS
 const theme = createTheme({
@@ -47,13 +48,16 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
+
   //search bar code
+  const [currentSearch, setCurrentSearch] = useState('');
   const [ifSearched, setIfSearched] = useState(false);
   const [searchResults, setSearchResults] = useState([] as FoodList);
   const closeModal = () => setIfSearched(false);
 
   const onSearch = (query: string, food: FoodList) => {
     if (query != "") {
+      setCurrentSearch(query)
       setIfSearched(true);
       setSearchResults(food);
     }
@@ -85,8 +89,10 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
+        <MonthBar />
         {ifSearched ? (
           <SearchResult
+            currentSearch={currentSearch}
             searchResults={searchResults}
             ifSearched={ifSearched}
             closeModal={closeModal}