diff --git a/.gitignore b/.gitignore
index a547bf3..3f16caa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,9 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# environment
+.env
+
 node_modules
 dist
 dist-ssr
diff --git a/env.example b/env.example
new file mode 100644
index 0000000..5c41572
--- /dev/null
+++ b/env.example
@@ -0,0 +1,2 @@
+VITE_API_URL="http://localhost:8080/api/lafresca"
+VITE_UPLOAD_URL="https://s3-bucket.usweb.aws.com/upload"
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index d5d1f6a..3c9cf87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import Dashboard from '@pages/BranchManager/Dashboard';
 import BranchManagerLayout from '@layouts/BranchManagerLayout';
 import LoginPage from '@pages/User/LogIn';
 import UserLayout from '@layouts/UserLayout';
-import Foods from '@pages/BranchManager/Foods';
+import AddFoods from '@pages/BranchManager/Foods/AddFood';
 import FoodItem from '@pages/FoodItem';
 import AllFoodItems from '@pages/AllFoodItems';
 import FoodList from '@pages/BranchManager/FoodList';
@@ -24,6 +24,8 @@ 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';
 
 const routes = createRoutesFromElements(
   <Route>
@@ -106,6 +108,15 @@ const routes = createRoutesFromElements(
           </>
         }
       />
+      <Route
+        path="categories"
+        element={
+          <>
+            <PageTitle title="La Fresca | Add Food Categories " />
+            <AddCategories />
+          </>
+        }
+      />
       <Route path="foods">
         <Route
           index
@@ -121,16 +132,16 @@ const routes = createRoutesFromElements(
           element={
             <>
               <PageTitle title="Branch Manager | Add Food" />
-              <Foods />
+              <AddFoods />
             </>
           }
         />
         <Route
-          path="discountlist"
+          path="edit/:foodId"
           element={
             <>
-              <PageTitle title="Branch Manager | Discount List" />
-              <DiscountList />
+              <PageTitle title="Branch Manager | Edit Food" />
+              <EditFoods />
             </>
           }
         />
@@ -164,6 +175,15 @@ const routes = createRoutesFromElements(
           }
         />
       </Route>
+      <Route
+        path="discountlist"
+        element={
+          <>
+            <PageTitle title="Branch Manager | Discount List" />
+            <DiscountList />
+          </>
+        }
+      />
     </Route>
   </Route>,
 );
diff --git a/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx b/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
new file mode 100644
index 0000000..0ad4327
--- /dev/null
+++ b/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
@@ -0,0 +1,122 @@
+import { FC, useEffect, useState } from 'react';
+import { z } from 'zod';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TrashIcon } from '@heroicons/react/24/solid';
+import ImageInput from '@components/BranchManager/Inputs/ImageInput';
+import { Button } from '@nextui-org/react';
+import MultiSelect from '@components/BranchManager/Forms/MultiSelect';
+import { Category } from '@/types/category';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+const FormSchema = z.object({
+  name: z.string().min(1, { message: 'Category name is required' }),
+  description: z.string().optional(),
+});
+
+type FormSchemaType = z.infer<typeof FormSchema>;
+
+function CategoryForm() {
+  const Navigate = useNavigate();
+  const { register, handleSubmit, formState } = useForm<FormSchemaType>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const { errors } = formState;
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      console.log('Form errors:', errors);
+    }
+  }, [errors]);
+
+  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
+    console.log('Form data:', data);
+    try {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/category`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (response.ok) {
+        toast('Food item added successfully', { type: 'success' });
+        Navigate('/branch-manager/foods');
+      } else {
+        toast('Failed to add food item', { type: 'error' });
+        console.error('Failed to add food item:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error adding food item:', error);
+      toast('Failed to add food item', { type: 'error' });
+    }
+  };
+
+  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 Categories
+          </h3>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col md:flex-row gap-6 max-h-full"
+        >
+          <div className="w-full 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">Category 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 category
+                </span>
+                <textarea
+                  className="w-full h-60 rounded border-[1.5px] border-stroke bg-transparent py-5 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 text-start"
+                  placeholder="Tell us about this food category..."
+                  {...register('description')}
+                />
+                {errors.description && (
+                  <p className="text-red-600 mb-1">
+                    {errors.description.message}
+                  </p>
+                )}
+              </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 Category
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default CategoryForm;
diff --git a/src/components/BranchManager/Forms/DynamicForm/EditForm.tsx b/src/components/BranchManager/Forms/DynamicForm/EditForm.tsx
new file mode 100644
index 0000000..3dbc672
--- /dev/null
+++ b/src/components/BranchManager/Forms/DynamicForm/EditForm.tsx
@@ -0,0 +1,408 @@
+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 { XMarkIcon } from '@heroicons/react/24/outline';
+import { TrashIcon } from '@heroicons/react/24/solid';
+import ImageInput from '@components/BranchManager/Inputs/ImageInput';
+import { Button } from '@nextui-org/react';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
+import { Category } from '@/types/category';
+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' }),
+  category: z.array(z.string()).min(1, { message: 'Category 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'),
+  features: z
+    .array(
+      z.object({
+        name: z.string().min(1, { message: 'Feature name is required' }),
+        subCategories: z.array(
+          z.object({
+            name: z.string().min(1, { message: 'Sub Category is required' }),
+            price: z.coerce
+              .number()
+              .min(0, { message: 'Price must be at least 0' }),
+          }),
+        ),
+      }),
+    )
+    .optional(),
+});
+
+type FormSchemaType = z.infer<typeof FormSchema>;
+
+interface Props {
+  id: string | undefined;
+}
+
+function EditForm({ id }: Props) {
+  const Navigate = useNavigate();
+  const { register, control, handleSubmit, formState, setValue } =
+    useForm<FormSchemaType>({
+      resolver: zodResolver(FormSchema),
+    });
+
+  const { fields, append, update, remove } = useFieldArray({
+    control,
+    name: 'features',
+  });
+
+  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,
+      rating: 0,
+      features:
+        data.features?.map((feature) => ({
+          name: feature.name,
+          levels: feature.subCategories.map((sub) => sub.name),
+          additionalPrices: feature.subCategories.map((sub) => sub.price),
+        })) || [],
+    };
+
+    try {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/food/${id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(transformedData),
+      });
+
+      if (response.ok) {
+        toast('Food item added successfully', { type: 'success' });
+        Navigate('/branch-manager/foods');
+      } else {
+        toast('Failed to add food item', { type: 'error' });
+        console.error('Failed to add food item:', response.statusText);
+      }
+    } catch (error) {
+      console.error('Error adding food item:', error);
+      toast('Failed to add food item', { type: 'error' });
+    }
+  };
+
+  const [categories] = useState<Category[]>([
+    { key: 'Non-Vegetarian', label: 'Non-Vegetarian' },
+    { key: 'Vegetarian', label: 'Vegetarian' },
+    { key: 'Other', label: 'Other' },
+  ]);
+
+  const [item, setItem] = useState<any>(null);
+
+  const fetchItems = async () => {
+    try {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/food/${id}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch item');
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error('Error fetching item:', error);
+    }
+  };
+
+  const getItem = async () => {
+    const item = await fetchItems();
+    console.log('Item:', item);
+    if (item) {
+      setItem(item);
+      setValue('name', item.name);
+      setValue('category', item.category || []);
+      setValue('description', item.description || '');
+      setValue('price', item.price);
+      setValue('image', item.image);
+      if (item.features) {
+        const features = item.features.map((feature: any) => ({
+          name: feature.name,
+          subCategories: feature.levels.map((level: any, idx: number) => ({
+            name: level,
+            price: feature.additionalPrices[idx],
+          })),
+        }));
+        setValue('features', features);
+      }
+    }
+  };
+
+  useEffect(() => {
+    getItem();
+  }, [id]);
+
+  if (!item) {
+    return <div>Loading...</div>;
+  }
+
+  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"
+          >
+            Edit Food Item
+          </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">Item 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">Category</span>
+                <MultiSelect
+                  categories={categories}
+                  register={register}
+                  fieldname="category"
+                  setValue={setValue}
+                />
+              </label>
+
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Describe food</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 your food..."
+                  {...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>
+            </div>
+            <Button
+              type="button"
+              className="flex w-full mb-3 justify-center rounded-lg border-solid border-2 border-[#ffffff] bg-blue-200 dark:bg-[#000000] p-3 font-medium text-black dark:text-white hover:bg-opacity-90 "
+              onClick={() =>
+                append({ name: '', subCategories: [{ name: '', price: 0 }] })
+              }
+            >
+              Add Feature
+            </Button>
+            <div className="mt-6">
+              {fields.map((field, index) => (
+                <div
+                  key={field.id}
+                  className="relative mt-8 mb-4 border-dashed border-2 border-gray-300 dark:border-gray-700 rounded-lg p-4"
+                >
+                  <button
+                    type="button"
+                    className="absolute top-1 mt-4 right-2 border-red-500 flex justify-center rounded-lg bg-red-500 dark:bg-red-800 p-2 font-medium text-white hover:bg-opacity-90"
+                    onClick={() => remove(index)}
+                  >
+                    <XMarkIcon className="h-4 w-4" />
+                  </button>
+                  <label className="block">
+                    <span className="block mt-8 mb-1 text-gray-600">
+                      Feature 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(`features.${index}.name`)}
+                    />
+                  </label>
+                  {errors.features?.[index]?.name && (
+                    <span className="text-red-600">
+                      {errors.features[index]?.name?.message}
+                    </span>
+                  )}
+                  {field.subCategories.map((_, subIndex) => (
+                    <div key={subIndex} className="flex items-center mt-4">
+                      <label className="block w-full">
+                        <span className="block mb-3 text-gray-600">
+                          Sub Category
+                        </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(
+                            `features.${index}.subCategories.${subIndex}.name`,
+                          )}
+                        />
+                        <div className="min-h-12 sm:min-h-6">
+                          {errors.features?.[index]?.subCategories?.[subIndex]
+                            ?.name && (
+                            <span className="text-red-600">
+                              {
+                                errors.features[index]?.subCategories?.[
+                                  subIndex
+                                ]?.name?.message
+                              }
+                            </span>
+                          )}
+                        </div>
+                      </label>
+                      <label className="block w-full ml-4">
+                        <span className="block mb-3 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(
+                            `features.${index}.subCategories.${subIndex}.price`,
+                          )}
+                        />
+                        <div className="min-h-12 sm:min-h-6">
+                          {errors.features?.[index]?.subCategories?.[subIndex]
+                            ?.price && (
+                            <span className="text-red-600">
+                              {
+                                errors.features[index]?.subCategories?.[
+                                  subIndex
+                                ]?.price?.message
+                              }
+                            </span>
+                          )}
+                        </div>
+                      </label>
+                      <button
+                        type="button"
+                        className="flex w-1/4 ml-3 sm:mb-0 mb-4 sm:mt-2 justify-center rounded-3xl bg-transparent p-3 font-medium text-gray hover:bg-opacity-90"
+                        onClick={() =>
+                          update(index, {
+                            ...fields[index],
+                            subCategories: fields[index].subCategories.filter(
+                              (_, i) => i !== subIndex,
+                            ),
+                          })
+                        }
+                      >
+                        <TrashIcon className="h-7 w-7 text-red-500 dark:text-[#ffffff]" />
+                      </button>
+                    </div>
+                  ))}
+                  <Button
+                    type="button"
+                    className="flex w-full mt-3 mb-3 justify-center rounded-lg border-2 border-solid text-black p-3 font-medium dark:text-white hover:bg-opacity-90"
+                    onClick={() =>
+                      update(index, {
+                        ...fields[index],
+                        subCategories: [
+                          ...fields[index].subCategories,
+                          { name: '', price: 0 },
+                        ],
+                      })
+                    }
+                  >
+                    Add Sub Category
+                  </Button>
+                </div>
+              ))}
+            </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}
+                  urlPreview={item.image}
+                />
+              </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"
+                >
+                  Edit Food Item
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default EditForm;
diff --git a/src/components/BranchManager/Forms/DynamicForm/index.tsx b/src/components/BranchManager/Forms/DynamicForm/index.tsx
index ba7ac9c..f12587a 100644
--- a/src/components/BranchManager/Forms/DynamicForm/index.tsx
+++ b/src/components/BranchManager/Forms/DynamicForm/index.tsx
@@ -6,13 +6,14 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 import { TrashIcon } from '@heroicons/react/24/solid';
 import ImageInput from '@components/BranchManager/Inputs/ImageInput';
 import { Button } from '@nextui-org/react';
-import MultiSelect from '@components/BranchManager/Forms/MultiSelect';
+import MultiSelect from '@components/BranchManager/Forms/MultiCheckBox';
 import { Category } from '@/types/category';
 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' }),
-  category: z.string().min(1, { message: 'Category is required' }),
+  category: z.array(z.string()).min(1, { message: 'Category is required' }),
   description: z.string().optional(),
   price: z.coerce
     .number()
@@ -42,6 +43,7 @@ const FormSchema = z.object({
 type FormSchemaType = z.infer<typeof FormSchema>;
 
 const DynamicForm: FC = () => {
+  const Navigate = useNavigate();
   const { register, control, handleSubmit, formState, setValue } =
     useForm<FormSchemaType>({
       resolver: zodResolver(FormSchema),
@@ -70,18 +72,16 @@ const DynamicForm: FC = () => {
       formData.append('file', imageFile);
 
       try {
-        const response = await fetch(
-          'https://simple-uploadddddddddd.iamtrazy.eu.org/upload',
-          {
-            method: 'POST',
-            body: formData,
-            headers: {
-              'Access-Control-Allow-Origin': '*',
-              'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
-              'Access-Control-Allow-Headers': 'Content-Type',
-            },
+        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();
@@ -112,7 +112,8 @@ const DynamicForm: FC = () => {
     };
 
     try {
-      const response = await fetch('http://localhost:8080/api/lafresca/food', {
+      const apiUrl = (import.meta as any).env.VITE_API_URL;
+      const response = await fetch(`${apiUrl}/food`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -122,6 +123,7 @@ const DynamicForm: FC = () => {
 
       if (response.ok) {
         toast('Food item added successfully', { type: 'success' });
+        Navigate('/branch-manager/foods');
       } else {
         toast('Failed to add food item', { type: 'error' });
         console.error('Failed to add food item:', response.statusText);
@@ -172,6 +174,7 @@ const DynamicForm: FC = () => {
                   categories={categories}
                   register={register}
                   fieldname="category"
+                  setValue={setValue}
                 />
               </label>
 
@@ -220,7 +223,7 @@ const DynamicForm: FC = () => {
                     className="absolute top-1 mt-4 right-2 border-red-500 flex justify-center rounded-lg bg-red-500 dark:bg-red-800 p-2 font-medium text-white hover:bg-opacity-90"
                     onClick={() => remove(index)}
                   >
-                    <XMarkIcon className="h-6 w-6" />
+                    <XMarkIcon className="h-4 w-4" />
                   </button>
                   <label className="block">
                     <span className="block mt-8 mb-1 text-gray-600">
@@ -297,7 +300,7 @@ const DynamicForm: FC = () => {
                           })
                         }
                       >
-                        <TrashIcon className="h-9 w-9 text-red-500 dark:text-[#ffffff]" />
+                        <TrashIcon className="h-7 w-7 text-red-500 dark:text-[#ffffff]" />
                       </button>
                     </div>
                   ))}
diff --git a/src/components/BranchManager/Forms/MultiCheckBox.tsx b/src/components/BranchManager/Forms/MultiCheckBox.tsx
new file mode 100644
index 0000000..5733dd9
--- /dev/null
+++ b/src/components/BranchManager/Forms/MultiCheckBox.tsx
@@ -0,0 +1,65 @@
+import { FC, useState, useEffect } from 'react';
+import { Select, SelectItem } from '@nextui-org/react';
+import { Category } from '@/types/category';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+
+interface AppProps {
+  categories: Category[];
+  fieldname: string;
+  register: UseFormRegister<any>;
+  setValue: UseFormSetValue<any>;
+}
+
+const App: FC<AppProps> = ({ categories, register, fieldname, setValue }) => {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+  let value = Array.from(selectedKeys);
+
+  useEffect(() => {
+    setValue(fieldname, Array.from(selectedKeys));
+    console.log(/*selectedKeys*/ Array.from(selectedKeys));
+    console.log(value);
+  }, [selectedKeys, setValue, fieldname]);
+
+  const handleSelectionChange = (keys: Set<string> | any) => {
+    setSelectedKeys(keys instanceof Set ? keys : new Set(keys)); // Ensure keys is always a Set<string>
+  };
+
+  return (
+    <div className="relative">
+      <div className="flex flex-col items-center">
+        <div className="w-full">
+          <div className="mb-2 flex rounded border border-stroke py-2 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark bg-inherit">
+            <Select
+              items={categories}
+              placeholder="Select an option"
+              className="w-full"
+              variant="bordered"
+              isMultiline={true}
+              selectionMode="multiple"
+              labelPlacement="outside"
+              classNames={{
+                base: 'max-w-full',
+                trigger: 'min-h-12 py-2',
+              }}
+              selectedKeys={selectedKeys}
+              onSelectionChange={(keys) => handleSelectionChange(keys)}
+            >
+              {(category) => (
+                <SelectItem
+                  className="dark:bg-[#000000] bg-white rounded-sm border border-solid w-full dark:text-white text-[#000000]"
+                  key={category.key}
+                  value={category.key}
+                >
+                  {category.label}
+                </SelectItem>
+              )}
+            </Select>
+            <input type="hidden" value={value} {...register(fieldname)} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/components/BranchManager/Inputs/ImageInput.tsx b/src/components/BranchManager/Inputs/ImageInput.tsx
index 9b2283b..7e869ac 100644
--- a/src/components/BranchManager/Inputs/ImageInput.tsx
+++ b/src/components/BranchManager/Inputs/ImageInput.tsx
@@ -6,15 +6,16 @@ interface ImageInputProps {
   fieldname: string;
   register: UseFormRegister<any>;
   setImageFile: (file: File | null) => void;
+  urlPreview?: string | undefined;
 }
 
 const ImageInput: FC<ImageInputProps> = ({
   fieldname,
   register,
   setImageFile,
+  urlPreview,
 }) => {
-  const [preview, setPreview] = useState<string | null>(null);
-
+  const [preview, setPreview] = useState<string | null>(urlPreview || null);
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -70,7 +71,7 @@ const ImageInput: FC<ImageInputProps> = ({
           ) : (
             <>
               <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFR0lEQVR4nO2cfU8cVRTG+Uc/i+L38js0O2UubAu2vLQrpWIhviTapDaNdAe1pTvUmhSNwWp0q4ZaQHktsDO79+4MG2lyzFlYhIVlduftXmbOkzwJacnCeX53zrl7N9yuLhKJRCKRSCQSiUQikUgkEolEIpFIpAP1aeIdpvFreoYXdU1UmSYgydY1Ua3XmuEj+gXeLW0h6Dq8yTJ8VNf4a9mhMGkwsHae+/BdeCP+8DX+SHYATBHrGT4TKwRc+bKLZopZz/DrsfX8NLcd1soZvten8bcjB4CkpRerqWo+HDkAponn8gsVipr/Fj2AjBDyCxVKWtcEjx6AAoUyhU0ANAJwLpxlAr7KO7C8uAsO3zd+PX3fqf8fPQFadOEPXRGw+vcu/FurneqV5d3691AL0qJZ+WeFfxSCnyfBNNzjzjvVguEWC4Y7UpiqBT87kt06WEBj2/EKv+HpKSc4gGN2XhcMNzc/H+DYQnaALKCXX7ptA1h6uRsygEMQM74hyA6QBXSVe7efhvF7owGArcn1d3aUJgCiEh2AQt7Zm5mudX52JDtAlogWdNiKOj87kh0gC2jc58sbws1Pgdv52VGcYfX27DvM18StJW4x29qG6iJaAIbDlQbwYLoC3xiV0F8X32SdBSHIG7HOWpDb+dlRXOHffJ9DeceCSsmC8Rs89NfH1Y0tBvs8DmY0fo3/5mflJwpAlglYemGDsK26l/+y4ZIePoQonAgAszOVw/AbfjxTlh5uKgDcusmBl46Hj+aWBZPj6j8F5xrApV4BK0snw294bdmCy33yQ04sgLkn5ZbhiwM/faJ2Kzq3AD6ZrNTbjBcAYVvw6UfqtqJzCeC9ywI2V//f9QgPv1qz4Gq//LATA2D+B+/WI5r884+29LATAeDO5ye3nKJN3/ks/HfJqQIwNMBhe8Nf+MK2YGfTguErnc+De7dLcO+2lXIAFwX8+qzz1iOaXPylXH+tdn/u+GgZdv5Zh9LKOtwaK6cXwNRd/61HNPnLu+21oqv9HFYXNsBeW6t77cU6DA5U0gfg2qAAayuc8IVtgbVtQ27k7FbU18Ph+fzmYfgN//FsE7IhnjMpD6D3ooA/i+1vOUWbXvjdPvOzg+8ebZ0Iv+G52e30AMDz/bDDFwf+Ol9pOXRbhd9wWENZaQBjuf0z/qgAVHYs+GCUnzp0vQCENZSVBYBn/IsL4bce0eSjnx00D10vhzGUlQUw+zD4llO0afxZrYaul4MOZSUBtDrjj8rcsuCnudZD18tBhrJyAOpn/IvxhS8QwJb/8IMOZeUAPP22HG/4pR2w172HblRDWSkAH0+0f8YfSvi2BeUQwg8ylJUBMJAVsL4S/a5HNGyVoLzR/o4nqqGsDID57+NtPeVXne94ohjKygBIq00CIJINAP8YWfYqY4o6q1djAJDhRdmFMkU92B/HE5DhI7ILZYp6ciyOJ+AC76brasSpn3MYXzjRA0DhNV2yVxtTzBM3Ol/9vgHg9Vx4TZfsopkizg1WoXDfjQ/AEQjX8aYo2QEwiW0HV77f8AMBODoT8KYovKwoDXcJZXuq9d3OxFgVpn30/NABeCnoL2gm3ATAIADSV6FJT4D8IMyktiD8Y2TZRZqqOu9UYgDgFqUXaqhpX1cV+AAwIrtQU1EXDGcwegBTtW68KUp2saZixutqHudrb0UOoA7BcHOyCzYVM3aGrriE13PhNV2yizYVccFwHga6N843hLx7HR+91Aafd/Zw5cce/ikzYRh3AAXDESlY7QJrNfPOkK8rykgkEolEIpFIJBKJRCKRSF1J13+hSHCjDfyvKgAAAABJRU5ErkJggg=="></img>
-              <p className="mb-2 text-2xl text-gray-500 dark:text-gray-400 invisible md:visible">
+              <p className="mb-2 text-2xl text-gray-500 dark:text-gray-400 text-center md:visible">
                 Drop your image here or
                 <span
                   className="text-blue-600"
diff --git a/src/components/BranchManager/Sidebar/index.tsx b/src/components/BranchManager/Sidebar/index.tsx
index b29f58e..10b065b 100644
--- a/src/components/BranchManager/Sidebar/index.tsx
+++ b/src/components/BranchManager/Sidebar/index.tsx
@@ -7,6 +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';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -113,9 +114,21 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
               </li>
               <li>
                 <NavLink
-                  to="/branch-manager/Foods"
+                  to="/branch-manager/categories"
                   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/Foods') &&
+                    pathname.includes('/branch-manager/categories') &&
+                    'bg-yellow-100 dark:bg-meta-4'
+                  }`}
+                >
+                  <TagIcon className="w-6 h-6" />
+                  Categories
+                </NavLink>
+              </li>
+              <li>
+                <NavLink
+                  to="/branch-manager/foods"
+                  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/foods') &&
                     'bg-yellow-100 dark:bg-meta-4'
                   }`}
                 >
diff --git a/src/components/User/AllFoodItems/index.tsx b/src/components/User/AllFoodItems/index.tsx
index 0896e3e..3a8874f 100644
--- a/src/components/User/AllFoodItems/index.tsx
+++ b/src/components/User/AllFoodItems/index.tsx
@@ -101,7 +101,7 @@ function index() {
               }}
             >
               <div>
-                <img src={Food} alt="" className="w-[100%]" />
+                <img src={_.image} alt="" className="w-[100%]" />
               </div>
 
               <div className="px-3 mt-2">
diff --git a/src/components/User/FoodItem/index.tsx b/src/components/User/FoodItem/index.tsx
index 9757d92..ccc9ab1 100644
--- a/src/components/User/FoodItem/index.tsx
+++ b/src/components/User/FoodItem/index.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import Food from '@images/product/pizza.png';
 import Star from './Star';
 
 import TextButtonGroup from './TextButtonGroup';
@@ -54,7 +53,7 @@ function index({ id }: Props) {
         }}
       >
         <div>
-          <img src={Food} alt="" className="w-[100%]" />
+          <img src={item.image} alt="" className="w-[100%]" />
         </div>
 
         <div className="w-[70%]">
diff --git a/src/pages/BranchManager/Categories/AddCategories.tsx b/src/pages/BranchManager/Categories/AddCategories.tsx
new file mode 100644
index 0000000..efe187c
--- /dev/null
+++ b/src/pages/BranchManager/Categories/AddCategories.tsx
@@ -0,0 +1,13 @@
+import CategoryForm from '@/components/BranchManager/Forms/DynamicForm/CategoryForm';
+
+const AddCategories: 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">
+        <CategoryForm />
+      </div>
+    </>
+  );
+};
+
+export default AddCategories;
diff --git a/src/pages/BranchManager/FoodList/DiscountList.tsx b/src/pages/BranchManager/FoodList/DiscountList.tsx
index 464fa92..eabaed9 100644
--- a/src/pages/BranchManager/FoodList/DiscountList.tsx
+++ b/src/pages/BranchManager/FoodList/DiscountList.tsx
@@ -341,12 +341,8 @@ export default function App() {
             onClear={() => setFilterValue("")}
             onValueChange={onSearchChange}
           />
-          <Button
-            className="bg-primary text-background rounded-md px-10 py-2"
-            endContent={<PlusIcon />}
-            size="sm"
-          >
-            Add New
+          <Button className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 mt-8 px-10">
+            Add New Discount
           </Button>
         </div>
         <div className="flex justify-between items-center">
@@ -440,7 +436,7 @@ export default function App() {
       </TableHeader>
       <TableBody items={sortedItems}>
         {(item) => (
-          <TableRow key={item.DiscountId}>
+          <TableRow key={item.DiscountId} className="hover:bg-gray cursor-pointer">
             {(columnKey) => (
               <TableCell>{renderCell(item, columnKey)}</TableCell>
             )}
diff --git a/src/pages/BranchManager/FoodList/index.tsx b/src/pages/BranchManager/FoodList/index.tsx
index ed361ce..b52ae5b 100644
--- a/src/pages/BranchManager/FoodList/index.tsx
+++ b/src/pages/BranchManager/FoodList/index.tsx
@@ -49,467 +49,28 @@ type Food = {
   foodId: string;
   name: string;
   price: number;
-  availability: string;
+  availability: number;
   cafeId: string;
   category: string;
   discountStatus: string;
   discountId: string;
-  features: { feature: string; amount: string }[];
+  features: { name: string; levels: string[]; additionalPrices: number[] }[];
+};
+
+const fetchItems = async () => {
+  try {
+    const apiUrl = (import.meta as any).env.VITE_API_URL;
+    const response = await fetch(`${apiUrl}/food`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch item');
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching item:', error);
+  }
 };
 
-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' },
@@ -524,6 +85,7 @@ const columns = [
 
 export default function FoodList() {
   const navigate = useNavigate();
+  const [foods, setFoods] = React.useState<Food[]>([]);
   const [filterValue, setFilterValue] = React.useState('');
   const [visibleColumns, setVisibleColumns] = React.useState(
     new Set(INITIAL_VISIBLE_COLUMNS),
@@ -536,9 +98,17 @@ export default function FoodList() {
   const [page, setPage] = React.useState(1);
   const hasSearchFilter = Boolean(filterValue);
 
-  const headerColumns = React.useMemo(() => {
-    // if (visibleColumns === 'all') return columns;
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetchItems();
+      if (data) {
+        setFoods(data);
+      }
+    };
+    fetchData();
+  }, []);
 
+  const headerColumns = React.useMemo(() => {
     return columns.filter((column) =>
       Array.from(visibleColumns).includes(column.uid),
     );
@@ -576,17 +146,29 @@ export default function FoodList() {
   }, [sortDescriptor, items]);
 
   const renderCell = React.useCallback((food: any, columnKey: any) => {
-    const cellValue = food[columnKey as keyof typeof food];
+    const cellValue = food[columnKey as keyof Food];
 
     switch (columnKey) {
       case 'name':
         return cellValue;
       case 'price':
         return `$${cellValue}`;
+      case 'availability':
+        return cellValue === 1 ? 'Available' : 'Not Available';
+      case 'discountStatus':
+        return cellValue === 1 ? 'Discounted' : 'Not Discounted';
+      case 'discountId':
+        return cellValue ? cellValue : 'N/A';
       case 'features':
-        return (cellValue as { feature: string; amount: string }[])
-          .map((f) => `${f.feature}: ${f.amount}`)
-          .join(', ');
+        return (
+          <div>
+            {food.features.map((feature: any) => (
+              <div key={feature.name}>
+                <strong>{feature.name}</strong>: {feature.levels.join(', ')}
+              </div>
+            ))}
+          </div>
+        );
       case 'actions':
         return (
           <div className="relative flex justify-end items-center gap-2">
@@ -597,8 +179,14 @@ export default function FoodList() {
                 </Button>
               </DropdownTrigger>
               <DropdownMenu className="bg-black text-white">
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem
+                  onClick={() => navigate(`/foodItems/viewfood/${food.id}`)}
+                >
+                  View
+                </DropdownItem>
+                <DropdownItem onClick={() => navigate(`edit/${food.id}`)}>
+                  Edit
+                </DropdownItem>
                 <DropdownItem>Delete</DropdownItem>
               </DropdownMenu>
             </Dropdown>
@@ -641,6 +229,9 @@ export default function FoodList() {
   }, []);
 
   const topContent = React.useMemo(() => {
+    if (!foods.length) {
+      return <div>Loading...</div>;
+    }
     return (
       <div className="flex flex-col gap-4">
         <h1 className="text-2xl text-white font-bold">Food List</h1>
@@ -655,14 +246,10 @@ export default function FoodList() {
             onValueChange={onSearchChange}
           />
           <Button
-            color="primary"
-            endContent={<PlusIcon />}
-            className="rounded"
-            onClick={() => {
-              navigate('add');
-            }}
+            className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-lg h-8 mt-8 px-10"
+            onClick={() => navigate('add')}
           >
-            Add New
+            Add New Item
           </Button>
         </div>
         <div className="flex justify-between items-center">
@@ -699,7 +286,6 @@ export default function FoodList() {
           </Button>
           <Pagination
             isCompact
-            // showControls
             showShadow
             color="primary"
             page={page}
@@ -725,31 +311,27 @@ export default function FoodList() {
       isHeaderSticky
       bottomContent={bottomContent}
       bottomContentPlacement="outside"
-      classNames={{
-        wrapper: 'max-h-[382px]',
-      }}
-      // sortDescriptor={sortDescriptor}
       topContent={topContent}
-      topContentPlacement="outside"
+      // sortDescriptor={sortDescriptor}
       // onSortChange={setSortDescriptor}
+      className="w-full"
     >
-      <TableHeader columns={headerColumns} className="bg-gray">
+      <TableHeader columns={headerColumns}>
         {(column) => (
           <TableColumn
             key={column.uid}
             align={column.uid === 'actions' ? 'center' : 'start'}
+            allowsSorting
           >
             {column.name}
           </TableColumn>
         )}
       </TableHeader>
-      <TableBody emptyContent={'No foods found'} items={sortedItems}>
+      <TableBody items={sortedItems}>
         {(item) => (
-          <TableRow key={item.id} className="hover:bg-gray cursor-pointer">
+          <TableRow key={item.id}>
             {(columnKey) => (
-              <TableCell className=" px-4 py-3">
-                {renderCell(item, columnKey)}
-              </TableCell>
+              <TableCell>{renderCell(item, columnKey)}</TableCell>
             )}
           </TableRow>
         )}
diff --git a/src/pages/BranchManager/Foods/index.tsx b/src/pages/BranchManager/Foods/AddFood.tsx
similarity index 80%
rename from src/pages/BranchManager/Foods/index.tsx
rename to src/pages/BranchManager/Foods/AddFood.tsx
index 3dbecd5..433a8a1 100644
--- a/src/pages/BranchManager/Foods/index.tsx
+++ b/src/pages/BranchManager/Foods/AddFood.tsx
@@ -1,6 +1,6 @@
 import DynamicForm from '@/components/BranchManager/Forms/DynamicForm';
 
-const Foods: React.FC = () => {
+const AddFoods: 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">
@@ -10,4 +10,4 @@ const Foods: React.FC = () => {
   );
 };
 
-export default Foods;
+export default AddFoods;
diff --git a/src/pages/BranchManager/Foods/EditFood.tsx b/src/pages/BranchManager/Foods/EditFood.tsx
new file mode 100644
index 0000000..b02f89c
--- /dev/null
+++ b/src/pages/BranchManager/Foods/EditFood.tsx
@@ -0,0 +1,15 @@
+import EditForm from '@/components/BranchManager/Forms/DynamicForm/EditForm';
+import { useParams } from 'react-router-dom';
+
+const EditFoods: React.FC = () => {
+  const { foodId } = useParams<{ foodId?: 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">
+        <EditForm id={foodId} />
+      </div>
+    </>
+  );
+};
+
+export default EditFoods;