diff --git a/Frontend/src/components/Td.jsx b/Frontend/src/components/Td.jsx
new file mode 100644
index 0000000..a64e5bf
--- /dev/null
+++ b/Frontend/src/components/Td.jsx
@@ -0,0 +1,20 @@
+const Td = ({ children }) => {
+  console.log(children);
+  return (
+    <tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
+      <td className="px-6 py-4">{children.name}</td>
+      <td className="px-6 py-4">{children.location}</td>
+      <td className="px-6 py-4">{children.soilType}</td>
+      <td className="px-6 py-4">
+        <a
+          href="#"
+          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+        >
+          Edit
+        </a>
+      </td>
+    </tr>
+  );
+};
+
+export default Td;
diff --git a/Frontend/src/pages/UserPanel/Dashboard.jsx b/Frontend/src/pages/UserPanel/Dashboard.jsx
index 498f29c..4c89b96 100644
--- a/Frontend/src/pages/UserPanel/Dashboard.jsx
+++ b/Frontend/src/pages/UserPanel/Dashboard.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import Piechart from "../../components/monitoring charts/Piechart";
 import TotalSpent from "../../components/TotalSpent";
 import FarmList from "../../components/FarmList";
-import AddFarm from "./AddFarm";
+import AddFarm from "./Farm/AddFarm";
 
 const Dashboard = () => {
   const navigate = useNavigate();
diff --git a/Frontend/src/pages/UserPanel/DeleteFarm.jsx b/Frontend/src/pages/UserPanel/DeleteFarm.jsx
deleted file mode 100644
index ec042b2..0000000
--- a/Frontend/src/pages/UserPanel/DeleteFarm.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-const DeleteFarm = () => {
-    return (
-        
-    )
-};
-export default DeleteFarm;
diff --git a/Frontend/src/pages/UserPanel/Farm/AddFarm.jsx b/Frontend/src/pages/UserPanel/Farm/AddFarm.jsx
new file mode 100644
index 0000000..cf61517
--- /dev/null
+++ b/Frontend/src/pages/UserPanel/Farm/AddFarm.jsx
@@ -0,0 +1,228 @@
+import React, { useState } from "react";
+
+const AddFarm = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [farmName, setFarmName] = useState("");
+  const [location, setLocation] = useState("");
+  const [waterContent, setWaterContent] = useState("");
+  const [soilType, setSoilType] = useState("");
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const farmData = {
+      name: farmName,
+      location,
+      waterContent,
+      soilType,
+    };
+
+    console.log(farmData);
+
+    try {
+      const response = await fetch("http://localhost:8000/api/v1/farm", {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(farmData),
+      });
+
+      const data = await response.json();
+      console.log(data);
+
+      if (!response.ok) {
+        throw new Error("Failed to add farm");
+      }
+
+      setSuccess(true);
+      setError(null);
+      setIsModalOpen(false);
+    } catch (err) {
+      setError(err.message);
+      setSuccess(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+        type="button"
+      >
+        Add New Farm
+      </button>
+
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex items-center justify-center">
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
+            onClick={() => setIsModalOpen(false)}
+          ></div>
+
+          <div className="relative w-full max-w-2xl mx-4">
+            <div className="relative bg-white rounded-xl shadow-lg">
+              {/* Decorative Leaves */}
+              <div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
+                <svg
+                  viewBox="0 0 200 800"
+                  className="absolute right-0 h-full transform translate-x-16 fill-green-100"
+                >
+                  <path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
+                </svg>
+                <svg
+                  viewBox="0 0 200 800"
+                  className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
+                >
+                  <path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
+                </svg>
+
+                <svg
+                  viewBox="0 0 100 100"
+                  className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
+                >
+                  <path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
+                </svg>
+                <svg
+                  viewBox="0 0 100 100"
+                  className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
+                >
+                  <path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
+                </svg>
+              </div>
+
+              {/* Modal Header */}
+              <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
+                <h3 className="text-2xl font-semibold text-gray-800">
+                  Add New Farm
+                </h3>
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
+                >
+                  <svg
+                    className="w-3 h-3"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 14 14"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+                    />
+                  </svg>
+                  <span className="sr-only">Close modal</span>
+                </button>
+              </div>
+
+              {/* Modal Body */}
+              <div className="p-4 md:p-5">
+                <form className="space-y-4" onSubmit={handleSubmit}>
+                  <div>
+                    <label
+                      htmlFor="farmName"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Farm Name
+                    </label>
+                    <input
+                      type="text"
+                      id="farmName"
+                      value={farmName}
+                      onChange={(e) => setFarmName(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter farm name"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="location"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Location
+                    </label>
+                    <input
+                      type="text"
+                      id="location"
+                      value={location}
+                      onChange={(e) => setLocation(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter location"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="waterContent"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Water Content
+                    </label>
+                    <input
+                      type="text"
+                      id="waterContent"
+                      value={waterContent}
+                      onChange={(e) => setWaterContent(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter water content"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label
+                      htmlFor="soilType"
+                      className="block text-sm font-semibold text-gray-700 mb-2"
+                    >
+                      Soil Type
+                    </label>
+                    <input
+                      type="text"
+                      id="soilType"
+                      value={soilType}
+                      onChange={(e) => setSoilType(e.target.value)}
+                      className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
+                      placeholder="Enter soil type"
+                      required
+                    />
+                  </div>
+
+                  <button
+                    type="submit"
+                    className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2"
+                  >
+                    Add Farm
+                  </button>
+
+                  {error && (
+                    <p className="mt-4 text-red-500 text-sm bg-red-50 p-3 rounded-lg">
+                      {error}
+                    </p>
+                  )}
+                  {success && (
+                    <p className="mt-4 text-green-500 text-sm bg-green-50 p-3 rounded-lg">
+                      Farm added successfully!
+                    </p>
+                  )}
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AddFarm;
diff --git a/Frontend/src/pages/UserPanel/Farm/DeleteFarm.jsx b/Frontend/src/pages/UserPanel/Farm/DeleteFarm.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/pages/UserPanel/Farm/Farm.jsx b/Frontend/src/pages/UserPanel/Farm/Farm.jsx
new file mode 100644
index 0000000..cf591d3
--- /dev/null
+++ b/Frontend/src/pages/UserPanel/Farm/Farm.jsx
@@ -0,0 +1,4 @@
+const Farm = () => {
+  return <h1></h1>;
+};
+export default Farm;
diff --git a/Frontend/src/pages/UserPanel/UpdateForm.jsx b/Frontend/src/pages/UserPanel/Farm/UpdateForm.jsx
similarity index 100%
rename from Frontend/src/pages/UserPanel/UpdateForm.jsx
rename to Frontend/src/pages/UserPanel/Farm/UpdateForm.jsx