diff --git a/src/App.tsx b/src/App.tsx
index f0090c1..9ae3814 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,9 @@ import UserLayout from '@layouts/UserLayout';
 import Foods from '@pages/BranchManager/Foods';
 import FoodItem from '@pages/FoodItem';
 import AllFoodItems from '@pages/AllFoodItems';
+import FoodList from '@pages/BranchManager/FoodList';
 import { Gallery } from '@components/Gallery/Gallery';
+import DiscountList from './pages/BranchManager/FoodList/DiscountList';
 import Cart from '@pages/Cart';
 import { OrderHistory } from './components/User/OrderHistory/OrderHistory';
 
@@ -110,6 +112,24 @@ const routes = createRoutesFromElements(
           </>
         }
       />
+      <Route
+        path="foodlist"
+        element={
+          <>
+            <PageTitle title="Branch Manager | Foods List" />
+            <FoodList />
+          </>
+        }
+      />
+      <Route
+        path="discountlist"
+        element={
+          <>
+            <PageTitle title="Branch Manager | Discount List" />
+            <DiscountList />
+          </>
+        }
+      />
     </Route>
   </Route>,
 );
diff --git a/src/pages/BranchManager/FoodList/ChevronDownIcon.tsx b/src/pages/BranchManager/FoodList/ChevronDownIcon.tsx
new file mode 100644
index 0000000..3307e0c
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/ChevronDownIcon.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import {IconSvgProps} from "./types";
+
+export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...otherProps}
+  >
+    <path
+      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeMiterlimit={10}
+      strokeWidth={strokeWidth}
+    />
+  </svg>
+);
diff --git a/src/pages/BranchManager/FoodList/DiscountList.tsx b/src/pages/BranchManager/FoodList/DiscountList.tsx
new file mode 100644
index 0000000..464fa92
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/DiscountList.tsx
@@ -0,0 +1,452 @@
+import React from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Chip,
+  User,
+  Pagination,
+  Selection,
+  ChipProps,
+  SortDescriptor
+} from "@nextui-org/react";
+import { PlusIcon } from "./PlusIcon";
+import { VerticalDotsIcon } from "./VerticalDotsIcon";
+import { ChevronDownIcon } from "./ChevronDownIcon";
+import { SearchIcon } from "./SearchIcon";
+// Import discountData instead of users
+// import { discountData } from "./data"; // assuming you have the data in data.js
+import { capitalize } from "./utils";
+
+// Define columns for Discount data
+const columns = [
+  { name: "Discount Name", uid: "Name" },
+  { name: "Description", uid: "Description" },
+  { name: "Discount Type", uid: "DiscountType" },
+  { name: "Start Date", uid: "StartDate" },
+  { name: "End Date", uid: "EndDate" },
+  { name: "Menu Item Type", uid: "MenuItemType" },
+  { name: "Discount Amount", uid: "DiscountAmount" },
+  { name: "Offer Details", uid: "OfferDetails" },
+  { name: "Actions", uid: "actions" },
+];
+
+const discountData = [
+    {
+      DiscountId: 1,
+      Name: "Morning Saver",
+      Description: "Get 20% off on all breakfast items.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 101,
+      IsActive: true,
+      MenuItemType: "Breakfast",
+      MenuItemId: 1,
+      DiscountAmount: 20,
+      OfferDetails: "Valid from 7 AM to 10 AM."
+    },
+    {
+      DiscountId: 2,
+      Name: "Lunch Combo",
+      Description: "Flat $5 off on lunch combo.",
+      DiscountType: "Flat",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 102,
+      IsActive: true,
+      MenuItemType: "Lunch",
+      MenuItemId: 2,
+      DiscountAmount: 5,
+      OfferDetails: "Valid from 12 PM to 3 PM."
+    },
+    {
+      DiscountId: 3,
+      Name: "Happy Hour",
+      Description: "Get 30% off on all drinks.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 103,
+      IsActive: true,
+      MenuItemType: "Drinks",
+      MenuItemId: 3,
+      DiscountAmount: 30,
+      OfferDetails: "Valid from 4 PM to 6 PM."
+    },
+    {
+      DiscountId: 4,
+      Name: "Dinner Delight",
+      Description: "Flat $10 off on dinner orders above $50.",
+      DiscountType: "Flat",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 104,
+      IsActive: true,
+      MenuItemType: "Dinner",
+      MenuItemId: 4,
+      DiscountAmount: 10,
+      OfferDetails: "Valid for orders above $50."
+    },
+    {
+      DiscountId: 5,
+      Name: "Weekend Special",
+      Description: "Get 25% off on all items during weekends.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 105,
+      IsActive: true,
+      MenuItemType: "All",
+      MenuItemId: 5,
+      DiscountAmount: 25,
+      OfferDetails: "Valid on Saturdays and Sundays."
+    },
+    {
+      DiscountId: 6,
+      Name: "Student Discount",
+      Description: "Get 15% off on showing student ID.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 106,
+      IsActive: true,
+      MenuItemType: "All",
+      MenuItemId: 6,
+      DiscountAmount: 15,
+      OfferDetails: "Valid for students with ID."
+    },
+    {
+      DiscountId: 7,
+      Name: "Happy Monday",
+      Description: "Get 10% off on all items on Mondays.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 107,
+      IsActive: true,
+      MenuItemType: "All",
+      MenuItemId: 7,
+      DiscountAmount: 10,
+      OfferDetails: "Valid all day on Mondays."
+    },
+    {
+      DiscountId: 8,
+      Name: "Coffee Lovers",
+      Description: "Buy one get one free on all coffees.",
+      DiscountType: "BOGO",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 108,
+      IsActive: true,
+      MenuItemType: "Drinks",
+      MenuItemId: 8,
+      DiscountAmount: 50,
+      OfferDetails: "Valid all day."
+    },
+    {
+      DiscountId: 9,
+      Name: "Family Feast",
+      Description: "Get 20% off on family meals.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 109,
+      IsActive: true,
+      MenuItemType: "Dinner",
+      MenuItemId: 9,
+      DiscountAmount: 20,
+      OfferDetails: "Valid for family meals only."
+    },
+    {
+      DiscountId: 10,
+      Name: "Birthday Bash",
+      Description: "Get a free dessert on your birthday.",
+      DiscountType: "Free Item",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 110,
+      IsActive: true,
+      MenuItemType: "Dessert",
+      MenuItemId: 10,
+      DiscountAmount: 100,
+      OfferDetails: "Valid on your birthday only."
+    },
+    {
+      DiscountId: 11,
+      Name: "Late Night Snack",
+      Description: "Flat $5 off on orders after 9 PM.",
+      DiscountType: "Flat",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 111,
+      IsActive: true,
+      MenuItemType: "All",
+      MenuItemId: 11,
+      DiscountAmount: 5,
+      OfferDetails: "Valid after 9 PM."
+    },
+    {
+      DiscountId: 12,
+      Name: "Tea Time",
+      Description: "Get 20% off on all teas.",
+      DiscountType: "Percentage",
+      StartDate: "2024-07-01",
+      EndDate: "2024-07-31",
+      CafeId: 112,
+      IsActive: true,
+      MenuItemType: "Drinks",
+      MenuItemId: 12,
+      DiscountAmount: 20,
+      OfferDetails: "Valid from 3 PM to 5 PM."
+    },
+];  
+
+
+const INITIAL_VISIBLE_COLUMNS = ["Name", "Description", "DiscountType", "StartDate", "EndDate", "MenuItemType", "DiscountAmount", "actions"];
+
+type Discount = typeof discountData[0];
+
+export default function App() {
+  const [filterValue, setFilterValue] = React.useState("");
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]));
+  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(new Set(INITIAL_VISIBLE_COLUMNS));
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
+    column: "DiscountAmount",
+    direction: "ascending",
+  });
+  const [page, setPage] = React.useState(1);
+
+  const pages = Math.ceil(discountData.length / rowsPerPage);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    if (visibleColumns === "all") return columns;
+  
+    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid)) as { name: string; uid: string; sortable: boolean }[];
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredDiscounts = [...discountData]; // Use discountData
+
+    if (hasSearchFilter) {
+      filteredDiscounts = filteredDiscounts.filter((discount) =>
+        discount.Name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+
+    return filteredDiscounts;
+  }, [discountData, filterValue]);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    return [...items].sort((a: Discount, b: Discount) => {
+      const first = a[sortDescriptor.column as keyof Discount] as string | number;
+      const second = b[sortDescriptor.column as keyof Discount] as string | number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((discount: Discount, columnKey: React.Key) => {
+    const cellValue = discount[columnKey as keyof Discount];
+
+    switch (columnKey) {
+      case "Name":
+        return cellValue;
+      case "Description":
+        return cellValue;
+      case "DiscountType":
+        return cellValue;
+      case "StartDate":
+        return cellValue;
+      case "EndDate":
+        return cellValue;
+      case "MenuItemType":
+        return cellValue;
+      case "DiscountAmount":
+        return `${cellValue}%`;
+      case "OfferDetails":
+        return cellValue;
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown className="bg-background border-1 border-default-200">
+              <DropdownTrigger>
+                <Button isIconOnly radius="full" size="sm" variant="light">
+                  <VerticalDotsIcon className="text-default-400" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    setRowsPerPage(Number(e.target.value));
+    setPage(1);
+  }, []);
+
+  const onSearchChange = React.useCallback((value?: string) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <h1 className="text-2xl text-white font-bold">Discount List</h1>
+        <div className="flex justify-between gap-3 items-end">
+          <Input
+            isClearable
+            classNames={{
+              base: "w-full sm:max-w-[44%]",
+              inputWrapper: "border-1",
+            }}
+            placeholder="Search by discount name..."
+            size="sm"
+            startContent={<SearchIcon className="text-default-300" />}
+            value={filterValue}
+            variant="bordered"
+            onClear={() => setFilterValue("")}
+            onValueChange={onSearchChange}
+          />
+          <Button
+            className="bg-primary text-background rounded-md px-10 py-2"
+            endContent={<PlusIcon />}
+            size="sm"
+          >
+            Add New
+          </Button>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">Total {discountData.length} discounts</span> {/* Updated text */}
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    onSearchChange,
+    onRowsPerPageChange,
+    discountData.length, // Updated reference
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+        <div className="py-2 px-2 flex justify-center items-center">
+        <Pagination
+          isCompact
+          showControls
+          showShadow
+          color="primary"
+          page={page}
+          total={pages}
+          onChange={setPage}
+        />
+        {/* <span className="text-small text-default-400">
+          {selectedKeys === "all"
+            ? "All items selected"
+            : `${selectedKeys.size} of ${items.length} selected`}
+        </span> */}
+      </div>
+      
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  const classNames = React.useMemo(
+    () => ({
+      wrapper: ["max-h-[382px]", "max-w-3xl"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]:first:before:rounded-none",
+        "group-data-[first=true]:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]:before:rounded-none",
+        // last
+        "group-data-[last=true]:first:before:rounded-none",
+        "group-data-[last=true]:last:before:rounded-none",
+      ],
+    }),
+    [],
+  );
+
+  return (
+    <Table
+      isCompact
+      removeWrapper
+      aria-label="Discounts table with custom cells, pagination, and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      classNames={classNames}
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.DiscountId}>
+            {(columnKey) => (
+              <TableCell>{renderCell(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/BranchManager/FoodList/PlusIcon.tsx b/src/pages/BranchManager/FoodList/PlusIcon.tsx
new file mode 100644
index 0000000..c1c355e
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/PlusIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import {IconSvgProps} from "./types";
+
+export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    >
+      <path d="M6 12h12" />
+      <path d="M12 18V6" />
+    </g>
+  </svg>
+);
diff --git a/src/pages/BranchManager/FoodList/SearchIcon.tsx b/src/pages/BranchManager/FoodList/SearchIcon.tsx
new file mode 100644
index 0000000..4cf8459
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/SearchIcon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import {IconSvgProps} from "./types";
+
+export const SearchIcon = (props: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <path
+      d="M22 22L20 20"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+);
diff --git a/src/pages/BranchManager/FoodList/VerticalDotsIcon.tsx b/src/pages/BranchManager/FoodList/VerticalDotsIcon.tsx
new file mode 100644
index 0000000..ae1a6f8
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/VerticalDotsIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import {IconSvgProps} from "./types";
+
+export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/src/pages/BranchManager/FoodList/data.tsx b/src/pages/BranchManager/FoodList/data.tsx
new file mode 100644
index 0000000..4042cf3
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/data.tsx
@@ -0,0 +1,222 @@
+import React from "react";
+const columns = [
+  {name: "ID", uid: "id", sortable: true},
+  {name: "NAME", uid: "name", sortable: true},
+  {name: "AGE", uid: "age", sortable: true},
+  {name: "ROLE", uid: "role", sortable: true},
+  {name: "TEAM", uid: "team"},
+  {name: "EMAIL", uid: "email"},
+  {name: "STATUS", uid: "status", sortable: true},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+const statusOptions = [
+  {name: "Active", uid: "active"},
+  {name: "Paused", uid: "paused"},
+  {name: "Vacation", uid: "vacation"},
+];
+
+const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "brian.kim@example.com",
+    status: "Active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?img=8",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=10",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?img=15",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?img=20",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=33",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?img=29",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://i.pravatar.cc/150?img=50",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://i.pravatar.cc/150?img=45",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export {columns, users, statusOptions};
diff --git a/src/pages/BranchManager/FoodList/index.tsx b/src/pages/BranchManager/FoodList/index.tsx
new file mode 100644
index 0000000..942a8c6
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/index.tsx
@@ -0,0 +1,724 @@
+import React from "react";
+import {
+    Table,
+    TableHeader,
+    TableColumn,
+    TableBody,
+    TableRow,
+    TableCell,
+    Input,
+    Button,
+    DropdownTrigger,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Chip,
+    Pagination,
+    Selection,
+    ChipProps,
+    SortDescriptor
+} from "@nextui-org/react";
+import { PlusIcon } from "./PlusIcon";
+import { VerticalDotsIcon } from "./VerticalDotsIcon";
+import { ChevronDownIcon } from "./ChevronDownIcon";
+import { SearchIcon } from "./SearchIcon";
+import { capitalize } from "./utils";
+
+const statusColorMap: Record<string, ChipProps["color"]> = {
+    active: "success",
+    paused: "danger",
+    vacation: "warning",
+};
+
+const INITIAL_VISIBLE_COLUMNS = ["foodId", "name", "price", "availability", "cafeId", "category", "discountStatus", "discountId", "features", "actions"];
+
+type Food = {
+    id: number;
+    foodId: string;
+    name: string;
+    price: number;
+    availability: string;
+    cafeId: string;
+    category: string;
+    discountStatus: string;
+    discountId: string;
+    features: { feature: string; amount: string }[];
+};
+
+const foods: Food[] = [
+    {
+        id: 1,
+        foodId: 'F001',
+        name: 'Pizza',
+        price: 12.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Fast Food',
+        discountStatus: 'Active',
+        discountId: 'D001',
+        features: [
+            { feature: 'Cheese', amount: 'Extra' },
+            { feature: 'Size', amount: 'Large' },
+        ],
+    },
+    {
+        id: 2,
+        foodId: 'F002',
+        name: 'Burger',
+        price: 8.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Fast Food',
+        discountStatus: 'Paused',
+        discountId: 'D002',
+        features: [
+            { feature: 'Sauce', amount: 'Regular' },
+            { feature: 'Size', amount: 'Medium' },
+        ],
+    },
+    {
+        id: 3,
+        foodId: 'F003',
+        name: 'Salad',
+        price: 6.49,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Healthy',
+        discountStatus: 'Vacation',
+        discountId: 'D003',
+        features: [
+            { feature: 'Greens', amount: 'Fresh' },
+            { feature: 'Dressing', amount: 'Light' },
+        ],
+    },
+    {
+        id: 4,
+        foodId: 'F004',
+        name: 'Pasta',
+        price: 10.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Italian',
+        discountStatus: 'Active',
+        discountId: 'D004',
+        features: [
+            { feature: 'Sauce', amount: 'Tomato' },
+            { feature: 'Cheese', amount: 'Parmesan' },
+        ],
+    },
+    {
+        id: 5,
+        foodId: 'F005',
+        name: 'Sandwich',
+        price: 5.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Snack',
+        discountStatus: 'Active',
+        discountId: 'D005',
+        features: [
+            { feature: 'Bread', amount: 'Whole Wheat' },
+            { feature: 'Fillings', amount: 'Ham, Cheese, Lettuce' },
+        ],
+    },
+    {
+        id: 6,
+        foodId: 'F006',
+        name: 'Sushi',
+        price: 14.99,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Japanese',
+        discountStatus: 'Active',
+        discountId: 'D006',
+        features: [
+            { feature: 'Fish', amount: 'Salmon' },
+            { feature: 'Rice', amount: 'Sushi Rice' },
+        ],
+    },
+    {
+        id: 7,
+        foodId: 'F007',
+        name: 'Steak',
+        price: 19.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Grill',
+        discountStatus: 'Active',
+        discountId: 'D007',
+        features: [
+            { feature: 'Cut', amount: 'Ribeye' },
+            { feature: 'Cook', amount: 'Medium Rare' },
+        ],
+    },
+    {
+        id: 8,
+        foodId: 'F008',
+        name: 'Curry',
+        price: 11.49,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Indian',
+        discountStatus: 'Paused',
+        discountId: 'D008',
+        features: [
+            { feature: 'Spice Level', amount: 'Medium' },
+            { feature: 'Type', amount: 'Vegetarian' },
+        ],
+    },
+    {
+        id: 9,
+        foodId: 'F009',
+        name: 'Fish and Chips',
+        price: 9.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'British',
+        discountStatus: 'Active',
+        discountId: 'D009',
+        features: [
+            { feature: 'Fish', amount: 'Cod' },
+            { feature: 'Side', amount: 'Chips' },
+        ],
+    },
+    {
+        id: 10,
+        foodId: 'F010',
+        name: 'Tacos',
+        price: 7.99,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Mexican',
+        discountStatus: 'Active',
+        discountId: 'D010',
+        features: [
+            { feature: 'Meat', amount: 'Beef' },
+            { feature: 'Tortilla', amount: 'Corn' },
+        ],
+    },
+    {
+        id: 11,
+        foodId: 'F011',
+        name: 'Ramen',
+        price: 10.49,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Japanese',
+        discountStatus: 'Active',
+        discountId: 'D011',
+        features: [
+            { feature: 'Broth', amount: 'Tonkotsu' },
+            { feature: 'Toppings', amount: 'Egg, Pork, Bamboo Shoots' },
+        ],
+    },
+    {
+        id: 12,
+        foodId: 'F012',
+        name: 'Pho',
+        price: 8.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Vietnamese',
+        discountStatus: 'Active',
+        discountId: 'D012',
+        features: [
+            { feature: 'Noodles', amount: 'Rice Noodles' },
+            { feature: 'Broth', amount: 'Beef' },
+        ],
+    },
+    {
+        id: 13,
+        foodId: 'F013',
+        name: 'Lasagna',
+        price: 12.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Italian',
+        discountStatus: 'Active',
+        discountId: 'D013',
+        features: [
+            { feature: 'Layers', amount: 'Cheese, Meat, Pasta' },
+            { feature: 'Sauce', amount: 'Tomato' },
+        ],
+    },
+    {
+        id: 14,
+        foodId: 'F014',
+        name: 'Chicken Wings',
+        price: 9.49,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Appetizer',
+        discountStatus: 'Paused',
+        discountId: 'D014',
+        features: [
+            { feature: 'Flavor', amount: 'Buffalo' },
+            { feature: 'Side', amount: 'Blue Cheese Dressing' },
+        ],
+    },
+    {
+        id: 15,
+        foodId: 'F015',
+        name: 'Fish Tacos',
+        price: 8.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Mexican',
+        discountStatus: 'Active',
+        discountId: 'D015',
+        features: [
+            { feature: 'Fish', amount: 'Mahi Mahi' },
+            { feature: 'Tortilla', amount: 'Flour' },
+        ],
+    },
+    {
+        id: 16,
+        foodId: 'F016',
+        name: 'Caesar Salad',
+        price: 7.49,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Salad',
+        discountStatus: 'Active',
+        discountId: 'D016',
+        features: [
+            { feature: 'Greens', amount: 'Romaine Lettuce' },
+            { feature: 'Dressing', amount: 'Caesar' },
+        ],
+    },
+    {
+        id: 17,
+        foodId: 'F017',
+        name: 'Pad Thai',
+        price: 11.99,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Thai',
+        discountStatus: 'Active',
+        discountId: 'D017',
+        features: [
+            { feature: 'Noodles', amount: 'Rice Noodles' },
+            { feature: 'Protein', amount: 'Shrimp' },
+        ],
+    },
+    {
+        id: 18,
+        foodId: 'F018',
+        name: 'Hamburger',
+        price: 6.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Fast Food',
+        discountStatus: 'Paused',
+        discountId: 'D018',
+        features: [
+            { feature: 'Condiments', amount: 'Ketchup, Mustard' },
+            { feature: 'Extras', amount: 'Pickles, Onion' },
+        ],
+    },
+    {
+        id: 19,
+        foodId: 'F019',
+        name: 'Ceviche',
+        price: 13.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Seafood',
+        discountStatus: 'Active',
+        discountId: 'D019',
+        features: [
+            { feature: 'Fish', amount: 'Snapper' },
+            { feature: 'Citrus', amount: 'Lime' },
+        ],
+    },
+    {
+        id: 20,
+        foodId: 'F020',
+        name: 'Fajitas',
+        price: 14.49,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Mexican',
+        discountStatus: 'Active',
+        discountId: 'D020',
+        features: [
+            { feature: 'Meat', amount: 'Chicken' },
+            { feature: 'Toppings', amount: 'Peppers, Onions' },
+        ],
+    },
+    {
+        id: 21,
+        foodId: 'F021',
+        name: 'Pulled Pork Sandwich',
+        price: 9.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Sandwich',
+        discountStatus: 'Active',
+        discountId: 'D021',
+        features: [
+            { feature: 'Meat', amount: 'Pulled Pork' },
+            { feature: 'Sauce', amount: 'BBQ' },
+        ],
+    },
+    {
+        id: 22,
+        foodId: 'F022',
+        name: 'Ravioli',
+        price: 11.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Italian',
+        discountStatus: 'Active',
+        discountId: 'D022',
+        features: [
+            { feature: 'Filling', amount: 'Cheese' },
+            { feature: 'Sauce', amount: 'Tomato Cream' },
+        ],
+    },
+    {
+        id: 23,
+        foodId: 'F023',
+        name: 'Sashimi',
+        price: 16.99,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Japanese',
+        discountStatus: 'Active',
+        discountId: 'D023',
+        features: [
+            { feature: 'Fish', amount: 'Tuna, Salmon' },
+            { feature: 'Presentation', amount: 'Raw' },
+        ],
+    },
+    {
+        id: 24,
+        foodId: 'F024',
+        name: 'Gyro',
+        price: 7.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Greek',
+        discountStatus: 'Active',
+        discountId: 'D024',
+        features: [
+            { feature: 'Meat', amount: 'Lamb, Beef' },
+            { feature: 'Wrap', amount: 'Pita Bread' },
+        ],
+    },
+    {
+        id: 25,
+        foodId: 'F025',
+        name: 'Philly Cheesesteak',
+        price: 12.49,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Sandwich',
+        discountStatus: 'Active',
+        discountId: 'D025',
+        features: [
+            { feature: 'Meat', amount: 'Beef' },
+            { feature: 'Cheese', amount: 'Provolone' },
+        ],
+    },
+    {
+        id: 26,
+        foodId: 'F026',
+        name: 'Maki Roll',
+        price: 9.99,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Japanese',
+        discountStatus: 'Active',
+        discountId: 'D026',
+        features: [
+            { feature: 'Ingredients', amount: 'Cucumber, Avocado' },
+            { feature: 'Fish', amount: 'Tuna, Salmon' },
+        ],
+    },
+    {
+        id: 27,
+        foodId: 'F027',
+        name: 'Pierogi',
+        price: 10.99,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Polish',
+        discountStatus: 'Active',
+        discountId: 'D027',
+        features: [
+            { feature: 'Filling', amount: 'Potato, Cheese' },
+            { feature: 'Side', amount: 'Sour Cream' },
+        ],
+    },
+    {
+        id: 28,
+        foodId: 'F028',
+        name: 'Chicken Parmesan',
+        price: 13.99,
+        availability: 'Available',
+        cafeId: 'C001',
+        category: 'Italian',
+        discountStatus: 'Active',
+        discountId: 'D028',
+        features: [
+            { feature: 'Meat', amount: 'Chicken' },
+            { feature: 'Cheese', amount: 'Parmesan' },
+        ],
+    },
+    {
+        id: 29,
+        foodId: 'F029',
+        name: 'Falafel Wrap',
+        price: 8.49,
+        availability: 'Available',
+        cafeId: 'C003',
+        category: 'Middle Eastern',
+        discountStatus: 'Active',
+        discountId: 'D029',
+        features: [
+            { feature: 'Falafel', amount: 'Chickpea' },
+            { feature: 'Wrap', amount: 'Pita Bread' },
+        ],
+    },
+    {
+        id: 30,
+        foodId: 'F030',
+        name: 'Chili Con Carne',
+        price: 10.49,
+        availability: 'Available',
+        cafeId: 'C002',
+        category: 'Mexican',
+        discountStatus: 'Active',
+        discountId: 'D030',
+        features: [
+            { feature: 'Meat', amount: 'Beef' },
+            { feature: 'Beans', amount: 'Kidney Beans' },
+        ],
+    },
+    // Add more food items as needed
+];
+const columns = [
+    { name: 'Name', uid: 'name' },
+    { name: 'Price', uid: 'price' },
+    { name: 'Availability', uid: 'availability' },
+    { name: 'Cafe ID', uid: 'cafeId' },
+    { name: 'Category', uid: 'category' },
+    { name: 'Discount Status', uid: 'discountStatus' },
+    { name: 'Discount ID', uid: 'discountId' },
+    { name: 'Features', uid: 'features' },
+    { name: 'Actions', uid: 'actions' },
+];
+
+export default function FoodList() {
+    const [filterValue, setFilterValue] = React.useState('');
+    const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS));
+    const [rowsPerPage, setRowsPerPage] = React.useState(5);
+    const [sortDescriptor, setSortDescriptor] = React.useState({
+        column: 'price',
+        direction: 'ascending',
+    });
+    const [page, setPage] = React.useState(1);
+    const hasSearchFilter = Boolean(filterValue);
+
+    const headerColumns = React.useMemo(() => {
+        // if (visibleColumns === 'all') return columns;
+
+        return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
+    }, [visibleColumns]);
+
+    const filteredItems = React.useMemo(() => {
+        let filteredFoods = [...foods];
+
+        if (hasSearchFilter) {
+            filteredFoods = filteredFoods.filter((food) =>
+                food.name.toLowerCase().includes(filterValue.toLowerCase()),
+            );
+        }
+
+        return filteredFoods;
+    }, [foods, filterValue]);
+
+    const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
+    const items = React.useMemo(() => {
+        const start = (page - 1) * rowsPerPage;
+        const end = start + rowsPerPage;
+
+        return filteredItems.slice(start, end);
+    }, [page, filteredItems, rowsPerPage]);
+
+    const sortedItems = React.useMemo(() => {
+        return [...items].sort((a, b) => {
+            const first = a[sortDescriptor.column as keyof typeof a] as number;
+            const second = b[sortDescriptor.column as keyof typeof b] as number;
+            const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+            return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+        });
+    }, [sortDescriptor, items]);
+
+    const renderCell = React.useCallback((food:any, columnKey:any) => {
+        const cellValue = food[columnKey as keyof typeof food];
+
+        switch (columnKey) {
+            case 'name':
+                return cellValue;
+            case 'price':
+                return `$${cellValue}`;
+            case 'features':
+                return (cellValue as { feature: string; amount: string }[])
+                    .map((f) => `${f.feature}: ${f.amount}`)
+                    .join(', ');
+            case 'actions':
+                return (
+                    <div className="relative flex justify-end items-center gap-2">
+                        <Dropdown>
+                            <DropdownTrigger>
+                                <Button isIconOnly size="sm" variant="light">
+                                    <VerticalDotsIcon className="text-default-300" />
+                                </Button>
+                            </DropdownTrigger>
+                            <DropdownMenu className="bg-black text-white">
+                                <DropdownItem>View</DropdownItem>
+                                <DropdownItem>Edit</DropdownItem>
+                                <DropdownItem>Delete</DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
+                );
+            default:
+                return String(cellValue);
+        }
+    }, []);
+
+    const onNextPage = React.useCallback(() => {
+        if (page < pages) {
+            setPage(page + 1);
+        }
+    }, [page, pages]);
+
+    const onPreviousPage = React.useCallback(() => {
+        if (page > 1) {
+            setPage(page - 1);
+        }
+    }, [page]);
+
+    const onRowsPerPageChange = React.useCallback((e:any) => {
+        setRowsPerPage(Number(e.target.value));
+        setPage(1);
+    }, []);
+
+    const onSearchChange = React.useCallback((value:any) => {
+        if (value) {
+            setFilterValue(value);
+            setPage(1);
+        } else {
+            setFilterValue('');
+        }
+    }, []);
+
+    const onClear = React.useCallback(() => {
+        setFilterValue('');
+        setPage(1);
+    }, []);
+
+    const topContent = React.useMemo(() => {
+        return (
+            <div className="flex flex-col gap-4">
+                <h1 className="text-2xl text-white font-bold">Food List</h1>
+                <div className="flex justify-between gap-3 items-end">
+                    <Input
+                        isClearable
+                        className="w-full sm:max-w-[44%]"
+                        placeholder="Search by name..."
+                        startContent={<SearchIcon />}
+                        value={filterValue}
+                        onClear={() => onClear()}
+                        onValueChange={onSearchChange}
+                    />
+                    <Button color="primary" endContent={<PlusIcon />} className="rounded">
+                        Add New
+                    </Button>
+                </div>
+                <div className="flex justify-between items-center">
+                    <span className="text-default-400 text-small">Total {foods.length} foods</span>
+                    <label className="flex items-center text-default-400 text-small">
+                        Rows per page:
+                        <select
+                            className="bg-transparent outline-none text-default-400 text-small"
+                            onChange={onRowsPerPageChange}
+                        >
+                            <option value="5">5</option>
+                            <option value="10">10</option>
+                            <option value="15">15</option>
+                        </select>
+                    </label>
+                </div>
+            </div>
+        );
+    }, [filterValue, onSearchChange, onRowsPerPageChange, foods.length]);
+
+    const bottomContent = React.useMemo(() => {
+        return (
+            <div className="py-2 px-2 flex justify-center items-center">
+
+                <div className="hidden sm:flex w-[50%] justify-center gap-5">
+                    <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
+                        Previous
+                    </Button>
+                    <Pagination
+                        isCompact
+                        // showControls
+                        showShadow
+                        color="primary"
+                        page={page}
+                        total={pages}
+                        onChange={setPage}
+                    />
+                    <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
+                        Next
+                    </Button>
+                </div>
+            </div>
+        );
+    }, [page, pages]);
+
+    return (
+        <Table
+            aria-label="Example table with custom cells, pagination and sorting"
+            isHeaderSticky
+            bottomContent={bottomContent}
+            bottomContentPlacement="outside"
+            classNames={{
+                wrapper: 'max-h-[382px]',
+            }}
+            // sortDescriptor={sortDescriptor}
+            topContent={topContent}
+            topContentPlacement="outside"
+            // onSortChange={setSortDescriptor}
+        >
+            <TableHeader columns={headerColumns} className="bg-gray">
+                {(column) => (
+                    <TableColumn
+                        key={column.uid}
+                        align={column.uid === 'actions' ? 'center' : 'start'}
+                    >
+                        {column.name}
+                    </TableColumn>
+                )}
+            </TableHeader>
+            <TableBody emptyContent={'No foods found'} items={sortedItems}>
+                {(item) => (
+                    <TableRow key={item.id} className="hover:bg-gray cursor-pointer">
+                        {(columnKey) => (
+                            <TableCell className=" px-4 py-3">
+                                {renderCell(item, columnKey)}
+                            </TableCell>
+                        )}
+                    </TableRow>
+                )}
+            </TableBody>
+        </Table>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/BranchManager/FoodList/types.tsx b/src/pages/BranchManager/FoodList/types.tsx
new file mode 100644
index 0000000..3ad9927
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/types.tsx
@@ -0,0 +1,5 @@
+import {SVGProps} from "react";
+
+export type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
\ No newline at end of file
diff --git a/src/pages/BranchManager/FoodList/utils.tsx b/src/pages/BranchManager/FoodList/utils.tsx
new file mode 100644
index 0000000..e8b7ccc
--- /dev/null
+++ b/src/pages/BranchManager/FoodList/utils.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}