diff --git a/alimento-nextjs/components/multistepForm/components/formControl.tsx b/alimento-nextjs/components/multistepForm/components/formControl.tsx
new file mode 100644
index 0000000..ce96561
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/components/formControl.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+// Define the type for the props
+interface FormControlProps {
+  type: string;
+  id: string;
+  label: string;
+  placeholder: string;
+  value: string;
+  onchange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  valid: boolean;
+}
+
+const FormControl: React.FC<FormControlProps> = ({
+  type,
+  id,
+  label,
+  placeholder,
+  value,
+  onchange,
+  valid,
+}) => {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex">
+        <div className="mr-auto">
+          <label className="text-primary-marineBlue font-medium" htmlFor={id}>
+            {label}
+          </label>
+        </div>
+        {valid ? null : (
+          <div>
+            <label className="text-red-500 font-medium" htmlFor={id}>
+              This field is required
+            </label>
+          </div>
+        )}
+      </div>
+      <input
+        id={id}
+        className={
+          valid
+            ? 'w-full p-2 rounded-lg text-lg  outline-none focus:border-primary-purplishBlue duration-700 border border-secondary-lightGray'
+            : 'w-full p-2 rounded-lg text-lg  outline-none focus:border-primary-strawberryRed duration-700 border border-primary-strawberryRed'
+        }
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onchange}
+      />
+    </div>
+  );
+};
+
+export default FormControl;
diff --git a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
index cd48a76..bb2a25a 100644
--- a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
+++ b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
@@ -11,7 +11,7 @@ export const data = [
     },
     {
       id: 3,
-      step: 'step 4',
+      step: 'step 3',
       title: 'select tags',
     },
   ];
diff --git a/alimento-nextjs/components/multistepForm/components/tagSelector.tsx b/alimento-nextjs/components/multistepForm/components/tagSelector.tsx
new file mode 100644
index 0000000..e506703
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/components/tagSelector.tsx
@@ -0,0 +1,66 @@
+import {
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectContent,
+    SelectItem,
+  } from "@/components/ui/select";
+import { useGlobalDish } from "@/context/dishFormContext";
+  import { Tag } from "@prisma/client";
+  import { useState } from "react";
+  
+  const TagSelector = () => {
+    const tags = Object.values(Tag)
+    const {dishTags,setDishTags} = useGlobalDish()
+  
+    const handleTagSelect = (tag:Tag) => {
+      if (!dishTags.includes(tag)) {
+        setDishTags([...dishTags, tag]);
+      }
+    };
+  
+    const handleRemoveTag = (tag:Tag) => {
+      setDishTags(dishTags.filter((t) => t !== tag));
+    };
+  
+    return (
+      <div>
+        <div className="mb-2">
+          <Select onValueChange={handleTagSelect}>
+            <SelectTrigger className="w-64">
+              <SelectValue placeholder="Select tags" />
+            </SelectTrigger>
+            <SelectContent>
+              {tags.map((tag) => (
+                <SelectItem key={tag} value={tag}>
+                  {tag}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+  
+        {/* Selected Tags */}
+        <div className="flex flex-wrap gap-2 mt-2">
+          {dishTags.map((tag) => (
+            <span
+              key={tag}
+              className="bg-blue-200 text-blue-800 px-3 py-1 rounded-full flex items-center space-x-2"
+            >
+              <span>{tag}</span>
+              <button
+                type="button"
+                onClick={() => handleRemoveTag(tag)}
+                className="text-sm text-blue-600"
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+  
+  export default TagSelector;
+  
\ No newline at end of file
diff --git a/alimento-nextjs/components/multistepForm/pages/formPage1.tsx b/alimento-nextjs/components/multistepForm/pages/formPage1.tsx
new file mode 100644
index 0000000..8b2ab7b
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/pages/formPage1.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { useGlobalDish } from '@/context/dishFormContext';
+import FormControl from '../components/formControl';
+
+const FormPage1 = () => {
+  const {
+    dishName,
+    setDishName,
+    dishPrice,
+    setDishPrice,
+    dishDescription,
+    setDishDescription,
+
+    validDishName,
+    setValidDishName,
+    validDishPrice,
+    setValidDishPrice,
+    validDishDescription,
+    setValidDishDescription,
+  } = useGlobalDish();
+
+  const setDishNameLogic = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDishName(e.target.value);
+    setValidDishName(e.target.value.length >= 1);
+  };
+
+  const setDishDescriptionLogic = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setDishDescription(e.target.value);
+    setValidDishDescription(e.target.value.length >= 1);
+  };
+
+  const setDishPriceLogic = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDishPrice(Number(e.target.value));
+    setValidDishPrice(e.target.value.length >= 1);
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <h1 className="text-primary-marineBlue font-bold text-[1.6rem] md:text-4xl leading-9">
+        Dish Info
+      </h1>
+      <h3 className="text-gray-400 mt-2">
+        Please provide your Dish name, description and price
+      </h3>
+
+      <div className="flex flex-col gap-5">
+        <FormControl
+          label={'Dish Title'}
+          type={'text'}
+          id={'dishName'}
+          placeholder={'pizza'}
+          onchange={setDishNameLogic}
+          value={dishName}
+          valid={validDishName}
+        />
+        <FormControl
+          label={'Dish Description'}
+          type={'text'}
+          id={'dishDescription'}
+          placeholder={'large - 8 slices, margherita'}
+          onchange={setDishDescriptionLogic}
+          value={dishDescription}
+          valid={validDishDescription}
+        />
+        <FormControl
+          label={'Dish Price'}
+          type={'number'}
+          id={'dishPrice'}
+          placeholder={'e.g. example@upi'}
+          onchange={setDishPriceLogic}
+          value={dishPrice.toString()}
+          valid={validDishPrice}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FormPage1;
diff --git a/alimento-nextjs/components/multistepForm/pages/formPage2.tsx b/alimento-nextjs/components/multistepForm/pages/formPage2.tsx
new file mode 100644
index 0000000..89cdd7f
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/pages/formPage2.tsx
@@ -0,0 +1,47 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+  } from '@/components/ui/dropdown-menu';
+import { useGlobalDish } from '@/context/dishFormContext';
+import { Category, Prisma } from '@prisma/client';
+  import { ChevronDown } from 'lucide-react';
+  
+  const categories =Object.values(Category)
+
+  const FormPage2 = () => {
+    const { dishCategory,setDishCategory } = useGlobalDish();
+  
+    return (
+      <div className="h-3/4 flex  flex-col items-start gap-8 justify-start">
+        <h1 className="text-primary-marineBlue font-bold text-[1.6rem] md:text-4xl leading-9">
+          Select Category
+        </h1>
+        <h3 className="text-gray-400 mt-2">
+          Please select the most appropriate category for your dish
+        </h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger className="bg-black h-10 text-gray-200 w-full rounded-full flex items-center justify-center">
+            {dishCategory || 'Category'} <ChevronDown />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>
+              Select the Category for your dish
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {categories.map((category)=>(
+                <DropdownMenuItem key={category} onClick={() => setDishCategory(category)}>
+                {category}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  };
+  
+  export default FormPage2;
+  
\ No newline at end of file
diff --git a/alimento-nextjs/components/multistepForm/pages/formPage3.tsx b/alimento-nextjs/components/multistepForm/pages/formPage3.tsx
new file mode 100644
index 0000000..a7bf4e4
--- /dev/null
+++ b/alimento-nextjs/components/multistepForm/pages/formPage3.tsx
@@ -0,0 +1,19 @@
+import TagSelector from '../components/tagSelector';
+
+  const FormPage3 = () => {
+  
+    return (
+      <div className="h-3/4 flex  flex-col items-start gap-8 justify-start">
+        <h1 className="text-primary-marineBlue font-bold text-[1.6rem] md:text-4xl leading-9">
+          Select Tags
+        </h1>
+        <h3 className="text-gray-400 mt-2">
+          Please select the most appropriate tags for your dish
+        </h3>
+        <TagSelector/>
+      </div>
+    );
+  };
+  
+  export default FormPage3;
+  
\ No newline at end of file
diff --git a/alimento-nextjs/components/multistepForm/pages/main.tsx b/alimento-nextjs/components/multistepForm/pages/main.tsx
index 560c430..194431a 100644
--- a/alimento-nextjs/components/multistepForm/pages/main.tsx
+++ b/alimento-nextjs/components/multistepForm/pages/main.tsx
@@ -2,8 +2,11 @@
 import { useGlobalDish } from '@/context/dishFormContext';
 import { MouseEventHandler, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
+import FormPage1 from './formPage1';
+import FormPage2 from './formPage2';
+import TagSelector from './formPage3';
 
-const Main = ({ sellerId }: { sellerId: string }) => {
+const Main = ({ VendorId }: { VendorId: string }) => {
   const {
 
     dishName,
@@ -19,6 +22,8 @@ const Main = ({ sellerId }: { sellerId: string }) => {
     formCompleted,
     completed,
     setCompleted,
+
+    submitListingForm
   } = useGlobalDish();
 
   // Use useEffect to update completed based on currentStep
@@ -70,7 +75,9 @@ const Main = ({ sellerId }: { sellerId: string }) => {
     <div className="md:overflow-hidden md:min-h-full md:shadow-none shadow-md mx-auto md:m-0 rounded-xl md:rounded-none md:w-full w-[100%] md:bg-transparent min-h-[400px] bg-white z-10 mt-[84px]">
       <form className="md:mx-16 md:my-0 mx-6 my-6 py-0 md:py-2 relative h-full">
         <Toaster />
-        {currentStep === 1 && < div> The Forms will go Here </div>}
+        {currentStep === 1 && <FormPage1/>}
+        {currentStep === 2 && <FormPage2/>}
+        {currentStep === 3 && <TagSelector/>}
         {!formCompleted && (
           <footer className="md:block hidden w-full left-0 right-0 bottom-0">
             <div className="flex">
@@ -90,7 +97,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
                     currentStep === 3
                       ? e => {
                           e.preventDefault();
-                         
+                          submitListingForm(VendorId)
                         }
                       : nextStep
                   }
@@ -124,6 +131,7 @@ const Main = ({ sellerId }: { sellerId: string }) => {
                     currentStep === 3
                       ? e => {
                           e.preventDefault();
+                          submitListingForm(VendorId)
                         }
                       : nextStep
                   }
diff --git a/alimento-nextjs/components/multistepForm/pages/sidebar.tsx b/alimento-nextjs/components/multistepForm/pages/sidebar.tsx
index b218129..9eba755 100644
--- a/alimento-nextjs/components/multistepForm/pages/sidebar.tsx
+++ b/alimento-nextjs/components/multistepForm/pages/sidebar.tsx
@@ -70,7 +70,7 @@ const Sidebar = () => {
 
   return (
     <>
-      <aside className="bg-[url('/pngFood.png')] bg-cover bg-contain absolute top-0 left-0 right-0 md:relative md:bg-desktop h-[50vh] md:h-full p-8 overflow-hidden md:rounded-xl gap-4 md:gap-0 w-screen md:w-[42.5%] flex flex-row md:flex-col items-start md:justify-start justify-center">
+      <aside className="bg-[url('/pngFood.png')] bg-contain absolute top-0 left-0 right-0 md:relative md:bg-desktop h-[50vh] md:h-full p-8 overflow-hidden md:rounded-xl gap-4 md:gap-0 w-screen md:w-[42.5%] flex flex-row md:flex-col items-start md:justify-start justify-center">
         {data.map((data, index) => {
           const { id, step, title } = data;
 
diff --git a/alimento-nextjs/components/multistepForm/setupDishes.tsx b/alimento-nextjs/components/multistepForm/setupDishes.tsx
index 75576a6..af20941 100644
--- a/alimento-nextjs/components/multistepForm/setupDishes.tsx
+++ b/alimento-nextjs/components/multistepForm/setupDishes.tsx
@@ -2,6 +2,7 @@
 import React from "react";
 import Image from "next/image";
 import Sidebar from "./pages/sidebar";
+import Main from "./pages/main";
 
 const SetUpDishes = ({ VendorId }: { VendorId: string }) => {
   return (
@@ -20,7 +21,7 @@ const SetUpDishes = ({ VendorId }: { VendorId: string }) => {
 
         <div className="md:gray-200  bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md absolute md:relative p-4 flex md:flex-row flex-col md:max-h-[550px] md:max-w-[900px] h-full w-full">
           <Sidebar />
-          {/* <Main VendorId={VendorId} /> */}
+          <Main VendorId={VendorId} />
         </div>
       </main>
     </>
diff --git a/alimento-nextjs/components/ui/dropdown-menu.tsx b/alimento-nextjs/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..eb4b1cd
--- /dev/null
+++ b/alimento-nextjs/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/alimento-nextjs/components/ui/select.tsx b/alimento-nextjs/components/ui/select.tsx
new file mode 100644
index 0000000..ed621d2
--- /dev/null
+++ b/alimento-nextjs/components/ui/select.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/alimento-nextjs/context/dishFormContext.tsx b/alimento-nextjs/context/dishFormContext.tsx
index 4aef9c1..122b178 100644
--- a/alimento-nextjs/context/dishFormContext.tsx
+++ b/alimento-nextjs/context/dishFormContext.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { createDish } from "@/actions/dish/dishCREATE";
 import { Category, Tag } from "@prisma/client";
 import {
   createContext,
@@ -7,6 +8,7 @@ import {
   useContext,
   useState,
 } from "react";
+import toast from "react-hot-toast";
 
 interface GlobalContextType {
   currentStep: number;
@@ -41,6 +43,8 @@ interface GlobalContextType {
 
   formCompleted: boolean;
   setFormCompleted: (completed: boolean) => void;
+
+  submitListingForm: (vendorId:string)=>void
 }
 
 export const GlobalDishContext = createContext<GlobalContextType | undefined>(
@@ -76,6 +80,85 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
   const [checkedBox, setCheckedBox] = useState(false);
   const [formCompleted, setFormCompleted] = useState(false);
 
+  const submitListingForm = async (vendorId:string) => {
+
+    let allValid = true;
+  
+    // Validate dish name
+    if (dishName.trim().length < 1) {
+      setValidDishName(false);
+      allValid = false;
+    } else {
+      setValidDishName(true);
+    }
+  
+    // Validate dish price
+    if (dishPrice <= 0) {
+      setValidDishPrice(false);
+      allValid = false;
+    } else {
+      setValidDishPrice(true);
+    }
+  
+    // Validate dish description
+    if (dishDescription.trim().length <= 0) {
+      setValidDishDescription(false);
+      allValid = false;
+    } else {
+      setValidDishDescription(true);
+    }
+  
+    // Validate dish category
+    if (!Object.values(Category).includes(dishCategory)) {
+      setValidDishCategory(false);
+      allValid = false;
+    } else {
+      setValidDishCategory(true);
+    }
+  
+    // Validate dish tags
+    if (dishTags.length === 0) {
+      setValidDishTags(false);
+      allValid = false;
+    } else {
+      setValidDishTags(true);
+    }
+  
+    // If all fields are valid, proceed with submission
+    if (allValid) {
+      setFormCompleted(true);
+  
+      try {
+        if (!vendorId) {
+          console.log('No seller ID provided');
+          return;
+        }
+  
+        const response = await createDish({
+            name: dishName,
+            price: dishPrice,
+            description: dishDescription,
+            category: dishCategory,
+            tags: dishTags,
+            vendorId:vendorId
+        });
+  
+        if (!response.data) {
+          console.error('Error submitting listing.');
+          return;
+        }
+  
+        toast.success('Listing submitted successfully:', response.data);
+        window.location.pathname = `/vendor/${vendorId}`;
+      } catch (error) {
+        toast.error('Error submitting listing');
+      }
+    } else {
+      toast.error('Form is not valid.');
+    }
+  };
+  
+
   return (
     <GlobalDishContext.Provider
       value={{
@@ -110,6 +193,8 @@ export const GlobalDishProvider = ({ children }: { children: ReactNode }) => {
         setCheckedBox,
         formCompleted,
         setFormCompleted,
+
+        submitListingForm
       }}
     >
       {children}
diff --git a/alimento-nextjs/package.json b/alimento-nextjs/package.json
index 779b2be..492a6f0 100644
--- a/alimento-nextjs/package.json
+++ b/alimento-nextjs/package.json
@@ -11,8 +11,10 @@
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
     "@prisma/client": "^5.21.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@types/nodemailer": "^6.4.16",
     "axios": "^1.7.7",