diff --git a/Frontend/public/images/plant-1573.svg b/Frontend/public/images/plant-1573.svg
new file mode 100644
index 0000000..1570b1f
--- /dev/null
+++ b/Frontend/public/images/plant-1573.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+
+<defs>
+</defs>
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+	<path d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<polygon points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform="  matrix(1 0 0 1 0 0) "/>
+	<polyline points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform="  matrix(1 0 0 1 0 0) "/>
+	<polygon points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;" transform="  matrix(1 0 0 1 0 0) "/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/Frontend/src/components/Piechart.jsx b/Frontend/src/components/Piechart.jsx
index 3c1a540..000802c 100644
--- a/Frontend/src/components/Piechart.jsx
+++ b/Frontend/src/components/Piechart.jsx
@@ -93,7 +93,7 @@ const Piechart = () => {
     );
     chart.render();
 
-    // Get all the checkboxes by their class name
+    // Get all the checkboxes by their className name
     const checkboxes = document.querySelectorAll(
       '#devices input[type="checkbox"]'
     );
@@ -130,16 +130,16 @@ const Piechart = () => {
 
   return (
     <>
-      <div class="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
-        <div class="flex justify-between mb-3">
-          <div class="flex justify-center items-center">
-            <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white pe-1">
+      <div className="max-w-sm w-full bg-white rounded-lg shadow-sm dark:bg-gray-800 p-4 md:p-6">
+        <div className="flex justify-between mb-3">
+          <div className="flex justify-center items-center">
+            <h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white pe-1">
               Cost Analysis
             </h5>
             <svg
               data-popover-target="chart-info"
               data-popover-placement="bottom"
-              class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-pointer ms-1"
+              className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white cursor-pointer ms-1"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
@@ -151,10 +151,10 @@ const Piechart = () => {
               data-popover
               id="chart-info"
               role="tooltip"
-              class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400"
+              className="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400"
             >
-              <div class="p-3 space-y-2">
-                <h3 class="font-semibold text-gray-900 dark:text-white">
+              <div className="p-3 space-y-2">
+                <h3 className="font-semibold text-gray-900 dark:text-white">
                   Activity growth - Incremental
                 </h3>
                 <p>
@@ -163,7 +163,7 @@ const Piechart = () => {
                   stagnating chart signifies a significant decrease of community
                   activity.
                 </p>
-                <h3 class="font-semibold text-gray-900 dark:text-white">
+                <h3 className="font-semibold text-gray-900 dark:text-white">
                   Calculation
                 </h3>
                 <p>
@@ -174,11 +174,11 @@ const Piechart = () => {
                 </p>
                 <a
                   href="#"
-                  class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline"
+                  className="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700 hover:underline"
                 >
                   Read more{" "}
                   <svg
-                    class="w-2 h-2 ms-1.5 rtl:rotate-180"
+                    className="w-2 h-2 ms-1.5 rtl:rotate-180"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -186,9 +186,9 @@ const Piechart = () => {
                   >
                     <path
                       stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
                       d="m1 9 4-4-4-4"
                     />
                   </svg>
@@ -202,10 +202,10 @@ const Piechart = () => {
               type="button"
               data-tooltip-target="data-tooltip"
               data-tooltip-placement="bottom"
-              class="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
+              className="hidden sm:inline-flex items-center justify-center text-gray-500 w-8 h-8 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
             >
               <svg
-                class="w-3.5 h-3.5"
+                className="w-3.5 h-3.5"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -213,65 +213,65 @@ const Piechart = () => {
               >
                 <path
                   stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   d="M8 1v11m0 0 4-4m-4 4L4 8m11 4v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3"
                 />
               </svg>
-              <span class="sr-only">Download data</span>
+              <span className="sr-only">Download data</span>
             </button>
             <div
               id="data-tooltip"
               role="tooltip"
-              class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
+              className="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700"
             >
               Download CSV
-              <div class="tooltip-arrow" data-popper-arrow></div>
+              <div className="tooltip-arrow" data-popper-arrow></div>
             </div>
           </div>
         </div>
 
         <div>
-          <div class="flex" id="devices">
-            <div class="flex items-center me-4">
+          <div className="flex" id="devices">
+            <div className="flex items-center me-4">
               <input
                 id="desktop"
                 type="checkbox"
                 value="desktop"
-                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
               />
               <label
                 for="desktop"
-                class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Desktop
               </label>
             </div>
-            <div class="flex items-center me-4">
+            <div className="flex items-center me-4">
               <input
                 id="tablet"
                 type="checkbox"
                 value="tablet"
-                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
               />
               <label
                 for="tablet"
-                class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Tablet
               </label>
             </div>
-            <div class="flex items-center me-4">
+            <div className="flex items-center me-4">
               <input
                 id="mobile"
                 type="checkbox"
                 value="mobile"
-                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
               />
               <label
                 for="mobile"
-                class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
               >
                 Mobile
               </label>
@@ -279,20 +279,20 @@ const Piechart = () => {
           </div>
         </div>
 
-        <div class="py-6" id="donut-chart"></div>
+        <div className="py-6" id="donut-chart"></div>
 
-        <div class="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
-          <div class="flex justify-between items-center pt-5">
+        <div className="grid grid-cols-1 items-center border-gray-200 border-t dark:border-gray-700 justify-between">
+          <div className="flex justify-between items-center pt-5">
             <button
               id="dropdownDefaultButton"
               data-dropdown-toggle="lastDaysdropdown"
               data-dropdown-placement="bottom"
-              class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
+              className="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-900 text-center inline-flex items-center dark:hover:text-white"
               type="button"
             >
               Last 7 days
               <svg
-                class="w-2.5 m-2.5 ms-1.5"
+                className="w-2.5 m-2.5 ms-1.5"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -300,25 +300,25 @@ const Piechart = () => {
               >
                 <path
                   stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   d="m1 1 4 4 4-4"
                 />
               </svg>
             </button>
             <div
               id="lastDaysdropdown"
-              class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
+              className="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700"
             >
               <ul
-                class="py-2 text-sm text-gray-700 dark:text-gray-200"
+                className="py-2 text-sm text-gray-700 dark:text-gray-200"
                 aria-labelledby="dropdownDefaultButton"
               >
                 <li>
                   <a
                     href="#"
-                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                   >
                     Yesterday
                   </a>
@@ -326,7 +326,7 @@ const Piechart = () => {
                 <li>
                   <a
                     href="#"
-                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                   >
                     Today
                   </a>
@@ -334,7 +334,7 @@ const Piechart = () => {
                 <li>
                   <a
                     href="#"
-                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                   >
                     Last 7 days
                   </a>
@@ -342,7 +342,7 @@ const Piechart = () => {
                 <li>
                   <a
                     href="#"
-                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                   >
                     Last 30 days
                   </a>
@@ -350,7 +350,7 @@ const Piechart = () => {
                 <li>
                   <a
                     href="#"
-                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                    className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                   >
                     Last 90 days
                   </a>
@@ -359,11 +359,11 @@ const Piechart = () => {
             </div>
             <a
               href="#"
-              class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500  hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2"
+              className="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700 dark:hover:text-blue-500  hover:bg-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700 px-3 py-2"
             >
               Traffic analysis
               <svg
-                class="w-2.5 h-2.5 ms-1.5 rtl:rotate-180"
+                className="w-2.5 h-2.5 ms-1.5 rtl:rotate-180"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -371,9 +371,9 @@ const Piechart = () => {
               >
                 <path
                   stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
                   d="m1 9 4-4-4-4"
                 />
               </svg>
diff --git a/Frontend/src/components/TotalSpent.jsx b/Frontend/src/components/TotalSpent.jsx
new file mode 100644
index 0000000..5756084
--- /dev/null
+++ b/Frontend/src/components/TotalSpent.jsx
@@ -0,0 +1,19 @@
+const TotalSpent = () => {
+  return (
+    <>
+      <a
+        href="#"
+        className="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"
+        style={{ backgroundImage: `url('./images/plant-1573.png')` }}
+      >
+        <h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
+          100,000
+        </h5>
+        <p className="font-normal text-gray-700 dark:text-gray-400">
+          This is the total cost which you spent on this farm
+        </p>
+      </a>
+    </>
+  );
+};
+export default TotalSpent;
diff --git a/Frontend/src/main.jsx b/Frontend/src/main.jsx
index 31563b6..cd79189 100644
--- a/Frontend/src/main.jsx
+++ b/Frontend/src/main.jsx
@@ -61,4 +61,3 @@ createRoot(document.getElementById("root")).render(
     </Provider>
   </StrictMode>
 );
-d;
diff --git a/Frontend/src/pages/Home/Hero.jsx b/Frontend/src/pages/Home/Hero.jsx
index 2534b2e..882798b 100644
--- a/Frontend/src/pages/Home/Hero.jsx
+++ b/Frontend/src/pages/Home/Hero.jsx
@@ -33,9 +33,9 @@ const Hero = () => {
                       >
                         <path
                           stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
                           d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                         />
                       </svg>
diff --git a/Frontend/src/pages/UserPanel/Dashboard.jsx b/Frontend/src/pages/UserPanel/Dashboard.jsx
index 1edadbd..996ef9c 100644
--- a/Frontend/src/pages/UserPanel/Dashboard.jsx
+++ b/Frontend/src/pages/UserPanel/Dashboard.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Piechart from "../../components/Piechart";
+import TotalSpent from "../../components/TotalSpent";
 
 const Dashboard = () => {
   return (
@@ -197,8 +198,9 @@ const Dashboard = () => {
           </div>
         </div> */}
 
-        <div className="mb-4">
+        <div className="mb-4 flex ">
           <Piechart />
+          <TotalSpent />
         </div>
       </div>
     </>
diff --git a/Frontend/src/pages/UserPanel/Settings.jsx b/Frontend/src/pages/UserPanel/Settings.jsx
index b83ca9d..e1e47d4 100644
--- a/Frontend/src/pages/UserPanel/Settings.jsx
+++ b/Frontend/src/pages/UserPanel/Settings.jsx
@@ -111,9 +111,9 @@ const Settings = () => {
                   >
                     <path
                       stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
                       d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
                     />
                   </svg>