diff --git a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
new file mode 100644
index 0000000..0affb70
--- /dev/null
+++ b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+// import { updateInventoryItem } from "@/api/inventory";
+// import type { UpdateInventoryItemInput } from "@/types";
+
+export function EditInventoryItem() {
+  const [date, setDate] = useState<Date | undefined>();
+  const [open, setOpen] = useState(false);
+  const [itemName, setItemName] = useState("");
+  const [itemType, setItemType] = useState("");
+  const [itemCategory, setItemCategory] = useState("");
+  const [itemQuantity, setItemQuantity] = useState(0);
+  const [itemUnit, setItemUnit] = useState("");
+
+  // const queryClient = useQueryClient();
+
+  // const mutation = useMutation({
+  //   mutationFn: (item: UpdateInventoryItemInput) => UpdateInventoryItem(item),
+  //   onSuccess: () => {
+  //     // Invalidate queries to refresh inventory data.
+  //     queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
+  //     // Reset form fields and close dialog.
+  //     setItemName("");
+  //     setItemType("");
+  //     setItemCategory("");
+  //     setItemQuantity(0);
+  //     setItemUnit("");
+  //     setDate(undefined);
+  //     setOpen(false);
+  //   },
+  // });
+
+  const handleEdit = () => {
+    //   // Basic validation (you can extend this as needed)
+    //   if (!itemName || !itemType || !itemCategory || !itemUnit) return;
+    //   mutation.mutate({
+    //     name: itemName,
+    //     type: itemType,
+    //     category: itemCategory,
+    //     quantity: itemQuantity,
+    //     unit: itemUnit,
+    //   });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="bg-yellow-500 hover:bg-yellow-600">Edit</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit Inventory Item</DialogTitle>
+          <DialogDescription>
+            Edit a plantation or fertilizer item in your inventory.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input
+              id="name"
+              className="col-span-3"
+              value={itemName}
+              onChange={(e) => setItemName(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="type" className="text-right">
+              Type
+            </Label>
+            <Select value={itemType} onValueChange={setItemType}>
+              <SelectTrigger className="col-span-3">
+                <SelectValue placeholder="Select type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>Type</SelectLabel>
+                  <SelectItem value="plantation">Plantation</SelectItem>
+                  <SelectItem value="fertilizer">Fertilizer</SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="category" className="text-right">
+              Category
+            </Label>
+            <Input
+              id="category"
+              className="col-span-3"
+              placeholder="e.g., Seeds, Organic"
+              value={itemCategory}
+              onChange={(e) => setItemCategory(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="quantity" className="text-right">
+              Quantity
+            </Label>
+            <Input
+              id="quantity"
+              type="number"
+              className="col-span-3"
+              value={itemQuantity}
+              onChange={(e) => setItemQuantity(Number(e.target.value))}
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="unit" className="text-right">
+              Unit
+            </Label>
+            <Input
+              id="unit"
+              className="col-span-3"
+              placeholder="e.g., kg, packets"
+              value={itemUnit}
+              onChange={(e) => setItemUnit(e.target.value)}
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="date" className="text-right">
+              Date
+            </Label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant={"outline"}
+                  className={cn(
+                    "col-span-3 justify-start text-left font-normal",
+                    !date && "text-muted-foreground",
+                  )}
+                >
+                  <CalendarIcon className="mr-2 h-4 w-4" />
+                  {date ? format(date, "PPP") : "Pick a date"}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0">
+                <Calendar
+                  mode="single"
+                  selected={date}
+                  onSelect={setDate}
+                  initialFocus
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit" onClick={handleEdit}>
+            Edit Item
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}