diff --git a/web/src/features/menu/list/Header.tsx b/web/src/features/menu/list/Header.tsx
index 6d7af471e..7a3ca1aea 100644
--- a/web/src/features/menu/list/Header.tsx
+++ b/web/src/features/menu/list/Header.tsx
@@ -1,4 +1,5 @@
 import { Box, Text } from '@chakra-ui/react';
+import React from 'react';
 
 const Header: React.FC<{ title: string }> = ({ title }) => {
   return (
@@ -18,4 +19,4 @@ const Header: React.FC<{ title: string }> = ({ title }) => {
   );
 };
 
-export default Header;
+export default React.memo(Header);
diff --git a/web/src/features/menu/list/ListItem.tsx b/web/src/features/menu/list/ListItem.tsx
index 847aa81b3..26846b20d 100644
--- a/web/src/features/menu/list/ListItem.tsx
+++ b/web/src/features/menu/list/ListItem.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Stack, Text } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import CustomCheckbox from './CustomCheckbox';
 import type { MenuItem } from './index';
 
@@ -68,4 +68,4 @@ const ListItem = forwardRef<Array<HTMLDivElement | null>, Props>(({ item, index,
   );
 });
 
-export default ListItem;
+export default React.memo(ListItem);