diff --git a/src/App.tsx b/src/App.tsx
index 2f57c17..0ad2a2f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,28 +6,31 @@ import {
   createRoutesFromElements,
 } from 'react-router-dom';
 
-import Loader from '@common/Loader';
-import PageTitle from '@components/PageTitle';
-import Home from '@pages/Home';
-import Dashboard from '@pages/BranchManager/Dashboard';
-import BranchManagerLayout from '@layouts/BranchManagerLayout';
-import LoginPage from '@pages/User/LogIn';
-import UserLayout from '@layouts/UserLayout';
-import AddFoods from '@pages/BranchManager/Foods/AddFood';
-import FoodItem from '@pages/FoodItem';
-import AllFoodItems from '@pages/AllFoodItems';
-import FoodList from '@pages/BranchManager/FoodList';
-import { Gallery } from '@components/Gallery/Gallery';
+import Loader from '@/common/Loader';
+import PageTitle from '@/components/PageTitle';
+import Home from '@/pages/Home';
+import Dashboard from '@/pages/BranchManager/Dashboard';
+import BranchManagerLayout from '@/layouts/BranchManagerLayout';
+import LoginPage from '@/pages/User/LogIn';
+import UserLayout from '@/layouts/UserLayout';
+import AddFoods from '@/pages/BranchManager/Foods/AddFood';
+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 Checkout from '@pages/Checkout';
+import Cart from '@/pages/Cart';
+import Checkout from '@/pages/Checkout';
 import { OrderHistory } from './components/User/OrderHistory/OrderHistory';
-import User from '@pages/BranchManager/Users';
-import UserAdd from '@pages/BranchManager/Users/AddUser';
-import UserEdit from '@pages/BranchManager/Users/EditUser';
-import EditFoods from '@pages/BranchManager/Foods/EditFood';
-import AddCategories from '@pages/BranchManager/Categories/AddCategories';
-import ViewCategories from './pages/BranchManager/Categories/ViewCategories';
+import User from '@/pages/BranchManager/Users';
+import UserAdd from '@/pages/BranchManager/Users/AddUser';
+import UserEdit from '@/pages/BranchManager/Users/EditUser';
+import EditFoods from '@/pages/BranchManager/Foods/EditFood';
+import AddCategories from '@/pages/BranchManager/Categories/AddCategories';
+import ViewCategories from '@/pages/BranchManager/Categories/ViewCategories';
+import AddCombos from '@/pages/BranchManager/FoodCombos/Add';
+import Combos from '@/pages/BranchManager/FoodCombos';
+import EditCombos from '@/pages/BranchManager/FoodCombos/Edit';
 
 const routes = createRoutesFromElements(
   <Route>
@@ -74,7 +77,7 @@ const routes = createRoutesFromElements(
         element={
           <>
             <PageTitle title="La Fresca | Checkout" />
-            <Checkout />  
+            <Checkout />
           </>
         }
       />
@@ -178,6 +181,35 @@ const routes = createRoutesFromElements(
           }
         />
       </Route>
+      <Route path="food-combos">
+        <Route
+          index
+          element={
+            <>
+              <PageTitle title="Branch Manager | Food Combos" />
+              <Combos />
+            </>
+          }
+        />
+        <Route
+          path="add"
+          element={
+            <>
+              <PageTitle title="Branch Manager | Add Food Combo" />
+              <AddCombos />
+            </>
+          }
+        />
+        <Route
+          path="edit/:comboId"
+          element={
+            <>
+              <PageTitle title="Branch Manager | Edit Food Combo" />
+              <EditCombos />
+            </>
+          }
+        />
+      </Route>
       <Route path="users">
         <Route
           index
diff --git a/src/components/BranchManager/Forms/DynamicForm/AddFoodCombo.tsx b/src/components/BranchManager/Forms/DynamicForm/AddFoodCombo.tsx
new file mode 100644
index 0000000..bf1caf4
--- /dev/null
+++ b/src/components/BranchManager/Forms/DynamicForm/AddFoodCombo.tsx
@@ -0,0 +1,210 @@
+import { FC, useEffect, useState } from 'react';
+import { z } from 'zod';
+import { useForm, SubmitHandler, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import ImageInput from '@components/BranchManager/Inputs/ImageInput';
+import { Button } from '@nextui-org/react';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
+import { Combo } from '@/types/combo';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+const FormSchema = z.object({
+  name: z.string().min(1, { message: 'Item name is required' }),
+  description: z.string().optional(),
+  price: z.coerce
+    .number()
+    .multipleOf(0.01)
+    .min(0, { message: 'Price must be at least 0' }),
+  image: z.coerce
+    .string({ message: 'Should be a string' })
+    .optional()
+    .default('test'),
+  foodIds: z.array(z.string()).optional(),
+});
+
+type FormSchemaType = z.infer<typeof FormSchema>;
+
+const ComboForm: FC = () => {
+  const Navigate = useNavigate();
+  const { register, handleSubmit, formState, setValue } =
+    useForm<FormSchemaType>({
+      resolver: zodResolver(FormSchema),
+    });
+
+  const { errors } = formState;
+
+  const [imageFile, setImageFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      console.log('Form errors:', errors);
+    }
+  }, [errors]);
+
+  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
+    let imageUrl = data.image;
+
+    if (imageFile) {
+      const formData = new FormData();
+      formData.append('file', imageFile);
+
+      try {
+        const uploadUrl = (import.meta as any).env.VITE_UPLOAD_URL;
+        const response = await fetch(`${uploadUrl}`, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+          },
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          imageUrl = result.fileUrl;
+          setValue('image', imageUrl);
+        } else {
+          console.error('Image upload failed');
+          return;
+        }
+      } catch (error) {
+        console.error('Error uploading image:', error);
+        return;
+      }
+    }
+
+    const transformedData = {
+      cafeId: 'cafe 1',
+      available: 0,
+      deleted: 0,
+      ...data,
+      image: imageUrl,
+      foodIds: [],
+    };
+
+    try {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/foodCombo`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(transformedData),
+      });
+
+      if (response.ok) {
+        toast('Food combo added successfully', { type: 'success' });
+        Navigate('/branch-manager/food-combos');
+      } else {
+        toast('Failed to add food item', { type: 'error' });
+        console.error('Failed to add food combo', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error adding food combo', error);
+      toast('Failed to add food combo', { type: 'error' });
+    }
+  };
+
+  const [foodIds] = useState<Combo[]>([
+    { key: 'Pizza', label: 'Pizza' },
+    { key: 'Milk-Shake', label: 'Milk-Shake' },
+    { key: 'Other', label: 'Other' },
+  ]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-[#000000]">
+        <div className="border-b border-stroke py-4 px-6.5 dark:border-strokedark">
+          <h3
+            className="font-medium text-xl
+           text-black dark:text-white"
+          >
+            Add Food Combos
+          </h3>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col md:flex-row gap-6 max-h-full"
+        >
+          <div className="w-full md:w-3/7 space-y-4 p-6.5">
+            <div className="w-full">
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Combo name</span>
+                <input
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  type="text"
+                  {...register('name')}
+                />
+                {errors.name && (
+                  <p className="text-red-600 mb-1">{errors.name.message}</p>
+                )}
+              </label>
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">
+                  Describe food combo
+                </span>
+                <textarea
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  placeholder="Tell us about this combo ..."
+                  {...register('description')}
+                />
+                {errors.description && (
+                  <p className="text-red-600 mb-1">
+                    {errors.description.message}
+                  </p>
+                )}
+              </label>
+              <label className="mb-6 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Price</span>
+                <input
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  type="number"
+                  {...register('price')}
+                />
+                {errors.price && (
+                  <p className="text-red-600">{errors.price.message}</p>
+                )}
+              </label>
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Food items</span>
+                <MultiSelect
+                  categories={foodIds}
+                  register={register}
+                  fieldname="foodIds"
+                  setValue={setValue}
+                />
+              </label>
+            </div>
+          </div>
+          <div className="w-full md:w-4/7 flex p-6.5">
+            <div className="w-full">
+              <label className="block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Upload Image</span>
+                <ImageInput
+                  fieldname="image"
+                  register={register}
+                  setImageFile={setImageFile}
+                />
+              </label>
+              <div className="flex justify-center gap-12 mt-16">
+                <Button className="flex w-full justify-center rounded-lg bg-[#b1bfd0] text-white shadow-lg min-w-0 h-16">
+                  Cancel
+                </Button>
+                <Button
+                  className="flex w-full justify-center rounded-lg bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg min-w-0 h-16"
+                  type="submit"
+                >
+                  Add Food Combo
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ComboForm;
diff --git a/src/components/BranchManager/Forms/DynamicForm/EditFoodCombo.tsx b/src/components/BranchManager/Forms/DynamicForm/EditFoodCombo.tsx
new file mode 100644
index 0000000..6e72d04
--- /dev/null
+++ b/src/components/BranchManager/Forms/DynamicForm/EditFoodCombo.tsx
@@ -0,0 +1,210 @@
+import { FC, useEffect, useState } from 'react';
+import { z } from 'zod';
+import { useForm, SubmitHandler, useFieldArray } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import ImageInput from '@components/BranchManager/Inputs/ImageInput';
+import { Button } from '@nextui-org/react';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
+import { Combo } from '@/types/combo';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+const FormSchema = z.object({
+  name: z.string().min(1, { message: 'Item name is required' }),
+  description: z.string().optional(),
+  price: z.coerce
+    .number()
+    .multipleOf(0.01)
+    .min(0, { message: 'Price must be at least 0' }),
+  image: z.coerce
+    .string({ message: 'Should be a string' })
+    .optional()
+    .default('test'),
+  foodIds: z.array(z.string()).optional(),
+});
+
+type FormSchemaType = z.infer<typeof FormSchema>;
+
+function ComboEditForm({ id }: { id: string | undefined }) {
+  const Navigate = useNavigate();
+  const { register, handleSubmit, formState, setValue } =
+    useForm<FormSchemaType>({
+      resolver: zodResolver(FormSchema),
+    });
+
+  const { errors } = formState;
+
+  const [imageFile, setImageFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      console.log('Form errors:', errors);
+    }
+  }, [errors]);
+
+  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
+    let imageUrl = data.image;
+
+    if (imageFile) {
+      const formData = new FormData();
+      formData.append('file', imageFile);
+
+      try {
+        const uploadUrl = (import.meta as any).env.VITE_UPLOAD_URL;
+        const response = await fetch(`${uploadUrl}`, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type',
+          },
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          imageUrl = result.fileUrl;
+          setValue('image', imageUrl);
+        } else {
+          console.error('Image upload failed');
+          return;
+        }
+      } catch (error) {
+        console.error('Error uploading image:', error);
+        return;
+      }
+    }
+
+    const transformedData = {
+      cafeId: 'cafe 1',
+      available: 0,
+      deleted: 0,
+      ...data,
+      image: imageUrl,
+      foodIds: [],
+    };
+
+    try {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/foodCombo`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(transformedData),
+      });
+
+      if (response.ok) {
+        toast('Food combo added successfully', { type: 'success' });
+        Navigate('/branch-manager/food-combos');
+      } else {
+        toast('Failed to add food item', { type: 'error' });
+        console.error('Failed to add food combo', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error adding food combo', error);
+      toast('Failed to add food combo', { type: 'error' });
+    }
+  };
+
+  const [foodIds] = useState<Combo[]>([
+    { key: 'Pizza', label: 'Pizza' },
+    { key: 'Milk-Shake', label: 'Milk-Shake' },
+    { key: 'Other', label: 'Other' },
+  ]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-[#000000]">
+        <div className="border-b border-stroke py-4 px-6.5 dark:border-strokedark">
+          <h3
+            className="font-medium text-xl
+           text-black dark:text-white"
+          >
+            Add Food Combos
+          </h3>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col md:flex-row gap-6 max-h-full"
+        >
+          <div className="w-full md:w-3/7 space-y-4 p-6.5">
+            <div className="w-full">
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Combo name</span>
+                <input
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  type="text"
+                  {...register('name')}
+                />
+                {errors.name && (
+                  <p className="text-red-600 mb-1">{errors.name.message}</p>
+                )}
+              </label>
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">
+                  Describe food combo
+                </span>
+                <textarea
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  placeholder="Tell us about this combo ..."
+                  {...register('description')}
+                />
+                {errors.description && (
+                  <p className="text-red-600 mb-1">
+                    {errors.description.message}
+                  </p>
+                )}
+              </label>
+              <label className="mb-6 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Price</span>
+                <input
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  type="number"
+                  {...register('price')}
+                />
+                {errors.price && (
+                  <p className="text-red-600">{errors.price.message}</p>
+                )}
+              </label>
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Food items</span>
+                <MultiSelect
+                  categories={foodIds}
+                  register={register}
+                  fieldname="foodIds"
+                  setValue={setValue}
+                />
+              </label>
+            </div>
+          </div>
+          <div className="w-full md:w-4/7 flex p-6.5">
+            <div className="w-full">
+              <label className="block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Upload Image</span>
+                <ImageInput
+                  fieldname="image"
+                  register={register}
+                  setImageFile={setImageFile}
+                />
+              </label>
+              <div className="flex justify-center gap-12 mt-16">
+                <Button className="flex w-full justify-center rounded-lg bg-[#b1bfd0] text-white shadow-lg min-w-0 h-16">
+                  Cancel
+                </Button>
+                <Button
+                  className="flex w-full justify-center rounded-lg bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg min-w-0 h-16"
+                  type="submit"
+                >
+                  Add Food Combo
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default ComboEditForm;
diff --git a/src/components/BranchManager/Sidebar/index.tsx b/src/components/BranchManager/Sidebar/index.tsx
index 10b065b..aa3fc09 100644
--- a/src/components/BranchManager/Sidebar/index.tsx
+++ b/src/components/BranchManager/Sidebar/index.tsx
@@ -7,7 +7,7 @@ import { Squares2X2Icon } from '@heroicons/react/24/outline';
 import { CakeIcon } from '@heroicons/react/24/outline';
 import { QueueListIcon } from '@heroicons/react/24/outline';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
-import { TagIcon } from '@heroicons/react/24/solid';
+import { RectangleGroupIcon, TagIcon } from '@heroicons/react/24/solid';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -136,6 +136,18 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   Foods
                 </NavLink>
               </li>
+              <li>
+                <NavLink
+                  to="/branch-manager/food-combos"
+                  className={`group relative flex items-center gap-2.5 rounded-xl py-2 px-4 font-medium  text-black dark:text-white duration-300 ease-in-out hover:bg-yellow-100 dark:hover:bg-meta-4 ${
+                    pathname.includes('/branch-manager/food-combos') &&
+                    'bg-yellow-100 dark:bg-meta-4'
+                  }`}
+                >
+                  <RectangleGroupIcon className="w-6 h-6" />
+                  Food Combos
+                </NavLink>
+              </li>
               <li>
                 <NavLink
                   to="/branch-manager/users"
@@ -148,7 +160,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   Manage Users
                 </NavLink>
               </li>
-              <SidebarLinkGroup
+              {/* <SidebarLinkGroup
                 activeCondition={
                   pathname === '/branch-manager/forms' ||
                   pathname.includes('/branch-manager/forms')
@@ -181,7 +193,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                           )}
                         </span>
                       </NavLink>
-                      {/* <!-- Dropdown Menu Start --> */}
+                      
                       <div
                         className={`translate transform overflow-hidden ${
                           !open && 'hidden'
@@ -215,7 +227,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                     </React.Fragment>
                   );
                 }}
-              </SidebarLinkGroup>
+              </SidebarLinkGroup> */}
             </ul>
           </div>
         </nav>
diff --git a/src/components/BranchManager/Tables/NextTable/ComboList.tsx b/src/components/BranchManager/Tables/NextTable/ComboList.tsx
new file mode 100644
index 0000000..aed9756
--- /dev/null
+++ b/src/components/BranchManager/Tables/NextTable/ComboList.tsx
@@ -0,0 +1,315 @@
+import React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Pagination,
+  Selection,
+  SortDescriptor,
+} from '@nextui-org/react';
+import { PlusIcon } from './PlusIcon';
+import { VerticalDotsIcon } from './VerticalDotsIcon';
+import { ChevronDownIcon } from './ChevronDownIcon';
+import { SearchIcon } from './SearchIcon';
+import { columns, combos } from './MockCombos';
+import { capitalize } from './utils';
+import { useNavigate } from 'react-router-dom';
+
+const INITIAL_VISIBLE_COLUMNS = ['name', 'price', 'items', 'actions'];
+
+type Combo = (typeof combos)[0];
+
+export default function ComboList() {
+  const navigate = useNavigate();
+  const [filterValue, setFilterValue] = React.useState('');
+  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(
+    new Set(INITIAL_VISIBLE_COLUMNS),
+  );
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
+    column: 'name',
+    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 filteredCombos = [...combos];
+
+    if (hasSearchFilter) {
+      filteredCombos = filteredCombos.filter((combo) =>
+        combo.name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+
+    return filteredCombos;
+  }, [combos, 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: Combo, b: Combo) => {
+      const first = a[sortDescriptor.column as keyof Combo] as number;
+      const second = b[sortDescriptor.column as keyof Combo] as number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((combo: Combo, columnKey: React.Key) => {
+    const cellValue = combo[columnKey as keyof Combo];
+
+    switch (columnKey) {
+      case 'name':
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+          </div>
+        );
+      case 'price':
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+          </div>
+        );
+      case 'items':
+        return (
+          <div className="flex flex-col">
+            {/* food ids shold be a list seperate with commas */}
+            <p className="text-small text-default-400">
+              {Array.from(combo.foodIds).join(', ')}
+            </p>
+          </div>
+        );
+      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 onClick={() => navigate(`edit/${combo.id}`)}>
+                  Edit
+                </DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return 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: 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 onClear = React.useCallback(() => {
+    setFilterValue('');
+    setPage(1);
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <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}
+          />
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  variant="flat"
+                >
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+                className="bg-black text-white"
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button
+              className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg"
+              color="primary"
+              endContent={<PlusIcon />}
+              onClick={() => navigate('add')}
+            >
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-end items-center">
+          <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,
+    visibleColumns,
+    onSearchChange,
+    onRowsPerPageChange,
+    combos.length,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <span className="w-[30%] text-small text-default-400">
+          {`Total ${filteredItems.length} Combos`}
+        </span>
+        <Pagination
+          isCompact
+          showControls
+          showShadow
+          color="primary"
+          page={page}
+          total={pages}
+          onChange={setPage}
+        />
+        <div className="hidden sm:flex w-[30%] justify-end gap-2">
+          <Button
+            isDisabled={pages === 1}
+            size="sm"
+            variant="flat"
+            onPress={onPreviousPage}
+          >
+            Previous
+          </Button>
+          <Button
+            isDisabled={pages === 1}
+            size="sm"
+            variant="flat"
+            onPress={onNextPage}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    );
+  }, [items.length, page, pages, hasSearchFilter]);
+
+  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}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === 'actions' ? 'center' : 'start'}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={'No combos found'} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => (
+              <TableCell>{renderCell(item, columnKey)}</TableCell>
+            )}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/src/components/BranchManager/Tables/NextTable/MockCombos.ts b/src/components/BranchManager/Tables/NextTable/MockCombos.ts
new file mode 100644
index 0000000..db6c8f6
--- /dev/null
+++ b/src/components/BranchManager/Tables/NextTable/MockCombos.ts
@@ -0,0 +1,33 @@
+const columns = [
+  { name: 'Combo Name', uid: 'name', sortable: true },
+  { name: 'Price', uid: 'price', sortable: true },
+  { name: 'Food Items', uid: 'items' },
+  { name: 'Actions', uid: 'actions' },
+];
+
+const combos = [
+  {
+    id: '66818e4d48b0cf121b29a60b',
+    name: 'Italian Specials',
+    description: 'A variety of Italian dishes',
+    price: 29.99,
+    image: 'menu_image_url',
+    available: 1,
+    cafeId: 'cafe123',
+    deleted: 0,
+    foodIds: ['food1', 'food2', 'food3'],
+  },
+  {
+    id: '6681a3b05a0ac5263cc04109',
+    name: 'Sri Lankan Specials',
+    description: 'A variety of Italian dishes',
+    price: 29.99,
+    image: 'menu_image_url',
+    available: 1,
+    cafeId: 'cafe123',
+    deleted: 0,
+    foodIds: ['food1', 'food2', 'food3'],
+  },
+];
+
+export { columns, combos };
diff --git a/src/pages/BranchManager/FoodCombos/Add.tsx b/src/pages/BranchManager/FoodCombos/Add.tsx
new file mode 100644
index 0000000..17eba47
--- /dev/null
+++ b/src/pages/BranchManager/FoodCombos/Add.tsx
@@ -0,0 +1,13 @@
+import ComboForm from '@/components/BranchManager/Forms/DynamicForm/AddFoodCombo';
+
+const AddCombos: React.FC = () => {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-1 md:gap-6 xl:grid-cols-1 2xl:gap-7.5">
+        <ComboForm />
+      </div>
+    </>
+  );
+};
+
+export default AddCombos;
diff --git a/src/pages/BranchManager/FoodCombos/Edit.tsx b/src/pages/BranchManager/FoodCombos/Edit.tsx
new file mode 100644
index 0000000..a49258b
--- /dev/null
+++ b/src/pages/BranchManager/FoodCombos/Edit.tsx
@@ -0,0 +1,15 @@
+import ComboEditForm from '@/components/BranchManager/Forms/DynamicForm/EditFoodCombo';
+import { useParams } from 'react-router-dom';
+
+const EditCombos: React.FC = () => {
+  const { comboId } = useParams<{ comboId?: string }>();
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-1 md:gap-6 xl:grid-cols-1 2xl:gap-7.5">
+        <ComboEditForm id={comboId} />
+      </div>
+    </>
+  );
+};
+
+export default EditCombos;
diff --git a/src/pages/BranchManager/FoodCombos/index.tsx b/src/pages/BranchManager/FoodCombos/index.tsx
new file mode 100644
index 0000000..b655cad
--- /dev/null
+++ b/src/pages/BranchManager/FoodCombos/index.tsx
@@ -0,0 +1,13 @@
+import ComboList from '@/components/BranchManager/Tables/NextTable/ComboList';
+
+const Combos: React.FC = () => {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-1 md:gap-6 xl:grid-cols-1 2xl:gap-7.5">
+        <ComboList />
+      </div>
+    </>
+  );
+};
+
+export default Combos;
diff --git a/src/types/combo.ts b/src/types/combo.ts
new file mode 100644
index 0000000..8d97028
--- /dev/null
+++ b/src/types/combo.ts
@@ -0,0 +1,4 @@
+export type Combo = {
+  key: string;
+  label: string;
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 11b8610..2f7894a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -33,7 +33,7 @@ module.exports = {
         bodydark: '#AEB7C0',
         bodydark1: '#DEE4EE',
         bodydark2: '#8A99AF',
-        primary: '#a16207',
+        primary: '#e65a09',
         secondary: '#80CAEE',
         stroke: '#E2E8F0',
         gray: '#EFF4FB',