diff --git a/src/frontend/src/features/notes/ui/MealsList.tsx b/src/frontend/src/features/notes/ui/MealsList.tsx
index f690850e2..5daa4c7d6 100644
--- a/src/frontend/src/features/notes/ui/MealsList.tsx
+++ b/src/frontend/src/features/notes/ui/MealsList.tsx
@@ -1,23 +1,41 @@
-import { useMemo, type FC } from 'react';
-import { type NoteItem, getMealTypes, groupNotesByMealType } from '../models';
-import { MealsListItem } from './MealsListItem';
+import { List, ListItem, ListSubheader, Stack, Typography } from '@mui/material';
+import { type FC, useMemo, type PropsWithChildren } from 'react';
+import { getMealName, type NoteItem, type MealType } from '../models';
+import { NotesList } from './NotesList';
 
-interface Props {
+interface Props extends PropsWithChildren {
+  mealType: MealType;
   notes: NoteItem[];
 }
 
-export const MealsList: FC<Props> = ({ notes }) => {
-  const notesGroupedByMealType = useMemo(() => groupNotesByMealType(notes), [notes]);
+export const MealsList: FC<Props> = ({ mealType, notes }: Props) => {
+  const mealName = useMemo(() => getMealName(mealType), [mealType]);
+  const totalCalories = useMemo(() => notes.reduce((sum, note) => sum + note.calories, 0), [notes]);
 
   return (
-    <>
-      {getMealTypes().map(mealType => (
-        <MealsListItem
-          key={mealType}
-          mealType={mealType}
-          notes={notesGroupedByMealType.get(mealType) ?? []}
-        />
-      ))}
-    </>
+    <List
+      subheader={
+        <ListSubheader disableGutters>
+          <Stack direction="row" spacing={1} justifyContent="space-between">
+            <Typography fontSize="inherit" fontWeight="inherit" component="span" noWrap>
+              {mealName}
+            </Typography>
+            <Typography
+              fontSize="inherit"
+              fontWeight="inherit"
+              component="span"
+              width={100}
+              align="right"
+            >
+              {totalCalories} kcal
+            </Typography>
+          </Stack>
+        </ListSubheader>
+      }
+    >
+      <ListItem disableGutters>
+        <NotesList notes={notes} />
+      </ListItem>
+    </List>
   );
 };
diff --git a/src/frontend/src/features/notes/ui/MealsListItem.tsx b/src/frontend/src/features/notes/ui/MealsListItem.tsx
deleted file mode 100644
index d00eef047..000000000
--- a/src/frontend/src/features/notes/ui/MealsListItem.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { List, ListItem, ListSubheader, Stack, Typography } from '@mui/material';
-import { type FC, useMemo, type PropsWithChildren } from 'react';
-import { getMealName, type NoteItem, type MealType } from '../models';
-import { NotesList } from './NotesList';
-
-interface Props extends PropsWithChildren {
-  mealType: MealType;
-  notes: NoteItem[];
-}
-
-export const MealsListItem: FC<Props> = ({ mealType, notes }: Props) => {
-  const mealName = useMemo(() => getMealName(mealType), [mealType]);
-  const totalCalories = useMemo(() => notes.reduce((sum, note) => sum + note.calories, 0), [notes]);
-
-  return (
-    <List
-      subheader={
-        <ListSubheader disableGutters>
-          <Stack direction="row" spacing={1} justifyContent="space-between">
-            <Typography fontSize="inherit" fontWeight="inherit" component="span" noWrap>
-              {mealName}
-            </Typography>
-            <Typography
-              fontSize="inherit"
-              fontWeight="inherit"
-              component="span"
-              width={100}
-              align="right"
-            >
-              {totalCalories} kcal
-            </Typography>
-          </Stack>
-        </ListSubheader>
-      }
-    >
-      <ListItem disableGutters>
-        <NotesList notes={notes} />
-      </ListItem>
-    </List>
-  );
-};
diff --git a/src/frontend/src/features/notes/ui/index.ts b/src/frontend/src/features/notes/ui/index.ts
index 11f5ac567..c6400bb2c 100644
--- a/src/frontend/src/features/notes/ui/index.ts
+++ b/src/frontend/src/features/notes/ui/index.ts
@@ -1,2 +1,2 @@
-export * from './MealsList';
 export * from './NotesTable';
+export * from './MealsList';
diff --git a/src/frontend/src/pages/ui/PageDetailPage.tsx b/src/frontend/src/pages/ui/PageDetailPage.tsx
index 628237076..cc90bd002 100644
--- a/src/frontend/src/pages/ui/PageDetailPage.tsx
+++ b/src/frontend/src/pages/ui/PageDetailPage.tsx
@@ -1,6 +1,12 @@
-import { type FC } from 'react';
+import { useMemo, type FC } from 'react';
 import { useLoaderData } from 'react-router-dom';
-import { notesApi, MealsList, useNotes } from '@/features/notes';
+import {
+  notesApi,
+  useNotes,
+  groupNotesByMealType,
+  getMealTypes,
+  MealsList,
+} from '@/features/notes';
 import { pagesApi } from '@/features/pages';
 import PageContentHeader from '@/features/pages/components/PageContentHeader';
 import store from '@/store';
@@ -28,6 +34,7 @@ export const Component: FC = () => {
   const { pageId } = useLoaderData() as LoaderData;
   const getPageByIdQuery = pagesApi.useGetPageByIdQuery(pageId);
   const notes = useNotes(pageId);
+  const notesGroupedByMealType = useMemo(() => groupNotesByMealType(notes.data), [notes]);
 
   return (
     <PrivateLayout
@@ -35,7 +42,13 @@ export const Component: FC = () => {
         getPageByIdQuery.data && <PageContentHeader page={getPageByIdQuery.data.currentPage} />
       }
     >
-      <MealsList notes={notes.data} />
+      {getMealTypes().map(mealType => (
+        <MealsList
+          key={mealType}
+          mealType={mealType}
+          notes={notesGroupedByMealType.get(mealType) ?? []}
+        />
+      ))}
     </PrivateLayout>
   );
 };