From 90937b1f5f16ac5fb45c08afc488db0ce96305e6 Mon Sep 17 00:00:00 2001
From: Rene Fernandez <rene.fernandez@cern.ch>
Date: Tue, 9 Jul 2024 18:20:01 +0200
Subject: [PATCH] Add sides support on the client

---
 client/src/MainRouter.tsx                     |  12 +
 .../NavigationLinks/NavigationLinks.tsx       |   8 +-
 client/src/components/PageTitle/PageTitle.tsx |   6 -
 .../RecipeDetails/RecipeDetails.tsx           | 229 --------
 client/src/hooks/recipes/use-recipes.tsx      |  11 +
 client/src/locales/es/translation.json        |   6 +
 .../WeeklyMenusList/WeeklyMenusList.tsx       | 102 ++--
 .../DayMenuDetailsPage/DayMenuDetailsPage.tsx |  12 +-
 .../menus/MenuDetailsPage/MenuDetailsPage.tsx | 115 ++--
 .../AddProductButton/AddProductButton.tsx     |   5 +-
 .../components/ProductList/ProductList.tsx    |  62 +-
 .../AddRecipeForm/AddRecipeForm.tsx           |  37 +-
 .../recipes/EditRecipePage/EditRecipePage.tsx |  43 +-
 .../EditRecipeForm/EditRecipeForm.tsx         |  74 ++-
 .../RecipeDetails/RecipeDetails.tsx           |  65 +++
 .../RecipeExtraInfo/RecipeExtraInfo.tsx       | 105 ++++
 .../components/RecipeHeader/RecipeHeader.tsx  |  38 ++
 .../RecipeInstructions/RecipeInstructions.tsx |  67 +++
 .../RecipeDetailsPage/RecipeDetailsPage.tsx   |  55 +-
 .../components/RecipeList/RecipeList.tsx      | 164 +++---
 .../pages/sides/AddSidePage/AddSidePage.tsx   |  34 ++
 .../components/AddSideForm/AddSideForm.tsx    | 536 +++++++++++++++++
 .../pages/sides/EditSidePage/EditSidePage.tsx |  55 ++
 .../components/EditSideForm/EditSideForm.tsx  | 541 ++++++++++++++++++
 client/src/pages/sides/SidesMain.tsx          |   5 +
 .../src/pages/sides/SidesPage/SidesPage.tsx   |  24 +
 .../components/SideList/SideList.tsx          | 195 +++++++
 client/src/routes.ts                          |   4 +
 client/src/types/recipes.d.ts                 |   3 +-
 29 files changed, 2073 insertions(+), 540 deletions(-)
 delete mode 100644 client/src/components/RecipeDetails/RecipeDetails.tsx
 create mode 100644 client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails.tsx
 create mode 100644 client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeExtraInfo/RecipeExtraInfo.tsx
 create mode 100644 client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeHeader/RecipeHeader.tsx
 create mode 100644 client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeInstructions/RecipeInstructions.tsx
 create mode 100644 client/src/pages/sides/AddSidePage/AddSidePage.tsx
 create mode 100644 client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx
 create mode 100644 client/src/pages/sides/EditSidePage/EditSidePage.tsx
 create mode 100644 client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx
 create mode 100644 client/src/pages/sides/SidesMain.tsx
 create mode 100644 client/src/pages/sides/SidesPage/SidesPage.tsx
 create mode 100644 client/src/pages/sides/SidesPage/components/SideList/SideList.tsx

diff --git a/client/src/MainRouter.tsx b/client/src/MainRouter.tsx
index 79c7e8c..d8cbb6f 100644
--- a/client/src/MainRouter.tsx
+++ b/client/src/MainRouter.tsx
@@ -13,6 +13,10 @@ import EditRecipePage from "pages/recipes/EditRecipePage/EditRecipePage";
 import RecipeDetailsPage from "pages/recipes/RecipeDetailsPage/RecipeDetailsPage";
 import RecipesMain from "pages/recipes/RecipesMain";
 import RecipesPage from "pages/recipes/RecipesPage/RecipesPage";
+import AddSidePage from "pages/sides/AddSidePage/AddSidePage";
+import EditSidePage from "pages/sides/EditSidePage/EditSidePage";
+import SidesMain from "pages/sides/SidesMain";
+import SidesPage from "pages/sides/SidesPage/SidesPage";
 import routes from "routes";
 
 export default function Main(): ReactElement {
@@ -32,6 +36,14 @@ export default function Main(): ReactElement {
                 element={<AddRecipePage />}
               />
             </Route>
+
+            <Route path="sides" element={<SidesMain />}>
+              <Route path="" element={<SidesPage />} />
+              <Route path=":recipeId" element={<RecipeDetailsPage />} />
+              <Route path=":recipeId/edit" element={<EditSidePage />} />
+              <Route path={routes.sidesAddRoute} element={<AddSidePage />} />
+            </Route>
+
             <Route path="menus" element={<MenusMain />}>
               <Route path=":menuId" element={<MenuDetailsPage />} />
               <Route path=":menuId/:dayName" element={<DayMenuDetailsPage />} />
diff --git a/client/src/components/NavigationLinks/NavigationLinks.tsx b/client/src/components/NavigationLinks/NavigationLinks.tsx
index 0d5b95b..c3e2e33 100644
--- a/client/src/components/NavigationLinks/NavigationLinks.tsx
+++ b/client/src/components/NavigationLinks/NavigationLinks.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { IconBaguette, IconChefHat } from "@tabler/icons-react";
+import { IconBaguette, IconChefHat, IconCooker } from "@tabler/icons-react";
 import NavigationLink from "./NavigationLink";
 import routes from "routes";
 
@@ -22,6 +22,12 @@ const data = [
     label: "Recipes",
     route: routes.recipesRoute,
   },
+  {
+    icon: <IconCooker size={16} />,
+    color: "orange",
+    label: "Sides",
+    route: routes.sidesRoute,
+  },
 ];
 
 export default function NavigationLinks() {
diff --git a/client/src/components/PageTitle/PageTitle.tsx b/client/src/components/PageTitle/PageTitle.tsx
index f1e262a..2a34c86 100644
--- a/client/src/components/PageTitle/PageTitle.tsx
+++ b/client/src/components/PageTitle/PageTitle.tsx
@@ -36,10 +36,4 @@ function PageTitle({
   );
 }
 
-PageTitle.defaultProps = {
-  icon: null,
-  subHeader: null,
-  withBackButton: false,
-};
-
 export default PageTitle;
diff --git a/client/src/components/RecipeDetails/RecipeDetails.tsx b/client/src/components/RecipeDetails/RecipeDetails.tsx
deleted file mode 100644
index 5408e2d..0000000
--- a/client/src/components/RecipeDetails/RecipeDetails.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-/* eslint-disable react/no-danger */
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import {
-  Badge,
-  Grid,
-  Group,
-  List,
-  Paper,
-  Rating,
-  Stack,
-  Text,
-  Title,
-  Image,
-} from "@mantine/core";
-import { IconClock, IconEdit, IconFlame, IconUsers } from "@tabler/icons-react";
-import { generateHTML } from "@tiptap/core";
-import { IIngredient } from "types/ingredients";
-import { IRecipe } from "types/recipes";
-import { editorExtensions, renderExtensions } from "utils/editor";
-
-interface Props {
-  recipe: IRecipe;
-}
-
-export default function RecipeDetails({ recipe }: Props) {
-  const { t } = useTranslation();
-  const description = useMemo(() => {
-    if (recipe && recipe.description) {
-      let descr = recipe.description;
-      // Get the type of descr
-      if (typeof descr === "string") {
-        descr = JSON.parse(descr);
-      }
-      return generateHTML(descr, renderExtensions);
-    }
-    return "";
-  }, [recipe]);
-
-  const instructions = useMemo(() => {
-    if (recipe && recipe.instructions) {
-      let instr = recipe.instructions;
-      // Get the type of descr
-      if (typeof instr === "string") {
-        instr = JSON.parse(instr);
-      }
-      return generateHTML(instr, editorExtensions);
-    }
-    return "";
-  }, [recipe]);
-
-  const notes = useMemo(() => {
-    if (recipe && recipe.notes) {
-      let notesParsed = recipe.notes;
-      // Get the type of descr
-      if (typeof notesParsed === "string") {
-        notesParsed = JSON.parse(notesParsed);
-      }
-      return generateHTML(notesParsed, editorExtensions);
-    }
-    return "";
-  }, [recipe]);
-
-  const getRecipeDaysOfWeek = (daysOfWeek: string) => {
-    switch (daysOfWeek) {
-      case "ALL":
-        return t("Todos los días");
-      case "WEEKDAYS":
-        return t("Entre semana");
-      case "WEEKENDS":
-        return t("Fin de semana");
-      default:
-        return t("Todos");
-    }
-  };
-
-  return (
-    <>
-      <Grid.Col span={24}>
-        <Group>
-          <Text>
-            <Rating value={recipe.preference} readOnly />
-          </Text>
-          <Text>/</Text>
-          <Text>
-            <Rating
-              value={recipe.difficulty}
-              readOnly
-              emptySymbol={<IconFlame size="1.2rem" color="gray" />}
-              fullSymbol={<IconFlame size="1.2rem" color="red" />}
-            />
-          </Text>
-          <Text>/</Text>
-          <Title order={5}>
-            <IconClock />
-          </Title>
-          <Text>/</Text>
-          <Text>{recipe.preparationTime}</Text>
-          <Text>/</Text>
-          <Title order={5}>
-            <IconUsers />
-          </Title>
-          <Text>{recipe.servings}</Text>
-        </Group>
-      </Grid.Col>
-      <Grid.Col span={{ md: 16, sm: 24 }}>
-        <Paper shadow="xs" p="md">
-          <Grid columns={24}>
-            <Grid.Col span={24}>
-              <Group justify="space-between">
-                {recipe.active ? (
-                  <Badge color="teal">{t("Activa")}</Badge>
-                ) : (
-                  <Badge color="red">{t("Inactiva")}</Badge>
-                )}
-                <Link to={`/recipes/${recipe.id}/edit`}>
-                  <IconEdit />
-                </Link>
-              </Group>
-            </Grid.Col>
-          </Grid>
-          <Grid>
-            <Grid.Col span={{ md: 9, order: 2, orderSm: 2, orderLg: 1 }}>
-              <Stack>
-                <Text>
-                  <div dangerouslySetInnerHTML={{ __html: description }} />
-                </Text>
-                <Title order={5}>{t("Ingredientes")}</Title>
-                <List>
-                  {recipe.ingredients.map((ingredient: IIngredient) => (
-                    <List.Item key={ingredient.id}>
-                      {ingredient.product.name}: {ingredient.quantity}
-                    </List.Item>
-                  ))}
-                </List>
-                <Title order={5}>Instrucciones</Title>
-                <div dangerouslySetInnerHTML={{ __html: instructions }} />
-                {recipe.sides && recipe.sides.length > 0 && (
-                  <>
-                    <Title order={5}>{t("Acompañamientos")}</Title>
-                    <List>
-                      {recipe.sides.map((side: IIngredient) => (
-                        <List.Item key={side.id}>
-                          {side.product.name}: {side.quantity}
-                        </List.Item>
-                      ))}
-                    </List>
-                  </>
-                )}
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={{ md: 3, order: 1, orderSm: 1, orderLg: 2 }}>
-              <Image
-                maw="auto"
-                mx="auto"
-                radius="md"
-                src={recipe.image}
-                alt={t<string>("Imagen de la receta")}
-              />
-            </Grid.Col>
-          </Grid>
-        </Paper>
-      </Grid.Col>
-      <Grid.Col span={{ sm: 24, md: 6 }}>
-        <Stack>
-          <Title order={5}>{t("Detalles")}</Title>
-          {recipe.meal === "LUNCH" && (
-            <>
-              <Text>
-                {recipe.preferedMeal === "LUNCH"
-                  ? t("Preferida para comer")
-                  : t("Preferida para cenar")}
-              </Text>
-              <Text>
-                {recipe.isOnlyLunch
-                  ? t("Sólo para comer")
-                  : t("Para comer y cenar")}
-              </Text>
-            </>
-          )}
-          {recipe.meal === "DINNER" && (
-            <Text>
-              {recipe.isOnlyDinner
-                ? t("Sólo para cenar")
-                : t("Para comer y cenar")}
-            </Text>
-          )}
-
-          <Title order={5}>{t("Días")}</Title>
-          <Text>{getRecipeDaysOfWeek(recipe.daysOfWeek)}</Text>
-
-          <Title order={5}>{t("Estaciones")}</Title>
-          <Group>
-            <Badge color={recipe.seasonSpring ? "teal" : "red"}>
-              {t("Primavera")}
-            </Badge>
-            <Badge color={recipe.seasonSummer ? "teal" : "red"}>
-              {t("Verano")}
-            </Badge>
-            <Badge color={recipe.seasonAutumn ? "teal" : "red"}>
-              {t("Otoño")}
-            </Badge>
-            <Badge color={recipe.seasonWinter ? "teal" : "red"}>
-              {t("Invierno")}
-            </Badge>
-          </Group>
-
-          <Title order={5}>{t("Temperatura")}</Title>
-          <Text>
-            {recipe.mealTemp === "WARM" ? (
-              <Text color="#fa5252">{t("Caliente")}</Text>
-            ) : (
-              <Text color="#228be6">{t("Fría")}</Text>
-            )}
-          </Text>
-          {notes && (
-            <>
-              <Title order={5}>{t("Notas")}</Title>
-              <Paper color="purple" shadow="xs" p="md">
-                <div dangerouslySetInnerHTML={{ __html: notes }} />
-              </Paper>
-            </>
-          )}
-        </Stack>
-      </Grid.Col>
-    </>
-  );
-}
diff --git a/client/src/hooks/recipes/use-recipes.tsx b/client/src/hooks/recipes/use-recipes.tsx
index 6ca9b48..4305adc 100644
--- a/client/src/hooks/recipes/use-recipes.tsx
+++ b/client/src/hooks/recipes/use-recipes.tsx
@@ -17,6 +17,17 @@ export function useRecipes(options = {}) {
   });
 }
 
+export const fetchSides = async () => {
+  const { data } = await apiClient.get<any>(`/recipes/?isSidePlate=true`);
+  return data;
+};
+
+export function useSides(options = {}) {
+  return useQuery<any, Error>(["recipes", "sides"], () => fetchSides(), {
+    ...options,
+  });
+}
+
 export const useAddrecipe = () => {
   const { t } = useTranslation();
   return useMutation(
diff --git a/client/src/locales/es/translation.json b/client/src/locales/es/translation.json
index d8c19ef..33dfc75 100644
--- a/client/src/locales/es/translation.json
+++ b/client/src/locales/es/translation.json
@@ -3,10 +3,12 @@
   "Active": "Activa",
   "Add new product": "Añadir nuevo producto",
   "Add new recipe": "Añadir nueva receta",
+  "Add new side": "Añadir nuevo acompañamiento",
   "Add product": "Añadir producto",
   "Create weekly menu": "Crear menu semanal",
   "Choose a recipe for lunch": "Elije una receta para la comida",
   "Choose the lunch of the day": "Elige la comida del día",
+  "Choos the meal of the day": "Elige la comida del día",
   "Credits": "Créditos",
   "Dinner": "Cena",
   "Enabled": "Activada",
@@ -17,6 +19,7 @@
   "Initialize recipes": "Inicializar recetas",
   "Loading...": "Cargando...",
   "Loading products...": "Cargando productos...",
+  "Loading products and side meals...": "Cargando productos y acompañamientos...",
   "Lunch": "Comida",
   "Lunch of the day": "Comida del día",
   "Monday": "Lunes",
@@ -30,12 +33,15 @@
   "FRUITS": "Frutas",
   "GRAIN_NUTS_BAKING": "Cereales, frutos secos y panadería",
   "LEGUMES": "Legumbres",
+  "Meal": "Comida",
+  "Meal of the day": "Comida del día",
   "MEAT_SASUAGE": "Carne y embutido",
   "PASTA_RICE": "Pasta y arroz",
   "Products": "Productos",
   "PRODUCT_FORM_HELP_TEXT": "Añade un producto a tu lista de productos utilizando este formulario. Puedes establecer un nombre y un tipo.",
   "Recipes": "Recetas",
   "Seasons": "Estaciones",
+  "Sides": "Acompañamientos",
   "Type": "Tipo",
   "VEGETABLES": "Verduras",
   "Version": "Versión",
diff --git a/client/src/pages/home/components/WeeklyMenusList/WeeklyMenusList.tsx b/client/src/pages/home/components/WeeklyMenusList/WeeklyMenusList.tsx
index 9de6830..4255e0a 100644
--- a/client/src/pages/home/components/WeeklyMenusList/WeeklyMenusList.tsx
+++ b/client/src/pages/home/components/WeeklyMenusList/WeeklyMenusList.tsx
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import {
   ActionIcon,
   Anchor,
+  Box,
   Button,
   Group,
   LoadingOverlay,
@@ -81,53 +82,68 @@ export default function WeeklyMenusList() {
 
   return (
     <Stack>
-      <LoadingOverlay
-        visible={isLoading}
-        zIndex={1000}
-        overlayProps={{ radius: "sm", blur: 2 }}
-      />
       <Group>
         <CreateWeeklyMenuButton />
       </Group>
-      <Table>
-        <Table.Thead>
-          <Table.Tr>
-            <th>{t("Fecha")}</th>
-            <th>{t("Name")}</th>
-            <th>{t("Acciones")}</th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {data &&
-            data.map((menu: IWeeklyMenu) => (
-              <Table.Tr key={menu.id}>
-                <Table.Td>
-                  {dayjs(menu.dateCreated).format("DD/MM/YYYY HH:mm")}
-                </Table.Td>
-                <Table.Td>
-                  <Anchor component={Link} to={`/menus/${menu.id}`}>
-                    {menu.name}
-                  </Anchor>
-                </Table.Td>
-                <Table.Td>
-                  <Group>
-                    <ActionIcon color="red" title={t("Borrar menu semanal")}>
-                      <IconTrash
-                        onClick={() => handleOpenModal(menu.id, menu.name)}
-                      />
-                    </ActionIcon>
-                    <ActionIcon
-                      onClick={() => handleOpenEditModal(menu.id, menu.name)}
-                      title={t("Cambiar nombre")}
-                    >
-                      <IconEdit />
-                    </ActionIcon>
-                  </Group>
-                </Table.Td>
+      <Box pos="relative">
+        <LoadingOverlay
+          visible={isLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+        <Box
+          style={{
+            display: "block",
+            overflowX: "scroll",
+            whiteSpace: "nowrap",
+          }}
+        >
+          <Table>
+            <Table.Thead>
+              <Table.Tr>
+                <th>{t("Fecha")}</th>
+                <th>{t("Name")}</th>
+                <th>{t("Acciones")}</th>
               </Table.Tr>
-            ))}
-        </Table.Tbody>
-      </Table>
+            </Table.Thead>
+            <Table.Tbody>
+              {data &&
+                data.map((menu: IWeeklyMenu) => (
+                  <Table.Tr key={menu.id}>
+                    <Table.Td>
+                      {dayjs(menu.dateCreated).format("DD/MM/YYYY HH:mm")}
+                    </Table.Td>
+                    <Table.Td>
+                      <Anchor component={Link} to={`/menus/${menu.id}`}>
+                        {menu.name}
+                      </Anchor>
+                    </Table.Td>
+                    <Table.Td>
+                      <Group>
+                        <ActionIcon
+                          color="red"
+                          title={t("Borrar menu semanal")}
+                        >
+                          <IconTrash
+                            onClick={() => handleOpenModal(menu.id, menu.name)}
+                          />
+                        </ActionIcon>
+                        <ActionIcon
+                          onClick={() =>
+                            handleOpenEditModal(menu.id, menu.name)
+                          }
+                          title={t("Cambiar nombre")}
+                        >
+                          <IconEdit />
+                        </ActionIcon>
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+            </Table.Tbody>
+          </Table>
+        </Box>
+      </Box>
       <Modal opened={opened} onClose={close} title="Borrar menú semanal">
         <Stack>
           <Text>
diff --git a/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx b/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx
index aa6c37a..7ff6526 100644
--- a/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx
+++ b/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx
@@ -10,9 +10,9 @@ import {
 } from "@mantine/core";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
-import RecipeDetails from "components/RecipeDetails/RecipeDetails";
 import { useRecipe } from "hooks/recipes/use-recipes";
 import { useWeeklyMenu } from "hooks/weekly-menus/use-weekly-menus";
+import RecipeDetails from "pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails";
 import { IDailyMenu } from "types/weekly-menus";
 
 export default function DayMenuDetailsPage() {
@@ -68,31 +68,31 @@ export default function DayMenuDetailsPage() {
   }, [data, dayName]);
 
   return (
-    <Grid columns={24}>
+    <Grid>
       <LoadingOverlay
         visible={isLoading}
         zIndex={1000}
         overlayProps={{ radius: "sm", blur: 2 }}
       />
-      <Grid.Col span={24}>
+      <Grid.Col>
         <Breadcrumbs>{items}</Breadcrumbs>
         <PageTitle
           header={`${data ? data.name : t("cargando...")} - ${dayName}`}
           withBackButton
         />
       </Grid.Col>
-      <Grid.Col span={24}>
+      <Grid.Col>
         <Title order={2}>{t("Comida")}</Title>
         <Title order={3}>{lunchRecipe?.name}</Title>
       </Grid.Col>
 
       {lunchRecipe && <RecipeDetails recipe={lunchRecipe} />}
-      <Grid.Col span={24}>
+      <Grid.Col>
         <Title order={2}>Cena</Title>
         <Title order={3}>{dinnerRecipe?.name}</Title>
       </Grid.Col>
       {dinnerRecipe && <RecipeDetails recipe={dinnerRecipe} />}
-      <Grid.Col span={24}>
+      <Grid.Col>
         <Footer />
       </Grid.Col>
     </Grid>
diff --git a/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx b/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx
index 89735b6..2c5b187 100644
--- a/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx
+++ b/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import {
   Anchor,
+  Box,
   Breadcrumbs,
   Grid,
   LoadingOverlay,
@@ -33,11 +34,6 @@ export default function MenuDetailsPage() {
   if (data) {
     return (
       <Grid>
-        <LoadingOverlay
-          visible={isLoading}
-          zIndex={1000}
-          overlayProps={{ radius: "sm", blur: 2 }}
-        />
         <Grid.Col>
           <Breadcrumbs>{items}</Breadcrumbs>
           <PageTitle
@@ -47,57 +43,64 @@ export default function MenuDetailsPage() {
         </Grid.Col>
         <Grid.Col>
           <Stack>
-            <Grid>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Lunes")}
-                  dailyMenu={data?.mondayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Martes")}
-                  dailyMenu={data?.tuesdayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Miércoles")}
-                  dailyMenu={data?.wednesdayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Jueves")}
-                  dailyMenu={data?.thursdayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Viernes")}
-                  dailyMenu={data?.fridayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Sábado")}
-                  dailyMenu={data?.saturdayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-              <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
-                <DayCard
-                  dayName={t<string>("Domingo")}
-                  dailyMenu={data?.sundayMenu}
-                  weeklyMenuId={data?.id}
-                />
-              </Grid.Col>
-            </Grid>
+            <Box pos="relative">
+              <LoadingOverlay
+                visible={isLoading}
+                zIndex={1000}
+                overlayProps={{ radius: "sm", blur: 2 }}
+              />
+              <Grid>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Lunes")}
+                    dailyMenu={data?.mondayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Martes")}
+                    dailyMenu={data?.tuesdayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Miércoles")}
+                    dailyMenu={data?.wednesdayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Jueves")}
+                    dailyMenu={data?.thursdayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Viernes")}
+                    dailyMenu={data?.fridayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Sábado")}
+                    dailyMenu={data?.saturdayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+                  <DayCard
+                    dayName={t<string>("Domingo")}
+                    dailyMenu={data?.sundayMenu}
+                    weeklyMenuId={data?.id}
+                  />
+                </Grid.Col>
+              </Grid>
+            </Box>
           </Stack>
           <Footer />
         </Grid.Col>
diff --git a/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx b/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx
index 119e87d..c076755 100644
--- a/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx
+++ b/client/src/pages/products/ProductsPage/components/AddProductButton/AddProductButton.tsx
@@ -12,6 +12,7 @@ import {
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
+import { IconPlus } from "@tabler/icons-react";
 import { useAddProduct } from "hooks/products/use-products";
 
 const productTypes = [
@@ -86,7 +87,9 @@ export default function AddProductButton() {
           </form>
         </Box>
       </Modal>
-      <Button onClick={open}>{t("Add new product")}</Button>
+      <Button leftSection={<IconPlus size="1rem" />} onClick={open}>
+        {t("Add new product")}
+      </Button>
     </>
   );
 }
diff --git a/client/src/pages/products/ProductsPage/components/ProductList/ProductList.tsx b/client/src/pages/products/ProductsPage/components/ProductList/ProductList.tsx
index 155a392..55503dd 100644
--- a/client/src/pages/products/ProductsPage/components/ProductList/ProductList.tsx
+++ b/client/src/pages/products/ProductsPage/components/ProductList/ProductList.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActionIcon,
+  Box,
   Button,
   Group,
   LoadingOverlay,
@@ -53,36 +54,49 @@ export default function ProductsList() {
         <AddProductButton />
         <InitializeProductsButton />
       </Group>
-      <Table>
+      <Box pos="relative">
         <LoadingOverlay
           visible={isLoading || isLoadingDelete}
           zIndex={1000}
           overlayProps={{ radius: "sm", blur: 2 }}
         />
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t("Name")}</Table.Th>
-            <Table.Th>{t("Type")}</Table.Th>
-            <Table.Th>{t("Actions")}</Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-        <Table.Tbody>
-          {data &&
-            data.map((product: IProduct) => (
-              <Table.Tr key={product.id}>
-                <Table.Td>{product.name}</Table.Td>
-                <Table.Td>{t(product.type)}</Table.Td>
-                <Table.Td>
-                  <ActionIcon color="red" title={t("Borrar producto")}>
-                    <IconTrash
-                      onClick={() => handleOpenModal(product.id, product.name)}
-                    />
-                  </ActionIcon>
-                </Table.Td>
+        <Box
+          style={{
+            display: "block",
+            overflowX: "scroll",
+            whiteSpace: "nowrap",
+          }}
+        >
+          <Table>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>{t("Name")}</Table.Th>
+                <Table.Th>{t("Type")}</Table.Th>
+                <Table.Th>{t("Actions")}</Table.Th>
               </Table.Tr>
-            ))}
-        </Table.Tbody>
-      </Table>
+            </Table.Thead>
+            <Table.Tbody>
+              {data &&
+                data.map((product: IProduct) => (
+                  <Table.Tr key={product.id}>
+                    <Table.Td>{product.name}</Table.Td>
+                    <Table.Td>{t(product.type)}</Table.Td>
+                    <Table.Td>
+                      <ActionIcon color="red" title={t("Borrar producto")}>
+                        <IconTrash
+                          onClick={() =>
+                            handleOpenModal(product.id, product.name)
+                          }
+                        />
+                      </ActionIcon>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+            </Table.Tbody>
+          </Table>
+        </Box>
+      </Box>
+
       <Modal opened={opened} onClose={close} title="Borrar producto">
         <Stack>
           <Text>Estas seguro de que quieres borrar el producto?</Text>
diff --git a/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx b/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx
index 790e70c..04ebc4d 100644
--- a/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx
+++ b/client/src/pages/recipes/AddRecipePage/components/AddRecipeForm/AddRecipeForm.tsx
@@ -27,10 +27,10 @@ import { IconFlame, IconTrash } from "@tabler/icons-react";
 import { useEditor } from "@tiptap/react";
 import ImageDropZone from "components/ImageDropzone/ImageDropZone";
 import { useProducts } from "hooks/products/use-products";
-import { useAddrecipe } from "hooks/recipes/use-recipes";
-import recipeTypes from "pages/recipes/recipe-types";
+import { useAddrecipe, useSides } from "hooks/recipes/use-recipes";
+import { recipeTypes } from "pages/recipes/recipe-types";
 import { IProduct } from "types/products";
-import { DaysOfWeek, MealTemps, MealTypes } from "types/recipes";
+import { DaysOfWeek, IRecipe, MealTemps, MealTypes } from "types/recipes";
 import { getBase64 } from "utils/base_64";
 import { editorExtensions } from "utils/editor";
 
@@ -54,6 +54,7 @@ export default function AddRecipeForm() {
   const { t } = useTranslation();
   const { mutate, isLoading } = useAddrecipe();
   const { data: products, isFetching: productsFetching } = useProducts();
+  const { data: sides, isLoading: sidesLoading } = useSides();
   const navigate = useNavigate();
   const [files, setFiles] = useState<FileWithPath[]>([]);
   const [base64file, setBase64file] = useState<string | null>(null);
@@ -122,11 +123,11 @@ export default function AddRecipeForm() {
     extensions: editorExtensions,
   });
 
-  if (productsFetching) {
+  if (productsFetching || sidesLoading) {
     return <div>{t("Loading...")}</div>;
   }
 
-  const getIngredients = () => {
+  const generateIngredientsFields = () => {
     const productsOptions = products.map((product: IProduct) => ({
       value: product.id.toString(),
       label: product.name,
@@ -163,10 +164,10 @@ export default function AddRecipeForm() {
     return fields;
   };
 
-  const getSides = () => {
-    const productsOptions = products.map((product: IProduct) => ({
-      value: product.id.toString(),
-      label: product.name,
+  const generateSidesFields = () => {
+    const productsOptions = sides.map((side: IRecipe) => ({
+      value: side.id.toString(),
+      label: side.name,
     }));
 
     const fields = form.values.sides.map((item: any, index) => (
@@ -174,18 +175,12 @@ export default function AddRecipeForm() {
         <Select
           withAsterisk
           searchable
-          placeholder={t<string>("Elije el producto")}
+          placeholder={t<string>("Elije el acompañamiento")}
           data={productsOptions}
-          {...form.getInputProps(`sides.${index}.product`)}
+          {...form.getInputProps(`sides.${index}.id`)}
           required
           mt="md"
         />
-        <TextInput
-          placeholder={t<string>("Quantity")}
-          withAsterisk
-          style={{ flex: 1 }}
-          {...form.getInputProps(`sides.${index}.quantity`)}
-        />
 
         <ActionIcon
           color="red"
@@ -360,7 +355,7 @@ export default function AddRecipeForm() {
             {t("Ingredientes")}
           </Text>
 
-          {getIngredients()}
+          {generateIngredientsFields()}
 
           <Group mt="md">
             <Button
@@ -418,9 +413,9 @@ export default function AddRecipeForm() {
           />
 
           <Text fz="lg" mt="md">
-            {t("Acompañamientos")}
+            {t("Sides")}
           </Text>
-          {getSides()}
+          {generateSidesFields()}
           <Group mt="md">
             <Button
               onClick={() =>
@@ -431,7 +426,7 @@ export default function AddRecipeForm() {
                 })
               }
             >
-              {t("Añadir acompañamiento")}
+              {t("Add new side")}
             </Button>
           </Group>
 
diff --git a/client/src/pages/recipes/EditRecipePage/EditRecipePage.tsx b/client/src/pages/recipes/EditRecipePage/EditRecipePage.tsx
index 2b20a11..412eaa1 100644
--- a/client/src/pages/recipes/EditRecipePage/EditRecipePage.tsx
+++ b/client/src/pages/recipes/EditRecipePage/EditRecipePage.tsx
@@ -1,5 +1,13 @@
+import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
-import { Anchor, Breadcrumbs, Grid, Paper } from "@mantine/core";
+import {
+  Anchor,
+  Breadcrumbs,
+  Grid,
+  LoadingOverlay,
+  Paper,
+  Box,
+} from "@mantine/core";
 import EditRecipeForm from "./components/EditRecipeForm/EditRecipeForm";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
@@ -7,7 +15,8 @@ import { useRecipe } from "hooks/recipes/use-recipes";
 
 export default function EditRecipePage() {
   const { recipeId } = useParams();
-  const { data, isFetching } = useRecipe(recipeId ? +recipeId : undefined);
+  const { data, isLoading } = useRecipe(recipeId ? +recipeId : undefined);
+  const { t } = useTranslation();
   const items = [
     { title: "Inicio", href: "../../.." },
     { title: "Recetas", href: "../.." },
@@ -19,18 +28,28 @@ export default function EditRecipePage() {
       {item.title}
     </Anchor>
   ));
-  if (isFetching) return <div>Cargando...</div>;
 
   return (
-    <Grid columns={24}>
-      <Grid.Col span={24}>
-        <Breadcrumbs>{items}</Breadcrumbs>
-        <PageTitle header="Editar receta" />
-      </Grid.Col>
-      <Grid.Col span={24}>
-        <Paper shadow="xs" p="md">
-          {data && <EditRecipeForm recipe={data} />}
-        </Paper>
+    <Grid>
+      {data && (
+        <Box pos="relative">
+          <LoadingOverlay
+            visible={isLoading}
+            zIndex={1000}
+            overlayProps={{ radius: "sm", blur: 2 }}
+          />
+          <Grid.Col>
+            <Breadcrumbs>{items}</Breadcrumbs>
+            <PageTitle header={t<string>("Editar receta")} />
+          </Grid.Col>
+          <Grid.Col>
+            <Paper shadow="xs" p="md">
+              <EditRecipeForm recipe={data} />
+            </Paper>
+          </Grid.Col>
+        </Box>
+      )}
+      <Grid.Col>
         <Footer />
       </Grid.Col>
     </Grid>
diff --git a/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx b/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx
index 60c9d15..802a472 100644
--- a/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx
+++ b/client/src/pages/recipes/EditRecipePage/components/EditRecipeForm/EditRecipeForm.tsx
@@ -27,8 +27,8 @@ import { IconFlame, IconTrash } from "@tabler/icons-react";
 import { useEditor } from "@tiptap/react";
 import ImageDropZone from "components/ImageDropzone/ImageDropZone";
 import { useProducts } from "hooks/products/use-products";
-import { useUpdateRecipe } from "hooks/recipes/use-recipes";
-import recipeTypes from "pages/recipes/recipe-types";
+import { useSides, useUpdateRecipe } from "hooks/recipes/use-recipes";
+import { recipeTypes } from "pages/recipes/recipe-types";
 import { IProduct } from "types/products";
 import { DaysOfWeek, IRecipe, MealTemps, MealTypes } from "types/recipes";
 import { getBase64 } from "utils/base_64";
@@ -57,7 +57,8 @@ interface EditRecipeFormProps {
 export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
   const { t } = useTranslation();
   const { mutate, isLoading } = useUpdateRecipe();
-  const { data: products, isFetching: productsFetching } = useProducts();
+  const { data: products, isLoading: productsLoading } = useProducts();
+  const { data: sides, isLoading: sidesLoading } = useSides();
   const navigate = useNavigate();
   const [files, setFiles] = useState<FileWithPath[]>([]);
   const [base64file, setBase64file] = useState<string | null>(null);
@@ -88,9 +89,8 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
       preparationTime: recipe?.preparationTime || 0,
       servings: recipe?.servings || 0,
       sides: recipe.sides.map((side) => ({
-        product: side.product.id.toString(),
-        quantity: side.quantity,
-        key: randomId(),
+        id: side.id.toString(),
+        key: side.id,
       })),
       preference: recipe?.preference || 0,
       difficulty: recipe?.difficulty || 0,
@@ -173,10 +173,10 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
     );
   });
 
-  const getSides = useCallback(() => {
-    const productsOptions = products.map((product: IProduct) => ({
-      value: product.id.toString(),
-      label: product.name,
+  const generateSidesFields = useCallback(() => {
+    const sidesOptions = sides.map((side: IRecipe) => ({
+      value: side.id.toString(),
+      label: side.name,
     }));
     // Add an option at the beginning of the array
     // productsOptions.unshift({ value: null, label: "Elige un producto" });
@@ -186,17 +186,11 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
           withAsterisk
           searchable
           placeholder="Elije el producto"
-          data={productsOptions}
-          {...form.getInputProps(`sides.${index}.product`)}
+          data={sidesOptions}
+          {...form.getInputProps(`sides.${index}.id`)}
           required
           mt="md"
         />
-        <TextInput
-          placeholder="Quantity"
-          withAsterisk
-          style={{ flex: 1 }}
-          {...form.getInputProps(`sides.${index}.quantity`)}
-        />
 
         <ActionIcon
           color="red"
@@ -207,7 +201,7 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
       </Group>
     ));
     return fields;
-  }, [form, products]);
+  }, [form, sides]);
 
   const onSubmit = (values: any) => {
     const newValues = values;
@@ -217,9 +211,9 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
 
     newValues.ingredients = filteredIngredients;
 
-    const filteredSides = values.sides.filter(
-      (side: any) => side.product !== null,
-    );
+    const filteredSides = values.sides
+      .filter((side: any) => side.id !== null)
+      .map((side: any) => +side.id);
 
     newValues.sides = filteredSides;
 
@@ -240,14 +234,14 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
     navigate(-1);
   };
 
-  if (productsFetching) {
-    return <div>{t("Loading products...")}</div>;
+  if (productsLoading || sidesLoading) {
+    return <div>{t("Loading products and side meals...")}</div>;
   }
   return (
     <Group>
       <Box>
         <LoadingOverlay
-          visible={isLoading}
+          visible={isLoading || productsLoading || sidesLoading}
           zIndex={1000}
           overlayProps={{ radius: "sm", blur: 2 }}
         />
@@ -277,7 +271,6 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
             required
             mt="md"
           />
-
           <Select
             label={t("Comida del día preferida")}
             withAsterisk
@@ -288,17 +281,19 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
             mt="md"
           />
 
-          <Switch
-            label={t("Solo para comer")}
-            {...form.getInputProps("isOnlyLunch", { type: "checkbox" })}
-            mt="md"
-          />
+          <Group mt="md">
+            <Switch
+              label={t("Solo para comer")}
+              {...form.getInputProps("isOnlyLunch", { type: "checkbox" })}
+              mt="md"
+            />
 
-          <Switch
-            label={t("Solo para cenar")}
-            {...form.getInputProps("isOnlyDinner", { type: "checkbox" })}
-            mt="md"
-          />
+            <Switch
+              label={t("Solo para cenar")}
+              {...form.getInputProps("isOnlyDinner", { type: "checkbox" })}
+              mt="md"
+            />
+          </Group>
 
           <Switch
             label={t("Es una receta de horno")}
@@ -434,15 +429,14 @@ export default function EditRecipeForm({ recipe }: EditRecipeFormProps) {
           />
 
           <Text fz="lg" mt="md">
-            {t("Acompañamientos")}
+            {t("Sides")}
           </Text>
-          {getSides()}
+          {generateSidesFields()}
           <Group mt="md">
             <Button
               onClick={() =>
                 form.insertListItem("sides", {
-                  product: "0",
-                  quantity: 0,
+                  product: null,
                   key: randomId(),
                 })
               }
diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails.tsx
new file mode 100644
index 0000000..45e86c0
--- /dev/null
+++ b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails.tsx
@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Badge, Grid, Group, Paper, Image } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+import RecipeExtraInfo from "./components/RecipeExtraInfo/RecipeExtraInfo";
+import RecipeHeader from "./components/RecipeHeader/RecipeHeader";
+import RecipeInstructions from "./components/RecipeInstructions/RecipeInstructions";
+import { IRecipe } from "types/recipes";
+
+interface Props {
+  recipe: IRecipe;
+}
+
+export default function RecipeDetails({ recipe }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Grid.Col>
+        <RecipeHeader recipe={recipe} />
+      </Grid.Col>
+      <Grid.Col span={{ md: 8, sm: 12 }}>
+        <Paper shadow="xs" p="md">
+          <Grid>
+            <Grid.Col>
+              <Group justify="space-between">
+                {recipe.active ? (
+                  <Badge color="teal">{t("Activa")}</Badge>
+                ) : (
+                  <Badge color="red">{t("Inactiva")}</Badge>
+                )}
+                <Link
+                  to={
+                    recipe.isSidePlate
+                      ? `/sides/${recipe.id}/edit`
+                      : `/recipes/${recipe.id}/edit`
+                  }
+                >
+                  <IconEdit />
+                </Link>
+              </Group>
+            </Grid.Col>
+          </Grid>
+          <Grid>
+            <Grid.Col span={{ md: 9, order: 2, orderSm: 2, orderLg: 1 }}>
+              <RecipeInstructions recipe={recipe} />
+            </Grid.Col>
+            <Grid.Col span={{ md: 3, order: 1, orderSm: 1, orderLg: 2 }}>
+              <Image
+                maw="auto"
+                mx="auto"
+                radius="md"
+                src={recipe.image}
+                alt={t<string>("Imagen de la receta")}
+              />
+            </Grid.Col>
+          </Grid>
+        </Paper>
+      </Grid.Col>
+      <Grid.Col span={{ md: 4, sm: 12 }}>
+        <RecipeExtraInfo recipe={recipe} />
+      </Grid.Col>
+    </>
+  );
+}
diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeExtraInfo/RecipeExtraInfo.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeExtraInfo/RecipeExtraInfo.tsx
new file mode 100644
index 0000000..a67fbc3
--- /dev/null
+++ b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeExtraInfo/RecipeExtraInfo.tsx
@@ -0,0 +1,105 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Title, Text } from "@mantine/core";
+import { IconCooker } from "@tabler/icons-react";
+import { generateHTML } from "@tiptap/core";
+import { IRecipe } from "types/recipes";
+import { editorExtensions } from "utils/editor";
+
+interface IProps {
+  recipe: IRecipe;
+}
+
+export default function RecipeExtraInfo({ recipe }: IProps) {
+  const { t } = useTranslation();
+  const notes = useMemo(() => {
+    if (recipe && recipe.notes) {
+      let notesParsed = recipe.notes;
+      // Get the type of descr
+      if (typeof notesParsed === "string") {
+        notesParsed = JSON.parse(notesParsed);
+      }
+      return generateHTML(notesParsed, editorExtensions);
+    }
+    return "";
+  }, [recipe]);
+  console.log(recipe);
+  console.log(notes);
+  console.log(t);
+
+  const getRecipeDaysOfWeek = (daysOfWeek: string) => {
+    switch (daysOfWeek) {
+      case "ALL":
+        return t("Todos los días");
+      case "WEEKDAYS":
+        return t("Entre semana");
+      case "WEEKENDS":
+        return t("Fin de semana");
+      default:
+        return t("Todos");
+    }
+  };
+  return (
+    <Stack>
+      <Title order={5}>{t("Detalles")}</Title>
+      {recipe.isOvenRecipe && (
+        <Text>
+          <IconCooker /> {t("Receta de horno")}
+        </Text>
+      )}
+      {/* {recipe.meal === "LUNCH" && (
+        <>
+          <Text>
+            {recipe.preferedMeal === "LUNCH"
+              ? t("Preferida para comer")
+              : t("Preferida para cenar")}
+          </Text>
+          <Text>
+            {recipe.isOnlyLunch
+              ? t("Sólo para comer")
+              : t("Para comer y cenar")}
+          </Text>
+        </>
+      )}
+      {recipe.meal === "DINNER" && (
+        <Text>
+          {recipe.isOnlyDinner ? t("Sólo para cenar") : t("Para comer y cenar")}
+        </Text>
+      )} */}
+
+      <Title order={5}>{t("Días")}</Title>
+      <Text>{getRecipeDaysOfWeek(recipe.daysOfWeek)}</Text>
+
+      {/* <Title order={5}>{t("Estaciones")}</Title>
+      <Group>
+        <Badge color={recipe.seasonSpring ? "teal" : "red"}>
+          {t("Primavera")}
+        </Badge>
+        <Badge color={recipe.seasonSummer ? "teal" : "red"}>
+          {t("Verano")}
+        </Badge>
+        <Badge color={recipe.seasonAutumn ? "teal" : "red"}>{t("Otoño")}</Badge>
+        <Badge color={recipe.seasonWinter ? "teal" : "red"}>
+          {t("Invierno")}
+        </Badge>
+      </Group>
+
+      <Title order={5}>{t("Temperatura")}</Title>
+      <Text>
+        {recipe.mealTemp === "WARM" ? (
+          <Text style={{ color: "#fa5252" }}>{t("Caliente")}</Text>
+        ) : (
+          <Text style={{ color: "#228be6" }}>{t("Fría")}</Text>
+        )}
+      </Text>
+      {notes && (
+        <>
+          <Title order={5}>{t("Notas")}</Title>
+          <Paper color="purple" shadow="xs" p="md">
+            <div dangerouslySetInnerHTML={{ __html: notes }} />
+          </Paper>
+        </>
+      )} */}
+    </Stack>
+  );
+}
diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeHeader/RecipeHeader.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeHeader/RecipeHeader.tsx
new file mode 100644
index 0000000..d2b469c
--- /dev/null
+++ b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeHeader/RecipeHeader.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next";
+import { Group, Rating, Text } from "@mantine/core";
+import { IconClock, IconFlame, IconUsers } from "@tabler/icons-react";
+import { IRecipe } from "types/recipes";
+
+interface IProps {
+  recipe: IRecipe;
+}
+export default function RecipeHeader({ recipe }: IProps) {
+  const { t } = useTranslation();
+  const { preference, difficulty, preparationTime, servings } = recipe;
+  console.log(preference, difficulty, preparationTime, servings);
+  return (
+    <Group>
+      {t("Preferencia: ")}
+      <Rating value={preference} readOnly />
+      <Text>/</Text>
+      {t("Dificultad: ")}
+      <Rating
+        value={difficulty}
+        readOnly
+        emptySymbol={<IconFlame size="1.2rem" color="gray" />}
+        fullSymbol={<IconFlame size="1.2rem" color="red" />}
+      />
+      <Text>/</Text>
+      <Text>
+        <IconClock /> {t("Tiempo: ")}
+        {preparationTime}
+      </Text>
+      <Text>/</Text>
+      <Text>
+        <IconUsers />
+        {t("Comensales: ")}
+        {servings}
+      </Text>
+    </Group>
+  );
+}
diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeInstructions/RecipeInstructions.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeInstructions/RecipeInstructions.tsx
new file mode 100644
index 0000000..d14e1bf
--- /dev/null
+++ b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetails/components/RecipeInstructions/RecipeInstructions.tsx
@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { List, Stack, Title, Text } from "@mantine/core";
+import { generateHTML } from "@tiptap/core";
+import { IIngredient } from "types/ingredients";
+import { IRecipe } from "types/recipes";
+import { editorExtensions, renderExtensions } from "utils/editor";
+
+type Props = { recipe: IRecipe };
+
+export default function RecipeInstructions({ recipe }: Props) {
+  const { t } = useTranslation();
+  const description = useMemo(() => {
+    if (recipe && recipe.description) {
+      let descr = recipe.description;
+      // Get the type of descr
+      if (typeof descr === "string") {
+        descr = JSON.parse(descr);
+      }
+      return generateHTML(descr, renderExtensions);
+    }
+    return "";
+  }, [recipe]);
+
+  const instructions = useMemo(() => {
+    if (recipe && recipe.instructions) {
+      let instr = recipe.instructions;
+      // Get the type of descr
+      if (typeof instr === "string") {
+        instr = JSON.parse(instr);
+      }
+      return generateHTML(instr, editorExtensions);
+    }
+    return "";
+  }, [recipe]);
+
+  return (
+    <Stack>
+      <Text>
+        <div dangerouslySetInnerHTML={{ __html: description }} />
+      </Text>
+      <Title order={5}>{t("Ingredientes")}</Title>
+      <List>
+        {recipe.ingredients.map((ingredient: IIngredient) => (
+          <List.Item key={ingredient.id}>
+            {ingredient.product.name}: {ingredient.quantity}
+          </List.Item>
+        ))}
+      </List>
+      <Title order={5}>Instrucciones</Title>
+      <div dangerouslySetInnerHTML={{ __html: instructions }} />
+      {recipe.sides && recipe.sides.length > 0 && (
+        <>
+          <Title order={5}>{t("Sides")}</Title>
+          <List>
+            {recipe.sides.map((side: IRecipe) => (
+              <List.Item key={side.id}>
+                <Link to={`/sides/${side.id}`}>{side.name}</Link>
+              </List.Item>
+            ))}
+          </List>
+        </>
+      )}
+    </Stack>
+  );
+}
diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx
index 48ab50c..012fb12 100644
--- a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx
+++ b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx
@@ -1,18 +1,23 @@
+import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import { Anchor, Breadcrumbs, Grid, LoadingOverlay } from "@mantine/core";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
-import RecipeDetails from "components/RecipeDetails/RecipeDetails";
 import { useRecipe } from "hooks/recipes/use-recipes";
+import RecipeDetails from "pages/recipes/RecipeDetailsPage/RecipeDetails/RecipeDetails";
 
 export default function RecipeDetailsPage() {
   const { recipeId } = useParams();
   const { data, isLoading } = useRecipe(recipeId ? +recipeId : undefined);
+  const { t } = useTranslation();
 
   const items = [
     { title: "Inicio", href: "../.." },
-    { title: "Recetas", href: ".." },
-    { title: data ? data.name : "Cargando...", href: "." },
+    {
+      title: data?.isSidePlate ? t<string>("Sides") : t<string>("Recetas"),
+      href: "..",
+    },
+    { title: data?.name, href: "." },
   ].map((item, index) => (
     // eslint-disable-next-line react/no-array-index-key
     <Anchor component={Link} to={item.href} key={index} relative="path">
@@ -20,27 +25,25 @@ export default function RecipeDetailsPage() {
     </Anchor>
   ));
 
-  if (data) {
-    return (
-      <Grid columns={24}>
-        <LoadingOverlay
-          visible={isLoading}
-          zIndex={1000}
-          overlayProps={{ radius: "sm", blur: 2 }}
-        />
-        <Grid.Col span={24}>
-          <Breadcrumbs>{items}</Breadcrumbs>
-          <PageTitle
-            header={`${data ? data.name : "cargando..."}`}
-            withBackButton
-          />
-        </Grid.Col>
-        {data && <RecipeDetails recipe={data} />}
-        <Grid.Col span={24}>
-          <Footer />
-        </Grid.Col>
-      </Grid>
-    );
-  }
-  return null;
+  return (
+    <Grid>
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: "sm", blur: 2 }}
+      />
+      {data && (
+        <>
+          <Grid.Col>
+            <Breadcrumbs>{items}</Breadcrumbs>
+            <PageTitle header={`${data?.name}`} withBackButton />
+          </Grid.Col>
+          <RecipeDetails recipe={data} />
+        </>
+      )}
+      <Grid.Col>
+        <Footer />
+      </Grid.Col>
+    </Grid>
+  );
 }
diff --git a/client/src/pages/recipes/RecipesPage/components/RecipeList/RecipeList.tsx b/client/src/pages/recipes/RecipesPage/components/RecipeList/RecipeList.tsx
index 0642f6c..fb092b5 100644
--- a/client/src/pages/recipes/RecipesPage/components/RecipeList/RecipeList.tsx
+++ b/client/src/pages/recipes/RecipesPage/components/RecipeList/RecipeList.tsx
@@ -12,6 +12,7 @@ import {
   Image,
   Anchor,
   LoadingOverlay,
+  Box,
 } from "@mantine/core";
 import { useDisclosure, useMediaQuery } from "@mantine/hooks";
 import {
@@ -75,80 +76,95 @@ export default function RecipeList() {
         </Button>
         <InitializeRecipesButton />
       </Group>
-      {data && (
-        <Table>
-          <LoadingOverlay
-            visible={isLoadindRecipes || isLoadingDelete}
-            zIndex={1000}
-            overlayProps={{ radius: "sm", blur: 2 }}
-          />
-          <Table.Thead>
-            <Table.Tr>
-              {isMobile && <Table.Th>{t("Image")}</Table.Th>}
-              <Table.Th>{t("Name")}</Table.Th>
-              <Table.Th>{t("Type")}</Table.Th>
-              <Table.Th>{t("Meal")}</Table.Th>
-              {isMobile && <Table.Th>{t("Seasons")}</Table.Th>}
-              <Table.Th>{t("Actions")}</Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {data?.map((recipe: IRecipe) => (
-              <Table.Tr key={recipe.id}>
-                {isMobile && (
-                  <Table.Td>
-                    <Image
-                      src={recipe.image}
-                      alt={recipe.name}
-                      fallbackSrc="https://placehold.co/80x80?text=Placeholder"
-                      h={80}
-                      w="auto"
-                      fit="contain"
-                    />
-                  </Table.Td>
-                )}
-                <Table.Td>
-                  {recipe.active ? (
-                    <strong>
-                      <Anchor component={Link} to={`${recipe.id}`}>
-                        {recipe.name}
-                      </Anchor>
-                    </strong>
-                  ) : (
-                    <Anchor component={Link} to={`${recipe.id}`}>
-                      {recipe.name}
-                    </Anchor>
-                  )}
-                </Table.Td>
-                <Table.Td>{getRecipeTypeLabel(recipe.type)}</Table.Td>
-                <Table.Td>
-                  {recipe.meal === "LUNCH" ? <IconSunHigh /> : <IconMoon />}
-                </Table.Td>
-                {isMobile && (
-                  <Table.Td>
-                    {recipe.seasonSpring && <IconFlower color="teal" />}{" "}
-                    {recipe.seasonSummer && <IconSun color="#f76707" />}
-                    {recipe.seasonAutumn && <IconLeaf color="brown" />}
-                    {recipe.seasonWinter && <IconSnowman color="gray" />}
-                  </Table.Td>
-                )}
-                <Table.Td>
-                  <Group>
-                    <ActionIcon color="red" title="Borrar receta">
-                      <IconTrash
-                        onClick={() => handleOpenModal(recipe.id, recipe.name)}
-                      />
-                    </ActionIcon>
-                    <ActionIcon title="Editar receta">
-                      <IconEdit onClick={() => navigate(`${recipe.id}/edit`)} />
-                    </ActionIcon>
-                  </Group>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      )}
+      <Box pos="relative">
+        <LoadingOverlay
+          visible={isLoadindRecipes || isLoadingDelete}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+        {data && (
+          <Box
+            style={{
+              display: "block",
+              overflowX: "scroll",
+              whiteSpace: "nowrap",
+            }}
+          >
+            <Table>
+              <Table.Thead>
+                <Table.Tr>
+                  {isMobile && <Table.Th>{t("Image")}</Table.Th>}
+                  <Table.Th>{t("Name")}</Table.Th>
+                  <Table.Th>{t("Type")}</Table.Th>
+                  <Table.Th>{t("Meal")}</Table.Th>
+                  {isMobile && <Table.Th>{t("Seasons")}</Table.Th>}
+                  <Table.Th>{t("Actions")}</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {data?.map((recipe: IRecipe) => (
+                  <Table.Tr key={recipe.id}>
+                    {isMobile && (
+                      <Table.Td>
+                        <Image
+                          src={recipe.image}
+                          alt={recipe.name}
+                          fallbackSrc="https://placehold.co/80x80?text=Placeholder"
+                          h={80}
+                          w="auto"
+                          fit="contain"
+                        />
+                      </Table.Td>
+                    )}
+                    <Table.Td>
+                      {recipe.active ? (
+                        <strong>
+                          <Anchor component={Link} to={`${recipe.id}`}>
+                            {recipe.name}
+                          </Anchor>
+                        </strong>
+                      ) : (
+                        <Anchor component={Link} to={`${recipe.id}`}>
+                          {recipe.name}
+                        </Anchor>
+                      )}
+                    </Table.Td>
+                    <Table.Td>{getRecipeTypeLabel(recipe.type)}</Table.Td>
+                    <Table.Td>
+                      {recipe.meal === "LUNCH" ? <IconSunHigh /> : <IconMoon />}
+                    </Table.Td>
+                    {isMobile && (
+                      <Table.Td>
+                        {recipe.seasonSpring && <IconFlower color="teal" />}{" "}
+                        {recipe.seasonSummer && <IconSun color="#f76707" />}
+                        {recipe.seasonAutumn && <IconLeaf color="brown" />}
+                        {recipe.seasonWinter && <IconSnowman color="gray" />}
+                      </Table.Td>
+                    )}
+                    <Table.Td>
+                      <Group>
+                        <ActionIcon color="red" title="Borrar receta">
+                          <IconTrash
+                            onClick={() =>
+                              handleOpenModal(recipe.id, recipe.name)
+                            }
+                          />
+                        </ActionIcon>
+                        <ActionIcon title="Editar receta">
+                          <IconEdit
+                            onClick={() => navigate(`${recipe.id}/edit`)}
+                          />
+                        </ActionIcon>
+                      </Group>
+                    </Table.Td>
+                  </Table.Tr>
+                ))}
+              </Table.Tbody>
+            </Table>
+          </Box>
+        )}
+      </Box>
+
       <Modal opened={opened} onClose={close} title="Borrar receta">
         <Stack>
           <Text>Estas seguro de que quieres borrar la receta?</Text>
diff --git a/client/src/pages/sides/AddSidePage/AddSidePage.tsx b/client/src/pages/sides/AddSidePage/AddSidePage.tsx
new file mode 100644
index 0000000..5b13971
--- /dev/null
+++ b/client/src/pages/sides/AddSidePage/AddSidePage.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Anchor, Breadcrumbs, Grid, Paper } from "@mantine/core";
+import AddSideForm from "./components/AddSideForm/AddSideForm";
+import { Footer } from "components/Footer/Footer";
+import PageTitle from "components/PageTitle/PageTitle";
+
+export default function AddSidePage() {
+  const items = [
+    { title: "Inicio", href: "../.." },
+    { title: "Sides", href: ".." },
+    { title: "Añadir", href: "." },
+  ].map((item, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Anchor component={Link} to={item.href} key={index} relative="path">
+      {item.title}
+    </Anchor>
+  ));
+  const { t } = useTranslation();
+  return (
+    <Grid columns={24}>
+      <Grid.Col span={24}>
+        <Breadcrumbs>{items}</Breadcrumbs>
+        <PageTitle header={t<string>("Añadir Acompañamiento")} />
+      </Grid.Col>
+      <Grid.Col span={24}>
+        <Paper shadow="xs" p="md">
+          <AddSideForm />
+        </Paper>
+        <Footer />
+      </Grid.Col>
+    </Grid>
+  );
+}
diff --git a/client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx b/client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx
new file mode 100644
index 0000000..359f626
--- /dev/null
+++ b/client/src/pages/sides/AddSidePage/components/AddSideForm/AddSideForm.tsx
@@ -0,0 +1,536 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Rating,
+  Text,
+  TextInput,
+  NumberInput,
+  Select,
+  Switch,
+  Image,
+  Checkbox,
+  SimpleGrid,
+  LoadingOverlay,
+  NativeSelect,
+} from "@mantine/core";
+import { FileWithPath, IMAGE_MIME_TYPE } from "@mantine/dropzone";
+import { useForm } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { RichTextEditor } from "@mantine/tiptap";
+import { IconFlame, IconTrash } from "@tabler/icons-react";
+import { useEditor } from "@tiptap/react";
+import ImageDropZone from "components/ImageDropzone/ImageDropZone";
+import { useProducts } from "hooks/products/use-products";
+import { useAddrecipe } from "hooks/recipes/use-recipes";
+import recipeTypes from "pages/recipes/recipe-types";
+import { IProduct } from "types/products";
+import { DaysOfWeek, MealTemps, MealTypes } from "types/recipes";
+import { getBase64 } from "utils/base_64";
+import { editorExtensions } from "utils/editor";
+
+const mealTypes = [
+  { value: "LUNCH", label: "Comida" },
+  { value: "DINNER", label: "Cena" },
+];
+
+const mealTemps = [
+  { value: "WARM", label: "Caliente" },
+  { value: "COLD", label: "Fría" },
+];
+
+const daysOfWeek = [
+  { value: "WEEK_DAYS", label: "Días entre semana" },
+  { value: "WEEKENDS", label: "Fines de semana" },
+  { value: "ALL", label: "Todos los días" },
+];
+
+export default function AddSideForm() {
+  const { t } = useTranslation();
+  const { mutate, isLoading } = useAddrecipe();
+  const { data: products, isFetching: productsFetching } = useProducts();
+  const navigate = useNavigate();
+  const [files, setFiles] = useState<FileWithPath[]>([]);
+  const [base64file, setBase64file] = useState<string | null>(null);
+
+  const handleDrop = (acceptedFiles: FileWithPath[]) => {
+    console.log(acceptedFiles[0]);
+    getBase64(acceptedFiles[0], (imageUrl: any) => {
+      setBase64file(imageUrl);
+      setFiles(acceptedFiles);
+    });
+  };
+
+  const previews = files.map((file, index) => {
+    const imageUrl = URL.createObjectURL(file);
+    return (
+      <Image
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        src={imageUrl}
+        onLoad={() => URL.revokeObjectURL(imageUrl)}
+        width={200}
+        mt="md"
+        height="auto"
+      />
+    );
+  });
+
+  const form = useForm({
+    initialValues: {
+      active: true,
+      description: "",
+      name: "",
+      meal: "LUNCH" as MealTypes,
+      mealTemp: "WARM" as MealTemps,
+      ingredients: [{ product: null, quantity: 0, key: null }],
+      instructions: "",
+      notes: "",
+      preferedMeal: "LUNCH" as MealTypes,
+      preparationTime: 0,
+      servings: 2,
+      sides: [],
+      preference: 0,
+      difficulty: 0,
+      isOnlyLunch: false,
+      isOnlyDinner: false,
+      isOvenRecipe: false,
+      daysOfWeek: "ALL" as DaysOfWeek,
+      seasonSpring: true,
+      seasonSummer: true,
+      seasonAutumn: true,
+      seasonWinter: true,
+      image: null,
+      type: "OTHER",
+    },
+  });
+
+  const notesEditor = useEditor({
+    extensions: editorExtensions,
+  });
+
+  const instructionsEditor = useEditor({
+    extensions: editorExtensions,
+  });
+
+  const descriptionEditor = useEditor({
+    extensions: editorExtensions,
+  });
+
+  if (productsFetching) {
+    return <div>{t("Loading...")}</div>;
+  }
+
+  const getIngredients = () => {
+    const productsOptions = products.map((product: IProduct) => ({
+      value: product.id.toString(),
+      label: product.name,
+    }));
+    // Add an option at the beginning of the array
+    // productsOptions.unshift({ value: null, label: "Elige un producto" });
+
+    const fields = form.values.ingredients.map((item, index) => (
+      <Group key={item.key} mt="xs">
+        <Select
+          withAsterisk
+          searchable
+          placeholder={t<string>("Elije el producto")}
+          data={productsOptions}
+          {...form.getInputProps(`ingredients.${index}.product`)}
+          required
+          mt="md"
+        />
+        <TextInput
+          placeholder={t<string>("Quantity")}
+          withAsterisk
+          style={{ flex: 1 }}
+          {...form.getInputProps(`ingredients.${index}.quantity`)}
+        />
+
+        <ActionIcon
+          color="red"
+          onClick={() => form.removeListItem("ingredients", index)}
+        >
+          <IconTrash size="1rem" />
+        </ActionIcon>
+      </Group>
+    ));
+    return fields;
+  };
+
+  const onSubmit = (values: any) => {
+    const newValues = values;
+    const filteredIngredients = values.ingredients.filter(
+      (ingredient: any) => ingredient.product !== null,
+    );
+    newValues.ingredients = filteredIngredients;
+
+    newValues.isSidePlate = true;
+
+    newValues.notes = notesEditor?.getJSON();
+    newValues.instructions = instructionsEditor?.getJSON();
+    newValues.description = descriptionEditor?.getJSON();
+    // eslint-disable-next-line prefer-destructuring
+    newValues.image = base64file || null;
+
+    mutate(newValues);
+    navigate(-1);
+  };
+
+  return (
+    <Group>
+      <Box>
+        <LoadingOverlay
+          visible={isLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+        <Text>
+          {t(
+            "Añade una receta a tu lista de recetas utilizando este formulario.",
+          )}
+        </Text>
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            withAsterisk
+            label={t("Name")}
+            placeholder={t<string>("Lentejas, Arroz a la cubana...")}
+            required
+            {...form.getInputProps("name")}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Activada")}
+            description={t(
+              "Si está activada, la receta se utilizará en la generación de menús.",
+            )}
+            {...form.getInputProps("active", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Select
+            label={t("Meal of the day")}
+            withAsterisk
+            placeholder={t<string>("Choose the meal of the day")}
+            data={mealTypes}
+            {...form.getInputProps("meal")}
+            required
+            mt="md"
+          />
+
+          <Switch
+            label={t("Solo para comer")}
+            {...form.getInputProps("isOnlyLunch", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Solo para cenar")}
+            {...form.getInputProps("isOnlyDinner", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Es una receta de horno")}
+            {...form.getInputProps("isOvenRecipe", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <NativeSelect
+            label={t("Tipo")}
+            withAsterisk
+            description={t<string>("Elije un tipo de receta")}
+            data={recipeTypes}
+            {...form.getInputProps("type")}
+            required
+          />
+
+          <Select
+            label={t("Días de la semana")}
+            withAsterisk
+            placeholder={t<string>("Elije para cuándo es esta receta")}
+            data={daysOfWeek}
+            {...form.getInputProps("daysOfWeek")}
+            required
+            mt="md"
+          />
+
+          <Select
+            label={t("Comida del día preferida")}
+            withAsterisk
+            placeholder={t<string>("Elije cuando prefieres comerlo")}
+            data={mealTypes}
+            {...form.getInputProps("preferedMeal")}
+            required
+            mt="md"
+          />
+
+          <Select
+            label={t("Caliente/Fría")}
+            withAsterisk
+            placeholder={t<string>("Elije si es caliente o fria")}
+            data={mealTemps}
+            {...form.getInputProps("mealTemp")}
+            required
+            mt="md"
+          />
+
+          <Group mt="md">
+            <SimpleGrid
+              cols={{ base: 1, sm: 4 }}
+              mt={previews.length > 0 ? "xl" : 0}
+            >
+              <ImageDropZone
+                accept={IMAGE_MIME_TYPE}
+                mt="md"
+                onDrop={handleDrop}
+              />
+
+              {previews}
+            </SimpleGrid>
+          </Group>
+
+          <Text fz="lg" mt="md">
+            {t("Estación de la receta")}
+          </Text>
+          <Group mt="xs">
+            <Checkbox
+              label={t("Primavera")}
+              {...form.getInputProps("seasonSpring", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Verano")}
+              {...form.getInputProps("seasonSummer", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Otoño")}
+              {...form.getInputProps("seasonAutumn", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Invierno")}
+              {...form.getInputProps("seasonWinter", { type: "checkbox" })}
+            />
+          </Group>
+
+          <Text fz="lg" mt="md">
+            {t("Ingredientes")}
+          </Text>
+
+          {getIngredients()}
+
+          <Group mt="md">
+            <Button
+              onClick={() =>
+                form.insertListItem("ingredients", {
+                  product: "0",
+                  quantity: 0,
+                  key: randomId(),
+                })
+              }
+            >
+              {t("Añadir ingrediente")}
+            </Button>
+          </Group>
+          <Text fz="md" mt="md">
+            {t("Preferencia")}
+          </Text>
+          <Rating
+            value={form.values.preference}
+            fractions={2}
+            defaultValue={1.5}
+            onChange={(value: any) => form.setFieldValue("preference", value)}
+            mt="md"
+          />
+
+          <Text fz="md" mt="md">
+            {t("Dificultad")}
+          </Text>
+          <Rating
+            value={form.values.difficulty}
+            fractions={2}
+            defaultValue={1.5}
+            onChange={(value: any) => form.setFieldValue("difficulty", value)}
+            emptySymbol={<IconFlame size="1.2rem" color="gray" />}
+            fullSymbol={<IconFlame size="1.2rem" color="red" />}
+            mt="md"
+          />
+
+          <NumberInput
+            defaultValue={18}
+            placeholder="15, 30, 60..."
+            label={t("Tiempo de elaboración (minutos)")}
+            withAsterisk
+            {...form.getInputProps("preparationTime")}
+            mt="md"
+          />
+
+          <NumberInput
+            defaultValue={18}
+            placeholder={t<string>("Número de comensales")}
+            label={t("Comensales")}
+            withAsterisk
+            {...form.getInputProps("servings")}
+            mt="md"
+          />
+
+          <Text fz="lg" mt="md">
+            {t("Descripcion")}
+          </Text>
+
+          <RichTextEditor editor={descriptionEditor} style={{ minHeight: 200 }}>
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Text fz="lg" mt="md">
+            {t("Pasos a seguir")}
+          </Text>
+
+          <RichTextEditor
+            editor={instructionsEditor}
+            style={{ minHeight: 200 }}
+          >
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Text fz="lg" mt="md">
+            {t("Notas de la receta")}
+          </Text>
+
+          <RichTextEditor editor={notesEditor} style={{ minHeight: 200 }}>
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Group mt="md">
+            <Button type="submit">{t("Crear acompañamiento")}</Button>
+          </Group>
+        </form>
+      </Box>
+    </Group>
+  );
+}
diff --git a/client/src/pages/sides/EditSidePage/EditSidePage.tsx b/client/src/pages/sides/EditSidePage/EditSidePage.tsx
new file mode 100644
index 0000000..43f5a48
--- /dev/null
+++ b/client/src/pages/sides/EditSidePage/EditSidePage.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import {
+  Anchor,
+  Box,
+  Breadcrumbs,
+  Grid,
+  LoadingOverlay,
+  Paper,
+} from "@mantine/core";
+import EditSideForm from "./components/EditSideForm/EditSideForm";
+import { Footer } from "components/Footer/Footer";
+import PageTitle from "components/PageTitle/PageTitle";
+import { useRecipe } from "hooks/recipes/use-recipes";
+
+export default function EditSidePage() {
+  const { recipeId } = useParams();
+  const { data, isLoading } = useRecipe(recipeId ? +recipeId : undefined);
+  const { t } = useTranslation();
+  const items = [
+    { title: t<string>("Inicio"), href: "../../.." },
+    { title: t<string>("Sides"), href: "../.." },
+    { title: data?.name, href: ".." },
+    { title: t<string>("Editar"), href: "." },
+  ].map((item, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <Anchor component={Link} to={item.href} key={index} relative="path">
+      {item.title}
+    </Anchor>
+  ));
+
+  return (
+    <Box pos="relative">
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: "sm", blur: 2 }}
+      />
+      {data && (
+        <Grid columns={24}>
+          <Grid.Col span={24}>
+            <Breadcrumbs>{items}</Breadcrumbs>
+            <PageTitle header={t<string>("Editar compañamiento")} />
+          </Grid.Col>
+          <Grid.Col span={24}>
+            <Paper shadow="xs" p="md">
+              <EditSideForm recipe={data} />
+            </Paper>
+            <Footer />
+          </Grid.Col>
+        </Grid>
+      )}
+    </Box>
+  );
+}
diff --git a/client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx b/client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx
new file mode 100644
index 0000000..dd746be
--- /dev/null
+++ b/client/src/pages/sides/EditSidePage/components/EditSideForm/EditSideForm.tsx
@@ -0,0 +1,541 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Checkbox,
+  Group,
+  Image,
+  LoadingOverlay,
+  NativeSelect,
+  NumberInput,
+  Rating,
+  Select,
+  SimpleGrid,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { FileWithPath } from "@mantine/dropzone";
+import { useForm } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { RichTextEditor } from "@mantine/tiptap";
+import { IconFlame, IconTrash } from "@tabler/icons-react";
+import { useEditor } from "@tiptap/react";
+import ImageDropZone from "components/ImageDropzone/ImageDropZone";
+import { useProducts } from "hooks/products/use-products";
+import { useUpdateRecipe } from "hooks/recipes/use-recipes";
+import recipeTypes from "pages/recipes/recipe-types";
+import { IProduct } from "types/products";
+import { DaysOfWeek, IRecipe, MealTemps, MealTypes } from "types/recipes";
+import { getBase64 } from "utils/base_64";
+import { editorExtensions } from "utils/editor";
+
+const mealTypes = [
+  { value: "LUNCH", label: "Comida" },
+  { value: "DINNER", label: "Cena" },
+];
+
+const mealTemps = [
+  { value: "WARM", label: "Caliente" },
+  { value: "COLD", label: "Fría" },
+];
+
+const daysOfWeek = [
+  { value: "WEEK_DAYS", label: "Días entre semana" },
+  { value: "WEEKENDS", label: "Fines de semana" },
+  { value: "ALL", label: "Todos los días" },
+];
+
+interface EditRecipeFormProps {
+  recipe: IRecipe;
+}
+
+export default function EditSideForm({ recipe }: EditRecipeFormProps) {
+  const { t } = useTranslation();
+  const { mutate, isLoading } = useUpdateRecipe();
+  const { data: products, isFetching: productsFetching } = useProducts();
+  const navigate = useNavigate();
+  const [files, setFiles] = useState<FileWithPath[]>([]);
+  const [base64file, setBase64file] = useState<string | null>(null);
+
+  const handleDrop = (acceptedFiles: FileWithPath[]) => {
+    console.log(acceptedFiles[0]);
+    getBase64(acceptedFiles[0], (imageUrl: any) => {
+      setBase64file(imageUrl);
+      setFiles(acceptedFiles);
+    });
+  };
+  const form = useForm({
+    initialValues: {
+      active: recipe?.active || false,
+      description: recipe?.description || "",
+      name: recipe?.name || "",
+      meal: recipe?.meal || ("LUNCH" as MealTypes),
+      mealTemp: recipe?.mealTemp || ("WARM" as MealTemps),
+      ingredients: recipe.ingredients.map((ingredient) => ({
+        product: ingredient.product.id.toString(),
+        quantity: ingredient.quantity,
+        key: randomId(),
+      })),
+
+      instructions: recipe?.instructions || "",
+      notes: recipe?.notes || "",
+      preferedMeal: recipe?.preferedMeal || ("LUNCH" as MealTypes),
+      preparationTime: recipe?.preparationTime || 0,
+      servings: recipe?.servings || 0,
+      sides: [],
+      preference: recipe?.preference || 0,
+      difficulty: recipe?.difficulty || 0,
+      isOnlyLunch: recipe?.isOnlyLunch || false,
+      isOnlyDinner: recipe?.isOnlyDinner || false,
+      isOvenRecipe: recipe?.isOvenRecipe || false,
+      daysOfWeek: recipe?.daysOfWeek || ("ALL" as DaysOfWeek),
+      seasonSpring: recipe?.seasonSpring || false,
+      seasonSummer: recipe?.seasonSummer || false,
+      seasonAutumn: recipe?.seasonAutumn || false,
+      seasonWinter: recipe?.seasonWinter || false,
+      image: recipe?.image || null,
+      type: recipe?.type || "OTHER",
+    },
+  });
+
+  const notesEditor = useEditor({
+    extensions: editorExtensions,
+    content: recipe ? recipe.notes : "",
+  });
+
+  const instructionsEditor = useEditor({
+    extensions: editorExtensions,
+    content: recipe ? recipe.instructions : "",
+  });
+
+  const descriptionEditor = useEditor({
+    extensions: editorExtensions,
+    content: recipe ? recipe.description : "",
+  });
+
+  const getIngredients = useCallback(() => {
+    const productsOptions = products.map((product: IProduct) => ({
+      value: product.id.toString(),
+      label: product.name,
+    }));
+    // Add an option at the beginning of the array
+    // productsOptions.unshift({ value: null, label: "Elige un producto" });
+
+    const fields = form.values.ingredients.map((item, index) => (
+      <Group key={item.key} mt="xs">
+        <Select
+          withAsterisk
+          searchable
+          placeholder="Elije el producto"
+          data={productsOptions}
+          {...form.getInputProps(`ingredients.${index}.product`)}
+          required
+          mt="md"
+        />
+        <TextInput
+          placeholder="Quantity"
+          withAsterisk
+          style={{ flex: 1 }}
+          {...form.getInputProps(`ingredients.${index}.quantity`)}
+        />
+
+        <ActionIcon
+          color="red"
+          onClick={() => form.removeListItem("ingredients", index)}
+        >
+          <IconTrash size="1rem" />
+        </ActionIcon>
+      </Group>
+    ));
+    return fields;
+  }, [form, products]);
+
+  const previews = files.map((file, index) => {
+    const imageUrl = URL.createObjectURL(file);
+    return (
+      <Image
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        src={imageUrl}
+        onLoad={() => URL.revokeObjectURL(imageUrl)}
+        width={200}
+        mt="md"
+      />
+    );
+  });
+
+  const onSubmit = (values: any) => {
+    const newValues = values;
+    const filteredIngredients = values.ingredients.filter(
+      (ingredient: any) => ingredient.product !== null,
+    );
+
+    newValues.ingredients = filteredIngredients;
+
+    newValues.notes = notesEditor?.getJSON();
+    newValues.instructions = instructionsEditor?.getJSON();
+    newValues.description = descriptionEditor?.getJSON();
+    if (base64file) {
+      newValues.image = base64file;
+    }
+
+    // Only send the image if it has changed. Otherwise, remove it from the object
+    if (recipe.image === newValues.image) {
+      delete newValues.image;
+    }
+
+    console.log(newValues);
+    mutate({ recipeId: recipe.id, newRecipe: newValues });
+    navigate(-1);
+  };
+
+  if (productsFetching) {
+    return <div>{t("Loading products...")}</div>;
+  }
+  return (
+    <Group>
+      <Box>
+        <LoadingOverlay
+          visible={isLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <TextInput
+            withAsterisk
+            label={t("Name")}
+            placeholder="Lentejas, Arroz a la cubana..."
+            required
+            {...form.getInputProps("name")}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Enabled")}
+            description="Si está activada, la receta se utilizará en la generación de menús."
+            {...form.getInputProps("active", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Select
+            label={t("Lunch of the day")}
+            withAsterisk
+            placeholder={t<string>("Elije la comida del día")}
+            data={mealTypes}
+            {...form.getInputProps("meal")}
+            required
+            mt="md"
+          />
+
+          <Select
+            label={t("Comida del día preferida")}
+            withAsterisk
+            placeholder={t<string>("Elije cuando prefieres comerlo")}
+            data={mealTypes}
+            {...form.getInputProps("preferedMeal")}
+            required
+            mt="md"
+          />
+
+          <Switch
+            label={t("Solo para comer")}
+            {...form.getInputProps("isOnlyLunch", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Solo para cenar")}
+            {...form.getInputProps("isOnlyDinner", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <Switch
+            label={t("Es una receta de horno")}
+            {...form.getInputProps("isOvenRecipe", { type: "checkbox" })}
+            mt="md"
+          />
+
+          <NativeSelect
+            label={t("Tipo")}
+            withAsterisk
+            description={t<string>("Elije un tipo de receta")}
+            data={recipeTypes}
+            {...form.getInputProps("type")}
+            required
+          />
+
+          <Select
+            label={t("Días de la semana")}
+            withAsterisk
+            placeholder={t<string>("Elije para cuándo es esta receta")}
+            data={daysOfWeek}
+            {...form.getInputProps("daysOfWeek")}
+            required
+            mt="md"
+          />
+
+          <Select
+            label={t("Caliente/Fría")}
+            withAsterisk
+            placeholder={t<string>("Elije si es caliente o fria")}
+            data={mealTemps}
+            {...form.getInputProps("mealTemp")}
+            required
+            mt="md"
+          />
+
+          <Group mt="md">
+            <SimpleGrid
+              cols={{ base: 1, sm: 4 }}
+              mt={previews.length > 0 ? "xl" : 0}
+            >
+              <ImageDropZone mt="md" onDrop={handleDrop} />
+
+              {files.length === 0 && recipe && recipe.image && (
+                <Image src={recipe.image} width={200} mt="md" />
+              )}
+
+              {previews}
+            </SimpleGrid>
+          </Group>
+
+          <Text fz="lg" mt="md">
+            {t("Estación de la receta")}
+          </Text>
+          <Group mt="xs">
+            <Checkbox
+              label={t("Primavera")}
+              {...form.getInputProps("seasonSpring", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Verano")}
+              {...form.getInputProps("seasonSummer", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Otoño")}
+              {...form.getInputProps("seasonAutumn", { type: "checkbox" })}
+            />
+            <Checkbox
+              label={t("Invierno")}
+              {...form.getInputProps("seasonWinter", { type: "checkbox" })}
+            />
+          </Group>
+
+          <Text fz="lg" mt="md">
+            {t("Ingredientes")}
+          </Text>
+
+          {getIngredients()}
+
+          <Group mt="md">
+            <Button
+              onClick={() =>
+                form.insertListItem("ingredients", {
+                  product: "0",
+                  quantity: 0,
+                  key: randomId(),
+                })
+              }
+            >
+              {t("Añadir ingrediente")}
+            </Button>
+          </Group>
+          <Text fz="md" mt="md">
+            {t("Preferencia")}
+          </Text>
+          <Rating
+            value={form.values.preference}
+            fractions={2}
+            defaultValue={1.5}
+            onChange={(value: any) => form.setFieldValue("preference", value)}
+            mt="md"
+          />
+
+          <Text fz="md" mt="md">
+            {t("Dificultad")}
+          </Text>
+          <Rating
+            value={form.values.difficulty}
+            fractions={2}
+            defaultValue={1.5}
+            onChange={(value: any) => form.setFieldValue("difficulty", value)}
+            emptySymbol={<IconFlame size="1.2rem" color="gray" />}
+            fullSymbol={<IconFlame size="1.2rem" color="red" />}
+            mt="md"
+          />
+
+          <NumberInput
+            defaultValue={18}
+            placeholder="15, 30, 60..."
+            label={t("Tiempo de elaboración (minutos)")}
+            withAsterisk
+            {...form.getInputProps("preparationTime")}
+            mt="md"
+          />
+
+          <NumberInput
+            defaultValue={18}
+            placeholder={t<string>("Número de comensales")}
+            label={t("Comensales")}
+            withAsterisk
+            {...form.getInputProps("servings")}
+            mt="md"
+          />
+
+          <Text fz="lg" mt="md">
+            {t("Descripcion")}
+          </Text>
+
+          <RichTextEditor editor={descriptionEditor}>
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Text fz="lg" mt="md">
+            {t("Pasos a seguir")}
+          </Text>
+
+          <RichTextEditor editor={instructionsEditor}>
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Text fz="lg" mt="md">
+            {t("Notas de la receta")}
+          </Text>
+
+          <RichTextEditor editor={notesEditor}>
+            <RichTextEditor.Toolbar sticky stickyOffset={60}>
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Bold />
+                <RichTextEditor.Italic />
+                <RichTextEditor.Underline />
+                <RichTextEditor.Strikethrough />
+                <RichTextEditor.ClearFormatting />
+                <RichTextEditor.Highlight />
+                <RichTextEditor.Code />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.H1 />
+                <RichTextEditor.H2 />
+                <RichTextEditor.H3 />
+                <RichTextEditor.H4 />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Blockquote />
+                <RichTextEditor.Hr />
+                <RichTextEditor.BulletList />
+                <RichTextEditor.OrderedList />
+                <RichTextEditor.Subscript />
+                <RichTextEditor.Superscript />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.Link />
+                <RichTextEditor.Unlink />
+              </RichTextEditor.ControlsGroup>
+
+              <RichTextEditor.ControlsGroup>
+                <RichTextEditor.AlignLeft />
+                <RichTextEditor.AlignCenter />
+                <RichTextEditor.AlignJustify />
+                <RichTextEditor.AlignRight />
+              </RichTextEditor.ControlsGroup>
+            </RichTextEditor.Toolbar>
+
+            <RichTextEditor.Content />
+          </RichTextEditor>
+
+          <Group mt="md">
+            <Button type="submit">{t("Actualizar receta")}</Button>
+          </Group>
+        </form>
+      </Box>
+    </Group>
+  );
+}
diff --git a/client/src/pages/sides/SidesMain.tsx b/client/src/pages/sides/SidesMain.tsx
new file mode 100644
index 0000000..ab35c48
--- /dev/null
+++ b/client/src/pages/sides/SidesMain.tsx
@@ -0,0 +1,5 @@
+import { Outlet } from "react-router";
+
+export default function SidesMain() {
+  return <Outlet />;
+}
diff --git a/client/src/pages/sides/SidesPage/SidesPage.tsx b/client/src/pages/sides/SidesPage/SidesPage.tsx
new file mode 100644
index 0000000..45ac124
--- /dev/null
+++ b/client/src/pages/sides/SidesPage/SidesPage.tsx
@@ -0,0 +1,24 @@
+import { useTranslation } from "react-i18next";
+import { Grid, Paper } from "@mantine/core";
+import SideList from "./components/SideList/SideList";
+import { Footer } from "components/Footer/Footer";
+import PageTitle from "components/PageTitle/PageTitle";
+
+export default function SidesPage() {
+  const { t } = useTranslation();
+  return (
+    <Grid>
+      <Grid.Col>
+        <PageTitle header={t<string>("Sides")} />
+      </Grid.Col>
+      <Grid.Col>
+        <Paper shadow="xs" p="md">
+          <SideList />
+        </Paper>
+      </Grid.Col>
+      <Grid.Col>
+        <Footer />
+      </Grid.Col>
+    </Grid>
+  );
+}
diff --git a/client/src/pages/sides/SidesPage/components/SideList/SideList.tsx b/client/src/pages/sides/SidesPage/components/SideList/SideList.tsx
new file mode 100644
index 0000000..3a0d3aa
--- /dev/null
+++ b/client/src/pages/sides/SidesPage/components/SideList/SideList.tsx
@@ -0,0 +1,195 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Modal,
+  Stack,
+  Table,
+  Text,
+  Image,
+  Anchor,
+  LoadingOverlay,
+  Box,
+} from "@mantine/core";
+import { useDisclosure, useMediaQuery } from "@mantine/hooks";
+import {
+  IconFlower,
+  IconLeaf,
+  IconSnowman,
+  IconMoon,
+  IconPlus,
+  IconSunHigh,
+  IconTrash,
+  IconSun,
+  IconEdit,
+} from "@tabler/icons-react";
+import { useDeleteRecipe, useSides } from "hooks/recipes/use-recipes";
+import { getRecipeTypeLabel } from "pages/recipes/recipe-types";
+import routes from "routes";
+import { IRecipe } from "types/recipes";
+
+interface SelectedRecipeProps {
+  id: number | null;
+  name: string | null;
+}
+
+export default function RecipeList() {
+  const { data, isLoading: isLoadindRecipes } = useSides();
+  const { mutate, isLoading: isLoadingDelete } = useDeleteRecipe();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [selectedRecipe, setSelectedRecipe] = useState<SelectedRecipeProps>({
+    id: null,
+    name: null,
+  });
+  const isMobile = useMediaQuery("(min-width: 768px)");
+
+  const handleOpenModal = (menuId: number | null, menuName: string | null) => {
+    setSelectedRecipe({ id: menuId, name: menuName });
+    open();
+  };
+
+  const handleCloseModal = () => {
+    setSelectedRecipe({ id: null, name: null });
+    close();
+  };
+
+  const handleDelete = (id: number | null) => {
+    if (!id) return;
+    mutate(id);
+    handleCloseModal();
+  };
+
+  return (
+    <Stack>
+      <Group justify="space-between">
+        <Button
+          onClick={() => navigate(routes.sidesAddRoute)}
+          leftSection={<IconPlus />}
+        >
+          {t("Add new side")}
+        </Button>
+      </Group>
+      <Box pos="relative">
+        <LoadingOverlay
+          visible={isLoadindRecipes || isLoadingDelete}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
+        {data && (
+          <Box
+            style={{
+              display: "block",
+              overflowX: "scroll",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {data?.length === 0 ? (
+              <Text style={{ justifyContent: "center" }} mt="xl">
+                {t("No recipes found")}
+              </Text>
+            ) : (
+              <Table>
+                <Table.Thead>
+                  <Table.Tr>
+                    {isMobile && <Table.Th>{t("Image")}</Table.Th>}
+                    <Table.Th>{t("Name")}</Table.Th>
+                    <Table.Th>{t("Type")}</Table.Th>
+                    <Table.Th>{t("Meal")}</Table.Th>
+                    {isMobile && <Table.Th>{t("Seasons")}</Table.Th>}
+                    <Table.Th>{t("Actions")}</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {data?.map((recipe: IRecipe) => (
+                    <Table.Tr key={recipe.id}>
+                      {isMobile && (
+                        <Table.Td>
+                          <Image
+                            src={recipe.image}
+                            alt={recipe.name}
+                            fallbackSrc="https://placehold.co/80x80?text=Placeholder"
+                            h={80}
+                            w="auto"
+                            fit="contain"
+                          />
+                        </Table.Td>
+                      )}
+                      <Table.Td>
+                        {recipe.active ? (
+                          <strong>
+                            <Anchor component={Link} to={`${recipe.id}`}>
+                              {recipe.name}
+                            </Anchor>
+                          </strong>
+                        ) : (
+                          <Anchor component={Link} to={`${recipe.id}`}>
+                            {recipe.name}
+                          </Anchor>
+                        )}
+                      </Table.Td>
+                      <Table.Td>{getRecipeTypeLabel(recipe.type)}</Table.Td>
+                      <Table.Td>
+                        {recipe.meal === "LUNCH" ? (
+                          <IconSunHigh />
+                        ) : (
+                          <IconMoon />
+                        )}
+                      </Table.Td>
+                      {isMobile && (
+                        <Table.Td>
+                          {recipe.seasonSpring && <IconFlower color="teal" />}{" "}
+                          {recipe.seasonSummer && <IconSun color="#f76707" />}
+                          {recipe.seasonAutumn && <IconLeaf color="brown" />}
+                          {recipe.seasonWinter && <IconSnowman color="gray" />}
+                        </Table.Td>
+                      )}
+                      <Table.Td>
+                        <Group>
+                          <ActionIcon color="red" title="Borrar receta">
+                            <IconTrash
+                              onClick={() =>
+                                handleOpenModal(recipe.id, recipe.name)
+                              }
+                            />
+                          </ActionIcon>
+                          <ActionIcon title="Editar receta">
+                            <IconEdit
+                              onClick={() => navigate(`${recipe.id}/edit`)}
+                            />
+                          </ActionIcon>
+                        </Group>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            )}
+          </Box>
+        )}
+      </Box>
+
+      <Modal opened={opened} onClose={close} title="Borrar receta">
+        <Stack>
+          <Text>Estas seguro de que quieres borrar la receta?</Text>
+          <Text mt="sm">{selectedRecipe.name}</Text>
+          <Group>
+            <Button
+              loading={isLoadingDelete}
+              onClick={() => handleDelete(selectedRecipe.id)}
+            >
+              Sí, borrar receta
+            </Button>
+            <Button onClick={handleCloseModal} variant="light">
+              Cancelar
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </Stack>
+  );
+}
diff --git a/client/src/routes.ts b/client/src/routes.ts
index f345988..0a61aea 100644
--- a/client/src/routes.ts
+++ b/client/src/routes.ts
@@ -1,7 +1,9 @@
 const appBaseRoute = "/";
 const homeRoute = "";
 const recipesRoute = "recipes";
+const sidesRoute = "sides";
 const recipesAddRoute = "add";
+const sidesAddRoute = "add";
 const productsRoute = "products";
 const menusRoute = "menus";
 
@@ -12,6 +14,8 @@ export default {
   homeRoute,
   menusRoute,
   recipesRoute,
+  sidesRoute,
+  sidesAddRoute,
   productsRoute,
   recipesAddRoute,
   getRouteWithBase,
diff --git a/client/src/types/recipes.d.ts b/client/src/types/recipes.d.ts
index a791b37..9b1f911 100644
--- a/client/src/types/recipes.d.ts
+++ b/client/src/types/recipes.d.ts
@@ -22,6 +22,7 @@ export interface IRecipeFormFields {
   isOnlyDinner: boolean;
   isOnlyLunch: boolean;
   isOvenRecipe: boolean;
+  isSidePlate: boolean;
   canBeDinner: boolean;
   canBeLunch: boolean;
   daysOfWeek: DaysOfWeek;
@@ -54,5 +55,5 @@ export interface IRecipe extends IRecipeFormFields {
   dateCreated: string;
   lastUpdated: string;
   ingredients: IIngredient[];
-  sides: IIngredient[];
+  sides: IRecipe[];
 }