diff --git a/Frontend/src/components/FarmList.jsx b/Frontend/src/components/FarmList.jsx
index f9cb090..8b647d0 100644
--- a/Frontend/src/components/FarmList.jsx
+++ b/Frontend/src/components/FarmList.jsx
@@ -1,122 +1,52 @@
+import { useEffect, useState } from "react";
+import Td from "./Td";
+
 const FarmList = () => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    fetch("http://localhost:8000/api/v1/farm", {
+      credentials: "include",
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((response) => response.json())
+      .then((data) => setData(data))
+      .catch((error) => console.error(error));
+  }, []);
+
   return (
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+    <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
-            <th scope="col" class="px-6 py-3">
+            <th scope="col" className="px-6 py-3">
               Farm name
             </th>
-            <th scope="col" class="px-6 py-3">
+            <th scope="col" className="px-6 py-3">
               Location
             </th>
-            <th scope="col" class="px-6 py-3">
+            <th scope="col" className="px-6 py-3">
               Type
             </th>
-            <th scope="col" class="px-6 py-3">
+            <th scope="col" className="px-6 py-3">
               Size (acres)
             </th>
-            <th scope="col" class="px-6 py-3">
+            <th scope="col" className="px-6 py-3">
               Action
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr class="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">
-            <th
-              scope="row"
-              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-            >
-              Green Valley Farms
-            </th>
-            <td class="px-6 py-4">California</td>
-            <td class="px-6 py-4">Organic</td>
-            <td class="px-6 py-4">150</td>
-            <td class="px-6 py-4">
-              <a
-                href="#"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-              >
-                Edit
-              </a>
-            </td>
-          </tr>
-          <tr class="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">
-            <th
-              scope="row"
-              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-            >
-              Sunny Acres
-            </th>
-            <td class="px-6 py-4">Texas</td>
-            <td class="px-6 py-4">Conventional</td>
-            <td class="px-6 py-4">200</td>
-            <td class="px-6 py-4">
-              <a
-                href="#"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-              >
-                Edit
-              </a>
-            </td>
-          </tr>
-          <tr class="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">
-            <th
-              scope="row"
-              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-            >
-              Riverside Estates
-            </th>
-            <td class="px-6 py-4">Florida</td>
-            <td class="px-6 py-4">Hydroponic</td>
-            <td class="px-6 py-4">120</td>
-            <td class="px-6 py-4">
-              <a
-                href="#"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-              >
-                Edit
-              </a>
-            </td>
-          </tr>
-          <tr class="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">
-            <th
-              scope="row"
-              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-            >
-              Blueberry Hill
-            </th>
-            <td class="px-6 py-4">Oregon</td>
-            <td class="px-6 py-4">Berry</td>
-            <td class="px-6 py-4">80</td>
-            <td class="px-6 py-4">
-              <a
-                href="#"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-              >
-                Edit
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <th
-              scope="row"
-              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
-            >
-              Sunnybrook Meadows
-            </th>
-            <td class="px-6 py-4">Washington</td>
-            <td class="px-6 py-4">Dairy</td>
-            <td class="px-6 py-4">300</td>
-            <td class="px-6 py-4">
-              <a
-                href="#"
-                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-              >
-                Edit
-              </a>
-            </td>
-          </tr>
+          {data.length > 0 ? (
+            data.map((item) => <Td key={item.id} children={item} />)
+          ) : (
+            <tr>
+              <td colSpan={5} className="text-center">
+                No data available
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
     </div>
diff --git a/Frontend/src/components/TotalSpent.jsx b/Frontend/src/components/TotalSpent.jsx
index 09944e4..e4d0c75 100644
--- a/Frontend/src/components/TotalSpent.jsx
+++ b/Frontend/src/components/TotalSpent.jsx
@@ -5,6 +5,33 @@ const TotalSpent = () => {
         href="#"
         className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
       >
+        <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>
         <h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
           100,000
         </h5>